0import React from "react";
1import Link from "next/link";
2
3const CheckmarkIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        fillRule="evenodd"
13        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
14        clipRule="evenodd"
15      />
16    </svg>
17  );
18};
19
20const data = [
21  { name: "Private forum access" },
22  { name: "Entry to annual conference" },
23  { name: "Extended Resources" },
24  { name: "Design system analytics" },
25];
26
27export function PricingTables1() {
28  return (
29    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
30      <div className="flex gap-x-16 rounded-3xl border border-slate-200 p-6 max-lg:flex-col sm:min-h-[320px]">
31        <div className="w-full p-6 lg:pr-0">
32          <div className="mb-8 max-w-xl">
33            <h2 className="mb-3 text-3xl font-bold tracking-tight text-slate-900">
34              Competitive Pricing
35            </h2>
36            <p className="text-base text-slate-600">
37              Our cost-effective pricing model ensures you gain access to our
38              dynamic team's expertise and our cutting-edge technology,
39              groundbreaking innovation doesn't have to break the bank.
40            </p>
41          </div>
42          <div className="mb-6 flex items-center gap-x-6">
43            <h3 className="text-xl font-semibold text-sky-600 sm:whitespace-nowrap">
44              Excellence within Your Budget
45            </h3>
46            <hr className="h-[1px] w-full border border-none bg-slate-200 max-sm:hidden" />
47          </div>
48          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
49            {data.map(({ name }, index: number) => {
50              return (
51                <div key={index} className="flex gap-x-2">
52                  <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600" />
53
54                  <p className="text-base text-slate-600">{name}</p>
55                </div>
56              );
57            })}
58          </div>
59        </div>
60        <div className="flex flex-col items-center justify-center gap-y-6 rounded-3xl border border-slate-200 bg-slate-100 p-6 max-lg:min-h-[320px] sm:max-lg:m-6 lg:w-[448px] lg:min-w-[448px]">
61          <div className="text-center">
62            <h2 className="mb-4 text-lg font-semibold lowercase text-sky-600 first-letter:uppercase">
63              enjoy lifelong ownership
64            </h2>
65            <p className="font-slate-900 mb-4 text-5xl font-black text-slate-900">
66              $240
67              <span className="ml-2 text-base font-semibold uppercase text-slate-600">
68                usd
69              </span>
70            </p>
71            <p className="text-center text-xs text-slate-600">
72              Learn more about membership policy
73            </p>
74          </div>
75          <Link
76            href="#"
77            className="h-fit w-fit select-none rounded-lg bg-sky-600 px-5 py-2.5 text-sm lowercase text-slate-100 outline-1 outline-sky-600 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-600/50"
78          >
79            start now
80          </Link>
81        </div>
82      </div>
83    </div>
84  );
85}
86

