ElleHacks · Pritumi1984 · Dec 12, 2023 · Dec 12, 2023 · Dec 13, 2023 · Dec 13, 2023
diff --git a/2024/ellehacks2024/package-lock.json b/2024/ellehacks2024/package-lock.json
diff --git a/2024/ellehacks2024/package.json b/2024/ellehacks2024/package.json
@@ -43,6 +43,6 @@
     ]
   },
   "devDependencies": {
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.6"
   }
 }
diff --git a/2024/ellehacks2024/public/index.html b/2024/ellehacks2024/public/index.html
@@ -26,8 +26,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+  <body class="bg-mainBgRed text-white min-h-screen">
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/2024/ellehacks2024/src/App.css b/2024/ellehacks2024/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/2024/ellehacks2024/src/App.js b/2024/ellehacks2024/src/App.js
@@ -1,24 +1,64 @@
-import logo from './logo.svg';
-import './App.css';
+import Green from "./img/Green.png"
+import Red from "./img/Red.png"
+import Yellow from "./img/Yellow.png"
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      {/* Join Us Section */}
+      <h1 className="text-4xl md:text-6xl p-20 pl-12 md:pl-36 pb-8 bg-mainBgRed font-body font-bold text-white">Join Us</h1>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-3 gap-3 md:gap-5 md:px-20 mx-auto md:mb-24 p-2.5 md:p-0">
+        {/* <!-- Section 1 - Mentor --> */}
+        <section className="w-full p-2 md:p-10 pb-12 md:pb-16 md:pt-44 flex flex-col justify-end md:justify-between items-center bg-faintBgRed">
+          {/* Mentor Image */}
+          <div className="w-full md:h-72 md:mb-2">
+            <img src={Yellow} alt="Mentor Image" className="w-56 h-56 rounded-md object-contain mx-auto"></img>
+          </div>
+          {/* Mentor Card */}
+          <div className="w-full bg-white p-1 rounded-lg transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl hover:shadow-section1FaintBgYellow shadow-black">
+            <a href="#" className="text-xl md:text-4xl font-bold bg-section1FaintBgYellow w-full py-2 md:py-3 rounded text-center inline-block hover:bg-section1FaintBgYellowHover">Mentor</a>
+            <p className="text-black my-4 md:my-8 text-center text-base md:text-2xl font-bold">
+              Become a mentor
+            </p>
+          </div>
+        </section>
+
+        {/* <!-- Section 2 - Hacker --> */}
+        <section className="w-full p-2 md:pt-0 md:p-10 pb-12 md:pb-16 pt-0 flex flex-col justify-end md:justify-between items-center bg-faintBgRed">
+          {/* Hacker Image */}
+          <div className="w-full md:h-88 my-10 md:my-0">
+            <img src={Red} alt="About Us Image" className="w-full h-full rounded-md object-contain mx-auto"></img>
+          </div>
+          {/* Hacker Card */}
+          <div className="w-full bg-white p-1 rounded-lg transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl hover:shadow-white shadow-black">
+            <a href="#" className="text-xl md:text-4xl font-bold bg-mainBgRed w-full py-2 md:py-3 rounded text-center inline-block hover:bg-section2mainBgRedHover">Hacker</a>
+            <p className="text-black my-3 md:my-7 text-center text-base md:text-2xl font-bold">
+              Become a Hacker
+            </p>
+            <p className="text-black my-3 md:my-7 text-center text-sm md:text-xl md:w-3/4 mx-auto">
+              Come out and join us for ElleHacks 2024
+            </p>
+          </div>
+        </section>
+
+        {/* <!-- Section 3 - Volunteer -->  */}
+        <section className="w-full p-2 md:p-10 pb-12 md:pb-16 md:pt-44 flex flex-col justify-end md:justify-between items-center bg-faintBgRed">
+          {/* Volunteer Image */}
+          <div className="w-full md:h-72 md:mb-2">
+            <img src={Green} alt="Contact Us Image" className="w-56 h-56 rounded-md object-contain mx-auto"></img>
+          </div>
+          {/* Volunteer Card */}
+          <div className="w-full bg-white p-1 rounded-lg transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl hover:shadow-section3FaintBgGreen shadow-black">
+            <a href="#" className="text-xl md:text-4xl font-bold bg-section3FaintBgGreen w-full py-2 md:py-3 rounded text-center inline-block hover:bg-section3FaintBgGreenHover">Volunteer</a>
+            <p className="text-black my-4 md:my-8 text-center text-base md:text-2xl font-bold">
+              Become a volunteer
+            </p>
+          </div>
+        </section>
+      </div>
+    </>
   );
 }
 

diff --git a/2024/ellehacks2024/src/img/Green.png b/2024/ellehacks2024/src/img/Green.png
diff --git a/2024/ellehacks2024/src/img/Red.png b/2024/ellehacks2024/src/img/Red.png
diff --git a/2024/ellehacks2024/src/img/Yellow.png b/2024/ellehacks2024/src/img/Yellow.png
diff --git a/2024/ellehacks2024/src/index.css b/2024/ellehacks2024/src/index.css
@@ -1,13 +1,5 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/2024/ellehacks2024/tailwind.config.js b/2024/ellehacks2024/tailwind.config.js
@@ -1,9 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px"
+      },
+      colors: {
+        mainBgRed: "#712323",
+        faintBgRed: "#A45555",
+        section1FaintBgYellow: "#FFCE82",
+        section1FaintBgYellowHover: "#D8A267",
+        section2mainBgRedHover: "#511010",
+        section3FaintBgGreen: "#B0BBA0",
+        section3FaintBgGreenHover: "#899078"
+      },
+      fontFamily: {
+        body: ['Roboto Slab', "serif"]
+      },
+      height: {
+        '88': '23rem',
+      }
+    },
   },
   plugins: [],
-}
-
+}