diff --git a/public/assets/communities-images/DesignACM/Design1.jpg b/public/assets/communities-images/DesignACM/Design1.jpg new file mode 100644 index 0000000..dde9d66 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design1.jpg differ diff --git a/public/assets/communities-images/DesignACM/Design2.jpg b/public/assets/communities-images/DesignACM/Design2.jpg new file mode 100644 index 0000000..fd56124 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design2.jpg differ diff --git a/public/assets/communities-images/DesignACM/Design3.jpg b/public/assets/communities-images/DesignACM/Design3.jpg new file mode 100644 index 0000000..e4a0f79 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design3.jpg differ diff --git a/public/assets/communities-images/DesignACM/Design4.jpg b/public/assets/communities-images/DesignACM/Design4.jpg new file mode 100644 index 0000000..7e742a6 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design4.jpg differ diff --git a/public/assets/communities-images/Projects/Project2.png b/public/assets/communities-images/Projects/Project2.png new file mode 100644 index 0000000..3a53275 Binary files /dev/null and b/public/assets/communities-images/Projects/Project2.png differ diff --git a/public/assets/communities-images/Projects/Project3.png b/public/assets/communities-images/Projects/Project3.png new file mode 100644 index 0000000..a4fe29d Binary files /dev/null and b/public/assets/communities-images/Projects/Project3.png differ diff --git a/public/assets/communities-images/Projects/Project4.png b/public/assets/communities-images/Projects/Project4.png new file mode 100644 index 0000000..7dc8074 Binary files /dev/null and b/public/assets/communities-images/Projects/Project4.png differ diff --git a/public/assets/communities-images/Projects/ProjectShowcase.png b/public/assets/communities-images/Projects/ProjectShowcase.png new file mode 100644 index 0000000..3273c0e Binary files /dev/null and b/public/assets/communities-images/Projects/ProjectShowcase.png differ diff --git a/src/sections/community/Community.Suborgs.tsx b/src/sections/community/Community.Suborgs.tsx index f2036a0..c02806c 100644 --- a/src/sections/community/Community.Suborgs.tsx +++ b/src/sections/community/Community.Suborgs.tsx @@ -39,6 +39,11 @@ import SPACE2 from "public/assets/communities-images/SPACE/SPACE2.jpg"; import SPACE3 from "public/assets/communities-images/SPACE/SPACE3.jpg"; import SPACE4 from "public/assets/communities-images/SPACE/SPACE4.jpg"; +import Project1 from "public/assets/communities-images/Projects/ProjectShowcase.png"; +import Project2 from "public/assets/communities-images/Projects/Project2.png"; +import Project3 from "public/assets/communities-images/Projects/Project3.png"; +import Project4 from "public/assets/communities-images/Projects/Project4.png"; + import AI1 from "public/assets/communities-images/AI/AIOldTown.jpg"; import AI2 from "public/assets/communities-images/AI/AIBeach.jpg"; import AI3 from "public/assets/communities-images/AI/AIOldTown2.jpg"; @@ -54,6 +59,11 @@ import Hack2 from "public/assets/communities-images/Hack/Hack2.jpeg"; import Hack3 from "public/assets/communities-images/Hack/Hack3.png"; import Hack4 from "public/assets/communities-images/Hack/Hack4.png"; +import Design1 from "public/assets/communities-images/DesignACM/Design1.jpg"; +import Design2 from "public/assets/communities-images/DesignACM/Design2.jpg"; +import Design3 from "public/assets/communities-images/DesignACM/Design3.jpg"; +import Design4 from "public/assets/communities-images/DesignACM/Design4.jpg"; + import Image from "next/image"; @@ -128,7 +138,7 @@ const CommunitiesTitle: React.FC<{ case "Hack": return "Software Engineering"; case "Design": - return "Design"; + return "UI and UX Design"; case "Reach": return "Outreach"; case "Space": @@ -157,7 +167,11 @@ const CommunitiesTitle: React.FC<{ src={logo} alt={`ACM ${org}`} className={`community__sub-orgs__logo-card__logo ${((open || hover)) ? 'glow-on-hover' : ''}`} - onClick={() => setSelected(org)} + onClick={() => { + setSelected(org); + window.location.href = `#${org}`; + } + } style={{'--shadow-color': color, filter: (open || hover) ? ` ${color=='' ? `` : `drop-shadow(0 0 1rem ${color})`} ` : 'none'} as React.CSSProperties} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} @@ -198,7 +212,7 @@ const CommunityComponent: React.FC<{
{links.map((link, index) => ( - {link.alt} + {link.alt} ))}
@@ -390,8 +404,8 @@ const DesignCommunity: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( We uplift new designers and curious developers to learn how to think like a designer. As a growing community, we host events to teach designers to go from mapping out ideas to building innovative prototypes. We strive to allow designers to have better conversations with developers while making developers more conscious of design methods.

} - srcs={[]} - alts={[]} + srcs={[Design1.src, Design2.src, Design3.src, Design4.src]} + alts={["People brainstorming designs on sticky notes", "Design presenter presenting", "Design event wide shot", "Example design project"]} /> ); @@ -411,7 +425,7 @@ const DesignTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (or const BitByteTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string}> = ({ isMobile, open, setSelected, glowClassName }) => ( = ({ isMobile }) => ( = ({ isMobile }) => ( const OutreachTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string}> = ({ isMobile, open, setSelected, glowClassName }) => ( = ({ isMobile }) => ( = ({ isMobile }) => ( const ProjectsTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string,}> = ({ isMobile, open, setSelected, glowClassName }) => ( = ({ isMobile }) => ( = ({ isMobile }) => (

} - srcs={[]} + srcs={[Project1.src, Project2.src, Project3.src, Project4.src]} alts={[]} /> ); @@ -506,7 +520,7 @@ const ProjectsDescription: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( const SpaceTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string,}> = ({ isMobile, open, setSelected, glowClassName}) => ( = ({ isMobile }) => ( = ({ isMobile }) => { return ( <> {isMobile ? ( -
+ <>

setSelected("general")} @@ -571,21 +585,25 @@ const CommunitySubOrgs: React.FC<{ isMobile: boolean }> = ({ isMobile }) => { Communities

- {communityComponents[selected]} -
+
+ + + + + + + + +
+ ) : ( <>
@@ -643,19 +670,15 @@ const CommunitySubOrgs: React.FC<{ isMobile: boolean }> = ({ isMobile }) => {
- {selected.toLocaleLowerCase() === "ai" ? : null} - {selected.toLocaleLowerCase() === "cyber" ? : null } - {selected.toLocaleLowerCase() === "hack" ? : null} - {selected.toLocaleLowerCase() === "design" ? : null} + + + + + + + +
- -
- {selected.toLocaleLowerCase() === "bit byte" ? : null} - {selected.toLocaleLowerCase() === "reach" ? : null } - {selected.toLocaleLowerCase() === "projects" ? : null} - {selected.toLocaleLowerCase() === "space" ? : null} -
- )} diff --git a/src/sections/community/styles.scss b/src/sections/community/styles.scss index 87150d6..89d3b7c 100644 --- a/src/sections/community/styles.scss +++ b/src/sections/community/styles.scss @@ -70,6 +70,9 @@ } &__sub-orgs { &--mobile { + gap: 1rem; + flex-direction: column; + display: flex; h1 { font-weight: 500; font-size: 40px; @@ -85,11 +88,13 @@ display: flex; justify-content: center; padding: 1em; - > button { + > a { width: 90px; background: none; outline: none; border: none; + padding: .2rem 0.7rem; + cursor: pointer; img { width: 90px; margin: 0; @@ -115,7 +120,7 @@ margin-bottom: 10px; gap: 2.5rem; justify-content: space-between; - + align-items: center; .color_slide { @@ -129,12 +134,12 @@ left: 0; min-width: 70px; z-index: -1; + align-self: stretch; } &__header { display: flex; align-items: center; justify-content: flex-start; - gap: 1rem; flex-direction: column; img { height: 60px; @@ -158,6 +163,11 @@ &.mobile{ flex-direction: column; gap: 1rem; + + [class*="__desc-holder"]{ + flex-basis: auto; + background-color: red($color: #000000); + } } justify-content: center; width: 100%; @@ -171,6 +181,7 @@ justify-content: flex-start; height: fit-content; flex-grow: 1; + margin-right: 1rem; > h1 { font-weight: 500; font-size: 45px; @@ -188,14 +199,16 @@ flex-wrap: wrap; padding-top: 4px; width: 100%; + gap: 2rem; a { border: none; background-color: transparent; outline: none; - padding-right: 30px; + position: relative; + width: 40px; + img { - width: 40px; &:hover { transform: scale(1.05); transition: transform 0.2s; @@ -215,6 +228,7 @@ margin-bottom: 10px; align-items: center; + justify-content: center; max-width: 20%; @@ -232,19 +246,13 @@ flex-basis: 100%; } } - - > button { - background: none; - outline: none; - border: none; - padding: 0; - } + &__logo { min-width: 120px; - max-width: 194px; - width: 194px; + max-width: 160px; + width: 160px; margin: 36px 0; - margin-right: 46px; + margin-right: 16px; cursor: pointer; } @@ -252,6 +260,7 @@ display: flex; flex-direction: column; justify-content: center; + align-items: flex-start; max-width: 50%; height: fit-content; overflow-wrap: break-word; @@ -263,16 +272,18 @@ transform: scale(1.05); } } + h1 { + font-size: 1.8rem; + margin-bottom: 0.5rem; + text-align: left; + } + > div { max-width: 570px; display: flex; flex-direction: column; justify-content: flex-start; height: fit-content; - > h1 { - font-weight: 500; - font-size: 45px; - } > p { font-weight: 500; font-size: 18px; @@ -305,9 +316,9 @@ } @media only screen and (max-width: 812px) { - p { - padding: 3em !important; - } + // p { + // padding: 3em !important; + // } &__community-card { padding: 0 3em !important; .color_slide { @@ -465,6 +476,25 @@ .pinkbg { background-color: colors.$light-pink; } +.outreach-green { + color: colors.$outreach-green; +} +.outreach-greenbg { + background-color: colors.$light-outreach-green; +} +.blue { + color: colors.$blue; +} +.bluebg { + background-color: colors.$light-blue; +} +.grey { + color: colors.$dark-grey; +} +.greybg { + background-color: colors.$grey; +} + .spacer80px { height: 80px; } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index ce0ab80..d4fd055 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -6,6 +6,7 @@ $blue: #62b0ff; $turquoise: #51c0c0; $purple: #816dff; $pink: #e981a0; +$outreach-green: rgb(70, 155, 104); $white: #ffffff; $grey: #f8f8f8; @@ -21,3 +22,4 @@ $light-purple: rgba(129, 109, 255, 0.2); $light-orange: rgba(249, 168, 87, 0.2); $link-blue: #0659bc; $light-pink: rgba(233, 129, 160, 0.2); +$light-outreach-green: rgba(70, 155, 104, 0.2);