0import React from "react";
1import Link from "next/link";
2import { useState } from "react";
3
4const data = [
5  {
6    plan: "basic",
7    price: { yearly: "$92", monthly: "$45" },
8    desc: "Unlock the potential of your business with our starter plan. Benefit from 24/7 live chat support, customized branding guidelines, and entry to our annual conference.",
9    features: [
10      { name: "24/7 live chat support" },
11      { name: "Customized branding guidelines" },
12      { name: "Entry to annual conference" },
13    ],
14  },
15  {
16    plan: "professional",
17    price: { yearly: "$230", monthly: "$45" },
18    desc: "Elevate your business with our professional plan. Gain access to private forum, customized branding guidelines, priority customer support, and 24/7 live chat support.",
19    features: [
20      { name: "Private forum access" },
21      { name: "Customized branding guidelines" },
22      { name: "Priority customer support" },
23      { name: "24/7 live chat support" },
24    ],
25  },
26  {
27    plan: "ultimate",
28    price: { yearly: "$430", monthly: "$45" },
29    desc: "Unleash the full potential of your business with our ultimate plan. Enjoy e-commerce integration, one-on-one design consultation, private forum access, priority customer support, and social media content creation.",
30    features: [
31      { name: "E-commerce integration" },
32      { name: "One-on-one design consultation" },
33      { name: "Private forum access" },
34      { name: "Priority customer support" },
35      { name: "Social media content creation" },
36    ],
37  },
38];
39
40const Checkmark = ({ className }) => {
41  return (
42    <svg
43      xmlns="http://www.w3.org/2000/svg"
44      viewBox="0 0 24 24"
45      preserveAspectRatio="xMidYMid meet"
46      className={className}
47    >
48      <path
49        fillRule="evenodd"
50        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
51        clipRule="evenodd"
52      />
53    </svg>
54  );
55};
56
57export function PricingTables2() {
58  const [cost, setCost] = useState(false);
59
60  return (
61    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
62      <div className="flex flex-col items-center">
63        <div className="flex flex-col items-center gap-y-6 mb-12">
64          <h2 className="text-left text-5xl font-semibold">
65            Experience the Power of Choices
66          </h2>
67          <div className="flex w-fit gap-4">
68            <button
69              onClick={() => setCost(!cost)}
70              className="h-fit w-fit rounded-full bg-sky-600 px-6 py-3 text-sm font-semibold capitalize text-slate-50 group-last:bg-slate-50 group-last:text-sky-600"
71            >
72              monthly
73            </button>
74            <button
75              onClick={() => setCost(!cost)}
76              className="h-fit w-fit rounded-full bg-sky-600 px-6 py-3 text-sm font-semibold capitalize text-slate-50 group-last:bg-slate-50 group-last:text-sky-600"
77            >
78              yearly
79            </button>
80          </div>
81        </div>
82        <div className="group grid w-full grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
83          {data.map(({ plan, price, features }, index: number) => {
84            return (
85              <div
86                key={index}
87                className="relative flex flex-col justify-between gap-y-12 group last:bg-slate-800 rounded-3xl bg-slate-100 px-6 py-6"
88              >
89                <div className="relative flex w-full flex-col gap-y-8">
90                  <div className="flex flex-col gap-y-4">
91                    <h3 className="text-2xl font-bold capitalize text-slate-900 first-letter:uppercase group-[&>*:nth-child(3)]:text-slate-100 sm:text-3xl">
92                      {plan}
93                    </h3>
94                    <div className="flex items-end gap-x-2">
95                      <h3 className="font-slate-900 text-5xl font-black capitalize text-slate-900 group-[&>*:nth-child(3)]:text-slate-100">
96                        {cost ? price.monthly : price.yearly}
97                      </h3>
98
99                      <p className="truncate text-sm font-medium lowercase text-slate-400 group-[&>*:nth-child(3)]:text-slate-400">
100                        {cost ? "/ month" : "/ year"}
101                      </p>
102                    </div>
103                  </div>
104                  <div className="flex flex-col gap-y-2">
105                    <h3 className="text-xl font-bold capitalize text-slate-900 group-[&>*:nth-child(3)]:text-slate-100">
106                      included in plan:
107                    </h3>
108
109                    <div className="flex flex-col gap-y-4">
110                      {features.map(({ name }, index2: number) => {
111                        return (
112                          <div key={index2} className="flex items-center gap-x-2">
113                            <Checkmark className="h-6 w-6 flex-shrink-0 fill-sky-600 group-[&>*:nth-child(3)]:fill-sky-600" />
114
115                            <p className="text-sm font-medium capitalize text-slate-900 group-[&>*:nth-child(3)]:text-slate-200">
116                              {name}
117                            </p>
118                          </div>
119                        );
120                      })}
121                    </div>
122                  </div>
123                </div>
124
125                <Link
126                  href="/"
127                  className="z-10 h-fit w-full truncate rounded-lg bg-sky-600 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
128                >
129                  Get Started
130                </Link>
131              </div>
132            );
133          })}
134        </div>
135      </div>
136    </div>
137  );
138}
139

