feat: convert to nextjs

components/Footer.tsx

@@ -0,0 +1,32 @@
+import { AlertTriangle, Mail } from 'lucide-react';
+
+export const Footer = () => {
+  return (
+    <footer className='bg-slate-900 fixed bottom-0 left-0 right-0 z-50'>
+      <div className='max-w-[100rem] mx-auto py-4 px-4 sm:px-6 lg:px-8'>
+        <div className='grid grid-cols-1 sm:grid-cols-3 items-center gap-4'>
+          <p className='text-xs text-slate-400 text-center sm:text-left'>
+            All data generated through this platform is AI-generated content
+            intended for testing and development. Any resemblance to real
+            persons, businesses, or events is purely coincidental. Users are
+            responsible for ensuring compliance with applicable laws and
+            regulations.
+          </p>
+          <div className='flex items-center justify-center gap-2 text-amber-400 order-first sm:order-none'>
+            <AlertTriangle className='w-5 h-5' />
+            <p className='font-medium'>Use Responsibly</p>
+          </div>
+          <div className='flex items-center justify-center sm:justify-end gap-2'>
+            <Mail className='w-4 h-4 text-slate-400' />
+            <a
+              href={`mailto:${process.env.NEXT_PUBLIC_CONTACT_EMAIL}`}
+              className='text-sm text-slate-400 hover:text-slate-300'
+            >
+              {process.env.NEXT_PUBLIC_CONTACT_EMAIL}
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};