First commit

package.json

@@ -39,5 +39,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,24 +1,13 @@
-import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Content from './components/Content';
+import IntroSection from './components/IntroSection';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <IntroSection />
+      <Content />
+
     </div>
   );
 }

src/components/Content.tsx

@@ -0,0 +1,42 @@
+import Link from "./Link";
+import * as React from "react";
+import { DISCORD, FORM } from "../constants/links";
+const Content: React.FC<{}> = (props) => {
+    return (
+        <div className={"bg-gradient-to-b from-slate-800 to-slate-900 min-h-screen px-10 py-20"}>
+            <div className={"max-w-6xl mx-auto"}>
+                <div className={"border-b-2 border-b-slate-800 py-20"}>
+                    <h2 className={"text-3xl font-bold font-Poppins text-white"}>What is a Hack Club?</h2>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>JHHS Hack Club is affiliated with <Link url={"https://hackclub.com"} text={"Hack Club"} />, a global network of 2,000 programming clubs that provides guides and funding for running Hack Clubs and starting hackathons.</p>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>
+                        Hack Club offers many unique opportunities, such as worldwide coding tournaments, large-scale <Link url={"https://hackathons.hackclub.com/"} text={"hackathons"} />, and AMAs with influential people in tech like <Link url={"https://hackclub.com/amas/"} text={"Elon Musk"} /> and <Link url={"https://hackclub.com/amas/"} text={"Vitalik Buterin"} /></p>
+                </div>
+                <div className={"border-b-2 border-b-slate-800 py-20"}>
+                    <h2 className={"text-3xl font-bold font-Poppins text-white"}>What do we do at Hack Club?</h2>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>Every Friday, we meet up at school for 1 hour at Room 158 (Mr. Brown’s Room), and build <b className={"text-white"}>awesome software projects</b>. These projects are accessible any skill level, beginner to advanced.</p>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>You’ll work independently or collaboratively with other group members to build, then can show off what you’ve built to the group by the end of the meetup!</p>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>
+                        We also run game nights and will eventually join <b className={"text-white"}>hackathons</b>, where you’ll compete for prizes to build practical, web or app-based solutions within the duration of the event.</p>
+                </div>
+
+                <div className={"py-20"}>
+                    <h2 className={"text-3xl font-bold font-Poppins text-white"}>How can I join?</h2>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>Hack Club is open to people with all skill levels, from beginners to experienced developers.</p>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>Our next meetup is on <b className={"text-white"}>Monday, September 2nd</b> at <b className={"text-white"}>3:00PM</b >at <b className={"text-white"}>Mr. Brown’s Room</b> (Room 158 in the Math Hallway)</p>
+                    <p className={"leading-8 text-xl font-light font-Poppins text-slate-300 mt-5"}>
+                        Please feel free to fill out the <Link url={FORM} text="early sign up" /> or <Link url={DISCORD} text="join the discord" /> for updates on the Hack Club!
+                    </p>
+                </div>
+                <div className={"flex space-y-3 flex-col mt-10"}>
+                    <a href={FORM} target="_blank" className={"bg-gradient-to-r from-amber-700 to-red-500 rounded-full p-4 px-7 w-fit hover:cursor-pointer hover:scale-105 transition-all"}>
+                        <p className={"text-xl text-white font-Poppins font-bold"}>Join the Club</p>
+                    </a>
+                    <a href={DISCORD} target="_blank" className={"bg-gradient-to-r from-cyan-600 to-sky-700 rounded-full p-4 px-7 w-fit hover:cursor-pointer hover:scale-105 transition-all"}>
+                        <p className={"text-xl text-white font-Poppins font-bold"}>Join the Discord</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default Content

src/components/IntroSection.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { DISCORD, FORM } from "../constants/links";
+const IntroSection: React.FC<{}> = (props) => {
+
+
+
+    return (
+
+        <div className={"bg-[url('./img/background.png')] bg-opacity-10 bg-cover object-fill p-5 backdrop-blur-xl z-10 shadow-lg"}>
+            <div>
+                <p className={"text-xl font-medium text-white font-Poppins"}>JHHS Hack Club</p>
+                <div className={"py-32"}>
+                    <h1 className={"text-6xl font-bold text-white font-Poppins text-center"}>JHHS Hack Club</h1>
+                    <div className={"max-w-2xl mx-auto mt-10"}>
+                        <h3 className={"text-2xl font-regular text-slate-300 font-Poppins text-center"}>Build awesome projects and attend hackathons at the JHHS Hack Club</h3>
+                    </div>
+                    <p className={"text-md font-medium text-slate-400 font-Poppins text-center mt-10"}>Next Meetup: Monday, 9/2 at 3:00PM at Mr. Brown’s Room 158</p>
+                    <div className={"flex space-y-3 flex-col items-center justify-center mt-10"}>
+                        <a href={FORM} target="_blank" className={"bg-gradient-to-r from-amber-700 to-red-500 rounded-full p-4 px-7 w-fit hover:cursor-pointer hover:scale-105 transition-all"}>
+                            <p className={"text-xl text-white font-Poppins font-bold"}>Join the Club</p>
+                        </a>
+                        <a href={DISCORD} target="_blank" className={"bg-gradient-to-r from-cyan-600 to-sky-700 rounded-full p-4 px-7 w-fit hover:cursor-pointer hover:scale-105 transition-all"}>
+                            <p className={"text-xl text-white font-Poppins font-bold"}>Join the Discord</p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default IntroSection

src/components/Link.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+const Link: React.FC<{
+    url: string,
+    text: string
+}> = (props) => {
+    return (
+        <a className={"text-cyan-400 underline hover:font-medium transition-all"} href={props.url} target="_blank">{props.text}</a>
+    );
+}
+export default Link

src/constants/links.ts

@@ -0,0 +1,2 @@
+export const DISCORD = "https://discord.gg/nh2ZVA73Q9";
+export const FORM = "https://forms.gle/ZjgDPvGhJC2Deruw6";

src/index.css

@@ -1,13 +1,4 @@
-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;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.tsx

@@ -1,19 +1,10 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import './index.css';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+  <App />
+);

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        "Poppins": ["Poppins", "sans-serif"],
+        "display": ["Poppins", "sans-serif"],
+        "body": ["Poppins", "sans-serif"],
+      }
+    },
+  },
+  plugins: [],
+}