Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4fb3961ef8 | |||
| 97555db030 | |||
| 298fd926fd |
386
src/app/page.tsx
386
src/app/page.tsx
@@ -2,14 +2,15 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||||
|
import { Cpu, Zap, CreditCard, ShieldCheck, MessageSquareText } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -19,287 +20,112 @@ export default function LandingPage() {
|
|||||||
borderRadius="rounded"
|
borderRadius="rounded"
|
||||||
contentWidth="mediumLarge"
|
contentWidth="mediumLarge"
|
||||||
sizing="largeSmallSizeMediumTitles"
|
sizing="largeSmallSizeMediumTitles"
|
||||||
background="noise"
|
background="grid"
|
||||||
cardStyle="outline"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="primary-glow"
|
||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="extrabold"
|
headingFontWeight="bold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarLayoutFloatingOverlay
|
||||||
navItems={[
|
brandName="ModernTech"
|
||||||
{
|
navItems={[
|
||||||
name: "Home",
|
{ name: "Home", id: "hero" },
|
||||||
id: "hero",
|
{ name: "Features", id: "features" },
|
||||||
},
|
{ name: "Metrics", id: "metrics" },
|
||||||
{
|
{ name: "Testimonials", id: "testimonials" },
|
||||||
name: "Features",
|
{ name: "Support", id: "faq" },
|
||||||
id: "features",
|
{ name: "Contact", id: "contact" }
|
||||||
},
|
]}
|
||||||
{
|
button={{ text: "Get Started", href: "#contact" }}
|
||||||
name: "Metrics",
|
/>
|
||||||
id: "metrics",
|
</div>
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Support",
|
|
||||||
id: "faq",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
brandName="AI-Shop"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardCarousel
|
<HeroOverlay
|
||||||
background={{
|
title="Future-Proof Commerce Architecture"
|
||||||
variant: "sparkles-gradient",
|
description="Scale effortlessly with high-performance, AI-native infrastructure designed for modern digital storefronts."
|
||||||
}}
|
tag="Modern Tech Stack"
|
||||||
title="Next-Gen AI E-Commerce Platform"
|
tagIcon={Cpu}
|
||||||
description="Drive +25% AOV and <2s load times with our Google-native AI commerce architecture. Zero-friction checkout meets hyper-personalization."
|
buttons={[{ text: "Explore Tech", href: "#features" }, { text: "Contact Us", href: "#contact" }]}
|
||||||
buttons={[
|
imageSrc="http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=1"
|
||||||
{
|
showBlur={true}
|
||||||
text: "Get Started",
|
showDimOverlay={true}
|
||||||
href: "#",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
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="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardEight
|
<FeatureBorderGlow
|
||||||
textboxLayout="default"
|
title="Next-Gen Capabilities"
|
||||||
useInvertedBackground={true}
|
description="Built for scale, speed, and maximum engagement."
|
||||||
features={[
|
features={[
|
||||||
{
|
{ icon: Zap, title: "Hyper-Fast Performance", description: "Optimized load times with global edge caching." },
|
||||||
id: 1,
|
{ icon: CreditCard, title: "Seamless Payments", description: "Frictionless checkout with smart routing." },
|
||||||
title: "Vertex AI Search",
|
{ icon: ShieldCheck, title: "Enterprise Security", description: "End-to-end encryption for total store protection." }
|
||||||
description: "Deliver lightning-fast, semantic product discovery.",
|
]}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-web-shop-e-shopping-concept_53876-124856.jpg",
|
animationType="blur-reveal"
|
||||||
imageAlt: "Search AI",
|
textboxLayout="split"
|
||||||
},
|
useInvertedBackground={true}
|
||||||
{
|
/>
|
||||||
id: 2,
|
</div>
|
||||||
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="metrics" data-section="metrics">
|
<div id="metrics" data-section="metrics">
|
||||||
<MetricCardFourteen
|
<MetricCardEleven
|
||||||
useInvertedBackground={false}
|
title="Proven Impact"
|
||||||
title="Performance KPIs"
|
description="Data-backed improvements across the entire funnel."
|
||||||
tag="Data Driven"
|
animationType="slide-up"
|
||||||
metrics={[
|
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: "m1",
|
{ 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" }
|
||||||
value: "3%",
|
]}
|
||||||
description: "Target Conversion Rate",
|
textboxLayout="split"
|
||||||
},
|
useInvertedBackground={false}
|
||||||
{
|
/>
|
||||||
id: "m2",
|
</div>
|
||||||
value: "2s",
|
|
||||||
description: "Target Load Time",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "m3",
|
|
||||||
value: "25%",
|
|
||||||
description: "Target AOV Increase",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
metricsAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardThirteen
|
<TestimonialCardTen
|
||||||
animationType="slide-up"
|
title="Industry Insights"
|
||||||
textboxLayout="default"
|
description="Hear from our partners successfully navigating growth."
|
||||||
useInvertedBackground={true}
|
textboxLayout="split"
|
||||||
testimonials={[
|
useInvertedBackground={true}
|
||||||
{
|
testimonials={[
|
||||||
id: "t1",
|
{ 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" }
|
||||||
name: "Sarah Johnson",
|
]}
|
||||||
handle: "@sarahj",
|
/>
|
||||||
testimonial: "The AI personalization doubled our engagement in weeks.",
|
</div>
|
||||||
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="faq" data-section="faq">
|
<div id="faq" data-section="faq">
|
||||||
<FaqBase
|
<FaqSplitText
|
||||||
textboxLayout="default"
|
faqs={[
|
||||||
useInvertedBackground={false}
|
{ id: "1", title: "Integration timeline?", content: "Our rapid migration process takes 4-6 weeks." },
|
||||||
faqs={[
|
{ id: "2", title: "Scaling support?", content: "Fully managed infrastructure with 24/7 monitoring." }
|
||||||
{
|
]}
|
||||||
id: "f1",
|
sideTitle="Frequently Asked Questions"
|
||||||
title: "How long is the build?",
|
sideDescription="Everything you need to know about our modern tech solutions."
|
||||||
content: "Our structured timeline is exactly 8 weeks from setup to go-live.",
|
faqsAnimation="blur-reveal"
|
||||||
},
|
useInvertedBackground={false}
|
||||||
{
|
/>
|
||||||
id: "f2",
|
</div>
|
||||||
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="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactCTA
|
<ContactCenter
|
||||||
useInvertedBackground={true}
|
tag="Get In Touch"
|
||||||
background={{
|
title="Ready to Modernize?"
|
||||||
variant: "sparkles-gradient",
|
description="Let's discuss how our platform fits your growth goals."
|
||||||
}}
|
background={{ variant: "sparkles-gradient" }}
|
||||||
tag="Ready to Start"
|
useInvertedBackground={false}
|
||||||
title="Build Your High-Converting Store"
|
/>
|
||||||
description="Ready to hit these KPIs? Let’s map out your 8-week launch roadmap today."
|
</div>
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Schedule Consultation",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterSimple
|
<FooterCard
|
||||||
columns={[
|
logoText="ModernTech"
|
||||||
{
|
socialLinks={[{ icon: MessageSquareText, href: "#", ariaLabel: "Support" }]}
|
||||||
title: "Platform",
|
/>
|
||||||
items: [
|
</div>
|
||||||
{
|
|
||||||
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>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user