Skip to content

Commit 6c73f5d

Browse files
natashawadmannatashawadman
authored
Merge pull request #1 from devsuoa/tash-branch
making the home page
2 parents 3bf7302 + f76be54 commit 6c73f5d

4 files changed

Lines changed: 73 additions & 90 deletions

File tree

‎public/SSTRUK-logo.png‎

805 KB
Loading

‎src/App.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
1-
import { Routes, Route, Link } from 'react-router';
1+
import { Routes, Route, Link, useLocation } from 'react-router';
2+
import Home from './pages/home/Home';
23
import Signup from './pages/Signup';
34
import Explore from './pages/Explore';
45
import Chat from './pages/Chat';
56
import { Rocket } from 'lucide-react';
67

78
function App() {
9+
const location = useLocation();
10+
const isHomePage = location.pathname === '/';
11+
812
return (
913
<div className="app-container">
1014
<nav className="navbar">
1115
<Link to="/" className="navbar-brand">
1216
<Rocket className="inline-block mr-2" size={24} style={{ verticalAlign: 'text-bottom', color: 'var(--color-secondary)' }} />
1317
SSTRUK
1418
</Link>
15-
<div style={{ display: 'flex', gap: '16px' }}>
16-
<Link to="/explore" className="btn-outline" style={{ padding: '6px 16px', fontSize: '0.9rem' }}>Explore</Link>
17-
</div>
19+
{!isHomePage && (
20+
<div style={{ display: 'flex', gap: '16px' }}>
21+
<Link to="/explore" className="btn-outline" style={{ padding: '6px 16px', fontSize: '0.9rem' }}>Explore</Link>
22+
</div>
23+
)}
1824
</nav>
1925

2026
<main className="main-content">
2127
<Routes>
22-
<Route path="/" element={<Signup />} />
28+
<Route path="/" element={<Home />} />
29+
<Route path="/signup" element={<Signup />} />
2330
<Route path="/explore" element={<Explore />} />
2431
<Route path="/chat/:id" element={<Chat />} />
2532
</Routes>

‎src/pages/home/Home.module.css‎

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,71 @@
1-
.banner {
1+
.homeContainer {
22
display: flex;
3+
flex-direction: column;
34
align-items: center;
4-
justify-content: space-between;
5-
gap: 40px;
6-
margin-bottom: 60px;
5+
justify-content: center;
6+
min-height: calc(100vh - 150px);
7+
text-align: center;
8+
padding: 2rem;
79
}
810

9-
.bannerText h1 {
10-
font-size: 48px;
11-
line-height: 1.1;
12-
margin: 0 0 16px;
11+
.logo {
12+
max-width: 600px;
13+
width: 100%;
14+
margin-bottom: 1.5rem;
15+
animation: float 6s ease-in-out infinite;
16+
filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.3));
1317
}
1418

15-
.accent {
16-
background: linear-gradient(90deg, #A855F7, #2DD4BF);
17-
-webkit-background-clip: text;
18-
-webkit-text-fill-color: transparent;
19-
background-clip: text;
19+
.slogan {
20+
font-family: 'Cochocib Script Latin Pro', cursive;
21+
font-size: 2.2rem;
22+
color: var(--color-text, #f8fafc);
23+
margin-bottom: 3.5rem;
24+
font-weight: normal;
25+
letter-spacing: normal;
26+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
2027
}
2128

22-
.subtitle {
23-
font-size: 18px;
24-
color: #94A3B8;
25-
margin: 0 0 24px;
29+
.enterOrbitBtn {
30+
display: inline-block;
31+
background: linear-gradient(135deg, var(--color-primary, #a855f7), var(--color-secondary, #ec4899));
32+
color: white;
33+
padding: 1.2rem 3rem;
34+
border-radius: 9999px;
35+
font-size: 1.3rem;
36+
font-weight: 700;
37+
text-decoration: none;
38+
text-transform: uppercase;
39+
letter-spacing: 0.15em;
40+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
41+
box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
2642
}
2743

28-
.bannerImage img {
29-
width: 350px;
44+
.enterOrbitBtn:hover {
45+
transform: translateY(-4px) scale(1.05);
46+
box-shadow: 0 8px 25px rgba(236, 72, 153, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
47+
color: white;
3048
}
3149

32-
.cards {
33-
display: flex;
34-
gap: 24px;
35-
flex-wrap: wrap;
36-
}
37-
38-
.card {
39-
background-color: #1E293B;
40-
border-radius: 12px;
41-
padding: 24px;
42-
flex: 1;
43-
min-width: 200px;
50+
.enterOrbitBtn:active {
51+
transform: translateY(1px);
4452
}
4553

46-
.card h3 {
47-
margin: 0 0 8px;
54+
@keyframes float {
55+
0% { transform: translateY(0px); }
56+
50% { transform: translateY(-15px); }
57+
100% { transform: translateY(0px); }
4858
}
4959

50-
.card p {
51-
color: #94A3B8;
52-
font-size: 14px;
53-
margin: 0;
60+
@media (max-width: 768px) {
61+
.logo {
62+
max-width: 90%;
63+
}
64+
.slogan {
65+
font-size: 1.3rem;
66+
}
67+
.enterOrbitBtn {
68+
padding: 1rem 2rem;
69+
font-size: 1.1rem;
70+
}
5471
}

‎src/pages/home/Home.tsx‎

Lines changed: 7 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,14 @@
1-
import Button from "../../components/button/Button";
1+
import { Link } from 'react-router';
22
import styles from "./Home.module.css";
33

4-
// The home page of the application.
54
function Home() {
65
return (
7-
<div className="page">
8-
{/* Banner section */}
9-
<section className={styles.banner}>
10-
<div className={styles.bannerText}>
11-
<h1>
12-
{/* Main title */}
13-
<span className={styles.accent}>DEVS x SESA</span>
14-
<br />
15-
Beginner
16-
<br />
17-
Hackathon 2026
18-
</h1>
19-
20-
{/* Subtitle */}
21-
<p className={styles.subtitle}>
22-
Get ready to build something awesome with your team.
23-
</p>
24-
25-
{/* Button to API Example */}
26-
<Button text="API Example" to="/api-example" />
27-
</div>
28-
<div className={styles.bannerImage}>
29-
<img src={`${import.meta.env.BASE_URL}favicon.svg`} alt="logo" />
30-
</div>
31-
</section>
32-
33-
{/* Cards section */}
34-
<section className={styles.cards}>
35-
<div className={styles.card}>
36-
<h3>🎉 Have Fun</h3>
37-
<p>
38-
This is all about enjoying the experience and making memories with
39-
your team.
40-
</p>
41-
</div>
42-
<div className={styles.card}>
43-
<h3>📚 Learn Stuff</h3>
44-
<p>
45-
Pick up new skills in React, CSS, and web development along the way.
46-
</p>
47-
</div>
48-
<div className={styles.card}>
49-
<h3>🤝 Build Together</h3>
50-
<p>Collaborate with your teammates and bring your ideas to life.</p>
51-
</div>
52-
</section>
6+
<div className={styles.homeContainer}>
7+
<img src={`${import.meta.env.BASE_URL}SSTRUK-logo.png?v=5`} alt="SSTRUK Logo" className={styles.logo} />
8+
<p className={styles.slogan}>when your soulmate is a galaxy away...</p>
9+
<Link to="/signup" className={styles.enterOrbitBtn}>
10+
enter orbit
11+
</Link>
5312
</div>
5413
);
5514
}

0 commit comments

Comments
 (0)