Merge version_2 into main #2

Merged
bender merged 2 commits from version_2 into main 2026-03-19 11:39:03 +00:00
2 changed files with 189 additions and 1 deletions

View File

@@ -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" }
]

188
src/app/pricing/page.tsx Normal file
View File

@@ -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"
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", 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", 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", 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';