Skip to content

Commit 56c087f

Browse files
saumilthecodesaumilthecode
committed
remade first page :D
1 parent 02ab8af commit 56c087f

28 files changed

+13679
-76
lines changed

‎package-lock.json‎

Lines changed: 9694 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/logo.webp‎

115 KB
Loading

‎src/assets/img/zennethmotivational.webp‎

861 KB
Loading

‎src/components/core/Footer.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ const { class: className } = Astro.props;
1515
class="text-center text-sm leading-loose text-muted-foreground md:text-left"
1616
>
1717
Built by <a
18-
href="https://hyperoot.dev"
18+
href="https://github.com/saumilthecode"
1919
target="_blank"
2020
rel="noreferrer"
21-
class="font-medium underline underline-offset-4">HYP3R00T</a
21+
class="font-medium underline underline-offset-4">Saumil</a
2222
>. The source code is available on
2323
<a
24-
href="https://github.com/HYP3R00T/CelestialDocs"
24+
href="https://github.com/saumilthecode/bbsshackclub"
2525
target="_blank"
2626
rel="noreferrer"
2727
class="font-medium underline underline-offset-4">GitHub</a

‎src/components/core/HamNavMenu.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ const pathname_part: string = pathname.split("/")[1];
4646
<a href={item.href}>
4747
<Button
4848
variant="link"
49-
className=`${"/" + pathname_part === "/" + item.href.split("/")[1] ? "underline" : ""} text-foreground`
49+
className={`${
50+
"/" + pathname_part === "/" + item.href.split("/")[1]
51+
? "underline"
52+
: ""
53+
} text-foreground`}
5054
key={item.href}
5155
>
5256
{item.title}

‎src/components/core/Header.astro‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,79 @@
11
---
22
import { ModeToggle } from "@/components/core/ModeToggle";
3-
import HamNavMenu from "@/components/core/HamNavMenu.astro";
3+
import NavMenue from "@/components/core/navmenue.astro";
44
import NavMenu from "@/components/core/NavMenu.astro";
55
import { Search } from "@/components/core/Search";
6-
76
import { Button } from "@/components/ui/button";
8-
97
import { docconfig, SITE } from "@/config";
108
import { Github } from "lucide-react";
119
12-
// To pass the tailwindcss classes to the astro component
1310
const { class: className } = Astro.props;
1411
---
1512

1613
<header
1714
class:list={[
18-
"py-4 px-6 md:px-16 lg:px-48 w-full sticky top-0 z-50",
15+
"py-2 px-2 sm:py-3 sm:px-4 md:px-6 lg:px-12 w-full sticky top-0 z-50",
1916
className,
2017
]}
2118
>
2219
<div
23-
class="flex space-x-4 justify-between items-center md:items-center md:space-x-0 md:max-w-8xl"
20+
class="flex justify-between items-center"
2421
>
25-
<div class="font-bold flex flex-row items-center">
26-
<a href="/" class="px-4 hidden md:flex no-underline">
22+
<!-- Left Side Logo -->
23+
<div class="font-bold flex items-center">
24+
<a href="/" class="no-underline">
2725
<Button
2826
client:load
29-
className="flex gap-2 hover:no-underline text-2xl"
27+
className="flex gap-2 hover:no-underline text-lg sm:text-xl md:text-2xl p-1 sm:p-2"
3028
variant="link"
3129
>
32-
<img src="/logo.svg" alt="Logo" class="w-[2rem] h-[2rem]" />
30+
<img src="/logo.webp" alt="Logo" class="w-6 h-6 sm:w-8 sm:h-8" />
3331
{SITE.title}
3432
</Button>
3533
</a>
36-
<a href="/" class="px-4 flex md:hidden">
37-
<Button client:load className="" variant="ghost" size="icon">
38-
<img src="/logo.svg" alt="Logo" class="w-[2rem] h-[2rem]" />
39-
</Button>
40-
</a>
4134
<div class="hidden md:block">
4235
<NavMenu />
4336
</div>
4437
</div>
4538

