Merge version_2 into main #2
384
src/app/page.tsx
384
src/app/page.tsx
@@ -2,14 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Cpu, Zap, CreditCard, ShieldCheck, Target, BarChart3, Users, MessageSquareText } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -19,287 +20,110 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
background="grid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="AI-Shop"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="ModernTech"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Support", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Next-Gen AI E-Commerce Platform"
|
||||
description="Drive +25% AOV and <2s load times with our Google-native AI commerce architecture. Zero-friction checkout meets hyper-personalization."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Specs",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=1",
|
||||
imageAlt: "Platform Dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=2",
|
||||
imageAlt: "Platform Dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=3",
|
||||
imageAlt: "Platform Dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=4",
|
||||
imageAlt: "Platform Dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=5",
|
||||
imageAlt: "Platform Dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=6",
|
||||
imageAlt: "Platform Dashboard",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Future-Proof Commerce Architecture"
|
||||
description="Scale effortlessly with high-performance, AI-native infrastructure designed for modern digital storefronts."
|
||||
tag="Modern Tech Stack"
|
||||
tagIcon={Cpu}
|
||||
buttons={[{ text: "Explore Tech", href: "#features" }, { text: "Contact Us", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=1"
|
||||
showBlur={true}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Vertex AI Search",
|
||||
description: "Deliver lightning-fast, semantic product discovery.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-web-shop-e-shopping-concept_53876-124856.jpg",
|
||||
imageAlt: "Search AI",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Dialogflow Chatbot",
|
||||
description: "Automate support with human-like AI agents.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-95318.jpg",
|
||||
imageAlt: "Chat AI",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Zero-Friction Pay",
|
||||
description: "Streamlined Google Pay native integration.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/onboarding-app-concept-online-purchase_23-2148415352.jpg",
|
||||
imageAlt: "Payment AI",
|
||||
},
|
||||
]}
|
||||
title="AI-Powered Conversion Pillars"
|
||||
description="Unlock growth with our comprehensive Google Cloud-native feature set."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
title="Next-Gen Capabilities"
|
||||
description="Built for scale, speed, and maximum engagement."
|
||||
features={[
|
||||
{ icon: Zap, title: "Hyper-Fast Performance", description: "Optimized load times with global edge caching." },
|
||||
{ icon: CreditCard, title: "Seamless Payments", description: "Frictionless checkout with smart routing." },
|
||||
{ icon: ShieldCheck, title: "Enterprise Security", description: "End-to-end encryption for total store protection." }
|
||||
]}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Performance KPIs"
|
||||
tag="Data Driven"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "3%",
|
||||
description: "Target Conversion Rate",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "2s",
|
||||
description: "Target Load Time",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "25%",
|
||||
description: "Target AOV Increase",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Proven Impact"
|
||||
description="Data-backed improvements across the entire funnel."
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "1", value: "35%", title: "AOV Increase", description: "Driven by smarter recommendation engines.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=1" },
|
||||
{ id: "2", value: "40%", title: "Latency Reduction", description: "Global distribution optimization.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg" }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarahj",
|
||||
testimonial: "The AI personalization doubled our engagement in weeks.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael Chen",
|
||||
handle: "@mchen",
|
||||
testimonial: "Unmatched load speeds. Our conversion rate never looked better.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-144.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@erod",
|
||||
testimonial: "Seamless integration, instant results. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Kim",
|
||||
handle: "@dkim",
|
||||
testimonial: "The Vertex AI implementation was effortless and transformative.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-holding-black-jacket-his-shoulder_114579-19028.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jessica Lee",
|
||||
handle: "@jlee",
|
||||
testimonial: "Finally, a platform that understands modern retail tech stacks.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="What Partners Say"
|
||||
description="See why high-growth brands trust our commerce architecture."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Industry Insights"
|
||||
description="Hear from our partners successfully navigating growth."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Unmatched Growth", quote: "The transformation to this architecture was seamless.", name: "Alex Rivera", role: "CTO, ShopScale", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-144.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How long is the build?",
|
||||
content: "Our structured timeline is exactly 8 weeks from setup to go-live.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you use Vertex AI?",
|
||||
content: "Yes, we integrate Vertex AI for search, recommendations, and copy generation.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What about payments?",
|
||||
content: "We prioritize Google-native flows including Google Pay for maximum trust.",
|
||||
},
|
||||
]}
|
||||
title="Implementation FAQs"
|
||||
description="Common questions regarding our 8-week build timeline."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{ id: "1", title: "Integration timeline?", content: "Our rapid migration process takes 4-6 weeks." },
|
||||
{ id: "2", title: "Scaling support?", content: "Fully managed infrastructure with 24/7 monitoring." }
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about our modern tech solutions."
|
||||
faqsAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Ready to Start"
|
||||
title="Build Your High-Converting Store"
|
||||
description="Ready to hit these KPIs? Let’s map out your 8-week launch roadmap today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Consultation",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get In Touch"
|
||||
title="Ready to Modernize?"
|
||||
description="Let's discuss how our platform fits your growth goals."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Architecture",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Vertex AI",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Timeline",
|
||||
items: [
|
||||
{
|
||||
label: "8-Week Plan",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Go-Live",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 AI-Shop Architecture"
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ModernTech"
|
||||
socialLinks={[{ icon: MessageSquareText, href: "#", ariaLabel: "Support" }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user