From dd2f0ab49f707a0015697e02a69d2a7599232b06 Mon Sep 17 00:00:00 2001 From: Kelvin Kiptum Kiprop Date: Mon, 2 Oct 2023 20:25:10 +0300 Subject: [PATCH 1/9] - finished corporate about page --- .../BlogsListCard/BlogsListCard.tsx | 66 ++++++++ src/components/BlogsListCard/styles.css | 7 + src/components/EmployeeCard/EmployeeCard.tsx | 24 +++ .../SocialMediaCard/SocialMediaCard.tsx | 37 +++++ src/components/index.ts | 13 +- src/layouts/app/App.tsx | 2 +- src/mocks/Employees.json | 152 ++++++++++++++++++ src/pages/corporate/About.tsx | 144 +++++++++++++++++ src/pages/corporate/index.ts | 3 + src/pages/index.ts | 4 +- src/routes/routes.tsx | 17 +- src/types/employee.ts | 15 ++ src/types/index.ts | 4 +- 13 files changed, 479 insertions(+), 9 deletions(-) create mode 100644 src/components/BlogsListCard/BlogsListCard.tsx create mode 100644 src/components/BlogsListCard/styles.css create mode 100644 src/components/EmployeeCard/EmployeeCard.tsx create mode 100644 src/components/SocialMediaCard/SocialMediaCard.tsx create mode 100644 src/mocks/Employees.json create mode 100644 src/pages/corporate/About.tsx create mode 100644 src/pages/corporate/index.ts create mode 100644 src/types/employee.ts diff --git a/src/components/BlogsListCard/BlogsListCard.tsx b/src/components/BlogsListCard/BlogsListCard.tsx new file mode 100644 index 0000000..f2190b7 --- /dev/null +++ b/src/components/BlogsListCard/BlogsListCard.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import {Button, CardProps, List, Space, Typography} from "antd"; +import {Card} from "../index.ts"; +import {LikeOutlined, MessageOutlined, StarOutlined} from '@ant-design/icons'; + +import "./styles.css" + +const data = Array.from({ length: 23 }).map((_, i) => ({ + href: 'https://ant.design', + title: `ant design part ${i}`, + avatar: `https://xsgames.co/randomusers/avatar.php?g=pixel&key=${i}`, + description: + 'Ant Design, a design language for background applications, is refined by Ant UED Team.', + content: + 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', +})); + +const IconText = ({ icon, text }: { icon: React.FC; text: string }) => ( + + {React.createElement(icon)} + {text} + +); + +type Props = CardProps + +const BlogsListCard = ({...others}: Props) => { + return ( + Explore now]} + className="card blogs-list-card" + {...others} + > + { + console.log(page); + }, + pageSize: 3, + align: "center" + }} + dataSource={data} + renderItem={(item) => ( + , + , + , + ]} + > + {item.title} + + {item.content} + + + )} + /> + + ); +}; + +export default BlogsListCard; \ No newline at end of file diff --git a/src/components/BlogsListCard/styles.css b/src/components/BlogsListCard/styles.css new file mode 100644 index 0000000..c999a26 --- /dev/null +++ b/src/components/BlogsListCard/styles.css @@ -0,0 +1,7 @@ +.blogs-list-card .ant-card-body { + padding: 0 0 1rem 0; +} + +.blogs-list-card .ant-list-item { + /*padding: 0;*/ +} \ No newline at end of file diff --git a/src/components/EmployeeCard/EmployeeCard.tsx b/src/components/EmployeeCard/EmployeeCard.tsx new file mode 100644 index 0000000..106392a --- /dev/null +++ b/src/components/EmployeeCard/EmployeeCard.tsx @@ -0,0 +1,24 @@ +import {Employee} from "../../types"; +import {Card as AntdCard, CardProps} from "antd"; +import {Card} from "../index.ts"; + +const {Meta} = AntdCard + +type Props = { + data: Employee +} & CardProps + +const EmployeeCard = ({data, ...others}: Props) => { + const {avatar, first_name, middle_name, last_name, role} = data + return ( + } + {...others} + > + + + ); +}; + +export default EmployeeCard; \ No newline at end of file diff --git a/src/components/SocialMediaCard/SocialMediaCard.tsx b/src/components/SocialMediaCard/SocialMediaCard.tsx new file mode 100644 index 0000000..53178d5 --- /dev/null +++ b/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 ( + +
+ + + + + +
+ + ); +}; + +export default SocialMediaCard; \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index ed02892..aa50d4a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -51,12 +51,14 @@ import { TasksListCard } from "./dashboard" import UserAvatar from "./UserAvatar/UserAvatar.tsx"; -import NotificationsItem from "./NotificationsItem/NotificationsItem.tsx"; -import NotificationsCard from "./NotificationsCard/NotificationsCard.tsx"; +import NotificationsItem from "./NotificationsItem/NotificationsItem"; +import NotificationsCard from "./NotificationsCard/NotificationsCard"; import Card from "./Card/Card.tsx"; import PageHeader from "./PageHeader/PageHeader.tsx"; import {Bar, Container, Nprogress} from "./Nprogress" - +import EmployeeCard from "./EmployeeCard/EmployeeCard"; +import BlogsListCard from "./BlogsListCard/BlogsListCard"; +import SocialMediaCard from "./SocialMediaCard/SocialMediaCard.tsx"; export { Logo, @@ -116,5 +118,8 @@ export { PageHeader, Bar, Container, - Nprogress + Nprogress, + EmployeeCard, + BlogsListCard, + SocialMediaCard } \ No newline at end of file diff --git a/src/layouts/app/App.tsx b/src/layouts/app/App.tsx index 39bc541..8529a0e 100644 --- a/src/layouts/app/App.tsx +++ b/src/layouts/app/App.tsx @@ -80,7 +80,7 @@ const AppLayout = () => { style={{ marginLeft: collapsed ? 0 : '200px', padding: '0 2rem 0 0', - background: navFill ? "rgb(193, 224, 244)" : "none", + background: navFill ? "#eaf5fc" : "none", backdropFilter: navFill ? "blur(8px)" : "none", display: 'flex', alignItems: 'center', diff --git a/src/mocks/Employees.json b/src/mocks/Employees.json new file mode 100644 index 0000000..8983dc4 --- /dev/null +++ b/src/mocks/Employees.json @@ -0,0 +1,152 @@ +[ + { + "employee_id": "24e4e64c-bf09-459f-8cea-f9d2de99d15b", + "title": "Mrs", + "first_name": "Eugen", + "middle_name": "Pål", + "last_name": "Tiltman", + "avatar": "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60", + "role": "Operator", + "age": 28, + "email": "etiltman0@dailymail.co.uk", + "country": "Indonesia", + "favorite_color": "gray", + "hire_date": "4/9/2017", + "salary": 92877.67 + }, + { + "employee_id": "3a33bd87-072b-46f0-847a-0f767bc34dcf", + "title": "Ms", + "first_name": "Anna-diane", + "middle_name": "Maëlla", + "last_name": "O'Hoey", + "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60", + "role": "Nurse Practicioner", + "age": 53, + "email": "aohoey1@eventbrite.com", + "country": "China", + "favorite_color": "maroon", + "hire_date": "9/27/2010", + "salary": 32804.83 + }, + { + "employee_id": "6e011b7e-68aa-41f7-a467-91384034b786", + "title": "Mr", + "first_name": "Maye", + "middle_name": "Hélèna", + "last_name": "Dunbar", + "avatar": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60", + "role": "Environmental Tech", + "age": 61, + "email": "mdunbar2@so-net.ne.jp", + "country": "China", + "favorite_color": "magenta", + "hire_date": "1/5/2013", + "salary": 38684.3 + }, + { + "employee_id": "4e374514-442a-4261-b527-0adc3fdb9f43", + "title": "Mr", + "first_name": "Crawford", + "middle_name": "Jú", + "last_name": "Fruish", + "avatar": "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60", + "role": "Marketing Manager", + "age": 52, + "email": "cfruish3@mlb.com", + "country": "Portugal", + "favorite_color": "gray", + "hire_date": "1/15/2020", + "salary": 56589.12 + }, + { + "employee_id": "dfd35fb5-8642-4077-867a-9b12745250ff", + "title": "Honorable", + "first_name": "Giselbert", + "middle_name": "Mahélie", + "last_name": "Lownes", + "avatar": "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60", + "role": "Occupational Therapist", + "age": 28, + "email": "glownes4@joomla.org", + "country": "China", + "favorite_color": "pink", + "hire_date": "8/30/2015", + "salary": 49919.87 + }, + { + "employee_id": "9954ae33-edd1-40f0-a099-15b16b0190e4", + "title": "Honorable", + "first_name": "Minnaminnie", + "middle_name": "Adèle", + "last_name": "Whiterod", + "avatar": "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHVzZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=400&q=60", + "role": "Health Coach IV", + "age": 22, + "email": "mwhiterod5@patch.com", + "country": "United States", + "favorite_color": "gray", + "hire_date": "1/11/2011", + "salary": 91214.87 + }, + { + "employee_id": "2f34de32-38ed-458e-9bd4-78896c530df2", + "title": "Mr", + "first_name": "Phineas", + "middle_name": "Faîtes", + "last_name": "Pleven", + "avatar": "https://images.unsplash.com/flagged/photo-1573740144655-bbb6e88fb18a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60", + "role": "Assistant Manager", + "age": 64, + "email": "ppleven6@desdev.cn", + "country": "China", + "favorite_color": "magenta", + "hire_date": "11/28/2013", + "salary": 51823.58 + }, + { + "employee_id": "9b22e3fb-e4dd-4d1e-af73-3cbbc3ddd686", + "title": "Dr", + "first_name": "Corrie", + "middle_name": "Mélia", + "last_name": "Clyde", + "avatar": "https://images.unsplash.com/photo-1484863137850-59afcfe05386?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHVzZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=400&q=60", + "role": "Accounting Assistant II", + "age": 33, + "email": "cclyde7@google.es", + "country": "Brazil", + "favorite_color": "magenta", + "hire_date": "5/21/2010", + "salary": 75652.05 + }, + { + "employee_id": "6cc7024d-484c-4bfd-8fc4-92767ad95e64", + "title": "Rev", + "first_name": "Matt", + "middle_name": "Josée", + "last_name": "Fibbens", + "avatar": "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHVzZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=400&q=60", + "role": "Research Associate", + "age": 40, + "email": "mfibbens8@google.com", + "country": "Angola", + "favorite_color": "teal", + "hire_date": "2/3/2017", + "salary": 28491.97 + }, + { + "employee_id": "32bc4b8e-f047-412d-9d54-40635a114655", + "title": "Mr", + "first_name": "Emory", + "middle_name": "Gösta", + "last_name": "Daley", + "avatar": "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHVzZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=400&q=60", + "role": "Recruiting Manager", + "age": 49, + "email": "edaley9@instagram.com", + "country": "Thailand", + "favorite_color": "yellow", + "hire_date": "10/1/2019", + "salary": 99899.32 + } +] \ No newline at end of file diff --git a/src/pages/corporate/About.tsx b/src/pages/corporate/About.tsx new file mode 100644 index 0000000..f49cc01 --- /dev/null +++ b/src/pages/corporate/About.tsx @@ -0,0 +1,144 @@ +import React from "react"; +import {Button, Card as AntdCard, Col, Image, List, Row, RowProps, Typography} from "antd"; +import {Card, EmployeeCard, BlogsListCard, SocialMediaCard} from "../../components"; +import EmployeesData from "../../mocks/Employees.json" +import {Employee} from "../../types"; + +const {Title, Text, Paragraph} = Typography + +const ROW_PROPS: RowProps = { + gutter: [ + {xs: 8, sm: 16, md: 24, lg: 32}, + {xs: 8, sm: 16, md: 24, lg: 32} + ] +} + +const gridStyle: React.CSSProperties = { + width: '33.33%', + textAlign: 'center', +}; + +const CorporateAboutPage = () => { + return ( +
+ + + + + About Design Sparx + } + > + Save time and resources by using our templates. + about us hero image + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Non tellus orci ac auctor augue + mauris augue. Id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris + in. Tortor aliquam nulla facilisi cras fermentum odio eu. Eleifend mi in nulla + posuere sollicitudin aliquam ultrices. Quis commodo odio aenean sed adipiscing diam + donec adipiscing tristique. Pharetra magna ac placerat vestibulum lectus mauris + ultrices. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Etiam tempor + orci eu lobortis elementum nibh tellus molestie nunc. Iaculis eu non diam phasellus + vestibulum lorem sed risus ultricies. Vestibulum lectus mauris ultrices eros in + cursus turpis. Risus nec feugiat in fermentum posuere urna nec. Nam at lectus urna + duis. + + + Sit amet purus gravida quis blandit turpis cursus. Vulputate eu scelerisque felis + imperdiet proin fermentum leo vel orci. Fusce id velit ut tortor pretium viverra + suspendisse potenti. + + + + + + { + console.log(page); + }, + pageSize: 6, + align: "center" + }} + dataSource={EmployeesData} + renderItem={(item: Employee) => ( + + + + )} + /> + + + + + + 100 % + Satisfaction + + + 124 K + Customers + + + $24 K + Worth in transactions + + + + + + + + + Explore more]}> + + Tortor id aliquet lectus proin nibh nisl condimentum. Semper quis lectus nulla at + volutpat. Faucibus nisl tincidunt eget nullam non. Malesuada nunc vel risus commodo + viverra. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt + ornare. + + Requirements +
    +
  • Experience with JavaScript
    • +
  • Good time-management skills
    • +
  • Experience with React & Nextjs
    • +
  • Experience with HTML / CSS
    • +
+ Our Achievements +
    +
  • ISO Certified
    • +
  • Atlassian Partner
    • +
  • Amazon Partner
    • +
  • Google Partner
    • +
  • Microsoft Partner
    • +
+ + + + + + + + + + + +
+ ); +}; + +export default CorporateAboutPage; \ No newline at end of file diff --git a/src/pages/corporate/index.ts b/src/pages/corporate/index.ts new file mode 100644 index 0000000..3f67b4a --- /dev/null +++ b/src/pages/corporate/index.ts @@ -0,0 +1,3 @@ +import CorporateAboutPage from "./About.tsx"; + +export {CorporateAboutPage} \ No newline at end of file diff --git a/src/pages/index.ts b/src/pages/index.ts index 6368760..5a41dd7 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -7,6 +7,7 @@ import { BiddingDashboardPage } from "./dashboards" import HomePage from "./Home.tsx"; +import {CorporateAboutPage} from "./corporate" export { DefaultDashboardPage, @@ -15,5 +16,6 @@ export { EcommerceDashboardPage, MarketingDashboardPage, SocialDashboardPage, - BiddingDashboardPage + BiddingDashboardPage, + CorporateAboutPage } \ No newline at end of file diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index 7c6e0fc..2728538 100644 --- a/src/routes/routes.tsx +++ b/src/routes/routes.tsx @@ -1,6 +1,6 @@ import {createBrowserRouter, useLocation} from "react-router-dom"; import { - BiddingDashboardPage, + BiddingDashboardPage, CorporateAboutPage, DefaultDashboardPage, EcommerceDashboardPage, HomePage, @@ -48,8 +48,8 @@ const router = createBrowserRouter([ errorElement: , children: [ { - path: "home", index: true, + path: "home", element: } ] @@ -60,6 +60,7 @@ const router = createBrowserRouter([ errorElement: , children: [ { + index: true, path: "default", element: }, @@ -92,6 +93,18 @@ const router = createBrowserRouter([ element: } ] + }, + { + path: "/corporate", + element: }/>, + errorElement: , + children: [ + { + index: true, + path: "about", + element: + } + ] } ]); diff --git a/src/types/employee.ts b/src/types/employee.ts new file mode 100644 index 0000000..0b6aa53 --- /dev/null +++ b/src/types/employee.ts @@ -0,0 +1,15 @@ +export type Employee = { + employee_id: string + title: string + first_name: string + middle_name: string + last_name: string + avatar: string + role: string + age: number + email: string + country: string + favorite_color: string + hire_date: string + salary: number +} \ No newline at end of file diff --git a/src/types/index.ts b/src/types/index.ts index dbf2166..5772bff 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -8,6 +8,7 @@ import type {LearningCourses, RecommendedCourses, Exam, CommunityGroup} from "./ import type {TruckDelivery, DeliveryAnalytics, Truck, DeliveryRequest} from "./logistics.ts" import type {Tasks} from "./dashboard" import type {Notifications} from "./notifications" +import type {Employee} from "./employee.ts" export type { Projects, @@ -36,5 +37,6 @@ export type { Truck, DeliveryRequest, Tasks, - Notifications + Notifications, + Employee } \ No newline at end of file From 366bc5ae72db6edd86749ab6fc6d767022cb10ff Mon Sep 17 00:00:00 2001 From: Kelvin Kiptum Kiprop Date: Mon, 2 Oct 2023 22:39:14 +0300 Subject: [PATCH 2/9] - finished corporate team page --- src/components/EmployeeCard/EmployeeCard.tsx | 32 ++- .../BlogsListCard/BlogsListCard.tsx | 2 +- .../{ => corporate}/BlogsListCard/styles.css | 0 src/components/index.ts | 2 +- src/constants/index.ts | 12 +- src/hooks/index.ts | 3 + src/hooks/usePageContext.tsx | 7 + src/layouts/app/App.tsx | 12 +- src/layouts/corporate/index.tsx | 91 +++++++++ src/layouts/dashboards/index.tsx | 5 +- src/layouts/index.ts | 3 +- src/pages/corporate/About.tsx | 189 +++++++----------- src/pages/corporate/Team.tsx | 53 +++++ src/pages/corporate/index.ts | 3 +- src/pages/index.ts | 5 +- src/routes/routes.tsx | 10 +- 16 files changed, 294 insertions(+), 135 deletions(-) rename src/components/{ => corporate}/BlogsListCard/BlogsListCard.tsx (98%) rename src/components/{ => corporate}/BlogsListCard/styles.css (100%) create mode 100644 src/hooks/index.ts create mode 100644 src/hooks/usePageContext.tsx create mode 100644 src/layouts/corporate/index.tsx create mode 100644 src/pages/corporate/Team.tsx diff --git a/src/components/EmployeeCard/EmployeeCard.tsx b/src/components/EmployeeCard/EmployeeCard.tsx index 106392a..0450f32 100644 --- a/src/components/EmployeeCard/EmployeeCard.tsx +++ b/src/components/EmployeeCard/EmployeeCard.tsx @@ -1,22 +1,42 @@ import {Employee} from "../../types"; -import {Card as AntdCard, CardProps} from "antd"; +import {Card as AntdCard, CardProps, Typography} from "antd"; import {Card} from "../index.ts"; const {Meta} = AntdCard type Props = { - data: Employee + data: Employee, + showInfo?: boolean } & CardProps -const EmployeeCard = ({data, ...others}: Props) => { - const {avatar, first_name, middle_name, last_name, role} = data +const EmployeeCard = ({data, showInfo, ...others}: Props) => { + const {avatar, first_name, middle_name, last_name, role, age, country, title, email, hire_date} = data + return ( } + cover={ + {`${first_name} + } {...others} > - + +
+ Role: {role} + {showInfo && ( + <> + Email: {email} + Country: {country} + Age: {age} + Join date: {hire_date} + + )} +
); }; diff --git a/src/components/BlogsListCard/BlogsListCard.tsx b/src/components/corporate/BlogsListCard/BlogsListCard.tsx similarity index 98% rename from src/components/BlogsListCard/BlogsListCard.tsx rename to src/components/corporate/BlogsListCard/BlogsListCard.tsx index f2190b7..b9341ff 100644 --- a/src/components/BlogsListCard/BlogsListCard.tsx +++ b/src/components/corporate/BlogsListCard/BlogsListCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Button, CardProps, List, Space, Typography} from "antd"; -import {Card} from "../index.ts"; +import {Card} from "../../index.ts"; import {LikeOutlined, MessageOutlined, StarOutlined} from '@ant-design/icons'; import "./styles.css" diff --git a/src/components/BlogsListCard/styles.css b/src/components/corporate/BlogsListCard/styles.css similarity index 100% rename from src/components/BlogsListCard/styles.css rename to src/components/corporate/BlogsListCard/styles.css diff --git a/src/components/index.ts b/src/components/index.ts index aa50d4a..2fda952 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -57,7 +57,7 @@ import Card from "./Card/Card.tsx"; import PageHeader from "./PageHeader/PageHeader.tsx"; import {Bar, Container, Nprogress} from "./Nprogress" import EmployeeCard from "./EmployeeCard/EmployeeCard"; -import BlogsListCard from "./BlogsListCard/BlogsListCard"; +import BlogsListCard from "./corporate/BlogsListCard/BlogsListCard"; import SocialMediaCard from "./SocialMediaCard/SocialMediaCard.tsx"; export { diff --git a/src/constants/index.ts b/src/constants/index.ts index e0de294..a68c64e 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -35,6 +35,15 @@ const DASHBOARD_ITEMS = [ {title: 'logistics', path: PATH_DASHBOARD.logistics}, ] +const CORPORATE_ITEMS = [ + {title: 'about', path: PATH_CORPORATE.about}, + {title: 'team', path: PATH_CORPORATE.team}, + {title: 'faq', path: PATH_CORPORATE.faqs}, + {title: 'contact us', path: PATH_CORPORATE.contact}, + {title: 'pricing', path: PATH_CORPORATE.pricing}, + {title: 'licence', path: PATH_CORPORATE.licence}, +] + export { PATH_CALENDAR, PATH_USER_MGMT, @@ -59,5 +68,6 @@ export { PATH_SOCIAL, PATH_START, PATH_LANDING, - DASHBOARD_ITEMS + DASHBOARD_ITEMS, + CORPORATE_ITEMS } \ No newline at end of file diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 0000000..283a3a0 --- /dev/null +++ b/src/hooks/index.ts @@ -0,0 +1,3 @@ +import {usePageContext} from "./usePageContext.tsx"; + +export {usePageContext} \ No newline at end of file diff --git a/src/hooks/usePageContext.tsx b/src/hooks/usePageContext.tsx new file mode 100644 index 0000000..c5b6a56 --- /dev/null +++ b/src/hooks/usePageContext.tsx @@ -0,0 +1,7 @@ +import {useOutletContext} from "react-router-dom"; + +export type ContextType = { title: string | null }; + +export function usePageContext() { + return useOutletContext(); +} \ No newline at end of file diff --git a/src/layouts/app/App.tsx b/src/layouts/app/App.tsx index 8529a0e..8f4b9e3 100644 --- a/src/layouts/app/App.tsx +++ b/src/layouts/app/App.tsx @@ -1,6 +1,6 @@ import {Affix, Button, Input, Layout, Space, theme, Tooltip} from "antd"; -import {Outlet, useLocation} from "react-router-dom"; -import {useEffect, useRef, useState} from "react"; +import {useLocation} from "react-router-dom"; +import {ReactNode, useEffect, useRef, useState} from "react"; import {AppstoreOutlined, MenuFoldOutlined, MenuUnfoldOutlined, MessageOutlined, UpOutlined} from "@ant-design/icons"; import {CSSTransition, SwitchTransition, TransitionGroup} from "react-transition-group"; import {useMediaQuery} from "react-responsive"; @@ -12,7 +12,11 @@ import {goToTop} from "../../utils"; const {Content} = Layout -const AppLayout = () => { +type AppLayoutProps = { + children: ReactNode +} + +const AppLayout = ({children}: AppLayoutProps) => { const { token: {borderRadius}, } = theme.useToken(); @@ -150,7 +154,7 @@ const AppLayout = () => { > {() => (
- + {children}
)} diff --git a/src/layouts/corporate/index.tsx b/src/layouts/corporate/index.tsx new file mode 100644 index 0000000..dde7718 --- /dev/null +++ b/src/layouts/corporate/index.tsx @@ -0,0 +1,91 @@ +import {AppLayout} from "../index.ts"; +import {Button, Col, Row, RowProps, Typography} from "antd"; +import {Link, Outlet} from "react-router-dom"; +import {BlogsListCard, Card, PageHeader, SocialMediaCard} from "../../components"; +import {HomeOutlined, IdcardOutlined} from "@ant-design/icons"; +import {CORPORATE_ITEMS} from "../../constants"; + +const {Text, Title} = Typography + +const ROW_PROPS: RowProps = { + gutter: [ + {xs: 8, sm: 16, md: 24, lg: 32}, + {xs: 8, sm: 16, md: 24, lg: 32} + ] +} + +const CorporateLayout = () => { + return ( + <> + {/*@ts-ignore*/} + + home), + path: "/" + }, + { + title: (<>corporate), + menu: { + items: CORPORATE_ITEMS.map(d => ({ + key: d.title, + title: {d.title}, + })) + } + }, + { + title: "about" + } + ]} + /> + + + + + + + + Explore more]}> + + Tortor id aliquet lectus proin nibh nisl condimentum. Semper quis lectus nulla + at + volutpat. Faucibus nisl tincidunt eget nullam non. Malesuada nunc vel risus + commodo + viverra. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi + tincidunt + ornare. + + Requirements +
    +
  • Experience with JavaScript
    • +
  • Good time-management skills
    • +
  • Experience with React & Nextjs
    • +
  • Experience with HTML / CSS
    • +
+ Our Achievements +
    +
  • ISO Certified
    • +
  • Atlassian Partner
    • +
  • Amazon Partner
    • +
  • Google Partner
    • +
  • Microsoft Partner
    • +
+ + + + + + + + + + + + + + ); +}; + +export default CorporateLayout; \ No newline at end of file diff --git a/src/layouts/dashboards/index.tsx b/src/layouts/dashboards/index.tsx index 0b0be61..f72d559 100644 --- a/src/layouts/dashboards/index.tsx +++ b/src/layouts/dashboards/index.tsx @@ -1,8 +1,11 @@ import {AppLayout} from "../app"; +import {Outlet} from "react-router-dom"; const DashboardLayout = () => { return ( - + + + ); }; diff --git a/src/layouts/index.ts b/src/layouts/index.ts index a32c400..b231eb6 100644 --- a/src/layouts/index.ts +++ b/src/layouts/index.ts @@ -1,5 +1,6 @@ import {AppLayout} from "./app" import DashboardLayout from "./dashboards"; import GuestLayout from "./guest/Guest.tsx"; +import CorporateLayout from "./corporate"; -export {AppLayout, DashboardLayout, GuestLayout} \ No newline at end of file +export {AppLayout, DashboardLayout, GuestLayout,CorporateLayout} \ No newline at end of file diff --git a/src/pages/corporate/About.tsx b/src/pages/corporate/About.tsx index f49cc01..15067e4 100644 --- a/src/pages/corporate/About.tsx +++ b/src/pages/corporate/About.tsx @@ -1,6 +1,6 @@ import React from "react"; -import {Button, Card as AntdCard, Col, Image, List, Row, RowProps, Typography} from "antd"; -import {Card, EmployeeCard, BlogsListCard, SocialMediaCard} from "../../components"; +import {Card as AntdCard, Col, Image, List, Row, RowProps, Typography} from "antd"; +import {Card, EmployeeCard} from "../../components"; import EmployeesData from "../../mocks/Employees.json" import {Employee} from "../../types"; @@ -22,119 +22,80 @@ const CorporateAboutPage = () => { return (
- - - - About Design Sparx - } - > - Save time and resources by using our templates. - about us hero image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Non tellus orci ac auctor augue - mauris augue. Id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris - in. Tortor aliquam nulla facilisi cras fermentum odio eu. Eleifend mi in nulla - posuere sollicitudin aliquam ultrices. Quis commodo odio aenean sed adipiscing diam - donec adipiscing tristique. Pharetra magna ac placerat vestibulum lectus mauris - ultrices. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Etiam tempor - orci eu lobortis elementum nibh tellus molestie nunc. Iaculis eu non diam phasellus - vestibulum lorem sed risus ultricies. Vestibulum lectus mauris ultrices eros in - cursus turpis. Risus nec feugiat in fermentum posuere urna nec. Nam at lectus urna - duis. - - - Sit amet purus gravida quis blandit turpis cursus. Vulputate eu scelerisque felis - imperdiet proin fermentum leo vel orci. Fusce id velit ut tortor pretium viverra - suspendisse potenti. - - - - - - { - console.log(page); - }, - pageSize: 6, - align: "center" - }} - dataSource={EmployeesData} - renderItem={(item: Employee) => ( - - - - )} - /> - - - - - - 100 % - Satisfaction - - - 124 K - Customers - - - $24 K - Worth in transactions - - - - + + About Design Sparx + } + > + Save time and resources by using our templates. + about us hero image + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Non tellus orci ac auctor augue + mauris augue. Id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris + in. Tortor aliquam nulla facilisi cras fermentum odio eu. Eleifend mi in nulla + posuere sollicitudin aliquam ultrices. Quis commodo odio aenean sed adipiscing diam + donec adipiscing tristique. Pharetra magna ac placerat vestibulum lectus mauris + ultrices. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Etiam tempor + orci eu lobortis elementum nibh tellus molestie nunc. Iaculis eu non diam phasellus + vestibulum lorem sed risus ultricies. Vestibulum lectus mauris ultrices eros in + cursus turpis. Risus nec feugiat in fermentum posuere urna nec. Nam at lectus urna + duis. + + + Sit amet purus gravida quis blandit turpis cursus. Vulputate eu scelerisque felis + imperdiet proin fermentum leo vel orci. Fusce id velit ut tortor pretium viverra + suspendisse potenti. + + - - - - Explore more]}> - - Tortor id aliquet lectus proin nibh nisl condimentum. Semper quis lectus nulla at - volutpat. Faucibus nisl tincidunt eget nullam non. Malesuada nunc vel risus commodo - viverra. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt - ornare. - - Requirements -
    -
  • Experience with JavaScript
    • -
  • Good time-management skills
    • -
  • Experience with React & Nextjs
    • -
  • Experience with HTML / CSS
    • -