0import React from "react";
1import Link from "next/link";
2
3const CheckmarkIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        fillRule="evenodd"
13        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
14        clipRule="evenodd"
15      />
16    </svg>
17  );
18};
19
20const data = [
21  {
22    plan: "basic",
23    price: "free",
24    features: [
25      { name: "24/7 customer support" },
26      { name: "Personalized onboarding" },
27      { name: "Access to knowledge base" },
28    ],
29  },
30  {
31    plan: "standard",
32    price: "$29.99",
33    features: [
34      { name: "Advanced analytics dashboard" },
35      { name: "Customizable branding options" },
36      { name: "Priority email support" },
37      { name: "Access to community forum" },
38    ],
39  },
40  {
41    plan: "premium",
42    price: "$59.99",
43    features: [
44      { name: "Full e-commerce integration" },
45      { name: "Dedicated account manager" },
46      { name: "24/7 live chat support" },
47      { name: "Access to exclusive webinars" },
48      { name: "Social media marketing tools" },
49    ],
50  },
51];
52
53export function PricingTables3() {
54  return (
55    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
56      <div className="flex justify-between gap-x-12 gap-y-4 max-lg:flex-col lg:items-center">
57        <div className="max-w-3xl">
58          <h2 className="text-4xl font-bold tracking-tight text-slate-900">
59            Unleash the Power of Our Team and Transform Your Business
60          </h2>
61        </div>
62
63        <div className="w-full max-w-md lg:text-right">
64          <p className="text-base text-slate-600">
65            Our team of specialists collectively shares a fervor for
66            groundbreaking technologies and innovation. We play a pivotal role
67            in forging the industry's future.
68          </p>
69        </div>
70      </div>
71
72      <hr className="my-12 h-[1px] border-none bg-slate-200" />
73
74      <div className="divide-y divide-slate-200">
75        {data.map(({ plan, features, price }, index: number) => {
76          return (
77            <div
78              key={index}
79              className="flex flex-wrap justify-between gap-x-16 gap-y-8 py-12 first:pt-0 last:pb-0 max-sm:flex-col lg:grid lg:grid-cols-[198px_328px_repeat(2,minmax(0,1fr))] lg:items-center xl:grid-cols-[228px_428px_repeat(2,minmax(0,1fr))]"
80            >
81              <div className="sm:contents">
82                <h2 className="text-2xl font-bold lowercase tracking-tight text-slate-900 first-letter:uppercase max-sm:mb-2 sm:text-3xl lg:order-first">
83                  {plan}
84                </h2>
85                <p className="font-slate-900 text-4xl font-black lowercase text-slate-900 first-letter:uppercase max-sm:mb-4">
86                  {price}
87                </p>
88                <div className="flex w-full grid-cols-[repeat(2,auto)] flex-col justify-between gap-y-4 sm:max-lg:grid lg:-order-1">
89                  {features.map(({ name }, index2: number) => {
90                    return (
91                      <div key={index2} className="flex gap-x-2">
92                        <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600" />
93
94                        <p className="text-base text-slate-600">{name}</p>
95                      </div>
96                    );
97                  })}
98                </div>
99              </div>
100              <div className="flex lg:justify-end">
101                <Link
102                  href="#"
103                  className="h-fit w-fit select-none rounded-lg bg-sky-600 px-5 py-2.5 text-sm lowercase text-slate-100 outline-1 outline-sky-600 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-600/50"
104                >
105                  start now
106                </Link>
107              </div>
108            </div>
109          );
110        })}
111      </div>
112    </div>
113  );
114}
115

