pricing-3

1"use client";
2 
3import { Briefcase, Building, CheckCircle2, Users } from "lucide-react";
4import * as PricingCard from "@/components/pricing-card";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8export function PricingSection() {
9  const plans = [
10    {
11      icon: <Users />,
12      description: "Perfect for individuals",
13      name: "Basic",
14      price: "Free",
15      variant: "outline",
16      features: [
17        "Automated Meeting Scheduling",
18        "Basic Calendar Sync",
19        "Daily Schedule Overview",
20        "Email Reminders",
21        "Task Management",
22        "24/7 Customer Support",
23        "Single User Access",
24        "Basic Reporting",
25        "Mobile App Access",
26      ],
27    },
28    {
29      icon: <Briefcase />,
30      description: "Ideal for small teams",
31      name: "Pro",
32      badge: "Popular",
33      price: "$29",
34      original: "$39",
35      period: "/month",
36      variant: "default",
37      features: [
38        "All Basic Plan Features",
39        "Advanced Calendar Integrations",
40        "Customizable Notifications",
41        "Priority Support",
42        "Analytics and Insights",
43        "Group Scheduling",
44        "Multiple User Roles",
45        "Advanced Reporting",
46        "Custom Branding Options",
47      ],
48    },
49    {
50      icon: <Building />,
51      name: "Enterprise",
52      description: "Perfect for large scale companies",
53      price: "$99",
54      original: "$129",
55      period: "/month",
56      variant: "outline",
57      features: [
58        "All Pro Plan Features",
59        "Dedicated Account Manager",
60        "Custom Integrations",
61        "Advanced Security Features",
62        "Team Collaboration Tools",
63        "Onboarding and Training",
64        "Unlimited Users",
65        "API Access with Higher Limits",
66        "Advanced Audit Logs",
67      ],
68    },
69  ];
70 
71  return (
72    <section className="mx-auto grid w-full max-w-4xl gap-4 p-6 md:grid-cols-3">
73      {plans.map((plan, index) => (
74        <PricingCard.Card
75          className={cn("w-full max-w-full", index === 1 && "md:scale-105")}
76          key={plan.name}
77        >
78          <PricingCard.Header>
79            <PricingCard.Plan>
80              <PricingCard.PlanName>
81                {plan.icon}
82                <span className="text-muted-foreground">{plan.name}</span>
83              </PricingCard.PlanName>
84              {plan.badge && (
85                <PricingCard.Badge>{plan.badge}</PricingCard.Badge>
86              )}
87            </PricingCard.Plan>
88// … truncated