Merge version_4_1776874899279 into main #4
@@ -1,16 +1,16 @@
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import HomePage from "@/pages/HomePage";
|
||||
import PricingFeaturesPage from "@/pages/PricingFeaturesPage";
|
||||
|
||||
import SimpleAboutPage from "@/pages/SimpleAboutPage";
|
||||
import PlansPage from "@/pages/PlansPage";
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/pricing-features" element={<PricingFeaturesPage />} />
|
||||
<Route path="/simple-about" element={<SimpleAboutPage />} />
|
||||
<Route path="/plans" element={<PlansPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
251
src/pages/PlansPage.tsx
Normal file
251
src/pages/PlansPage.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { motion } from "motion/react";
|
||||
import { Check, HelpCircle, Zap, Shield, Globe, BarChart } from "lucide-react";
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function PlansPage() {
|
||||
const navItems = routes.map((r) => ({ name: r.label, href: r.path }));
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background text-foreground">
|
||||
<NavbarCentered
|
||||
logo="FlowSync"
|
||||
navItems={navItems}
|
||||
ctaButton={{ text: "Get Started", href: "/contact" }}
|
||||
/>
|
||||
|
||||
<main className="flex-grow pt-20">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden flex flex-col items-center text-center px-4">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent/20 via-background to-background"></div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<span className="inline-block py-1 px-3 rounded-full bg-accent/10 text-accent text-sm font-semibold mb-6 border border-accent/20">
|
||||
Pricing Plans
|
||||
</span>
|
||||
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">
|
||||
Simple pricing for <br className="hidden md:block" />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary-cta">limitless growth</span>
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
|
||||
Whether you're a solo creator or a fast-growing enterprise, we have a plan designed to help you scale without friction.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Button text="Start Free Trial" href="#pricing" variant="primary" />
|
||||
<Button text="Compare Features" href="#features" variant="secondary" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section id="pricing" className="py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
|
||||
{/* Starter */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="card p-8 rounded-2xl border border-border flex flex-col h-full"
|
||||
>
|
||||
<h3 className="text-2xl font-semibold mb-2">Starter</h3>
|
||||
<p className="text-muted-foreground mb-6">Perfect for individuals and small projects.</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-5xl font-bold">$19</span>
|
||||
<span className="text-muted-foreground">/mo</span>
|
||||
</div>
|
||||
<Button text="Get Started" variant="secondary" className="w-full mb-8" />
|
||||
<div className="space-y-4 flex-grow">
|
||||
<p className="font-medium text-sm">What's included:</p>
|
||||
<ul className="space-y-3">
|
||||
{["Up to 5 projects", "Basic analytics", "24-hour support response time", "1GB storage"].map((feature, i) => (
|
||||
<li key={i} className="flex items-start gap-3 text-muted-foreground text-sm">
|
||||
<Check className="w-5 h-5 text-accent shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Pro */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="card p-8 rounded-2xl border-2 border-accent relative flex flex-col h-full transform md:-translate-y-4 shadow-2xl shadow-accent/10"
|
||||
>
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-accent text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
|
||||
Most Popular
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold mb-2">Pro</h3>
|
||||
<p className="text-muted-foreground mb-6">Ideal for growing teams and businesses.</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-5xl font-bold">$49</span>
|
||||
<span className="text-muted-foreground">/mo</span>
|
||||
</div>
|
||||
<Button text="Start 14-Day Trial" variant="primary" className="w-full mb-8" />
|
||||
<div className="space-y-4 flex-grow">
|
||||
<p className="font-medium text-sm">Everything in Starter, plus:</p>
|
||||
<ul className="space-y-3">
|
||||
{["Unlimited projects", "Advanced analytics dashboard", "1-hour support response time", "50GB storage", "Custom domain integration", "Team collaboration tools"].map((feature, i) => (
|
||||
<li key={i} className="flex items-start gap-3 text-muted-foreground text-sm">
|
||||
<Check className="w-5 h-5 text-accent shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Enterprise */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="card p-8 rounded-2xl border border-border flex flex-col h-full"
|
||||
>
|
||||
<h3 className="text-2xl font-semibold mb-2">Enterprise</h3>
|
||||
<p className="text-muted-foreground mb-6">Custom solutions for large organizations.</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-5xl font-bold">Custom</span>
|
||||
</div>
|
||||
<Button text="Contact Sales" variant="secondary" className="w-full mb-8" />
|
||||
<div className="space-y-4 flex-grow">
|
||||
<p className="font-medium text-sm">Everything in Pro, plus:</p>
|
||||
<ul className="space-y-3">
|
||||
{["Unlimited storage", "Dedicated account manager", "24/7 phone support", "Custom contract & SLA", "On-premise deployment options", "Advanced security & SSO"].map((feature, i) => (
|
||||
<li key={i} className="flex items-start gap-3 text-muted-foreground text-sm">
|
||||
<Check className="w-5 h-5 text-accent shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section id="features" className="py-24 bg-card/50 border-y border-border px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-6">Everything you need to succeed</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
All our plans come packed with powerful features designed to help you work smarter, not harder.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ icon: Zap, title: "Lightning Fast", desc: "Optimized for speed and performance across all devices." },
|
||||
{ icon: Shield, title: "Bank-grade Security", desc: "Your data is encrypted and protected at all times." },
|
||||
{ icon: Globe, title: "Global CDN", desc: "Deliver content quickly to users anywhere in the world." },
|
||||
{ icon: BarChart, title: "Deep Analytics", desc: "Understand your users with comprehensive data insights." }
|
||||
].map((feature, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||
className="p-6 rounded-xl bg-background border border-border hover:border-accent/50 transition-colors"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4 text-accent">
|
||||
<feature.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h4 className="text-xl font-semibold mb-2">{feature.title}</h4>
|
||||
<p className="text-muted-foreground text-sm">{feature.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-24 px-4">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-6">Frequently Asked Questions</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Got questions? We've got answers. If you can't find what you're looking for, reach out to our team.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ q: "Can I change my plan later?", a: "Absolutely. You can upgrade or downgrade your plan at any time. Prorated charges will be applied automatically." },
|
||||
{ q: "What payment methods do you accept?", a: "We accept all major credit cards, PayPal, and wire transfers for annual Enterprise plans." },
|
||||
{ q: "Is there a long-term contract?", a: "No, all our standard plans are month-to-month. You can cancel anytime without penalty. We do offer discounts for annual commitments." },
|
||||
{ q: "Do you offer discounts for non-profits?", a: "Yes! We offer a 50% discount for registered non-profit organizations. Contact our support team to apply." }
|
||||
].map((faq, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: i * 0.1 }}
|
||||
className="p-6 rounded-xl border border-border bg-card"
|
||||
>
|
||||
<h4 className="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||
<HelpCircle className="w-5 h-5 text-accent" />
|
||||
{faq.q}
|
||||
</h4>
|
||||
<p className="text-muted-foreground pl-7">{faq.a}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-24 px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative rounded-3xl overflow-hidden bg-primary-cta px-8 py-16 md:py-24 text-center"
|
||||
>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white/10 to-transparent opacity-50"></div>
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-6 text-primary-cta-text">Ready to transform your workflow?</h2>
|
||||
<p className="text-lg text-primary-cta-text/80 mb-10">
|
||||
Join thousands of teams who are already using FlowSync to do their best work. Start your 14-day free trial today.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Button text="Get Started for Free" href="/signup" variant="secondary" />
|
||||
<Button text="Talk to Sales" href="/contact" variant="primary" className="border border-primary-cta-text/20" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="bg-card py-12 px-4 border-t border-border">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl font-bold text-foreground">FlowSync</span>
|
||||
</div>
|
||||
<div className="flex gap-6 text-sm text-muted-foreground">
|
||||
<a href="#" className="hover:text-foreground transition-colors">Terms</a>
|
||||
<a href="#" className="hover:text-foreground transition-colors">Privacy</a>
|
||||
<a href="#" className="hover:text-foreground transition-colors">Contact</a>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
© {new Date().getFullYear()} FlowSync Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,4 +8,5 @@ export const routes: Route[] = [
|
||||
{ path: '/', label: 'Home', pageFile: 'HomePage' },
|
||||
{ path: '/pricing-features', label: 'Pricing Features', pageFile: 'PricingFeaturesPage' },
|
||||
{ path: '/simple-about', label: 'Simple About', pageFile: 'SimpleAboutPage' },
|
||||
{ path: '/plans', label: 'Plans', pageFile: 'PlansPage' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user