Skip to content

Commit 8d22374

Browse files
codexsitcodexsit
authored
Merge pull request #35 from codeXsit/codex-1-about-page
Added About Us page
2 parents 994f6ee + 99eb1c3 commit 8d22374

File tree

8 files changed

+194
-6
lines changed

8 files changed

+194
-6
lines changed

‎src/assets/images/About/oval.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/assets/images/About/stockimage1.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/assets/images/About/stockimage3.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/assets/images/About/stockimage4.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/assets/styles/index.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@
1414
font-family: "poppins", "sans-serif";
1515
}
1616

17-
body {
18-
background-color: theme("colors.secondary.light");
17+
body,
18+
#root {
19+
background-color: theme("colors.secondary.dark");
1920
}
2021

2122
a {

‎src/components/Heading/index.jsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import PropTypes from "prop-types";
22

3-
function Heading({ text }) {
3+
function Heading({ text, className, bgTextStyle, frontTextStyle }) {
44
return (
5-
<div className="relative text-center font-black uppercase tracking-tighter -m-2">
6-
<div className="xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent leading-[145%]">
5+
<div
6+
className={`relative text-center font-black uppercase tracking-tighter ${className}`}
7+
>
8+
<div
9+
className={`${bgTextStyle} xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent`}
10+
>
711
{text}
812
</div>
9-
<div className="xs:text-2xl sm:text-4xl lg:text-6xl text-text-light absolute w-full leading-none bottom-[-20%]">
13+
<div
14+
className={`${frontTextStyle} xs:text-2xl sm:text-4xl lg:text-6xl absolute w-full leading-none bottom-[-20%]`}
15+
>
1016
{text}
1117
</div>
1218
</div>
@@ -15,6 +21,15 @@ function Heading({ text }) {
1521

1622
Heading.propTypes = {
1723
text: PropTypes.string.isRequired,
24+
className: PropTypes.string,
25+
bgTextStyle: PropTypes.string,
26+
frontTextStyle: PropTypes.string,
27+
};
28+
29+
Heading.defaultProps = {
30+
className: "",
31+
bgTextStyle: "",
32+
frontTextStyle: "text-text-light",
1833
};
1934

2035
export default Heading;

‎src/pages/About/index.jsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import Heading from "@/components/Heading/index";
2+
import Stock1 from "@/assets/images/About/stockimage1.svg";
3+
import Stock3 from "@/assets/images/About/stockimage3.svg";
4+
import Stock4 from "@/assets/images/About/stockimage4.svg";
5+
import Oval from "@/assets/images/About/oval.svg";
6+
7+
function About() {
8+
return (
9+
<div>
10+
<div className="min-h-screen">
11+
<Heading
12+
text="ABOUT US"
13+
className="my-6"
14+
frontTextStyle="text-text-light"
15+
/>
16+
<div className="flex flex-grow flex-wrap items-center overflow-hidden">
17+
<div className="container space-y-8">
18+
<p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-16">
19+
Praesent vestibulum libero non diam consequat euismod. Maecenas
20+
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
21+
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
22+
adipiscing elit.
23+
</p>
24+
<img
25+
src={Stock1}
26+
alt="Stock1"
27+
className="m-h-12 m-w-12 mx-auto space-y-8 rounded-2xl"
28+
/>
29+
</div>
30+
</div>
31+
<Heading
32+
text="OUR MISSION"
33+
className="my-12"
34+
frontTextStyle="text-text-light"
35+
/>
36+
<div className="flex flex-grow flex-wrap items-center relative">
37+
<div className="container space-y-8">
38+
<p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-16">
39+
Praesent vestibulum libero non diam consequat euismod. Maecenas
40+
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
41+
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
42+
adipiscing elit.
43+
</p>
44+
<div className="w-48 h-24 rounded-tl-full rounded-tr-full bg-background-light absolute -bottom-15 right-20">
45+
{}
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
<div className="bg-background-light min-h-screen relative">
51+
<div className="w-48 h-24 rounded-bl-full rounded-br-full bg-primary absolute bottom-15 right-20">
52+
{}
53+
</div>
54+
<Heading
55+
text="OUR VISION"
56+
className="mt-32"
57+
frontTextStyle="text-primary"
58+
/>
59+
<div className="container space-y-8">
60+
<p className="p-2 px-64 py-32 space-y-16 mx-auto m-w-12 text-xl text-wrap text-text-dark text-center mt-6">
61+
Praesent vestibulum libero non diam consequat euismod. Maecenas
62+
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
63+
varius tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
64+
elit.
65+
</p>
66+
</div>
67+
<div className="width-full">
68+
<img src={Oval} alt="Oval" className="absolute bottom-0" />
69+
</div>
70+
</div>
71+
<div className="min-h-screen overflow-hidden">
72+
<div className="items-center relative">
73+
<Heading
74+
text="WHAT WE DO?"
75+
className="mt-40 space-y-16"
76+
frontTextStyle="text-text-light"
77+
/>
78+
<div className="w-20 h-20 rounded-full bg-primary absolute -top-10 right-10">
79+
{}
80+
</div>
81+
</div>
82+
<div className="flex flex-wrap items-center relative">
83+
<div className="space-y-8">
84+
<p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-6">
85+
Praesent vestibulum libero non diam consequat euismod. Maecenas
86+
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
87+
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
88+
adipiscing elit.
89+
</p>
90+
<div className="w-12 h-12 rounded-full bg-background-light absolute top-2 left-10">
91+
{}
92+
</div>
93+
<div className="flex flex-row items-center flex-grow px-64 py-8">
94+
<img
95+
src={Stock1}
96+
alt="Stock1"
97+
className="h-96 w-96 object-none mx-auto"
98+
/>
99+
<div className="w-24 h-24 rounded-full bg-background-light absolute top-60 right-48">
100+
{}
101+
</div>
102+
<img
103+
src={Stock3}
104+
alt="Stock3"
105+
className="h-96 w-96 mx-auto z-0"
106+
/>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
<div className="min-h-fit my-48 px-8">
112+
<div className="flex flex-row">
113+
<img src={Stock4} alt="Stock4" className="max-h-96 max-w-96" />
114+
<div className="flex flex-wrap px-12 mt-12">
115+
<p className="text-5xl text-text-light font-bold max-w-screen font-poppins">
116+
OUR VISION
117+
</p>
118+
<p className="mx-auto max-w-screen text-xl text-wrap text-text-light text-left">
119+
Praesent vestibulum libero non diam consequat euismod. Maecenas
120+
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
121+
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
122+
adipiscing elit.
123+
</p>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
);
129+
}
130+
131+
export default About;

‎src/routes/index.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import Home from "@/pages/Home/index";
22
import Teams from "@/pages/Teams/index";
3+
import About from "@/pages/About/index";
34

45
const routes = [
6+
{
7+
lable: "About",
8+
path: "/about",
9+
requireAuth: false,
10+
render: <About />,
11+
},
512
{
613
lable: "Teams",
714
path: "/teams",

0 commit comments

Comments
 (0)