Pricing

<div className="grid md:grid-cols-3 gap-8 py-12"><div className="border rounded-xl p-8"><h3 className="font-bold text-xl">Basic</h3><div className="text-3xl font-bold mt-4">$9<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 border border-input py-2 rounded-md hover:bg-accent">Get Started</button></div><div className="border-2 border-primary rounded-xl p-8 relative"><div className="absolute top-0 right-4 -translate-y-1/2 bg-primary text-primary-foreground text-xs px-3 py-1 rounded-full">Popular</div><h3 className="font-bold text-xl">Pro</h3><div className="text-3xl font-bold mt-4">$29<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 bg-primary text-primary-foreground py-2 rounded-md">Get Started</button></div><div className="border rounded-xl p-8"><h3 className="font-bold text-xl">Enterprise</h3><div className="text-3xl font-bold mt-4">$99<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 border border-input py-2 rounded-md hover:bg-accent">Contact Sales</button></div></div>

"use client";

import React, { useState } from "react";

interface Pricing3tierProps {
  className?: string;
  children?: React.ReactNode;
}

export default function Pricing3tier({
  className = "",
  children,
}: Pricing3tierProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="grid md:grid-cols-3 gap-8 py-12"><div className="border rounded-xl p-8"><h3 className="font-bold text-xl">Basic</h3><div className="text-3xl font-bold mt-4">$9<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 border border-input py-2 rounded-md hover:bg-accent">Get Started</button></div><div className="border-2 border-primary rounded-xl p-8 relative"><div className="absolute top-0 right-4 -translate-y-1/2 bg-primary text-primary-foreground text-xs px-3 py-1 rounded-full">Popular</div><h3 className="font-bold text-xl">Pro</h3><div className="text-3xl font-bold mt-4">$29<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 bg-primary text-primary-foreground py-2 rounded-md">Get Started</button></div><div className="border rounded-xl p-8"><h3 className="font-bold text-xl">Enterprise</h3><div className="text-3xl font-bold mt-4">$99<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 border border-input py-2 rounded-md hover:bg-accent">Contact Sales</button></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedPricing3tier() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="grid md:grid-cols-3 gap-8 py-12"><div className="border rounded-xl p-8"><h3 className="font-bold text-xl">Basic</h3><div className="text-3xl font-bold mt-4">$9<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 border border-input py-2 rounded-md hover:bg-accent">Get Started</button></div><div className="border-2 border-primary rounded-xl p-8 relative"><div className="absolute top-0 right-4 -translate-y-1/2 bg-primary text-primary-foreground text-xs px-3 py-1 rounded-full">Popular</div><h3 className="font-bold text-xl">Pro</h3><div className="text-3xl font-bold mt-4">$29<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 bg-primary text-primary-foreground py-2 rounded-md">Get Started</button></div><div className="border rounded-xl p-8"><h3 className="font-bold text-xl">Enterprise</h3><div className="text-3xl font-bold mt-4">$99<span className="text-sm text-muted-foreground">/mo</span></div><button className="w-full mt-6 border border-input py-2 rounded-md hover:bg-accent">Contact Sales</button></div></div>
    </motion.div>
  );
}

<div className="max-w-md mx-auto border rounded-xl p-8 text-center py-12"><h3 className="font-bold text-2xl">One Simple Price</h3><p className="text-muted-foreground mt-2">No hidden fees or complex tiers.</p><div className="text-5xl font-bold mt-8">$199<span className="text-lg text-muted-foreground">/lifetime</span></div><button className="w-full mt-8 bg-primary text-primary-foreground py-3 rounded-md font-bold">Buy Now</button></div>

"use client";

import React, { useState } from "react";

interface PricingSimpleProps {
  className?: string;
  children?: React.ReactNode;
}

export default function PricingSimple({
  className = "",
  children,
}: PricingSimpleProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="max-w-md mx-auto border rounded-xl p-8 text-center py-12"><h3 className="font-bold text-2xl">One Simple Price</h3><p className="text-muted-foreground mt-2">No hidden fees or complex tiers.</p><div className="text-5xl font-bold mt-8">$199<span className="text-lg text-muted-foreground">/lifetime</span></div><button className="w-full mt-8 bg-primary text-primary-foreground py-3 rounded-md font-bold">Buy Now</button></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedPricingSimple() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="max-w-md mx-auto border rounded-xl p-8 text-center py-12"><h3 className="font-bold text-2xl">One Simple Price</h3><p className="text-muted-foreground mt-2">No hidden fees or complex tiers.</p><div className="text-5xl font-bold mt-8">$199<span className="text-lg text-muted-foreground">/lifetime</span></div><button className="w-full mt-8 bg-primary text-primary-foreground py-3 rounded-md font-bold">Buy Now</button></div>
    </motion.div>
  );
}

<div className="overflow-x-auto py-12"><table className="w-full text-left border-collapse"><thead><tr><th className="p-4 border-b">Features</th><th className="p-4 border-b">Basic</th><th className="p-4 border-b">Pro</th></tr></thead><tbody><tr><td className="p-4 border-b">Users</td><td className="p-4 border-b">1</td><td className="p-4 border-b">Unlimited</td></tr><tr><td className="p-4 border-b">Storage</td><td className="p-4 border-b">5GB</td><td className="p-4 border-b">100GB</td></tr></tbody></table></div>

