first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const PricingContent = [
|
||||
{
|
||||
plan: "SILVER PLAN",
|
||||
price: "97",
|
||||
info: "Great for Individial Person",
|
||||
featureList: [
|
||||
{
|
||||
hintsText: "Send documents for eSigning",
|
||||
iconYesNo: "154",
|
||||
},
|
||||
{
|
||||
hintsText: "Multiple User",
|
||||
iconYesNo: "154",
|
||||
},
|
||||
{
|
||||
hintsText: "Refund",
|
||||
iconYesNo: "154",
|
||||
},
|
||||
{
|
||||
hintsText: "Bulk invite to sign",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Live Chat",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Send invite via Link",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
plan: "GOLD PLAN",
|
||||
price: "199",
|
||||
info: "Great for Startup",
|
||||
featureList: [
|
||||
{
|
||||
hintsText: "Send documents for eSigning",
|
||||
iconYesNo: "154",
|
||||
},
|
||||
{
|
||||
hintsText: "Multiple User",
|
||||
iconYesNo: "154",
|
||||
},
|
||||
{
|
||||
hintsText: "Refund",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Bulk invite to sign",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Live Chat",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Send invite via Link",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
plan: "BUSINESS PLAN",
|
||||
price: "239",
|
||||
info: "Great for Large Business",
|
||||
featureList: [
|
||||
{
|
||||
hintsText: "Send documents for eSigning",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Multiple User",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Refund",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Bulk invite to sign",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Live Chat",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
{
|
||||
hintsText: "Send invite via Link",
|
||||
iconYesNo: "155",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PricingEight = () => {
|
||||
return (
|
||||
<div className="row no-gutters position-relative">
|
||||
<div className="col-lg-3 pr-list-wrapper d-none d-lg-block">
|
||||
<ul>
|
||||
<li>Send documents for eSigning</li>
|
||||
<li>Multiple User</li>
|
||||
<li>Refund</li>
|
||||
<li>Bulk invite to sign</li>
|
||||
<li>Live Chat</li>
|
||||
<li>Send invite via Link</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-9 pr-table-wrapper ms-auto">
|
||||
<div className="row no-gutters">
|
||||
{PricingContent.map((val, i) => (
|
||||
<div className="col-md-4 pr-column" key={i}>
|
||||
<div className="pr-header">
|
||||
<div className="plan">{val.plan}</div>
|
||||
<div className="price">$ {val.price}</div>
|
||||
<div className="info">{val.info}</div>
|
||||
</div>{" "}
|
||||
{/* /.pr-header */}
|
||||
<div className="pr-body">
|
||||
<ul>
|
||||
{val.featureList.map((feature, i) => (
|
||||
<li key={i}>
|
||||
<span className="pr-text d-lg-none">
|
||||
{feature.hintsText}
|
||||
</span>
|
||||
<Image width={16} height={16} style={{objectFit:'contain'}}
|
||||
src={`/images/icon/${feature.iconYesNo}.svg`}
|
||||
alt="icon"
|
||||
className="m-auto"
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* End pr-body */}
|
||||
<div className="pr-footer">
|
||||
<Link href="/signup" className="trial-button">
|
||||
Sign up
|
||||
</Link>
|
||||
<div className="trial-text">Get your 30 day free trial</div>
|
||||
</div>
|
||||
{/* End pr-footer */}
|
||||
</div>
|
||||
// /.pr-column
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingEight;
|
||||
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import Tilt from "react-parallax-tilt";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const PricingContent = [
|
||||
{
|
||||
icon: "85",
|
||||
packName: "Dimond Plan",
|
||||
features: ["Unlimited Email", "5gb Hosting & Domain", "Email & Live chat."],
|
||||
price: "59.99",
|
||||
trialText: "up to 10 user + 1.99 per user",
|
||||
activeClass: "active",
|
||||
},
|
||||
{
|
||||
icon: "86",
|
||||
icon2: "159",
|
||||
packName: "Dimond Plan",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting & Domain",
|
||||
"Email & Live chat.",
|
||||
"3 Domain",
|
||||
],
|
||||
price: "29.99",
|
||||
trialText: "up to 7 user + 1.99 per user",
|
||||
activeClass: "most-popular",
|
||||
},
|
||||
];
|
||||
|
||||
const PricingFive = () => {
|
||||
return (
|
||||
<div className="row align-items-center">
|
||||
{PricingContent.map((val, i) => (
|
||||
<div className="col-md-6" key={i}>
|
||||
<Tilt>
|
||||
<div className={`pr-table-wrapper ${val.activeClass}`}>
|
||||
<Image width={27} height={27} style={{objectFit:'contain'}}
|
||||
src={`/images/icon/${val.icon}.svg`}
|
||||
alt="icon"
|
||||
className="icon"
|
||||
/>
|
||||
<Image width={111} height={115} style={{objectFit:'contain'}}
|
||||
src={`/images/shape/${val.icon2}.svg`}
|
||||
className="popular-badge"
|
||||
alt="shape"
|
||||
/>
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<ul className="pr-feature">
|
||||
{val.features.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="price">$ {val.price}</div>
|
||||
<div className="trial-text">{val.trialText}</div>
|
||||
<Link
|
||||
href="/signup"
|
||||
className="trial-button hover-reverse-gr-bg-one gr-bg-one"
|
||||
>
|
||||
{" "}
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</Tilt>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingFive;
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const PricingContent = [
|
||||
{
|
||||
icon: "140",
|
||||
packName: "Starter Plan",
|
||||
features: ["Unlimited Email", "5gb Hosting & Domain", "Email & Live chat."],
|
||||
price: "9.99",
|
||||
trialText: "up to 3 user + 1.99 per user",
|
||||
activeClass: "",
|
||||
delayAnimation: "",
|
||||
},
|
||||
{
|
||||
icon: "141",
|
||||
packName: "Silver Plan",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat.",
|
||||
"Backling",
|
||||
],
|
||||
price: "19.99",
|
||||
trialText: "up to 5 user + 1.99 per user",
|
||||
activeClass: "active",
|
||||
delayAnimation: "200",
|
||||
},
|
||||
{
|
||||
icon: "142",
|
||||
packName: "Gold Plan",
|
||||
features: ["Unlimited Email", "5gb Hosting & Domain", "Email & Live chat."],
|
||||
price: "19.99",
|
||||
trialText: "up to 5 user + 1.99 per user",
|
||||
activeClass: "",
|
||||
delayAnimation: "400",
|
||||
},
|
||||
];
|
||||
|
||||
const PricingSeven = () => {
|
||||
return (
|
||||
<>
|
||||
{PricingContent.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-md-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-dealy={val.delayAnimation}
|
||||
key={i}
|
||||
>
|
||||
<div className={`pr-table-wrapper md-mb-40 ${val.activeClass}`}>
|
||||
<Image width={26} height={26} style={{objectFit:'contain'}}
|
||||
src={`/images/icon/${val.icon}.svg`}
|
||||
alt="icon"
|
||||
className="icon"
|
||||
/>
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<ul className="pr-feature">
|
||||
{val.features.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="price">
|
||||
${val.price}
|
||||
<span>Weekly</span>
|
||||
</div>
|
||||
<div className="trial-text">{val.trialText}</div>
|
||||
<a href="#" className="trial-button">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingSeven;
|
||||
@@ -0,0 +1,120 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const PricingContent = [
|
||||
{
|
||||
title: "Free Event",
|
||||
price: "0",
|
||||
priceMeta: "per user/month",
|
||||
packageName: "pc1",
|
||||
skewClass: "skew-right",
|
||||
priceList: [
|
||||
{
|
||||
list: "60-day chat history",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Basic widget customization",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Ticketing system",
|
||||
listClass: "disable",
|
||||
},
|
||||
{
|
||||
list: "Data security",
|
||||
listClass: "disable",
|
||||
},
|
||||
],
|
||||
animatinDelay: "0",
|
||||
},
|
||||
{
|
||||
title: "Pre Day",
|
||||
price: "0.32",
|
||||
priceMeta: "per user/month",
|
||||
packageName: "pc2",
|
||||
skewClass: "skew-left",
|
||||
priceList: [
|
||||
{
|
||||
list: "60-day chat history",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Basic widget customization",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Ticketing system",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Data security",
|
||||
listClass: "disable",
|
||||
},
|
||||
],
|
||||
animatinDelay: "100",
|
||||
},
|
||||
{
|
||||
title: "Pay As You Go",
|
||||
price: "0.65",
|
||||
priceMeta: "per user/month",
|
||||
packageName: "pc3",
|
||||
skewClass: "skew-right",
|
||||
priceList: [
|
||||
{
|
||||
list: "60-day chat history",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Basic widget customization",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Ticketing system",
|
||||
listClass: "",
|
||||
},
|
||||
{
|
||||
list: "Data security",
|
||||
listClass: "",
|
||||
},
|
||||
],
|
||||
animatinDelay: "200",
|
||||
},
|
||||
];
|
||||
|
||||
const PricingThree = () => {
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{PricingContent.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-md-6"
|
||||
key={i}
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={item.animatinDelay}
|
||||
>
|
||||
<div className={`pr-table-wrapper ${item.skewClass}`}>
|
||||
<div className={`pack-name font-slab ${item.packageName}`}>
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
<div className="price font-slab">${item.price}</div>
|
||||
<p className="user-condition">{item.priceMeta}</p>
|
||||
<Image width="321" height="4" src="/images/shape/114.svg" alt="shape" className="line" />
|
||||
<ul>
|
||||
{item.priceList.map((val, i) => (
|
||||
<li className={val.listClass} key={i}>
|
||||
{val.list}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="#" className="subscribe-btn font-rubik">
|
||||
Subscribe Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingThree;
|
||||
@@ -0,0 +1,32 @@
|
||||
'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 (
|
||||
<div>
|
||||
<Tabs>
|
||||
<TabList className="nav nav-tabs justify-content-center pricing-nav-three">
|
||||
<Tab>Monthly</Tab>
|
||||
<Tab>Yearly</Tab>
|
||||
</TabList>
|
||||
|
||||
<div className="pricing-table-area-four">
|
||||
<TabPanel>
|
||||
<PricingMonthly />
|
||||
</TabPanel>
|
||||
{/* End Pricing Month */}
|
||||
<TabPanel>
|
||||
<PricingYearly />
|
||||
</TabPanel>
|
||||
{/* End Pricing Year */}
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
@@ -0,0 +1,105 @@
|
||||
import React from "react";
|
||||
|
||||
const PricingContent = [
|
||||
{
|
||||
packName: "Single",
|
||||
packDetails: "For individuals and teams",
|
||||
bgColor: "#FFF7EB",
|
||||
price: "8",
|
||||
durationNumber: "Per editor, monthly",
|
||||
facility: "with unlimited email",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "",
|
||||
activeClass: "",
|
||||
},
|
||||
{
|
||||
packName: "Team",
|
||||
packDetails: "For individuals and teams",
|
||||
bgColor: "#E2F2FD",
|
||||
price: "12",
|
||||
durationNumber: "For team, monthly",
|
||||
facility: "team with 8 users",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "100",
|
||||
activeClass: "active most-popular",
|
||||
},
|
||||
{
|
||||
packName: "Business",
|
||||
packDetails: "For individuals and teams",
|
||||
bgColor: "#FFEBEB",
|
||||
price: "37",
|
||||
durationNumber: "All users, monthly",
|
||||
facility: "for unlimited users",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "200",
|
||||
activeClass: "",
|
||||
},
|
||||
];
|
||||
|
||||
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.activeClass}`}>
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<div className="pack-details">{val.packDetails}</div>
|
||||
<div
|
||||
className="top-banner d-md-flex"
|
||||
style={{ background: val.bgColor }}
|
||||
>
|
||||
<div className="price">
|
||||
<sup>$</sup>
|
||||
{val.price}
|
||||
</div>
|
||||
<div>
|
||||
<span>{val.durationNumber}</span>
|
||||
<em>{val.facility}</em>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.top-banner */}
|
||||
<ul className="pr-feature">
|
||||
{val.features.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="#" className="trial-button">
|
||||
Start 30 days free trial
|
||||
</a>
|
||||
<div className="trial-text">No card required, cancel any time</div>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingMonthly;
|
||||
@@ -0,0 +1,105 @@
|
||||
import React from "react";
|
||||
|
||||
const PricingContent = [
|
||||
{
|
||||
packName: "Single",
|
||||
packDetails: "For individuals and teams",
|
||||
bgColor: "#FFF7EB",
|
||||
price: "90",
|
||||
durationNumber: "Per editor, yearly",
|
||||
facility: "with unlimited email",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "",
|
||||
activeClass: "",
|
||||
},
|
||||
{
|
||||
packName: "Team",
|
||||
packDetails: "For individuals and teams",
|
||||
bgColor: "#E2F2FD",
|
||||
price: "125",
|
||||
durationNumber: "For team, yearly",
|
||||
facility: "team with 8 users",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "100",
|
||||
activeClass: "active most-popular",
|
||||
},
|
||||
{
|
||||
packName: "Business",
|
||||
packDetails: "For individuals and teams",
|
||||
bgColor: "#FFEBEB",
|
||||
price: "370",
|
||||
durationNumber: "All users, yearly",
|
||||
facility: "for unlimited users",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "200",
|
||||
activeClass: "",
|
||||
},
|
||||
];
|
||||
|
||||
const PricingYearly = () => {
|
||||
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.activeClass}`}>
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<div className="pack-details">{val.packDetails}</div>
|
||||
<div
|
||||
className="top-banner d-md-flex"
|
||||
style={{ background: val.bgColor }}
|
||||
>
|
||||
<div className="price">
|
||||
<sup>$</sup>
|
||||
{val.price}
|
||||
</div>
|
||||
<div>
|
||||
<span>{val.durationNumber}</span>
|
||||
<em>{val.facility}</em>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.top-banner */}
|
||||
<ul className="pr-feature">
|
||||
{val.features.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="#" className="trial-button">
|
||||
Start 30 days free trial
|
||||
</a>
|
||||
<div className="trial-text">No card required, cancel any time</div>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingYearly;
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
'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 (
|
||||
<div>
|
||||
<Tabs>
|
||||
<TabList className="nav nav-tabs justify-content-center pricing-nav-two pricing-nav-two-custom">
|
||||
<Tab>Monthly</Tab>
|
||||
<Tab>Yearly</Tab>
|
||||
</TabList>
|
||||
|
||||
<div className="tab-content-wrpper">
|
||||
<TabPanel>
|
||||
<PricingMonthly />
|
||||
</TabPanel>
|
||||
{/* End Pricing Month */}
|
||||
<TabPanel>
|
||||
<PricingYearly />
|
||||
</TabPanel>
|
||||
{/* End Pricing Year */}
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
@@ -0,0 +1,103 @@
|
||||
import React from "react";
|
||||
|
||||
const PricingContent = [
|
||||
{
|
||||
packName: "FREE",
|
||||
price: "0",
|
||||
billCycle: "3 Free Agents",
|
||||
preFeatures: [
|
||||
"Email Ticketing",
|
||||
"Customer Management",
|
||||
"Help Center",
|
||||
"Private Knowledge Base",
|
||||
"Predefined SLAs",
|
||||
"Macros",
|
||||
],
|
||||
},
|
||||
{
|
||||
packName: "Standard",
|
||||
price: "29",
|
||||
billCycle: "Per agent billed",
|
||||
preFeatures: [
|
||||
"Social & Community",
|
||||
"Channels",
|
||||
"Product-based Ticket",
|
||||
"Management",
|
||||
"Help Center Themes",
|
||||
"Gallery",
|
||||
"Public Knowledge Base",
|
||||
"SLAs & Escalations",
|
||||
"Workflow, Assignment",
|
||||
],
|
||||
},
|
||||
{
|
||||
packName: "Start up",
|
||||
price: "38",
|
||||
billCycle: "Per agent billed",
|
||||
preFeatures: [
|
||||
"Multi-Department Ticketing",
|
||||
"Team Management",
|
||||
"Telephony",
|
||||
"Automatic Time Tracking",
|
||||
"Blueprint - Basic Process",
|
||||
"Management",
|
||||
"Round Robin Ticket",
|
||||
"Assignment",
|
||||
"Agent Collision",
|
||||
"Tasks, Events & Call",
|
||||
"Activities",
|
||||
"Mobile SDKs",
|
||||
],
|
||||
},
|
||||
{
|
||||
packName: "BUSINESS",
|
||||
price: "56",
|
||||
billCycle: "Per agent billed",
|
||||
preFeatures: [
|
||||
"Live Chat",
|
||||
"Zia - Artificial Intelligence",
|
||||
"Help Center",
|
||||
"Customization",
|
||||
"Multi-brand Help Center",
|
||||
"Advanced Process",
|
||||
"Management",
|
||||
"Custom Functions",
|
||||
"Multi-level IVR",
|
||||
"Global Reports &",
|
||||
"Dashboards",
|
||||
"Scheduled Reports",
|
||||
"Contract Management",
|
||||
"Validation Rules",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PricingMonthly = () => {
|
||||
return (
|
||||
<div className="row no-gutters">
|
||||
{PricingContent.map((val, i) => (
|
||||
<div className="col-lg-3 col-sm-6 pr-bg d-flex" key={i}>
|
||||
<div className="pr-table-wrapper">
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<div className="price">
|
||||
<sup>$</sup>
|
||||
{val.price}
|
||||
</div>
|
||||
<div className="bill-cycle">{val.billCycle}</div>
|
||||
<a href="#" className="theme-btn-three">
|
||||
Sign Up
|
||||
</a>
|
||||
<ul className="pr-feature">
|
||||
{val.preFeatures.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingMonthly;
|
||||
@@ -0,0 +1,103 @@
|
||||
import React from "react";
|
||||
|
||||
const PricingContent = [
|
||||
{
|
||||
packName: "FREE",
|
||||
price: "0",
|
||||
billCycle: "3 Free Agents",
|
||||
preFeatures: [
|
||||
"Email Ticketing",
|
||||
"Customer Management",
|
||||
"Help Center",
|
||||
"Private Knowledge Base",
|
||||
"Predefined SLAs",
|
||||
"Macros",
|
||||
],
|
||||
},
|
||||
{
|
||||
packName: "Standard",
|
||||
price: "29",
|
||||
billCycle: "Per agent billed",
|
||||
preFeatures: [
|
||||
"Social & Community",
|
||||
"Channels",
|
||||
"Product-based Ticket",
|
||||
"Management",
|
||||
"Help Center Themes",
|
||||
"Gallery",
|
||||
"Public Knowledge Base",
|
||||
"SLAs & Escalations",
|
||||
"Workflow, Assignment",
|
||||
],
|
||||
},
|
||||
{
|
||||
packName: "Start up",
|
||||
price: "138",
|
||||
billCycle: "Per agent billed",
|
||||
preFeatures: [
|
||||
"Multi-Department Ticketing",
|
||||
"Team Management",
|
||||
"Telephony",
|
||||
"Automatic Time Tracking",
|
||||
"Blueprint - Basic Process",
|
||||
"Management",
|
||||
"Round Robin Ticket",
|
||||
"Assignment",
|
||||
"Agent Collision",
|
||||
"Tasks, Events & Call",
|
||||
"Activities",
|
||||
"Mobile SDKs",
|
||||
],
|
||||
},
|
||||
{
|
||||
packName: "BUSINESS",
|
||||
price: "156",
|
||||
billCycle: "Per agent billed",
|
||||
preFeatures: [
|
||||
"Live Chat",
|
||||
"Zia - Artificial Intelligence",
|
||||
"Help Center",
|
||||
"Customization",
|
||||
"Multi-brand Help Center",
|
||||
"Advanced Process",
|
||||
"Management",
|
||||
"Custom Functions",
|
||||
"Multi-level IVR",
|
||||
"Global Reports &",
|
||||
"Dashboards",
|
||||
"Scheduled Reports",
|
||||
"Contract Management",
|
||||
"Validation Rules",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PricingYearly = () => {
|
||||
return (
|
||||
<div className="row no-gutters">
|
||||
{PricingContent.map((val, i) => (
|
||||
<div className="col-lg-3 col-sm-6 pr-bg d-flex" key={i}>
|
||||
<div className="pr-table-wrapper">
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<div className="price">
|
||||
<sup>$</sup>
|
||||
{val.price}
|
||||
</div>
|
||||
<div className="bill-cycle">{val.billCycle}</div>
|
||||
<a href="#" className="theme-btn-three">
|
||||
Sign Up
|
||||
</a>
|
||||
<ul className="pr-feature">
|
||||
{val.preFeatures.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingYearly;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user