first commit

components/pricing/pricing-six/Pricing.jsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from "react";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import PricingMonthly from "./PricingMonthly";
+import PricingYearly from "./PricingYearly";
+
+const Pricing = () => {
+  return (
+    <Tabs>
+      <TabList className="nav nav-tabs justify-content-center pricing-nav-four">
+        <Tab>Monthly</Tab>
+        <Tab>Yearly</Tab>
+      </TabList>
+
+      <div className="pricing-table-area-six">
+        <TabPanel>
+          <PricingMonthly />
+        </TabPanel>
+        {/* End Pricing Month */}
+        <TabPanel>
+          <PricingYearly />
+        </TabPanel>
+        {/* End Pricing Year */}
+      </div>
+    </Tabs>
+  );
+};
+
+export default Pricing;

components/pricing/pricing-six/PricingMonthly.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+const PricingContent = [
+  {
+    pcakName: "Basic",
+    bgColor: "#ffecec",
+    price: "Free",
+    packDetails: "TAKE GREAT NOTES",
+    features: [
+      "Sync up to 2 devices",
+      "Find notes fast with search",
+      "Access web tags",
+      "Clip web pages",
+      "25MB maximum note",
+      "60MB monthly upload limit",
+    ],
+    animationDelay: "",
+    activeItem: "",
+  },
+  {
+    pcakName: "Reguler",
+    bgColor: "#E3F8EF",
+    price: "8.99",
+    packDetails: "BE MORE PRODUCTIVE",
+    features: [
+      "Sync up to 2 devices",
+      "Find notes fast with search",
+      "Access web tags",
+      "Clip web pages",
+      "Apply rich formatting",
+      "Clip web pages",
+      "25MB maximum note size",
+      "Access notes offline",
+      "10GBmonthly upload limit",
+      "Annotate PDFs",
+    ],
+    animationDelay: "100",
+    activeItem: "active",
+  },
+  {
+    pcakName: " Business",
+    bgColor: "#fbf3e5",
+    price: "17.99",
+    packDetails: "Get more with team",
+    features: [
+      "Sync up to 2 devices",
+      "Find notes fast with search",
+      "Access web tags",
+      "Apply rich formatting",
+      "Clip web pages",
+      "25MB maximum note",
+      "Access notes offline",
+      "18GB monthly upload limit",
+    ],
+    animationDelay: "200",
+    activeItem: "",
+  },
+];
+
+const PricingMonthly = () => {
+  return (
+    <div className="row justify-content-center">
+      {PricingContent.map((val, i) => (
+        <div
+          className="col-lg-4 col-sm-6"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          data-aos-delay={val.animationDelay}
+          key={i}
+        >
+          <div className={`pr-table-wrapper ${val.activeItem}`}>
+            <div className="pack-name" style={{ background: val.bgColor }}>
+              {val.pcakName}
+            </div>
+            <div className="price">{val.price}</div>
+            <div className="pack-details">{val.packDetails}</div>
+            <ul className="pr-feature">
+              {val.features.map((list, i) => (
+                <li key={i}>{list}</li>
+              ))}
+            </ul>
+            <a href="#" className="trial-button">
+              Try it Free
+            </a>
+            <div className="trial-text">No card required, cancel any time</div>
+          </div>
+          {/* /.pr-table-wrapper */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PricingMonthly;

components/pricing/pricing-six/PricingYearly.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+const PricingContent = [
+  {
+    pcakName: "Basic",
+    bgColor: "#ffecec",
+    price: "Free",
+    packDetails: "TAKE GREAT NOTES",
+    features: [
+      "Sync up to 2 devices",
+      "Find notes fast with search",
+      "Access web tags",
+      "Clip web pages",
+      "25MB maximum note",
+      "60MB monthly upload limit",
+    ],
+    animationDelay: "",
+    activeItem: "",
+  },
+  {
+    pcakName: "Reguler",
+    bgColor: "#E3F8EF",
+    price: "68.99",
+    packDetails: "BE MORE PRODUCTIVE",
+    features: [
+      "Sync up to 2 devices",
+      "Find notes fast with search",
+      "Access web tags",
+      "Clip web pages",
+      "Apply rich formatting",
+      "Clip web pages",
+      "25MB maximum note size",
+      "Access notes offline",
+      "10GBmonthly upload limit",
+      "Annotate PDFs",
+    ],
+    animationDelay: "100",
+    activeItem: "active",
+  },
+  {
+    pcakName: " Business",
+    bgColor: "#fbf3e5",
+    price: "189.99",
+    packDetails: "Get more with team",
+    features: [
+      "Sync up to 2 devices",
+      "Find notes fast with search",
+      "Access web tags",
+      "Apply rich formatting",
+      "Clip web pages",
+      "25MB maximum note",
+      "Access notes offline",
+      "18GB monthly upload limit",
+    ],
+    animationDelay: "200",
+    activeItem: "",
+  },
+];
+
+const PricingYeary = () => {
+  return (
+    <div className="row justify-content-center">
+      {PricingContent.map((val, i) => (
+        <div
+          className="col-lg-4 col-sm-6"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          data-aos-delay={val.animationDelay}
+          key={i}
+        >
+          <div className={`pr-table-wrapper ${val.activeItem}`}>
+            <div className="pack-name" style={{ background: val.bgColor }}>
+              {val.pcakName}
+            </div>
+            <div className="price">{val.price}</div>
+            <div className="pack-details">{val.packDetails}</div>
+            <ul className="pr-feature">
+              {val.features.map((list, i) => (
+                <li key={i}>{list}</li>
+              ))}
+            </ul>
+            <a href="#" className="trial-button">
+              Try it Free
+            </a>
+            <div className="trial-text">No card required, cancel any time</div>
+          </div>
+          {/* /.pr-table-wrapper */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PricingYeary;