Merge version_2 into main #1
418
src/app/page.tsx
418
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import { Diamond, Heart, Lock, Shield, ShieldCheck, Smartphone, Sparkles, Truck, Zap } from "lucide-react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Shield, Zap, Sparkles, Smartphone, Heart, ChevronRight } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -27,313 +27,113 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Alfa Phone"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Alfa Phone"
|
||||
button={{ text: "Get Started" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Alfa Phone Premium Accessories"
|
||||
description="Elevate your daily connectivity with our carefully curated selection of high-end mobile accessories. Built for performance and style."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-beige-turtleneck-glasses-looking-front-smiling-cheerfully-showing-v-sign-with-both-hands-standing-pink-wall_141793-52862.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-japanese-woman-with-jacket_23-2148870741.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-young-woman-reading-library_23-2148727865.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-happy-redhead-woman-red-hat-drinking-from-thermos-warming-up-with-hot-drink-her-flask_1258-196824.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pleased-successful-female-administrator-office_273609-4124.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ happy tech enthusiasts"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Free Global Shipping",
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "2-Year Warranty",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Premium Materials",
|
||||
icon: Diamond,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Fast Charging",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Secure Checkout",
|
||||
icon: Lock,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Alfa Phone Premium Accessories"
|
||||
description="Elevate your daily connectivity with our carefully curated selection of high-end mobile accessories. Built for performance and style."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
testimonials={[
|
||||
{ name: "Sarah J.", handle: "@sarah", testimonial: "The best quality case I've ever owned.", rating: 5 },
|
||||
{ name: "Mike C.", handle: "@mike", testimonial: "Fast charging and looks amazing!", rating: 5 }
|
||||
]}
|
||||
buttons={[{ text: "Shop Collection", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-young-handsome-man-beige-turtleneck-glasses-looking-front-smiling-cheerfully-showing-v-sign-with-both-hands-standing-pink-wall_141793-52862.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Durability Guaranteed",
|
||||
description: "Built from premium materials to last long under daily heavy usage.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Lightning Fast",
|
||||
description: "Performance-tuned products that never slow you down.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Modern Aesthetics",
|
||||
description: "Designed to look good while protecting your valuable device.",
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Perfect Fit",
|
||||
description: "Engineered for precise alignment with your specific device model.",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Eco-Friendly",
|
||||
description: "Sustainably sourced components for the conscious consumer.",
|
||||
},
|
||||
]}
|
||||
title="Why Alfa Phone?"
|
||||
description="Discover the quality that makes us the go-to for phone accessories."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Why Alfa Phone?"
|
||||
description="Discover the quality that makes us the go-to for phone accessories."
|
||||
features={[
|
||||
{ icon: Shield, title: "Durability Guaranteed", description: "Built from premium materials to last long." },
|
||||
{ icon: Zap, title: "Lightning Fast", description: "Performance-tuned for modern speed." },
|
||||
{ icon: Sparkles, title: "Modern Aesthetics", description: "Designed to look sharp and clean." },
|
||||
{ icon: Smartphone, title: "Perfect Fit", description: "Engineered for precise alignment." },
|
||||
{ icon: Heart, title: "Eco-Friendly", description: "Sustainably sourced and safe." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Magnetic Case",
|
||||
price: "$29.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-usb-flash-drive-isolated-white-surface_187299-47635.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Pro Earbuds",
|
||||
price: "$99.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072189.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Braided Cable",
|
||||
price: "$19.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-virtual-reality-simulator-with-laptop_23-2148912818.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Ultra Power Bank",
|
||||
price: "$49.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/meat-can_187299-47637.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Glass Protector",
|
||||
price: "$15.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-with-surgical-gloves-disinfecting-tablet_23-2148561088.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Aluminum Stand",
|
||||
price: "$24.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/clock-school-supplies-near-smartphone-drink_23-2147929566.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Accessories"
|
||||
description="Explore our curated catalog of essential mobile tech accessories."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Our Collection"
|
||||
description="Premium gear for your daily devices."
|
||||
products={[
|
||||
{ id: "1", name: "Magnetic Case", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/metallic-usb-flash-drive-isolated-white-surface_187299-47635.jpg" },
|
||||
{ id: "2", name: "Pro Earbuds", price: "$99.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072189.jpg" },
|
||||
{ id: "3", name: "Braided Cable", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-photo/top-view-virtual-reality-simulator-with-laptop_23-2148912818.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Designer",
|
||||
company: "Creative Co",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-beige-turtleneck-glasses-looking-front-smiling-cheerfully-showing-v-sign-with-both-hands-standing-pink-wall_141793-52862.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Dev",
|
||||
company: "Tech Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-japanese-woman-with-jacket_23-2148870741.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
role: "Manager",
|
||||
company: "Business INC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-reading-library_23-2148727865.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Student",
|
||||
company: "Uni Student",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-happy-redhead-woman-red-hat-drinking-from-thermos-warming-up-with-hot-drink-her-flask_1258-196824.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Doe",
|
||||
role: "Owner",
|
||||
company: "Store X",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-successful-female-administrator-office_273609-4124.jpg",
|
||||
},
|
||||
]}
|
||||
title="What People Say"
|
||||
description="See why our customers love Alfa Phone."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Customer Love"
|
||||
description="Hear from our community of tech enthusiasts."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Exceptional Quality", quote: "Truly elevated my mobile experience.", name: "Sarah Johnson", role: "Designer" },
|
||||
{ id: "t2", title: "Fast & Reliable", quote: "Fast shipping and premium build quality.", name: "Michael Chen", role: "Engineer" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you ship worldwide?",
|
||||
content: "Yes, we ship globally to over 100 countries.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What is the warranty period?",
|
||||
content: "All our products come with a 2-year warranty.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How can I track my order?",
|
||||
content: "You will receive a tracking link via email as soon as it ships.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Return Policy",
|
||||
content: "We offer a 30-day hassle-free return policy on all items.",
|
||||
},
|
||||
{
|
||||
id: "f5",
|
||||
title: "Payment Methods",
|
||||
content: "We accept all major credit cards, PayPal, and Apple Pay.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find answers to our most popular questions here."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Common Questions"
|
||||
description="Everything you need to know."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you ship worldwide?", content: "Yes, we ship globally." },
|
||||
{ id: "f2", title: "What is the warranty?", content: "2-year full warranty coverage." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get in Touch"
|
||||
description="Have questions about our products or partnership opportunities? Let us know!"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message here...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139233.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Contact Us"
|
||||
title="Ready to Upgrade?"
|
||||
description="Join thousands of happy Alfa Phone customers."
|
||||
buttons={[{ text: "Get in touch", href: "#contact" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Alfa Phone"
|
||||
copyrightText="© 2025 Alfa Phone. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Alfa Phone"
|
||||
leftLink={{ text: "Privacy Policy" }}
|
||||
rightLink={{ text: "Support" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user