ClockHacks · ulisesvina · Sep 7, 2023 · Sep 7, 2023 · Sep 7, 2023 · Sep 7, 2023
diff --git a/index.html b/index.html
@@ -1,10 +1,25 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- Primary Meta Tags -->
+    <title>ClockHacks 2 - A hackathon for time</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <meta name="title" content="ClockHacks 2 - A hackathon for time" />
+    <meta name="description" content="From November 3-5, 2023, join ClockHacks for one of the largest global virtual high school hackathons in the world. Work in teams of 4 to build amazing projects, meet new people, and innovate around the theme of time." />
+    <link rel="icon" type="image/x-icon" href="/clockhacks.png">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://clockhacks.dev/" />
+    <meta property="og:title" content="ClockHacks 2 - A hackathon for time" />
+    <meta property="og:description" content="From November 3-5, 2023, join ClockHacks for one of the largest global virtual high school hackathons in the world. Work in teams of 4 to build amazing projects, meet new people, and innovate around the theme of time." />
+    <meta property="og:image" content="/logo_cropped-transformed.jpeg" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://clockhacks.dev/" />
+    <meta property="twitter:title" content="ClockHacks 2 - A hackathon for time" />
+    <meta property="twitter:description" content="From November 3-5, 2023, join ClockHacks for one of the largest global virtual high school hackathons in the world. Work in teams of 4 to build amazing projects, meet new people, and innovate around the theme of time." />
+    <meta property="twitter:image" content="/logo_cropped-transformed.jpeg" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/clockhacks.png b/public/clockhacks.png
diff --git a/public/headshots/daisy-wang.jpg b/public/headshots/daisy-wang.jpg
diff --git a/public/headshots/quinn-wang.jpg b/public/headshots/quinn-wang.jpg
diff --git a/public/headshots/shreyash-mishra.jpg b/public/headshots/shreyash-mishra.jpg
diff --git a/public/logo_cropped-transformed.jpeg b/public/logo_cropped-transformed.jpeg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,17 +1,23 @@
 import Navbar from './components/Navbar'
