Merge version_2 into main #2
152
src/app/page.tsx
152
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user