Finish website

src/app/globals.css

@@ -3,8 +3,6 @@
 html,
 body {
   font-family: 'DM Sans', sans-serif;
-  width: 100%;
-  height: 100%;
   margin: 0;
   padding: 0;
 }

src/app/page.module.scss

@@ -1,9 +1,17 @@
+@use 'src/styles/vars.scss' as vars;
+
 .main {
-  height: 100%;
-  width: 100%;
+  padding: 9.25rem 0;
+  gap: 9.25rem;
+  width: 80%;
+  margin: auto;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 1rem;
   flex-wrap: wrap;
+
+  @media screen and (width < vars.$breakpoint) {
+    width: auto;
+    padding: 3.5rem 2rem;
+    gap: 3.5rem;
+  }
 }

src/app/page.tsx

@@ -1,15 +1,16 @@
+import Hero from '@/sections/landing/Hero';
 import styles from './page.module.scss';
-import Image from 'next/image';
+import Impact from '@/sections/landing/Impact';
+import Events from '@/sections/landing/Events';
+import GetInvolved from '@/sections/landing/GetInvolved';
 
 export default function Home() {
   return (
     <main className={styles.main}>
-      <div>
-        <Image src="/acm-logo.png" width={100} height={100} alt="ACM Logo" />
-      </div>
-      <div>
-        <h1>Welcome to ACM&apos;s static site template!</h1>
-      </div>
+      <Hero />
+      <Impact />
+      <Events />
+      <GetInvolved />
     </main>
   );
 }

src/components/Card/index.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image';
+import styles from './style.module.scss';
+import { ReactNode } from 'react';
+
+interface EventCardProps {
+  image: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const Card = ({ image, children, className }: EventCardProps) => {
+  return (
+    <div className={`${styles.card} ${className || ''}`}>
+      <div className={styles.picture}>
+        <Image src={image} alt="Event image" objectFit="cover" fill />
+      </div>
+      <div className={styles.cardContent}>{children}</div>
+    </div>
+  );
+};
+
+export default Card;

src/components/Card/style.module.scss

@@ -0,0 +1,19 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  border-radius: 0.75rem;
+  border: 1px solid #c3c6cf;
+  background-color: #faf9fc;
+  overflow: hidden;
+
+  .picture {
+    aspect-ratio: 16 / 9;
+    position: relative;
+  }
+
+  .cardContent {
+    padding: 1rem;
+    flex-grow: 1;
+  }
+}

src/components/EventCard/index.tsx

@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import styles from './style.module.scss';
+import Typography from '../Typography';
+import Card from '../Card';
+
+interface EventCardProps {
+  image: string;
+  event: { title: string; date: string; location: string };
+}
+
+const EventCard = ({ image, event: { title, date, location } }: EventCardProps) => {
+  return (
+    <Card image={image} className={styles.card}>
+      <Typography variant="body" className={styles.heading}>
+        {title}
+      </Typography>
+      <Typography variant="label" className={styles.date}>
+        {date}
+      </Typography>
+      <Typography variant="label" className={styles.location}>
+        {location}
+      </Typography>
+    </Card>
+  );
+};
+
+export default EventCard;

src/components/EventCard/style.module.scss

@@ -0,0 +1,23 @@
+.card {
+  width: 22.5rem;
+}
+
+.eventCard {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  width: 22.5rem;
+  border-radius: 0.75rem;
+  border: 1px solid #c3c6cf;
+  background-color: #faf9fc;
+  overflow: hidden;
+
+  .picture {
+    aspect-ratio: 16 / 9;
+    position: relative;
+  }
+
+  .cardContent {
+    padding: 1rem;
+  }
+}

src/components/Footer/index.tsx

@@ -1,7 +1,6 @@
 import Image from 'next/image';
 import styles from './style.module.scss';
 import Typography from '../Typography';
