Update src/app/page.tsx

src/app/page.tsx

@@ -3,15 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import { Calendar, Clock, CreditCard, FileText, Headphones, Key, Lock, MapPin, Search, ShieldCheck, Upload } from "lucide-react";
+import { Headphones, ShieldCheck } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,22 +29,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Services", id: "#services" },
-          name: "Services",
+        { name: "Gallery", id: "#gallery" },
-          id: "#services",
+        { name: "Testimonials", id: "#testimonials" },
-        },
+        { name: "Contact", id: "#contact" },
-        {
-          name: "Requirements",
-          id: "#requirements",
-        },
-        {
-          name: "Track",
-          id: "#tracking",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
       ]}
       brandName="Nigeria Passport"
     />
@@ -54,71 +40,15 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroCentered
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient",
-      }}
       title="Fast, Secure Nigerian Passport Processing"
       description="Apply, renew, or track your passport with ease. Experience a modern, transparent government service portal designed for you."
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/christmas-travel-concept-with-phone_23-2149573118.jpg", alt: "Passport Portal" },
-          src: "http://img.b2bpic.net/free-photo/christmas-travel-concept-with-phone_23-2149573118.jpg",
+        { src: "http://img.b2bpic.net/free-photo/close-up-hand-holding-pakistan-passport-isolated-white-background_505751-5211.jpg", alt: "Passport closeup" },
-          alt: "Passport Portal",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-hand-holding-pakistan-passport-isolated-white-background_505751-5211.jpg",
-          alt: "Passport closeup",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/passport-close-up-airport_23-2151983550.jpg",
-          alt: "Passport at airport",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/two-us-passports-held-hand_23-2151983560.jpg",
-          alt: "Passports in hand",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-adult-traveling-with-vaccination-passport_23-2149351538.jpg",
-          alt: "Traveler with passport",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Start Application",
-          href: "#services",
-        },
-        {
-          text: "Track Application",
-          href: "#tracking",
-        },
       ]}
+      buttons={[{ text: "Start Application", href: "#services" }]}
       buttonAnimation="slide-up"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "Government Verified",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Fast Processing",
-          icon: Clock,
-        },
-        {
-          type: "text-icon",
-          text: "Secure Portal",
-          icon: Lock,
-        },
-        {
-          type: "text-icon",
-          text: "Easy Tracking",
-          icon: Search,
-        },
-        {
-          type: "text-icon",
-          text: "24/7 Support",
-          icon: Headphones,
-        },
-      ]}
     />
   </div>
 
@@ -127,183 +57,55 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
+      negativeCard={{ items: ["Lost/Damaged Replacement", "Data Correction"] }}
-        items: [
+      positiveCard={{ items: ["New Application", "Passport Renewal", "Application Tracking"] }}
-          "Lost/Damaged Replacement",
-          "Data Correction",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "New Application",
-          "Passport Renewal",
-          "Application Tracking",
-        ],
-      }}
       title="Passport Services"
       description="Streamlined processes for all your immigration needs."
     />
   </div>
 