- Our Achievements -
    -
  • ISO Certified
    • -
  • Atlassian Partner
    • -
  • Amazon Partner
    • -
  • Google Partner
    • -
  • Microsoft Partner
    • -
- - - - - - - - - + + + { + console.log(page); + }, + pageSize: 4, + align: "center" + }} + dataSource={EmployeesData} + renderItem={(item: Employee) => ( + + + + )} + /> + + + + + + 100 % + Satisfaction + + + 124 K + Customers + + + $24 K + Worth in transactions + +
diff --git a/src/pages/corporate/Team.tsx b/src/pages/corporate/Team.tsx new file mode 100644 index 0000000..1d7cf7e --- /dev/null +++ b/src/pages/corporate/Team.tsx @@ -0,0 +1,53 @@ +import {Col, List, Row, RowProps} from "antd"; +import {Card, EmployeeCard} from "../../components"; +import EmployeesData from "../../mocks/Employees.json"; +import {Employee} from "../../types"; + +const ROW_PROPS: RowProps = { + gutter: [ + {xs: 8, sm: 16, md: 24, lg: 32}, + {xs: 8, sm: 16, md: 24, lg: 32} + ] +} + +const CorporateTeamPage = () => { + return ( +
+ + + + { + console.log(page); + }, + pageSize: 10, + align: "center" + }} + dataSource={EmployeesData} + renderItem={(item: Employee) => ( + + + + )} + /> + + + +
+ ); +}; + +export default CorporateTeamPage; \ No newline at end of file diff --git a/src/pages/corporate/index.ts b/src/pages/corporate/index.ts index 3f67b4a..19afb1e 100644 --- a/src/pages/corporate/index.ts +++ b/src/pages/corporate/index.ts @@ -1,3 +1,4 @@ import CorporateAboutPage from "./About.tsx"; +import CorporateTeamPage from "./Team.tsx"; -export {CorporateAboutPage} \ No newline at end of file +export {CorporateAboutPage, CorporateTeamPage} \ No newline at end of file diff --git a/src/pages/index.ts b/src/pages/index.ts index 5a41dd7..7d99f09 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -7,7 +7,7 @@ import { BiddingDashboardPage } from "./dashboards" import HomePage from "./Home.tsx"; -import {CorporateAboutPage} from "./corporate" +import {CorporateAboutPage, CorporateTeamPage} from "./corporate" export { DefaultDashboardPage, @@ -17,5 +17,6 @@ export { MarketingDashboardPage, SocialDashboardPage, BiddingDashboardPage, - CorporateAboutPage + CorporateAboutPage, + CorporateTeamPage } \ No newline at end of file diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index 2728538..82fcec4 100644 --- a/src/routes/routes.tsx +++ b/src/routes/routes.tsx @@ -1,6 +1,6 @@ import {createBrowserRouter, useLocation} from "react-router-dom"; import { - BiddingDashboardPage, CorporateAboutPage, + BiddingDashboardPage, CorporateAboutPage, CorporateTeamPage, DefaultDashboardPage, EcommerceDashboardPage, HomePage, @@ -9,7 +9,7 @@ import { SocialDashboardPage } from "../pages"; import ErrorPage from "../pages/errors/Error.tsx"; -import {DashboardLayout, GuestLayout} from "../layouts"; +import {CorporateLayout, DashboardLayout, GuestLayout} from "../layouts"; import {LearningDashboardPage, LogisticsDashboardPage} from "../pages/dashboards"; import React, {ReactNode, useEffect} from "react"; @@ -96,13 +96,17 @@ const router = createBrowserRouter([ }, { path: "/corporate", - element: }/>, + element: }/>, errorElement: , children: [ { index: true, path: "about", element: + }, + { + path: "team", + element: } ] } From 2d1cd5f3f8533df928a556649745aabe819f89a3 Mon Sep 17 00:00:00 2001 From: Kelvin Kiptum Kiprop Date: Tue, 3 Oct 2023 00:50:38 +0300 Subject: [PATCH 3/9] - finished corporate contact page --- src/components/Card/styles.css | 2 +- src/components/ContactForm/ContactForm.tsx | 48 + src/components/FaqCollapse/FaqCollapse.tsx | 11 + src/components/index.ts | 6 +- src/layouts/app/App.tsx | 4 +- src/layouts/guest/Guest.tsx | 4 +- src/mocks/Faqs.json | 1642 ++++++++++++++++++++ src/pages/corporate/Contact.tsx | 58 + src/pages/corporate/Faqs.tsx | 66 + src/pages/corporate/index.ts | 4 +- src/pages/index.ts | 6 +- src/routes/routes.tsx | 10 +- src/types/faq.ts | 13 + src/types/index.ts | 6 +- 14 files changed, 1868 insertions(+), 12 deletions(-) create mode 100644 src/components/ContactForm/ContactForm.tsx create mode 100644 src/components/FaqCollapse/FaqCollapse.tsx create mode 100644 src/mocks/Faqs.json create mode 100644 src/pages/corporate/Contact.tsx create mode 100644 src/pages/corporate/Faqs.tsx create mode 100644 src/types/faq.ts diff --git a/src/components/Card/styles.css b/src/components/Card/styles.css index ffd9c96..926af4d 100644 --- a/src/components/Card/styles.css +++ b/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); diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx new file mode 100644 index 0000000..27ca5db --- /dev/null +++ b/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 ( +
+
+ + + + + + + + + + + + + + + + +