corporate page & components added

.changeset/nice-melons-flash.md

@@ -0,0 +1,12 @@
+---
+"antd-multi-dashboard": patch
+---
+
+### Added:
+- finished corporate about page
+- finished corporate team page
+- finished corporate contact page
+- added redirects to fix reload error on netlify
+- added corporate pricing page
+- added corporate licence page
+- added sitemap page

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

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/Card/styles.css

@@ -2,7 +2,7 @@
 .card {
     backdrop-filter: blur(16px) saturate(180%);
     -webkit-backdrop-filter: blur(16px) saturate(180%);
-    background-color: rgba(255, 255, 255, 0.75);
+    background-color: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(209, 213, 219, 0.3);
     -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.05);

src/components/ContactForm/ContactForm.tsx

@@ -0,0 +1,48 @@
+import {Button, Col, Form, FormProps, Input, Row, RowProps} from "antd";
+import {SendOutlined} from "@ant-design/icons";
+
+const {TextArea} = Input
+
+const ROW_PROPS: RowProps = {
+    gutter: [
+        {xs: 8, sm: 16, md: 24, lg: 32},
+        {xs: 8, sm: 16, md: 24, lg: 32}
+    ]
+}
+
+type Props = FormProps
+
+const ContactForm = ({...others}: Props) => {
+    return (
+        <div>
+            <Form
+                layout="vertical"
+                {...others}
+            >
+                <Row {...ROW_PROPS}>
+                    <Col sm={24} lg={12}>
+                        <Form.Item label="Name" tooltip="This is a required field">
+                            <Input/>
+                        </Form.Item>
+                    </Col>
+                    <Col sm={24} lg={12}>
+                        <Form.Item label="Email" tooltip="This is a required field">
+                            <Input/>
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Form.Item label="Subject" tooltip="This is a required field">
+                    <Input/>
+                </Form.Item>
+                <Form.Item label="Message">
+                    <TextArea/>
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" icon={<SendOutlined/>}>Submit</Button>
+                </Form.Item>
+            </Form>
+        </div>
+    );
+};
+
+export default ContactForm;

src/components/EmployeeCard/EmployeeCard.tsx

@@ -0,0 +1,44 @@
+import {Employee} from "../../types";
+import {Card as AntdCard, CardProps, Typography} from "antd";
+import {Card} from "../index.ts";
+
+const {Meta} = AntdCard
+
+type Props = {
+    data: Employee,
+    showInfo?: boolean
+} & CardProps
+
+const EmployeeCard = ({data, showInfo, ...others}: Props) => {
+    const {avatar, first_name, middle_name, last_name, role, age, country, title, email, hire_date} = data
+
+    return (
+        <Card
+            hoverable
+            cover={
+                <img
+                    alt={`${first_name} image`}
+                    src={avatar}
+                    height={240}
+                    style={{objectFit: "cover"}}
+                />
+            }
+            {...others}
+        >
+            <Meta title={`${title}. ${first_name} ${middle_name} ${last_name}`}/>
+            <div style={{display: "flex", flexDirection: "column", gap: "8px", marginTop: "8px"}}>
+                <Typography.Text>Role: {role}</Typography.Text>
+                {showInfo && (
+                    <>
+                        <Typography.Text>Email: {email}</Typography.Text>
+                        <Typography.Text>Country: {country}</Typography.Text>
+                        <Typography.Text>Age: {age}</Typography.Text>
+                        <Typography.Text>Join date: {hire_date}</Typography.Text>
+                    </>
+                )}
+            </div>
+        </Card>
+    );
+};
+
+export default EmployeeCard;

src/components/FaqCollapse/FaqCollapse.tsx

@@ -0,0 +1,11 @@
+import {Collapse, CollapseProps} from "antd";
+
+type Props = CollapseProps
+
+const FaqCollapse = ({...others}: Props) => {
+    return (
+        <Collapse {...others}/>
+    );
+};
+
+export default FaqCollapse;

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/SitemapCard/SitemapCard.tsx

@@ -0,0 +1,35 @@
+import {Button, CardProps, List} from "antd";
+import {Card} from "../index.ts";
+
+import "./styles.css"
+
+type Props = {
+    data: {
+        title: string,
+        links: { title: string, path: string }[]
+    }
+} & CardProps
+
+const SitemapCard = ({data, ...others}: Props) => {
+    return (
+        <Card title={data.title} className="sitemap-card card" {...others}>
+            <List
+                dataSource={data.links}
+                bordered={false}
+                renderItem={(item) => (
+                    <List.Item key={`sitemap-${item.title}`}>
+                        <Button
+                            type="link"
+                            href={item.path}
+                            style={{textTransform: "capitalize", marginLeft: ".5rem"}}
+                        >
+                            {item.title}
+                        </Button>
+                    </List.Item>
+                )}
+            />
+        </Card>
+    );
+};
+
+export default SitemapCard;

src/components/SitemapCard/styles.css

@@ -0,0 +1,7 @@
+.sitemap-card .ant-card-body {
+    padding: 0;
+}
+
+.sitemap-card .ant-list-item {
+    text-transform: capitalize;
+}

src/components/SocialMediaCard/SocialMediaCard.tsx

@@ -0,0 +1,37 @@
+import {Button, ButtonProps, CardProps} from "antd";
+import {Card} from "../index.ts";
+import {FacebookFilled, GithubFilled, InstagramFilled, LinkedinFilled, TwitterCircleFilled} from "@ant-design/icons";
+
+const BUTTON_PROPS: ButtonProps = {
+    type: "text",
+    style: {
+        textAlign: "start"
+    }
+}
+
+type Props = CardProps
+
+const SocialMediaCard = ({...others}: Props) => {
+    return (
+        <Card
+            title="Social Media"
+            {...others}
+        >
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8
+                }}
+            >
+                <Button icon={<FacebookFilled/>} {...BUTTON_PROPS}>Facebook</Button>
+                <Button icon={<InstagramFilled/>} {...BUTTON_PROPS}>Instagram</Button>
+                <Button icon={<TwitterCircleFilled/>} {...BUTTON_PROPS}>Facebook</Button>
+                <Button icon={<LinkedinFilled/>} {...BUTTON_PROPS}>Facebook</Button>
+                <Button icon={<GithubFilled/>} {...BUTTON_PROPS}>Facebook</Button>
+            </div>
+        </Card>
+    );
+};
+
+export default SocialMediaCard;