"use client";

import React, { useState } from "react";

interface PricingComparisonProps {
  className?: string;
  children?: React.ReactNode;
}

export default function PricingComparison({
  className = "",
  children,
}: PricingComparisonProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="overflow-x-auto py-12"><table className="w-full text-left border-collapse"><thead><tr><th className="p-4 border-b">Features</th><th className="p-4 border-b">Basic</th><th className="p-4 border-b">Pro</th></tr></thead><tbody><tr><td className="p-4 border-b">Users</td><td className="p-4 border-b">1</td><td className="p-4 border-b">Unlimited</td></tr><tr><td className="p-4 border-b">Storage</td><td className="p-4 border-b">5GB</td><td className="p-4 border-b">100GB</td></tr></tbody></table></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedPricingComparison() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="overflow-x-auto py-12"><table className="w-full text-left border-collapse"><thead><tr><th className="p-4 border-b">Features</th><th className="p-4 border-b">Basic</th><th className="p-4 border-b">Pro</th></tr></thead><tbody><tr><td className="p-4 border-b">Users</td><td className="p-4 border-b">1</td><td className="p-4 border-b">Unlimited</td></tr><tr><td className="p-4 border-b">Storage</td><td className="p-4 border-b">5GB</td><td className="p-4 border-b">100GB</td></tr></tbody></table></div>
    </motion.div>
  );
}

<div className="text-center py-12"><div className="inline-flex items-center gap-2 bg-muted p-1 rounded-lg mb-8"><button className="px-4 py-1.5 rounded-md bg-background shadow-sm text-sm font-medium">Monthly</button><button className="px-4 py-1.5 rounded-md text-sm font-medium text-muted-foreground">Yearly</button></div><div className="max-w-sm mx-auto border rounded-xl p-8"><div className="text-4xl font-bold">$19<span className="text-sm text-muted-foreground">/mo</span></div><p className="text-sm text-green-500 mt-2">Billed annually ($228)</p><button className="w-full mt-6 bg-primary text-primary-foreground py-2 rounded-md">Subscribe</button></div></div>

"use client";

import React, { useState } from "react";

interface PricingToggleProps {
  className?: string;
  children?: React.ReactNode;
}

export default function PricingToggle({
  className = "",
  children,
}: PricingToggleProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="text-center py-12"><div className="inline-flex items-center gap-2 bg-muted p-1 rounded-lg mb-8"><button className="px-4 py-1.5 rounded-md bg-background shadow-sm text-sm font-medium">Monthly</button><button className="px-4 py-1.5 rounded-md text-sm font-medium text-muted-foreground">Yearly</button></div><div className="max-w-sm mx-auto border rounded-xl p-8"><div className="text-4xl font-bold">$19<span className="text-sm text-muted-foreground">/mo</span></div><p className="text-sm text-green-500 mt-2">Billed annually ($228)</p><button className="w-full mt-6 bg-primary text-primary-foreground py-2 rounded-md">Subscribe</button></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedPricingToggle() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="text-center py-12"><div className="inline-flex items-center gap-2 bg-muted p-1 rounded-lg mb-8"><button className="px-4 py-1.5 rounded-md bg-background shadow-sm text-sm font-medium">Monthly</button><button className="px-4 py-1.5 rounded-md text-sm font-medium text-muted-foreground">Yearly</button></div><div className="max-w-sm mx-auto border rounded-xl p-8"><div className="text-4xl font-bold">$19<span className="text-sm text-muted-foreground">/mo</span></div><p className="text-sm text-green-500 mt-2">Billed annually ($228)</p><button className="w-full mt-6 bg-primary text-primary-foreground py-2 rounded-md">Subscribe</button></div></div>
    </motion.div>
  );
}

<div className="bg-muted rounded-xl p-12 text-center flex flex-col items-center py-12"><h3 className="text-2xl font-bold">Enterprise Needs?</h3><p className="text-muted-foreground mt-4 max-w-md">We offer custom solutions for large organizations. Let's talk about how we can help.</p><button className="mt-8 bg-primary text-primary-foreground px-6 py-2 rounded-md">Contact Us</button></div>

"use client";

import React, { useState } from "react";

interface PricingContactProps {
  className?: string;
  children?: React.ReactNode;
}

export default function PricingContact({
  className = "",
  children,
}: PricingContactProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="bg-muted rounded-xl p-12 text-center flex flex-col items-center py-12"><h3 className="text-2xl font-bold">Enterprise Needs?</h3><p className="text-muted-foreground mt-4 max-w-md">We offer custom solutions for large organizations. Let's talk about how we can help.</p><button className="mt-8 bg-primary text-primary-foreground px-6 py-2 rounded-md">Contact Us</button></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedPricingContact() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="bg-muted rounded-xl p-12 text-center flex flex-col items-center py-12"><h3 className="text-2xl font-bold">Enterprise Needs?</h3><p className="text-muted-foreground mt-4 max-w-md">We offer custom solutions for large organizations. Let's talk about how we can help.</p><button className="mt-8 bg-primary text-primary-foreground px-6 py-2 rounded-md">Contact Us</button></div>
    </motion.div>
  );
}