first commit
This commit is contained in:
@@ -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;
|
||||
Reference in New Issue
Block a user