Add src/app/pricing/page.tsx

2026-03-09 23:08:53 +00:00
parent 25fdcbea09
commit efd11dfd58
1 changed files with 134 additions and 0 deletions
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { CreditCard, Sparkles, Zap } from 'lucide-react';
+import { useState } from 'react';
+
+export default function PricingPage() {
+  const [unlockedPlan, setUnlockedPlan] = useState<string | null>(null);
+
+  const handlePayPalCheckout = (planId: string) => {
+    // Simulate PayPal integration
+    // In production, integrate with PayPal SDK
+    const confirmed = window.confirm(
+      `Redirect to PayPal for ${planId} plan? (Demo: Click OK to simulate payment)`
+    );
+    if (confirmed) {
+      // Simulate successful payment
+      setUnlockedPlan(planId);
+      alert(`Payment successful! ${planId} plan unlocked.`);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="large"
+      background="circleGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "How It Works", id: "about" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "FAQ", id: "faq" }
+          ]}
+          button={{ text: "Start Free", href: "/pricing" }}
+          brandName="ClipForge AI"
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing" style={{ paddingTop: "80px" }}>
+        <PricingCardFive
+          title="Choose Your Plan - Simple, Transparent Pricing"
+          description="All plans include PayPal integration for secure payments. Start free, upgrade anytime. Payment required to unlock access to all clipping features."
+          tag="Pricing Plans"
+          tagIcon={CreditCard}
+          plans={[
+            {
+              id: "starter",              tag: "Starter Plan",              price: "$9",              period: "/month",              description: "Perfect for creators just starting their short-form journey.",              button: {
+                text: unlockedPlan === "starter" ? "✓ Unlocked" : "Subscribe with PayPal",                onClick: () => handlePayPalCheckout("starter")
+              },
+              featuresTitle: "What's Included:",              features: [
+                "10 clips per month",                "720p video quality",                "Auto-captions in 5 languages",                "Basic analytics dashboard",                "Email support"
+              ]
+            },
+            {
+              id: "creator",              tag: "Creator Plan",              tagIcon: Sparkles,
+              price: "$29",              period: "/month",              description: "Designed for serious content creators scaling their presence.",              button: {
+                text: unlockedPlan === "creator" ? "✓ Unlocked" : "Subscribe with PayPal",                onClick: () => handlePayPalCheckout("creator")
+              },
+              featuresTitle: "What's Included:",              features: [
+                "50 clips per month",                "1080p video quality",                "Auto-captions in 15 languages",                "Advanced analytics & insights",                "Trending effects library",                "Priority support"
+              ]
+            },
+            {
+              id: "pro",              tag: "Pro Plan",              tagIcon: Zap,
+              price: "$79",              period: "/month",              description: "For agencies and professional creators maximizing revenue.",              button: {
+                text: unlockedPlan === "pro" ? "✓ Unlocked" : "Subscribe with PayPal",                onClick: () => handlePayPalCheckout("pro")
+              },
+              featuresTitle: "What's Included:",              features: [
+                "200 clips per month",                "4K video quality",                "Auto-captions in 25 languages",                "Premium analytics suite",                "Custom branding options",                "Batch processing (10 videos)",                "API access",                "Dedicated account manager"
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "How It Works", href: "#about" },
+                { label: "API Docs", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Creator Hub", href: "#" },
+                { label: "Case Studies", href: "#" },
+                { label: "Templates", href: "#" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 ClipForge AI. All rights reserved."
+          bottomRightText="Made for creators, by creators"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}