feat: convert to nextjs

components/Header.tsx

@@ -0,0 +1,32 @@
+import { Database, Sparkles } from 'lucide-react';
+
+export const Header = () => {
+  return (
+    <header className='bg-gradient-to-r from-blue-600 to-indigo-600 fixed top-0 left-0 right-0 z-50'>
+      <div className='max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8'>
+        <div className='flex items-center gap-4'>
+          <div className='p-3 bg-white/10 rounded-xl backdrop-blur-sm'>
+            <Database className='text-white w-8 h-8' />
+          </div>
+          <div>
+            <div className='flex items-center gap-3'>
+              <h1 className='text-2xl font-bold text-white'>
+                Synthetic Consumer Generator
+              </h1>
+              <span className='px-2 py-0.5 text-xs font-medium text-blue-100 bg-white/10 rounded-full backdrop-blur-sm'>
+                Beta
+              </span>
+            </div>
+            <div className='flex items-center gap-2 text-blue-100 mt-1'>
+              <Sparkles className='w-4 h-4' />
+              <p className='text-sm'>
+                Generate realistic customer profiles and purchase histories in
+                seconds
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};