CodeCafeCommunity · Jan 16, 2025 · Dec 28, 2024 · Dec 28, 2024 · Dec 28, 2024 · Dec 28, 2024
diff --git a/index.html b/index.html
@@ -4,7 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Code Café Community</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/mockup/coffee_cup.jpg b/mockup/coffee_cup.jpg
diff --git a/mockup/mockup.css b/mockup/mockup.css
@@ -0,0 +1,196 @@
+/* Universal Styles*/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Arial", sans-serif;
+  --primary: #240e1f;
+  --secondary: #f0b052;
+  --accent: #e96932;
+}
+
+body {
+  width: 100%;
+}
+
+button {
+  padding-inline: 35px;
+  padding-block: 14px;
+  border-radius: 14px;
+  outline: none;
+  border: none;
+}
+
+.card {
+  border-radius: 45px;
+  padding: 50px;
+  width: 30%;
+  height: 200px;
+}
+
+/* Header Styles */
+
+header {
+  background-color: var(--secondary);
+  padding-block: 1rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+header h1 {
+  color: var(--primary);
+}
+
+header h1 i {
+  padding-right: 0.5rem;
+}
+
+header nav ul {
+  display: flex;
+  list-style: none;
+}
+
+header nav ul li {
+  color: var(--primary);
+  padding-inline: 1rem;
+}
+
+/* Hero Section */
+
+#hero {
+  height: 85vh;
+  background-color: var(--primary);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  color: var(--accent);
+  padding-inline: 2rem;
+}
+
+#hero .hero-container {
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-content: space-between;
+}
+
+#hero .hero-container h2 {
+  font-size: 5rem;
+}
+
+#hero .hero-container p {
+  font-size: 1.5rem;
+}
+
+#hero .hero-container div {
+  width: 40%;
+  display: flex;
+  justify-content: space-between;
+}
+
+#hero .hero-container div button {
+  width: 40%;
+  background-color: var(--secondary);
+  box-shadow: 0px 4px 0px 0px var(--accent);
+  font-size: 1.25rem;
+}
+
+#hero img {
+  height: 50%;
+}
+
+/* Feature Section */
+
+#features {
+  height: 35vh;
+  background-color: var(--secondary);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+#features .card {
+  background-color: var(--primary);
+  box-shadow: 0px 6px 0px 0px var(--accent);
+}
+
+#features .card i {
+  padding-bottom: 0.5rem;
+  font-size: 1.75rem;
+  color: var(--accent);
+}
+
+#features .card h3 {
+  font-size: 1.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--secondary);
+}
+
+#features .card p {
+  font-size: 1rem;
+  color: var(--secondary);
+}
+
+/* Call to Action Section */
+
+#cta {
+  background-color: var(--primary);
+  height: 45vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#cta .cta-container {
+  background: linear-gradient(96deg, var(--accent) 0%, var(--secondary));
+  box-shadow: 0px 4px 0px 0px var(--accent);
+  border-radius: 45px;
+  width: fit-content;
+  height: 60%;
+  padding-inline: 15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  color: var(--primary);
+}
+
+#cta .cta-container button {
+  background-color: var(--primary);
+  color: var(--secondary);
+  box-shadow: 0px 4px 0px 0px var(--accent);
+}
+
+/* Footer Styles */
+
+footer {
+  padding-block: 4rem;
+  display: flex;
+  justify-content: space-around;
+  background-color: var(--secondary);
+}
+
+footer .footer-container {
+  color: var(--primary);
+  height: fit-content;
+}
+
+footer .footer-container h4 {
+  font-size: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+
+footer .footer-container i {
+  padding-right: 0.5rem;
+}
+
+footer .footer-container ul {
+  list-style: none;
+}
+
+footer .footer-container ul li {
+  padding-bottom: 0.75rem;
+}
diff --git a/mockup/mockup.html b/mockup/mockup.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Code Cafe</title>
+    <link rel="stylesheet" href="./mockup.css" />
+    <script
+      src="https://kit.fontawesome.com/8942288b8d.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+
+  <body>
+    <header>
+      <h1><i class="fa-solid fa-code"></i>Code Cafe</h1>
+      <nav>
+        <ul>
+          <li>Home</li>
+          <li>About Us</li>
+          <li>Events</li>
+        </ul>
+      </nav>
+      <span></span>
+    </header>
+    <main>
+      <section id="hero">
+        <div class="hero-container">
+          <h2>Where Code Meets Community</h2>
+          <p>
+            Join our vibrant community of developers, share knowledge and grow
+            together in a welcoming environment.
+          </p>
+          <div>
+            <button>Join us</button>
+            <button>Learn more</button>
+          </div>
+        </div>
+        <img src="./coffee_cup.jpg" alt="Code Cafe Logo" />
+      </section>
+      <section id="features">
+        <div class="card">
+          <i class="fa-solid fa-users"></i>
+          <h3>Active Community</h3>
+          <p>
+            Connect with like-minded developers and build lasting relationships.
+          </p>
+        </div>
+        <div class="card">
+          <i class="fa-solid fa-laptop-code"></i>
+          <h3>Some other thing</h3>
+          <p>Description about that other thing.</p>
+        </div>
+        <div class="card">
+          <i class="fa-solid fa-book"></i>
+          <h3>Learning Resources</h3>
+          <p>Access curated learning materials and documentation.</p>
+        </div>
+      </section>
+      <section id="cta">
+        <div class="cta-container">
+          <h2>Ready to Join Our Community?</h2>
+          <p>
+            Start your journey with Code Cafe today and become part of a
+            thriving developer community.
+          </p>
+          <button>Join Code Cafe</button>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div class="footer-container">
+        <h4><i class="fa-solid fa-code"></i>Code Cafe</h4>
+        <p>Your home for coding and community</p>
+      </div>
+      <div class="footer-container">
+        <h4>Community</h4>
+        <ul>
+          <li>Events</li>
+          <li>Discord</li>
+        </ul>
+      </div>
+      <div class="footer-container">
+        <h4>Resources</h4>
+        <ul>
+          <li>Documentation</li>
+          <li>Blog</li>
+          <li>GitHub</li>
+        </ul>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "lucide-react": "^0.469.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-router": "^7.1.1"

diff --git a/public/images/coffee_cup.jpg b/public/images/coffee_cup.jpg
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx