189 lines
6.9 KiB
TypeScript
189 lines
6.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { CreditCard, HelpCircle, Rocket, Star, Crown } from "lucide-react";
|
|
|
|
export default function PricingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="aurora"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="SaaS Pro"
|
|
navItems={[
|
|
{ name: "Features", id: "/features" },
|
|
{ name: "Pricing", id: "/pricing" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" }
|
|
]}
|
|
button={{
|
|
text: "Get Started",
|
|
href: "https://app.example.com/signup"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
title="Choose the Perfect Plan for Your Team"
|
|
description="All plans include a 14-day free trial with full access to features. No credit card required to start."
|
|
tag="Pricing Plans"
|
|
tagIcon={CreditCard}
|
|
plans={[
|
|
{
|
|
id: "starter",
|
|
badge: "Popular for Startups",
|
|
badgeIcon: Rocket,
|
|
price: "$49/month",
|
|
subtitle: "Perfect for small teams getting started",
|
|
features: [
|
|
"Up to 5 team members",
|
|
"10 GB storage",
|
|
"Basic automation",
|
|
"Email support",
|
|
"Standard analytics",
|
|
"Core integrations"
|
|
]
|
|
},
|
|
{
|
|
id: "professional",
|
|
badge: "Most Popular",
|
|
badgeIcon: Star,
|
|
price: "$149/month",
|
|
subtitle: "Best for growing teams and businesses",
|
|
features: [
|
|
"Up to 25 team members",
|
|
"100 GB storage",
|
|
"Advanced automation",
|
|
"Priority support",
|
|
"Advanced analytics",
|
|
"Custom integrations",
|
|
"Team collaboration tools"
|
|
]
|
|
},
|
|
{
|
|
id: "enterprise",
|
|
badge: "For Large Teams",
|
|
badgeIcon: Crown,
|
|
price: "Custom Pricing",
|
|
subtitle: "Unlimited scale for enterprise needs",
|
|
features: [
|
|
"Unlimited team members",
|
|
"Unlimited storage",
|
|
"Custom automation",
|
|
"24/7 dedicated support",
|
|
"Enterprise analytics",
|
|
"Custom integrations",
|
|
"SLA guarantee",
|
|
"Advanced security features"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "https://app.example.com/signup" },
|
|
{ text: "Contact Sales", href: "/contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Pricing Questions Answered"
|
|
description="Find answers to common questions about our plans, billing, and features"
|
|
tag="Pricing FAQ"
|
|
tagIcon={HelpCircle}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What is included in the free trial?",
|
|
content: "Your 14-day free trial includes full access to all features of the plan you choose, plus priority onboarding support. No credit card required to start."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Can I change my plan anytime?",
|
|
content: "Yes! You can upgrade, downgrade, or cancel your plan at any time. Changes take effect on your next billing cycle with prorated adjustments."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "What payment methods do you accept?",
|
|
content: "We accept all major credit cards (Visa, MasterCard, American Express), bank transfers, and PayPal. Enterprise customers can arrange custom payment terms."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Is there a setup fee?",
|
|
content: "No setup fees for any plan. You only pay the monthly subscription fee. Enterprise plans may include optional professional services for custom implementations."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "How does billing work for team members?",
|
|
content: "You're billed monthly based on your plan's team member limit. If you exceed the limit, you'll be prompted to upgrade to the next tier or add additional seats."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "What happens if I cancel?",
|
|
content: "You can cancel anytime and continue using SaaS Pro until the end of your current billing period. All your data remains accessible for 30 days after cancellation for export."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://img.b2bpic.net/free-photo/man-wheelchair-having-office-job_23-2149571066.jpg"
|
|
imageAlt="Team collaboration workspace"
|
|
logoText="SaaS Pro"
|
|
copyrightText="© 2025 SaaS Pro. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Features", href: "/features" },
|
|
{ label: "Pricing", href: "/pricing" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Roadmap", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "/contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "GDPR", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |