- added corporate pricing page

src/App.tsx

@@ -6,14 +6,29 @@ import {HelmetProvider} from "react-helmet-async"
 import "./App.css"
 
 // color palettes: triadic #A1A7CB, #CBA1A7, #A7CBA1
+// 10 color objects of primary #2378c3 as generated by https://smart-swatch.netlify.app/#2378c3
+// This is for reference purposes
+const COLOR = {
+    50: '#dfefff',
+    100: '#b9d2f8',
+    200: '#90b9ef',
+    300: '#66a2e5',
+    400: '#3c8cdc',
+    500: '#2378c3',
+    600: '#175498',
+    700: '#0b366e',
+    800: '#011b45',
+    900: '#00061d',
+}
+
 
 function App() {
     return (
         <HelmetProvider>
             <ConfigProvider
                 theme={{
                     token: {
-                        colorPrimary: '#2378c3',
+                        colorPrimary: COLOR["500"],
                         borderRadius: 6,
                         fontFamily: "Libre Franklin, sans-serif"
                     },
@@ -23,7 +38,12 @@ function App() {
                             itemColor: 'rgba(0,0,0,.8)'
                         },
                         Card: {
-                            colorBgContainer: "none"
+                            colorBgContainer: "none",
+                            colorBorderSecondary: COLOR["100"],
+                        },
+                        Segmented: {
+                            colorBgLayout: COLOR["300"],
+                            borderRadius: 6,
                         }
                     },
                 }}

src/components/PricingTable/PricingTable.tsx

@@ -0,0 +1,88 @@
+import {Pricing} from "../../types";
+import {Card as AntdCard, CardProps, Col, List, Row, RowProps, Segmented, Space, theme, Typography} from "antd";
+import {CheckCircleOutlined} from "@ant-design/icons";
+import {Card} from "../index.ts";
+import {useState} from "react";
+
+const ROW_PROPS: RowProps = {
+    gutter: [
+        {xs: 8, sm: 16, md: 24, lg: 32},
+        {xs: 8, sm: 16, md: 24, lg: 32}
+    ]
+}
+
+const textStyles = (preferred?: boolean, primary?: string): React.CSSProperties => {
+    return {
+        color: preferred ? "white" : (primary ? primary : "initial"),
+        textTransform: "capitalize",
+        textAlign: "center"
+    }
+}
+
+type Props = {
+    data: Pricing[]
+} & CardProps
+
+const PricingTable = ({data, ...others}: Props) => {
+    const {token: {colorPrimary, colorFillSecondary}} = theme.useToken()
+    const [value, setValue] = useState<"monthly" | "annually" | string | number>('monthly');
+
+    return (
+        <Card
+            title="Pricing"
+            actions={[
+                <Typography.Text italic>Note: All plans come with a 30-day money-back guarantee.</Typography.Text>
+            ]}
+            {...others}
+        >
+            <div style={{textAlign: "center", marginBottom: "1rem", textTransform: "capitalize"}}>
+                <Segmented size="large" options={['monthly', 'annually']} value={value} onChange={setValue}/>
+            </div>
+            <Row {...ROW_PROPS}>
+                {data.map((d, i) => (
+                    <Col sm={24} lg={8} key={`${d.color}-${i}`}>
+                        <AntdCard
+                            style={{
+                                background: d.preferred ? colorPrimary : colorFillSecondary,
+                                border: `1px solid ${d.preferred ? colorPrimary : colorFillSecondary}`
+                            }}
+                        >
+                            <Typography.Text
+                                strong
+                                style={{...textStyles(d.preferred, colorPrimary), fontSize: 16}}
+                            >
+                                {d.plan}
+                            </Typography.Text>
+                            <Typography.Title
+                                style={{...textStyles(d.preferred)}}
+                            >
+                                $ {value === "monthly" ? d.monthly : d.annually}/
+                                <small
+                                    style={{fontSize: 16, fontWeight: 400, textTransform: "lowercase"}}
+                                >
+                                    per{' '}{value === "monthly" ? "month" : "year"}
+                                </small>
+                            </Typography.Title>
+                            <List
+                                header={<Typography.Text style={textStyles(d.preferred)}>Features</Typography.Text>}
+                                dataSource={d.features}
+                                renderItem={(item) => (
+                                    <List.Item>
+                                        <Space>
+                                            <CheckCircleOutlined style={textStyles(d.preferred)}/>
+                                            <Typography.Text
+                                                style={textStyles(d.preferred)}>{item}
+                                            </Typography.Text>
+                                        </Space>
+                                    </List.Item>
+                                )}
+                            />
+                        </AntdCard>
+                    </Col>
+                ))}
+            </Row>
+        </Card>
+    );
+};
+
+export default PricingTable;

src/components/index.ts

@@ -61,6 +61,7 @@ import BlogsListCard from "./corporate/BlogsListCard/BlogsListCard";
 import SocialMediaCard from "./SocialMediaCard/SocialMediaCard.tsx";
 import FaqCollapse from "./FaqCollapse/FaqCollapse.tsx";
 import ContactForm from "./ContactForm/ContactForm.tsx";
+import PricingTable from "./PricingTable/PricingTable.tsx";
 
 export {
     Logo,
@@ -125,5 +126,6 @@ export {
     BlogsListCard,
     SocialMediaCard,
     FaqCollapse,
-    ContactForm
+    ContactForm,
+    PricingTable
 }

src/mocks/Pricing.json

@@ -0,0 +1,44 @@
+[
+  {
+    "plan": "free",
+    "monthly": 0,
+    "annually": 0,
+    "savings_caption": "Save 0%",
+    "features": [
+      "Basic Dashboard Templates",
+      "Limited Widgets and Customization Options",
+      "Email Support"
+    ],
+    "color": "purple"
+  },
+  {
+    "plan": "pro",
+    "monthly": 9.99,
+    "annually": 99.99,
+    "savings_caption": "Save 17%",
+    "features": [
+      "Advanced Dashboard Templates",
+      "Rich Widgets and Customization Options",
+      "Priority Email Support",
+      "Data Export and Import",
+      "Access to Premium Templates Library"
+    ],
+    "color": "maroon",
+    "preferred": true
+  },
+  {
+    "plan": "enterprise",
+    "monthly": 29.99,
+    "annually": 299.99,
+    "savings_caption": "Save 17%",
+    "features": [
+      "Enterprise-grade Dashboard Templates",
+      "Unlimited Widgets and Customization Options",
+      "24/7 Priority Support",
+      "Dedicated Account Manager",
+      "Advanced Data Security and Compliance",
+      "API Access and Integration Support"
+    ],
+    "color": "cyan"
+  }
+]

src/pages/corporate/Pricing.tsx

@@ -0,0 +1,12 @@
+import {PricingTable} from "../../components";
+import PricingData from "../../mocks/Pricing.json"
+
+const CorporatePricingPage = () => {
+    return (
+        <div>
+            <PricingTable data={PricingData}/>
+        </div>
+    );
+};
+
+export default CorporatePricingPage;

src/pages/corporate/index.ts

@@ -2,5 +2,6 @@ import CorporateAboutPage from "./About.tsx";
 import CorporateTeamPage from "./Team.tsx";
 import CorporateFaqPage from "./Faqs.tsx";
 import CorporateContactPage from "./Contact.tsx";
+import CorporatePricingPage from "./Pricing.tsx";
 
-export {CorporateAboutPage, CorporateTeamPage, CorporateFaqPage, CorporateContactPage}
+export {CorporateAboutPage, CorporateTeamPage, CorporateFaqPage, CorporateContactPage, CorporatePricingPage}

src/pages/index.ts

@@ -7,7 +7,7 @@ import {
     BiddingDashboardPage
 } from "./dashboards"
 import HomePage from "./Home.tsx";
-import {CorporateAboutPage, CorporateTeamPage, CorporateFaqPage, CorporateContactPage} from "./corporate"
+import {CorporateAboutPage, CorporateTeamPage, CorporateFaqPage, CorporateContactPage, CorporatePricingPage} from "./corporate"
 
 export {
     DefaultDashboardPage,
@@ -20,5 +20,6 @@ export {
     CorporateAboutPage,
     CorporateTeamPage,
     CorporateFaqPage,
-    CorporateContactPage
+    CorporateContactPage,
+    CorporatePricingPage
 }

src/routes/routes.tsx

@@ -1,6 +1,11 @@
 import {createBrowserRouter, useLocation} from "react-router-dom";
 import {
-    BiddingDashboardPage, CorporateAboutPage, CorporateContactPage, CorporateFaqPage, CorporateTeamPage,
+    BiddingDashboardPage,
+    CorporateAboutPage,
+    CorporateContactPage,
+    CorporateFaqPage,
+    CorporatePricingPage,
+    CorporateTeamPage,
     DefaultDashboardPage,
     EcommerceDashboardPage,
     HomePage,
@@ -115,6 +120,10 @@ const router = createBrowserRouter([
             {
                 path: "contact",
                 element: <CorporateContactPage/>
+            },
+            {
+                path: "pricing",
+                element: <CorporatePricingPage/>
             }
         ]
     }

src/types/index.ts

@@ -10,6 +10,7 @@ import type {Tasks} from "./dashboard"
 import type {Notifications} from "./notifications"
 import type {Employee} from "./employee"
 import type {Faq} from "./faq"
+import type {Pricing} from "./pricing.ts"
 
 export type {
     Projects,
@@ -40,5 +41,6 @@ export type {
     Tasks,
     Notifications,
     Employee,
-    Faq
+    Faq,
+    Pricing
 }

src/types/pricing.ts

@@ -0,0 +1,9 @@
+export type Pricing =  {
+    plan: string
+    monthly: number
+    annually: number
+    savings_caption: string
+    features: string[]
+    color: string
+    preferred?: boolean
+}