Merge version_2 into main #1
283
src/app/page.tsx
283
src/app/page.tsx
@@ -10,8 +10,9 @@ 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 TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import { Calendar, Clock, CreditCard, FileText, Headphones, Key, Lock, MapPin, Search, ShieldCheck, Upload } from "lucide-react";
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import { Calendar, Clock, CreditCard, FileText, Headphones, Key, Lock, Search, ShieldCheck, Upload } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -31,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Requirements",
|
||||
id: "#requirements",
|
||||
},
|
||||
{
|
||||
name: "Track",
|
||||
id: "#tracking",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Gallery", id: "#gallery" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Nigeria Passport"
|
||||
/>
|
||||
@@ -54,71 +43,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ 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/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",
|
||||
},
|
||||
{ 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/close-up-hand-holding-pakistan-passport-isolated-white-background_505751-5211.jpg", alt: "Passport closeup" },
|
||||
]}
|
||||
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 +60,53 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Lost/Damaged Replacement",
|
||||
"Data Correction",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"New Application",
|
||||
"Passport Renewal",
|
||||
"Application Tracking",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["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">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
title="Hotel & Facilities"
|
||||
description="Explore our comfortable facilities designed for your convenience."
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "s1",
|
||||
icon: FileText,
|
||||
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",
|
||||
},
|
||||
products={[
|
||||
{ id: "p1", name: "Executive Lounge", price: "Comfort", imageSrc: "http://img.b2bpic.net/free-photo/luxury-hotel-lobby-design_23-2148700201.jpg" },
|
||||
{ id: "p2", name: "Biometric Hall", price: "Efficiency", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-hallway_23-2148800000.jpg" },
|
||||
{ id: "p3", name: "Waiting Area", price: "Relaxation", imageSrc: "http://img.b2bpic.net/free-photo/comfortable-waiting-room_23-2149000000.jpg" }
|
||||
]}
|
||||
title="How it Works"
|
||||
description="Five simple steps to secure your travel document."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="locations" data-section="locations">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Visit Us"
|
||||
title="Passport Office Festac"
|
||||
description="Our official processing center serves as your hub for biometrics and documentation submission."
|
||||
subdescription="Opening Hours: 8:00 AM - 4:00 PM | Contact: +234 123 4567"
|
||||
icon={MapPin}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-retro-computer-technology_23-2149506827.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</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.",
|
||||
},
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Guest Feedback"
|
||||
description="Hear from our recent applicants about their experience."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ id: "t3", title: "Professional Staff", quote: "Staff was professional, 3.5 stars because of parking issues at the facility.", name: "David F.", role: "Student" }
|
||||
]}
|
||||
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="Track Application"
|
||||
description="Enter your application ID to see the current status of your passport processing."
|
||||
title="Get in Touch"
|
||||
description="Need assistance? Contact our team via form or WhatsApp. We're here to help you get your passport smoothly."
|
||||
inputs={[
|
||||
{
|
||||
name: "appId",
|
||||
type: "text",
|
||||
placeholder: "Enter Application ID",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Enter Email Address",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/call-center-agent-green-screen-pc-answering-customers-technical-inquiries_482257-117830.jpg"
|
||||
buttonText="Check Status"
|
||||
textarea={{ name: "message", placeholder: "How can we assist you?", rows: 4 }}
|
||||
buttonText="Send to WhatsApp"
|
||||
onSubmit={(data) => window.open(`https://wa.me/2348000000000?text=Hello, I need assistance with my passport: ${data.message}`, '_blank')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -311,9 +114,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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000f06e6;
|
||||
--primary-cta: #0a7039;
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #000f06e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user