pricing-4

1"use client";
2import { PlusIcon, ShieldCheckIcon } from "lucide-react";
3import { motion } from "motion/react";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6 
7export function PricingSection() {
8  return (
9    <section className="mx-auto w-full max-w-5xl space-y-5" id="pricing">
10      <motion.div
11        className="mx-auto max-w-xl space-y-5"
12        initial={{ opacity: 0, y: 20 }}
13        transition={{ duration: 0.8, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
14        viewport={{ once: true }}
15        whileInView={{ opacity: 1, y: 0 }}
16      >
17        <div className="flex justify-center">
18          <div className="rounded-md border px-4 py-1 text-sm">Pricing</div>
19        </div>
20        <h2 className="mt-5 text-center font-bold text-2xl tracking-tight md:text-3xl lg:text-4xl">
21          Pricing Based on Your Success
22        </h2>
23        <p className="mt-5 text-center text-muted-foreground text-sm md:text-base">
24          We offer a single price for all our services. We believe that pricing
25          is a critical component of any successful business.
26        </p>
27      </motion.div>
28 
29      <motion.div
30        className="mx-auto w-full max-w-2xl space-y-2"
31        initial={{ opacity: 0, y: 20 }}
32        transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
33        viewport={{ once: true }}
34        whileInView={{ opacity: 1, y: 0 }}
35      >
36        <div className="relative grid border bg-background p-4 md:grid-cols-2">
37          <PlusIcon
38            className="-top-[10.5px] -left-[10.5px] absolute size-5 text-foreground"
39            strokeWidth={1}
40          />
41          <PlusIcon
42            className="-top-[10.5px] -right-[10.5px] absolute size-5 text-foreground"
43            strokeWidth={1}
44          />
45          <PlusIcon
46            className="-bottom-[10.5px] -left-[10.5px] absolute size-5 text-foreground"
47            strokeWidth={1}
48          />
49          <PlusIcon
50            className="-right-[10.5px] -bottom-[10.5px] absolute size-5 text-foreground"
51            strokeWidth={1}
52          />
53 
54          <div className="w-full px-4 pt-5 pb-4">
55            <div className="space-y-1">
56              <div className="flex items-center justify-between">
57                <h3 className="font-semibold leading-none">Monthly</h3>
58                <div className="flex items-center gap-x-1">
59                  <span className="text-muted-foreground text-sm line-through">
60                    $8.99
61// … truncated