Update src/app/pricing/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -50,7 +50,7 @@ export default function LandingPage() {
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "plain" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-sleek-ai-powered-store-builder-dashboa-1773919904902-38ed0d03.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-sleek-ai-powered-store-builder-dashboa-1773919904902-38ed0d03.png?_wi=2"
           imageAlt="AI Store Builder Dashboard"
           mediaAnimation="opacity"
           frameStyle="browser"
@@ -70,15 +70,15 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              tag: "Automation",              title: "Smart Store Setup",              subtitle: "AI-Powered",              description: "Our AI analyzes your business and automatically sets up your store with optimized categories, pricing strategies, and product recommendations.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/an-illustration-showing-ai-automation-in-1773919904688-beab2ac4.png",              imageAlt: "AI Automation"
+              tag: "Automation",              title: "Smart Store Setup",              subtitle: "AI-Powered",              description: "Our AI analyzes your business and automatically sets up your store with optimized categories, pricing strategies, and product recommendations.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/an-illustration-showing-ai-automation-in-1773919904688-beab2ac4.png?_wi=2",              imageAlt: "AI Automation"
             },
             {
               id: 2,
-              tag: "Design",              title: "Drag & Drop Builder",              subtitle: "No Code",              description: "Create stunning store designs without coding. Choose from AI-optimized templates or build from scratch with our intuitive visual builder.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-vibrant-illustration-of-a-web-designer-1773919905111-e52ed039.png",              imageAlt: "Design Builder"
+              tag: "Design",              title: "Drag & Drop Builder",              subtitle: "No Code",              description: "Create stunning store designs without coding. Choose from AI-optimized templates or build from scratch with our intuitive visual builder.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-vibrant-illustration-of-a-web-designer-1773919905111-e52ed039.png?_wi=2",              imageAlt: "Design Builder"
             },
             {
               id: 3,
-              tag: "Analytics",              title: "Real-Time Analytics",              subtitle: "Data-Driven",              description: "Get instant insights into customer behavior, sales trends, and inventory management with AI-powered predictive analytics.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-detailed-analytics-dashboard-showing-r-1773919905125-023683bd.png",              imageAlt: "Analytics Dashboard"
+              tag: "Analytics",              title: "Real-Time Analytics",              subtitle: "Data-Driven",              description: "Get instant insights into customer behavior, sales trends, and inventory management with AI-powered predictive analytics.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-detailed-analytics-dashboard-showing-r-1773919905125-023683bd.png?_wi=2",              imageAlt: "Analytics Dashboard"
             }
           ]}
           buttonAnimation="slide-up"
