From 6869834a98e7935a97ffe5510aefb80e47b5ddd4 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 00:39:58 -0800 Subject: [PATCH 01/25] Do footer- needs mobile designs --- .../_components/Footer/Footer.module.scss | 341 ++++++++++-------- app/(pages)/_components/Footer/Footer.tsx | 160 ++++---- app/(pages)/_globals/styles/globals.scss | 3 + public/Footer/grass.svg | 17 + 4 files changed, 295 insertions(+), 226 deletions(-) create mode 100644 public/Footer/grass.svg diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss index fd1850b..3c5497e 100644 --- a/app/(pages)/_components/Footer/Footer.module.scss +++ b/app/(pages)/_components/Footer/Footer.module.scss @@ -1,203 +1,246 @@ -$footer-color: rgba(18, 38, 55, 1); +// this doesnt seem to like the globals?? $brand-icon-color: white; +$grass-background-dark: #7FB732; // css styling for the desktop view .container { width: 100%; - min-height: 240px; + height: calc(435/1440*100vw - 20px); display: flex; - flex-direction: row; - background: $footer-color; - align-items: center; - justify-content: space-evenly; - padding-top: 30px; - padding-bottom: 20px; - gap: 10px; - - .hackdavisLogo { - display: flex; - flex-direction: row; - align-items: center; - gap: 23.48px; + flex-direction: column; + background: $grass-background-dark; + + .footer_grass{ + position: relative; + top: -40px; + width: 100%; + aspect-ratio: calc(1440/435); + z-index: 5; - .hdLogoWhite { - height: 72px; - width: 72px; + > img { + width: 100%; } - } -} + } - .socialContent { + .contentContainer{ + position: relative; + min-height: 240px; + max-height: 400px; display: flex; - flex-direction: column; - gap: 10px; - width: 27vw; + flex-direction: row; align-items: center; - - .brandIcons { + justify-content: space-evenly; + top: -320px; + gap: 10px; + + .hackdavisLogo { display: flex; flex-direction: row; - justify-content: space-between; align-items: center; - width: 100%; - max-width: 420px; - padding-top: 10px; + gap: 23.48px; - .singleIcon { // used for most of the brand icons - max-width: 30px; - width: 59%; - color:$brand-icon-color; - } - .mediumIcon { // used for most of the brand icons - max-width: 40px; - width: 59%; - color:$brand-icon-color; - } - .discordIcon { // used for most of the brand icons - max-width: 40px; - width: 59%; - color:$brand-icon-color; + .hdLogoWhite { + height: 72px; + width: 72px; } + } + } - .fbIcon { // fb icon is larger than the rest so it needs smaller size - max-width: 17px; - width: 7%; - color:$brand-icon-color; + .socialContent { + display: flex; + flex-direction: column; + gap: 10px; + width: 27vw; + align-items: center; + + .brandIcons { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 420px; + padding-top: 10px; + + .singleIcon { // used for most of the brand icons + max-width: 30px; + width: 59%; + color:$brand-icon-color; + } + .mediumIcon { // used for most of the brand icons + max-width: 40px; + width: 59%; + color:$brand-icon-color; + } + .discordIcon { // used for most of the brand icons + max-width: 40px; + width: 59%; + color:$brand-icon-color; + } + + .fbIcon { // fb icon is larger than the rest so it needs smaller size + max-width: 17px; + width: 7%; + color:$brand-icon-color; + } + } + + .copyright { + font-family: 'Metropolis'; + color:white; + font-size: 14px; } } - - .copyright { - font-family: 'Metropolis'; + .arrowToTop { + display: flex; + flex-direction: row; color:white; - font-size: 14px; - } - } - .arrowToTop { - display: flex; - flex-direction: row; - color:white; - gap: 8px; - align-items: center; - cursor: pointer; - transition: transform 0.2s ease-in-out; - - &:hover{ - transform: scale(1.1); + gap: 8px; + align-items: center; + cursor: pointer; + transition: transform 0.2s ease-in-out; + + &:hover{ + transform: scale(1.1); + } + + .backToTopText { + font-size: 16px; + font-family: 'Metropolis'; + font-family: 'Metropolis'; + } } + } - .backToTopText { - font-size: 16px; - font-family: 'Metropolis'; - font-family: 'Metropolis'; - } - } + @media (max-width: 870px) { // css styling for mobile view + // TODO: Fix Mobile Styling .container { - position: relative; width: 100%; min-height: 188px; + height: calc(435/1440*100vw - 20px); display: flex; flex-direction: column; - background: $footer-color; - align-items: center; - justify-content: space-around; - padding-top: 30px; - padding-bottom: 30px; - gap: 19.54px; - - .hackdavisLogo { - display: flex; - flex-direction: row; - align-items: center; - gap: 23.48px; - margin-top: 30px; + background: $grass-background-dark; - .hdLogoWhite { - height: 72px; - width: 72px; - } - .hdMottoWhite { - height: 55px; - width: 176px; - } + .footer_grass{ + position: relative; + top: -30px; + width: 100%; + aspect-ratio: calc(1440/435); + z-index: 5; + > img { + width: 100%; + } } - .socialContent { + .contentContainer{ + position: relative; + width: 100%; + min-height: 188px; display: flex; flex-direction: column; - gap: 10px; - width: 50vw; align-items: center; - - .brandIcons { + justify-content: space-around; + padding-top: 55px; + padding-bottom: 30px; + gap: 10px; + z-index: 6; + + .hackdavisLogo { display: flex; flex-direction: row; - justify-content: space-evenly; align-items: center; - width: 100%; - max-width: 420px; - padding-top: 10px; - - .singleIcon { // used for most of the brand icons - max-width: 30px; - width: 8%; - color:$brand-icon-color; - - } + gap: 23.48px; + margin-top: 30px; - .mediumIcon { // used for most of the brand icons - max-width: 40px; - width: 11%; - color:$brand-icon-color; + .hdLogoWhite { + height: 72px; + width: 72px; } - .discordIcon { // used for most of the brand icons - max-width: 40px; - width: 11%; - color:$brand-icon-color; + .hdMottoWhite { + height: 55px; + width: 176px; } - - .fbIcon { // fb icon is larger than the rest so it needs smaller size - max-width: 17px; - width: 5%; - color:$brand-icon-color; + + } + + .socialContent { + display: flex; + flex-direction: column; + gap: 10px; + width: 50vw; + align-items: center; + + .brandIcons { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + width: 100%; + max-width: 420px; + padding-top: 10px; + + .singleIcon { // used for most of the brand icons + max-width: 30px; + width: 8%; + color:$brand-icon-color; + + } + + .mediumIcon { // used for most of the brand icons + max-width: 40px; + width: 11%; + color:$brand-icon-color; + } + .discordIcon { // used for most of the brand icons + max-width: 40px; + width: 11%; + color:$brand-icon-color; + } + + .fbIcon { // fb icon is larger than the rest so it needs smaller size + max-width: 17px; + width: 5%; + color:$brand-icon-color; + } + } + + .copyright { + font-family: 'Metropolis'; + color:white; + font-size: 8px; + margin-top: 25px } } - .copyright { - font-family: 'Metropolis'; + .arrowToTop { + position: absolute; + top: 150px; + right: 31px; + display: flex; + flex-direction: row; color:white; - font-size: 8px; - } - } - - .arrowToTop { - position: absolute; - top: 18px; - right: 31px; - display: flex; - flex-direction: row; - color:white; - gap: 8px; - align-items: center; - cursor: pointer; - transition: transform 0.2s ease-in-out; - font-size: 1px; - margin-top: 2%; - - margin-top: 2%; - + gap: 8px; + align-items: center; + cursor: pointer; + transition: transform 0.2s ease-in-out; + font-size: 1px; + margin-top: 2%; - &:hover{ - transform: scale(1.1); - } + &:hover{ + transform: scale(1.1); + } - .backToTopText { - font-size: 12px; + .backToTopText { + font-size: 12px; + } } } + } } diff --git a/app/(pages)/_components/Footer/Footer.tsx b/app/(pages)/_components/Footer/Footer.tsx index d83ea7e..1843689 100644 --- a/app/(pages)/_components/Footer/Footer.tsx +++ b/app/(pages)/_components/Footer/Footer.tsx @@ -11,6 +11,7 @@ import { } from '@fortawesome/free-brands-svg-icons'; import Image from 'next/image'; import { config } from '@fortawesome/fontawesome-svg-core'; +import footerGrass from '/public/Footer/grass.svg'; config.autoAddCss = false; const scrollToTop = () => { @@ -20,85 +21,90 @@ const scrollToTop = () => { export default function Footer() { return ( ); diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss index 53a8010..07f2cab 100644 --- a/app/(pages)/_globals/styles/globals.scss +++ b/app/(pages)/_globals/styles/globals.scss @@ -76,6 +76,9 @@ --navbar-top-spacing: 55px; --navbar-height: 50px; --navbar-item-spacing: 48px; + + /* Footer Styles */ + --brand-icon-color: white; } * { diff --git a/public/Footer/grass.svg b/public/Footer/grass.svg new file mode 100644 index 0000000..73b9465 --- /dev/null +++ b/public/Footer/grass.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From a28424cb06fb70fd5c34cfbe98102e97389a1a7a Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 13:39:00 -0800 Subject: [PATCH 02/25] Mostly done --- .../_components/BigVinyl/BigVinyl.module.scss | 223 ++++++++++++++++++ .../_components/BigVinyl/BigVinyl.tsx | 69 ++++++ app/(pages)/(index-page)/page.tsx | 8 +- .../_components/Footer/Footer.module.scss | 24 +- public/BigVinyl/CloudBottom.svg | 3 + public/BigVinyl/CloudBottomDim.svg | 3 + public/BigVinyl/CloudCenter.svg | 3 + public/BigVinyl/CloudTop.svg | 3 + public/BigVinyl/Vinyl.svg | 34 +++ 9 files changed, 354 insertions(+), 16 deletions(-) create mode 100644 app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss create mode 100644 app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx create mode 100644 public/BigVinyl/CloudBottom.svg create mode 100644 public/BigVinyl/CloudBottomDim.svg create mode 100644 public/BigVinyl/CloudCenter.svg create mode 100644 public/BigVinyl/CloudTop.svg create mode 100644 public/BigVinyl/Vinyl.svg diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss new file mode 100644 index 0000000..02b70a6 --- /dev/null +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -0,0 +1,223 @@ +.container { + position: relative; + height: calc((940 / 1440) * 50vw + 200px); + top: -200px; + //bottom: calc(1 * (940 /(2 * 1440) * 100vw + 20px)); + background: var(--sky-background); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 100%; + //padding: 20px; + z-index: 1; + overflow: hidden; + } + + .rowTop { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + height: calc((328/1440 * 100vw) - 40px); + } + .rowBottom { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + position: relative; + } + + .vinylRow { + display: flex; + //justify-content: center; + align-items: flex-start; + position: relative; + width: 0; + } + + .bigVinyl { + top: 0; + left: 50%; + transform: translateX(-50%) translateY(-20%); + height: calc(940 / 1440 * 100vw); + aspect-ratio: 1; + z-index: 2; + } + + .rowMiddle { + // display: flex; + // flex-direction: row; + // justify-content: center; + width: 100%; + height: calc(248/1440 * 100vw); + padding-left: calc(74/1440 * 100vw); + + .cloudCenter { + left: 50%; + transform: translateX(-1%); + aspect-ratio: calc(842/248); + width: calc(842/1440 * 100vw); + //height: calc(248/1440 * 100vw); + + + > img { + width: 100%; + height: 100%; + } + } + + } + + .cloudsTopLeft { + position: relative; + left: 50%; + transform: translateX(-125%); + + .cloudsTopLeft_topLayer { + // for 1440px, width = 1069, height = 328 + position: relative; + aspect-ratio: calc(1069/328); + width: calc(1069/1440 * 100vw); + top: 40px; + z-index: 2; + > img { + width: 100%; + height: 100%; + + } + + } + + .cloudsTopLeft_bottomLayer { + // for 1440px, width = 1117, height = 339 + position: relative; + aspect-ratio: calc(1117/339); + width: calc(1117/1440 * 100vw); + z-index: 1; + top: calc((-1 * 328/1440 * 100vw)); + > img { + width: 100%; + height: 100%; + opacity: calc(5/6); + } + } + } + + .cloudsTopRight { + position: relative; + left: 50%; + transform: translateX(-70%); + + .cloudsTopRight_topLayer { + // for 1440px, width = 1069, height = 328 + position: relative; + aspect-ratio: calc(1069/328); + width: calc(1069/1440 * 100vw); + z-index: 2; + transform: scaleX(-1); + top: 37px; + + > img { + width: 100%; + height: 100%; + } + } + + .cloudsTopRight_bottomLayer { + // for 1440px, width = 1117, height = 339 + position: relative; + aspect-ratio: calc(1117/339); + width: calc(1117/1440 * 100vw); + z-index: 1; + top: calc((-1 * 328/1440 * 100vw)); + right: 50px; + transform: scaleX(-1); + z-index: 1; + + > img { + width: 100%; + height: 100%; + opacity: calc(5/6); + } + } + } + + + .cloudsBottomLeft{ + position: relative; + left: 50%; + transform: translateX(-145%); + + .cloudsBottomLeft_topLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: 37px; + z-index: 5; + + > img { + width: 100%; + height: 100%; + } + } + + .cloudsBottomLeft_bottomLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + z-index: 1; + top: calc((-1 * 234/1440 * 100vw)); + + > img { + width: 100%; + height: 100%; + } + } + } + + + .cloudsBottomRight { + position: relative; + left: 50%; + transform: translateX(-65%); + + .cloudsBottomRight_topLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: 36px; + z-index: 5; + transform: scaleX(-1) translateX(-3%); + + > img { + width: 100%; + height: 100%; + } + } + + .cloudsBottomRight_bottomLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: calc((-1 * 234/1440 * 100vw)); + z-index: 1; + + > img { + width: 100%; + height: 100%; + opacity: 60%; + } + } + } + + + + + + \ No newline at end of file diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx new file mode 100644 index 0000000..fdb9c24 --- /dev/null +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx @@ -0,0 +1,69 @@ +'use client'; +import styles from './BigVinyl.module.scss'; +import Image from 'next/image'; + +import cloudBottom from '/public/BigVinyl/CloudBottom.svg'; +import cloudBottomDim from '/public/BigVinyl/CloudBottomDim.svg'; +import cloudCenter from '/public/BigVinyl/CloudCenter.svg'; +import cloudTop from '/public/BigVinyl/cloudTop.svg'; +import vinyl from '/public/BigVinyl/Vinyl.svg'; + +export default function BigVinyl() { + return ( +
+ {/* First Row */} +
+
+
+ Clouds Top Left Layer 1 +
+
+ Clouds Top Left Layer 2 +
+
+
+
+ Clouds Top Right Layer 1 +
+
+ Clouds Top Right Layer 2 +
+
+
+ + {/* Second Row */} +
+
+ center cloud +
+
+ + {/* Third Row */} +
+
+
+ Clouds Bottom Left Layer 1 +
+
+ Clouds Bottom Left Layer 2 +
+
+
+
+ Big Vinyl Center +
+
+
+
+ Clouds Bottom Right Layer 1 +
+
+ Clouds Bottom Right Layer 2 +
+
+
+ + {/* Vinyl Row */} +
+ ); +} diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 43ea405..be60c43 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -1,8 +1,10 @@ // import Directors from './(about-us)/_components/Directors/Directors'; +import BigVinyl from './_components/BigVinyl/BigVinyl'; export default function Home() { return ( -
+
+ {/*
*/} {/* Intro Section */}

