Pricing Exemple 1

1"use client";
2
3import { useState } from "react";
4import { motion, AnimatePresence , Variants } from "framer-motion";
5import { Check } from "lucide-react";
6
7const plans = [
8  {
9    id: "starter",
10    icon: "⌘",
11    name: "Starter",
12    monthlyPrice: 0,
13    annualPrice: 0,
14    description:
15      "Ideal for new investors or those with smaller portfolios. Offers essential features and tools to get started.",
16    features: [
17      "Market data and news",
18      "Basic portfolio tracking",
19      "Access to educational resources",
20      "Limited customer support",
21    ],
22    cta: "Register For Free!",
23    highlight: false,
24    dark: false,
25  },
26  {
27    id: "professional",
28    icon: "◇",
29    name: "Professional",
30    monthlyPrice: 59,
31    annualPrice: 49,
32    description:
33      "A comprehensive plan for investors seeking more advanced features and Olixer AI Assistant.",
34    features: [
35      "All features from the Starter plan",
36      "Advanced portfolio analysis",
37      "Personalized investment recommendations",
38      "Priority customer support",
39      "Access to a community of investors",
40      "Olixer AI Assistant",
41    ],
42    cta: "Get Started",
43    highlight: true,
44    dark: true,
45  },
46  {
47    id: "genius",
48    icon: "⊕",
49    name: "Genius",
50    monthlyPrice: 299,
51    annualPrice: 249,
52    description:
53      "Tailored for experienced investors and companies with complex portfolios and high-level needs.",
54    features: [
55      "All features from the Professional plan",
56      "Exclusive access to investment research & analysis",
57      "Private personal letter news",
58      "Personalized wealth management services",
59      "Dedicated account manager",
60      "Access to exclusive investment opportunities",
61      "Exclusive company Investing Account",
62    ],
63    cta: "Get Started",
64    highlight: false,
65    dark: false,
66  },
67];
68
69const containerVariants: Variants = {
70  hidden: {},
71  visible: {
72    transition: { staggerChildren: 0.1, delayChildren: 0.15 },
73  },
74};
75
76const cardVariants: Variants = {
77  hidden: { opacity: 0, y: 32 },
78  visible: {
79    opacity: 1,
80    y: 0,
81    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
82  },
83};
84
85export default function PricingSection() {
86  const [annual, setAnnual] = useState(false);
87
88  return (
89    <section
90      className="min-h-screen w-full flex flex-col items-center justify-center px-4 py-24"
91// … truncated