From 212ec0b9e606ca8cdeb49d3f6b8bb976237ea277 Mon Sep 17 00:00:00 2001 From: Stuart6557 Date: Wed, 13 Mar 2024 16:56:11 -0700 Subject: [PATCH 1/9] home page --- public/all-hands-on-deck.svg | 636 ++++++++++++++++++ public/arrow.svg | 3 + public/captains-classroom.svg | 186 +++++ public/landing-page-graphic.svg | 170 +++++ public/lost-at-sea.svg | 403 +++++++++++ public/marks-the-spot.svg | 329 +++++++++ public/white-square-green-border.svg | 13 + public/white-square-pink-border.svg | 14 + public/white-square-purple-border.svg | 13 + .../components/BackgroundGraphic/index.tsx | 9 + .../BackgroundGraphic/style.module.scss | 6 + src/app/globals.css | 10 + src/app/layout.tsx | 12 +- src/app/page.module.scss | 277 +++++++- src/app/page.tsx | 92 ++- tsconfig.json | 3 + 16 files changed, 2167 insertions(+), 9 deletions(-) create mode 100644 public/all-hands-on-deck.svg create mode 100644 public/arrow.svg create mode 100644 public/captains-classroom.svg create mode 100644 public/landing-page-graphic.svg create mode 100644 public/lost-at-sea.svg create mode 100644 public/marks-the-spot.svg create mode 100644 public/white-square-green-border.svg create mode 100644 public/white-square-pink-border.svg create mode 100644 public/white-square-purple-border.svg create mode 100644 src/app/components/BackgroundGraphic/index.tsx create mode 100644 src/app/components/BackgroundGraphic/style.module.scss diff --git a/public/all-hands-on-deck.svg b/public/all-hands-on-deck.svg new file mode 100644 index 0000000..9f21b8c --- /dev/null +++ b/public/all-hands-on-deck.svg @@ -0,0 +1,636 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..32d2f66 --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/captains-classroom.svg b/public/captains-classroom.svg new file mode 100644 index 0000000..9d690df --- /dev/null +++ b/public/captains-classroom.svg @@ -0,0 +1,186 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/landing-page-graphic.svg b/public/landing-page-graphic.svg new file mode 100644 index 0000000..38953d5 --- /dev/null +++ b/public/landing-page-graphic.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/lost-at-sea.svg b/public/lost-at-sea.svg new file mode 100644 index 0000000..d9d15c9 --- /dev/null +++ b/public/lost-at-sea.svg @@ -0,0 +1,403 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/marks-the-spot.svg b/public/marks-the-spot.svg new file mode 100644 index 0000000..4623d73 --- /dev/null +++ b/public/marks-the-spot.svg @@ -0,0 +1,329 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/white-square-green-border.svg b/public/white-square-green-border.svg new file mode 100644 index 0000000..48d54e9 --- /dev/null +++ b/public/white-square-green-border.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/white-square-pink-border.svg b/public/white-square-pink-border.svg new file mode 100644 index 0000000..7a295a7 --- /dev/null +++ b/public/white-square-pink-border.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/white-square-purple-border.svg b/public/white-square-purple-border.svg new file mode 100644 index 0000000..b07c7f9 --- /dev/null +++ b/public/white-square-purple-border.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/components/BackgroundGraphic/index.tsx b/src/app/components/BackgroundGraphic/index.tsx new file mode 100644 index 0000000..8a447eb --- /dev/null +++ b/src/app/components/BackgroundGraphic/index.tsx @@ -0,0 +1,9 @@ +import styles from './style.module.scss'; + +const BackgroundGraphic = () => { + return ( + Landing Page Graphic + ); +}; + +export default BackgroundGraphic; diff --git a/src/app/components/BackgroundGraphic/style.module.scss b/src/app/components/BackgroundGraphic/style.module.scss new file mode 100644 index 0000000..d33ca77 --- /dev/null +++ b/src/app/components/BackgroundGraphic/style.module.scss @@ -0,0 +1,6 @@ +.backgroundImage { + position: absolute; + margin: 0; + width: 100%; + z-index: 0; +} \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 157b0d0..7093225 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,7 +1,17 @@ +:root { + --Dark-Bleu: #003366; + --transparent: rgb(0, 0, 0, ); + --side-padding: 120px; + --side-padding-small: 30px; +} + html, body { width: 100%; height: 100%; margin: 0; padding: 0; + background: linear-gradient(180deg, #a9e0fff2 25.52%, #FFE2B6 76.79%, #FFACAC 98.6%), #FFF; + background-attachment: fixed; + z-index: 0; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9de4a50..2f0240d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,18 +1,22 @@ import './globals.css'; import type { Metadata } from 'next'; import { DM_Sans } from 'next/font/google'; +import BackgroundGraphic from './components/BackgroundGraphic'; -const dmSans = DM_Sans({ subsets: ['latin'] }); +const dmSans = DM_Sans({ subsets: ['latin'], display: 'swap' }); export const metadata: Metadata = { - title: 'ACM Static Site Template', - description: 'Template for making ACM websites!', + title: 'DiamondHacks', + description: "ACM at UCSD's first hackathon!", }; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - {children} + + + {children} + ); } diff --git a/src/app/page.module.scss b/src/app/page.module.scss index a79e515..aa70062 100644 --- a/src/app/page.module.scss +++ b/src/app/page.module.scss @@ -1,9 +1,284 @@ .main { - height: 100%; width: 100%; + // max-width: 100rem; display: flex; + flex-direction: column; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; + box-sizing: border-box; + color: var(--Dark-Bleu); + + h1, h2, h3, p { + margin: 0; + z-index: 2; + } +} + +.landing { + height: 100vh; + width: 100%; + padding: 0; + display: flex; + align-items: center; +} + +.cta { + position: absolute; + margin: 0 var(--side-padding) 0 var(--side-padding); + display: flex; + flex-direction: column; + + h1 { + font-size: 66px; + font-style: normal; + font-weight: 700; + line-height: 86px; + letter-spacing: -1px; + } + + p { + margin-top: 8px; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 32px; + } +} + +@media (max-width: 600px) { + .cta { + margin: 0 var(--side-padding-small) 0 var(--side-padding-small); + + h1 { + font-size: 46px; + line-height: 66px; + } + + p { + font-size: 18px; + line-height: 32px; + } + } +} + +.buttonsContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 40px; + + .applyNow { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.625rem; + font-size: 1.5rem; + font-weight: 500; + line-height: 2rem; + text-decoration: none; + color: white; + width: fit-content; + border-radius: 1.875rem; + background: var(--Dark-Bleu); + padding: 1rem 2.375rem 1rem 2rem; + transition: 0.3s all; + + &:hover { + gap: 1rem; + padding: 1rem 2rem; + + @media (max-width: 600px) { + padding: 0.5rem 2rem; + } + } + + @media (max-width: 600px) { + font-size: 1.125rem; + padding: 0.5rem 2.375rem 0.5rem 2rem; + } + } +} + +@media (max-width: 600px) { + .buttonsContainer { + margin-top: 24px; + flex-direction: column; + gap: 1rem; + } +} + +.buttonDivider { + width: 16px; +} + +.pageContainer { + width: calc(100% - 2 * var(--side-padding)); +} + +@media (max-width: 600px) { + .pageContainer { + width: calc(100% - 2 * var(--side-padding-small)); + } +} + +.welcome { + margin-top: 100px; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.welcomeMessage { + display: flex; + margin-top: 15vh; + width: 520px; + max-width: 520px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + + h2 { + font-size: 36px; + } + + p { + font-size: 16px; + } +} + +@media (max-width: 700px) { + .welcomeMessage { + width: 100%; + } +} + +.diamondsContainer { + padding: 0 5% 0 5%; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + gap: 5%; +} + +@media (max-width: 1000px) { + .diamondsContainer { + margin-top: 50px; + width: 100%; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + } + + .diamond { + max-width: 400px; + margin: 25px 0 25px 0; + } +} + +// @media (max-width: 800px) { +// .diamondsContainer { +// grid-template-columns: 1fr; +// margin-bottom: 100px; +// } +// } + +.diamond { + width: 100%; + aspect-ratio: 1 / 1; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; /* Need this in order for Image fill={true} to work */ +} + +.studentCount { + color: #E35E77; + font-size: 2.25rem; + font-weight: 700; + + @media (max-width: 600px) { + font-size: 1.6875rem; + } +} + +.eventCount { + color: #9179CC; + font-size: 2.25rem; + font-weight: 700; + + @media (max-width: 600px) { + font-size: 1.6875rem; + } +} + +.diamondText { + font-size: 1.5rem; + + @media (max-width: 600px) { + font-size: 1.125rem; + } +} + +.prizes { + color: #4CA98F; + font-size: 2.25rem; + font-weight: 700; + + @media (max-width: 600px) { + font-size: 1.6875rem; + } +} + +.tracks { + margin-top: 100px; + width: 100%; + + h2 { + font-size: 36px; + } + + h3 { + margin-top: 32px; + margin-bottom: 16px; + font-size: 24px; + font-weight: 500; + } + + p { + font-size: 16px; + font-weight: 400; + line-height: 21px; /* 131.25% */ + letter-spacing: 0.25px; + } +} + +.tracksContainer { + margin-top: 40px; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 80px; + row-gap: 40px; +} + +@media (max-width: 700px) { + .tracksContainer { + grid-template-columns: 1fr; + } +} + +.track { + width: 100%; + display: flex; + flex-direction: column; + + img { + width: 100%; + } } diff --git a/src/app/page.tsx b/src/app/page.tsx index 8d7d645..e6a3a17 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,14 +1,98 @@ +'use client'; + import styles from './page.module.scss'; import Image from 'next/image'; +import Arrow from '../../public/arrow.svg'; +import BackgroundGraphic from './components/BackgroundGraphic'; +import Link from 'next/link'; export default function Home() { + const dummy = () => {}; + return (
-
- ACM Logo +
+
+

DiamondHacks

+

Spring 2024 | UC San Diego

+
+ + Apply now + Apply now + +
+
+
-
-

Welcome to ACM's static site template!

+ +
+
+
+

Welcome to DiamondHacks!

+

+ Our mission at DiamondHacks is to bring together hackers from diverse backgrounds to develop + innovative solutions to real world problems. All experience levels are welcome. +

+
+
+
+ White Square +

2000+

+

students

+
+
+ White Square +

150+

+

annual events

+
+
+ White Square +

$5,000

+

in prizes

+
+
+
+ +
+

Choose your track!

+
+
+ White Square +

01. Lost at Sea

+

+ All pirates need to find their way back to shore! In this track, you will develop a solution + to a navigational task. Projects in this track could involve, but are not limited to: + transportation, accessibility, routing, etc. Your journey may even lead you to uncharted territory! +

+
+
+ Marks the Spot +

02. X Marks the Spot

+

+ Guard your pirate's treasure by creating a project focused on security! This could be + anything from defending against cyber attacks to detecting new vulnerabilities. Keep your + eyes peeled or someone might end up walking the plank! +

+
+
+ All Hands on Deck +

03. All Hands on Deck

+

+ Your crew needs all the help they can get! This track focuses on solving prominent social + issues in our world. Projects could involve, but are not limited to: healthcare, poverty, + world hunger, social justice, etc. The world is your oyster! +

+
+
+ Captain's Classroom +

04. Captain's Classroom

+

+ Every swashbuckling pirate needs to learn the ropes. This track focuses on developing + projects that enhance educational experiences and help guide the new age of treasure hunters. +

+
+
+
); diff --git a/tsconfig.json b/tsconfig.json index 5d5d7e9..7011d30 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,9 @@ } ], "paths": { + // "@/public/*": [ + // "./public/*" + // ], "@/*": [ "./src/*" ] From 20cdda5b50977f98d336d4553e3d1b71bd0c121e Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:08:22 -0700 Subject: [PATCH 2/9] refactor --- public/backgrounds/hero/left.svg | 19 ++ public/backgrounds/hero/right.svg | 165 ++++++++++ .../components/BackgroundGraphic/index.tsx | 13 +- .../BackgroundGraphic/style.module.scss | 12 +- src/app/globals.css | 5 +- src/app/layout.tsx | 6 +- src/app/page.module.scss | 281 +----------------- src/app/page.tsx | 92 +----- src/app/sections/landing/hero/index.tsx | 32 ++ .../sections/landing/hero/style.module.scss | 92 ++++++ src/app/sections/landing/tracks/index.tsx | 61 ++++ .../sections/landing/tracks/style.module.scss | 51 ++++ src/app/sections/landing/welcome/index.tsx | 37 +++ .../landing/welcome/style.module.scss | 116 ++++++++ tsconfig.json | 25 +- 15 files changed, 619 insertions(+), 388 deletions(-) create mode 100644 public/backgrounds/hero/left.svg create mode 100644 public/backgrounds/hero/right.svg create mode 100644 src/app/sections/landing/hero/index.tsx create mode 100644 src/app/sections/landing/hero/style.module.scss create mode 100644 src/app/sections/landing/tracks/index.tsx create mode 100644 src/app/sections/landing/tracks/style.module.scss create mode 100644 src/app/sections/landing/welcome/index.tsx create mode 100644 src/app/sections/landing/welcome/style.module.scss diff --git a/public/backgrounds/hero/left.svg b/public/backgrounds/hero/left.svg new file mode 100644 index 0000000..069a0a0 --- /dev/null +++ b/public/backgrounds/hero/left.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/backgrounds/hero/right.svg b/public/backgrounds/hero/right.svg new file mode 100644 index 0000000..e65202c --- /dev/null +++ b/public/backgrounds/hero/right.svg @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components/BackgroundGraphic/index.tsx b/src/app/components/BackgroundGraphic/index.tsx index 8a447eb..6067547 100644 --- a/src/app/components/BackgroundGraphic/index.tsx +++ b/src/app/components/BackgroundGraphic/index.tsx @@ -2,7 +2,18 @@ import styles from './style.module.scss'; const BackgroundGraphic = () => { return ( - Landing Page Graphic + <> + Landing Page Graphic + Landing Page Graphic + ); }; diff --git a/src/app/components/BackgroundGraphic/style.module.scss b/src/app/components/BackgroundGraphic/style.module.scss index d33ca77..60b4dec 100644 --- a/src/app/components/BackgroundGraphic/style.module.scss +++ b/src/app/components/BackgroundGraphic/style.module.scss @@ -1,6 +1,14 @@ .backgroundImage { position: absolute; margin: 0; - width: 100%; + height: 100%; z-index: 0; -} \ No newline at end of file + + &.left { + left: 0; + } + + &.right { + right: 0; + } +} diff --git a/src/app/globals.css b/src/app/globals.css index 7093225..96e0193 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,6 +1,6 @@ :root { --Dark-Bleu: #003366; - --transparent: rgb(0, 0, 0, ); + --transparent: rgb(0, 0, 0); --side-padding: 120px; --side-padding-small: 30px; } @@ -11,7 +11,8 @@ body { height: 100%; margin: 0; padding: 0; - background: linear-gradient(180deg, #a9e0fff2 25.52%, #FFE2B6 76.79%, #FFACAC 98.6%), #FFF; + background: linear-gradient(180deg, #a9e0fff2 25.52%, #ffe2b6 76.79%, #ffacac 98.6%); + overscroll-behavior: none; background-attachment: fixed; z-index: 0; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2f0240d..a98874a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,6 @@ import './globals.css'; import type { Metadata } from 'next'; import { DM_Sans } from 'next/font/google'; -import BackgroundGraphic from './components/BackgroundGraphic'; const dmSans = DM_Sans({ subsets: ['latin'], display: 'swap' }); @@ -13,10 +12,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - - {children} - + {children} ); } diff --git a/src/app/page.module.scss b/src/app/page.module.scss index aa70062..05a56fc 100644 --- a/src/app/page.module.scss +++ b/src/app/page.module.scss @@ -1,284 +1,21 @@ .main { - width: 100%; - // max-width: 100rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + max-width: 100rem; gap: 1rem; flex-wrap: wrap; box-sizing: border-box; color: var(--Dark-Bleu); - h1, h2, h3, p { - margin: 0; - z-index: 2; - } -} - -.landing { - height: 100vh; - width: 100%; - padding: 0; - display: flex; - align-items: center; -} - -.cta { - position: absolute; - margin: 0 var(--side-padding) 0 var(--side-padding); - display: flex; - flex-direction: column; - - h1 { - font-size: 66px; - font-style: normal; - font-weight: 700; - line-height: 86px; - letter-spacing: -1px; - } - - p { - margin-top: 8px; - font-size: 24px; - font-style: normal; - font-weight: 500; - line-height: 32px; - } -} - -@media (max-width: 600px) { - .cta { - margin: 0 var(--side-padding-small) 0 var(--side-padding-small); - - h1 { - font-size: 46px; - line-height: 66px; - } - - p { - font-size: 18px; - line-height: 32px; - } - } -} - -.buttonsContainer { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 40px; - - .applyNow { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.625rem; - font-size: 1.5rem; - font-weight: 500; - line-height: 2rem; - text-decoration: none; - color: white; - width: fit-content; - border-radius: 1.875rem; - background: var(--Dark-Bleu); - padding: 1rem 2.375rem 1rem 2rem; - transition: 0.3s all; - - &:hover { - gap: 1rem; - padding: 1rem 2rem; + margin: 0 var(--side-padding); - @media (max-width: 600px) { - padding: 0.5rem 2rem; - } - } - - @media (max-width: 600px) { - font-size: 1.125rem; - padding: 0.5rem 2.375rem 0.5rem 2rem; - } - } -} - -@media (max-width: 600px) { - .buttonsContainer { - margin-top: 24px; - flex-direction: column; - gap: 1rem; - } -} - -.buttonDivider { - width: 16px; -} - -.pageContainer { - width: calc(100% - 2 * var(--side-padding)); -} - -@media (max-width: 600px) { - .pageContainer { - width: calc(100% - 2 * var(--side-padding-small)); - } -} - -.welcome { - margin-top: 100px; - width: 100%; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: space-evenly; -} - -.welcomeMessage { - display: flex; - margin-top: 15vh; - width: 520px; - max-width: 520px; - flex-direction: column; - align-items: flex-start; - gap: 16px; - - h2 { - font-size: 36px; + @media screen and (max-width: 600px) { + margin: 0 var(--side-padding-small); } + h1, + h2, + h3, p { - font-size: 16px; - } -} - -@media (max-width: 700px) { - .welcomeMessage { - width: 100%; - } -} - -.diamondsContainer { - padding: 0 5% 0 5%; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - gap: 5%; -} - -@media (max-width: 1000px) { - .diamondsContainer { - margin-top: 50px; - width: 100%; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - } - - .diamond { - max-width: 400px; - margin: 25px 0 25px 0; - } -} - -// @media (max-width: 800px) { -// .diamondsContainer { -// grid-template-columns: 1fr; -// margin-bottom: 100px; -// } -// } - -.diamond { - width: 100%; - aspect-ratio: 1 / 1; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; /* Need this in order for Image fill={true} to work */ -} - -.studentCount { - color: #E35E77; - font-size: 2.25rem; - font-weight: 700; - - @media (max-width: 600px) { - font-size: 1.6875rem; - } -} - -.eventCount { - color: #9179CC; - font-size: 2.25rem; - font-weight: 700; - - @media (max-width: 600px) { - font-size: 1.6875rem; - } -} - -.diamondText { - font-size: 1.5rem; - - @media (max-width: 600px) { - font-size: 1.125rem; - } -} - -.prizes { - color: #4CA98F; - font-size: 2.25rem; - font-weight: 700; - - @media (max-width: 600px) { - font-size: 1.6875rem; - } -} - -.tracks { - margin-top: 100px; - width: 100%; - - h2 { - font-size: 36px; - } - - h3 { - margin-top: 32px; - margin-bottom: 16px; - font-size: 24px; - font-weight: 500; - } - - p { - font-size: 16px; - font-weight: 400; - line-height: 21px; /* 131.25% */ - letter-spacing: 0.25px; - } -} - -.tracksContainer { - margin-top: 40px; - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 80px; - row-gap: 40px; -} - -@media (max-width: 700px) { - .tracksContainer { - grid-template-columns: 1fr; - } -} - -.track { - width: 100%; - display: flex; - flex-direction: column; - - img { - width: 100%; + margin: 0; + z-index: 2; } } diff --git a/src/app/page.tsx b/src/app/page.tsx index e6a3a17..ce19734 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,98 +2,18 @@ import styles from './page.module.scss'; import Image from 'next/image'; -import Arrow from '../../public/arrow.svg'; -import BackgroundGraphic from './components/BackgroundGraphic'; -import Link from 'next/link'; +import Hero from './sections/landing/hero'; +import Welcome from './sections/landing/welcome'; +import Tracks from './sections/landing/tracks'; export default function Home() { const dummy = () => {}; return (
-
-
-

DiamondHacks

-

Spring 2024 | UC San Diego

-
- - Apply now - Apply now - -
-
-
-
- -
-
-
-

Welcome to DiamondHacks!

-

- Our mission at DiamondHacks is to bring together hackers from diverse backgrounds to develop - innovative solutions to real world problems. All experience levels are welcome. -

-
-
-
- White Square -

2000+

-

students

-
-
- White Square -

150+

-

annual events

-
-
- White Square -

$5,000

-

in prizes

-
-
-
- -
-

Choose your track!

-
-
- White Square -

01. Lost at Sea

-

- All pirates need to find their way back to shore! In this track, you will develop a solution - to a navigational task. Projects in this track could involve, but are not limited to: - transportation, accessibility, routing, etc. Your journey may even lead you to uncharted territory! -

-
-
- Marks the Spot -

02. X Marks the Spot

-

- Guard your pirate's treasure by creating a project focused on security! This could be - anything from defending against cyber attacks to detecting new vulnerabilities. Keep your - eyes peeled or someone might end up walking the plank! -

-
-
- All Hands on Deck -

03. All Hands on Deck

-

- Your crew needs all the help they can get! This track focuses on solving prominent social - issues in our world. Projects could involve, but are not limited to: healthcare, poverty, - world hunger, social justice, etc. The world is your oyster! -

-
-
- Captain's Classroom -

04. Captain's Classroom

-

- Every swashbuckling pirate needs to learn the ropes. This track focuses on developing - projects that enhance educational experiences and help guide the new age of treasure hunters. -

-
-
-
-
+ + +
); } diff --git a/src/app/sections/landing/hero/index.tsx b/src/app/sections/landing/hero/index.tsx new file mode 100644 index 0000000..24d9309 --- /dev/null +++ b/src/app/sections/landing/hero/index.tsx @@ -0,0 +1,32 @@ +import Link from 'next/link'; +import Image from 'next/image'; +import styles from './style.module.scss'; +import Arrow from '@/public/arrow.svg'; +import BackgroundGraphic from '@/app/components/BackgroundGraphic'; + +const Hero = () => { + return ( +
+ +
+
+

DiamondHacks

+

Spring 2024 | UC San Diego

+
+
+ + Apply now + Apply now + +
+
+
+ ); +}; + +export default Hero; diff --git a/src/app/sections/landing/hero/style.module.scss b/src/app/sections/landing/hero/style.module.scss new file mode 100644 index 0000000..b3b6e7b --- /dev/null +++ b/src/app/sections/landing/hero/style.module.scss @@ -0,0 +1,92 @@ +.container { + height: 100vh; + padding: 0; + display: flex; + align-items: center; + justify-self: start; +} + +.cta { + position: absolute; + display: flex; + flex-direction: column; + gap: 2.5rem; + + h1 { + font-size: 66px; + font-style: normal; + font-weight: 700; + line-height: 86px; + letter-spacing: -1px; + } + + p { + margin-top: 8px; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 32px; + } + + @media (max-width: 600px) { + gap: 1.5rem; + } +} + +@media (max-width: 600px) { + .cta { + h1 { + font-size: 46px; + line-height: 66px; + } + + p { + font-size: 18px; + line-height: 32px; + } + } +} + +.buttonsContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + .applyNow { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.625rem; + font-size: 1.5rem; + font-weight: 500; + line-height: 2rem; + text-decoration: none; + color: white; + width: fit-content; + border-radius: 1.875rem; + background: var(--Dark-Bleu); + padding: 1rem 2.375rem 1rem 2rem; + transition: 0.3s all; + + &:hover { + gap: 1rem; + padding: 1rem 2rem; + + @media (max-width: 600px) { + padding: 0.5rem 2rem; + } + } + + @media (max-width: 600px) { + font-size: 1.125rem; + padding: 0.5rem 2.375rem 0.5rem 2rem; + } + } +} + +@media (max-width: 600px) { + .buttonsContainer { + flex-direction: column; + gap: 1rem; + } +} diff --git a/src/app/sections/landing/tracks/index.tsx b/src/app/sections/landing/tracks/index.tsx new file mode 100644 index 0000000..2df4b6b --- /dev/null +++ b/src/app/sections/landing/tracks/index.tsx @@ -0,0 +1,61 @@ +import styles from './style.module.scss'; + +const Tracks = () => { + return ( +
+

Choose your track!

+
+
+ White Square +
+

01. Lost at Sea

+

+ All pirates need to find their way back to shore! In this track, you will develop a + solution to a navigational task. Projects in this track could involve, but are not + limited to: transportation, accessibility, routing, etc. Your journey may even lead + you to uncharted territory! +

+
+
+
+ Marks the Spot + +
+

02. X Marks the Spot

+

+ Guard your pirate's treasure by creating a project focused on security! This + could be anything from defending against cyber attacks to detecting new + vulnerabilities. Keep your eyes peeled or someone might end up walking the plank! +

+
+
+
+ All Hands on Deck + +
+

03. All Hands on Deck

+

+ Your crew needs all the help they can get! This track focuses on solving prominent + social issues in our world. Projects could involve, but are not limited to: + healthcare, poverty, world hunger, social justice, etc. The world is your oyster! +

+
+
+
+ Captain's Classroom + +
+

04. Captain's Classroom

+

+ Every swashbuckling pirate needs to learn the ropes. This track focuses on developing + projects that enhance educational experiences and help guide the new age of treasure + hunters. +

+
+
+
+
+ ); +}; + +export default Tracks; diff --git a/src/app/sections/landing/tracks/style.module.scss b/src/app/sections/landing/tracks/style.module.scss new file mode 100644 index 0000000..85eca6f --- /dev/null +++ b/src/app/sections/landing/tracks/style.module.scss @@ -0,0 +1,51 @@ +.tracks { + width: 100%; + min-height: 100vh; + + h2 { + font-size: 36px; + } + + h3 { + font-size: 24px; + font-weight: 500; + } + + p { + font-size: 16px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0.25px; + } +} + +.tracksContainer { + margin-top: 40px; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 80px; + row-gap: 40px; +} + +@media (max-width: 700px) { + .tracksContainer { + grid-template-columns: 1fr; + } +} + +.track { + width: 100%; + display: flex; + flex-direction: column; + gap: 2rem; + + img { + width: 100%; + } + + .trackDescription { + display: flex; + flex-direction: column; + gap: 1rem; + } +} diff --git a/src/app/sections/landing/welcome/index.tsx b/src/app/sections/landing/welcome/index.tsx new file mode 100644 index 0000000..58ffedb --- /dev/null +++ b/src/app/sections/landing/welcome/index.tsx @@ -0,0 +1,37 @@ +import Image from 'next/image'; +import styles from './style.module.scss'; + +const Welcome = () => { + return ( +
+
+
+

Welcome to DiamondHacks!

+

+ Our mission at DiamondHacks is to bring together hackers from diverse backgrounds to + develop innovative solutions to real world problems. All experience levels are welcome. +

+
+
+
+ White Square +

2000+

+

students

+
+
+ White Square +

150+

+

annual events

+
+
+ White Square +

$5,000

+

in prizes

+
+
+
+
+ ); +}; + +export default Welcome; diff --git a/src/app/sections/landing/welcome/style.module.scss b/src/app/sections/landing/welcome/style.module.scss new file mode 100644 index 0000000..ce2c9f3 --- /dev/null +++ b/src/app/sections/landing/welcome/style.module.scss @@ -0,0 +1,116 @@ +.pageContainer { + width: 100%; +} + +.welcome { + width: 100%; + display: flex; + flex-direction: column; + gap: 5rem; + margin-bottom: 10rem; + + @media screen and (max-width: 700px) { + gap: 1rem; + margin-bottom: 5rem; + } +} + +.welcomeMessage { + display: flex; + width: 520px; + max-width: 520px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + + h2 { + font-size: 36px; + } + + p { + font-size: 16px; + } +} + +@media (max-width: 700px) { + .welcomeMessage { + width: 100%; + } +} + +.diamondsContainer { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} + +@media (max-width: 1200px) { + .diamondsContainer { + width: 100%; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + } + + .diamond { + max-width: 400px; + margin: 25px 0 25px 0; + } +} + +// @media (max-width: 800px) { +// .diamondsContainer { +// grid-template-columns: 1fr; +// margin-bottom: 100px; +// } +// } + +.diamond { + width: 100%; + aspect-ratio: 1 / 1; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; /* Need this in order for Image fill={true} to work */ +} + +.studentCount { + color: #e35e77; + font-size: 2.25rem; + font-weight: 700; + + @media (max-width: 400px) { + font-size: 1.6875rem; + } +} + +.eventCount { + color: #9179cc; + font-size: 2.25rem; + font-weight: 700; + + @media (max-width: 400px) { + font-size: 1.6875rem; + } +} + +.diamondText { + font-size: 1.5rem; + + @media (max-width: 400px) { + font-size: 1.125rem; + } +} + +.prizes { + color: #4ca98f; + font-size: 2.25rem; + font-weight: 700; + + @media (max-width: 400px) { + font-size: 1.6875rem; + } +} diff --git a/tsconfig.json b/tsconfig.json index 7011d30..4423be2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -23,22 +19,11 @@ } ], "paths": { - // "@/public/*": [ - // "./public/*" - // ], - "@/*": [ - "./src/*" - ] + "@/public/*": ["./public/*"], + "@/*": ["./src/*"] }, "forceConsistentCasingInFileNames": true }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - ".next/types/**/*.ts" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] } From b26d1e3ef361d91435043dc3013bc2e40463b403 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:10:32 -0700 Subject: [PATCH 3/9] refactor imports --- public/landing-page-graphic.svg | 170 --------------------- public/{ => tracks}/all-hands-on-deck.svg | 0 public/{ => tracks}/captains-classroom.svg | 0 public/{ => tracks}/lost-at-sea.svg | 0 public/{ => tracks}/marks-the-spot.svg | 0 src/app/sections/landing/tracks/index.tsx | 8 +- 6 files changed, 4 insertions(+), 174 deletions(-) delete mode 100644 public/landing-page-graphic.svg rename public/{ => tracks}/all-hands-on-deck.svg (100%) rename public/{ => tracks}/captains-classroom.svg (100%) rename public/{ => tracks}/lost-at-sea.svg (100%) rename public/{ => tracks}/marks-the-spot.svg (100%) diff --git a/public/landing-page-graphic.svg b/public/landing-page-graphic.svg deleted file mode 100644 index 38953d5..0000000 --- a/public/landing-page-graphic.svg +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/all-hands-on-deck.svg b/public/tracks/all-hands-on-deck.svg similarity index 100% rename from public/all-hands-on-deck.svg rename to public/tracks/all-hands-on-deck.svg diff --git a/public/captains-classroom.svg b/public/tracks/captains-classroom.svg similarity index 100% rename from public/captains-classroom.svg rename to public/tracks/captains-classroom.svg diff --git a/public/lost-at-sea.svg b/public/tracks/lost-at-sea.svg similarity index 100% rename from public/lost-at-sea.svg rename to public/tracks/lost-at-sea.svg diff --git a/public/marks-the-spot.svg b/public/tracks/marks-the-spot.svg similarity index 100% rename from public/marks-the-spot.svg rename to public/tracks/marks-the-spot.svg diff --git a/src/app/sections/landing/tracks/index.tsx b/src/app/sections/landing/tracks/index.tsx index 2df4b6b..080f254 100644 --- a/src/app/sections/landing/tracks/index.tsx +++ b/src/app/sections/landing/tracks/index.tsx @@ -6,7 +6,7 @@ const Tracks = () => {

