reafactor: converted the entire thing into a nextjs app

components/Footer.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-
+import Link from 'next/link';
+import Image from 'next/image';
 import logo from '@/assets/images/icon.png';
 
-interface FooterProps {
-  onPrivacyClick?: (e: React.MouseEvent) => void;
-}
-
-const Footer: React.FC<FooterProps> = ({ onPrivacyClick }) => {
+const Footer: React.FC = () => {
   return (
     <footer className="bg-[#0A0C12] pt-16 pb-8 border-t border-gray-800">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -14,10 +11,12 @@ const Footer: React.FC<FooterProps> = ({ onPrivacyClick }) => {
           {/* Brand Column */}
           <div className="col-span-1">
             <div className="flex items-center gap-2 mb-4">
-              <img
+              <Image
                 src={logo}
                 alt="Nemia Logo"
-                className="w-6 h-6 rounded object-contain"
+                width={24}
+                height={24}
+                className="rounded object-contain"
               />
               <span className="font-display font-bold text-lg text-white">
                 Nemia
@@ -32,9 +31,9 @@ const Footer: React.FC<FooterProps> = ({ onPrivacyClick }) => {
           <div className="flex flex-col items-end">
             <h4 className="font-bold text-white mb-4">Legal</h4>
             <ul className="space-y-2 text-sm text-gray-400 text-right">
-              <li><a href="#" onClick={onPrivacyClick} className="hover:text-primary transition-colors">Privacy</a></li>
-              <li><a href="#" className="hover:text-primary transition-colors">Terms</a></li>
-              <li><a href="#" className="hover:text-primary transition-colors">Cookie Policy</a></li>
+              <li><Link href="/privacy" className="hover:text-primary transition-colors">Privacy</Link></li>
+              <li><Link href="#" className="hover:text-primary transition-colors">Terms</Link></li>
+              <li><Link href="#" className="hover:text-primary transition-colors">Cookie Policy</Link></li>
             </ul>
           </div>
         </div>

components/Navbar.tsx

@@ -1,13 +1,13 @@
+"use client";
+
 import React, { useState } from 'react';
 import { Menu, X } from 'lucide-react';
 import logo from '@/assets/images/icon.png';
 import WaitlistModal from './WaitlistModal';
+import Link from 'next/link';
+import Image from 'next/image';
 
-interface NavbarProps {
-  onLogoClick?: (e: React.MouseEvent) => void;
-}
-
-const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
+const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
 
@@ -17,25 +17,27 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16 items-center">
             {/* Logo */}
-            <div
+            <Link
+              href="/"
               className="flex items-center gap-2 cursor-pointer"
-              onClick={onLogoClick}
             >
-              <img
+              <Image
                 src={logo}
                 alt="Nemia Logo"
-                className="w-8 h-8 rounded-lg object-contain"
+                width={32}
+                height={32}
+                className="rounded-lg object-contain"
               />
               <span className="font-display font-bold text-xl tracking-tight text-white">
                 Nemia
               </span>
-            </div>
+            </Link>
 
             {/* Desktop Nav */}
             <div className="hidden md:flex items-center space-x-8">
-              <a href="#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</a>
-              <a href="#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</a>
-              <a href="#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</a>
+              <Link href="/#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</Link>
+              <Link href="/#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</Link>
+              <Link href="/#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</Link>
               <button
                 onClick={() => setIsWaitlistOpen(true)}
                 className="bg-primary text-gray-900 px-5 py-2 rounded-full font-semibold text-sm hover:brightness-110 transition-all shadow-glow"
@@ -60,9 +62,9 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
         {isOpen && (
           <div className="md:hidden bg-surface-dark border-b border-gray-800">
             <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-              <a href="#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</a>
-              <a href="#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</a>
-              <a href="#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</a>
+              <Link href="/#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</Link>
+              <Link href="/#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</Link>
+              <Link href="/#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</Link>
               <button
                 onClick={() => {
                   setIsOpen(false);

components/PrivacyPolicy.tsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
 
-interface PrivacyPolicyProps {
-  onBack: () => void;
-}
-
-const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onBack }) => {
+const PrivacyPolicy: React.FC = () => {
   return (
     <div className="bg-background-dark min-h-screen text-text-light font-sans pt-32 pb-20">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <button
-          onClick={onBack}
+        <Link
+          href="/"
           className="flex items-center gap-2 text-primary hover:text-emerald-400 transition-colors mb-8 group"
         >
           <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
           <span>Back to Home</span>
-        </button>
+        </Link>
 
         <h1 className="text-4xl lg:text-5xl font-display font-bold mb-4 text-white">Privacy Policy for Cardly</h1>
         <p className="text-gray-400 mb-8">Last Updated: 2026-01-01</p>