Homepage Setup (#23)

* Set up structure for homepage

* Added landing card and restructured

* Added starter code for components

* Fixed the scroll for arrow icon + updated components template code

* Fixing yarn stuff

* Team cards added to homepage

* Made page responsive and minor fixes

* Fixed errors for Alexis changes

* Dark mode isn't set up yet

* Fixed index key error during vercel build (#25)

Co-authored-by: avVergnet <[email protected]>

* Minor cleanup

* Improved flexbox

* Accidentally deleted the wrong code

* Title doesn't move with typewriter

* Added hero dark mode and better mobile adaptive design

* Navbar change

* Adjusted for ultrawide

* Svg change

---------

Co-authored-by: avVergnet <[email protected]>
Co-authored-by: AVERGNET <[email protected]>

.eslintrc.json

@@ -38,5 +38,13 @@
       }
     ]
   },
-  "ignorePatterns": "src/**/*.d.ts"
+  "ignorePatterns": "src/**/*.d.ts",
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      }
+    }
+  ]
 }

package.json

@@ -23,7 +23,8 @@
     "nextra": "latest",
     "nextra-theme-docs": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0"
   },
   "devDependencies": {
     "@types/node": "18.11.10",
@@ -40,4 +41,4 @@
     "prettier": "^3.0.0",
     "typescript": "^4.9.3"
   }
-}
+}

pages/_meta.json

@@ -1,4 +1,13 @@
 {
-  "index": "ACM Hack",
-  "hack-school": "Hack School"
+  "index": {
+    "title": "ACM Hack",
+    "type": "page",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "hack-school": {
+    "title": "Hack School",
+    "type": "page"
+  }
 }

pages/index.mdx

@@ -1,3 +1,2 @@
-# Introduction
-
-Welcome to ACM Hack! This site is currently under construction 🏗️. Check back in the fall to see all of our content!
+import HomePage from '../src/homepage';
+export default HomePage;

src/components/event-card/index.tsx

@@ -0,0 +1,7 @@
+import styles from './style.module.css';
+
+const EventsCard: React.FC = () => {
+  return <h3>Event Card</h3>;
+};
+
+export default EventsCard;

src/components/navbar/index.tsx

@@ -0,0 +1,7 @@
+import styles from './style.module.css';
+
+const Navbar: React.FC = () => {
+  return <h3>Navbar</h3>;
+};
+
+export default Navbar;

src/components/team-card/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styles from './style.module.css';
+
+const TeamCard: React.FC = () => {
+  const teamMembers = [
+    {
+      name: 'Nikhil Dange',
+      position: 'Hack Technical Lead',
+      email: '[email protected]',
+      imageUrl: 'assets/nikhil2_pfp.JPG',
+    },
+    {
+      name: 'Angela Hu',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/angela_pfp.PNG',
+    },
+    {
+      name: 'Khushi Patel',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/khushi_pfp.PNG',
+    },
+    {
+      name: 'Charvi Shukla',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/charvi_pfp.PNG',
+    },
+    {
+      name: 'Alexis Vergnet',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/alexis_pfp.PNG',
+    },
+  ];
+
+  return (
+    <div className={styles.team}>
+      {teamMembers.map((member, index) => (
+        <div key={member.name} className={styles.card}>
+          <div className={styles.cardOutline}>
+            <img src={member.imageUrl} alt={member.name} />
+            <h4>{member.name}</h4>
+            <p>{member.position}</p>
+            <p>{member.email}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TeamCard;

src/components/team-card/style.module.css

@@ -0,0 +1,25 @@
+.team {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.card {
+    margin: 10px;
+    text-align: center;
+}
+
+.cardOutline {
+    border: 2px solid #333;
+    padding: 16px;
+    text-align: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+.card img {
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+    display: inline-block;
+}

src/components/typewriter/index.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import styles from './style.module.css';
+
+interface TypewriterProps {
+  text: string;
+  delay: number;
+}
+
+const Typewriter: React.FC<TypewriterProps> = ({ text, delay }) => {
+  const [currentText, setCurrentText] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (currentIndex < text.length) {
+      const timeout = setTimeout(() => {
+        setCurrentText(prevText => prevText + text[currentIndex]);
+        setCurrentIndex(prevIndex => prevIndex + 1);
+      }, delay);
+
+      return () => clearTimeout(timeout);
+    }
+    return undefined;
+  }, [currentIndex, delay, text]);
+
+  return <h6 className={styles.landing_caption}>{currentText}</h6>;
+};
+
+export default Typewriter;

src/components/typewriter/style.module.css

@@ -0,0 +1,6 @@
+.landing_caption {
+    position: absolute;
+    top: 40%;
+    width: 100%;
+    font-size: 2em;
+}

src/homepage.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+
+import Hero from './sections/Hero';
+import About from './sections/About';
+import Events from './sections/Events';
+import Team from './sections/Team';
+
+const HomePage: NextPage = () => {
+  return (
+    <main>
+      <Hero />
+      <About />
+      <Events />
+      <Team />
+    </main>
+  );
+};
+
+export default HomePage;

src/sections/About/index.tsx

@@ -0,0 +1,7 @@
+import styles from './style.module.css';
+
+const About: React.FC = () => {
+  return <h3 className={styles.about}>About Section</h3>;
+};
+
+export default About;

src/sections/About/style.module.css

@@ -0,0 +1,9 @@
+.about {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 30vh;
+    max-height: 100vh;
+    border-bottom: 1px solid black;
+}

src/sections/Events/index.tsx

@@ -0,0 +1,7 @@
+import styles from './style.module.css';
+
+const Events: React.FC = () => {
+  return <h3 className={styles.events}>Event Section</h3>;
+};
+
+export default Events;

src/sections/Events/style.module.css

@@ -0,0 +1,9 @@
+.events {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 30vh;
+    max-height: 100vh;
+    border-bottom: 1px solid black;
+}

src/sections/Hero/index.tsx

@@ -0,0 +1,41 @@
+import { FaChevronDown } from 'react-icons/fa6';
+import Image from 'next/image';
+import Typewriter from '../../components/typewriter';
+import leftside from '../../../public/assets/left_diamonds.svg';
+import rightside from '../../../public/assets/right_diamonds.svg';
+import styles from './style.module.css';
+import aboutStyles from '../About/style.module.css';
+
+const Hero: React.FC = () => {
+  const scrollToInfo: () => void = () => {
+    const navbarHeight = 80;
+    const element = document.getElementsByClassName(aboutStyles.about)[0];
+    const elementTop = element.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({
+      top: elementTop - navbarHeight,
+      behavior: 'smooth',
+    });
+  };
+  return (
+    <div className={styles.hero}>
+      <div className={styles.backdrop}>
+        <Image src={leftside} className={styles.backdrop_left} alt="backdrop" />
+        <div className={styles.landing_text}>
+          <h1 className={styles.landing_title}>ACM Hack</h1>
+          <Typewriter
+            text="Empowering our community of software engineers. Building cool things with code. Yes, we
+            like to code."
+            delay={60}
+          />
+        </div>
+        <Image src={rightside} className={styles.backdrop_right} alt="backdrop" />
+      </div>
+      <div className={styles.arrow} role="presentation" onClick={scrollToInfo}>
+        <h6>Learn More</h6>
+        <FaChevronDown className={styles.scroll} />
+      </div>
+    </div>
+  );
+};
+
+export default Hero;