Merge version_1 into main #2
474
src/app/page.tsx
474
src/app/page.tsx
@@ -16,351 +16,155 @@ import { Globe, Shield, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="TechFlow"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="TechFlow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="The Future of Tech, Delivered."
|
||||
description="Experience innovation with our curated selection of high-performance electronics. Fast shipping and premium quality guaranteed."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-cool-man-uses-virtual-reality-glasses-3d-web-connection_482257-126420.jpg?_wi=1"
|
||||
imageAlt="Futuristic electronic store showcase"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/senior-man-using-laptop-tablet-same-time_482257-8141.jpg",
|
||||
alt: "Senior man using laptop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
|
||||
alt: "Technician optimizing data center",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
|
||||
alt: "Young man preparing for development",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
|
||||
alt: "Smiling mechanic in repair shop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-happy-african-woman-holding-laptop-hands_1153-9683.jpg",
|
||||
alt: "Happy woman holding laptop",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 50,000+ happy tech enthusiasts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Next-Gen AI Chips",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Tech",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Logistics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Infrastructure",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Gadgets",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="The Future of Tech, Delivered."
|
||||
description="Experience innovation with our curated selection of high-performance electronics. Fast shipping and premium quality guaranteed."
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-cool-man-uses-virtual-reality-glasses-3d-web-connection_482257-126420.jpg"
|
||||
imageAlt="Futuristic electronic store showcase"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/senior-man-using-laptop-tablet-same-time_482257-8141.jpg", alt: "Senior man using laptop" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg", alt: "Technician optimizing data center" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg", alt: "Young man preparing for development" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg", alt: "Smiling mechanic in repair shop" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-happy-african-woman-holding-laptop-hands_1153-9683.jpg", alt: "Happy woman holding laptop" },
|
||||
]}
|
||||
avatarText="Join 50,000+ happy tech enthusiasts"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Next-Gen AI Chips" },
|
||||
{ type: "text", text: "Sustainable Tech" },
|
||||
{ type: "text", text: "Global Logistics" },
|
||||
{ type: "text", text: "Secure Infrastructure" },
|
||||
{ type: "text", text: "Premium Gadgets" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Ultra-Fast Delivery",
|
||||
description: "Get your gadgets in record time.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/liquid-share-arrow_78370-7841.jpg?_wi=1",
|
||||
imageAlt: "fast tech icon",
|
||||
},
|
||||
{
|
||||
title: "Secure Transactions",
|
||||
description: "Your safety is our priority.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-cool-man-uses-virtual-reality-glasses-3d-web-connection_482257-126420.jpg?_wi=2",
|
||||
imageAlt: "fast tech icon",
|
||||
},
|
||||
{
|
||||
title: "Global Coverage",
|
||||
description: "Innovating the connected world.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Globe,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/security-shield-glows-blue-symbolizes-safety-encryption-generative-ai_188544-9418.jpg?_wi=1",
|
||||
imageAlt: "fast tech icon",
|
||||
},
|
||||
]}
|
||||
title="Why TechFlow?"
|
||||
description="We offer more than just hardware. Our promise includes top-tier support and state-of-the-art technology."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Why TechFlow?"
|
||||
description="We offer more than just hardware. Our promise includes top-tier support and state-of-the-art technology."
|
||||
features={[
|
||||
{ title: "Ultra-Fast Delivery", description: "Get your gadgets in record time.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
{ title: "Secure Transactions", description: "Your safety is our priority.", bentoComponent: "reveal-icon", icon: Shield },
|
||||
{ title: "Global Coverage", description: "Innovating the connected world.", bentoComponent: "reveal-icon", icon: Globe },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Pro Smartphone X",
|
||||
price: "$999",
|
||||
variant: "Midnight Black",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Audio-Pro ANC",
|
||||
price: "$349",
|
||||
variant: "Silver",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-39.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Smart Home Hub",
|
||||
price: "$199",
|
||||
variant: "White",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-tablet-with-home-automation-app_23-2149036816.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Backlit Keyboard",
|
||||
price: "$159",
|
||||
variant: "RGB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-keyboard-desk_23-2149680258.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Aero Drone 4K",
|
||||
price: "$899",
|
||||
variant: "Grey",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-couch-holding-her-phone-mug-sitting-front-table-with-gadgets_181624-56360.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "GPU Beast 3000",
|
||||
price: "$1299",
|
||||
variant: "Carbon",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529409.jpg",
|
||||
},
|
||||
]}
|
||||
title="Top Tech Picks"
|
||||
description="Hand-picked gadgets for enthusiasts and professionals."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
title="Top Tech Picks"
|
||||
description="Hand-picked gadgets for enthusiasts and professionals."
|
||||
products={[
|
||||
{ id: "p1", name: "Pro Smartphone X", price: "$999", variant: "Midnight Black", imageSrc: "http://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg" },
|
||||
{ id: "p2", name: "Audio-Pro ANC", price: "$349", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-39.jpg" },
|
||||
{ id: "p3", name: "Smart Home Hub", price: "$199", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/composition-tablet-with-home-automation-app_23-2149036816.jpg" },
|
||||
{ id: "p4", name: "Backlit Keyboard", price: "$159", variant: "RGB", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-keyboard-desk_23-2149680258.jpg" },
|
||||
{ id: "p5", name: "Aero Drone 4K", price: "$899", variant: "Grey", imageSrc: "http://img.b2bpic.net/free-photo/female-couch-holding-her-phone-mug-sitting-front-table-with-gadgets_181624-56360.jpg" },
|
||||
{ id: "p6", name: "GPU Beast 3000", price: "$1299", variant: "Carbon", imageSrc: "http://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529409.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50k+",
|
||||
title: "Units Sold",
|
||||
items: [
|
||||
"Smartphones",
|
||||
"Laptops",
|
||||
"Gadgets",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "98%",
|
||||
title: "Satisfaction",
|
||||
items: [
|
||||
"Reliable",
|
||||
"Quality",
|
||||
"Support",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15",
|
||||
title: "Countries",
|
||||
items: [
|
||||
"Shipping",
|
||||
"Support",
|
||||
"Service",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="We are trusted by thousands across the globe."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="By The Numbers"
|
||||
description="We are trusted by thousands across the globe."
|
||||
metrics={[
|
||||
{ id: "m1", value: "50k+", title: "Units Sold", items: ["Smartphones", "Laptops", "Gadgets"] },
|
||||
{ id: "m2", value: "98%", title: "Satisfaction", items: ["Reliable", "Quality", "Support"] },
|
||||
{ id: "m3", value: "15", title: "Countries", items: ["Shipping", "Support", "Service"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
date: "Jan 2024",
|
||||
title: "Developer",
|
||||
quote: "Incredible service and fast shipping.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/scientist-factory-using-tablet-check-photovoltaics-materials-parameters_482257-120526.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-cool-man-uses-virtual-reality-glasses-3d-web-connection_482257-126420.jpg?_wi=3",
|
||||
imageAlt: "tech executive portrait",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
date: "Feb 2024",
|
||||
title: "Designer",
|
||||
quote: "My go-to store for all gadget needs.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-stylish-denim-jacket-coffee-shop_273609-4452.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/liquid-share-arrow_78370-7841.jpg?_wi=2",
|
||||
imageAlt: "tech executive portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mike Ross",
|
||||
date: "Mar 2024",
|
||||
title: "Manager",
|
||||
quote: "Exceptional product quality and support.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-adult-working-social-integration-workspace_23-2149341139.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/security-shield-glows-blue-symbolizes-safety-encryption-generative-ai_188544-9418.jpg?_wi=2",
|
||||
imageAlt: "tech executive portrait",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Lee",
|
||||
date: "Apr 2024",
|
||||
title: "Engineer",
|
||||
quote: "The only place I trust for hardware.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367540.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-download-icon-line-connection-circuit-board_1379-888.jpg",
|
||||
imageAlt: "tech executive portrait",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David Wu",
|
||||
date: "May 2024",
|
||||
title: "Founder",
|
||||
quote: "Professional, fast, and very reliable.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/business-executive-reading-sticky-notes_1170-1831.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg?_wi=2",
|
||||
imageAlt: "tech executive portrait",
|
||||
},
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="See what our tech-savvy community has to say."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Customer Stories"
|
||||
description="See what our tech-savvy community has to say."
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", date: "Jan 2024", title: "Developer", quote: "Incredible service and fast shipping.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/scientist-factory-using-tablet-check-photovoltaics-materials-parameters_482257-120526.jpg" },
|
||||
{ id: "2", name: "Jane Smith", date: "Feb 2024", title: "Designer", quote: "My go-to store for all gadget needs.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/woman-stylish-denim-jacket-coffee-shop_273609-4452.jpg" },
|
||||
{ id: "3", name: "Mike Ross", date: "Mar 2024", title: "Manager", quote: "Exceptional product quality and support.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/young-adult-working-social-integration-workspace_23-2149341139.jpg" },
|
||||
{ id: "4", name: "Sarah Lee", date: "Apr 2024", title: "Engineer", quote: "The only place I trust for hardware.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367540.jpg" },
|
||||
{ id: "5", name: "David Wu", date: "May 2024", title: "Founder", quote: "Professional, fast, and very reliable.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/business-executive-reading-sticky-notes_1170-1831.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How fast is shipping?",
|
||||
content: "We offer same-day dispatch for orders placed before 3 PM.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer returns?",
|
||||
content: "Yes, we have a 30-day hassle-free return policy.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is tech support provided?",
|
||||
content: "Our experts are available via chat 24/7.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "How fast is shipping?", content: "We offer same-day dispatch for orders placed before 3 PM." },
|
||||
{ id: "q2", title: "Do you offer returns?", content: "Yes, we have a 30-day hassle-free return policy." },
|
||||
{ id: "q3", title: "Is tech support provided?", content: "Our experts are available via chat 24/7." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Need Support?"
|
||||
description="Have questions about our products or your order? Get in touch today."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/person-typing-into-ai-chatbot-system-automate-her-workflow-home-office_482257-122978.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Contact Us"
|
||||
title="Need Support?"
|
||||
description="Have questions about our products or your order? Get in touch today."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/person-typing-into-ai-chatbot-system-automate-her-workflow-home-office_482257-122978.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="TechFlow"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="TechFlow"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user