about and home page

lifeparticle · Oct 26, 2023 · fdd9b36 · fdd9b36
1 parent 8d86ae1
commit fdd9b36
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 105 deletions.
diff --git a/ui/src/assets/About/card_bg.jpg b/ui/src/assets/About/card_bg.jpg
diff --git a/ui/src/data/featureData.ts b/ui/src/data/featureData.ts
@@ -335,4 +335,12 @@ export const FEATURE_DATA: Feature[] = [
 	// 	link: routesById.imageconverter.path,
 	// 	library: [{ name: "Vanilla JS", url: "" }],
 	// },
+	// {
+	// 	key: routesById.docs.id,
+	// 	name: routesById.docs.title,
+	// 	shortDescription: routesById.docs.description,
+	// 	fullDescription: "",
+	// 	link: routesById.docs.path,
+	// 	library: [{ name: "Vanilla JS", url: "" }],
+	// },
 ];
diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
@@ -1,38 +1,24 @@
-$about-bg-color: #9c9c9c98;
-
 .about {
 	padding: var(--bt-size-64) var(--bt-size-percent-10) var(--bt-size-64)
 		var(--bt-size-percent-10);
+	display: flex;
+	flex-direction: column;
+	gap: var(--bt-size-20);
 
 	&__card {
 		margin: var(--bt-size-0) auto;
 		max-width: var(--bt-converter-width);
 
-		&__container {
-			display: flex;
-			flex-direction: column;
-			gap: var(--bt-size-20);
-		}
-
 		&__intro {
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			background: url("../../assets/About/card_bg.jpg") no-repeat left /
+				cover;
 
 			&_text {
-				background: linear-gradient(
-						rgba(0, 0, 0, 0.1),
-						rgba(0, 0, 0, 0.2),
-						rgba(0, 0, 0, 0.3),
-						rgba(0, 0, 0, 0.3),
-						rgba(0, 0, 0, 0.2),
-						rgba(0, 0, 0, 0.1)
-					),
-					url("../../assets/About/card_bg.jpg") no-repeat left / cover;
-
-				background-blend-mode: color-dodge;
+				backdrop-filter: blur(100px);
 				object-fit: cover;
-				background-color: $about-bg-color;
 				display: flex;
 				justify-content: center;
 				flex-direction: column;

diff --git a/ui/src/pages/About/components/Credits.tsx b/ui/src/pages/About/components/Credits.tsx
@@ -43,11 +43,11 @@ const CREDITS_DATA: Credits[] = [
 		name: "Movie for hackers",
 		url: "https://github.com/k4m4/movies-for-hackers",
 	},
-	{
-		key: "5",
-		name: "Jigar Panchal",
-		url: "https://unsplash.com/photos/AaqI2ao96KM",
-	},
+	// {
+	// 	key: "5",
+	// 	name: "",
+	// 	url: "",
+	// },
 	{
 		key: "6",
 		name: "Hassaan Here",

diff --git a/ui/src/pages/About/components/Features.tsx b/ui/src/pages/About/components/Features.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { List, Carousel, Card, Space } from "antd";
-import { Tag } from "antd";
+import { List, Carousel, Card, Space, Tag } from "antd";
 import { FEATURE_DATA } from "data/featureData";
 import { openLink } from "utils/helper-functions/string";
 

diff --git a/ui/src/pages/About/components/Support.tsx b/ui/src/pages/About/components/Support.tsx
@@ -1,5 +1,6 @@
-import { List, Typography } from "antd";
+import { Button, List, Typography } from "antd";
 import React from "react";
+import { openLink } from "utils/helper-functions/string";
 
 const Support: React.FC = () => {
 	return (
@@ -22,8 +23,13 @@ const APP_SUPPORT = [
 	<>
 		Fancy giving this project a little love? Why not become a superstar
 		through{" "}
-		<a href="https://github.com/sponsors/lifeparticle">GitHub Sponsors.</a>?
-		Whether you choose to shower us with monthly sprinkles of support or a
+		<Button
+			type="primary"
+			onClick={() => openLink("https://github.com/sponsors/lifeparticle")}
+		>
+			GitHub Sponsors
+		</Button>{" "}
+		? Whether you choose to shower us with monthly sprinkles of support or a
 		one-time generosity bomb, your backing truly counts! Remember, your
 		contribution helps keep our gears grinding and our spirits soaring. So,
 		come on board and make a difference!

diff --git a/ui/src/pages/About/components/Values.tsx b/ui/src/pages/About/components/Values.tsx
@@ -41,6 +41,21 @@ const APP_VALUES = [
 		</a>{" "}
 		your data, saving you time and hassle.
 	</>,
+	<>
+		<Typography.Text strong>Beam:</Typography.Text> Beam's unique feature
+		allows for seamless integration of data from one page to another. With
+		this feature, you can achieve an efficient workflow. This eliminates the
+		need to manually input data, saving time and reducing potential errors.
+		For instance, Beam allows for effortless data transfer between the{" "}
+		<a href="colors/cp" target="_blank">
+			Color Picker
+		</a>{" "}
+		and{" "}
+		<a href="colors/shades-tints" target="_blank">
+			Shades & Tints
+		</a>
+		, and vice versa.
+	</>,
 ];
 
 const Values: React.FC = () => {

diff --git a/ui/src/pages/About/index.tsx b/ui/src/pages/About/index.tsx
@@ -10,58 +10,58 @@ const About = () => {
 	return (
 		<>
 			<div className={style.about}>
-				<Card
-					className={style.about__card}
-					bordered={false}
-					cover={
-						<div className={style.about__card__intro}>
-							<Typography.Paragraph
-								className={style.about__card__intro_text}
-							>
-								Hey there, fellow developers! I hope you're
-								having a fantastic day and your code is running
-								smoothly. Don't worry if it's not; we've all
-								been there. I've been in the software
-								development game for quite some time now, and I
-								remember the days when I constantly searched for
-								tools to make my life easier.
-								<br />
-								<br />
-								Tools like Postman, Faker, JSON Placeholder and
-								many others have been my trusted allies in those
-								challenging times. They helped me test my APIs,
-								generate fake data for testing, and even mock up
-								entire backends. But even with these tools, I
-								felt something was missing. I wanted a tool that
-								would not only help me but also improve the
-								workflows of other devs around the world.
-								<br />
-								<br />
-								So, after many sleepless nights and countless
-								cups of ☕ & 🧋, I'm thrilled to introduce you
-								to BinaryTree - a tool born out of pure passion
-								and determination. BinaryTree is designed to
-								save you time and effort, streamline your
-								workflow, and help you overcome the challenges
-								we developers face daily.
-								<br />
-								<br />I believe that we rise by lifting others,
-								and I hope BinaryTree will be a valuable
-								addition to your developer toolkit. Happy
-								coding!
-								<br />
-								<br />
-								<p>{`— A node in the BinaryTree.`}</p>
-							</Typography.Paragraph>
-						</div>
-					}
-				>
-					<div className={style.about__card__container}>
-						<Values />
-						<Features />
-						<Credits />
-						<Support />
+				<div className={style.about__card}>
+					<div className={style.about__card__intro}>
+						<Typography.Title
+							level={5}
+							className={style.about__card__intro_text}
+						>
+							Hey there, fellow developers! I hope you're having a
+							fantastic day and your code is running smoothly.
+							Don't worry if it's not; we've all been there. I've
+							been in the software development game for quite some
+							time now, and I remember the days when I constantly
+							searched for tools to make my life easier.
+							<br />
+							<br />
+							Tools like Postman, Faker, JSON Placeholder and many
+							others have been my trusted allies in those
+							challenging times. They helped me test my APIs,
+							generate fake data for testing, and even mock up
+							entire backends. But even with these tools, I felt
+							something was missing. I wanted a tool that would
+							not only help me but also improve the workflows of
+							other devs around the world.
+							<br />
+							<br />
+							So, after many sleepless nights and countless cups
+							of ☕ & 🧋, I'm thrilled to introduce you to
+							BinaryTree - a tool born out of pure passion and
+							determination. BinaryTree is designed to save you
+							time and effort, streamline your workflow, and help
+							you overcome the challenges we developers face
+							daily.
+							<br />
+							<br />I believe that we rise by lifting others, and
+							I hope BinaryTree will be a valuable addition to
+							your developer toolkit. Happy coding!
+							<br />
+							<br />
+							<p>{`— A node in the BinaryTree.`}</p>
+						</Typography.Title>
 					</div>
+				</div>
+				<Card className={style.about__card} bordered={false}>
+					<Values />
+				</Card>
+				<Card className={style.about__card} bordered={false}>
+					<Features />
+				</Card>
+				<Card className={style.about__card} bordered={false}>
+					<Credits />
+				</Card>
+				<Card className={style.about__card} bordered={false}>
+					<Support />
 				</Card>
 			</div>
 			<Footer />

diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
@@ -12,22 +12,20 @@ $home-z-index-100: 100;
 	&__container {
 		display: flex;
 		flex-direction: column;
-		gap: var(--bt-size-50);
 	}
 
 	&__hero {
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
 		align-items: center;
 		text-align: center;
+		gap: var(--bt-size-50);
 	}
 
 	&__features {
 		display: flex;
 		align-items: center;
 		flex-direction: column;
-		gap: var(--bt-size-50);
 
 		&_cover {
 			display: flex;

diff --git a/ui/src/pages/Home/components/Features.tsx b/ui/src/pages/Home/components/Features.tsx
@@ -4,31 +4,12 @@ import Icon from "components/General/Icon";
 import { FEATURES } from "pages/Home/utils/constants";
 import style from "pages/Home/Home.module.scss";
 import { Link } from "react-router-dom";
-import useModal from "hooks/useModal";
-import { ResponsiveButton } from "components/General/FormComponents";
+
 import features from "assets/Home/features.svg";
-import { openLink } from "utils/helper-functions/string";
 
 const Features: React.FC = () => {
-	const { handleModalOpen } = useModal();
-
 	return (
 		<div className={style.home__features}>
-			<Space direction="horizontal">
-				<ResponsiveButton onClick={handleModalOpen} type="primary">
-					Get Started
-				</ResponsiveButton>
-				<ResponsiveButton
-					onClick={() =>
-						openLink(
-							"https://github.com/lifeparticle/binarytree/issues"
-						)
-					}
-				>
-					Request Features
-				</ResponsiveButton>
-			</Space>
-
 			<div className={style.home__features_cover}>
 				<div>
 					<Typography.Title level={3}>

diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx
@@ -1,11 +1,16 @@
 import React from "react";
 import style from "pages/Home/Home.module.scss";
-import { Typography, Image } from "antd";
+import { Typography, Image, Space } from "antd";
 import hero from "assets/Home/hero.webp";
 import { FEATURE_DATA } from "data/featureData";
+import { ResponsiveButton } from "components/General/FormComponents";
+import { openLink } from "utils/helper-functions/string";
+import useModal from "hooks/useModal";
 
 const { Title } = Typography;
 const Hero: React.FC = () => {
+	const { handleModalOpen } = useModal();
+
 	return (
 		<section className={style.home__hero}>
 			<Title className={style.home__hero_text_title}>
@@ -31,6 +36,21 @@ const Hero: React.FC = () => {
 				(currently <b>{FEATURE_DATA.length}</b>), our platform is
 				constantly evolving to meet the needs of developers like you
 			</Title>
+
+			<Space direction="horizontal">
+				<ResponsiveButton onClick={handleModalOpen} type="primary">
+					Get Started
+				</ResponsiveButton>
+				<ResponsiveButton
+					onClick={() =>
+						openLink(
+							"https://github.com/lifeparticle/binarytree/issues"
+						)
+					}
+				>
+					Request Features
+				</ResponsiveButton>
+			</Space>
 		</section>
 	);
 };