Merge pull request #325 from ashik-75/work

Update dashboard
lifeparticle · Sep 21, 2023 · 6fbf61d · 6fbf61d
2 parents b6652a6 + 55f77e9
commit 6fbf61d
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 195 deletions.
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
@@ -1,64 +1,49 @@
 .home {
-	background-color: #e6e6ff;
 	padding-left: 10px;
 	padding-right: 10px;
-	&__content {
-		padding-top: 80px;
-		padding-left: 200px;
-		padding-right: 200px;
+	background: url("src/assets/grid.svg");
+
+	&__hero {
+		max-width: var(--bt-converter-width);
+		margin: 0 auto;
+		display: block;
+		text-align: center;
 		display: flex;
 		flex-direction: column;
-
-		gap: 50px;
-
-		&_header {
-			display: flex;
-			flex-direction: row;
-
-			&_text {
-				display: flex;
-				flex-direction: column;
-				gap: 30px;
-			}
+		align-items: center;
+		justify-content: center;
+		gap: var(--bt-size-16);
+		button {
+			align-self: center;
 		}
+	}
 
-		&_values,
-		&_features {
-			align-items: center;
-			display: flex;
-			flex-direction: column;
-			gap: 20px;
-		}
+	&__features {
+		align-items: center;
+		display: flex;
+	}
 
-		&_values {
-			&_value {
-				display: grid;
-				gap: 20px;
-				grid-template-columns: 1fr 1fr 1fr;
-			}
-		}
+	&__values {
+		text-align: center;
+		display: flex;
+		justify-content: center;
+	}
 
-		&_features {
-			&_select {
-				display: flex;
-				flex-direction: column;
-				gap: 20px;
-			}
-		}
+	&__container {
+		padding: 80px 200px;
+		display: flex;
+		flex-direction: column;
+
+		gap: 100px;
+	}
 
-		&_footer {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			&_content {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				gap: 10px;
-				padding-left: 100px;
-				padding-right: 100px;
-			}
+	@media screen and (max-width: 768px) {
+		&__container {
+			padding: 50px 10px;
 		}
 	}
+	&__contribution {
+		max-width: var(--bt-converter-width);
+		margin: 0 auto;
+	}
 }
diff --git a/ui/src/pages/Home/components/Contribution.tsx b/ui/src/pages/Home/components/Contribution.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import style from "../Home.module.scss";
+import { Space, Typography } from "antd";
+import { ResponsiveButton } from "components/General/FormComponents";
+
+const Contribution: React.FC = () => {
+	const onClick = (url: string) => {
+		window.open(url, "_blank", "noopener");
+	};
+	return (
+		<section className={style.home__contribution}>
+			<Space direction="vertical" align="center">
+				<Typography.Title>Join our community</Typography.Title>
+				<Typography.Text>
+					Join our open-source community and help shape the future of
+					Modern web
+				</Typography.Text>
+				<Space direction="horizontal">
+					<ResponsiveButton
+						onClick={() =>
+							onClick(
+								"https://github.com/lifeparticle/binarytree"
+							)
+						}
+					>
+						Github Discussion
+					</ResponsiveButton>
+					<ResponsiveButton
+						onClick={() =>
+							onClick(
+								"https://github.com/lifeparticle/binarytree/issues"
+							)
+						}
+					>
+						Request Features
+					</ResponsiveButton>
+				</Space>
+			</Space>
+		</section>
+	);
+};
+
+export default Contribution;
diff --git a/ui/src/pages/Home/components/Features.tsx b/ui/src/pages/Home/components/Features.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { Button, Card, Col, Row, Space, Typography } from "antd";
+import Icon from "components/General/Icon";
+import { FEATURES } from "pages/Home/utils/constants";
+import style from "pages/Home/Home.module.scss";
+
+const Features: React.FC = () => {
+	return (
+		<Row gutter={[16, 16]}>
+			<Col xs={24} lg={8} className={style.home__features}>
+				<Space direction="vertical">
+					<Typography.Title>
+						Binary tree offers some cool feature
+					</Typography.Title>
+					<p>
+						In daily uses you need some cool tools to develop modern
+						application, hope binary tree help you to develop
+						application smoothly
+					</p>
+
+					<Button>Get Started</Button>
+				</Space>
+			</Col>
+
+			<Col xs={23} lg={16}>
+				<Row gutter={[16, 16]}>
+					{FEATURES.map((feature) => (
+						<Col xs={24} lg={8}>
+							<Card>
+								<Icon name={feature.icon} size={40} />
+
+								<Typography.Title level={4}>
+									{feature.title}
+								</Typography.Title>
+								<Typography.Text>
+									{feature.description}
+								</Typography.Text>
+							</Card>
+						</Col>
+					))}
+				</Row>
+			</Col>
+		</Row>
+	);
+};
+
+export default Features;
diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import style from "../Home.module.scss";
+import { Typography } from "antd";
+import { FEATURE_DATA } from "pages/About/utils/constants";
+
+const { Title } = Typography;
+const Hero: React.FC = () => {
+	return (
+		<section className={style.home__hero}>
+			<Title>Your Mate in Software Development</Title>
+			<Typography.Paragraph className={style.about__intro_wrapper_text}>
+				At binarytree.dev, we provide an array of developer productivity
+				tools designed to help you save time. With an{" "}
+				<a
+					href="https://github.com/users/lifeparticle/projects/2"
+					target="_blank"
+				>
+					ever-growing number of features
+				</a>{" "}
+				(currently <b>{FEATURE_DATA.length}</b>), our platform is
+				constantly evolving to meet the needs of developers like you.
+			</Typography.Paragraph>
+		</section>
+	);
+};
+
+export default Hero;
diff --git a/ui/src/pages/Home/components/Values.tsx b/ui/src/pages/Home/components/Values.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import style from "pages/Home/Home.module.scss";
+import { Card, Col, Row, Space } from "antd";
+import { APP_VALUES } from "pages/About/utils/constants";
+import verification from "assets/home/verification.svg";
+import share from "assets/home/share.svg";
+import detection from "assets/home/detection.svg";
+import { Typography } from "antd";
+
+const Values: React.FC = () => {
+	return (
+		<Space direction="vertical" size={"large"}>
+			<Typography.Title className={style.home__values}>
+				Value
+			</Typography.Title>
+			<Row gutter={[16, 16]}>
+				<Col xs={24} lg={8}>
+					<Card cover={<img src={share} alt="logo" height={200} />}>
+						{APP_VALUES[0]}
+					</Card>
+				</Col>
+
+				<Col xs={24} lg={8}>
+					<Card
+						cover={
+							<img src={verification} alt="logo" height={200} />
+						}
+					>
+						{APP_VALUES[1]}
+					</Card>
+				</Col>
+
+				<Col xs={24} lg={8}>
+					<Card
+						cover={<img src={detection} alt="logo" height={200} />}
+					>
+						{APP_VALUES[2]}
+					</Card>
+				</Col>
+			</Row>
+		</Space>
+	);
+};
+
+export default Values;