0import React from "react";
1import Link from "next/link";
2
3const CheckmarkIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        fillRule="evenodd"
13        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
14        clipRule="evenodd"
15      />
16    </svg>
17  );
18};
19
20const data = [
21  {
22    plan: "basic",
23    price: "$19",
24    description: "Perfect for small-scale projects and essential design files.",
25    features: [
26      { name: "5 GB storage space for files and documents." },
27      { name: "Access to a wide range of professionally designed templates." },
28      { name: "Unlimited project collaborators." },
29      { name: "Export designs in multiple file formats." },
30    ],
31  },
32  {
33    plan: "standard",
34    price: "$29",
35    description:
36      "Unlock even more possibilities with an extensive collection of premium design templates.",
37    features: [
38      { name: "10 GB storage space for files and documents." },
39      { name: "Advanced design collaboration and commenting tools." },
40      { name: "Access to a library of exclusive pre-designed templates." },
41      { name: "Create custom templates tailored to your needs." },
42      { name: "Invite external collaborators to your projects." },
43    ],
44  },
45  {
46    plan: "premium",
47    price: "$49",
48    description:
49      "Gain valuable insights with comprehensive usage reports and analytics for your team.",
50    features: [
51      { name: "20 GB storage space for files and documents." },
52      { name: "Advanced design collaboration and commenting tools." },
53      { name: "Access to a library of premium pre-designed templates." },
54      { name: "Create custom templates for your brand." },
55      { name: "Basic design collaboration and commenting tools." },
56      {
57        name: "Manage your brand assets with advanced branding features.",
58      },
59      { name: "Detailed team usage reports and analytics." },
60    ],
61  },
62];
63
64export function PricingTables4() {
65  return (
66    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
67      <div className="mx-auto mb-12 max-w-3xl text-center">
68        <h2 className="mb-2 text-lg font-semibold text-sky-600">
69          Jettwave's Pricing Structure
70        </h2>
71        <p className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
72          Investing in Technological Excellence
73        </p>
74        <p className="text-lg text-slate-600">
75          From our basic package to our premium solutions, each tier offers a
76          blend of efficiency and innovation, designed to propel your business
77          to the forefront of the tech industry. Reach out to our team for a
78          detailed consultation and discover the ideal package for your specific
79          needs.
80        </p>
81      </div>
82      <div className="mx-auto grid w-fit grid-cols-1 divide-slate-200 max-lg:divide-y lg:grid-cols-3 lg:divide-x">
83        {data.map(({ plan, price, description, features }, index: number) => {
84          return (
85            <div
86              key={index}
87              className="mx-auto flex max-w-sm flex-col gap-y-8 first:pl-0 last:pr-0 max-lg:py-8 max-lg:first:pt-0 max-lg:last:pb-0 lg:px-6"
88            >
89              <div className="flex flex-col gap-y-8 lg:gap-y-6">
90                <div>
91                  <h2 className="mb-1 text-sm font-semibold uppercase text-sky-600">
92                    {plan}
93                  </h2>
94
95                  <p className="font-slate-900 mb-2 text-4xl font-black lowercase text-slate-900 first-letter:uppercase">
96                    {price}
97                    <span className="ml-2 text-sm font-semibold uppercase text-slate-600">
98                      USD
99                    </span>
100                  </p>
101
102                  <p className="line-clamp-3 text-base text-slate-600 lg:h-[72px]">
103                    {description}
104                  </p>
105                </div>
106
107                <Link
108                  href="#"
109                  className="h-fit truncate rounded-lg bg-sky-600 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50 hover:bg-sky-800 focus:outline-none focus:ring-4 focus:ring-blue-300"
110                >
111                  Start Now
112                </Link>
113              </div>
114
115              <div>
116                <h2 className="mb-4 text-lg font-semibold text-sky-600 first-letter:uppercase">
117                  what's included
118                </h2>
119
120                <div className="flex flex-col gap-y-4">
121                  {features.map(({ name }, index2: number) => {
122                    return (
123                      <div key={index2} className="flex gap-x-2">
124                        <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600" />
125
126                        <p className="text-base text-slate-600">{name}</p>
127                      </div>
128                    );
129                  })}
130                </div>
131              </div>
132            </div>
133          );
134        })}
135      </div>
136    </div>
137  );
138}
139

0import React from "react";
1
2const CheckmarkIcon = ({ className }) => {
3  return (
4    <svg
5      xmlns="http://www.w3.org/2000/svg"
6      viewBox="0 0 24 24"
7      preserveAspectRatio="xMidYMid meet"
8      className={className}
9    >
10      <path
11        fillRule="evenodd"
12        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
13        clipRule="evenodd"
14      />
15    </svg>
16  );
17};
18
19const data = [
20  {
21    plan: "basic",
22    price: "free",
23    features: [
24      { name: "24/7 customer support" },
25      { name: "Personalized branding recommendations" },
26    ],
27  },
28  {
29    plan: "standard",
30    price: "$32",
31    features: [
32      { name: "Access to exclusive community forum" },
33      { name: "Tailored branding guidelines" },
34    ],
35  },
36  {
37    plan: "premium",
38    price: "$64",
39    features: [
40      { name: "Personalized design consultation sessions" },
41      { name: "Integrated e-commerce solutions" },
42    ],
43  },
44];
45
46export function PricingTables5() {
47  return (
48    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
49      <div className="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3">
50        {data.map(({ plan, price, features }, index: number) => {
51          return (
52            <div
53              key={index}
54              className="group mx-auto flex w-full flex-col items-center rounded-3xl border-slate-200 bg-slate-800 p-6 py-12 odd:border odd:bg-slate-100 max-lg:max-w-md"
55            >
56              <p className="mb-6 w-fit rounded-full bg-sky-700/25 px-4 py-2 text-base font-semibold capitalize text-sky-600 group-even:brightness-[1.75]">
57                {plan}
58              </p>
59              <p className="font-slate-900 mb-6 text-5xl font-black lowercase text-slate-900 first-letter:uppercase group-even:text-slate-100">
60                {price}
61                <span className="ml-2 text-base font-semibold lowercase text-slate-600 group-even:text-slate-400">
62                  / month
63                </span>
64              </p>
65              <div className="flex w-fit flex-col gap-y-4">
66                {features.map(({ name }, index2: number) => {
67                  return (
68                    <div key={index2} className="flex gap-x-2">
69                      <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600 group-even:fill-sky-600" />
70                      <p className="text-base text-slate-600 group-even:text-slate-100">
71                        {name}
72                      </p>
73                    </div>
74                  );
75                })}
76              </div>
77            </div>
78          );
79        })}
80      </div>
81    </div>
82  );
83}
84