+import Landing from './sections/Landing'
+import About from './sections/About'
+import FAQ from './sections/FAQ'
 import Team from './sections/Team'
 import Contact from './sections/Contact'
 import Footer from './components/Footer'
 
 function App() {
 
   return (
-    <div className='h-screen mb-20'>
+    <main>
       <Navbar />
+      <Landing />
+      <About />
+      <FAQ />
       <Team />
       <Contact />
       <Footer />
-    </div>
+    </main>
   )
 }
 

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -2,8 +2,8 @@ import Socials from "./Socials"
 
 const Footer = () => {
   return (
-    <div className='bg-bg2 p-8 text-text2'>
-      <div className="typography flex justify-between items-center">
+    <div className='bg-bg2 p-4 text-text2'>
+      <div className="typography !p-0 flex justify-between flex-col lg:flex-row items-center">
         <a href='https://github.com/ClockHacks/clockhacks.dev/blob/main/LICENSE' className='text-accent1'>
           Copyright © ClockHacks 2023
         </a>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -8,10 +8,12 @@ const links = [
   }, {
     name: 'FAQ',
     href: '#faq'
-  }, {
-    name: 'Sponsors',
-    href: '#sponsors'
-  }, {
+  }, 
+  // {
+  //   name: 'Sponsors',
+  //   href: '#sponsors'
+  // }, 
+  {
     name: 'Our Team',
     href: '#team'
   }, {

diff --git a/src/data/FAQ.data.js b/src/data/FAQ.data.js
@@ -0,0 +1,51 @@
+const faqData = [
+  {
+    title: "Event Information",
+    questions: [
+      {
+        question: "What is a Hackathon?",
+        answer: "A hackathon is an event where designers, programmers, engineers, and tech enthusiasts gather to create something within a given time limit.",
+      },
+      {
+        question: "How do I become a sponsor?",
+        answer: 'Sponsoring is a great way to grow your business and inspire the youth of the future. If you&apos;re interested in sponsoring, <a href="mailto://business@clockhacks.ca">email our business email.</a>',
+      },
+      {
+        question: "Who can participate?",
+        answer: "Students of any age from any part of the world are welcome to participate in ClockHacks. We are aiming for this to be a hackathon targeted toward high school students.",
+      },
+      {
+        question: "Is ClockHacks an in-person hackathon?",
+        answer: "ClockHacks 2023 will be online. Unfortunately, we simply do not have the resources to host ClockHacks in person."
+      },
+      {
+        question: "How much does it cost to attend ClockHacks?",
+        answer: "ClockHacks is completely free to attend. We will not be charging any fees to attend ClockHacks."
+      }
+
+    ]
+  },
+  {
+    title: "Column 2",
+    questions: [
+      {
+        question: "How can I find a team for ClockHacks?",
+        answer: "You will be able to find a team in the ClockHacks discord before the event starts, or choose to work by yourself.",
+      },
+      {
+        question: "What if I don't know how to code?",
+        answer: "It's okay! Hackathons aren't just about coding. There is also an aspect of business, design, and presentation. You can also attend workshops and listen to guest speakers talk about the world of tech.",
+      },
+      {
+        question: "Can I come if I'm a post-secondary or university student?",
+        answer: "Yes, but you will not be eligible for prizes. In order to keep ClockHacks fair and inclusive, we want to give the best chances to high school students. We still encourage to come, attend workshops, pitch a project, and meet some new people."
+      }, 
+      {
+        question: "What project should I make?",
+        answer: "You can make any type of project you would like! An app, a website, blockchain, hardware, design, or anything that your heart desires. However, since our hackathon is themed around time, we strongly encourage you to base your project around time as well."
+      }
+    ]
+  },
+];
+
+export default faqData;
diff --git a/src/data/Team.data.js b/src/data/Team.data.js
@@ -21,7 +21,7 @@ const teamData = [
         name: "Quinn Wang",
         role: "Business Dev",
         linkedin: null,
-        imageSrc: null // missing picture: doesn't have linkedin
+        imageSrc: "/headshots/quinn-wang.jpg" // missing picture: doesn't have linkedin
     },
     {
         name: "Zitang Ren",
@@ -31,15 +31,15 @@ const teamData = [
     },
     {
         name: "Hamza Ammar",
-        role: "Marketing Organizer",
+        role: "Marketing",
         linkedin: "https://www.linkedin.com/in/hamza-ammar-341531240/",
         imageSrc: "/headshots/hamza-ammar.jpg"
     },
     {
         name: "Shreyash Mishra",
-        role: "Design Organizer",
+        role: "Design",
         linkedin: "https://www.linkedin.com/in/shreyash-mishra-b95830229",
-        imageSrc: null // missing picture: doesn't have picture on linkedin
+        imageSrc: "/headshots/shreyash-mishra.jpg" // missing picture: doesn't have picture on linkedin
     },
     {
         name: "Jim Wang",
@@ -55,21 +55,21 @@ const teamData = [
     },
     {
         name: "Krish Ganatra",
-        role: "Event Operations Organizer",
+        role: "Operations",
         linkedin: "https://linkedin.com/in/krish-ganatra/",
         imageSrc: "/headshots/krish-ganatra.jpg"
     },
     {
         name: "Steven Qiao",
-        role: "Operations Organizer",
+        role: "Operations",
         linkedin: "https://www.linkedin.com/in/steven-qiao/",
         imageSrc: "/headshots/steven-qiao.jpeg" // missing picture: doesn't have picture on linkedin
     },
     {
         name: "Daisy Wang",
-        role: "Operations Organizer",
+        role: "Operations",
         linkedin: "https://www.linkedin.com/in/daisy-wang-a82316257/",
-        imageSrc: null // missing picture: doesn't have picture on linkedin
+        imageSrc: "/headshots/daisy-wang.jpg" // missing picture: doesn't have picture on linkedin
     }
 ];
 

diff --git a/src/sections/About.jsx b/src/sections/About.jsx
@@ -0,0 +1,119 @@
+import { useState, useEffect } from "react";
+
+const About = () => {
+    const [stats, setStats] = useState({
+        participants: 0,
+        projects: 0,
+        moneyRaised: 0,
+    });
+
+    const maxParticipants = 360,
+        maxProjects = 40,
+        maxMoneyRaised = 10000;
+
+    const participantsStep = maxParticipants / 100,
+        projectsStep = maxProjects / 100,
+        moneyRaisedStep = maxMoneyRaised / 100;
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setStats((prevStats) => ({
+                participants: Math.min(prevStats.participants + participantsStep, maxParticipants),
+                projects: Math.min(prevStats.projects + projectsStep, maxProjects),
+                moneyRaised: Math.min(prevStats.moneyRaised + moneyRaisedStep, maxMoneyRaised),
+            }));
+        }, 5);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <section className="flex flex-col justify-center items-center min-h-[50vh] bg-bg2" id='about'>
+            <div className='typography flex flex-col gap-[6rem]'>
+                <div>
+                    <h1 className="text-3xl md:text-4xl font-bold text-center pt-8">
+                        By <span className="text-accent1">students</span>, for{" "}
+                        <span className="text-accent1">students</span>
+                    </h1>
+                    <div className="mt-2">
+                        <p className="mt-3 text-center">
+                            ClockHacks is a hackathon founded by high school students whose mission
+                            is to{" "}
+                            <span className="font-bold">make hackathons more accessible to students.</span>
+                        </p>
+                        <p className="mt-3 text-center">
+                            ClockHacks is themed around time. You will be able to work in teams of up to 4 persons to create whatever tech-related project that can have a positive impact on the world.
+                        </p>
+                    </div>
+                </div>
+                <div className="mt-5 flex flex-wrap flex-col justify-center w-full md:space-y-0 space-y-5">
+                    <div className="w-full p-3 text-center">
+                        <h2 className="text-3xl font-bold">
+                            <span className="text-accent1">Last year's stats</span>
+                        </h2>
+                        <div className="mt-3 text-xl flex flex-col md:flex-row gap-8 justify-center pt-8">
+                            <div className='bg-bg1 p-8 rounded-lg text-accent2'>
+                                <span className="font-bold">{stats.participants.toFixed(0)}+</span> <span className="text-accent2">registrations</span>
+                            </div>
+                            <div className='bg-bg1 p-8 rounded-lg text-accent2'>
+                                <span className="font-bold">{stats.projects.toFixed(0)}+</span> <span className="text-accent2"> projects submitted</span>
+                            </div>
+                            <div className='bg-bg1 p-8 rounded-lg text-accent2'>
+                                <span className="font-bold">${stats.moneyRaised.toFixed(0)}+</span> <span className="text-accent2">in prizes</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="w-full p-3 text-center">
+                    <h2 className="text-3xl font-bold">
+                        <span className="text-accent1">Project Showcase</span>
+                    </h2>
+                    <div className="max-w-5xl mx-auto mt-3">
+                        <a
+                            href="https://devpost.com/software/spaced-out-fbv7tz"
+                            target="_BLANK"
+                            rel="noopener noreferrer"
+                        >
+                            <div className="bg-yellow-500 hover:opacity-80 transition-opacity mt-4 rounded-lg p-3">
+                                <span className="font-bold text-xl">Space Out!</span><br />
+                                <span className="text-xs">First Overall</span><br />
+                                <p className="mt-2 text-black">
+                                    Studying flash cards has never been more fun!
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="https://devpost.com/software/pendulum-qbhlut"
+                            target="_BLANK"
+                            rel="noopener noreferrer"
+                        >
+                            <div className="bg-gray-400 hover:opacity-80 transition-opacity mt-4 rounded-lg p-3">
+                                <span className="font-bold text-xl">Pendulum</span><br />
+                                <span className="text-xs">Second Overall</span><br />
+                                <p className="mt-2 text-black">
+                                    Increase your productivity by lowering your temptation for instant gratification.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="https://devpost.com/software/optime-s7ozmn"
+                            target="_BLANK"
+                            rel="noopener noreferrer"
+                        >
+                            <div className="bg-yellow-600 hover:opacity-80 transition-opacity mt-4 rounded-lg p-3">
+                                <span className="font-bold text-xl">Optime</span><br />
+                                <span className="text-xs">Third Overall</span><br />
+                                <p className="mt-2 text-black">
+                                    For your every smart scheduling need!
+                                </p>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default About;
diff --git a/src/sections/Contact.jsx b/src/sections/Contact.jsx
@@ -1,10 +1,10 @@
 const Contact = () => {
     return (
-        <div className='flex flex-col items-center justify-center w-full'>
+        <section className='flex flex-col items-center justify-center w-full mb-[7rem]' id="contact">
             <h1 className='md:text-6xl text-4xl text-accent1 font-bold'>Contact Us</h1>
-            <p className='text-xl mt-5'>Interested in sponsoring? <a href="mailto:business@clockhacks.dev">Reach out to our  <span className="text-accent1 hover:underline">business email.</span></a></p>
-            <p className='text-xl mt-2'>Have questions? <a href="mailto:hi@clockhacks.dev">Send us an email <span className="text-accent1 hover:underline">here.</span></a></p>
-        </div>
+            <p className='text-lg mt-5 text-center'>Interested in sponsoring? <a href="mailto:business@clockhacks.dev">Reach out to our  <span className="text-accent1 hover:underline">business email.</span></a></p>
+            <p className='text-lg mt-2 text-center'>Have questions? <a href="mailto:hi@clockhacks.dev">Send us an email <span className="text-accent1 hover:underline">here.</span></a></p>
+        </section>
     );
 }
 

diff --git a/src/sections/FAQ.jsx b/src/sections/FAQ.jsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import FAQData from '../data/FAQ.data';
+
+const FAQ = () => {
+    const [activeIndices, setActiveIndices] = useState(Array(FAQData.length).fill(null));
+
+    const toggleAccordion = (columnIndex, questionIndex) => {
+        setActiveIndices(prevIndices => {
+            const newIndices = [...prevIndices];
+            newIndices[columnIndex] = newIndices[columnIndex] === questionIndex ? null : questionIndex;
+            return newIndices;
+        });
+    };
+
+    return (
+        <section className="text-white my-[8rem]" id='faq'>
+            <h2 className="text-3xl text-accent1 font-bold mb-8 text-center">Frequently Asked Questions</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-[80%] mx-auto">
+                {FAQData.map((item, columnIndex) => (
+                    <div
+                        key={columnIndex} className='flex flex-col gap-6'
+                    >
+                        {
+                            item.questions.map((question, questionIndex) => (
+                                <div
+                                    key={questionIndex}
+                                    className="rounded-lg border border-accent2 p-4"
+                                >
+                                    <div
+                                        className="cursor-pointer flex justify-between items-center"
+                                        onClick={() => toggleAccordion(columnIndex, questionIndex)}
+                                    >
+                                        <div className="font-semibold">{question.question}</div>
+                                        <div>{activeIndices[columnIndex] === questionIndex ? '-' : '+'}</div>
+                                    </div>
+                                    <div
+                                        className={`overflow-hidden transition-all duration-300 ${activeIndices[columnIndex] === questionIndex
+                                                ? 'max-h-[1000px] opacity-100'
+                                                : 'max-h-0 opacity-0'
+                                            }`}
+                                        dangerouslySetInnerHTML={{ __html: question.answer }}
+                                    />
+                                </div>
+                            ))
+                        }
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
+};
+
+export default FAQ;