first commit

2025-02-12 23:25:43 -05:00
commit d8c7ec4866
1400 changed files with 90826 additions and 0 deletions
@@ -0,0 +1,37 @@
+
+'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 pricing-nav-one pricing-custom-nav-one mb-0">
+        <div className="d-flex flex-wrap justify-content-center mb-1">
+          <Tab>Monthly</Tab>
+          <Tab>Yearly</Tab>
+        </div>
+        <div className="offer-text font-rubik mt-3">
+          Save 30% on annual plan
+        </div>
+      </TabList>
+
+      <div className="tab-content-wrpper">
+        <TabPanel>
+          <PricingMonthly />
+        </TabPanel>
+        {/* End Pricing Month */}
+        <TabPanel>
+          <PricingYearly />
+        </TabPanel>
+        {/* End Pricing Year */}
+      </div>
+    </Tabs>
+  );
+};
+
+export default Pricing;
@@ -0,0 +1,81 @@
+import React from "react";
+import Image from "next/image";
+const PricingContent = [
+  {
+    packName: "Starter",
+    price: "18",
+    packageFor: "Small office / Home office",
+    icon: "38",
+    billCycle: "Billed per agent",
+    preFeatures: [
+      "60-day chat history",
+      "Basic widget customization",
+      "Ticketing system",
+      "Data security",
+    ],
+  },
+  {
+    packName: "Team",
+    price: "29",
+    packageFor: "Small office / Home office",
+    icon: "40",
+    billCycle: "Billed per agent",
+    preFeatures: [
+      "60-day chat history",
+      "Basic widget customization",
+      "Ticketing system",
+      "Data security",
+    ],
+  },
+  {
+    packName: "Business",
+    price: "50",
+    packageFor: "Small office / Home office",
+    icon: "41",
+    billCycle: "Billed per agent",
+    preFeatures: [
+      "60-day chat history",
+      "Basic widget customization",
+      "Ticketing system",
+      "Data security",
+    ],
+  },
+];
+
+const PricingMonthly = () => {
+  return (
+    <div className="row justify-content-center">
+      {PricingContent.map((val, i) => (
+        <div className="col-lg-4 col-md-6" key={i}>
+          <div className="pr-table-wrapper">
+            <div className="pack-name">{val.packName}</div>
+            <div className="price font-rubik">
+              ${val.price}.<sup>99</sup>
+            </div>
+            <div className="pack-rec font-rubik">{val.packageFor}</div>
+            <Image width={97} height={105} style={{objectFit:'contain'}}    
+              src={`/images/icon/${val.icon}.svg`}
+              alt="icon"
+              className="icon"
+            />
+            <div className="bill-cycle">Billed per agent</div>
+            <ul className="pr-feature">
+              {val.preFeatures.map((list, i) => (
+                <li key={i}>{list}</li>
+              ))}
+            </ul>
+            <a href="#" className="theme-btn-four">
+              Choose Plan
+            </a>
+            <div className="trial-text font-rubik">
+              Get your 30 day free trial
+            </div>
+          </div>
+          {/*  /.pr-table-wrapper */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PricingMonthly;
@@ -0,0 +1,81 @@
+import React from "react";
+
+const PricingContent = [
+  {
+    packName: "Starter",
+    price: "18",
+    packageFor: "Small office / Home office",
+    icon: "38",
+    billCycle: "Billed per agent",
+    preFeatures: [
+      "60-day chat history",
+      "Basic widget customization",
+      "Ticketing system",
+      "Data security",
+    ],
+  },
+  {
+    packName: "Team",
+    price: "49",
+    packageFor: "Small office / Home office",
+    icon: "40",
+    billCycle: "Billed per agent",
+    preFeatures: [
+      "60-day chat history",
+      "Basic widget customization",
+      "Ticketing system",
+      "Data security",
+    ],
+  },
+  {
+    packName: "Business",
+    price: "99",
+    packageFor: "Small office / Home office",
+    icon: "41",
+    billCycle: "Billed per agent",
+    preFeatures: [
+      "60-day chat history",
+      "Basic widget customization",
+      "Ticketing system",
+      "Data security",
+    ],
+  },
+];
+import Image from "next/image";
+const PricingYearly = () => {
+  return (
+    <div className="row justify-content-center">
+      {PricingContent.map((val, i) => (
+        <div className="col-lg-4 col-md-6" key={i}>
+          <div className="pr-table-wrapper">
+            <div className="pack-name">{val.packName}</div>
+            <div className="price font-rubik">
+              ${val.price}.<sup>99</sup>
+            </div>
+            <div className="pack-rec font-rubik">{val.packageFor}</div>
+            <Image width={97} height={105} style={{objectFit:'contain'}}     
+              src={`/images/icon/${val.icon}.svg`}
+              alt="icon"
+              className="icon"
+            />
+            <div className="bill-cycle">Billed per agent</div>
+            <ul className="pr-feature">
+              {val.preFeatures.map((list, i) => (
+                <li key={i}>{list}</li>
+              ))}
+            </ul>
+            <a href="#" className="theme-btn-four">
+              Choose Plan
+            </a>
+            <div className="trial-text font-rubik">
+              Get your 30 day free trial
+            </div>
+          </div>
+          {/*  /.pr-table-wrapper */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PricingYearly;