Halo! Welcome to the HackDavis template repo :D @@ -34,10 +36,12 @@ export default function Home() {

Sponsors Section

+ +
); } diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss index 3c5497e..f79812a 100644 --- a/app/(pages)/_components/Footer/Footer.module.scss +++ b/app/(pages)/_components/Footer/Footer.module.scss @@ -1,14 +1,10 @@ -// this doesnt seem to like the globals?? -$brand-icon-color: white; -$grass-background-dark: #7FB732; - // css styling for the desktop view .container { width: 100%; height: calc(435/1440*100vw - 20px); display: flex; flex-direction: column; - background: $grass-background-dark; + background: var(--grass-background-dark); .footer_grass{ position: relative; @@ -65,23 +61,23 @@ $grass-background-dark: #7FB732; .singleIcon { // used for most of the brand icons max-width: 30px; width: 59%; - color:$brand-icon-color; + color: var(--brand-icon-color); } .mediumIcon { // used for most of the brand icons max-width: 40px; width: 59%; - color:$brand-icon-color; + color: var(--brand-icon-color); } .discordIcon { // used for most of the brand icons max-width: 40px; width: 59%; - color:$brand-icon-color; + color: var(--brand-icon-color); } .fbIcon { // fb icon is larger than the rest so it needs smaller size max-width: 17px; width: 7%; - color:$brand-icon-color; + color: var(--brand-icon-color); } } @@ -124,7 +120,7 @@ $grass-background-dark: #7FB732; height: calc(435/1440*100vw - 20px); display: flex; flex-direction: column; - background: $grass-background-dark; + background: var(--grass-background-dark); .footer_grass{ position: relative; @@ -188,25 +184,25 @@ $grass-background-dark: #7FB732; .singleIcon { // used for most of the brand icons max-width: 30px; width: 8%; - color:$brand-icon-color; + color: var(--brand-icon-color); } .mediumIcon { // used for most of the brand icons max-width: 40px; width: 11%; - color:$brand-icon-color; + color: var(--brand-icon-color); } .discordIcon { // used for most of the brand icons max-width: 40px; width: 11%; - color:$brand-icon-color; + color: var(--brand-icon-color); } .fbIcon { // fb icon is larger than the rest so it needs smaller size max-width: 17px; width: 5%; - color:$brand-icon-color; + color: var(--brand-icon-color); } } diff --git a/public/BigVinyl/CloudBottom.svg b/public/BigVinyl/CloudBottom.svg new file mode 100644 index 0000000..3588d96 --- /dev/null +++ b/public/BigVinyl/CloudBottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/BigVinyl/CloudBottomDim.svg b/public/BigVinyl/CloudBottomDim.svg new file mode 100644 index 0000000..b7783a6 --- /dev/null +++ b/public/BigVinyl/CloudBottomDim.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/BigVinyl/CloudCenter.svg b/public/BigVinyl/CloudCenter.svg new file mode 100644 index 0000000..84a0bd2 --- /dev/null +++ b/public/BigVinyl/CloudCenter.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/BigVinyl/CloudTop.svg b/public/BigVinyl/CloudTop.svg new file mode 100644 index 0000000..54c623c --- /dev/null +++ b/public/BigVinyl/CloudTop.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/BigVinyl/Vinyl.svg b/public/BigVinyl/Vinyl.svg new file mode 100644 index 0000000..e8dd606 --- /dev/null +++ b/public/BigVinyl/Vinyl.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From e045bcaa0b99bf1aef7c981f241c42833ce78969 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 16:20:06 -0800 Subject: [PATCH 03/25] Basic scroll --- .../_components/BigVinyl/BigVinyl.module.scss | 321 +++++++++--------- .../_components/BigVinyl/BigVinyl.tsx | 70 +++- app/(pages)/(index-page)/page.tsx | 10 +- .../_components/Footer/Footer.module.scss | 2 +- package-lock.json | 35 ++ package.json | 1 + 6 files changed, 259 insertions(+), 180 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index 02b70a6..896742d 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -1,221 +1,216 @@ .container { position: relative; - height: calc((940 / 1440) * 50vw + 200px); - top: -200px; - //bottom: calc(1 * (940 /(2 * 1440) * 100vw + 20px)); + height: calc((940 / 1440) * 50vw + 350px); + //top: -200px; background: var(--sky-background); display: flex; flex-direction: column; align-items: center; - justify-content: space-between; + justify-content: space-evenly; width: 100%; - //padding: 20px; z-index: 1; overflow: hidden; - } + //transform: translateY((940 /(2 * 1440) * 100vw)); + +} - .rowTop { +.rowTop { display: flex; flex-direction: row; justify-content: space-between; width: 100%; height: calc((328/1440 * 100vw) - 40px); - } - .rowBottom { +} + +.rowBottom { display: flex; flex-direction: row; justify-content: space-between; width: 100%; position: relative; - } +} - .vinylRow { - display: flex; - //justify-content: center; - align-items: flex-start; +.vinylRow { position: relative; - width: 0; - } + display: flex; + flex-direction: row; - .bigVinyl { +} + +.bigVinyl { top: 0; - left: 50%; - transform: translateX(-50%) translateY(-20%); + left: 50%; + transform: translateY(-0.71 * 940 / 1440 * 100vw); // translateX(-50%) translateY(-0.23 * 940 / 1440 * 100vw); height: calc(940 / 1440 * 100vw); aspect-ratio: 1; - z-index: 2; - } + z-index: 1; + transition: transform 0.1s linear; +} - .rowMiddle { - // display: flex; - // flex-direction: row; - // justify-content: center; +.rowMiddle { width: 100%; height: calc(248/1440 * 100vw); - padding-left: calc(74/1440 * 100vw); - - .cloudCenter { - left: 50%; - transform: translateX(-1%); - aspect-ratio: calc(842/248); - width: calc(842/1440 * 100vw); - //height: calc(248/1440 * 100vw); - + padding-left: calc(74/1440 * 100vw); +} - > img { - width: 100%; - height: 100%; - } - } +.cloudCenter { + left: 50%; + transform: translateX(-1%); + aspect-ratio: calc(842/248); + width: calc(842/1440 * 100vw); - } + > img { + width: 100%; + height: 100%; + } +} - .cloudsTopLeft { +.cloudsTopLeft { position: relative; left: 50%; transform: translateX(-125%); +} - .cloudsTopLeft_topLayer { - // for 1440px, width = 1069, height = 328 - position: relative; - aspect-ratio: calc(1069/328); - width: calc(1069/1440 * 100vw); - top: 40px; - z-index: 2; - > img { - width: 100%; - height: 100%; - - } +.cloudsTopLeft_topLayer { + // for 1440px, width = 1069, height = 328 + position: relative; + aspect-ratio: calc(1069/328); + width: calc(1069/1440 * 100vw); + top: 40px; + z-index: 2; + > img { + width: 100%; + height: 100%; + } - - .cloudsTopLeft_bottomLayer { - // for 1440px, width = 1117, height = 339 - position: relative; - aspect-ratio: calc(1117/339); - width: calc(1117/1440 * 100vw); - z-index: 1; - top: calc((-1 * 328/1440 * 100vw)); - > img { - width: 100%; - height: 100%; - opacity: calc(5/6); - } +} + +.cloudsTopLeft_bottomLayer { + // for 1440px, width = 1117, height = 339 + position: relative; + aspect-ratio: calc(1117/339); + width: calc(1117/1440 * 100vw); + z-index: 1; + top: calc((-1 * 328/1440 * 100vw)); + > img { + width: 100%; + height: 100%; + opacity: calc(5/6); } - } +} - .cloudsTopRight { +.cloudsTopRight { position: relative; left: 50%; transform: translateX(-70%); +} + +.cloudsTopRight_topLayer { + // for 1440px, width = 1069, height = 328 + position: relative; + aspect-ratio: calc(1069/328); + width: calc(1069/1440 * 100vw); + z-index: 2; + transform: scaleX(-1); + top: 37px; + + > img { + width: 100%; + height: 100%; + } +} - .cloudsTopRight_topLayer { - // for 1440px, width = 1069, height = 328 - position: relative; - aspect-ratio: calc(1069/328); - width: calc(1069/1440 * 100vw); - z-index: 2; - transform: scaleX(-1); - top: 37px; - - > img { - width: 100%; - height: 100%; - } - } +.cloudsTopRight_bottomLayer { + // for 1440px, width = 1117, height = 339 + position: relative; + aspect-ratio: calc(1117/339); + width: calc(1117/1440 * 100vw); + z-index: 1; + top: calc((-1 * 328/1440 * 100vw)); + right: 50px; + transform: scaleX(-1); + z-index: 1; - .cloudsTopRight_bottomLayer { - // for 1440px, width = 1117, height = 339 - position: relative; - aspect-ratio: calc(1117/339); - width: calc(1117/1440 * 100vw); - z-index: 1; - top: calc((-1 * 328/1440 * 100vw)); - right: 50px; - transform: scaleX(-1); - z-index: 1; - - > img { - width: 100%; - height: 100%; - opacity: calc(5/6); - } + > img { + width: 100%; + height: 100%; + opacity: calc(5/6); } - } +} +.cloudsBottomLeft{ + flex-direction: column; + align-items: start; + left: 50%; + transform: translateX(-105%); + width: calc(842/(2*1440) * 100vw); - .cloudsBottomLeft{ +} + +.cloudsBottomLeft_topLayer { + // at 1440px, width = 842, height = 234 position: relative; - left: 50%; - transform: translateX(-145%); - - .cloudsBottomLeft_topLayer { - // at 1440px, width = 842, height = 234 - position: relative; - aspect-ratio: calc(842/234); - width: calc(842/1440 * 100vw); - top: 37px; - z-index: 5; - - > img { - width: 100%; - height: 100%; - } - } - - .cloudsBottomLeft_bottomLayer { - // at 1440px, width = 842, height = 234 - position: relative; - aspect-ratio: calc(842/234); - width: calc(842/1440 * 100vw); - z-index: 1; - top: calc((-1 * 234/1440 * 100vw)); - - > img { - width: 100%; - height: 100%; - } + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: 37px; + z-index: 5; + + > img { + width: 100%; + height: 100%; } - } - +} + +.cloudsBottomLeft_bottomLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: calc((-1 * 234/1440 * 100vw)); + z-index: -1; + + > img { + width: 100%; + height: 100%; + } +} - .cloudsBottomRight { +.cloudsBottomRight { position: relative; left: 50%; - transform: translateX(-65%); - - .cloudsBottomRight_topLayer { - // at 1440px, width = 842, height = 234 - position: relative; - aspect-ratio: calc(842/234); - width: calc(842/1440 * 100vw); - top: 36px; - z-index: 5; - transform: scaleX(-1) translateX(-3%); - - > img { - width: 100%; - height: 100%; - } - } - - .cloudsBottomRight_bottomLayer { - // at 1440px, width = 842, height = 234 - position: relative; - aspect-ratio: calc(842/234); - width: calc(842/1440 * 100vw); - top: calc((-1 * 234/1440 * 100vw)); - z-index: 1; - - > img { - width: 100%; - height: 100%; - opacity: 60%; - } - } + transform: translateX(-35%); +} + +.cloudsBottomRight_topLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: 36px; + z-index: 5; + transform: scaleX(-1) translateX(-3%); + + > img { + width: 100%; + height: 100%; } +} + +.cloudsBottomRight_bottomLayer { + // at 1440px, width = 842, height = 234 + position: relative; + aspect-ratio: calc(842/234); + width: calc(842/1440 * 100vw); + top: calc((-1 * 234/1440 * 100vw)); + z-index: 1; + > img { + width: 100%; + height: 100%; + opacity: 60%; + } +} diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx index fdb9c24..9722a06 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx @@ -1,4 +1,5 @@ 'use client'; +import { useParallax } from 'react-scroll-parallax'; import styles from './BigVinyl.module.scss'; import Image from 'next/image'; @@ -9,24 +10,44 @@ import cloudTop from '/public/BigVinyl/cloudTop.svg'; import vinyl from '/public/BigVinyl/Vinyl.svg'; export default function BigVinyl() { + const parallax = useParallax({ + rotate: [0, 720], + }); + return (
{/* First Row */}
- Clouds Top Left Layer 1 + Clouds Top Left Layer 1
- Clouds Top Left Layer 2 + Clouds Top Left Layer 2
- Clouds Top Right Layer 1 + Clouds Top Right Layer 1
- Clouds Top Right Layer 2 + Clouds Top Right Layer 2
@@ -42,28 +63,51 @@ export default function BigVinyl() {
- Clouds Bottom Left Layer 1 + Clouds Bottom Left Layer 1
- Clouds Bottom Left Layer 2 -
-
-
-
- Big Vinyl Center + Clouds Bottom Left Layer 2
+
- Clouds Bottom Right Layer 1 + Clouds Bottom Right Layer 1
- Clouds Bottom Right Layer 2 + Clouds Bottom Right Layer 2
{/* Vinyl Row */} +
+
+ Big Vinyl Center +
+
); } diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index be60c43..0973b6d 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -1,9 +1,12 @@ // import Directors from './(about-us)/_components/Directors/Directors'; +'use client'; +import { ParallaxProvider } from 'react-scroll-parallax'; + import BigVinyl from './_components/BigVinyl/BigVinyl'; export default function Home() { return ( -
+
{/*
*/} {/* Intro Section */}