-import InstagramIcon from '@/public/instagram-logo.svg';
 
 const Footer: React.FC = () => {
   return (

src/components/InvolvedCard/index.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from './style.module.scss';
+import Typography from '../Typography';
+import Card from '../Card';
+
+interface GetInvolvedCard {
+  image: string;
+  title: string;
+  description: string;
+  link: string;
+}
+
+const GetInvolvedCard = ({ image, title, description, link }: GetInvolvedCard) => {
+  return (
+    <Card image={image}>
+      <div className={styles.cardContent}>
+        <div>
+          <Typography variant="display/small" className={styles.heading}>
+            {title}
+          </Typography>
+          <Typography variant="label" className={styles.location}>
+            {description}
+          </Typography>
+        </div>
+        <Link href={link} className={styles.link}>
+          Learn More
+        </Link>
+      </div>
+    </Card>
+  );
+};
+
+export default GetInvolvedCard;

src/components/InvolvedCard/style.module.scss

@@ -0,0 +1,19 @@
+.heading {
+  text-align: center;
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+
+  .link {
+    border-radius: 6.25rem;
+    background: var(--Green-80, #116532);
+    padding: 0.625rem 1.5rem;
+    text-decoration: none;
+    color: #fff;
+  }
+}

src/sections/landing/Events/events.ts

@@ -0,0 +1,28 @@
+const events = [
+  {
+    image: '/events/event1.png',
+    event: {
+      title: 'Barrio Logan Art & Science Fair',
+      date: 'Saturday April 13 2024, 10 AM - 2 PM',
+      location: 'Mercado del Barrio',
+    },
+  },
+  {
+    image: '/events/event2.png',
+    event: {
+      title: 'Upward Bound Web Development Workshop',
+      date: 'Saturday, April 27 2024, 10:30 AM - 1:30 PM',
+      location: 'Hoover High School',
+    },
+  },
+  {
+    image: '/events/event3.png',
+    event: {
+      title: 'Mountain Empire High School Workshop with TRIO',
+      date: 'Monday, April 22 2024, 2:30 - 5 PM ',
+      location: 'Mountain Empire High School',
+    },
+  },
+];
+
+export default events;

src/sections/landing/Events/index.tsx

@@ -0,0 +1,25 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+import Image from 'next/image';
+import EventCard from '@/components/EventCard';
+import events from './events';
+
+export default function Events() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.description}>
+        <Typography variant="display/medium">Upcoming Public Events</Typography>
+        <Typography variant="subheading">
+          Open to everyone to join!! Cannot attend but still interested? Contact us!
+        </Typography>
+      </div>
+      <div className={styles.wrapper}>
+        <div className={styles.eventGrid}>
+          {events.map((item, index) => (
+            <EventCard key={index} {...item} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/sections/landing/Events/style.module.scss

@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-self: flex-start;
+  width: 100%;
+
+  .description {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .wrapper {
+    display: flex;
+    overflow: hidden;
+
+    .eventGrid {
+      padding: 1rem 0;
+      flex-direction: row;
+      gap: 1rem;
+      display: flex;
+      overflow-x: auto;
+    }
+  }
+}

src/sections/landing/GetInvolved/index.tsx

@@ -0,0 +1,28 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+import Image from 'next/image';
+import GetInvolvedCard from '@/components/InvolvedCard';
+
+export default function GetInvolved() {
+  return (
+    <div className={styles.container}>
+      <Typography variant="display/medium">Get Involved</Typography>
+      <div className={styles.description}>
+        <div className={styles.wrapper}>
+          <GetInvolvedCard
+            image="/involved/students.png"
+            title="Students"
+            description="Are you curious about what goes on behind your favorite website, game, app, or even the device you’re reading this on? Join us at one of our workshops where you’ll dive into the world of computing and gain hands-on experience or take a look at our curriculum to learn at your own pace."
+            link="https://google.com"
+          />
+          <GetInvolvedCard
+            image="/involved/volunteers.png"
+            title="Volunteers"
+            description="Are you interested in spreading the joy of computing and making a difference in our community? Join us in teaching and inspiring the next generation of programmers and change-makers by becoming a volunteer! No prior experience is required!"
+            link="https://google.com"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/sections/landing/GetInvolved/style.module.scss

@@ -0,0 +1,27 @@
+.container {
+  width: 100%;
+  gap: 3rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  grid-gap: 2rem;
+  justify-content: space-between;
+  overflow: hidden;
+
+  .involvedCards {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+    gap: 1rem;
+  }
+}
+
+.description {
+  display: flex;
+  justify-content: center;
+}

src/sections/landing/Hero/index.tsx

@@ -0,0 +1,23 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+import Image from 'next/image';
+
+export default function Hero() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.description}>
+        <Typography variant="display/medium">ACM Outreach at UCSD</Typography>
+        <Typography variant="subheading">
+          Welcome to ACM Outreach at UCSD, where our mission is to ignite a passion for computing
+          and STEM among K-12 students, with a special focus on those who are underrepresented in
+          the computing community. Our goal is to empower students to explore the exciting world of
+          computing by nurturing their curiosity and enthusiasm for technology. Join us in inspiring
+          the next generation of innovators and problem solvers!
+        </Typography>
+      </div>
+      <div className={styles.logo}>
+        <Image src="/outreach-logo.svg" alt="Outreach Logo" fill />
+      </div>
+    </div>
+  );
+}