46-
<div class="flex flex-row gap-2 md:px-8">
47-
{!docconfig.hide_search && <Search client:only="react" />}
39+
<!-- Center Navigation Links - Only visible on desktop -->
40+
<div class="hidden md:flex items-center gap-6">
41+
<a href="/projects">
42+
<Button variant="ghost">Projects</Button>
43+
</a>
44+
<a href="/competition">
45+
<Button variant="ghost">Competition</Button>
46+
</a>
47+
<a href="/our-people">
48+
<Button variant="ghost">Our People</Button>
49+
</a>
50+
</div>
51+
52+
<!-- Right Side Buttons and Controls -->
53+
<div class="flex items-center gap-1 sm:gap-2">
54+
{!docconfig.hide_search && (
55+
<div class="hidden sm:block">
56+
<Search client:only="react" />
57+
</div>
58+
)}
4859
{
4960
!docconfig.hide_repo_button && (
50-
<a href={SITE.repo} target="_blank">
51-
<Button client:load className="" variant="ghost" size="icon">
52-
<Github className="w-[1.2rem] h-[1.2rem]" />
61+
<a href={SITE.repo} target="_blank" class="hidden sm:inline-block">
62+
<Button client:load variant="ghost" size="icon" className="p-1 sm:p-2">
63+
<Github className="w-4 h-4 sm:w-5 sm:h-5" />
5364
</Button>
5465
</a>
5566
)
5667
}
57-
<div class="md:hidden flex flex-row-reverse gap-4">
58-
<HamNavMenu />
59-
<ModeToggle client:load transition:persist />
68+
<!-- Join Us button - Only visible on desktop -->
69+
<div class="hidden md:block">
70+
<a href="/join-us">
71+
<Button client:load variant="default">Join Us</Button>
72+
</a>
6073
</div>
61-
62-
<div class="flex-row gap-4 hidden md:flex">
63-
<ModeToggle client:load transition:persist />
74+
<ModeToggle client:load transition:persist />
75+
<div class="md:hidden">
76+
<NavMenue />
6477
</div>
6578
</div>
6679
</div>
@@ -69,10 +82,7 @@ const { class: className } = Astro.props;
6982
<script is:inline>
7083
function setDarkMode(document) {
7184
const getThemePreference = () => {
72-
if (
73-
typeof localStorage !== "undefined" &&
74-
localStorage.getItem("theme")
75-
) {
85+
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
7686
return localStorage.getItem("theme");
7787
}
7888
return window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -97,7 +107,6 @@ const { class: className } = Astro.props;
97107
setDarkMode(document);
98108

99109
document.addEventListener("astro:before-swap", (ev) => {
100-
// Pass the incoming document to set the theme on it
101110
setDarkMode(ev.newDocument);
102111
});
103-
</script>
112+
</script>

‎src/components/core/navmenue.astro‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
import { Button } from "@/components/ui/button";
3+
import { MenuIcon, X } from "lucide-react";
4+
import { SITE } from "@/config";
5+
---
6+
7+
<style>
8+
.menu-overlay {
9+
display: none;
10+
position: fixed;
11+
inset: 0;
12+
background-color: rgb(255, 255, 255);
13+
z-index: 9999;
14+
overflow-y: auto;
15+
opacity: 0;
16+
transition: opacity 0.3s ease-in-out;
17+
}
18+
19+
@media (prefers-color-scheme: dark) {
20+
.menu-overlay {
21+
background-color: rgb(9, 9, 11);
22+
}
23+
}
24+
25+
.menu-overlay.active {
26+
display: flex;
27+
flex-direction: column;
28+
opacity: 1;
29+
}
30+
31+
.menu-content {
32+
padding: 2rem;
33+
flex-grow: 1;
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
align-items: center;
38+
position: relative;
39+
z-index: 10000;
40+
}
41+
42+
.close-button {
43+
position: absolute;
44+
top: 1rem;
45+
right: 1rem;
46+
z-index: 10001;
47+
}
48+
49+
.menu-item {
50+
width: 100%;
51+
text-align: center;
52+
padding: 0.5rem;
53+
position: relative;
54+
z-index: 10000;
55+
list-style: none;
56+
}
57+
58+
#menu-toggle {
59+
position: relative;
60+
z-index: 9998;
61+
}
62+
63+
.menu-list {
64+
list-style: none;
65+
padding: 0;
66+
margin: 0;
67+
}
68+
69+
@media (max-width: 768px) {
70+
.menu-content {
71+
justify-content: flex-start;
72+
padding-top: 4rem;
73+
}
74+
}
75+
</style>
76+
77+
<div id="menu-toggle">
78+
<Button variant="ghost" size="icon" client:load aria-label="Toggle menu">
79+
<MenuIcon className="h-[1.2rem] w-[1.2rem]" />
80+
</Button>
81+
</div>
82+
83+
<div class="menu-overlay" role="dialog" aria-modal="true">
84+
<div class="close-button">
85+
<Button variant="ghost" size="icon" client:load id="close-menu" aria-label="Close menu">
86+
<X className="h-[1.2rem] w-[1.2rem]" />
87+
</Button>
88+
</div>
89+
<nav class="menu-content">
90+
<ul class="menu-list flex flex-col items-center space-y-6 text-xl w-full">
91+
<li class="menu-item">
92+
<a href="/">
93+
<Button client:load variant="link" size="lg" className="w-full">Home</Button>
94+
</a>
95+
</li>
96+
<li class="menu-item">
97+
<a href="/projects">
98+
<Button client:load variant="link" size="lg" className="w-full">Projects</Button>
99+
</a>
100+
</li>
101+
<li class="menu-item">
102+
<a href="/competition">
103+
<Button client:load variant="link" size="lg" className="w-full">Competition</Button>
104+
</a>
105+
</li>
106+
<li class="menu-item">
107+
<a href="/our-people">
108+
<Button client:load variant="link" size="lg" className="w-full">Our People</Button>
109+
</a>
110+
</li>
111+
<li class="menu-item">
112+
<a href="/join-us">
113+
<Button client:load variant="default" size="lg" className="w-full">Join Us</Button>
114+
</a>
115+
</li>
116+
</ul>
117+
</nav>
118+
</div>
119+
120+
<script>
121+
function toggleMenu() {
122+
const menuOverlay = document.querySelector('.menu-overlay');
123+
if (menuOverlay) {
124+
menuOverlay.classList.toggle('active');
125+
document.body.style.overflow = menuOverlay.classList.contains('active') ? 'hidden' : '';
126+
}
127+
}
128+
129+
document.getElementById('menu-toggle')?.addEventListener('click', toggleMenu);
130+
document.getElementById('close-menu')?.addEventListener('click', toggleMenu);
131+
132+
document.querySelectorAll('.menu-overlay a').forEach(link => {
133+
link.addEventListener('click', toggleMenu);
134+
});
135+
136+
document.addEventListener('keydown', (e) => {
137+
if (e.key === 'Escape') {
138+
const menuOverlay = document.querySelector('.menu-overlay');
139+
if (menuOverlay?.classList.contains('active')) {
140+
toggleMenu();
141+
}
142+
}
143+
});
144+
</script>

‎src/components/home/CallToAction.astro‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
// CallToAction.astro
3+
---
4+
5+
<div class="cta-container">
6+
<h1 class="text-center">Take an idea you're interested in and bring it to <i>L</i>ife</h1>
7+
</div>
8+
9+
<style>
10+
.cta-container {
11+
padding-bottom: 4rem; /* Adds padding below the h1 */
12+
}
13+
</style>

‎src/components/home/entice.astro‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
import { Image } from 'astro:assets';
3+
import zennethmotivational from '/src/assets/img/zennethmotivational.webp';
4+
---
5+
6+
<div class="flex flex-col md:flex-row items-center justify-center w-full max-w-4xl mx-auto pb-16 px-4 md:px-0">
7+
<div class="flex-shrink-0 mb-6 md:mb-0 md:mr-8">
8+
<Image
9+
src={zennethmotivational}
10+
alt="Motivational image"
11+
width={320}
12+
height={320}
13+
class="w-full md:w-auto"
14+
/>
15+
</div>
16+
<div class="flex-grow">
17+
<p class="text-base md:text-lg text-[#cbd4f5] space-y-2 text-center md:text-left">
18+
Ever wanted to make a <a href="https://hackclub.com/onboard/" class="text-[#00ff29]">PCB</a>?
19+
<br />
20+
What about a <a href="https://sprig.hackclub.com/" class="text-[#00ffb3]">game</a>?
21+
<br />
22+
What about a <a href="https://saumilthecode.github.io/dancefloor/" class="text-[#f2ed6d]">3D website</a>?
23+
<br />
24+
<br />
25+
I could keep this list going but you get what I'm talking about.
26+
<br />
27+
Ever wanted to make something with Tech but never knew how to?
28+
<br />
29+
With BBSS Hack Club we <strong>will</strong> give you the resources, time and (<em>possibly</em>) funding to work on your projects
30+
<br />
31+
<br />
32+
<a href="/projects" class="font-bold hover:underline transition-all duration-300 inline-block mt-4 text-lg">
33+
🚀 <i class="text-primary">Explore Our Exciting Projects!</i>
34+
</a>
35+
</p>
36+
</div>
37+
</div>

‎src/components/home/hero.astro‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const { class: className } = Astro.props;
33
import { Image } from "astro:assets";
44
import { Button } from "@/components/ui/button";
5-
import KittyAstronaut from "@/assets/KittyAstronaut.svg";
5+
import KittyAstronaut from "/public/logo.webp";
66
---
77

88
<div
@@ -18,13 +18,11 @@ import KittyAstronaut from "@/assets/KittyAstronaut.svg";
1818
<h1
1919
class="text-pretty text-center md:text-left md:text-4xl lg:text-5xl tracking-wide"
2020
>
21-
Elevate Your Documentation with a <i class="text-primary">Celestial</i> Touch
21+
BBSS <i class="text-primary">Hack Club</i>
2222
</h1>
23-
<a href="/getting-started" class="py-4">
24-
<Button size="lg" className="rounded-lg">
25-
<h4 class="text-lg">Get started</h4>
26-
</Button>
27-
</a>
23+
<p class="text-center md:text-left text-lg md:text-2xl">
24+
Take an idea you're interested in and bring it to Life
25+
</p>
2826
</div>
2927
<div class="hidden md:flex w-1/2 justify-center align-middle">
3028
<Image src={KittyAstronaut} alt="404" />

0 commit comments

Comments
 (0)