From 5e6c726885fe9ef8f340d6bc760435e7557b4b32 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 7 Apr 2026 18:47:47 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 152 ++++++++++++++++++++++-------------------------
 1 file changed, 70 insertions(+), 82 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c2c5f79..5d3e98b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,16 @@
 "use client";
 
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
-import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
+import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterCard from "@/components/sections/footer/FooterCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Bot, ShoppingBag, Store, Zap, Sparkles, MessageSquare, CreditCard, HelpCircle, Mail, Settings, Shield, BarChart3, Clock, Layers } from "lucide-react";
+import { Bot, ShoppingBag, Store, Zap, Sparkles, MessageSquare, CreditCard, HelpCircle, Mail, Settings, Shield, BarChart3, Clock, Layers, Star } from "lucide-react";
 
 export default function ShopAIAgentPage() {
     const navItems = [
@@ -20,42 +20,31 @@ export default function ShopAIAgentPage() {
     ];
 
     const testimonials = [
-        { id: "1", name: "Elena Rossi", handle: "CEO, BellaVogue", testimonial: "Our shop's conversion rate jumped 40% after we deployed the AI shopping assistant. It handles thousands of customer queries perfectly.", imageSrc: "asset://user1" },
-        { id: "2", name: "Mark Chen", handle: "Owner, TechGifts", testimonial: "Finally, a shopping assistant that actually understands product context. My team can focus on operations while the agent manages customer support.", imageSrc: "asset://user2" },
-        { id: "3", name: "Sarah Jenkins", handle: "Founder, HomeDecor", testimonial: "The integration was seamless. Our customers love the personalized recommendations provided by the agent.", imageSrc: "asset://user3" },
+        { id: "1", name: "Elena Rossi", handle: "CEO, BellaVogue", testimonial: "Our shop's conversion rate jumped 40% after we deployed the AI shopping assistant. It handles thousands of customer queries perfectly.", rating: 5, icon: Star },
+        { id: "2", name: "Mark Chen", handle: "Owner, TechGifts", testimonial: "Finally, a shopping assistant that actually understands product context. My team can focus on operations while the agent manages customer support.", rating: 5, icon: Star },
+        { id: "3", name: "Sarah Jenkins", handle: "Founder, HomeDecor", testimonial: "The integration was seamless. Our customers love the personalized recommendations provided by the agent.", rating: 5, icon: Star },
     ];
 
     const pricingPlans = [
-        { id: "basic", price: "$49/mo", name: "Essentials", buttons: [{ text: "Start Trial", href: "#" }], features: ["Up to 1,000 queries", "Standard product sync", "Email support"] },
-        { id: "growth", badge: "Best Value", price: "$199/mo", name: "Growth", buttons: [{ text: "Start Trial", href: "#" }], features: ["Unlimited queries", "Smart product recommendations", "Priority support", "Multi-channel support"] },
-        { id: "pro", price: "$499/mo", name: "Enterprise", buttons: [{ text: "Contact Sales", href: "#" }], features: ["Custom AI tuning", "API access", "Dedicated account manager", "Advanced analytics"] },
+        { id: "basic", title: "Essentials", price: "$49", period: "/mo", button: { text: "Start Trial", href: "#" }, features: ["Up to 1,000 queries", "Standard product sync", "Email support"] },
+        { id: "growth", title: "Growth", price: "$199", period: "/mo", button: { text: "Start Trial", href: "#" }, features: ["Unlimited queries", "Smart product recommendations", "Priority support", "Multi-channel support"] },
+        { id: "pro", title: "Enterprise", price: "$499", period: "/mo", button: { text: "Contact Sales", href: "#" }, features: ["Custom AI tuning", "API access", "Dedicated account manager", "Advanced analytics"] },
     ];
 
     return (
-        <ThemeProvider borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="gradient">
-            <NavbarStyleFullscreen navItems={navItems} brandName="ShopMind" bottomLeftText="Retail Intelligence" bottomRightText="hello@shopmind.ai" />
-            <HeroBillboardDashboard
-                background={{ variant: "canvas-reveal" }}
-                tag="Shop Intelligence"
-                tagIcon={ShoppingBag}
-                title="Build Your AI Shop Assistant"
+        <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="semibold">
+            <div id="nav" data-section="nav">
+                <NavbarStyleFullscreen navItems={navItems} brandName="ShopMind" />
+            </div>
+            <HeroLogoBillboard
+                logoText="Shop Intelligence"
                 description="Automate customer support, inventory queries, and personalized product recommendations with an AI agent tailored for your store."
                 buttons={[{ text: "Build My Agent", href: "#" }]}
-                dashboard={{
-                    title: "Store Command Center",                    logoIcon: Store,
-                    imageSrc: "asset://dashboard-hero",                    sidebarItems: [{ icon: BarChart3, active: true }, { icon: Settings }, { icon: Shield }],
-                    stats: [
-                        { title: "Conversion Rate", values: [4.2, 5.1, 5.8], description: "Increase in sales via agent interactions." },
-                        { title: "Queries Handled", values: [1200, 2400, 3100], description: "Customer questions solved autonomously." },
-                    ],
-                    listTitle: "Recent Store Interactions",                    listItems: [{ icon: MessageSquare, title: "Inquiry: Product availability", status: "Solved" }, { icon: CreditCard, title: "Payment help for order #882", status: "Resolved" }]
-                }}
+                background={{ variant: "canvas-reveal" }}
+                mediaAnimation="slide-up"
             />
-            <div id="ai-agent-widget" className="fixed bottom-6 right-6 z-50 p-4 bg-white dark:bg-slate-900 rounded-full shadow-2xl border border-slate-200 dark:border-slate-800 cursor-pointer hover:scale-105 transition-transform">
-                <Bot className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
-            </div>
-            <div id="features">
-                <FeatureHoverPattern
+            <div id="features" data-section="features">
+                <FeatureCardMedia
                     animationType="slide-up"
                     tag="Key Benefits"
                     tagIcon={Sparkles}
@@ -64,65 +53,64 @@ export default function ShopAIAgentPage() {
                     textboxLayout="default"
                     useInvertedBackground={false}
                     features={[
-                        { icon: Zap, title: "Instant Answers", description: "Automate responses to shipping, sizing, and product queries instantly." },
-                        { icon: BarChart3, title: "Smart Upselling", description: "Recommend complementary items based on real-time inventory and trends." },
-                        { icon: Clock, title: "Always Active", description: "Support your customers across time zones 24/7 without extra hiring costs." },
-                        { icon: Shield, title: "Store Security", description: "Securely verify orders and manage returns through your existing backend." }
+                        { id: "f1", title: "Instant Answers", description: "Automate responses to shipping, sizing, and product queries instantly.", tag: "Efficiency" },
+                        { id: "f2", title: "Smart Upselling", description: "Recommend complementary items based on real-time inventory and trends.", tag: "Growth" },
+                        { id: "f3", title: "Always Active", description: "Support your customers across time zones 24/7 without extra hiring costs.", tag: "Reliability" },
+                        { id: "f4", title: "Store Security", description: "Securely verify orders and manage returns through your existing backend.", tag: "Security" }
                     ]}
                 />
             </div>
-            <MetricSplitMediaAbout
-                tag="Efficiency"
-                tagIcon={Layers}
-                title="Scalable Retail Support"
-                description="Our AI agent integrates directly with your Shopify, WooCommerce, or custom storefront. Reduce support tickets by up to 70% while improving customer satisfaction."
-                metrics={[{ value: "70%", title: "Reduced Tickets" }, { value: "5x", title: "Faster Service" }]}
-                imageSrc: "asset://shop-about"
-                mediaAnimation="slide-up"
-            />
-            <TestimonialCardSix
-                testimonials={testimonials}
-                animationType="slide-up"
-                tag="Success Stories"
-                title="Retailers Love ShopMind"
-                description="See how growing e-commerce brands are using our agent technology to scale their operations."
-                textboxLayout="default"
-                useInvertedBackground={false}
-            />
-            <div id="pricing">
-                <PricingCardThree
+            <div id="about" data-section="about">
+                <AboutMetric
+                    title="Scalable Retail Support"
+                    metrics={[{ icon: Layers, label: "Reduced Tickets", value: "70%" }, { icon: Clock, label: "Faster Service", value: "5x" }]}
+                    metricsAnimation="slide-up"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="testimonials" data-section="testimonials">
+                <TestimonialCardThirteen
+                    testimonials={testimonials}
+                    showRating={true}
+                    animationType="slide-up"
+                    title="Retailers Love ShopMind"
+                    description="See how growing e-commerce brands are using our agent technology to scale their operations."
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="pricing" data-section="pricing">
+                <PricingCardNine
                     plans={pricingPlans}
                     animationType="slide-up"
-                    tag="Pricing"
                     title="Transparent Pricing for Stores"
                     description="Choose the plan that fits your current store size and scale as you grow."
                     textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
-            <FaqDouble
-                faqs={[{ id: "1", title: "Does it work with my store?", content: "Yes! We support Shopify, BigCommerce, WooCommerce, and custom web stores." }, { id: "2", title: "Is it hard to set up?", content: "Not at all. Plug in your store credentials and your AI agent is ready to learn your inventory." }]} 
-                tag="Help"
-                title="Got Questions?"
-                description="Here are the most common questions from store owners."
-                textboxLayout="default"
-                faqsAnimation="slide-up"
-                useInvertedBackground={false}
-            />
-            <div id="contact">
-                <ContactCTA
-                    tag="Get Started"
-                    tagIcon={Mail}
-                    title="Ready to Automate Your Store?"
-                    description="Start your 14-day free trial and give your customers the support they deserve."
-                    buttons={[{ text: "Deploy My Agent", href: "#" }]}
+            <div id="faq" data-section="faq">
+                <FaqSplitText
+                    faqs={[{ id: "1", title: "Does it work with my store?", content: "Yes! We support Shopify, BigCommerce, WooCommerce, and custom web stores." }, { id: "2", title: "Is it hard to set up?", content: "Not at all. Plug in your store credentials and your AI agent is ready to learn your inventory." }]} 
+                    sideTitle="Got Questions?"
+                    sideDescription="Here are the most common questions from store owners."
+                    faqsAnimation="slide-up"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="contact" data-section="contact">
+                <ContactText
+                    text="Ready to Automate Your Store? Start your 14-day free trial and give your customers the support they deserve."
+                    buttons={[{ text: "Deploy My Agent", href: "#" }]}
+                    background={{ variant: "canvas-reveal" }}
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="footer" data-section="footer">
+                <FooterCard
+                    logoText="ShopMind"
                 />
             </div>
-            <FooterBaseCard
-                logoText="ShopMind"
-                columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }, { title: "Company", items: [{ label: "Contact", href: "#" }] }]
-                }
-            />
         </ThemeProvider>
     );
 }
\ No newline at end of file
-- 
2.49.1