From afa18e7d76337a9bc48c1ac459ba8ecc2f6139cc Mon Sep 17 00:00:00 2001 From: Brandon Wong Date: Sat, 8 Feb 2025 18:28:06 -0800 Subject: [PATCH 1/3] Mobile view for sponsors (#43) * Mobile view for sponsors * Reverted z index change --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../_components/Sponsors/Sponsors.module.scss | 58 ++++++++++++++++++- .../_components/Sponsors/Sponsors.tsx | 24 ++++++++ .../_components/Marquee/Logo.module.scss | 12 ++-- .../_components/Marquee/Marquee.module.scss | 12 +++- .../Sponsors/SponsorsCarousel.module.scss | 6 ++ app/(pages)/(index-page)/page.module.scss | 4 -- app/(pages)/(index-page)/page.tsx | 2 +- public/Sponsors/characters/BottomCow.svg | 34 +++++++++++ public/Sponsors/characters/TopGrass.svg | 7 +++ 9 files changed, 144 insertions(+), 15 deletions(-) create mode 100644 public/Sponsors/characters/BottomCow.svg create mode 100644 public/Sponsors/characters/TopGrass.svg diff --git a/app/(pages)/(index-page)/_components/Sponsors/Sponsors.module.scss b/app/(pages)/(index-page)/_components/Sponsors/Sponsors.module.scss index d59d01c..1da9ba3 100644 --- a/app/(pages)/(index-page)/_components/Sponsors/Sponsors.module.scss +++ b/app/(pages)/(index-page)/_components/Sponsors/Sponsors.module.scss @@ -1,12 +1,17 @@ +@import '@globals/styles/mixins.scss'; + .container { display: flex; - flex-direction: row; - justify-content: space-between; height: 1024px; width: 100%; background-color: var(--grass-background-dark); overflow-x: clip; position: relative; + + @include sm-desktop { + flex-direction: column; + height: 100%; + } } .topBlock { @@ -23,6 +28,42 @@ border-radius: 40px; } +.top { + display: none; + + @include sm-desktop { + display: flex; + z-index: 1; + + .grass { + position: absolute; + width: 1280px; + max-width: none; + height: auto; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: inherit; + } + } +} + +.bottom { + display: none; + + @include sm-desktop { + display: flex; + z-index: 1; + + .bottomCow { + position: absolute; + bottom: 0; + right: 0; + z-index: inherit; + } + } +} + .left { z-index: 1; @@ -103,6 +144,10 @@ z-index: inherit; } } + + @include sm-desktop { + display: none; + } } .right { @@ -175,12 +220,21 @@ z-index: inherit; } } + + @include sm-desktop { + display: none; + } } .sponsors { display: flex; align-items: center; background-color: var(--water-background); + z-index: 0; + + @include sm-desktop { + padding: 166px 0px 268px; + } } .sandTexture { diff --git a/app/(pages)/(index-page)/_components/Sponsors/Sponsors.tsx b/app/(pages)/(index-page)/_components/Sponsors/Sponsors.tsx index c6cf846..578d7a2 100644 --- a/app/(pages)/(index-page)/_components/Sponsors/Sponsors.tsx +++ b/app/(pages)/(index-page)/_components/Sponsors/Sponsors.tsx @@ -1,4 +1,5 @@ import Image from 'next/image'; + import Bunny from './_components/Bunny/Bunny'; import Cow from './_components/Cow/Cow'; import Ducky from './_components/Ducky/Ducky'; @@ -8,11 +9,24 @@ import RedFlower from 'public/Sponsors/characters/red-flower.svg'; import YellowFlower from 'public/Sponsors/characters/yellow-flower.svg'; import LeftGrass from 'public/Sponsors/characters/left-grass.svg'; import RightGrass from 'public/Sponsors/characters/right-grass.svg'; +import TopGrass from 'public/Sponsors/characters/TopGrass.svg'; +import BottomCow from 'public/Sponsors/characters/BottomCow.svg'; + import styles from './Sponsors.module.scss'; export default async function Sponsors() { return (
+
+ grass +
+
grass @@ -83,6 +97,16 @@ export default async function Sponsors() {
+ +
+ sleeping cow +
); } diff --git a/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Logo.module.scss b/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Logo.module.scss index b4fa4a3..7c867e8 100644 --- a/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Logo.module.scss +++ b/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Logo.module.scss @@ -1,3 +1,5 @@ +@import '@globals/styles/mixins.scss'; + .container { background: var(--card-background); border-radius: 10px; @@ -16,11 +18,11 @@ height: 250px; padding: 20px 40px; - // @mixin lg { - // width: 350px; - // height: 200px; - // padding: 30px 60px; - // } + @include phone { + width: 245px; + height: 140px; + padding: 10px 20px; + } } img { diff --git a/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Marquee.module.scss b/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Marquee.module.scss index 58fe8eb..6619664 100644 --- a/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Marquee.module.scss +++ b/app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Marquee.module.scss @@ -1,3 +1,5 @@ +@import '@globals/styles/mixins.scss'; + .marquee { --gap: 36px; --scroll-start: 0; @@ -16,9 +18,13 @@ hsl(0 0% 0% / 0) ); - &:hover .marqueeGroup { - animation-play-state: paused; - } + &:hover .marqueeGroup { + animation-play-state: paused; + } + + @include phone { + --gap: 20px + } } .marqueeGroup { diff --git a/app/(pages)/(index-page)/_components/Sponsors/_components/Sponsors/SponsorsCarousel.module.scss b/app/(pages)/(index-page)/_components/Sponsors/_components/Sponsors/SponsorsCarousel.module.scss index 668b480..c3c3178 100644 --- a/app/(pages)/(index-page)/_components/Sponsors/_components/Sponsors/SponsorsCarousel.module.scss +++ b/app/(pages)/(index-page)/_components/Sponsors/_components/Sponsors/SponsorsCarousel.module.scss @@ -1,3 +1,5 @@ +@import '@globals/styles/mixins.scss'; + .container{ display: flex; flex-direction: column; @@ -14,4 +16,8 @@ letter-spacing: 1px; margin-top: 2%; } + + @include phone { + gap: 10px; + } } diff --git a/app/(pages)/(index-page)/page.module.scss b/app/(pages)/(index-page)/page.module.scss index 8d12770..205fd61 100644 --- a/app/(pages)/(index-page)/page.module.scss +++ b/app/(pages)/(index-page)/page.module.scss @@ -1,8 +1,4 @@ .container { display: flex; flex-direction: column; -} - -.sponsors { - z-index: 5; } \ No newline at end of file diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 75548e2..eabb5b1 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -44,7 +44,7 @@ export default function Home() { -
+
diff --git a/public/Sponsors/characters/BottomCow.svg b/public/Sponsors/characters/BottomCow.svg new file mode 100644 index 0000000..37760ac --- /dev/null +++ b/public/Sponsors/characters/BottomCow.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Sponsors/characters/TopGrass.svg b/public/Sponsors/characters/TopGrass.svg new file mode 100644 index 0000000..41baffe --- /dev/null +++ b/public/Sponsors/characters/TopGrass.svg @@ -0,0 +1,7 @@ + + + + + + + From 19230eea830afa8f8b8a005879c8d74ea82f828b Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Sat, 8 Feb 2025 18:33:40 -0800 Subject: [PATCH 2/3] Feat/what is hackdavis (#38) * responsive for content, fixing texture * adjusting * responsive * linting --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../(index-page)/_components/SandCastle.tsx | 144 +++++++++--------- .../what_is_hackdavis/sand_hole_top.svg | 3 + 2 files changed, 75 insertions(+), 72 deletions(-) create mode 100644 public/images/what_is_hackdavis/sand_hole_top.svg diff --git a/app/(pages)/(index-page)/_components/SandCastle.tsx b/app/(pages)/(index-page)/_components/SandCastle.tsx index 59d90a8..5ebd851 100644 --- a/app/(pages)/(index-page)/_components/SandCastle.tsx +++ b/app/(pages)/(index-page)/_components/SandCastle.tsx @@ -7,6 +7,7 @@ import crab from '@public/images/what_is_hackdavis/crab.svg'; import sand_hole1 from '@public/images/what_is_hackdavis/sand_hole1.svg'; import sand_hole2 from '@public/images/what_is_hackdavis/sand_hole2.svg'; import sand_hole3 from '@public/images/what_is_hackdavis/sand_hole3.svg'; +// import sand_hole_top from '@public/images/what_is_hackdavis/sand_hole_top.svg'; import Image from 'next/image'; @@ -20,11 +21,78 @@ export default function SandCastle() { ); } +function SandCastleContent() { + return ( +
+
+ +
+
+
+
+ sandcastle +
+
+ froggy +
+
+
+
+ ); +} + +function WhatIsHackDavisText() { + return ( +
+

HackDavis

+

+ is one of the + largest collegiate hackathon in Califronia, where + over 950 students, creators, and leaders come together to{' '} + create for social good. +

+
+ ); +} + +function SandCastleBackground({ children }: { children: React.ReactNode }) { + return ( +
+
+ sand background + +
{children}
+
+
+ ); +} + function SandCastleTexture() { return (
-
-
+
+
shell
-
+
star
-
+
crab
@@ -76,71 +144,3 @@ function SandCastleTexture() {
); } - -function SandCastleContent() { - return ( -
-
- -
-
-
-
- sandcastle -
-
- froggy -
-
-
-
- ); -} - -function SandCastleBackground({ children }: { children: React.ReactNode }) { - return ( -
- {/* Medium sand layer */} -
- sand background - -
- {children} -
-
-
- ); -} - -function WhatIsHackDavis() { - return ( -
-

HackDavis

-

- is one of the - largest collegiate hackathon in Califronia, where - over 950 students, creators, and leaders come together to{' '} - create for social good. -

-
- ); -} diff --git a/public/images/what_is_hackdavis/sand_hole_top.svg b/public/images/what_is_hackdavis/sand_hole_top.svg new file mode 100644 index 0000000..de1c9df --- /dev/null +++ b/public/images/what_is_hackdavis/sand_hole_top.svg @@ -0,0 +1,3 @@ + + + From 1fdc808d27c6f09bad0b808ea5b828def1d57858 Mon Sep 17 00:00:00 2001 From: Haylie Tan <141064325+haylietan@users.noreply.github.com> Date: Sat, 8 Feb 2025 18:35:41 -0800 Subject: [PATCH 3/3] Fixed responsiveness of Director's section: "Feat/directors responsiveness" (#39) * Utilized mixins * Fixed scroll on mobile (phone) * Fixed responsiveness --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../Directors/Directors.module.scss | 287 +++++++++++++++++- .../_components/OurTeam/OurTeam.module.scss | 30 +- 2 files changed, 301 insertions(+), 16 deletions(-) diff --git a/app/(pages)/about-us/_components/Directors/Directors.module.scss b/app/(pages)/about-us/_components/Directors/Directors.module.scss index 815e1ba..4bbd8fa 100644 --- a/app/(pages)/about-us/_components/Directors/Directors.module.scss +++ b/app/(pages)/about-us/_components/Directors/Directors.module.scss @@ -1,4 +1,287 @@ -.container { +@import '/app/(pages)/_globals/styles/mixins.scss'; + +@include desktop { + .container { + background-color: #173A52; + color: white; + width: 100%; + padding: 15%; + // font-family: --font-inter; + font-weight: bold; + + .buttonsContainer { + display: flex; + } + + .text { + padding-bottom: 3.5%; + + + h1 { + font-size: 3rem; + } + + h3 { + font-size: 1rem; + } + + } + + .buttons { + background-color: #005271; + flex-direction: row; + display: flex; + border-radius: 40px; + padding-top: 1.5%; + padding-bottom: 1.5%; + margin-right: 2%; + margin-bottom: 5%; + color: #9EE7E5; + padding-left: 3%; + padding-right: 3%; + } + + .buttons:hover { + background-color: #9EE7E5; + cursor: pointer; + color: #005271; + } + + .team { + // background-color: pink; + border: 3px white solid; + display: flex; + gap: 20px; + justify-content: center; + + .profile { + display: flex; + flex-direction: column; + background-color: black; + padding: 5%; + text-align: left; + + h4 { + font-size: 1rem; + font-weight: 800; + } + } + } + } +} + +@include sm-desktop { + .container { + background-color: #173A52; + color: white; + width: 100%; + padding: 15%; + // font-family: --font-inter; + font-weight: bold; + + .buttonsContainer { + display: flex; + } + + .text { + padding-bottom: 3.5%; + + + h1 { + font-size: 3rem; + } + + h3 { + font-size: 1rem; + } + + } + + .buttons { + background-color: #005271; + flex-direction: row; + display: flex; + border-radius: 40px; + padding-top: 1.5%; + padding-bottom: 1.5%; + margin-right: 2%; + margin-bottom: 5%; + color: #9EE7E5; + padding-left: 3%; + padding-right: 3%; + } + + .buttons:hover { + background-color: #9EE7E5; + cursor: pointer; + color: #005271; + } + + .team { + // background-color: pink; + border: 3px white solid; + display: flex; + gap: 20px; + justify-content: center; + + .profile { + display: flex; + flex-direction: column; + background-color: black; + padding: 5%; + text-align: left; + + h4 { + font-size: 1rem; + font-weight: 800; + } + } + } + } +} + +@include tablet { + .container { + background-color: #173A52; + color: white; + width: 100%; + padding: 15%; + // font-family: --font-inter; + font-weight: bold; + + .buttonsContainer { + display: flex; + } + + .text { + padding-bottom: 3.5%; + + + h1 { + font-size: 3rem; + } + + h3 { + font-size: 1rem; + } + + } + + .buttons { + background-color: #005271; + flex-direction: row; + display: flex; + border-radius: 40px; + padding-top: 1.5%; + padding-bottom: 1.5%; + margin-right: 2%; + margin-bottom: 5%; + color: #9EE7E5; + padding-left: 3%; + padding-right: 3%; + } + + .buttons:hover { + background-color: #9EE7E5; + cursor: pointer; + color: #005271; + } + + .team { + // background-color: pink; + border: 3px white solid; + display: flex; + gap: 20px; + justify-content: center; + + .profile { + display: flex; + flex-direction: column; + background-color: black; + padding: 5%; + text-align: left; + + h4 { + font-size: 1rem; + font-weight: 800; + } + } + } + } +} + +@include phone { + .container { + background-color: #173A52; + color: white; + width: 100%; + padding: 15%; + // font-family: --font-inter; + font-weight: bold; + + .buttonsContainer { + display: flex; + } + + .text { + padding-bottom: 3.5%; + + + h1 { + font-size: 3rem; + } + + h3 { + font-size: 1rem; + } + + } + + .buttons { + background-color: #005271; + flex-direction: row; + display: flex; + border-radius: 40px; + padding-top: 1.5%; + padding-bottom: 1.5%; + margin-right: 2%; + margin-bottom: 5%; + color: #9EE7E5; + padding-left: 3%; + padding-right: 3%; + } + + .buttons:hover { + background-color: #9EE7E5; + cursor: pointer; + color: #005271; + } + + .team { + // background-color: pink; + border: 3px white solid; + display: flex; + gap: 20px; + justify-content: center; + + .profile { + display: flex; + flex-direction: column; + background-color: black; + padding: 5%; + text-align: left; + + h4 { + font-size: 1rem; + font-weight: 800; + } + } + } + } +} + +@include sm-phone { + .container { background-color: #173A52; color: white; width: 100%; @@ -65,6 +348,8 @@ } } } +} + // Image { // width: 50px; diff --git a/app/(pages)/about-us/_components/OurTeam/OurTeam.module.scss b/app/(pages)/about-us/_components/OurTeam/OurTeam.module.scss index e151c1a..48bab1d 100644 --- a/app/(pages)/about-us/_components/OurTeam/OurTeam.module.scss +++ b/app/(pages)/about-us/_components/OurTeam/OurTeam.module.scss @@ -12,13 +12,8 @@ $bg-color: #FFFFFF; justify-content: center; width: 100%; height: 100%; - max-width: 1440px; - padding-top: 4rem; - padding-bottom: 4rem; - padding-left: 10%; - padding-right: 10%; - - overflow: scroll; + // max-width: 1440px; + padding: 0% 13% 13% 13%; // border: 1px solid black; @@ -44,7 +39,7 @@ $bg-color: #FFFFFF; font-family: Metropolis; font-size: 16px; font-style: normal; - font-weight: 600; + font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 0.32px; } @@ -71,11 +66,11 @@ $bg-color: #FFFFFF; align-items: center; gap: 10px; border-radius: 100px; - background: #005271; + background: #DCE0E3; cursor: pointer; p{ - color: #FFFFFF; + color: #123041; text-align: center; font-family: "Metropolis"; font-size: 18px; @@ -86,10 +81,18 @@ $bg-color: #FFFFFF; } &.active{ - background: #9EE7E5; + display: flex; + flex-direction: row; + height: 48px; + padding: 12px 24px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 100px; + background: #123041; p{ - color: #005271; + color: #FFFFFF; text-align: center; font-family: "Metropolis"; font-size: 18px; @@ -100,9 +103,6 @@ $bg-color: #FFFFFF; } } } - - - } }