0import React from "react";
1
2const Logo = ({ className }) => {
3  return (
4    <svg
5      xmlns="http://www.w3.org/2000/svg"
6      viewBox="0 0 24 24"
7      preserveAspectRatio="xMidYMid meet"
8      className={className}
9    >
10      <path
11        fillRule="evenodd"
12        d="M10.5 3.798v5.02a3 3 0 01-.879 2.121l-2.377 2.377a9.845 9.845 0 015.091 1.013 8.315 8.315 0 005.713.636l.285-.071-3.954-3.955a3 3 0 01-.879-2.121v-5.02a23.614 23.614 0 00-3 0zm4.5.138a.75.75 0 00.093-1.495A24.837 24.837 0 0012 2.25a25.048 25.048 0 00-3.093.191A.75.75 0 009 3.936v4.882a1.5 1.5 0 01-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0115 8.818V3.936z"
13        clipRule="evenodd"
14      />
15    </svg>
16  );
17};
18
19const MailIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      preserveAspectRatio="xMidYMid meet"
25      className={className}
26    >
27      <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
28      <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
29    </svg>
30  );
31};
32
33const Plus = ({ className }) => {
34  return (
35    <svg
36      xmlns="http://www.w3.org/2000/svg"
37      viewBox="0 0 24 24"
38      className={className}
39    >
40      <path
41        fillRule="evenodd"
42        d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
43        clipRule="evenodd"
44      />
45    </svg>
46  );
47};
48
49const CheckmarkIcon = ({ className }) => {
50  return (
51    <svg
52      xmlns="http://www.w3.org/2000/svg"
53      viewBox="0 0 24 24"
54      preserveAspectRatio="xMidYMid meet"
55      className={className}
56    >
57      <path
58        fillRule="evenodd"
59        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
60        clipRule="evenodd"
61      />
62    </svg>
63  );
64};
65
66const data = [
67  {
68    price: "$19",
69    upsell: [
70      {
71        product: "Pro Plan",
72        desc: "Unlock advanced incident management with unlimited integrations",
73        icon: MailIcon,
74      },
75      {
76        product: "Enterprise Plan",
77        desc: "Tailored solution for large organizations with complex needs",
78        icon: MailIcon,
79      },
80      {
81        product: "Ultimate Plan",
82        desc: "Experience the all-inclusive solution with VIP support",
83        icon: MailIcon,
84      },
85    ],
86    features: [],
87  },
88  {
89    price: "$49",
90    upsell: [],
91    features: [
92      { name: "All features included in the Basic Plan" },
93      { name: "Customizable incident response workflows" },
94      { name: "Service-level agreement for enhanced support" },
95    ],
96  },
97];
98
99export function PricingTables6() {
100  return (
101    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
102      <div className="relative flex gap-y-12 overflow-hidden max-lg:flex-col lg:justify-end lg:max-xl:pb-32 lg:max-xl:pt-8">
103        {/* Proper */}
104        <div
105          className="inset-x-0 max-w-3xl lg:max-xl:absolute 
106        lg:max-xl:max-w-none xl:pr-16"
107        >
108          <h2 className="mb-2 text-lg font-semibold text-sky-600 lg:max-xl:pr-[384px]">
109            Transparent Pricing
110          </h2>
111          <p className="mb-4 line-clamp-2 text-4xl font-bold tracking-tight text-slate-900 lg:max-xl:pr-[384px]">
112            Pricing Strategy For Maximum Impact
113          </p>
114          <p className="text-lg text-slate-600 lg:max-xl:pr-[652px]">
115            Discover our carefully crafted pricing strategy designed to deliver
116            maximum impact for your business. Contact us today to learn more
117            about how our pricing structure can benefit your organization.
118          </p>
119        </div>
120        {/* Proper */}
121
122        {/* lg:max-xl:items-end items-center */}
123
124        <div className="group/both grid grid-cols-1 gap-y-8 sm:grid-cols-2 lg:min-w-[704px] lg:max-w-[704px]">
125          {data.map(({ upsell, price, features }, index: number) => {
126            return (
127              <div
128                key={index}
129                className="group z-20 my-auto h-fit overflow-hidden rounded-2xl border-slate-200
130              
131              
132              duration-300 first:border first:bg-slate-100
133              
134               last:bg-slate-800 group-hover/both:first:z-30 lg:max-xl:my-0 lg:max-xl:first:translate-x-1/4
135              
136              lg:max-xl:first:translate-y-32 lg:max-xl:last:-translate-y-8 min-[1250px]:duration-300"
137              >
138                <div className="flex flex-col gap-3 p-3 group-last:hidden">
139                  {upsell.map((details, linkIndex: number) => {
140                    const Icon = details.icon;
141                    return (
142                      <div
143                        key={linkIndex}
144                        className="group relative flex items-center gap-x-4 rounded-xl bg-slate-200 p-4"
145                      >
146                        <Icon className="h-10 w-10 flex-shrink-0 rounded-full bg-sky-600 fill-slate-100 p-2.5" />
147
148                        <div className="flex min-w-0 flex-col">
149                          <p className="truncate font-semibold capitalize text-slate-900">
150                            {details.product}
151                          </p>
152                          <p className="truncate text-sm capitalize text-slate-600">
153                            {details.desc}
154                          </p>
155                        </div>
156
157                        <div className="absolute inset-x-0 bottom-0 z-10 flex w-full translate-y-[75%] justify-center group-last:hidden">
158                          <Plus className="h-6 w-6 rounded-full bg-slate-100 stroke-slate-900 stroke-2 p-1" />
159                        </div>
160                      </div>
161                    );
162                  })}
163                </div>
164
165                <div className="flex flex-col items-center gap-y-4 p-6 text-center group-first:hidden">
166                  <Logo className="h-16 w-16 rounded-full bg-sky-600 fill-slate-100 p-4" />
167
168                  <h3 className="text-xl font-semibold capitalize text-slate-100">
169                    better uptime
170                  </h3>
171                </div>
172
173                <div className="mb-8 flex flex-col gap-y-4 px-6 group-first:hidden">
174                  {features.map(({ name }, featuresIndex: number) => {
175                    return (
176                      <div key={featuresIndex} className="flex gap-x-2">
177                        <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600 group-last:fill-sky-600" />
178
179                        <p className="text-base text-slate-600 group-last:text-slate-200">
180                          {name}
181                        </p>
182                      </div>
183                    );
184                  })}
185                </div>
186
187                <div className="p-6 group-last:bg-slate-900">
188                  <div className="flex items-end justify-center gap-2">
189                    <h2 className="text-3xl font-bold text-slate-900 group-last:text-slate-50">
190                      {price}
191                    </h2>
192                    <p className="font-xs text-slate-900 group-last:text-slate-50">
193                      /mo
194                    </p>
195                  </div>
196                  <p className="text-center text-base text-slate-900 group-last:text-slate-50">
197                    $525 per month for 6 team <br /> filler text yaaaaaa
198                  </p>
199                </div>
200              </div>
201            );
202          })}
203        </div>
204      </div>
205    </div>
206  );
207}
208

