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/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/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-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/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/public/tracks/all-hands-on-deck.svg b/public/tracks/all-hands-on-deck.svg
new file mode 100644
index 0000000..9f21b8c
--- /dev/null
+++ b/public/tracks/all-hands-on-deck.svg
@@ -0,0 +1,636 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/tracks/captains-classroom.svg b/public/tracks/captains-classroom.svg
new file mode 100644
index 0000000..9d690df
--- /dev/null
+++ b/public/tracks/captains-classroom.svg
@@ -0,0 +1,186 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/tracks/lost-at-sea.svg b/public/tracks/lost-at-sea.svg
new file mode 100644
index 0000000..d9d15c9
--- /dev/null
+++ b/public/tracks/lost-at-sea.svg
@@ -0,0 +1,403 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/tracks/marks-the-spot.svg b/public/tracks/marks-the-spot.svg
new file mode 100644
index 0000000..4623d73
--- /dev/null
+++ b/public/tracks/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/globals.css b/src/app/globals.css
index 157b0d0..148b606 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%;
+body,
+footer {
margin: 0;
padding: 0;
+ 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 9de4a50..93323c4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import Footer from '@/sections/footer';
import './globals.css';
import type { Metadata } from 'next';
import { DM_Sans } from 'next/font/google';
@@ -5,14 +6,17 @@ import { DM_Sans } from 'next/font/google';
const dmSans = DM_Sans({ subsets: ['latin'] });
export const metadata: Metadata = {
- title: 'ACM Static Site Template',
- description: 'Template for making ACM websites!',
+ title: 'DiamondHacks',
+ 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 b863f3e..82cd749 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -1,14 +1,21 @@
.main {
- height: 100%;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
+ max-width: 100rem;
gap: 1rem;
flex-wrap: wrap;
-
- padding: 7%;
box-sizing: border-box;
+ color: var(--Dark-Bleu);
+
+ margin: 0 var(--side-padding);
+
+ @media screen and (max-width: 768px) {
+ margin: 0 var(--side-padding-small);
+ }
- font-family: 'DM Sans', sans-serif;
+ h1,
+ h2,
+ h3,
+ p {
+ margin: 0;
+ z-index: 2;
+ }
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a2bebb9..9ece9d8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,16 @@
+'use client';
+
import styles from './page.module.scss';
-import Image from 'next/image';
-import Footer from '@/sections/Footer';
+import Hero from '@/sections/landing/hero';
+import Welcome from '@/sections/landing/welcome';
+import Tracks from '@/sections/landing/tracks';
export default function Home() {
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 (
+ <>
+
+
+
+
+ >
+ );
+};
+
+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/components/Socials/index.tsx b/src/components/socials/index.tsx
similarity index 100%
rename from src/components/Socials/index.tsx
rename to src/components/socials/index.tsx
diff --git a/src/components/Socials/socials.module.scss b/src/components/socials/socials.module.scss
similarity index 100%
rename from src/components/Socials/socials.module.scss
rename to src/components/socials/socials.module.scss
diff --git a/src/sections/Footer/index.tsx b/src/sections/footer/index.tsx
similarity index 71%
rename from src/sections/Footer/index.tsx
rename to 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 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/sections/landing/hero/index.tsx b/src/sections/landing/hero/index.tsx
new file mode 100644
index 0000000..50c8e17
--- /dev/null
+++ b/src/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 '@/components/background';
+
+const Hero = () => {
+ return (
+
+
+
+
+
DiamondHacks
+
Spring 2024 | UC San Diego
+
+
+
+ Apply now
+
+
+
+
+
+ );
+};
+
+export default Hero;
diff --git a/src/sections/landing/hero/style.module.scss b/src/sections/landing/hero/style.module.scss
new file mode 100644
index 0000000..74d9813
--- /dev/null
+++ b/src/sections/landing/hero/style.module.scss
@@ -0,0 +1,100 @@
+.container {
+ height: 100vh;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-self: start;
+
+ @media screen and (max-width: 768px) {
+ align-items: flex-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 screen and (max-width: 768px) {
+ margin-top: 25vh;
+ }
+
+ @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/sections/landing/tracks/index.tsx b/src/sections/landing/tracks/index.tsx
new file mode 100644
index 0000000..080f254
--- /dev/null
+++ b/src/sections/landing/tracks/index.tsx
@@ -0,0 +1,61 @@
+import styles from './style.module.scss';
+
+const Tracks = () => {
+ return (
+
+
Choose your track!
+
+
+
+
+
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!
+
+
+
+
+
+
+
+
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!
+
+
+
+
+
+
+
+
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!
+
+
+
+
+
+
+
+
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/sections/landing/tracks/style.module.scss b/src/sections/landing/tracks/style.module.scss
new file mode 100644
index 0000000..73ce293
--- /dev/null
+++ b/src/sections/landing/tracks/style.module.scss
@@ -0,0 +1,51 @@
+.tracks {
+ width: 100%;
+ height: fit-content;
+
+ 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/sections/landing/welcome/index.tsx b/src/sections/landing/welcome/index.tsx
new file mode 100644
index 0000000..58ffedb
--- /dev/null
+++ b/src/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.
+
+
+
+
+
+
+
150+
+
annual events
+
+
+
+
+
+ );
+};
+
+export default Welcome;
diff --git a/src/sections/landing/welcome/style.module.scss b/src/sections/landing/welcome/style.module.scss
new file mode 100644
index 0000000..ce2c9f3
--- /dev/null
+++ b/src/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 5d5d7e9..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,19 +19,11 @@
}
],
"paths": {
- "@/*": [
- "./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"]
}