@@ -281,7 +281,7 @@ export default function LandingPage() {
             {
               items: [
                 { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Testimonials", href: "#testimonials" },
                 { label: "Blog", href: "/blog" }
               ]

src/app/pricing/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { CreditCard, Sparkles, Zap, Send, Check, X } from 'lucide-react';
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+          brandName="Webild AI"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="Webild AI Pricing"
+          description="Simple, transparent pricing for every stage of your business. Choose the perfect plan to launch and scale your AI-powered store."
+          buttons={[
+            { text: "Start Free Trial", href: "#pricing" },
+            { text: "Compare Plans", href: "#comparison" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-sleek-ai-powered-store-builder-dashboa-1773919904902-38ed0d03.png?_wi=1"
+          imageAlt="AI Store Builder Dashboard"
+          mediaAnimation="opacity"
+          frameStyle="browser"
+          ariaLabel="Pricing Page Hero Section"
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardOne
+          title="Choose Your Plan"
+          description="All plans include a 14-day free trial. No credit card required. Cancel anytime."
+          tag="Plans"
+          tagIcon={CreditCard}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "starter",              badge: "Getting Started",              badgeIcon: Sparkles,
+              price: "$29",              subtitle: "/month billed monthly",              features: [
+                "Up to 100 products",                "Basic AI optimization",                "Email support",                "Standard templates",                "Basic analytics",                "1 custom domain",                "SSL certificate"
+              ]
+            },
+            {
+              id: "pro",              badge: "Most Popular",              badgeIcon: Star,
+              price: "$99",              subtitle: "/month billed monthly",              features: [
+                "Unlimited products",                "Advanced AI features",                "Priority support",                "Premium templates",                "Advanced analytics",                "Unlimited domains",                "API access",                "Custom integrations"
+              ]
+            },
+            {
+              id: "enterprise",              badge: "Enterprise",              badgeIcon: Zap,
+              price: "Custom",              subtitle: "Contact us for pricing",              features: [
+                "Unlimited everything",                "Dedicated account manager",                "24/7 phone support",                "White-label option",                "Advanced security",                "Multi-store management",                "Custom development",                "SLA guarantee"
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          buttonAnimation="slide-up"
+          ariaLabel="Pricing Section"
+        />
+      </div>
+
+      <div id="comparison" data-section="comparison">
+        <FeatureCardNineteen
+          title="Detailed Feature Comparison"
+          description="See exactly what's included in each plan and find the perfect fit for your business."
+          tag="Compare"
+          tagIcon={Check}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          features={[
+            {
+              id: 1,
+              tag: "Core Features",              title: "Store Building",              subtitle: "Create & Customize",              description: "Build your store with our AI-powered drag-and-drop builder. Starter includes basic templates, Pro includes premium templates, and Enterprise gets custom development.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/an-illustration-showing-ai-automation-in-1773919904688-beab2ac4.png?_wi=1",              imageAlt: "Store Building"
+            },
+            {
+              id: 2,
+              tag: "AI Capabilities",              title: "AI Optimization",              subtitle: "Smart Automation",              description: "Let AI handle product optimization, pricing strategies, and customer insights. Starter gets basic optimization, Pro gets advanced features, Enterprise gets dedicated ML support.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-vibrant-illustration-of-a-web-designer-1773919905111-e52ed039.png?_wi=1",              imageAlt: "AI Optimization"
+            },
+            {
+              id: 3,
+              tag: "Support",              title: "Customer Support",              subtitle: "Get Help When You Need It",              description: "Starter includes email support during business hours, Pro includes priority support with faster response times, and Enterprise includes 24/7 dedicated support.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA6ey2EU599vn2Htg2uLTLX3pY/a-detailed-analytics-dashboard-showing-r-1773919905125-023683bd.png?_wi=1",              imageAlt: "Customer Support"
+            }
+          ]}
+          buttonAnimation="slide-up"
+          ariaLabel="Feature Comparison Section"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Start?"
+          title="Launch Your AI-Powered Store Today"
+          description="Join thousands of successful entrepreneurs. Start your 14-day free trial with full access to all features."
+          tagIcon={Send}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Start Free Trial"
+          termsText="By clicking Start Free Trial, you agree to our Terms of Service and Privacy Policy. No credit card required."
+          ariaLabel="Pricing Contact Section"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Webild AI"
+          columns={[
+            {
+              items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Testimonials", href: "#testimonials" },
+                { label: "Blog", href: "/blog" }
+              ]
+            },
+            {
+              items: [
+                { label: "Documentation", href: "/docs" },
+                { label: "API Reference", href: "/api" },
+                { label: "Integrations", href: "/integrations" },
+                { label: "Support", href: "/support" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Careers", href: "/careers" },
+                { label: "Press Kit", href: "/press" },
+                { label: "Contact", href: "#contact" }
+              ]
+            },
+            {
+              items: [
+                { label: "Twitter", href: "https://twitter.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "GitHub", href: "https://github.com" },
+                { label: "Discord", href: "https://discord.com" }
+              ]
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "/privacy" },
+                { label: "Terms of Service", href: "/terms" },
+                { label: "Cookie Policy", href: "/cookies" },
+                { label: "Security", href: "/security" }
+              ]
+            }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
+
+import { Star } from 'lucide-react';