Skip to content

Commit 763fa53

Browse files
ozzydogandevozzydogandev
authored
Merge pull request #45 from Code-the-Dream-School/about-us
About us
2 parents f3ec2e3 + 6e2378e commit 763fa53

File tree

7 files changed

+195
-8
lines changed

7 files changed

+195
-8
lines changed

‎images/hh-team8.png

9.91 MB
Loading

‎src/App.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import HomePage from "./views/HomePage";
77
import ShareAProject from "./views/ShareAProject";
88
import ExploreProjects from "./views/ExploreProjects";
99
import PrivateRoute from "./views/PrivateRoute";
10+
import AboutUs from "./views/AboutUsPage";
1011
const URL = "http://localhost:8000/api/v1/";
1112

1213
function App() {
@@ -34,6 +35,7 @@ function App() {
3435
<Route path="/share-project" element={<ShareAProject />} />
3536
</Route>
3637
<Route path="/explore-project" element={<ExploreProjects />} />
38+
<Route path="/about-us" element={<AboutUs />} />
3739
<Route path="/message" element={<h1>{message}</h1>} />
3840
</Routes>
3941
</Provider>

‎src/components/Login.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { InputGroup } from "./ui/input-group";
66
import { LuUser } from "react-icons/lu";
77
import { useState } from "react";
88
import { useNavigate } from "react-router-dom";
9-
import { Toaster, toaster } from "../components/ui/toaster";
9+
import { toaster } from "../components/ui/toaster";
1010
const Login = ({ onFormSwitch, onLoginSuccess, isAuthentificated }) => {
1111
const navigate = useNavigate();
1212
const url = "http://localhost:8001/api/v1/login";
@@ -54,8 +54,9 @@ const Login = ({ onFormSwitch, onLoginSuccess, isAuthentificated }) => {
5454
navigate("/"); // Redirect to share-project after successful login
5555
toaster.create({
5656
title: "Login successful!",
57+
description: "Successfully logged in!",
5758
type: "success",
58-
duration: 8000,
59+
duration: 4000,
5960
action: {
6061
label: "x",
6162
},
@@ -159,7 +160,7 @@ const Login = ({ onFormSwitch, onLoginSuccess, isAuthentificated }) => {
159160
</Button>
160161
</VStack>
161162
</Group>
162-
<Toaster />
163+
<toaster />
163164
</VStack>
164165
);
165166
};

‎src/components/LoginAuth.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box, HStack, VStack, Image, Button } from "@chakra-ui/react";
22
import React, { useState } from "react";
33
import { useNavigate } from "react-router-dom";
4-
import { Toaster, toaster } from "../components/ui/toaster";
4+
import { toaster } from "../components/ui/toaster";
55
import {
66
DialogBody,
77
DialogHeader,
@@ -41,7 +41,7 @@ const CardWithForm = ({ isAuthentificated }) => {
4141
const data = await response.json();
4242
toaster.create({
4343
title: "Logout",
44-
description: data.message,
44+
description: `${data.message}!`,
4545
type: "success",
4646
duration: 4000,
4747
action: {
@@ -136,7 +136,7 @@ const CardWithForm = ({ isAuthentificated }) => {
136136
</DialogFooter>
137137
</DialogContent>
138138
</DialogRoot>
139-
<Toaster />
139+
<toaster />
140140
</div>
141141
) : (
142142
<DialogRoot placement="center" id={"authDialog"}>

‎src/components/Navbar.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,15 @@ const Navbar = () => {
118118
<MenuItem value="new-txt2" as="a" href="/home">
119119
Home
120120
</MenuItem>
121-
<MenuItem value="new-txt">About Us</MenuItem>
121+
<MenuItem value="new-txt" as="a" href="/about-us">About Us</MenuItem>
122122
</MenuContent>
123123
</MenuRoot>
124124
</div>
125125
<div className="menu">
126126
<a className="menulink" href="/home">
127127
HOME
128128
</a>
129-
<a className="menulink" href="">
129+
<a className="menulink" href="/about-us">
130130
ABOUT US
131131
</a>
132132
<LoginAuth isAuthentificated={isAuthentificated} />

‎src/styles/AboutUs.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.about-us-container{
2+
margin-top: 140px;
3+
padding: 0 40px;
4+
display: flex;
5+
flex-direction: column;
6+
}
7+
.about-us-img-container{
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
margin-top: 30px;
12+
}
13+
.about-us-img{
14+
width: 80%;
15+
transition: transform 0.5s ease;
16+
border-radius: 22px;
17+
box-shadow: 4px 4px 10px rgba(99, 233, 238, 0.5); /* Horizontal, Vertical, Blur, Spread */
18+
19+
}
20+
.about-us-img:hover {
21+
transform: scale(1.04); /* Zoom in */
22+
}
23+
.about-us-header{
24+
font-size: 48px;
25+
font-weight: 600;
26+
text-align: center;
27+
}
28+
.about-us-header-below{
29+
font-size: 20px;
30+
text-align: center;
31+
font-weight: 600;
32+
}
33+
.about-us-text-area{
34+
max-width: 770px;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
margin: 0 auto;
39+
flex-direction: column;
40+
font-size: 20px;
41+
line-height: 40px;
42+
font-weight: 400;
43+
}
44+
.our-values-header{
45+
text-align: left;
46+
font-weight: 600;
47+
font-size: 30px;
48+
}
49+
.grid-box{
50+
margin-bottom: 30px;
51+
}
52+
.ctd-logo{
53+
margin-top: 20px;
54+
}
55+
.our-values-below{
56+
text-decoration: underline;
57+
}
58+
@media (max-width: 768px) {
59+
.about-us-container{
60+
margin-top: 120px;
61+
text-align: center;
62+
}
63+
.our-values-below{
64+
line-height: 30px;
65+
}
66+
.our-values-header{
67+
text-align: center;
68+
font-weight: 600;
69+
font-size: 30px;
70+
}
71+
.about-us-img{
72+
width: 100%;
73+
}
74+
}

‎src/views/AboutUsPage.jsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from 'react';
2+
import "../styles/AboutUs.css";
3+
import { Box, VStack, Heading, Text } from "@chakra-ui/react";
4+
import { Separator } from "@chakra-ui/react"
5+
import { FaTools, FaShareAlt, FaSearch, FaRedo } from "react-icons/fa"; // Example icons
6+
import { Grid, GridItem, Icon } from "@chakra-ui/react";
7+
8+
9+
const AboutUs = () => {
10+
const values = [
11+
{
12+
title: "Build",
13+
description:
14+
"Lay the foundation by creating innovative projects that solve real-world problems and inspire learning.",
15+
icon: FaTools,
16+
},
17+
{
18+
title: "Share",
19+
description:
20+
"Exchange ideas and solutions by sharing knowledge and projects with the community to foster collaboration.",
21+
icon: FaShareAlt,
22+
},
23+
{
24+
title: "Review",
25+
description:
26+
"Provide constructive feedback to refine ideas and approaches, ensuring quality and innovation.",
27+
icon: FaSearch,
28+
},
29+
{
30+
title: "Repeat",
31+
description:
32+
"Iterate on processes and projects to continuously improve and achieve even greater results.",
33+
icon: FaRedo,
34+
},
35+
];
36+
37+
38+
39+
return(
40+
<div className='about-us-container'>
41+
<p className='about-us-header'>About Us</p>
42+
<p className='about-us-header-below'>Build. Share. Review. Repeat.</p>
43+
<div className='about-us-img-container'>
44+
<img className="about-us-img" src="./images/hh-team8.png"></img>
45+
</div>
46+
<div className='about-us-text-area'>
47+
<Text fontSize="lg" marginBottom="4" marginTop='40px'>
48+
Welcome to our collaborative project-sharing platform! Our mission is
49+
to empower developers, designers, and creatives to showcase their
50+
work, get feedback, and inspire others in the community.
51+
</Text>
52+
53+
<Box textAlign="center" py={5} px={4} className='grid-box'>
54+
<Heading className='our-values-header'>
55+
Our Values
56+
</Heading>
57+
<Text maxW="700px" mx="auto" mb={10} color="gray.500" fontSize='16px' className='our-values-below'>
58+
Our process revolves around these core principles: Build, Share, Review, and Repeat.
59+
</Text>
60+
<Grid
61+
templateColumns={{ base: "1fr", lg: "repeat(2, 1fr)" }}
62+
gap={6}
63+
>
64+
{values.map((value, index) => (
65+
<GridItem
66+
key={index}
67+
bg="blue.50"
68+
borderRadius="22px"
69+
p={6}
70+
boxShadow="md"
71+
transition="all 0.3s"
72+
_hover={{ transform: "translateY(-5px)", boxShadow: "lg" }}
73+
>
74+
<VStack spacing={4} align="center">
75+
<Icon fontSize="4xl" color="blue.500">
76+
<value.icon />
77+
</Icon>
78+
<Heading as="h3" size="md" color="blue.700">
79+
{value.title}
80+
</Heading>
81+
<Text color="gray.600" textAlign={{lg: "left"}} fontSize='18px' lineHeight='30px' className='box-text'>
82+
{value.description}
83+
</Text>
84+
</VStack>
85+
</GridItem>
86+
))}
87+
</Grid>
88+
</Box>
89+
<Text fontSize="lg" marginBottom="4">
90+
With features like project discovery, real-time commenting, and
91+
dynamic engagement, we aim to create a vibrant ecosystem where ideas
92+
thrive and collaborations flourish.
93+
</Text>
94+
<Text fontSize="lg" marginBottom="8">
95+
Our team is passionate about building tools that connect people and
96+
drive innovation. Join us in making this platform a hub for creative
97+
expression and growth.
98+
</Text>
99+
<Separator size="xs" marginBottom='20px'/>
100+
<Text fontSize="lg" marginBottom="8">
101+
Ready to make an impact? Join us today, share your project, and connect with like-minded creators shaping the future! 🚀
102+
</Text>
103+
</div>
104+
<footer>
105+
<img className="ctd-logo" src="./images/ctd-logo.png" alt="CTD Logo" />
106+
</footer>
107+
</div>
108+
)
109+
}
110+
export default AboutUs;

0 commit comments

Comments
 (0)