FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Pages/Pricing/PricingPlanStyle1.js
+209
View File
@@ -0,0 +1,209 @@
import React from "react";
import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Link from "next/link";
import styles from "@/components/Pages/Pricing/PricingPlanStyle1.module.css";
const priceInfo = [
{
id: 1,
title: "Basic Plan",
subTitle: "A simple start for everyone",
icon: "ri-shield-check-fill",
price: "50",
duration: "per month",
priceLists: [
{
title: "Free Live Support",
},
{
title: "30GB Disk Space",
},
{
title: "Scalable Bandwith",
},
{
title: "Free Setup",
},
],
},
{
id: 2,
title: "Professional Plan",
subTitle: "A simple start for everyone",
icon: "ri-pie-chart-2-line",
price: "50",
duration: "per month",
priceLists: [
{
title: "Free Live Support",
},
{
title: "35GB Disk Space",
},
{
title: "Scalable Bandwith",
},
{
title: "Free Setup",
},
],
},
{
id: 3,
title: "Enterprise Plan",
subTitle: "A simple start for everyone",
icon: "ri-briefcase-line",
price: "150",
duration: "per month",
priceLists: [
{
title: "Free Live Support",
},
{
title: "40GB Disk Space",
},
{
title: "Scalable Bandwith",
},
{
title: "Free Setup",
},
],
},
{
id: 4,
title: "Unlimited Plan",
subTitle: "A simple start for everyone",
icon: "ri-star-half-line",
price: "200",
duration: "per month",
priceLists: [
{
title: "Free Live Support",
},
{
title: "50GB Disk Space",
},
{
title: "Scalable Bandwith",
},
{
title: "Free Setup",
},
],
},
];
const PricingPlanStyle1 = () => {
return (
<>
<Typography
as="h3"
sx={{
fontSize: 20,
fontWeight: 500,
mb: "20px",
borderBottom: "1px solid #eee",
paddingBottom: "10px",
}}
className="for-dark-bottom-border"
>
Pricing Plans - 1
</Typography>
<Grid
container
justifyContent="center"
rowSpacing={1}
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
>
{priceInfo.map((info) => (
<Grid item xs={12} sm={6} md={4} lg={4} xl={3} key={info.id}>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
mb: "20px",
}}
>
<Box>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "5px",
}}
>
{info.title}
</Typography>
<Typography
sx={{
fontSize: 14,
}}
>
{info.subTitle}
</Typography>
</Box>
<div className={styles.icon}>
<i className={info.icon}></i>
</div>
</Box>
<Typography
as="h3"
sx={{
fontSize: 32,
fontWeight: 700,
mb: "20px",
}}
>
${info.price}/{" "}
<span style={{ fontSize: "12px" }}>{info.duration}</span>
</Typography>
<Box align="center" mb={3}>
<Link href="#" className="text-decoration-none">
<Button
variant="contained"
sx={{
textTransform: "capitalize",
borderRadius: "8px",
fontSize: "14px",
p: "10px 25px",
color: "#fff !important",
}}
>
Sign Up Now
</Button>
</Link>
</Box>
<ul className={styles.priceList}>
{info.priceLists.map((list) => (
<li key={list.title}>{list.title}</li>
))}
</ul>
</Card>
</Grid>
))}
</Grid>
</>
);
};
export default PricingPlanStyle1;
components/Pages/Pricing/PricingPlanStyle1.module.css
+37
View File
@@ -0,0 +1,37 @@
.icon {
color: var(--primaryColor);
font-size: 30px;
}
.priceList {
list-style-type: none;
padding: 0;
margin: 0;
}
.priceList li {
margin-bottom: 15px;
position: relative;
padding-left: 16px;
}
.priceList li:last-child {
margin-bottom: 0;
}
.priceList li:before {
content: '';
background-color: var(--primaryColor);
position: absolute;
top: 4px;
left: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
/* For RTL Style */
[dir="rtl"] .priceList li {
padding-left: 0;
padding-right: 16px;
}
[dir="rtl"] .priceList li:before {
left: auto;
right: 0;
}
components/Pages/Pricing/PricingPlanStyle2.js
+196
View File
@@ -0,0 +1,196 @@
import React from "react";
import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Link from "next/link";
import styles from "@/components/Pages/Pricing/PricingPlanStyle2.module.css";
const priceInfo = [
{
id: 1,
title: "Basic Plan",
subTitle:
"Perfect for an individual or a small team starting to get bigger",
price: "50",
duration: "per month",
priceLists: [
{
title: "100 Responses a Month",
},
{
title: "Unlimited Forms and Surveys",
},
{
title: "Unlimited Fields",
},
{
title: "Basic Form Creation Tools",
},
{
title: "Up to 2 Subdomains",
},
],
},
{
id: 2,
title: "Professional Plan",
subTitle:
"Perfect for an individual or a small team starting to get bigger",
price: "50",
duration: "per month",
priceLists: [
{
title: "120 Responses a Month",
},
{
title: "Unlimited Forms and Surveys",
},
{
title: "Unlimited Fields",
},
{
title: "Basic Form Creation Tools",
},
{
title: "Up to 5 Subdomains",
},
],
},
{
id: 3,
title: "Enterprise Plan",
subTitle:
"Perfect for an individual or a small team starting to get bigger",
price: "150",
duration: "per month",
priceLists: [
{
title: "150 Responses a Month",
},
{
title: "Unlimited Forms and Surveys",
},
{
title: "Unlimited Fields",
},
{
title: "Basic Form Creation Tools",
},
{
title: "Up to 10 Subdomains",
},
],
},
];
const PricingPlanStyle2 = () => {
return (
<>
<Typography
as="h3"
sx={{
fontSize: 20,
fontWeight: 500,
mt: "20px",
mb: "20px",
borderBottom: "1px solid #eee",
paddingBottom: "10px",
}}
className="for-dark-bottom-border"
>
Pricing Plans - 2
</Typography>
<Grid
container
justifyContent="center"
rowSpacing={1}
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
>
{priceInfo.map((info) => (
<Grid item xs={12} sm={6} md={4} lg={4} xl={4} key={info.id}>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "40px 25px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
mb: "20px",
}}
>
<Box>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "5px",
}}
>
{info.title}
</Typography>
<Typography
sx={{
fontSize: 14,
}}
>
{info.subTitle}
</Typography>
</Box>
</Box>
<Typography
as="h3"
sx={{
fontSize: 32,
fontWeight: 700,
mb: "20px",
}}
>
${info.price}/{" "}
<span style={{ fontSize: "12px" }}>{info.duration}</span>
</Typography>
<Box align="center" mb={4}>
<Link href="#" className="text-decoration-none">
<Button
variant="contained"
fullWidth
sx={{
textTransform: "capitalize",
borderRadius: "30px",
fontSize: "14px",
p: "12px 20px",
color: "#fff !important",
}}
>
Get Started
</Button>
</Link>
</Box>
<ul className={styles.priceList}>
{info.priceLists.map((list) => (
<li key={list.title}>
<i className="ri-check-line"></i> {list.title}
</li>
))}
</ul>
</Card>
</Grid>
))}
</Grid>
</>
);
};
export default PricingPlanStyle2;
components/Pages/Pricing/PricingPlanStyle2.module.css
+34
View File
@@ -0,0 +1,34 @@
.priceList {
list-style-type: none;
padding: 0;
margin: 0;
}
.priceList li {
margin-bottom: 15px;
position: relative;
padding-left: 30px;
}
.priceList li:last-child {
margin-bottom: 0;
}
.priceList li i {
background-color: rgba(117, 127, 239, 0.1);
position: absolute;
top: 0px;
left: 0;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 100%;
text-align: center;
}
/* For RTL Style */
[dir="rtl"] .priceList li {
padding-left: 0;
padding-right: 30px;
}
[dir="rtl"] .priceList li i {
left: auto;
right: 0;
}