making the home page

Author: natashaw17

public/SSTRUK-logo.png

@@ -1,25 +1,32 @@
-import { Routes, Route, Link } from 'react-router';
+import { Routes, Route, Link, useLocation } from 'react-router';
+import Home from './pages/home/Home';
 import Signup from './pages/Signup';
 import Explore from './pages/Explore';
 import Chat from './pages/Chat';
 import { Rocket } from 'lucide-react';
 
 function App() {
+  const location = useLocation();
+  const isHomePage = location.pathname === '/';
+
   return (
     <div className="app-container">
       <nav className="navbar">
         <Link to="/" className="navbar-brand">
           <Rocket className="inline-block mr-2" size={24} style={{ verticalAlign: 'text-bottom', color: 'var(--color-secondary)' }} />
           SSTRUK
         </Link>
-        <div style={{ display: 'flex', gap: '16px' }}>
-          <Link to="/explore" className="btn-outline" style={{ padding: '6px 16px', fontSize: '0.9rem' }}>Explore</Link>
-        </div>
+        {!isHomePage && (
+          <div style={{ display: 'flex', gap: '16px' }}>
+            <Link to="/explore" className="btn-outline" style={{ padding: '6px 16px', fontSize: '0.9rem' }}>Explore</Link>
+          </div>
+        )}
       </nav>
 
       <main className="main-content">
         <Routes>
-          <Route path="/" element={<Signup />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/signup" element={<Signup />} />
           <Route path="/explore" element={<Explore />} />
           <Route path="/chat/:id" element={<Chat />} />
         </Routes>

src/App.tsx

@@ -1,54 +1,71 @@
-.banner {
+.homeContainer {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  gap: 40px;
-  margin-bottom: 60px;
+  justify-content: center;
+  min-height: calc(100vh - 150px);
+  text-align: center;
+  padding: 2rem;
 }
 
-.bannerText h1 {
-  font-size: 48px;
-  line-height: 1.1;
-  margin: 0 0 16px;
+.logo {
+  max-width: 600px;
+  width: 100%;
+  margin-bottom: 1.5rem;
+  animation: float 6s ease-in-out infinite;
+  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.3));
 }
 
-.accent {
-  background: linear-gradient(90deg, #A855F7, #2DD4BF);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.slogan {
+  font-family: 'Cochocib Script Latin Pro', cursive;
+  font-size: 2.2rem;
+  color: var(--color-text, #f8fafc);
+  margin-bottom: 3.5rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-.subtitle {
-  font-size: 18px;
-  color: #94A3B8;
-  margin: 0 0 24px;
+.enterOrbitBtn {
+  display: inline-block;
+  background: linear-gradient(135deg, var(--color-primary, #a855f7), var(--color-secondary, #ec4899));
+  color: white;
+  padding: 1.2rem 3rem;
+  border-radius: 9999px;
+  font-size: 1.3rem;
+  font-weight: 700;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
 }
 
-.bannerImage img {
-  width: 350px;
+.enterOrbitBtn:hover {
+  transform: translateY(-4px) scale(1.05);
+  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
+  color: white;
 }
 
-.cards {
-  display: flex;
-  gap: 24px;
-  flex-wrap: wrap;
-}
-
-.card {
-  background-color: #1E293B;
-  border-radius: 12px;
-  padding: 24px;
-  flex: 1;
-  min-width: 200px;
+.enterOrbitBtn:active {
+  transform: translateY(1px);
 }
 
-.card h3 {
-  margin: 0 0 8px;
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-15px); }
+  100% { transform: translateY(0px); }
 }
 
-.card p {
-  color: #94A3B8;
-  font-size: 14px;
-  margin: 0;
+@media (max-width: 768px) {
+  .logo {
+    max-width: 90%;
+  }
+  .slogan {
+    font-size: 1.3rem;
+  }
+  .enterOrbitBtn {
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+  }
 }

src/pages/home/Home.module.css

@@ -1,55 +1,14 @@
-import Button from "../../components/button/Button";
+import { Link } from 'react-router';
 import styles from "./Home.module.css";
 
-// The home page of the application.
 function Home() {
   return (
-    <div className="page">
-      {/* Banner section */}
-      <section className={styles.banner}>
-        <div className={styles.bannerText}>
-          <h1>
-            {/* Main title */}
-            <span className={styles.accent}>DEVS x SESA</span>
-            <br />
-            Beginner
-            <br />
-            Hackathon 2026
-          </h1>
-
-          {/* Subtitle */}
-          <p className={styles.subtitle}>
-            Get ready to build something awesome with your team.
-          </p>
-
-          {/* Button to API Example */}
-          <Button text="API Example" to="/api-example" />
-        </div>
-        <div className={styles.bannerImage}>
-          <img src={`${import.meta.env.BASE_URL}favicon.svg`} alt="logo" />
-        </div>
-      </section>
-
-      {/* Cards section */}
-      <section className={styles.cards}>
-        <div className={styles.card}>
-          <h3>🎉 Have Fun</h3>
-          <p>
-            This is all about enjoying the experience and making memories with
-            your team.
-          </p>
-        </div>
-        <div className={styles.card}>
-          <h3>📚 Learn Stuff</h3>
-          <p>
-            Pick up new skills in React, CSS, and web development along the way.
-          </p>
-        </div>
-        <div className={styles.card}>
-          <h3>🤝 Build Together</h3>
-          <p>Collaborate with your teammates and bring your ideas to life.</p>
-        </div>
-      </section>
+    <div className={styles.homeContainer}>
+      <img src={`${import.meta.env.BASE_URL}SSTRUK-logo.png?v=5`} alt="SSTRUK Logo" className={styles.logo} />
+      <p className={styles.slogan}>when your soulmate is a galaxy away...</p>
+      <Link to="/signup" className={styles.enterOrbitBtn}>
+        enter orbit
+      </Link>
     </div>
   );
 }