@@ -40,8 +43,9 @@ export default function Home() { >

Sponsors Section

- - + + +
); } diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss index f79812a..a11577d 100644 --- a/app/(pages)/_components/Footer/Footer.module.scss +++ b/app/(pages)/_components/Footer/Footer.module.scss @@ -8,7 +8,7 @@ .footer_grass{ position: relative; - top: -40px; + top: -50px; width: 100%; aspect-ratio: calc(1440/435); z-index: 5; diff --git a/package-lock.json b/package-lock.json index d2c086b..3d4c6d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.3.0", + "react-scroll-parallax": "^3.4.5", "sass": "^1.81.0" }, "devDependencies": { @@ -1557,6 +1558,12 @@ "dev": true, "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT" + }, "node_modules/binary-extensions": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", @@ -4882,6 +4889,18 @@ "node": ">=6" } }, + "node_modules/parallax-controller": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz", + "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==", + "license": "MIT", + "dependencies": { + "bezier-easing": "^2.1.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -5349,6 +5368,22 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-scroll-parallax": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz", + "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==", + "license": "MIT", + "dependencies": { + "parallax-controller": "^1.7.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0", + "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index eb2f1ab..ca167f8 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.3.0", + "react-scroll-parallax": "^3.4.5", "sass": "^1.81.0" }, "devDependencies": { From f8dca72dd00cbe0d591a804982ba70bcf1c8ca8d Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 17:07:34 -0800 Subject: [PATCH 04/25] Scaling changes --- .../_components/BigVinyl/BigVinyl.module.scss | 19 ++++++++++--------- .../_components/BigVinyl/BigVinyl.tsx | 3 +-- .../_components/Footer/Footer.module.scss | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index 896742d..b29da63 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -1,6 +1,6 @@ .container { position: relative; - height: calc((940 / 1440) * 50vw + 350px); + height: calc((940 / 1440) * 87vw); //top: -200px; background: var(--sky-background); display: flex; @@ -8,7 +8,7 @@ align-items: center; justify-content: space-evenly; width: 100%; - z-index: 1; + // z-index: 0; overflow: hidden; //transform: translateY((940 /(2 * 1440) * 100vw)); @@ -34,16 +34,17 @@ position: relative; display: flex; flex-direction: row; - + max-height: calc(940 / 1440 * 100vw); + max-width: calc(940 / 1440 * 100vw); } .bigVinyl { top: 0; left: 50%; - transform: translateY(-0.71 * 940 / 1440 * 100vw); // translateX(-50%) translateY(-0.23 * 940 / 1440 * 100vw); - height: calc(940 / 1440 * 100vw); + transform: translateY(-0.705 * 940 / 1440 * 100vw); // translateX(-50%) translateY(-0.23 * 940 / 1440 * 100vw); aspect-ratio: 1; - z-index: 1; + width: 100%; + z-index: 3; transition: transform 0.1s linear; } @@ -130,7 +131,6 @@ top: calc((-1 * 328/1440 * 100vw)); right: 50px; transform: scaleX(-1); - z-index: 1; > img { width: 100%; @@ -168,7 +168,7 @@ aspect-ratio: calc(842/234); width: calc(842/1440 * 100vw); top: calc((-1 * 234/1440 * 100vw)); - z-index: -1; + z-index: 1; > img { width: 100%; @@ -188,8 +188,8 @@ aspect-ratio: calc(842/234); width: calc(842/1440 * 100vw); top: 36px; - z-index: 5; transform: scaleX(-1) translateX(-3%); + z-index: 10; > img { width: 100%; @@ -202,6 +202,7 @@ position: relative; aspect-ratio: calc(842/234); width: calc(842/1440 * 100vw); + //height: 234px; top: calc((-1 * 234/1440 * 100vw)); z-index: 1; diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx index 9722a06..11e6f72 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx @@ -11,7 +11,7 @@ import vinyl from '/public/BigVinyl/Vinyl.svg'; export default function BigVinyl() { const parallax = useParallax({ - rotate: [0, 720], + rotate: [0, 700], }); return ( @@ -102,7 +102,6 @@ export default function BigVinyl() { Big Vinyl Center diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss index a11577d..bc92a8c 100644 --- a/app/(pages)/_components/Footer/Footer.module.scss +++ b/app/(pages)/_components/Footer/Footer.module.scss @@ -8,7 +8,7 @@ .footer_grass{ position: relative; - top: -50px; + top: calc(-1 * (50/1440) *100vw); width: 100%; aspect-ratio: calc(1440/435); z-index: 5; @@ -26,7 +26,7 @@ flex-direction: row; align-items: center; justify-content: space-evenly; - top: -320px; + top: calc(-1 * (400/1440)* 100vw); gap: 10px; .hackdavisLogo { From 9701c92c9095b41478e20b52a04444e657cf039a Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 18:02:18 -0800 Subject: [PATCH 05/25] Add rotating vinyl --- .../_components/BigVinyl/BigVinyl.module.scss | 15 ++- .../_components/BigVinyl/BigVinyl.tsx | 14 +-- public/BigVinyl/Vinyl_text_style_1.svg | 94 ++++++++++++++++++ public/BigVinyl/Vinyl_text_style_2.svg | 96 +++++++++++++++++++ 4 files changed, 211 insertions(+), 8 deletions(-) create mode 100644 public/BigVinyl/Vinyl_text_style_1.svg create mode 100644 public/BigVinyl/Vinyl_text_style_2.svg diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index b29da63..91236a1 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -41,12 +41,23 @@ .bigVinyl { top: 0; left: 50%; - transform: translateY(-0.705 * 940 / 1440 * 100vw); // translateX(-50%) translateY(-0.23 * 940 / 1440 * 100vw); + transform: translateY(-0.705 * 940 / 1440 * 100vw); aspect-ratio: 1; width: 100%; z-index: 3; - transition: transform 0.1s linear; + animation: rotateVinyl 15s linear infinite; /* Infinite smooth rotation */ } + +/* Keyframes for continuous rotation */ +@keyframes rotateVinyl { + from { + transform: translateY(-0.705 * 940 / 1440 * 100vw) rotate(0deg); + } + to { + transform: translateY(-0.705 * 940 / 1440 * 100vw) rotate(360deg); + } +} + .rowMiddle { width: 100%; diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx index 11e6f72..65330d2 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx @@ -1,5 +1,5 @@ 'use client'; -import { useParallax } from 'react-scroll-parallax'; +//import { useParallax } from 'react-scroll-parallax'; import styles from './BigVinyl.module.scss'; import Image from 'next/image'; @@ -7,12 +7,14 @@ import cloudBottom from '/public/BigVinyl/CloudBottom.svg'; import cloudBottomDim from '/public/BigVinyl/CloudBottomDim.svg'; import cloudCenter from '/public/BigVinyl/CloudCenter.svg'; import cloudTop from '/public/BigVinyl/cloudTop.svg'; -import vinyl from '/public/BigVinyl/Vinyl.svg'; +//import vinyl from '/public/BigVinyl/Vinyl.svg'; +import vinyl from '/public/BigVinyl/Vinyl_text_style_1.svg'; +//import vinyl from '/public/BigVinyl/Vinyl_text_style_2.svg'; export default function BigVinyl() { - const parallax = useParallax({ - rotate: [0, 700], - }); + // const parallax = useParallax({ + // rotate: [0, 360], + // }); return (
@@ -101,7 +103,7 @@ export default function BigVinyl() {
Big Vinyl Center diff --git a/public/BigVinyl/Vinyl_text_style_1.svg b/public/BigVinyl/Vinyl_text_style_1.svg new file mode 100644 index 0000000..7ecd2a5 --- /dev/null +++ b/public/BigVinyl/Vinyl_text_style_1.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/BigVinyl/Vinyl_text_style_2.svg b/public/BigVinyl/Vinyl_text_style_2.svg new file mode 100644 index 0000000..412e4b3 --- /dev/null +++ b/public/BigVinyl/Vinyl_text_style_2.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From a0eeafe150a0a83d5142bdde69b48e48fe790b97 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 19:07:17 -0800 Subject: [PATCH 06/25] Update BigVinyl.module.scss --- .../_components/BigVinyl/BigVinyl.module.scss | 69 ++++++++++++++++--- 1 file changed, 59 insertions(+), 10 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index 91236a1..0e9664d 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -1,3 +1,5 @@ +@import '@globals/styles/mixins.scss'; + .container { position: relative; height: calc((940 / 1440) * 87vw); @@ -11,7 +13,11 @@ // z-index: 0; overflow: hidden; //transform: translateY((940 /(2 * 1440) * 100vw)); - + + @include phone { + height: 60vw; + //flex-direction: column; + } } .rowTop { @@ -20,6 +26,10 @@ justify-content: space-between; width: 100%; height: calc((328/1440 * 100vw) - 40px); + + @include phone { + height: 60vw; + } } .rowBottom { @@ -28,14 +38,16 @@ justify-content: space-between; width: 100%; position: relative; + + @include phone { + height: 0px; + } } .vinylRow { position: relative; display: flex; flex-direction: row; - max-height: calc(940 / 1440 * 100vw); - max-width: calc(940 / 1440 * 100vw); } .bigVinyl { @@ -62,7 +74,12 @@ .rowMiddle { width: 100%; height: calc(248/1440 * 100vw); - padding-left: calc(74/1440 * 100vw); + padding-left: calc(74/1440 * 100vw); + + @include phone { + width: 0px; + height: 400px; + } } .cloudCenter { @@ -75,12 +92,22 @@ width: 100%; height: 100%; } + + @include phone { + width: 0px; + } } .cloudsTopLeft { position: relative; left: 50%; transform: translateX(-125%); + + @include phone { + width: 100%; + left: 50%; + transform: translateX(-90%); + } } .cloudsTopLeft_topLayer { @@ -116,6 +143,10 @@ position: relative; left: 50%; transform: translateX(-70%); + + @include phone { + width: 0px; + } } .cloudsTopRight_topLayer { @@ -157,6 +188,9 @@ transform: translateX(-105%); width: calc(842/(2*1440) * 100vw); + @include phone { + width: 0px; + } } .cloudsBottomLeft_topLayer { @@ -171,6 +205,10 @@ width: 100%; height: 100%; } + + @include phone { + width: 0px; + } } .cloudsBottomLeft_bottomLayer { @@ -185,12 +223,20 @@ width: 100%; height: 100%; } + + @include phone { + width: 0px; + } } .cloudsBottomRight { position: relative; left: 50%; transform: translateX(-35%); + + @include phone { + width: 0px; + } } .cloudsBottomRight_topLayer { @@ -206,6 +252,10 @@ width: 100%; height: 100%; } + + @include phone { + width: 0px; + } } .cloudsBottomRight_bottomLayer { @@ -222,9 +272,8 @@ height: 100%; opacity: 60%; } -} - - - - - \ No newline at end of file + + @include phone { + width: 0px; + } +} \ No newline at end of file From 3d6d75ebe104c55869362805745b22f7b7020344 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 19:25:57 -0800 Subject: [PATCH 07/25] Mobile view vinyl --- .../_components/BigVinyl/BigVinyl.module.scss | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index 0e9664d..e5229d4 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -2,6 +2,7 @@ .container { position: relative; + // height: calc((940 / 1440) * 87vw); height: calc((940 / 1440) * 87vw); //top: -200px; background: var(--sky-background); @@ -48,16 +49,26 @@ position: relative; display: flex; flex-direction: row; + + @include phone { + width: 200vw; + } } .bigVinyl { top: 0; left: 50%; - transform: translateY(-0.705 * 940 / 1440 * 100vw); aspect-ratio: 1; width: 100%; z-index: 3; animation: rotateVinyl 15s linear infinite; /* Infinite smooth rotation */ + transform-origin: center center; + + @include phone { + width: 200%; + animation: rotateVinylPhone 15s linear infinite; + transform-origin: 34.7% 34.7%; /* Explicitly set rotation center */ + } } /* Keyframes for continuous rotation */ @@ -70,6 +81,15 @@ } } +@keyframes rotateVinylPhone { + from { + transform: translate(40%, -27%) rotate(0deg); /* Adjusted for 2x width */ + } + to { + transform: translate(40%, -27%) rotate(360deg); + } +} + .rowMiddle { width: 100%; From 3324e15a6bc8b5fe82d0d9f85e44b5df8623649c Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 20:18:16 -0800 Subject: [PATCH 08/25] Footer css mostly done --- .../_components/BigVinyl/BigVinyl.module.scss | 6 +++--- .../_components/Footer/Footer.module.scss | 19 +++++++++++-------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index e5229d4..7949544 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -16,7 +16,7 @@ //transform: translateY((940 /(2 * 1440) * 100vw)); @include phone { - height: 60vw; + height: 80vw; //flex-direction: column; } } @@ -83,10 +83,10 @@ @keyframes rotateVinylPhone { from { - transform: translate(40%, -27%) rotate(0deg); /* Adjusted for 2x width */ + transform: translate(40.5%, -19%) rotate(0deg); /* Adjusted for 2x width */ } to { - transform: translate(40%, -27%) rotate(360deg); + transform: translate(40.5%, -19%) rotate(360deg); } } diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss index bc92a8c..773ac58 100644 --- a/app/(pages)/_components/Footer/Footer.module.scss +++ b/app/(pages)/_components/Footer/Footer.module.scss @@ -1,3 +1,5 @@ +@import '@globals/styles/mixins.scss'; + // css styling for the desktop view .container { width: 100%; @@ -111,26 +113,27 @@ -@media (max-width: 870px) { +@include phone { // css styling for mobile view - // TODO: Fix Mobile Styling .container { width: 100%; min-height: 188px; - height: calc(435/1440*100vw - 20px); + height: clamp(35vw, calc(35vw + ((100 - 35) * (760px - 100vw)) / (760 - 400)), 80vw); + //height: 60vw; display: flex; flex-direction: column; background: var(--grass-background-dark); + //overflow: hidden; .footer_grass{ position: relative; - top: -30px; + top: clamp(-20px, calc(-4px + (-18 * (100vw - 425px) / 335)), -12px); width: 100%; - aspect-ratio: calc(1440/435); + //aspect-ratio: calc(1440/435); z-index: 5; > img { - width: 100%; + width: 200vw; } } @@ -142,7 +145,7 @@ flex-direction: column; align-items: center; justify-content: space-around; - padding-top: 55px; + //padding-top: 5px; padding-bottom: 30px; gap: 10px; z-index: 6; @@ -216,7 +219,7 @@ .arrowToTop { position: absolute; - top: 150px; + top: 10px; right: 31px; display: flex; flex-direction: row; From a1ed11b1710153adb94e745a1cd4cbad26cb9a6b Mon Sep 17 00:00:00 2001 From: michelleyeoh <74385095+michelleyeoh@users.noreply.github.com> Date: Sat, 8 Feb 2025 21:16:40 -0800 Subject: [PATCH 09/25] font, padding change (#47) --- app/(pages)/(index-page)/_components/SandCastle.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/(pages)/(index-page)/_components/SandCastle.tsx b/app/(pages)/(index-page)/_components/SandCastle.tsx index 5ebd851..5ca2b73 100644 --- a/app/(pages)/(index-page)/_components/SandCastle.tsx +++ b/app/(pages)/(index-page)/_components/SandCastle.tsx @@ -23,7 +23,7 @@ export default function SandCastle() { function SandCastleContent() { return ( -
+
@@ -56,8 +56,8 @@ function SandCastleContent() { function WhatIsHackDavisText() { return (
-

HackDavis

-

+

HackDavis

+

is one of the largest collegiate hackathon in Califronia, where over 950 students, creators, and leaders come together to{' '} From 788e77d97f10167fffe712f31180b210dc24e2d7 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 8 Feb 2025 21:17:43 -0800 Subject: [PATCH 10/25] Mobile Bigvinyl done --- .../_components/BigVinyl/BigVinyl.module.scss | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss index 7949544..357ffae 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.module.scss @@ -2,8 +2,8 @@ .container { position: relative; - // height: calc((940 / 1440) * 87vw); - height: calc((940 / 1440) * 87vw); + //height: calc((940 / 1440) * 87vw); + height: clamp(440px, 0.565476 * 100vw + 5.71px, 1080px); //top: -200px; background: var(--sky-background); display: flex; @@ -16,7 +16,7 @@ //transform: translateY((940 /(2 * 1440) * 100vw)); @include phone { - height: 80vw; + height: 85vw; //flex-direction: column; } } @@ -60,33 +60,35 @@ left: 50%; aspect-ratio: 1; width: 100%; + max-width: calc(940 * 100vw / 1440); z-index: 3; animation: rotateVinyl 15s linear infinite; /* Infinite smooth rotation */ transform-origin: center center; @include phone { + max-width: 160vw; width: 200%; - animation: rotateVinylPhone 15s linear infinite; - transform-origin: 34.7% 34.7%; /* Explicitly set rotation center */ + left: 50%; + animation: rotateVinylPhone 20s linear infinite; } } /* Keyframes for continuous rotation */ @keyframes rotateVinyl { - from { - transform: translateY(-0.705 * 940 / 1440 * 100vw) rotate(0deg); - } to { - transform: translateY(-0.705 * 940 / 1440 * 100vw) rotate(360deg); + transform: translateY(-0.7 * 940 / 1440 * 100vw) rotate(0deg); + } + from { + transform: translateY(-0.7 * 940 / 1440 * 100vw) rotate(360deg); } } @keyframes rotateVinylPhone { - from { - transform: translate(40.5%, -19%) rotate(0deg); /* Adjusted for 2x width */ - } to { - transform: translate(40.5%, -19%) rotate(360deg); + transform: translateX(44%) translateY(-0.7 * 940 / 1440 * 100vw) rotate(0deg); /* Adjusted for 2x width */ + } + from { + transform: translateX(44%) translateY(-0.7 * 940 / 1440 * 100vw) rotate(360deg); } } @@ -140,8 +142,11 @@ > img { width: 100%; - height: 100%; - + height: 100%; + } + + @include phone { + top: 10px; } } From f6547da08e99e0e97a4aaa9aa1fc43889dd6da7a Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Sat, 8 Feb 2025 22:10:34 -0800 Subject: [PATCH 11/25] removed the parallax context --- app/(pages)/(index-page)/page.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 0973b6d..c6c8b0d 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -43,9 +43,7 @@ export default function Home() { >

Sponsors Section

- - - +
); } From a85d119eaeb249f183b63bf10c520d38f914d626 Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Sat, 8 Feb 2025 22:11:03 -0800 Subject: [PATCH 12/25] linting --- app/(pages)/(index-page)/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index c6c8b0d..4e6ddc3 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -1,6 +1,5 @@ // import Directors from './(about-us)/_components/Directors/Directors'; 'use client'; -import { ParallaxProvider } from 'react-scroll-parallax'; import BigVinyl from './_components/BigVinyl/BigVinyl'; From e6651747e2e87bced14c1fa73178b1c694408be9 Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Sat, 8 Feb 2025 22:16:22 -0800 Subject: [PATCH 13/25] dependencies --- app/(pages)/(index-page)/page.tsx | 1 - package-lock.json | 258 +----------------------------- 2 files changed, 5 insertions(+), 254 deletions(-) diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 70e20d0..05da7c4 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -12,7 +12,6 @@ import Underwater from '../_components/Underwater/Underwater'; export default function Home() { return (
- {/* Intro Section */} {/*

Halo! Welcome to the HackDavis template repo :D diff --git a/package-lock.json b/package-lock.json index e2cbd6c..6367b9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -380,7 +380,6 @@ "cpu": [ "x64" ], - "license": "MIT", "optional": true, "os": [ "darwin" @@ -396,7 +395,6 @@ "cpu": [ "arm64" ], - "license": "MIT", "optional": true, "os": [ "linux" @@ -412,7 +410,6 @@ "cpu": [ "arm64" ], - "license": "MIT", "optional": true, "os": [ "linux" @@ -428,7 +425,6 @@ "cpu": [ "x64" ], - "license": "MIT", "optional": true, "os": [ "linux" @@ -444,7 +440,6 @@ "cpu": [ "x64" ], - "license": "MIT", "optional": true, "os": [ "linux" @@ -460,7 +455,6 @@ "cpu": [ "arm64" ], - "license": "MIT", "optional": true, "os": [ "win32" @@ -476,7 +470,6 @@ "cpu": [ "ia32" ], - "license": "MIT", "optional": true, "os": [ "win32" @@ -492,7 +485,6 @@ "cpu": [ "x64" ], - "license": "MIT", "optional": true, "os": [ "win32" @@ -585,26 +577,6 @@ "@parcel/watcher-win32-x64": "2.5.0" } }, - "node_modules/@parcel/watcher-android-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz", - "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@parcel/watcher-darwin-arm64": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz", @@ -625,226 +597,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz", - "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz", - "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz", - "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==", - "cpu": [ - "arm" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz", - "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==", - "cpu": [ - "arm" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz", - "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz", - "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz", - "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz", - "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz", - "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz", - "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==", - "cpu": [ - "ia32" - ], - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz", - "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -5277,6 +5029,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, @@ -5305,6 +5058,7 @@ "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz", "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==", "dev": true, + "license": "MIT", "engines": { "node": ">=14.21.3" }, @@ -5477,16 +5231,14 @@ } }, "node_modules/react-transition-state": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/react-transition-state/-/react-transition-state-2.2.0.tgz", - "integrity": "sha512-D3EyLku1Sdxrxq26Fo4Jh0q1BLEFQfDOxKKiSuyqWH84+hM6y0Guc0hcW2IXMXY5l5gQCgkOQ9y90xx6mNoj5w==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-transition-state/-/react-transition-state-2.3.0.tgz", + "integrity": "sha512-OucQRyIpeq5g1/5qSBJH4p4U+SzYEoB3MsAXXz3ty116rPqG4jhwrzInImZ2gFi4XOffeLu6HNCZvkCM3DKaeg==", "license": "MIT", "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } - } - } }, "node_modules/read-cache": { "version": "1.0.0", From 3eaa3771ae641cb993469a0189aef57261ed12f1 Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Sat, 8 Feb 2025 22:18:41 -0800 Subject: [PATCH 14/25] file imports --- .../_components/BigVinyl/BigVinyl.tsx | 10 +- package-lock.json | 463 +++++++++++++++++- package.json | 3 +- 3 files changed, 466 insertions(+), 10 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx index 65330d2..219c54d 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx @@ -3,12 +3,12 @@ import styles from './BigVinyl.module.scss'; import Image from 'next/image'; -import cloudBottom from '/public/BigVinyl/CloudBottom.svg'; -import cloudBottomDim from '/public/BigVinyl/CloudBottomDim.svg'; -import cloudCenter from '/public/BigVinyl/CloudCenter.svg'; -import cloudTop from '/public/BigVinyl/cloudTop.svg'; +import cloudBottom from '@public/BigVinyl/CloudBottom.svg'; +import cloudBottomDim from '@public/BigVinyl/CloudBottomDim.svg'; +import cloudCenter from '@public/BigVinyl/CloudCenter.svg'; +import cloudTop from '@public/BigVinyl/cloudTop.svg'; //import vinyl from '/public/BigVinyl/Vinyl.svg'; -import vinyl from '/public/BigVinyl/Vinyl_text_style_1.svg'; +import vinyl from '@public/BigVinyl/Vinyl_text_style_1.svg'; //import vinyl from '/public/BigVinyl/Vinyl_text_style_2.svg'; export default function BigVinyl() { diff --git a/package-lock.json b/package-lock.json index 6367b9a..5eb57ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,8 @@ "react-dom": "^18", "react-icons": "^5.3.0", "react-scroll-parallax": "^3.4.5", - "sass": "^1.81.0" + "sass": "^1.81.0", + "sharp": "^0.33.5" }, "devDependencies": { "@types/node": "^20", @@ -81,6 +82,16 @@ "node": ">=6.9.0" } }, + "node_modules/@emnapi/runtime": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz", + "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==", + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -241,6 +252,367 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@img/sharp-darwin-arm64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz", + "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-arm64": "1.0.4" + } + }, + "node_modules/@img/sharp-darwin-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz", + "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-x64": "1.0.4" + } + }, + "node_modules/@img/sharp-libvips-darwin-arm64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz", + "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==", + "cpu": [ + "arm64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-darwin-x64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz", + "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==", + "cpu": [ + "x64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz", + "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==", + "cpu": [ + "arm" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz", + "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==", + "cpu": [ + "arm64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-s390x": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz", + "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==", + "cpu": [ + "s390x" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-x64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz", + "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==", + "cpu": [ + "x64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-arm64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz", + "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==", + "cpu": [ + "arm64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-x64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz", + "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==", + "cpu": [ + "x64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-linux-arm": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz", + "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==", + "cpu": [ + "arm" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm": "1.0.5" + } + }, + "node_modules/@img/sharp-linux-arm64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz", + "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm64": "1.0.4" + } + }, + "node_modules/@img/sharp-linux-s390x": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz", + "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==", + "cpu": [ + "s390x" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-s390x": "1.0.4" + } + }, + "node_modules/@img/sharp-linux-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz", + "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-x64": "1.0.4" + } + }, + "node_modules/@img/sharp-linuxmusl-arm64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz", + "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-arm64": "1.0.4" + } + }, + "node_modules/@img/sharp-linuxmusl-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz", + "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-x64": "1.0.4" + } + }, + "node_modules/@img/sharp-wasm32": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz", + "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==", + "cpu": [ + "wasm32" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", + "optional": true, + "dependencies": { + "@emnapi/runtime": "^1.2.0" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-ia32": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz", + "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==", + "cpu": [ + "ia32" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz", + "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1594,11 +1966,23 @@ "node": ">=0.8" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "license": "MIT", "dependencies": { "color-name": "~1.1.4" @@ -1611,9 +1995,18 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, "license": "MIT" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "license": "MIT", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -5666,7 +6059,6 @@ "version": "7.6.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", - "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -5709,6 +6101,54 @@ "node": ">= 0.4" } }, + "node_modules/sharp": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz", + "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "color": "^4.2.3", + "detect-libc": "^2.0.3", + "semver": "^7.6.3" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-darwin-arm64": "0.33.5", + "@img/sharp-darwin-x64": "0.33.5", + "@img/sharp-libvips-darwin-arm64": "1.0.4", + "@img/sharp-libvips-darwin-x64": "1.0.4", + "@img/sharp-libvips-linux-arm": "1.0.5", + "@img/sharp-libvips-linux-arm64": "1.0.4", + "@img/sharp-libvips-linux-s390x": "1.0.4", + "@img/sharp-libvips-linux-x64": "1.0.4", + "@img/sharp-libvips-linuxmusl-arm64": "1.0.4", + "@img/sharp-libvips-linuxmusl-x64": "1.0.4", + "@img/sharp-linux-arm": "0.33.5", + "@img/sharp-linux-arm64": "0.33.5", + "@img/sharp-linux-s390x": "0.33.5", + "@img/sharp-linux-x64": "0.33.5", + "@img/sharp-linuxmusl-arm64": "0.33.5", + "@img/sharp-linuxmusl-x64": "0.33.5", + "@img/sharp-wasm32": "0.33.5", + "@img/sharp-win32-ia32": "0.33.5", + "@img/sharp-win32-x64": "0.33.5" + } + }, + "node_modules/sharp/node_modules/detect-libc": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -5764,6 +6204,21 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "license": "MIT" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", diff --git a/package.json b/package.json index 310299c..c817daf 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "react-dom": "^18", "react-icons": "^5.3.0", "react-scroll-parallax": "^3.4.5", - "sass": "^1.81.0" + "sass": "^1.81.0", + "sharp": "^0.33.5" }, "devDependencies": { "@types/node": "^20", From 838af61fb596490248d564ccdfe70a1227308ced Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Sat, 8 Feb 2025 22:20:37 -0800 Subject: [PATCH 15/25] cloudtop file --- app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx index 219c54d..d806ed0 100644 --- a/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx +++ b/app/(pages)/(index-page)/_components/BigVinyl/BigVinyl.tsx @@ -6,7 +6,7 @@ import Image from 'next/image'; import cloudBottom from '@public/BigVinyl/CloudBottom.svg'; import cloudBottomDim from '@public/BigVinyl/CloudBottomDim.svg'; import cloudCenter from '@public/BigVinyl/CloudCenter.svg'; -import cloudTop from '@public/BigVinyl/cloudTop.svg'; +import cloudTop from '@public/BigVinyl/CloudTop.svg'; //import vinyl from '/public/BigVinyl/Vinyl.svg'; import vinyl from '@public/BigVinyl/Vinyl_text_style_1.svg'; //import vinyl from '/public/BigVinyl/Vinyl_text_style_2.svg'; From 0b796cfb7556934f8884f41f6b614e776fa050b9 Mon Sep 17 00:00:00 2001 From: "Anjali (Jay) Jain" <116294517+JayJ104@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:35:21 -0800 Subject: [PATCH 16/25] donate (#51) * Created files for donate * Added Seal and adjusted next.config.js * Added SVG's to Images folder * Updated SVG names * Positioned grass and text * Update Donate.module.scss * Update Donate.module.scss * Added button * Replaced svgs * Removed hardcoded parts * Adjusted styling for large desktop view * Adjusted styling for tablet and sm-desktop * Styling for phone * sm phone + removed borders * updated assets * removed placeholder code * moved files around * donate section for desktop and small desktop * responsiveness done --------- Co-authored-by: Haylie Tan --- .../_components/Donate/Donate.module.scss | 291 ++++++++++++++++++ .../_components/Donate/Donate.tsx | 95 ++++++ .../_components/FAQ/AccordionFAQ.module.scss | 4 + .../_components/FAQ/AccordionFAQ.tsx | 20 +- .../_components/FAQ/Assets/dropDown.tsx | 11 - .../_components/FAQ/Assets/plusHorizontal.tsx | 17 - .../_components/FAQ/Assets/plusVertical.tsx | 17 - .../_components/FAQ/DonationPlaceholder.tsx | 14 - .../_components/FAQ/FAQ.module.scss | 7 +- .../(index-page)/_components/FAQ/FAQ.tsx | 4 +- app/(pages)/(index-page)/page.tsx | 4 +- next.config.mjs | 13 +- public/images/Donate/Heart.svg | 3 + public/images/Donate/dark_grass_droplet.svg | 4 + public/images/Donate/light_grass_bg.svg | 6 + public/images/donate/cow_on_grass.svg | 36 +++ public/images/donate/dark_grass_hanging.svg | 3 + public/images/donate/dark_grass_left.svg | 3 + public/images/donate/dark_grass_top.svg | 7 + public/images/faq/plus_horizontal.svg | 15 + public/images/faq/plus_vertical.svg | 15 + 21 files changed, 517 insertions(+), 72 deletions(-) create mode 100644 app/(pages)/(index-page)/_components/Donate/Donate.module.scss create mode 100644 app/(pages)/(index-page)/_components/Donate/Donate.tsx delete mode 100644 app/(pages)/(index-page)/_components/FAQ/Assets/dropDown.tsx delete mode 100644 app/(pages)/(index-page)/_components/FAQ/Assets/plusHorizontal.tsx delete mode 100644 app/(pages)/(index-page)/_components/FAQ/Assets/plusVertical.tsx delete mode 100644 app/(pages)/(index-page)/_components/FAQ/DonationPlaceholder.tsx create mode 100644 public/images/Donate/Heart.svg create mode 100644 public/images/Donate/dark_grass_droplet.svg create mode 100644 public/images/Donate/light_grass_bg.svg create mode 100644 public/images/donate/cow_on_grass.svg create mode 100644 public/images/donate/dark_grass_hanging.svg create mode 100644 public/images/donate/dark_grass_left.svg create mode 100644 public/images/donate/dark_grass_top.svg create mode 100644 public/images/faq/plus_horizontal.svg create mode 100644 public/images/faq/plus_vertical.svg diff --git a/app/(pages)/(index-page)/_components/Donate/Donate.module.scss b/app/(pages)/(index-page)/_components/Donate/Donate.module.scss new file mode 100644 index 0000000..a0f2fd4 --- /dev/null +++ b/app/(pages)/(index-page)/_components/Donate/Donate.module.scss @@ -0,0 +1,291 @@ +@import '@globals/styles/mixins.scss'; + +.container { + display: inline-block; /* Ensures it only takes the size of its content */ + position: relative; + width: 100%; + margin-left: -80px; + + > img { + width: 100%; + } +} + +.dark_grass_container { + position: absolute; + top: -21%; + height: 100%; + width: 105%; + margin-left: -10%; + + display: flex; + gap: 0; +} + +.dark_grass_left { + position: relative; + width: 30%; + > img { + position: absolute; + width: 100%; + top: 10%; + right: 0; + } +} + +.dark_grass_right { + display: flex; + flex-direction: column; + height: 100%; + width: 70%; +} + +.dark_grass_top { + position: relative; + width: 100%; + text-align: left; + + img { + width: 100%; + // object-fit: fill; + } + + h2 { + position: absolute; + // bottom: 25px; + bottom: 15%; + left: 25px; + color: white; + font-weight: 700; + line-height: 43.546px; /* 111.111% */ + letter-spacing: 0.784px; + z-index: 10; + } +} + +.dark_grass_hanging { + width: 100%; + display: flex; + justify-content: space-between; +} + +.information { + position: relative; + + width: 35%; + + z-index: 10; + display: flex; + flex-direction: column; + + > img { + width: 90%; + object-fit: contain; + } +} + +.link_wrapper { + position: absolute; + + width: 90%; + + display: flex; + flex-direction: column; + padding-right: 6%; + gap: 20px; + + .seal_wrapper { + position: relative; + width: 70%; + margin: auto; + aspect-ratio: 1; + } + + .sponsorButton { + width: 70%; + margin: auto; + + font-weight: 700; + // overflow: hidden; + background: #ffc53d28; + // transition: background 200ms ease, flex-direction 200ms ease; + color: var(--highlight-yellow); + padding: 14px 20px 15px 60px; + border-radius: 100px; + display: flex; + justify-content: space-around; + align-items: center; + gap: 20px; + position: relative; + text-decoration: none; + transition: all 0.2s ease; + + &:hover { + cursor: pointer; + background: var(--highlight-yellow); + color: #122f40; + padding: 14px 60px 15px 20px; + + .heartButton { + transform: translateX(80px); + } + } + } + .heartButton { + height: 100%; + aspect-ratio: 1; + padding: 10%; + background: var(--highlight-yellow); + opacity: 1; + border-radius: 100px; + left: 0; + position: absolute; + transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); + box-shadow: 0px 9px 75px rgba(0, 0, 0, 0.75); + + img { + width: 90%; + height: 90%; + } + } +} + +.dark_grass_droplet { + margin-left: -20%; + width: 5%; + img { + width: 100%; + } +} + +.cow_on_grass { + padding: 25px 0px; + width: 50%; + + img { + width: 100%; + } +} + +@include desktop { + .container { + margin-left: -30px; + h2 { + font-size: 2.25rem; + } + } + .information { + width: 40%; + } + .dark_grass_droplet { + margin-left: -5%; + } + .cow_on_grass { + // width: 40%; + width: auto; + img { + width: 95%; + } + } +} +@include sm-desktop { + .container { + h2 { + font-size: 2rem; + } + } + .information { + width: 53%; + } + .link_wrapper { + gap: 15px; + .sponsorButton { + padding: 10px 20px 10px 50px; + } + .heartButton { + padding: 6%; + } + } + .dark_grass_droplet { + margin-left: -4%; + } + .cow_on_grass { + img { + width: 90%; + } + } +} +@include tablet { + .container { + h2 { + font-size: 1.5rem; + bottom: 8%; + } + } + .dark_grass_container { + top: -27%; + } + .information { + width: 70%; + } + .link_wrapper { + gap: 10px; + .sponsorButton { + font-size: 0.75rem; + padding: 10px 20px 10px 40px; + } + } + .cow_on_grass { + img { + width: 80%; + } +}} +@include phone { + .container { + width: 150%; + + h2 { + font-size: 1.75rem; + left: 4%; + bottom: 15%; + } + } + .information { + width: 45%; + } + .link_wrapper { + gap: 25px; + .sponsorButton { + font-size: 1.3rem; + padding: 15px 20px 15px 65px; + } + .heartButton { + height: 90%; + } + } + .cow_on_grass { + visibility: hidden; + } +} +@include sm-phone { + .container { + h2 { + font-size: 1rem; + bottom: 10%; + left: 5%; + } + } + + .link_wrapper { + gap: 10px; + .sponsorButton { + font-size: 0.7rem; + padding: 8px 20px 8px 30%; + } + .heartButton { + height: 80%; + } + + } + +} diff --git a/app/(pages)/(index-page)/_components/Donate/Donate.tsx b/app/(pages)/(index-page)/_components/Donate/Donate.tsx new file mode 100644 index 0000000..3ff80cf --- /dev/null +++ b/app/(pages)/(index-page)/_components/Donate/Donate.tsx @@ -0,0 +1,95 @@ +'use client'; +import Link from 'next/link'; +import Image from 'next/image'; + +import style from './Donate.module.scss'; + +const Donate = () => ( +

+ donate section background + +
+
+ donate section background +
+
+
+ donate section background +

support for social good.

+
+
+
+ donate section background +
+ + Guidestar Transparency Seal + + +
+ Heart blue icon +
+ Donate + +
+
+
+ donate section background +
+
+ donate section background +
+
+
+
+
+); + +export default Donate; diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss index 7024b3b..9965389 100644 --- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss +++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss @@ -62,6 +62,10 @@ visibility: visible; transform: rotate(90deg); padding-left: 15%; + + >img { + max-width: none; + } } } } diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx index 1f20e80..a7e4e3d 100644 --- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx +++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx @@ -3,11 +3,7 @@ import React from 'react'; import styles from './AccordionFAQ.module.scss'; import Link from 'next/link'; import { Accordion, AccordionItem as Item } from '@szhsin/react-accordion'; -// import { DropDownArrow } from './Assets/dropDown'; -import { PlusHorizontal } from './Assets/plusHorizontal'; -import { PlusVertical } from './Assets/plusVertical'; -// import { Minus } from './Assets/minus.svg'; -// import { Plus } from './Assets/plus.svg'; +import Image from 'next/image'; const whatIsHackathonAnswer = ( <> @@ -133,9 +129,19 @@ const AccordionFAQ = () => {

{question}

- + expand icon
- + collapse icon
} diff --git a/app/(pages)/(index-page)/_components/FAQ/Assets/dropDown.tsx b/app/(pages)/(index-page)/_components/FAQ/Assets/dropDown.tsx deleted file mode 100644 index 8ffdaf0..0000000 --- a/app/(pages)/(index-page)/_components/FAQ/Assets/dropDown.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export const DropDownArrow = () => ( - - - -); diff --git a/app/(pages)/(index-page)/_components/FAQ/Assets/plusHorizontal.tsx b/app/(pages)/(index-page)/_components/FAQ/Assets/plusHorizontal.tsx deleted file mode 100644 index 39e6ea6..0000000 --- a/app/(pages)/(index-page)/_components/FAQ/Assets/plusHorizontal.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export const PlusHorizontal = () => ( - - - -); diff --git a/app/(pages)/(index-page)/_components/FAQ/Assets/plusVertical.tsx b/app/(pages)/(index-page)/_components/FAQ/Assets/plusVertical.tsx deleted file mode 100644 index 5e6b1af..0000000 --- a/app/(pages)/(index-page)/_components/FAQ/Assets/plusVertical.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export const PlusVertical = () => ( - - - -); diff --git a/app/(pages)/(index-page)/_components/FAQ/DonationPlaceholder.tsx b/app/(pages)/(index-page)/_components/FAQ/DonationPlaceholder.tsx deleted file mode 100644 index f18a756..0000000 --- a/app/(pages)/(index-page)/_components/FAQ/DonationPlaceholder.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Image from 'next/image'; - -export default function DonationPlaceholder() { - return ( -
- waterfall gradient -
- ); -} diff --git a/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss index 7dfb82f..2be15c3 100644 --- a/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss +++ b/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss @@ -3,6 +3,7 @@ .main_container{ position: relative; // height: 100% + overflow-x: clip; } .container { display: flex; @@ -18,8 +19,12 @@ position: relative; } .donation{ - padding-right: 10%; + padding-right: 7%; position: relative; + + @include phone { + padding: 0; + } } .waterfall { width: 20%; diff --git a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx index 812f18c..300fd40 100644 --- a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx +++ b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx @@ -3,7 +3,7 @@ import AccordionFAQ from './AccordionFAQ'; import Waterfall from './Waterfall'; import style from './FAQ.module.scss'; import Image from 'next/image'; -import DonationPlaceholder from './DonationPlaceholder'; +import Donate from '../Donate/Donate'; export default function FAQ() { return ( @@ -142,7 +142,7 @@ export default function FAQ() { height={10} className={style.grass_1} /> - + waterfall gradient -

About Section

+

Underwater Section

+ + diff --git a/public/images/Donate/dark_grass_droplet.svg b/public/images/Donate/dark_grass_droplet.svg new file mode 100644 index 0000000..9684d5c --- /dev/null +++ b/public/images/Donate/dark_grass_droplet.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/Donate/light_grass_bg.svg b/public/images/Donate/light_grass_bg.svg new file mode 100644 index 0000000..ca4865e --- /dev/null +++ b/public/images/Donate/light_grass_bg.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/donate/cow_on_grass.svg b/public/images/donate/cow_on_grass.svg new file mode 100644 index 0000000..3e1bb1e --- /dev/null +++ b/public/images/donate/cow_on_grass.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/donate/dark_grass_hanging.svg b/public/images/donate/dark_grass_hanging.svg new file mode 100644 index 0000000..242210f --- /dev/null +++ b/public/images/donate/dark_grass_hanging.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/donate/dark_grass_left.svg b/public/images/donate/dark_grass_left.svg new file mode 100644 index 0000000..aef64c9 --- /dev/null +++ b/public/images/donate/dark_grass_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/donate/dark_grass_top.svg b/public/images/donate/dark_grass_top.svg new file mode 100644 index 0000000..fbf3dc3 --- /dev/null +++ b/public/images/donate/dark_grass_top.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/faq/plus_horizontal.svg b/public/images/faq/plus_horizontal.svg new file mode 100644 index 0000000..838b4c9 --- /dev/null +++ b/public/images/faq/plus_horizontal.svg @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/public/images/faq/plus_vertical.svg b/public/images/faq/plus_vertical.svg new file mode 100644 index 0000000..1476bca --- /dev/null +++ b/public/images/faq/plus_vertical.svg @@ -0,0 +1,15 @@ + + + \ No newline at end of file From 09cd85ea073191909fe878aafca2969d34a431db Mon Sep 17 00:00:00 2001 From: Daniel Kim <125724364+Yatsz@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:37:37 -0800 Subject: [PATCH 17/25] Feat/landing hero mobile fixed (#45) * Hero Mobile Complete * fix * fixed * Updated to barrier at 625 --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../_components/hero/heroInfo.tsx | 28 +- .../_components/hero/heroMainSection.tsx | 143 ++++++++++ .../_components/hero/heroSection.tsx | 122 --------- .../(index-page)/_components/hero/heroSun.tsx | 11 +- app/(pages)/(index-page)/page.tsx | 2 +- public/Hero/eighth_note.svg | 4 + public/Hero/grass_mobile.svg | 252 ++++++++++++++++++ public/Hero/sixteenth_note.svg | 5 + public/Hero/star_2.svg | 3 + public/Hero/star_3.svg | 3 + public/Hero/star_4.svg | 3 + public/Hero/star_5.svg | 3 + public/Hero/star_one.svg | 3 + public/Hero/wave.svg | 5 +- public/Hero/wave_mobile.svg | 16 ++ tailwind.config.ts | 1 + 16 files changed, 459 insertions(+), 145 deletions(-) create mode 100644 app/(pages)/(index-page)/_components/hero/heroMainSection.tsx delete mode 100644 app/(pages)/(index-page)/_components/hero/heroSection.tsx create mode 100644 public/Hero/eighth_note.svg create mode 100644 public/Hero/grass_mobile.svg create mode 100644 public/Hero/sixteenth_note.svg create mode 100644 public/Hero/star_2.svg create mode 100644 public/Hero/star_3.svg create mode 100644 public/Hero/star_4.svg create mode 100644 public/Hero/star_5.svg create mode 100644 public/Hero/star_one.svg create mode 100644 public/Hero/wave_mobile.svg diff --git a/app/(pages)/(index-page)/_components/hero/heroInfo.tsx b/app/(pages)/(index-page)/_components/hero/heroInfo.tsx index ff72ffd..060fd5e 100644 --- a/app/(pages)/(index-page)/_components/hero/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/hero/heroInfo.tsx @@ -3,40 +3,40 @@ import Image from 'next/image'; export default function HeroInfo() { return ( -
-
-

+

+
+

create for

-

+

social good

-

- April 20-21, 2025 @ UCenter +

+ April 19-20, 2025 @ UCenter

-
- -
-
- +
+ Apply to be a{' '}
diff --git a/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx b/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx new file mode 100644 index 0000000..25622ba --- /dev/null +++ b/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx @@ -0,0 +1,143 @@ +import React from 'react'; +import HeroInfo from './heroInfo'; +import HeroSun from './heroSun'; +import Image from 'next/image'; + +export default function HeroSection() { + return ( +
+
+
+ Cloud +
+
+ Cloud +
+
+ Cloud +
+
+ Cloud +
+
+ Cloud +
+ +
+ Medium green mountain +
+
+ Side mountain +
+
+ Grass +
+
+ Band +
+
+ wave +
+
+ wave +
+
+ grass +
+ +
+ +
+
+ Dark green mountain +
+
+ +
+
+
+
+ ); +} diff --git a/app/(pages)/(index-page)/_components/hero/heroSection.tsx b/app/(pages)/(index-page)/_components/hero/heroSection.tsx deleted file mode 100644 index 27cd7d4..0000000 --- a/app/(pages)/(index-page)/_components/hero/heroSection.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React from 'react'; -import HeroInfo from './heroInfo'; -import HeroSun from './heroSun'; -import Image from 'next/image'; - -export default function HeroSection() { - return ( -
-
-
- Cloud -
-
- Cloud -
-
- Cloud -
-
- Cloud -
-
- Cloud -
- -
- Medium green mountain -
-
- Side mountain -
-
- Grass -
-
- Band -
-
- wave -
- -
- -
-
- Dark green mountain -
-
- -
-
-
-
- ); -} diff --git a/app/(pages)/(index-page)/_components/hero/heroSun.tsx b/app/(pages)/(index-page)/_components/hero/heroSun.tsx index 9a0d50a..de86f7c 100644 --- a/app/(pages)/(index-page)/_components/hero/heroSun.tsx +++ b/app/(pages)/(index-page)/_components/hero/heroSun.tsx @@ -4,19 +4,16 @@ import Image from 'next/image'; export default function HeroSun() { return (
-
-
-
+
+
+
Sun Rays diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 73ce8bf..14f4fb8 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -2,7 +2,7 @@ 'use client'; import BigVinyl from './_components/BigVinyl/BigVinyl'; -import HeroSection from './_components/hero/heroSection'; +import HeroSection from './_components/hero/heroMainSection'; import SandCastle from './_components/SandCastle'; import Sponsors from './_components/Sponsors/Sponsors'; import styles from './page.module.scss'; diff --git a/public/Hero/eighth_note.svg b/public/Hero/eighth_note.svg new file mode 100644 index 0000000..5c99436 --- /dev/null +++ b/public/Hero/eighth_note.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/Hero/grass_mobile.svg b/public/Hero/grass_mobile.svg new file mode 100644 index 0000000..939e8b6 --- /dev/null +++ b/public/Hero/grass_mobile.svg @@ -0,0 +1,252 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Hero/sixteenth_note.svg b/public/Hero/sixteenth_note.svg new file mode 100644 index 0000000..0325b1b --- /dev/null +++ b/public/Hero/sixteenth_note.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/Hero/star_2.svg b/public/Hero/star_2.svg new file mode 100644 index 0000000..688faff --- /dev/null +++ b/public/Hero/star_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Hero/star_3.svg b/public/Hero/star_3.svg new file mode 100644 index 0000000..d74854b --- /dev/null +++ b/public/Hero/star_3.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Hero/star_4.svg b/public/Hero/star_4.svg new file mode 100644 index 0000000..6f0a493 --- /dev/null +++ b/public/Hero/star_4.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Hero/star_5.svg b/public/Hero/star_5.svg new file mode 100644 index 0000000..688faff --- /dev/null +++ b/public/Hero/star_5.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Hero/star_one.svg b/public/Hero/star_one.svg new file mode 100644 index 0000000..688faff --- /dev/null +++ b/public/Hero/star_one.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Hero/wave.svg b/public/Hero/wave.svg index 241117e..02b18c6 100644 --- a/public/Hero/wave.svg +++ b/public/Hero/wave.svg @@ -1,12 +1,15 @@ - + + + + diff --git a/public/Hero/wave_mobile.svg b/public/Hero/wave_mobile.svg new file mode 100644 index 0000000..d892970 --- /dev/null +++ b/public/Hero/wave_mobile.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index 9fd75e3..7f91bfd 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -48,6 +48,7 @@ export default { }, screens: { 'break-625': '625px', + 'break-400': '400px', }, }, }, From 835b1d24ff060199b813cf61dcb13b7b06f6f27e Mon Sep 17 00:00:00 2001 From: "Anjali (Jay) Jain" <116294517+JayJ104@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:47:49 -0800 Subject: [PATCH 18/25] Fix/donate folder (#52) * donation folder added * renamed folder to donate --- .../(index-page)/_components/Donate/Donate.tsx | 14 +++++++------- app/(pages)/_components/Donate/Donate.module.scss | 10 +++++----- public/images/{Donate => donate}/Heart.svg | 0 .../{Donate => donate}/dark_grass_droplet.svg | 0 .../images/{Donate => donate}/light_grass_bg.svg | 0 5 files changed, 12 insertions(+), 12 deletions(-) rename public/images/{Donate => donate}/Heart.svg (100%) rename public/images/{Donate => donate}/dark_grass_droplet.svg (100%) rename public/images/{Donate => donate}/light_grass_bg.svg (100%) diff --git a/app/(pages)/(index-page)/_components/Donate/Donate.tsx b/app/(pages)/(index-page)/_components/Donate/Donate.tsx index 3ff80cf..3b88043 100644 --- a/app/(pages)/(index-page)/_components/Donate/Donate.tsx +++ b/app/(pages)/(index-page)/_components/Donate/Donate.tsx @@ -7,7 +7,7 @@ import style from './Donate.module.scss'; const Donate = () => (
donate section background (
donate section background (
donate section background (
donate section background ( >
Heart blue icon (
donate section background (
donate section background Date: Sun, 9 Feb 2025 01:49:29 -0800 Subject: [PATCH 19/25] Feat/big wave (#50) * pain * pain part 2 * frame built out * not moving, no mobile * desktop finished * fixed merge conflict --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../_components/BigWave/BigWave.module.scss | 255 ++++++++++++++++++ .../_components/BigWave/BigWave.tsx | 89 ++++++ .../BigWave/Statistics.module.scss | 28 ++ .../_components/BigWave/Statistics.tsx | 32 +++ app/(pages)/(index-page)/page.tsx | 33 +-- .../NumberCountUp/NumberCountUp.tsx | 71 +++++ public/index/wave/bottom-left.svg | 11 + public/index/wave/bottom-right.svg | 19 ++ public/index/wave/bottom.svg | 8 + public/index/wave/box-top.svg | 3 + public/index/wave/bright-accent.svg | 3 + public/index/wave/bright-accents.svg | 5 + public/index/wave/dark-accents.svg | 5 + public/index/wave/ducky.svg | 26 ++ public/index/wave/eighth-note.svg | 11 + public/index/wave/right.svg | 11 + public/index/wave/top-right.svg | 19 ++ public/index/wave/two-eighth-note.svg | 12 + public/index/wave/wave-layer-1.svg | 5 + public/index/wave/wave-layer-2.svg | 4 + public/index/wave/wave-layer-3.svg | 4 + public/index/wave/wave-layer-4.svg | 8 + 22 files changed, 633 insertions(+), 29 deletions(-) create mode 100644 app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss create mode 100644 app/(pages)/(index-page)/_components/BigWave/BigWave.tsx create mode 100644 app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss create mode 100644 app/(pages)/(index-page)/_components/BigWave/Statistics.tsx create mode 100644 app/(pages)/_components/NumberCountUp/NumberCountUp.tsx create mode 100644 public/index/wave/bottom-left.svg create mode 100644 public/index/wave/bottom-right.svg create mode 100644 public/index/wave/bottom.svg create mode 100644 public/index/wave/box-top.svg create mode 100644 public/index/wave/bright-accent.svg create mode 100644 public/index/wave/bright-accents.svg create mode 100644 public/index/wave/dark-accents.svg create mode 100644 public/index/wave/ducky.svg create mode 100644 public/index/wave/eighth-note.svg create mode 100644 public/index/wave/right.svg create mode 100644 public/index/wave/top-right.svg create mode 100644 public/index/wave/two-eighth-note.svg create mode 100644 public/index/wave/wave-layer-1.svg create mode 100644 public/index/wave/wave-layer-2.svg create mode 100644 public/index/wave/wave-layer-3.svg create mode 100644 public/index/wave/wave-layer-4.svg diff --git a/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss b/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss new file mode 100644 index 0000000..e75f2cf --- /dev/null +++ b/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss @@ -0,0 +1,255 @@ + +$scale: 0.9; +$bot-left-w: 355px; +$bot-left-h: 904px; +$bot-h: 159px; +$bot-right-w: 240px; +$bot-right-h: 318px; +$right-w: 80px; +$right-h: 519px; +$right-flex-h: 519px; +$top-right-w: 240px; +$top-right-h: 513px; +$top-right-baseline-prop: 0.31; + +$box-top-w: 1368px; +$box-top-h: 247px; + +$wave-1-w: 1631px; +$wave-1-h: 509px; +$wave-2-w: 1522px; +$wave-2-h: 478px; +$wave-3-w: 1562px; +$wave-3-h: 476px; +$wave-4-w: 922px; +$wave-4-h: 444px; + +$bottom-padding: 16px; + +$wave-amplitude: -4%; +$wave-period: 5s; + +.container { + position: relative; + overflow-x: clip; +} + +.stats_container { + background-color: #173A52; + padding: 0 180px; + height: calc( + $bottom-padding + + $right-flex-h + + $scale * calc($bot-right-h + $top-right-h * $top-right-baseline-prop) + + calc($box-top-h * 0.33) + ); + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.stats { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 44px; + + .sponsor_button { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: var(--background-dark); + font-size: 1.125rem; + font-weight: 700; + background-color: var(--highlight-yellow); + padding: 12px 64px; + border-radius: 100px; + } +} + +.duck_group { + position: absolute; + bottom: calc($bot-h * 0.4); + left: calc($bot-left-w * 0.1); + transform: scale($scale); +} + +.eighth_note { + position: absolute; + bottom: calc($bot-h * 2.15); + left: calc($bot-left-w * 0.4); + transform: scale($scale); +} + +.two_eighth_note { + position: absolute; + bottom: calc($bot-h * 2.35); + left: calc($bot-left-w * 0.28); + transform: scale($scale); +} + +.bright_accents { + position: absolute; + bottom: calc($bot-left-h * $scale * 1.0); + left: 60%; + transform: scale($scale) translate(-50%, 100%); +} + +.dark_accents { + position: absolute; + bottom: calc($bot-h * 1.2); + left: 70%; + transform: scale($scale) translate(-50%, 0%); +} + +.bright_accent { + position: absolute; + bottom: calc($bot-left-h * $scale * 1.0); + left: 30%; + transform: scale($scale) translate(-50%, -100%); +} + +.water { + width: 100%; + > div { + position: absolute; + + img { + width: 100%; + height: 100%; + } + } +} + +.bottom_left { + left: 0; + transform: translate(-33%); + bottom: $bottom-padding; + width: calc($bot-left-w * $scale); + height: auto; +} + +.bottom { + bottom: $bottom-padding; + left: calc($bot-left-w * $scale * 0.66); + height: calc($bot-h * $scale); + width: calc(100% - $bot-left-w * $scale * 0.66 - $bot-right-w * $scale); +} + +.bottom_right { + bottom: $bottom-padding; + right: 0; + width: calc($bot-right-w * $scale); +} + +.right { + bottom: calc($bottom-padding + $bot-right-h * $scale); + right: 0; + width: calc($right-w * $scale); + height: $right-flex-h; + z-index: 3; +} + +.top_right { + bottom: calc($bottom-padding + $scale * $bot-right-h + $right-flex-h); + right: 0; + width: calc($top-right-w * $scale); + z-index: 2; +} + +.box_top { + top: 0; + height: calc($box-top-h * $scale); + width: 96%; +} + +@keyframes wave-1-motion { + 0% { + transform: translateX(0); + } + 50% { + transform: translateX($wave-amplitude); + } + 100% { + transform: translateX(0); + } +} + +@keyframes wave-2-motion { + 0% { + transform: translateX(2%); + } + 50% { + transform: translateX(calc($wave-amplitude + 2%)); + } + 100% { + transform: translateX(2%); + } +} + +@keyframes wave-3-motion { + 0% { + transform: translate(8%, 0.85%); + } + 50% { + transform: translate(calc($wave-amplitude + 10%), 0.85%); + } + 100% { + transform: translate(8%, 0.85%); + } +} + +@keyframes wave-4-motion { + 0% { + transform: translateX(10%); + } + 50% { + transform: translateX(calc($wave-amplitude + 10%)); + } + 100% { + transform: translateX(10%); + } +} + +.wave { + bottom: calc($bottom-padding + $right-flex-h + $scale * calc($bot-right-h + $top-right-h * $top-right-baseline-prop)); + left: -5%; + width: 110%; +} + +.wave_layer_1 { + z-index: 10; + height: calc($wave-1-h * $scale); + animation: wave-1-motion $wave-period infinite ease-in-out; +} + +.wave_layer_2 { + z-index: 9; + transform: translateX(2%); + height: calc($wave-2-h * $scale); + animation: wave-2-motion $wave-period infinite ease-in-out; + animation-delay: 0.2s; +} + +.wave_layer_3 { + z-index: 8; + transform: translate(8%, 0.85%); + height: calc($wave-3-h * $scale); + animation: wave-3-motion $wave-period infinite ease-in-out; + animation-delay: 0.4s; +} + +.wave_layer_4 { + bottom: calc($bottom-padding + $right-flex-h + $scale * calc($bot-right-h + $top-right-h * $top-right-baseline-prop)); + right: 0; + z-index: 0; + height: calc($wave-4-h * $scale); + width: 60%; + transform: translateX(10%); + animation: wave-4-motion $wave-period infinite ease-in-out; + animation-delay: 0.6s; +} \ No newline at end of file diff --git a/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx b/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx new file mode 100644 index 0000000..1e2af59 --- /dev/null +++ b/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx @@ -0,0 +1,89 @@ +'use client'; +import Link from 'next/link'; +import Image from 'next/image'; +import styles from './BigWave.module.scss'; +import Statistics from './Statistics'; + +import bottomLeft from '@public/index/wave/bottom-left.svg'; +import bottomRight from '@public/index/wave/bottom-right.svg'; +import topRight from '@public/index/wave/top-right.svg'; +import right from '@public/index/wave/right.svg'; +import bottom from '@public/index/wave/bottom.svg'; +import boxTop from '@public/index/wave/box-top.svg'; +import waveLayer1 from '@public/index/wave/wave-layer-1.svg'; +import waveLayer2 from '@public/index/wave/wave-layer-2.svg'; +import waveLayer3 from '@public/index/wave/wave-layer-3.svg'; +import waveLayer4 from '@public/index/wave/wave-layer-4.svg'; + +import duck from '@public/index/wave/ducky.svg'; +import eightNote from '@public/index/wave/eighth-note.svg'; +import twoEigthNote from '@public/index/wave/two-eighth-note.svg'; + +import darkAccents from '@public/index/wave/dark-accents.svg'; +import brightAccents from '@public/index/wave/bright-accents.svg'; +import brightAccent from '@public/index/wave/bright-accent.svg'; + +export default function BigWave() { + return ( +
+
+
+ + + Sponsor 2025 + +
+
+
+
+ bottom-left-foam +
+
+ bottom-foam +
+
+ bottom-right-foam +
+
+ right-foam +
+
+ top-right-foam +
+
+ box-top +
+
+ wave-layer-1 +
+
+ wave-layer-2 +
+
+ wave-layer-3 +
+
+ wave-layer-4 +
+
+ duck +
+
+ eighth-note +
+
+ two-eighth-note +
+
+ bright-accents +
+
+ bright-accent +
+
+ dark-accents +
+
+
+ ); +} diff --git a/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss b/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss new file mode 100644 index 0000000..a3b3af3 --- /dev/null +++ b/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss @@ -0,0 +1,28 @@ +.stats { + display: flex; + flex-direction: row; + gap: 72px; + align-items: center; + justify-content: center; + padding: 24px; +} + +.stat { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px; +} + +.number { + font-size: 3.5rem; + font-weight: 800; + color: var(--highlight-blue); +} + +.number_label { + color: var(--text-light); + font-size: 2.25rem; + font-weight: 700; +} \ No newline at end of file diff --git a/app/(pages)/(index-page)/_components/BigWave/Statistics.tsx b/app/(pages)/(index-page)/_components/BigWave/Statistics.tsx new file mode 100644 index 0000000..eaed739 --- /dev/null +++ b/app/(pages)/(index-page)/_components/BigWave/Statistics.tsx @@ -0,0 +1,32 @@ +'use client'; + +import NumberCountUp from '@components/NumberCountUp/NumberCountUp'; +import styles from './Statistics.module.scss'; + +const ANIMATION_LEN = 2000; + +const statsData = [ + { stat: 850, text: 'HACKERS', suffix: '+' }, + { stat: 24, text: 'HOURS' }, + { stat: 150, text: 'PROJECTS', suffix: '+' }, + { stat: 10, text: 'PRIZES', prefix: '$', suffix: 'k+' }, +]; + +export default function Statistics() { + return ( +
+
+ {statsData.map((item) => ( +
+

+ {item.prefix} + + {item.suffix} +

+

{item.text}

+
+ ))} +
+
+ ); +} diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 14f4fb8..6ecba83 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -8,41 +8,16 @@ import Sponsors from './_components/Sponsors/Sponsors'; import styles from './page.module.scss'; import FAQ from './_components/FAQ/FAQ'; import Underwater from '../_components/Underwater/Underwater'; +import BigWave from './_components/BigWave/BigWave'; export default function Home() { return (
- {/* Intro Section */} - {/*

- Halo! Welcome to the HackDavis template repo :D -

-

- Halo! Welcome to the HackDavis template repo :D -

-

- Halo! Welcome to the HackDavis template repo :D -

-

- Halo! Welcome to the HackDavis template repo :D -

*/} -
- -
- - {/* Sections for Testing */} -
-

Underwater Section

-
+ + -
- {/*

FAQ Section

*/} +
diff --git a/app/(pages)/_components/NumberCountUp/NumberCountUp.tsx b/app/(pages)/_components/NumberCountUp/NumberCountUp.tsx new file mode 100644 index 0000000..c2b64fd --- /dev/null +++ b/app/(pages)/_components/NumberCountUp/NumberCountUp.tsx @@ -0,0 +1,71 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; + +interface NumberCountUpProps { + endValue: number; + startValue?: number; + duration: number; + className?: string; +} + +export default function NumberCountUp({ + endValue, + startValue = 0, + duration, + className, +}: NumberCountUpProps) { + const [value, setValue] = useState(startValue); + const timeStampRef = useRef(-1); + const elemRef = useRef(null); + + useEffect(() => { + const countUp = (timestamp: number) => { + if (value !== endValue) { + const progress = Math.min( + (timestamp - timeStampRef.current) / duration, + 1.0 + ); + + setValue(Math.ceil((endValue - startValue) * progress + startValue)); + requestAnimationFrame(countUp); + } + }; + + const isNumberInView = () => { + if (!elemRef.current) return false; + const elemTop = + elemRef.current.getBoundingClientRect().top - window.innerHeight; + return elemTop < -window.innerHeight * 0.3 && timeStampRef.current === -1; + }; + + const handleScroll = () => { + if (!elemRef.current) return; + + if (isNumberInView()) { + timeStampRef.current = document.timeline.currentTime as number; + window.removeEventListener('scroll', handleScroll); + requestAnimationFrame(countUp); + } + }; + + window.addEventListener('scroll', handleScroll, { + passive: true, + }); + + if (isNumberInView()) { + timeStampRef.current = document.timeline.currentTime as number; + requestAnimationFrame(countUp); + } + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [duration, endValue, startValue, value]); + + return ( + + {value} + + ); +} diff --git a/public/index/wave/bottom-left.svg b/public/index/wave/bottom-left.svg new file mode 100644 index 0000000..5645159 --- /dev/null +++ b/public/index/wave/bottom-left.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/index/wave/bottom-right.svg b/public/index/wave/bottom-right.svg new file mode 100644 index 0000000..77b95d9 --- /dev/null +++ b/public/index/wave/bottom-right.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/index/wave/bottom.svg b/public/index/wave/bottom.svg new file mode 100644 index 0000000..422919b --- /dev/null +++ b/public/index/wave/bottom.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/index/wave/box-top.svg b/public/index/wave/box-top.svg new file mode 100644 index 0000000..d65c1e5 --- /dev/null +++ b/public/index/wave/box-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/index/wave/bright-accent.svg b/public/index/wave/bright-accent.svg new file mode 100644 index 0000000..1afce40 --- /dev/null +++ b/public/index/wave/bright-accent.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/index/wave/bright-accents.svg b/public/index/wave/bright-accents.svg new file mode 100644 index 0000000..3a153d2 --- /dev/null +++ b/public/index/wave/bright-accents.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/index/wave/dark-accents.svg b/public/index/wave/dark-accents.svg new file mode 100644 index 0000000..cb3cd34 --- /dev/null +++ b/public/index/wave/dark-accents.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/index/wave/ducky.svg b/public/index/wave/ducky.svg new file mode 100644 index 0000000..3a535d9 --- /dev/null +++ b/public/index/wave/ducky.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index/wave/eighth-note.svg b/public/index/wave/eighth-note.svg new file mode 100644 index 0000000..65cf5dd --- /dev/null +++ b/public/index/wave/eighth-note.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/index/wave/right.svg b/public/index/wave/right.svg new file mode 100644 index 0000000..92a963a --- /dev/null +++ b/public/index/wave/right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/index/wave/top-right.svg b/public/index/wave/top-right.svg new file mode 100644 index 0000000..5d2611d --- /dev/null +++ b/public/index/wave/top-right.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/index/wave/two-eighth-note.svg b/public/index/wave/two-eighth-note.svg new file mode 100644 index 0000000..582d411 --- /dev/null +++ b/public/index/wave/two-eighth-note.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/index/wave/wave-layer-1.svg b/public/index/wave/wave-layer-1.svg new file mode 100644 index 0000000..d1e057b --- /dev/null +++ b/public/index/wave/wave-layer-1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/index/wave/wave-layer-2.svg b/public/index/wave/wave-layer-2.svg new file mode 100644 index 0000000..e06e74e --- /dev/null +++ b/public/index/wave/wave-layer-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/index/wave/wave-layer-3.svg b/public/index/wave/wave-layer-3.svg new file mode 100644 index 0000000..e6763cd --- /dev/null +++ b/public/index/wave/wave-layer-3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/index/wave/wave-layer-4.svg b/public/index/wave/wave-layer-4.svg new file mode 100644 index 0000000..738b886 --- /dev/null +++ b/public/index/wave/wave-layer-4.svg @@ -0,0 +1,8 @@ + + + + + + + + From c5bb265deabc47e6321118917a0e519a72897165 Mon Sep 17 00:00:00 2001 From: michelleyeoh <74385095+michelleyeoh@users.noreply.github.com> Date: Sun, 9 Feb 2025 14:26:42 -0800 Subject: [PATCH 20/25] button fix (#55) --- .../about-us/_components/Archives/CarouselArrows.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/(pages)/about-us/_components/Archives/CarouselArrows.module.scss b/app/(pages)/about-us/_components/Archives/CarouselArrows.module.scss index 14f46aa..e6e98c8 100644 --- a/app/(pages)/about-us/_components/Archives/CarouselArrows.module.scss +++ b/app/(pages)/about-us/_components/Archives/CarouselArrows.module.scss @@ -20,6 +20,7 @@ $active-button: #9DE7E5; justify-content: center; align-items: center; width: $button-width; + height: $button-width; aspect-ratio: 1; border-radius: 50%; cursor: pointer; From 45e8499f0d02d768e8597b7a0f180c8b7a307af8 Mon Sep 17 00:00:00 2001 From: michelleyeoh <74385095+michelleyeoh@users.noreply.github.com> Date: Sun, 9 Feb 2025 14:35:20 -0800 Subject: [PATCH 21/25] changed import image (#54) * changed import image * added missing assets --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../about-us/_components/Values/Values.tsx | 24 +++++------------ public/aboutUs/Values/bunny_tada.svg | 14 ++++++++++ public/aboutUs/Values/cow_tada.svg | 27 +++++++++++++++++++ public/aboutUs/Values/froggy_tada.svg | 14 ++++++++++ 4 files changed, 61 insertions(+), 18 deletions(-) create mode 100644 public/aboutUs/Values/bunny_tada.svg create mode 100644 public/aboutUs/Values/cow_tada.svg create mode 100644 public/aboutUs/Values/froggy_tada.svg diff --git a/app/(pages)/about-us/_components/Values/Values.tsx b/app/(pages)/about-us/_components/Values/Values.tsx index 80e19e7..cb5f798 100644 --- a/app/(pages)/about-us/_components/Values/Values.tsx +++ b/app/(pages)/about-us/_components/Values/Values.tsx @@ -1,5 +1,8 @@ import styles from './Values.module.scss'; import Image from 'next/image'; +import CowTada from '/public/aboutUs/Values/cow_tada.svg'; +import FroggyTada from '/public/aboutUs/Values/froggy_tada.svg'; +import BunnyTada from '/public/aboutUs/Values/bunny_tada.svg'; export default function Values() { return ( @@ -14,12 +17,7 @@ export default function Values() { grow in an inclusive environment.

- cow_tada + cow tada
@@ -29,12 +27,7 @@ export default function Values() { experience and an opportunity to explore a new discipline.

- cow_tada + froggy tada
@@ -44,12 +37,7 @@ export default function Values() { benefit local and global communities.

- cow_tada + bunny tada
diff --git a/public/aboutUs/Values/bunny_tada.svg b/public/aboutUs/Values/bunny_tada.svg new file mode 100644 index 0000000..011bcd0 --- /dev/null +++ b/public/aboutUs/Values/bunny_tada.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/aboutUs/Values/cow_tada.svg b/public/aboutUs/Values/cow_tada.svg new file mode 100644 index 0000000..c654d2a --- /dev/null +++ b/public/aboutUs/Values/cow_tada.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/aboutUs/Values/froggy_tada.svg b/public/aboutUs/Values/froggy_tada.svg new file mode 100644 index 0000000..9da2463 --- /dev/null +++ b/public/aboutUs/Values/froggy_tada.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + From ab23c98e213e450f1d1f89056390171f5b1dac60 Mon Sep 17 00:00:00 2001 From: Haylie Tan <141064325+haylietan@users.noreply.github.com> Date: Sun, 9 Feb 2025 14:36:04 -0800 Subject: [PATCH 22/25] Fixed responsiveness w/ assets and bunny (#53) Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- app/(pages)/_components/Underwater/Underwater.module.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/(pages)/_components/Underwater/Underwater.module.scss b/app/(pages)/_components/Underwater/Underwater.module.scss index 6b89672..ddc472d 100644 --- a/app/(pages)/_components/Underwater/Underwater.module.scss +++ b/app/(pages)/_components/Underwater/Underwater.module.scss @@ -366,7 +366,7 @@ .container { background-color: var(--sea-background); - padding: 15% 5% 0% 15%; + padding: 15% 5% 25% 15%; display: flex; align-items: center; justify-content: flex-end; @@ -390,6 +390,8 @@ .textcontainer { // padding: 10% 10% 0% 0%; + padding-left: 15%; + padding-right: 5%; width: 100%; z-index: 1; @@ -474,7 +476,7 @@ .container { background-color: var(--sea-background); - padding: 15% 5% 0% 15%; + padding: 15% 5% 50% 15%; display: flex; align-items: center; justify-content: flex-end; @@ -497,6 +499,7 @@ } .textcontainer { + padding-left: 0%; width: 100%; z-index: 1; From 90e8a3fa9911d4f91440ab891e10e35c599a73f8 Mon Sep 17 00:00:00 2001 From: michelleyeoh <74385095+michelleyeoh@users.noreply.github.com> Date: Sun, 9 Feb 2025 16:42:11 -0800 Subject: [PATCH 23/25] Faq assets (#56) * asset transition * changed asset rotation --- .../_components/FAQ/AccordionFAQ.module.scss | 20 +++------ .../_components/FAQ/AccordionFAQ.tsx | 2 +- .../(index-page)/_components/FAQ/FAQ.tsx | 42 +++++++++---------- .../_components/FAQ/Waterfall.tsx | 8 ++-- public/images/faq/plus_vertical.svg | 15 ------- 5 files changed, 32 insertions(+), 55 deletions(-) delete mode 100644 public/images/faq/plus_vertical.svg diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss index 9965389..f03f941 100644 --- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss +++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss @@ -52,17 +52,11 @@ align-items: center; width: 100%; //for lines to stretch throughout the FAQ section - // .dropDownArrow { - // margin-left: auto; - // transform: rotate(0deg); - // transition: transform 0.3s cubic-bezier(0, 0, 0, 1); - // transform-origin: center center; - // } .dropDownPlus{ - visibility: visible; - transform: rotate(90deg); - padding-left: 15%; - + position: absolute; + transform: rotate(-90deg); + transition: transform 0.3s cubic-bezier(0, 0, 0, 1); + >img { max-width: none; } @@ -79,11 +73,9 @@ justify-content: space-between; align-items: center; - // .dropDownArrow { - // transform: rotate(180deg); - // } .dropDownPlus{ - visibility: hidden; + transform: rotate(0deg); + transition: transform 0.3s cubic-bezier(0, 0, 0, 1); } } } diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx index a7e4e3d..4f39df1 100644 --- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx +++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx @@ -130,7 +130,7 @@ const AccordionFAQ = () => {
expand icon waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient waterfall gradient diff --git a/public/images/faq/plus_vertical.svg b/public/images/faq/plus_vertical.svg deleted file mode 100644 index 1476bca..0000000 --- a/public/images/faq/plus_vertical.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - \ No newline at end of file From de82d32d1446b9ee3237d099c90536147c4196a8 Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Mon, 10 Feb 2025 16:04:30 -0800 Subject: [PATCH 24/25] adjusted for screen over 1400 (#57) * adjusted for screen over 1400 * increased background height for 2xl breakpoint --------- Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- app/(pages)/(index-page)/_components/SandCastle.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/(pages)/(index-page)/_components/SandCastle.tsx b/app/(pages)/(index-page)/_components/SandCastle.tsx index 5ca2b73..52894c1 100644 --- a/app/(pages)/(index-page)/_components/SandCastle.tsx +++ b/app/(pages)/(index-page)/_components/SandCastle.tsx @@ -56,8 +56,10 @@ function SandCastleContent() { function WhatIsHackDavisText() { return (
-

HackDavis

-

+

+ HackDavis +

+

is one of the largest collegiate hackathon in Califronia, where over 950 students, creators, and leaders come together to{' '} @@ -70,7 +72,7 @@ function WhatIsHackDavisText() { function SandCastleBackground({ children }: { children: React.ReactNode }) { return (

-
+
sand background Date: Mon, 10 Feb 2025 16:11:54 -0800 Subject: [PATCH 25/25] responsive waves (#58) Co-authored-by: Anjali Jay Jain <116294517+JayJ104@users.noreply.github.com> --- .../_components/BigWave/BigWave.module.scss | 244 ++++++++++++++---- .../_components/BigWave/BigWave.tsx | 22 +- .../BigWave/Statistics.module.scss | 41 ++- app/(pages)/_globals/styles/mixins.scss | 6 + public/index/wave/bright-accents.svg | 2 +- public/index/wave/wave-layer-4.svg | 8 +- 6 files changed, 255 insertions(+), 68 deletions(-) diff --git a/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss b/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss index e75f2cf..12d7268 100644 --- a/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss +++ b/app/(pages)/(index-page)/_components/BigWave/BigWave.module.scss @@ -1,13 +1,13 @@ +@import '@globals/styles/mixins.scss'; -$scale: 0.9; $bot-left-w: 355px; $bot-left-h: 904px; +$bot-left-prop: calc(237px / $bot-left-w); $bot-h: 159px; $bot-right-w: 240px; $bot-right-h: 318px; $right-w: 80px; $right-h: 519px; -$right-flex-h: 519px; $top-right-w: 240px; $top-right-h: 513px; $top-right-baseline-prop: 0.31; @@ -23,24 +23,50 @@ $wave-3-w: 1562px; $wave-3-h: 476px; $wave-4-w: 922px; $wave-4-h: 444px; +$wave-4-line-prop: calc(247px / $wave-4-h); + +$wave-top-gap: calc(0.0085 * $wave-3-h * var(--scale)); $bottom-padding: 16px; $wave-amplitude: -4%; $wave-period: 5s; +$ducky-w: 409px; +$ducky-h: 397px; + .container { position: relative; overflow-x: clip; + --scale: 0.9; + --right-flex-h: 519px; + --duck-scale: var(--scale); + --dash-scale: var(--scale); + + @include tablet { + --scale: 0.60; + --right-flex-h: 350px; + } + + @include phone { + --scale: 0.50; + --right-flex-h: 450px; + } + + @include sm-phone { + --scale: 0.50; + --right-flex-h: 624px; + --duck-scale: 0.6; + --dash-scale: 0.4; + } } .stats_container { background-color: #173A52; - padding: 0 180px; height: calc( $bottom-padding + - $right-flex-h + - $scale * calc($bot-right-h + $top-right-h * $top-right-baseline-prop) + + var(--right-flex-h) + + var(--scale) * calc($bot-right-h + $top-right-h * $top-right-baseline-prop) + calc($box-top-h * 0.33) ); @@ -55,7 +81,27 @@ $wave-period: 5s; flex-direction: column; justify-content: center; align-items: center; - gap: 44px; + gap: 64px; + + @include tablet { + gap: 52px; + } + + @include phone { + align-items: flex-start; + gap: 32px; + } + + @include sm-phone { + align-items: center; + justify-content: flex-start; + width: 100%; + height: 100%; + padding-top: calc($box-top-h * var(--scale) + 24px); + padding-left: calc($right-w * var(--scale)); + padding-right: calc($right-w * var(--scale)); + margin-right: calc($right-w * var(--scale)); + } .sponsor_button { display: flex; @@ -66,51 +112,138 @@ $wave-period: 5s; font-size: 1.125rem; font-weight: 700; background-color: var(--highlight-yellow); - padding: 12px 64px; + padding: 10px 64px; border-radius: 100px; + + @include phone { + font-size: 1.25rem; + padding: 4px 24px; + } } } .duck_group { position: absolute; - bottom: calc($bot-h * 0.4); - left: calc($bot-left-w * 0.1); - transform: scale($scale); + bottom: calc($bot-h * var(--scale) * 0.7); + left: calc($bot-left-w * var(--scale) * $bot-left-prop * 0.5); + + @include sm-phone { + left: 45%; + transform: translate(-50%, -10%); + } +} + +.duck_container { + position: relative; + width: calc($ducky-w * var(--duck-scale) * 0.69); + height: calc($ducky-h * var(--duck-scale) * 0.8); +} + +.duck { + position: absolute; + width: calc(var(--duck-scale) * $ducky-w); + bottom: 0; + left: 0; + + @keyframes duck { + 0% { + transform: translate(-12%, 8%); + } + 50% { + transform: translate(-12%, calc(8% + 20px)); + } + 100% { + transform: translate(-12%, 8%); + } + } + + animation: duck 4s infinite alternate ease-in-out; + animation-delay: 0.0s; } .eighth_note { position: absolute; - bottom: calc($bot-h * 2.15); - left: calc($bot-left-w * 0.4); - transform: scale($scale); + top: 0; + left: 0; + width: calc(53px * var(--duck-scale)); + + @keyframes eighth_note { + 0% { + transform: translate(80%, 10%); + } + 50% { + transform: translate(80%, calc(10% + 20px)); + } + 100% { + transform: translate(80%, 10%); + } + } + animation: eighth_note 4s infinite alternate ease-in-out; + animation-delay: 0.5s; } .two_eighth_note { position: absolute; - bottom: calc($bot-h * 2.35); - left: calc($bot-left-w * 0.28); - transform: scale($scale); + top: 0; + left: 0; + width: calc(74px * var(--duck-scale)); + + @keyframes two_eighth_note { + 0% { + transform: translate(-10%, -100%); + } + 50% { + transform: translate(-10%, calc(-100% + 20px)); + } + 100% { + transform: translate(-10%, -100%); + } + } + + animation: two_eighth_note 4s infinite alternate ease-in-out; + animation-delay: 1.0s; } .bright_accents { position: absolute; - bottom: calc($bot-left-h * $scale * 1.0); + top: calc($box-top-h * var(--dash-scale) * 1.0); + width: calc(307px * var(--dash-scale)); left: 60%; - transform: scale($scale) translate(-50%, 100%); + transform: translateX(-50%); + + @include sm-phone { + top: unset; + left: unset; + right: calc($right-w * var(--scale)); + bottom: calc($bot-left-h * var(--scale) * 0.95); + transform: scaleX(0.8); + } } .dark_accents { position: absolute; - bottom: calc($bot-h * 1.2); + width: calc(194px * var(--dash-scale)); + bottom: calc($bot-h * var(--dash-scale) * 1.4); left: 70%; - transform: scale($scale) translate(-50%, 0%); + transform: translate(-50%, 0%); + + @include sm-phone { + left: 65%; + bottom: calc($bot-left-h * var(--scale) * 0.7); + transform: scaleX(1.3) translate(-50%, 0%); + } } .bright_accent { position: absolute; - bottom: calc($bot-left-h * $scale * 1.0); + width: calc(132px * var(--dash-scale)); + top: calc($box-top-h * var(--dash-scale) * 0.85); left: 30%; - transform: scale($scale) translate(-50%, -100%); + transform: translate(-50%, 0%); + + @include sm-phone { + display: none; + } } .water { @@ -129,41 +262,41 @@ $wave-period: 5s; left: 0; transform: translate(-33%); bottom: $bottom-padding; - width: calc($bot-left-w * $scale); + width: calc($bot-left-w * var(--scale)); height: auto; } .bottom { bottom: $bottom-padding; - left: calc($bot-left-w * $scale * 0.66); - height: calc($bot-h * $scale); - width: calc(100% - $bot-left-w * $scale * 0.66 - $bot-right-w * $scale); + left: calc($bot-left-w * var(--scale) * 0.66); + height: calc($bot-h * var(--scale)); + width: calc(100% - $bot-left-w * var(--scale) * 0.66 - $bot-right-w * var(--scale)); } .bottom_right { bottom: $bottom-padding; right: 0; - width: calc($bot-right-w * $scale); + width: calc($bot-right-w * var(--scale)); } .right { - bottom: calc($bottom-padding + $bot-right-h * $scale); + bottom: calc($bottom-padding + $bot-right-h * var(--scale)); right: 0; - width: calc($right-w * $scale); - height: $right-flex-h; + width: calc($right-w * var(--scale)); + height: calc(var(--right-flex-h) + $wave-top-gap); z-index: 3; } .top_right { - bottom: calc($bottom-padding + $scale * $bot-right-h + $right-flex-h); + bottom: calc($bottom-padding + var(--scale) * $bot-right-h + var(--right-flex-h) + $wave-top-gap); right: 0; - width: calc($top-right-w * $scale); + width: calc($top-right-w * var(--scale)); z-index: 2; } .box_top { top: 0; - height: calc($box-top-h * $scale); + height: calc($box-top-h * var(--scale)); width: 96%; } @@ -181,75 +314,80 @@ $wave-period: 5s; @keyframes wave-2-motion { 0% { - transform: translateX(2%); + transform: translateX(5%); } 50% { - transform: translateX(calc($wave-amplitude + 2%)); + transform: translateX(calc($wave-amplitude + 5%)); } 100% { - transform: translateX(2%); + transform: translateX(5%); } } @keyframes wave-3-motion { 0% { - transform: translate(8%, 0.85%); + transform: translateX(15%); } 50% { - transform: translate(calc($wave-amplitude + 10%), 0.85%); + transform: translateX(calc($wave-amplitude + 15%)); } 100% { - transform: translate(8%, 0.85%); + transform: translateX(15%); } } @keyframes wave-4-motion { 0% { - transform: translateX(10%); + transform: translateX(3%); } 50% { - transform: translateX(calc($wave-amplitude + 10%)); + transform: translateX(calc($wave-amplitude + 3%)); } 100% { - transform: translateX(10%); + transform: translateX(3%); } } .wave { - bottom: calc($bottom-padding + $right-flex-h + $scale * calc($bot-right-h + $top-right-h * $top-right-baseline-prop)); + bottom: calc($bottom-padding + var(--right-flex-h) + var(--scale) * calc($bot-right-h + $top-right-h * $top-right-baseline-prop)); left: -5%; width: 110%; } .wave_layer_1 { z-index: 10; - height: calc($wave-1-h * $scale); + height: calc($wave-1-h * var(--scale)); animation: wave-1-motion $wave-period infinite ease-in-out; } .wave_layer_2 { z-index: 9; - transform: translateX(2%); - height: calc($wave-2-h * $scale); + height: calc($wave-2-h * var(--scale)); animation: wave-2-motion $wave-period infinite ease-in-out; animation-delay: 0.2s; } .wave_layer_3 { z-index: 8; - transform: translate(8%, 0.85%); - height: calc($wave-3-h * $scale); + height: calc($wave-3-h * var(--scale)); animation: wave-3-motion $wave-period infinite ease-in-out; animation-delay: 0.4s; } .wave_layer_4 { - bottom: calc($bottom-padding + $right-flex-h + $scale * calc($bot-right-h + $top-right-h * $top-right-baseline-prop)); + bottom: calc( + $bottom-padding + + var(--right-flex-h) + + var(--scale) * calc( + $bot-right-h + + $top-right-h * $top-right-baseline-prop + ) + + $wave-top-gap + ); right: 0; z-index: 0; - height: calc($wave-4-h * $scale); - width: 60%; - transform: translateX(10%); + height: calc($wave-4-h * var(--scale)); + width: 50%; animation: wave-4-motion $wave-period infinite ease-in-out; animation-delay: 0.6s; -} \ No newline at end of file +} diff --git a/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx b/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx index 1e2af59..2c98a86 100644 --- a/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx +++ b/app/(pages)/(index-page)/_components/BigWave/BigWave.tsx @@ -65,15 +65,6 @@ export default function BigWave() {
wave-layer-4
-
- duck -
-
- eighth-note -
-
- two-eighth-note -
bright-accents
@@ -84,6 +75,19 @@ export default function BigWave() { dark-accents
+
+
+
+ duck +
+
+ eighth-note +
+
+ two-eighth-note +
+
+
); } diff --git a/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss b/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss index a3b3af3..19812b5 100644 --- a/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss +++ b/app/(pages)/(index-page)/_components/BigWave/Statistics.module.scss @@ -1,10 +1,24 @@ +@import '@globals/styles/mixins.scss'; + .stats { display: flex; flex-direction: row; gap: 72px; align-items: center; justify-content: center; - padding: 24px; + + @include sm-desktop { + gap: 54px; + } + + @include tablet { + gap: 32px; + } + + @include phone { + flex-direction: column; + align-items: flex-start; + } } .stat { @@ -13,16 +27,41 @@ align-items: center; justify-content: center; gap: 2px; + + @include phone { + flex-direction: row; + justify-content: flex-start; + gap: 20px; + } } .number { font-size: 3.5rem; font-weight: 800; color: var(--highlight-blue); + + @include sm-desktop { + font-size: 3rem; + } + + @include tablet { + font-size: 2.5rem; + } + + @include sm-tablet { + font-size: 2.25rem; + } } .number_label { color: var(--text-light); font-size: 2.25rem; font-weight: 700; + @include sm-desktop { + font-size: 1.75rem; + } + + @include sm-desktop { + font-size: 1.675rem; + } } \ No newline at end of file diff --git a/app/(pages)/_globals/styles/mixins.scss b/app/(pages)/_globals/styles/mixins.scss index 048fca7..e05a923 100644 --- a/app/(pages)/_globals/styles/mixins.scss +++ b/app/(pages)/_globals/styles/mixins.scss @@ -16,6 +16,12 @@ } } +@mixin sm-tablet { + @media screen and (max-width: 900px) { + @content; + } +} + @mixin phone { @media screen and (max-width: 760px) { @content; diff --git a/public/index/wave/bright-accents.svg b/public/index/wave/bright-accents.svg index 3a153d2..d776519 100644 --- a/public/index/wave/bright-accents.svg +++ b/public/index/wave/bright-accents.svg @@ -1,4 +1,4 @@ - + diff --git a/public/index/wave/wave-layer-4.svg b/public/index/wave/wave-layer-4.svg index 738b886..3eaa347 100644 --- a/public/index/wave/wave-layer-4.svg +++ b/public/index/wave/wave-layer-4.svg @@ -1,8 +1,8 @@ - - - - + + + +