Pricing Card

1"use client";
2 
3import {
4  Add01Icon,
5  MinusPlus01Icon,
6  MinusSignIcon,
7  Tick02Icon,
8  UserGroupIcon,
9  UserStoryIcon,
10} from "@hugeicons/core-free-icons";
11import { HugeiconsIcon } from "@hugeicons/react";
12import NumberFlow from "@number-flow/react";
13import { AnimatePresence, motion, LayoutGroup } from "motion/react";
14import { useState } from "react";
15 
16// Change Here
17const plans = [
18  {
19    id: "plus",
20    name: "Plus",
21    description: "solo",
22    monthlyPrice: 8.99,
23    yearlyPrice: 6.99,
24    features: [
25      "1TB of Space",
26      "30 days of file recovery",
27      "256-bit AES and SSL/TLS",
28    ],
29  },
30  {
31    id: "standard",
32    name: "Standard",
33    description: "startup",
34    monthlyPrice: 12.99,
35    yearlyPrice: 9.99,
36    features: [
37      "1TB of Space",
38      "30 days of file recovery",
39      "256-bit AES and SSL/TLS",
40    ],
41  },
42  {
43    id: "advanced",
44    name: "Advanced",
45    description: "teams",
46    monthlyPrice: 24.99,
47    yearlyPrice: 19.99,
48    features: [
49      "1TB of Space",
50      "30 days of file recovery",
51      "256-bit AES and SSL/TLS",
52    ],
53  },
54];
55 
56const TRANSITION = {
57  type: "spring" as const,
58  stiffness: 300,
59  damping: 30,
60  mass: 0.8,
61};
62 
63function PricingCard() {
64  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
65    "monthly"
66  );
67  const [selectedPlan, setSelectedPlan] = useState("standard");
68  const [userCount, setUserCount] = useState(3);
69 
70  return (
71    <div className="w-full max-w-[450px] flex flex-col gap-6 p-5 px-4 sm:p-6 rounded-4xl sm:rounded-2xl border border-border bg-background shadow-sm transition-colors duration-300 not-prose">
72      <div className="flex flex-col gap-4 mb-2">
73        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
74          Select a Plan
75        </h1>
76 
77        <div className="bg-muted p-1 h-10 w-full rounded-xl ring-1 ring-border flex">
78          <button
79            onClick={() => setBillingCycle("monthly")}
80            className={`flex-1 h-full rounded-lg text-base font-medium  relative transition-colors duration-300 ${
81              billingCycle === "monthly"
82                ? "text-foreground"
83                : "text-muted-foreground hover:text-foreground"
84            }`}
85          >
86            {billingCycle === "monthly" && (
87              <motion.div
88                layoutId="tab-bg"
89                className="absolute inset-0 bg-background rounded-lg shadow-sm ring-1 ring-border"
90                transition={TRANSITION}
91              />
92// … truncated