Choose your track!

- White Square + White Square

01. Lost at Sea

@@ -18,7 +18,7 @@ const Tracks = () => {

- Marks the Spot + Marks the Spot

02. X Marks the Spot

@@ -30,7 +30,7 @@ const Tracks = () => {
- All Hands on Deck + All Hands on Deck

03. All Hands on Deck

@@ -42,7 +42,7 @@ const Tracks = () => {
- Captain's Classroom + Captain's Classroom

04. Captain's Classroom

From 5c65c42c841be8f60899f9a8f1802ba1de610409 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:50:54 -0700 Subject: [PATCH 4/9] Finish page --- public/backgrounds/hero/left-mobile.svg | 14 ++ public/backgrounds/hero/right-mobile.svg | 155 ++++++++++++++++++ .../components/BackgroundGraphic/index.tsx | 20 --- .../BackgroundGraphic/style.module.scss | 14 -- src/app/globals.css | 5 +- src/app/layout.tsx | 8 +- src/app/page.module.scss | 2 +- src/app/page.tsx | 9 +- src/components/background/index.tsx | 30 ++++ src/components/background/style.module.scss | 28 ++++ src/sections/Footer/index.tsx | 7 +- .../{footer.module.scss => style.module.scss} | 7 +- src/{app => }/sections/landing/hero/index.tsx | 2 +- .../sections/landing/hero/style.module.scss | 8 + .../sections/landing/tracks/index.tsx | 0 .../sections/landing/tracks/style.module.scss | 2 +- .../sections/landing/welcome/index.tsx | 0 .../landing/welcome/style.module.scss | 0 18 files changed, 255 insertions(+), 56 deletions(-) create mode 100644 public/backgrounds/hero/left-mobile.svg create mode 100644 public/backgrounds/hero/right-mobile.svg delete mode 100644 src/app/components/BackgroundGraphic/index.tsx delete mode 100644 src/app/components/BackgroundGraphic/style.module.scss create mode 100644 src/components/background/index.tsx create mode 100644 src/components/background/style.module.scss rename src/sections/Footer/{footer.module.scss => style.module.scss} (88%) rename src/{app => }/sections/landing/hero/index.tsx (92%) rename src/{app => }/sections/landing/hero/style.module.scss (91%) rename src/{app => }/sections/landing/tracks/index.tsx (100%) rename src/{app => }/sections/landing/tracks/style.module.scss (96%) rename src/{app => }/sections/landing/welcome/index.tsx (100%) rename src/{app => }/sections/landing/welcome/style.module.scss (100%) diff --git a/public/backgrounds/hero/left-mobile.svg b/public/backgrounds/hero/left-mobile.svg new file mode 100644 index 0000000..badd47e --- /dev/null +++ b/public/backgrounds/hero/left-mobile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/backgrounds/hero/right-mobile.svg b/public/backgrounds/hero/right-mobile.svg new file mode 100644 index 0000000..1522b31 --- /dev/null +++ b/public/backgrounds/hero/right-mobile.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components/BackgroundGraphic/index.tsx b/src/app/components/BackgroundGraphic/index.tsx deleted file mode 100644 index 6067547..0000000 --- a/src/app/components/BackgroundGraphic/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styles from './style.module.scss'; - -const BackgroundGraphic = () => { - return ( - <> - Landing Page Graphic - Landing Page Graphic - - ); -}; - -export default BackgroundGraphic; diff --git a/src/app/components/BackgroundGraphic/style.module.scss b/src/app/components/BackgroundGraphic/style.module.scss deleted file mode 100644 index 60b4dec..0000000 --- a/src/app/components/BackgroundGraphic/style.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -.backgroundImage { - position: absolute; - margin: 0; - height: 100%; - z-index: 0; - - &.left { - left: 0; - } - - &.right { - right: 0; - } -} diff --git a/src/app/globals.css b/src/app/globals.css index 96e0193..148b606 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,9 +6,8 @@ } html, -body { - width: 100%; - height: 100%; +body, +footer { margin: 0; padding: 0; background: linear-gradient(180deg, #a9e0fff2 25.52%, #ffe2b6 76.79%, #ffacac 98.6%); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a98874a..93323c4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,18 +1,22 @@ +import Footer from '@/sections/footer'; import './globals.css'; import type { Metadata } from 'next'; import { DM_Sans } from 'next/font/google'; -const dmSans = DM_Sans({ subsets: ['latin'], display: 'swap' }); +const dmSans = DM_Sans({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'DiamondHacks', - description: "ACM at UCSD's first hackathon!", + description: "ACM at UCSD's first hackathon in collaboration with TESC!", }; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} +
+
+
); } diff --git a/src/app/page.module.scss b/src/app/page.module.scss index 05a56fc..82cd749 100644 --- a/src/app/page.module.scss +++ b/src/app/page.module.scss @@ -7,7 +7,7 @@ margin: 0 var(--side-padding); - @media screen and (max-width: 600px) { + @media screen and (max-width: 768px) { margin: 0 var(--side-padding-small); } diff --git a/src/app/page.tsx b/src/app/page.tsx index ce19734..9ece9d8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,14 +1,11 @@ 'use client'; import styles from './page.module.scss'; -import Image from 'next/image'; -import Hero from './sections/landing/hero'; -import Welcome from './sections/landing/welcome'; -import Tracks from './sections/landing/tracks'; +import Hero from '@/sections/landing/hero'; +import Welcome from '@/sections/landing/welcome'; +import Tracks from '@/sections/landing/tracks'; export default function Home() { - const dummy = () => {}; - return (
diff --git a/src/components/background/index.tsx b/src/components/background/index.tsx new file mode 100644 index 0000000..43f7601 --- /dev/null +++ b/src/components/background/index.tsx @@ -0,0 +1,30 @@ +import styles from './style.module.scss'; + +const BackgroundGraphic = () => { + return ( + <> + Landing Page Graphic + Landing Page Graphic + Landing Page Graphic + Landing Page Graphic + + ); +}; + +export default BackgroundGraphic; diff --git a/src/components/background/style.module.scss b/src/components/background/style.module.scss new file mode 100644 index 0000000..c3cda7d --- /dev/null +++ b/src/components/background/style.module.scss @@ -0,0 +1,28 @@ +.backgroundImage { + position: absolute; + margin: 0; + height: 100%; + z-index: 0; + + &.left { + left: 0; + } + + &.right { + right: 0; + } + + &.mobile { + display: none; + } + + @media screen and (max-width: 768px) { + &.mobile { + display: block; + } + + &.desktop { + display: none; + } + } +} diff --git a/src/sections/Footer/index.tsx b/src/sections/Footer/index.tsx index 4898b99..dcfd713 100644 --- a/src/sections/Footer/index.tsx +++ b/src/sections/Footer/index.tsx @@ -1,5 +1,5 @@ -import Socials from '@/components/Socials'; -import styles from './footer.module.scss'; +import Socials from '@/components/socials'; +import styles from './style.module.scss'; import Image from 'next/image'; export default function Footer() { @@ -9,10 +9,9 @@ export default function Footer() { ACM Logo

- ACM at UCSD + ACM at UCSD x TESC

-
); diff --git a/src/sections/Footer/footer.module.scss b/src/sections/Footer/style.module.scss similarity index 88% rename from src/sections/Footer/footer.module.scss rename to src/sections/Footer/style.module.scss index 9696561..2caa20c 100644 --- a/src/sections/Footer/footer.module.scss +++ b/src/sections/Footer/style.module.scss @@ -1,8 +1,7 @@ .container { display: flex; justify-content: space-between; - - width: 100%; + margin: 7.5rem; } .left { @@ -10,14 +9,13 @@ align-items: center; gap: 1rem; - color: inherit; + color: black; text-decoration: none; } .title { font-size: 32px; font-weight: normal; - font-family: inherit; } .acm { @@ -35,5 +33,6 @@ flex-direction: column; align-items: center; gap: 0; + text-align: center; } } diff --git a/src/app/sections/landing/hero/index.tsx b/src/sections/landing/hero/index.tsx similarity index 92% rename from src/app/sections/landing/hero/index.tsx rename to src/sections/landing/hero/index.tsx index 24d9309..50c8e17 100644 --- a/src/app/sections/landing/hero/index.tsx +++ b/src/sections/landing/hero/index.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import Image from 'next/image'; import styles from './style.module.scss'; import Arrow from '@/public/arrow.svg'; -import BackgroundGraphic from '@/app/components/BackgroundGraphic'; +import BackgroundGraphic from '@/components/background'; const Hero = () => { return ( diff --git a/src/app/sections/landing/hero/style.module.scss b/src/sections/landing/hero/style.module.scss similarity index 91% rename from src/app/sections/landing/hero/style.module.scss rename to src/sections/landing/hero/style.module.scss index b3b6e7b..74d9813 100644 --- a/src/app/sections/landing/hero/style.module.scss +++ b/src/sections/landing/hero/style.module.scss @@ -4,6 +4,10 @@ display: flex; align-items: center; justify-self: start; + + @media screen and (max-width: 768px) { + align-items: flex-start; + } } .cta { @@ -28,6 +32,10 @@ line-height: 32px; } + @media screen and (max-width: 768px) { + margin-top: 25vh; + } + @media (max-width: 600px) { gap: 1.5rem; } diff --git a/src/app/sections/landing/tracks/index.tsx b/src/sections/landing/tracks/index.tsx similarity index 100% rename from src/app/sections/landing/tracks/index.tsx rename to src/sections/landing/tracks/index.tsx diff --git a/src/app/sections/landing/tracks/style.module.scss b/src/sections/landing/tracks/style.module.scss similarity index 96% rename from src/app/sections/landing/tracks/style.module.scss rename to src/sections/landing/tracks/style.module.scss index 85eca6f..73ce293 100644 --- a/src/app/sections/landing/tracks/style.module.scss +++ b/src/sections/landing/tracks/style.module.scss @@ -1,6 +1,6 @@ .tracks { width: 100%; - min-height: 100vh; + height: fit-content; h2 { font-size: 36px; diff --git a/src/app/sections/landing/welcome/index.tsx b/src/sections/landing/welcome/index.tsx similarity index 100% rename from src/app/sections/landing/welcome/index.tsx rename to src/sections/landing/welcome/index.tsx diff --git a/src/app/sections/landing/welcome/style.module.scss b/src/sections/landing/welcome/style.module.scss similarity index 100% rename from src/app/sections/landing/welcome/style.module.scss rename to src/sections/landing/welcome/style.module.scss From 5e401b0d914c5727d04a925ccd7aea9f4aca028e Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:54:16 -0700 Subject: [PATCH 5/9] Empty-Commit to refresh CI From c9d15738dc39cbda20da12ebc35b91dce37a877d Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:58:07 -0700 Subject: [PATCH 6/9] hello --- src/sections/{Footer => foot}/index.tsx | 0 src/sections/{Footer => foot}/style.module.scss | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/sections/{Footer => foot}/index.tsx (100%) rename src/sections/{Footer => foot}/style.module.scss (100%) diff --git a/src/sections/Footer/index.tsx b/src/sections/foot/index.tsx similarity index 100% rename from src/sections/Footer/index.tsx rename to src/sections/foot/index.tsx diff --git a/src/sections/Footer/style.module.scss b/src/sections/foot/style.module.scss similarity index 100% rename from src/sections/Footer/style.module.scss rename to src/sections/foot/style.module.scss From 21953ef49a798d147fcd6001275c94110e275012 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:58:24 -0700 Subject: [PATCH 7/9] fix folder name --- src/sections/{foot => footer}/index.tsx | 0 src/sections/{foot => footer}/style.module.scss | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/sections/{foot => footer}/index.tsx (100%) rename src/sections/{foot => footer}/style.module.scss (100%) diff --git a/src/sections/foot/index.tsx b/src/sections/footer/index.tsx similarity index 100% rename from src/sections/foot/index.tsx rename to src/sections/footer/index.tsx diff --git a/src/sections/foot/style.module.scss b/src/sections/footer/style.module.scss similarity index 100% rename from src/sections/foot/style.module.scss rename to src/sections/footer/style.module.scss From 53ba59dcc1dad415951fd7803bd119841c24f49a Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:59:32 -0700 Subject: [PATCH 8/9] hello --- src/components/{Socials => social}/index.tsx | 0 src/components/{Socials => social}/socials.module.scss | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{Socials => social}/index.tsx (100%) rename src/components/{Socials => social}/socials.module.scss (100%) diff --git a/src/components/Socials/index.tsx b/src/components/social/index.tsx similarity index 100% rename from src/components/Socials/index.tsx rename to src/components/social/index.tsx diff --git a/src/components/Socials/socials.module.scss b/src/components/social/socials.module.scss similarity index 100% rename from src/components/Socials/socials.module.scss rename to src/components/social/socials.module.scss From d210a996fd3c67c10b0a7271330738faaa7ee283 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 13 Mar 2024 18:59:42 -0700 Subject: [PATCH 9/9] Fix --- src/components/{social => socials}/index.tsx | 0 src/components/{social => socials}/socials.module.scss | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{social => socials}/index.tsx (100%) rename src/components/{social => socials}/socials.module.scss (100%) diff --git a/src/components/social/index.tsx b/src/components/socials/index.tsx similarity index 100% rename from src/components/social/index.tsx rename to src/components/socials/index.tsx diff --git a/src/components/social/socials.module.scss b/src/components/socials/socials.module.scss similarity index 100% rename from src/components/social/socials.module.scss rename to src/components/socials/socials.module.scss