forked from HackDavis/hackdavis-hub
-
Notifications
You must be signed in to change notification settings - Fork 0
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 #39 from HackDavis/fix/about-us
About section fixed
- Loading branch information
Showing
8 changed files
with
124 additions
and
307 deletions.
There are no files selected for viewing
237 changes: 79 additions & 158 deletions
237
app/(pages)/about-us/_components/About/About.module.scss
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 |
|---|---|---|
| @@ -1,179 +1,100 @@ | ||
| @use 'app/(pages)/_globals/mixins'; | ||
|
|
||
| .hello-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| background: #FFF; | ||
| color: #123041; | ||
| font-family: "Metropolis"; | ||
| width: 100%; | ||
| max-width: 100%; | ||
| margin: 0; | ||
| min-height: 100vh; | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
|
|
||
| .h1 { | ||
| display: flex; | ||
| font-size: 3rem; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| letter-spacing: 0.06rem; | ||
| margin-bottom: 2rem; | ||
| margin-top: 6rem; | ||
| margin-left: 9.94rem; | ||
| margin-right: 9.94rem; | ||
| } | ||
|
|
||
|
|
||
| .tiles { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 2rem; | ||
| justify-content: center; | ||
| margin-left: 10.94rem; | ||
| margin-right: 10.94rem; | ||
| .content { | ||
| width: fit-content; | ||
| margin: 96px 0px 96px 0px; | ||
|
|
||
| @include mixins.sm-desktop { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| width: min-content; | ||
| margin: 96px 32px 96px 32px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .inclusivity { | ||
| width: 21.375rem; | ||
| height: 21.375rem; | ||
| flex-shrink: 0; | ||
| border-radius: 0.625rem; | ||
| background: #9EE7E5; | ||
| position: relative; | ||
| } | ||
|
|
||
| .inclusivity_title { | ||
| margin-top: 1rem; | ||
| margin-left: 1rem; | ||
| width: 11.9375rem; | ||
| font-size: 1.5rem; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| letter-spacing: 0.03rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .inclusivity_text { | ||
| width: 17.375rem; | ||
| .header { | ||
| color: #123041; | ||
| font-size: 1rem; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 150%; | ||
| letter-spacing: 0.02rem; | ||
| margin-top: 1rem; | ||
| margin-left: 1rem; | ||
| margin-right: 2rem; | ||
| } | ||
|
|
||
| .inclusivity_cow { | ||
| width: 100%; | ||
| height: 100%; | ||
| flex-shrink: 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| bottom: 0; | ||
| } | ||
|
|
||
|
|
||
| .Handson { | ||
| width: 21.375rem; | ||
| height: 21.375rem; | ||
| flex-shrink: 0; | ||
| border-radius: 0.625rem; | ||
| background: #C2E567; | ||
| position: relative; | ||
| } | ||
|
|
||
| .Handson_title { | ||
| margin-top: 1rem; | ||
| margin-left: 1rem; | ||
| width: 15.6875rem; | ||
| font-size: 1.5rem; | ||
| font-size: 48px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| letter-spacing: 0.03rem; | ||
| margin-bottom: 1rem; | ||
| letter-spacing: 0.96px; | ||
| margin-bottom: 32px; | ||
| text-wrap: wrap; | ||
| } | ||
|
|
||
| .Handson_text { | ||
| color: #000; | ||
| font-size: 1rem; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 150%; | ||
| letter-spacing: 0.02rem; | ||
| margin-top: 1rem; | ||
| margin-left: 1rem; | ||
| margin-right: 2rem; | ||
| } | ||
|
|
||
| .Handson_froggy { | ||
| width: 100%; | ||
| height: 100%; | ||
| flex-shrink: 0; | ||
| .tiles { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| bottom: 0; | ||
| } | ||
|
|
||
|
|
||
| .Impactful { | ||
| width: 21.375rem; | ||
| height: 21.375rem; | ||
| flex-shrink: 0; | ||
| border-radius: 0.625rem; | ||
| background: #FFC5AB; | ||
| position: relative; | ||
| width: fit-content; | ||
| gap: 32px; | ||
|
|
||
| .tile:nth-child(1) { | ||
| background: #9EE7E5; | ||
| } | ||
|
|
||
| .tile:nth-child(2) { | ||
| background: #C2E567; | ||
| } | ||
|
|
||
| .tile:nth-child(3) { | ||
| background: #FFC5AB; | ||
| } | ||
|
|
||
| @include mixins.sm-desktop { | ||
| width: max-content; | ||
| flex-direction: column; | ||
| gap: 48px; | ||
| } | ||
| } | ||
|
|
||
| .Impactful_title { | ||
| color: #123041; | ||
| margin-top: 1rem; | ||
| margin-left: 1rem; | ||
| width: 15.6875rem; | ||
| font-size: 1.5rem; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| letter-spacing: 0.03rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .Impactful_text { | ||
| color: #000; | ||
| font-size: 1rem; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 150%; | ||
| letter-spacing: 0.02rem; | ||
| margin-top: 1rem; | ||
| margin-left: 1rem; | ||
| margin-right: 2rem; | ||
| } | ||
|
|
||
| .Impactful_bunny { | ||
| width: 100%; | ||
| height: 100%; | ||
| flex-shrink: 0; | ||
| .tile { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| bottom: 0; | ||
| justify-content: space-between; | ||
| height: 342px; | ||
| width: 342px; | ||
| padding: 32px 32px 0px 32px; | ||
| flex-shrink: 0; | ||
| border-radius: 10px; | ||
|
|
||
| >div>h1 { | ||
| color: #123041; | ||
| font-size: 24px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| letter-spacing: 0.48px; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| >div>p { | ||
| color: #000; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 150%; | ||
| letter-spacing: 0.32px; | ||
| } | ||
|
|
||
| .image { | ||
| display: flex; | ||
| align-self: center; | ||
| width: 70%; | ||
| } | ||
|
|
||
| @include mixins.sm-desktop { | ||
| width: 100%; | ||
| max-width: 342px; | ||
| height: 342px; | ||
| min-width: fit-content; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,57 +1,53 @@ | ||
| import React from 'react'; | ||
| import styles from './About.module.scss'; // The name of your CSS module file | ||
| import AutoImage from '@components/AutoImage/AutoImage'; | ||
| import Image from 'next/image'; | ||
| import styles from './About.module.scss'; | ||
|
|
||
| const About = () => { | ||
| const aboutData = [ | ||
| { | ||
| title: 'Inclusivity', | ||
| text: 'We invite individuals of all backgrounds to learn new skills and grow in an inclusive environment.', | ||
| imagePath: '/about-us-icon/cow.png', | ||
| imageName: 'Cow', | ||
| }, | ||
| { | ||
| title: 'Hands-on learning', | ||
| text: 'No matter which prompt you choose, each project provides hands-on experience and an opportunity to explore a new discipline.', | ||
| imagePath: '/about-us-icon/froggy.png', | ||
| imageName: 'Froggy', | ||
| }, | ||
| { | ||
| title: 'Impactful projects', | ||
| text: 'Create meaningful, impactful, and innovative solutions that benefit local and global communities.', | ||
| imagePath: '/about-us-icon/bunny.png', | ||
| imageName: 'Bunny', | ||
| }, | ||
| ]; | ||
|
|
||
| export default function About() { | ||
| return ( | ||
| <div className={styles['hello-container']}> | ||
| <h1 className={styles.h1}>What we're all about</h1> | ||
| <div className={styles.tiles}> | ||
| <div className={styles.inclusivity}> | ||
| <div className={styles.inclusivity_title}>Inclusivity</div> | ||
| <div className={styles.inclusivity_text}> | ||
| We invite individuals of all backgrounds to learn new skills and | ||
| grow in an inclusive environment. | ||
| </div> | ||
| <div className={styles.inclusivity_cow}> | ||
| <AutoImage | ||
| src="/about-us-icon/cow.svg" | ||
| alt="Cow" | ||
| style={{ | ||
| maxWidth: | ||
| '100%' /* Ensure the image doesn't exceed the container's width */, | ||
| maxHeight: | ||
| '100%' /* Ensure the image doesn't exceed the container's height */, | ||
| objectFit: | ||
| 'contain' /* Maintain aspect ratio and fit within the container */, | ||
| marginTop: 'auto' /* Align to the bottom of the tile */, | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.Handson}> | ||
| <div className={styles.Handson_title}>Hands-on learning</div> | ||
| <div className={styles.Handson_text}> | ||
| No matter which prompt you choose, each project provides hands-on | ||
| experience and an opportunity to explore a new discipline. | ||
| </div> | ||
| <div className={styles.Handson_froggy}> | ||
| <AutoImage src="/about-us-icon/froggy.svg" alt="Froggy" /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.Impactful}> | ||
| <div className={styles.Impactful_title}>Impactful projects</div> | ||
| <div className={styles.Impactful_text}> | ||
| Create meaningful, impactful, and innovative solutions that benefit | ||
| local and global communities. | ||
| </div> | ||
| <div className={styles.Impactful_bunny}> | ||
| <AutoImage src="/about-us-icon/bunny.svg" alt="Bunny" /> | ||
| </div> | ||
| <div className={styles.content}> | ||
| <h1 className={styles.header}>What we're all about</h1> | ||
| <div className={styles.tiles}> | ||
| {aboutData.map((item) => ( | ||
| <div key={item.title} className={styles.tile}> | ||
| <div> | ||
| <h1>{item.title}</h1> | ||
| <p>{item.text}</p> | ||
| </div> | ||
| <div className={styles.image}> | ||
| <Image | ||
| src={item.imagePath} | ||
| width={100} | ||
| height={100} | ||
| layout="responsive" | ||
| alt={item.imageName} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default About; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.