-
- {session?.user.name}
-
-
{session?.user.email}
+
+
+
+
+
+ {session?.user.name.charAt(0)}
+
+
+
+
+ {session?.user.name}
+
+ {!!subscription && (
+
+
+
+ )}
+
+
{session?.user.email}
+
+
+
+
-
{session?.user.emailVerified ? null : (
diff --git a/demo/nextjs/app/pricing/page.tsx b/demo/nextjs/app/pricing/page.tsx
new file mode 100644
index 00000000..0d06e346
--- /dev/null
+++ b/demo/nextjs/app/pricing/page.tsx
@@ -0,0 +1,59 @@
+import { Pricing } from "@/components/blocks/pricing";
+
+const demoPlans = [
+ {
+ name: "STARTER",
+ price: "50",
+ yearlyPrice: "40",
+ period: "per month",
+ features: [
+ "Up to 10 projects",
+ "Basic analytics",
+ "48-hour support response time",
+ "Limited API access",
+ ],
+ description: "Perfect for individuals and small projects",
+ buttonText: "Start Free Trial",
+ href: "/sign-up",
+ isPopular: false,
+ },
+ {
+ name: "PROFESSIONAL",
+ price: "99",
+ yearlyPrice: "79",
+ period: "per month",
+ features: [
+ "Unlimited projects",
+ "Advanced analytics",
+ "24-hour support response time",
+ "Full API access",
+ "Priority support",
+ ],
+ description: "Ideal for growing teams and businesses",
+ buttonText: "Get Started",
+ href: "/sign-up",
+ isPopular: true,
+ },
+ {
+ name: "ENTERPRISE",
+ price: "299",
+ yearlyPrice: "239",
+ period: "per month",
+ features: [
+ "Everything in Professional",
+ "Custom solutions",
+ "Dedicated account manager",
+ "1-hour support response time",
+ "SSO Authentication",
+ "Advanced security",
+ ],
+ description: "For large organizations with specific needs",
+ buttonText: "Contact Sales",
+ href: "/contact",
+ isPopular: false,
+ },
+];
+
+export default function Page() {
+ return
;
+}
diff --git a/demo/nextjs/components/blocks/pricing.tsx b/demo/nextjs/components/blocks/pricing.tsx
new file mode 100644
index 00000000..2330719a
--- /dev/null
+++ b/demo/nextjs/components/blocks/pricing.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+import { Star } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+import confetti from "canvas-confetti";
+import NumberFlow from "@number-flow/react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { client } from "@/lib/auth-client";
+
+function useMediaQuery(query: string) {
+ const [matches, setMatches] = useState(false);
+
+ useEffect(() => {
+ const media = window.matchMedia(query);
+ if (media.matches !== matches) {
+ setMatches(media.matches);
+ }
+
+ const listener = () => setMatches(media.matches);
+ media.addListener(listener);
+
+ return () => media.removeListener(listener);
+ }, [query]);
+
+ return matches;
+}
+
+interface PricingPlan {
+ name: string;
+ price: string;
+ yearlyPrice: string;
+ period: string;
+ features: string[];
+ description: string;
+ buttonText: string;
+ href: string;
+ isPopular: boolean;
+}
+
+interface PricingProps {
+ plans: PricingPlan[];
+ title?: string;
+ description?: string;
+}
+
+export function Pricing({
+ plans,
+ title = "Simple, Transparent Pricing",
+ description = "Choose the plan that works for you",
+}: PricingProps) {
+ const [isMonthly, setIsMonthly] = useState(true);
+ const isDesktop = useMediaQuery("(min-width: 768px)");
+ const switchRef = useRef
(null);
+
+ const handleToggle = (checked: boolean) => {
+ setIsMonthly(!checked);
+ if (checked && switchRef.current) {
+ const rect = switchRef.current.getBoundingClientRect();
+ const x = rect.left + rect.width / 2;
+ const y = rect.top + rect.height / 2;
+
+ confetti({
+ particleCount: 50,
+ spread: 60,
+ origin: {
+ x: x / window.innerWidth,
+ y: y / window.innerHeight,
+ },
+ colors: [
+ "hsl(var(--primary))",
+ "hsl(var(--accent))",
+ "hsl(var(--secondary))",
+ "hsl(var(--muted))",
+ ],
+ ticks: 200,
+ gravity: 1.2,
+ decay: 0.94,
+ startVelocity: 30,
+ shapes: ["circle"],
+ });
+ }
+ };
+
+ return (
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+
+ Annual billing (Save 20%)
+
+
+
+
+ {plans.map((plan, index) => (
+
+ {plan.isPopular && (
+
+
+
+ Popular
+
+
+ )}
+
+
+ {plan.name}
+
+
+
+
+
+ {plan.period !== "Next 3 months" && (
+
+ / {plan.period}
+
+ )}
+
+
+
+ {isMonthly ? "billed monthly" : "billed annually"}
+
+
+
+ {plan.features.map((feature, idx) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+
+
+
+ {plan.description}
+
+
+ ))}
+
+