Feature/statistics

package.json

@@ -12,18 +12,18 @@
   "dependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/node": "20.6.0",
-    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "next": "13.4.16",
+    "next": "^13.4.16",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.2.2"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@types/react": "^18.3.12",
     "eslint": "^8.49.0",
     "eslint-config-next": "^13.4.19",
     "eslint-config-prettier": "^9.0.0",
     "prettier": "^3.0.3",
-    "sass": "^1.70.0"
+    "sass": "^1.70.0",
+    "typescript": "^5.6.3"
   }
 }

src/app/page.module.scss

@@ -1,5 +1,7 @@
+@use '../styles/vars.scss' as vars;
+
 .main {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 10rem;
 }

src/app/page.tsx

@@ -1,3 +1,4 @@
+import Statistics from '@/sections/Statistics';
 import Hero from '@/sections/Hero';
 import About from '@/sections/About';
 import styles from './page.module.scss';
@@ -7,6 +8,7 @@ export default function Home() {
     <main className={styles.main}>
       <Hero />
       <About />
+      <Statistics />
     </main>
   );
 }

src/components/Footer/index.tsx

@@ -18,7 +18,7 @@ const Footer: React.FC = () => {
           <Typography variant="body/large">About Us</Typography>
         </Link>
         <Link href="https://acmucsd.com/">
-          <Image src="/acm-logo.png" alt="ACM" width={144} height={144} />
+          <Image src="/assets/acm-logo.png" alt="ACM" width={144} height={144} />
         </Link>
         <Link href="https://acmucsd.com/#contact">
           <Typography variant="body/large">Contact Us</Typography>

src/components/StatsDescription/index.tsx

@@ -0,0 +1,39 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+
+const StatsDescription: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <Typography className={styles.title} variant="display/heavy/small">
+        Take <span className={styles.diamond}>Diamond</span>
+        <span className={styles.hacks}>Hacks</span> to new heights!
+      </Typography>
+      <div className={styles.statBox}>
+        <Typography variant="display/heavy/small">
+          <span className={styles.statNumber1}>70+</span>
+        </Typography>
+        <Typography className={styles.info} variant="body/medium">
+          projects
+        </Typography>
+      </div>
+      <div className={styles.statBox}>
+        <Typography variant="display/heavy/small">
+          <span className={styles.statNumber2}>300+</span>
+        </Typography>
+        <Typography className={styles.info} variant="body/medium">
+          attendees
+        </Typography>
+      </div>
+      <div className={styles.statBox}>
+        <Typography variant="display/heavy/small">
+          <span className={styles.statNumber3}>$2.6k+</span>
+        </Typography>
+        <Typography className={styles.info} variant="body/medium">
+          in prizes
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default StatsDescription;

src/components/StatsDescription/style.module.scss

@@ -0,0 +1,45 @@
+@use '../../styles/vars.scss' as vars;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  gap: 2.5rem;
+  margin: 0 auto;
+  width: 80%;
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    text-align: left;
+  }
+
+  .title {
+    @media screen and (max-width: vars.$breakpoint-md) {
+      font-size: 2.25rem !important;
+      line-height: 2.625rem !important;
+    }
+  }
+
+  .diamond {
+    color: vars.$light-blue;
+    word-break: break-word;
+  }
+
+  .hacks {
+    color: vars.$orange;
+  }
+
+  .statNumber1 {
+    font-size: 5.5rem;
+    color: vars.$blue;
+  }
+
+  .statNumber2 {
+    font-size: 5.5rem;
+    color: vars.$red;
+  }
+
+  .statNumber3 {
+    font-size: 5.5rem;
+    color: vars.$yellow;
+  }
+}

src/components/Typography/index.tsx

@@ -45,7 +45,7 @@ const v2StandardSizes: Record<V2StandardStyle, Record<V2Size, string>> = {
 
 const v2StandardHeights: Record<V2StandardStyle, Record<V2Size, string>> = {
   title: {
-    large: '2.375rem',
+    large: '2.675rem',
     medium: '2.125rem',
     small: '1.875rem',
   },

src/sections/Statistics/index.tsx

@@ -0,0 +1,19 @@
+import StatsDescription from '@/components/StatsDescription';
+import styles from './style.module.scss';
+import Image from 'next/image';
+import SlidingDiamond from 'public/assets/sliding_diamond.png';
+
+const Statistics: React.FC = () => {
+  return (
+    <section className={styles.container}>
+      <div className={styles.diamond}>
+        <Image src={SlidingDiamond} alt="sliding diamond" className={styles.slidingDiamond} />
+      </div>
+      <div className={styles.innerContainer}>
+        <StatsDescription />
+      </div>
+    </section>
+  );
+};
+
+export default Statistics;

src/sections/Statistics/style.module.scss

@@ -0,0 +1,35 @@
+@use '../../styles/vars.scss' as vars;
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  .innerContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    flex: 1;
+  }
+
+  .diamond {
+    position: relative;
+    aspect-ratio: 0.64;
+    flex: 0 0 40%;
+    max-height: 600px;
+
+    .slidingDiamond {
+      width: auto;
+      position: absolute;
+      top: 0;
+      left: calc(-1 * vars.$side-padding);
+      object-fit: contain;
+    }
+
+    @media screen and (max-width: vars.$breakpoint-md) {
+      display: none;
+    }
+  }
+}