generated from Code-the-Dream-School/react-node-practicum-front-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #45 from Code-the-Dream-School/about-us
About us
- Loading branch information
Showing
7 changed files
with
195 additions
and
8 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| .about-us-container{ | ||
| margin-top: 140px; | ||
| padding: 0 40px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .about-us-img-container{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-top: 30px; | ||
| } | ||
| .about-us-img{ | ||
| width: 80%; | ||
| transition: transform 0.5s ease; | ||
| border-radius: 22px; | ||
| box-shadow: 4px 4px 10px rgba(99, 233, 238, 0.5); /* Horizontal, Vertical, Blur, Spread */ | ||
|
|
||
| } | ||
| .about-us-img:hover { | ||
| transform: scale(1.04); /* Zoom in */ | ||
| } | ||
| .about-us-header{ | ||
| font-size: 48px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| } | ||
| .about-us-header-below{ | ||
| font-size: 20px; | ||
| text-align: center; | ||
| font-weight: 600; | ||
| } | ||
| .about-us-text-area{ | ||
| max-width: 770px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 0 auto; | ||
| flex-direction: column; | ||
| font-size: 20px; | ||
| line-height: 40px; | ||
| font-weight: 400; | ||
| } | ||
| .our-values-header{ | ||
| text-align: left; | ||
| font-weight: 600; | ||
| font-size: 30px; | ||
| } | ||
| .grid-box{ | ||
| margin-bottom: 30px; | ||
| } | ||
| .ctd-logo{ | ||
| margin-top: 20px; | ||
| } | ||
| .our-values-below{ | ||
| text-decoration: underline; | ||
| } | ||
| @media (max-width: 768px) { | ||
| .about-us-container{ | ||
| margin-top: 120px; | ||
| text-align: center; | ||
| } | ||
| .our-values-below{ | ||
| line-height: 30px; | ||
| } | ||
| .our-values-header{ | ||
| text-align: center; | ||
| font-weight: 600; | ||
| font-size: 30px; | ||
| } | ||
| .about-us-img{ | ||
| width: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React from 'react'; | ||
| import "../styles/AboutUs.css"; | ||
| import { Box, VStack, Heading, Text } from "@chakra-ui/react"; | ||
| import { Separator } from "@chakra-ui/react" | ||
| import { FaTools, FaShareAlt, FaSearch, FaRedo } from "react-icons/fa"; // Example icons | ||
| import { Grid, GridItem, Icon } from "@chakra-ui/react"; | ||
|
|
||
|
|
||
| const AboutUs = () => { | ||
| const values = [ | ||
| { | ||
| title: "Build", | ||
| description: | ||
| "Lay the foundation by creating innovative projects that solve real-world problems and inspire learning.", | ||
| icon: FaTools, | ||
| }, | ||
| { | ||
| title: "Share", | ||
| description: | ||
| "Exchange ideas and solutions by sharing knowledge and projects with the community to foster collaboration.", | ||
| icon: FaShareAlt, | ||
| }, | ||
| { | ||
| title: "Review", | ||
| description: | ||
| "Provide constructive feedback to refine ideas and approaches, ensuring quality and innovation.", | ||
| icon: FaSearch, | ||
| }, | ||
| { | ||
| title: "Repeat", | ||
| description: | ||
| "Iterate on processes and projects to continuously improve and achieve even greater results.", | ||
| icon: FaRedo, | ||
| }, | ||
| ]; | ||
|
|
||
|
|
||
|
|
||
| return( | ||
| <div className='about-us-container'> | ||
| <p className='about-us-header'>About Us</p> | ||
| <p className='about-us-header-below'>Build. Share. Review. Repeat.</p> | ||
| <div className='about-us-img-container'> | ||
| <img className="about-us-img" src="./images/hh-team8.png"></img> | ||
| </div> | ||
| <div className='about-us-text-area'> | ||
| <Text fontSize="lg" marginBottom="4" marginTop='40px'> | ||
| Welcome to our collaborative project-sharing platform! Our mission is | ||
| to empower developers, designers, and creatives to showcase their | ||
| work, get feedback, and inspire others in the community. | ||
| </Text> | ||
|
|
||
| <Box textAlign="center" py={5} px={4} className='grid-box'> | ||
| <Heading className='our-values-header'> | ||
| Our Values | ||
| </Heading> | ||
| <Text maxW="700px" mx="auto" mb={10} color="gray.500" fontSize='16px' className='our-values-below'> | ||
| Our process revolves around these core principles: Build, Share, Review, and Repeat. | ||
| </Text> | ||
| <Grid | ||
| templateColumns={{ base: "1fr", lg: "repeat(2, 1fr)" }} | ||
| gap={6} | ||
| > | ||
| {values.map((value, index) => ( | ||
| <GridItem | ||
| key={index} | ||
| bg="blue.50" | ||
| borderRadius="22px" | ||
| p={6} | ||
| boxShadow="md" | ||
| transition="all 0.3s" | ||
| _hover={{ transform: "translateY(-5px)", boxShadow: "lg" }} | ||
| > | ||
| <VStack spacing={4} align="center"> | ||
| <Icon fontSize="4xl" color="blue.500"> | ||
| <value.icon /> | ||
| </Icon> | ||
| <Heading as="h3" size="md" color="blue.700"> | ||
| {value.title} | ||
| </Heading> | ||
| <Text color="gray.600" textAlign={{lg: "left"}} fontSize='18px' lineHeight='30px' className='box-text'> | ||
| {value.description} | ||
| </Text> | ||
| </VStack> | ||
| </GridItem> | ||
| ))} | ||
| </Grid> | ||
| </Box> | ||
| <Text fontSize="lg" marginBottom="4"> | ||
| With features like project discovery, real-time commenting, and | ||
| dynamic engagement, we aim to create a vibrant ecosystem where ideas | ||
| thrive and collaborations flourish. | ||
| </Text> | ||
| <Text fontSize="lg" marginBottom="8"> | ||
| Our team is passionate about building tools that connect people and | ||
| drive innovation. Join us in making this platform a hub for creative | ||
| expression and growth. | ||
| </Text> | ||
| <Separator size="xs" marginBottom='20px'/> | ||
| <Text fontSize="lg" marginBottom="8"> | ||
| Ready to make an impact? Join us today, share your project, and connect with like-minded creators shaping the future! 🚀 | ||
| </Text> | ||
| </div> | ||
| <footer> | ||
| <img className="ctd-logo" src="./images/ctd-logo.png" alt="CTD Logo" /> | ||
| </footer> | ||
| </div> | ||
| ) | ||
| } | ||
| export default AboutUs; |