-  <div id="requirements" data-section="requirements">
+  <div id="gallery" data-section="gallery">
-      <PricingCardNine
+    <ProductCardOne 
-      animationType="slide-up"
+      title="Hotel & Facilities"
-      textboxLayout="split"
+      description="Explore our comfortable facilities designed for your convenience."
-      useInvertedBackground={false}
+      gridVariant="three-columns-all-equal-width"
-      plans={[
-        {
-          id: "req-1",
-          title: "Identification",
-          price: "Required",
-          period: "Checklist",
-          features: [
-            "National ID Card",
-            "Birth Certificate",
-            "Age Declaration",
-          ],
-          button: {
-            text: "View Full List",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-world-tourism-day-with-clipboard_23-2148608824.jpg",
-        },
-        {
-          id: "req-2",
-          title: "Verification",
-          price: "Mandatory",
-          period: "Validation",
-          features: [
-            "Passport Photographs",
-            "Guarantor Form",
-            "Letter of Identification",
-          ],
-          button: {
-            text: "Get Forms",
-          },
-          imageSrc: "http://img.b2bpic.net/free-vector/biometric-security-concept_53876-91629.jpg",
-        },
-        {
-          id: "req-3",
-          title: "Payment",
-          price: "Verified",
-          period: "Confirmed",
-          features: [
-            "Payment Confirmation",
-            "Receipt Copy",
-            "Bank Verification",
-          ],
-          button: {
-            text: "Verify Payment",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/cashless-payment-set-isolated-white-background_107791-17172.jpg",
-        },
-      ]}
-      title="Required Documents"
-      description="Ensure you have the following ready before you begin your application."
-    />
-  </div>
-
-  <div id="process" data-section="process">
-      <MetricCardThree
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      metrics={[
+      products={[
-        {
+        { id: "p1", name: "Executive Lounge", price: "Comfort", imageSrc: "http://img.b2bpic.net/free-photo/luxury-hotel-lobby-design_23-2148700201.jpg" },
-          id: "s1",
+        { id: "p2", name: "Biometric Hall", price: "Efficiency", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-hallway_23-2148800000.jpg" },
-          icon: FileText,
+        { id: "p3", name: "Waiting Area", price: "Relaxation", imageSrc: "http://img.b2bpic.net/free-photo/comfortable-waiting-room_23-2149000000.jpg" }
-          title: "Form Filling",
-          value: "01",
-        },
-        {
-          id: "s2",
-          icon: Upload,
-          title: "Upload Docs",
-          value: "02",
-        },
-        {
-          id: "s3",
-          icon: CreditCard,
-          title: "Payment",
-          value: "03",
-        },
-        {
-          id: "s4",
-          icon: Calendar,
-          title: "Booking",
-          value: "04",
-        },
-        {
-          id: "s5",
-          icon: Key,
-          title: "Biometrics",
-          value: "05",
-        },
       ]}
-      title="How it Works"
-      description="Five simple steps to secure your travel document."
     />
   </div>
 
-  <div id="locations" data-section="locations">
+  <div id="testimonials" data-section="testimonials">
-      <TestimonialAboutCard
+      <TestimonialCardTen
-      useInvertedBackground={false}
+      title="Guest Feedback"
-      tag="Visit Us"
+      description="Hear from our recent applicants about their experience."
-      title="Passport Office Festac"
+      textboxLayout="default"
-      description="Our official processing center serves as your hub for biometrics and documentation submission."
+      useInvertedBackground={true}
-      subdescription="Opening Hours: 8:00 AM - 4:00 PM | Contact: +234 123 4567"
+      testimonials={[
-      icon={MapPin}
+        { id: "t1", title: "Fast & Efficient", quote: "The process was surprisingly smooth. 3.5 stars because the queues were long, but the service was helpful.", name: "Olumide B.", role: "Traveler" },
-      imageSrc="http://img.b2bpic.net/free-photo/view-retro-computer-technology_23-2149506827.jpg"
+        { id: "t2", title: "Clear Communication", quote: "Got my passport on time. 3.5 stars, good service overall despite minor delays in the portal updates.", name: "Amara K.", role: "Business Owner" },
-      mediaAnimation="slide-up"
+        { id: "t3", title: "Professional Staff", quote: "Staff was professional, 3.5 stars because of parking issues at the facility.", name: "David F.", role: "Student" }
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How long does processing take?",
-          content: "Standard processing takes 3-6 weeks after biometric verification.",
-        },
-        {
-          id: "f2",
-          title: "Can I apply online?",
-          content: "Yes, start your application on this portal and complete your data entry.",
-        },
-        {
-          id: "f3",
-          title: "What documents are required?",
-          content: "You will need a valid ID, proof of citizenship, and payment confirmation.",
-        },
       ]}
-      sideTitle="Common Questions"
-      sideDescription="Need clarity? Find answers here."
-      faqsAnimation="slide-up"
     />
   </div>
 
-  <div id="tracking" data-section="tracking">
+  <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={false}
+      title="Get in Touch"
-      title="Track Application"
+      description="Need assistance? Contact our team via form or WhatsApp. We're here to help you get your passport smoothly."
-      description="Enter your application ID to see the current status of your passport processing."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
-          name: "appId",
+        { name: "email", type: "email", placeholder: "Email", required: true }
-          type: "text",
-          placeholder: "Enter Application ID",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Enter Email Address",
-          required: true,
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/call-center-agent-green-screen-pc-answering-customers-technical-inquiries_482257-117830.jpg"
+      textarea={{ name: "message", placeholder: "How can we assist you?", rows: 4 }}
-      buttonText="Check Status"
+      buttonText="Send to WhatsApp"
+      useInvertedBackground={false}
+      onSubmit={(data) => window.open(`https://wa.me/2348000000000?text=Hello, I need assistance with my passport: ${data.message}`, '_blank')}
     />
   </div>
 
@@ -311,9 +113,13 @@ export default function LandingPage() {
       <FooterCard
       logoText="Nigeria Immigration"
       copyrightText="© 2025 Nigeria Immigration Service. All rights reserved."
+      socialLinks={[
+        { icon: Headphones, href: "#", ariaLabel: "Support" },
+        { icon: ShieldCheck, href: "#", ariaLabel: "Verify" }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f6f0e9;
-  --card: #f9f9f9;
+  --card: #efe7dd;
-  --foreground: #000f06e6;
+  --foreground: #2b180a;
-  --primary-cta: #0a7039;
+  --primary-cta: #2b180a;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
+  --accent: #94877c;
-  --background-accent: #c4c4c4;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);