0import React from "react";
1import Link from "next/link";
2import { useState } from "react";
3
4const CheckmarkIcon = ({ className }) => {
5  return (
6    <svg
7      xmlns="http://www.w3.org/2000/svg"
8      viewBox="0 0 24 24"
9      preserveAspectRatio="xMidYMid meet"
10      className={className}
11    >
12      <path
13        fillRule="evenodd"
14        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
15        clipRule="evenodd"
16      />
17    </svg>
18  );
19};
20
21const data = [
22  {
23    plan: "basic",
24    price: { yearly: "$92", monthly: "$45" },
25    description:
26      "Unlock the potential of your business with our starter plan. Receive 24/7 live chat support, customized branding guidelines, and entry to our annual conference.",
27    features: [
28      { name: "24/7 live chat support" },
29      { name: "Customized branding guidelines" },
30      { name: "Entry to annual conference" },
31    ],
32  },
33  {
34    plan: "professional",
35    price: { yearly: "$230", monthly: "$45" },
36    description:
37      "Elevate your business with our professional plan. Utilize private forum access, customized branding guidelines, priority customer support, and 24/7 live chat support.",
38    features: [
39      { name: "Private forum access" },
40      { name: "Customized branding guidelines" },
41      { name: "Priority customer support" },
42      { name: "24/7 live chat support" },
43    ],
44  },
45  {
46    plan: "ultimate",
47    price: { yearly: "$430", monthly: "$45" },
48    description:
49      "Unleash the full potential of your business with our ultimate plan. Benefit from e-commerce integration, one-on-one design consultation, private forum access, priority customer support, and social media content creation.",
50    features: [
51      { name: "E-commerce integration" },
52      { name: "One-on-one design consultation" },
53      { name: "Private forum access" },
54      { name: "Priority customer support" },
55      { name: "Social media content creation" },
56    ],
57  },
58];
59
60export function PricingTables7() {
61  const [cost, setCost] = useState(false);
62  return (
63    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
64      <div className="flex justify-between pb-12">
65        <h2 className="text-left text-5xl font-semibold">
66          Explore Limitless Possibilities
67        </h2>
68        <div className="flex gap-4">
69          <button
70            onClick={() => setCost(!cost)}
71            className="h-fit w-fit rounded-full bg-sky-600 px-6 py-3 text-sm font-semibold capitalize text-slate-50 group-last:bg-slate-50 group-last:text-sky-600"
72          >
73            monthly
74          </button>
75          <button
76            onClick={() => setCost(!cost)}
77            className="h-fit w-fit rounded-full bg-sky-600 px-6 py-3 text-sm font-semibold capitalize text-slate-50 group-last:bg-slate-50 group-last:text-sky-600"
78          >
79            yearly
80          </button>
81        </div>
82      </div>
83
84      <div className="mx-auto grid grid-cols-1 rounded-3xl border border-slate-200 bg-slate-100 p-6 max-lg:max-w-md lg:mt-10 lg:grid-cols-3 lg:max-xl:pl-0 xl:gap-x-12 xl:pr-12">
85        {data.map(({ plan, price, features, description }, index: number) => {
86          return (
87            <div
88              key={index}
89              className="group relative mx-auto flex flex-col justify-between gap-y-8 rounded-3xl p-6 last:bg-slate-800 max-lg:last:mt-6 lg:last:rounded-t-none"
90            >
91              <div className="lg:contents">
92                <div className="inset-0 hidden h-fit items-end justify-end bg-slate-800 group-last:flex max-lg:mb-6 lg:absolute lg:-translate-y-full lg:rounded-t-3xl lg:pr-6 lg:pt-6">
93                  <p className="w-fit rounded-full bg-sky-500/25 px-4 py-2 text-base font-semibold capitalize text-sky-400">
94                    most popular
95                  </p>
96                </div>
97
98                <div>
99                  <p className="font-slate-900 mb-4 text-5xl font-black lowercase text-slate-900 first-letter:uppercase group-last:text-slate-100">
100                    {cost ? price.monthly : price.yearly}
101                    <span className="ml-2 text-base font-semibold lowercase text-slate-600 group-last:text-slate-400">
102                      {cost ? "/ month" : "/ year"}
103                    </span>
104                  </p>
105
106                  <h2 className="mb-2 text-3xl font-bold lowercase tracking-tight text-slate-800 first-letter:uppercase group-last:text-slate-200">
107                    {plan}
108                  </h2>
109
110                  <p className="mb-6 line-clamp-2 text-base text-slate-600 group-last:font-light group-last:text-slate-300 lg:h-12">
111                    {description}
112                  </p>
113
114                  <div className="flex flex-col gap-y-4">
115                    {features.map(({ name }, linkIndex: number) => {
116                      return (
117                        <div key={linkIndex} className="flex gap-x-2">
118                          <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600 group-last:fill-sky-600" />
119
120                          <p className="text-base text-slate-600 group-last:text-slate-200">
121                            {name}
122                          </p>
123                        </div>
124                      );
125                    })}
126                  </div>
127                </div>
128              </div>
129
130              <Link
131                href="/"
132                className="z-10 h-fit w-full truncate rounded-lg bg-slate-300 px-6 py-3 text-center text-sm font-medium capitalize text-slate-600 group-last:bg-sky-700 group-last:text-slate-100"
133              >
134                Get Started
135              </Link>
136            </div>
137          );
138        })}
139      </div>
140    </div>
141  );
142}
143