Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.

Commit 62489e6

Browse files
hnasheralneamhnasheralneam
authored
Merge pull request #10 from zenith-hacks/axure-logo
Style fixes, individual sponsors
2 parents 68103ff + 2d2db45 commit 62489e6

File tree

3 files changed

+130
-95
lines changed

3 files changed

+130
-95
lines changed

‎src/layouts/components/Footer.astro‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,21 @@ const today = new Date();
33
---
44

55
<footer class='container mt-8'>
6-
<div class="justify-center flex gap-4 py-8 prose text-sm max-lg:text-center">
7-
<a>Zenith 2025 is fiscally sponsored by The Hack Foundation (d.b.a. Hack Club), a 501(c)(3) nonprofit (EIN: 81-2908499). Contributions are tax-deductible to the fullest extent allowed by law.</a>
8-
</div>
6+
<div class='justify-center flex gap-4 py-8 prose text-sm text-center'>
7+
<p class='max-w-[700px] underline'>
8+
Zenith 2025 is fiscally sponsored by The Hack Foundation (d.b.a. Hack Club), a 501(c)(3) nonprofit (EIN: 81-2908499). Contributions
9+
are tax-deductible to the fullest extent allowed by law.
10+
</p>
11+
</div>
912

1013
<div class='py-4 border-t'>
11-
<div class="md:flex text-sm text-zinc-500 max-lg:text-center prose justify-between">
12-
<div>Copyright © {today.getFullYear()} Zenith.</div>
13-
<div>Email: <a href="mailto:team@zenithhacks.org">team@zenithhacks.org</a> | <a href="https://withcabin.com/privacy/zenithhacks.org">Privacy Policy</a></div>
14-
</div>
14+
<div class='md:flex text-sm text-zinc-500 max-lg:text-center prose justify-between'>
15+
<div>Copyright © {today.getFullYear()} Zenith.</div>
16+
<div>
17+
<a href='mailto:team@zenithhacks.org'>team@zenithhacks.org</a> | <a href='https://withcabin.com/privacy/zenithhacks.org'
18+
>Privacy Policy</a
19+
>
20+
</div>
21+
</div>
1522
</div>
1623
</footer>

‎src/layouts/components/Header.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import HeaderLink from './HeaderLink.astro';
3-
import { Image } from 'astro:assets';
43
import Logo from '@src/assets/img/icon.png';
4+
import { Image } from 'astro:assets';
55
66
const menu = [
77
{
@@ -53,7 +53,7 @@ const menu = [
5353
</a>
5454
</h2>
5555
<div class='flex'>
56-
<a class='bg-transparent text-white px-6 py-2 rounded-full font-bold uppercase border border-zinc-700 animate-[subtle-glow_2s_infinite_alternate] hover:scale-105 transition-transform duration-300' href='https://hcb.hackclub.com/donations/start/zenithhacks' target='_blank'>
56+
<a class='bg-transparent text-white px-6 py-2 pt-[.7rem] rounded-full font-bold uppercase border border-zinc-700 animate-[subtle-glow_2s_infinite_alternate] hover:scale-105 transition-transform duration-300' href='https://hcb.hackclub.com/donations/start/zenithhacks' target='_blank'>
5757
Donate
5858
</a>
5959
</div>

‎src/pages/index.astro‎

Lines changed: 114 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,94 +3,122 @@ import BaseLayout from '../layouts/BaseLayout.astro';
33
import { Image } from 'astro:assets';
44
---
55

6-
<BaseLayout title="Zenith 2025">
7-
<div class="font-['Poppins']">
8-
<div class="bg-black h-[160vh] lg:h-[180vh] text-white overflow-hidden text-center relative">
9-
<div class="my-[12vh]">
10-
<h1 class="text-6xl font-['Roboto'] font-extrabold italic">Zenith 2025</h1>
11-
<p class="font-['Poppins'] max-w-[700px] inline-block text-xl">
12-
Join a hackathon to compete and connect with Hack Club leaders from across the world!
13-
</p>
14-
</div>
15-
<div
16-
class="inline-block h-[220vw] lg:h-[160vw] w-[160vw] bg-white rounded-full m-auto absolute left-[calc(50vw-80vw)]"
17-
style="top: calc(100vh - 40vh); box-shadow: -1rem -1rem 4rem #fff, inset 0 0 8rem #333"
18-
>
19-
<div class="container mt-[10vh] px-28 lg:mt-[50vh] lg:mx-auto text-black">
20-
<h2 class="text-4xl font-['Roboto'] font-bold text-center mb-4">What is Zenith 2025?</h2>
21-
<p class="text-center max-w-[700px] mx-auto text-xl leading-7">
22-
Zenith 2025 is a hackathon organised by and for teens. We're coming together for 2 days to share our knowledge and collaborate with like minded individuals in a supportive environment where mistakes are welcomed. The event will be hosted in the tech centre of the modern world - San Francisco. And with the help of our sponsors, we're going to make sure everyone, regardless of their background, can attend!
23-
</p>
24-
</div>
25-
</div>
26-
</div>
6+
<BaseLayout title='Zenith 2025'>
7+
<div class="font-['Poppins']">
8+
<div class='bg-black h-[160vh] lg:h-[180vh] text-white overflow-hidden text-center relative'>
9+
<div class='my-[12vh]'>
10+
<h1 class="text-6xl font-['Roboto'] font-extrabold italic">Zenith 2025</h1>
11+
<p class="font-['Poppins'] max-w-[700px] inline-block text-xl">
12+
Join a hackathon to compete and connect with Hack Club leaders from across the world!
13+
</p>
14+
</div>
15+
<div
16+
class='inline-block h-[220vw] lg:h-[160vw] w-[160vw] bg-white rounded-full m-auto absolute left-[calc(50vw-80vw)]'
17+
style='top: calc(100vh - 40vh); box-shadow: -1rem -1rem 4rem #fff, inset 0 0 8rem #333'
18+
>
19+
<div class='container mt-[10vh] px-28 lg:mt-[50vh] lg:mx-auto text-black'>
20+
<h2 class="text-4xl font-['Roboto'] font-bold text-center mb-4">What is Zenith 2025?</h2>
21+
<p class='text-center max-w-[700px] mx-auto text-xl leading-7'>
22+
Zenith 2025 is a hackathon organised by and for teens. We're coming together for 2 days to share our knowledge and collaborate
23+
with like minded individuals in a supportive environment where mistakes are welcomed. The event will be hosted in the tech
24+
centre of the modern world - San Francisco. And with the help of our sponsors, we're going to make sure everyone, regardless of
25+
their background, can attend!
26+
</p>
27+
</div>
28+
</div>
29+
</div>
2730

28-
<div class="bg-black text-white">
29-
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[400px] p-6">
30-
<div class="flex items-center justify-center text-center p-6">
31-
<div>
32-
<h2 class="text-3xl md:text-4xl font-['Roboto'] leading-7 my-2">Hackathon?</h2>
33-
<p class="text-lg md:text-xl">
34-
A hackathon is a social coding marathon where teenagers come together to learn, build, and share their results with the world!
35-
</p>
36-
</div>
37-
</div>
38-
<div class="p-6">
39-
<Image class="w-full h-auto rounded-lg" src="https://miro.medium.com/v2/resize:fit:7940/1*i5VHWsPa9k-u9ffVz0CQdw.jpeg" alt="Room full of teens" inferSize={true} />
40-
</div>
41-
</div>
31+
<div class='bg-black text-white'>
32+
<div class='grid grid-cols-1 md:grid-cols-2 min-h-[400px] p-6'>
33+
<div class='flex items-center justify-center text-center p-6'>
34+
<div>
35+
<h2 class="text-3xl md:text-4xl font-['Roboto'] leading-7 my-2">Hackathon?</h2>
36+
<p class='text-lg md:text-xl'>
37+
A hackathon is a social coding marathon where teenagers come together to learn, build, and share their results with the world!
38+
</p>
39+
</div>
40+
</div>
41+
<div class='p-6'>
42+
<Image
43+
class='w-full h-auto rounded-lg'
44+
src='https://miro.medium.com/v2/resize:fit:7940/1*i5VHWsPa9k-u9ffVz0CQdw.jpeg'
45+
alt='Room full of teens'
46+
inferSize={true}
47+
/>
48+
</div>
49+
</div>
4250

43-
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[400px] bg-white text-black p-6">
44-
<div class="flex items-center justify-center text-center p-6">
45-
<Image class="rotate-12 w-full h-auto max-w-xs mx-auto" src="https://seeklogo.com/images/G/globe-logo-273472C23A-seeklogo.com.png" alt="Globe vector image" inferSize={true} />
46-
</div>
47-
<div class="flex items-center justify-center text-center p-6">
48-
<div>
49-
<h2 class="text-3xl md:text-4xl font-['Roboto'] leading-7 my-2">Everyone?</h2>
50-
<p class="text-lg md:text-xl">
51-
Too often communities that are less privileged or outside the USA don't get the same opportunities, so we're providing travel stipends to all eligible teens after a vetting process to ensure that everyone, no matter their background or educational status can access life-changing partnerships with other teens.
52-
</p>
53-
</div>
54-
</div>
55-
</div>
56-
</div>
51+
<div class='grid grid-cols-1 md:grid-cols-2 min-h-[400px] bg-white text-black p-6'>
52+
<div class='flex items-center justify-center text-center p-6'>
53+
<Image
54+
class='rotate-12 w-full h-auto max-w-xs mx-auto'
55+
src='https://seeklogo.com/images/G/globe-logo-273472C23A-seeklogo.com.png'
56+
alt='Globe vector image'
57+
inferSize={true}
58+
/>
59+
</div>
60+
<div class='flex items-center justify-center text-center p-6'>
61+
<div>
62+
<h2 class="text-3xl md:text-4xl font-['Roboto'] leading-7 my-2">Everyone?</h2>
63+
<p class='text-lg md:text-xl'>
64+
Too often communities that are less privileged or outside the USA don't get the same opportunities, so we're providing travel
65+
stipends to all eligible teens after a vetting process to ensure that everyone, no matter their background or educational
66+
status can access life-changing partnerships with other teens.
67+
</p>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
5772

58-
<hr />
73+
<hr />
5974

60-
<div class="bg-white text-center my-8">
61-
<h1 class="text-3xl text-black font-['Poppins']">💖 Our sponsors, who will make this event possible 💖</h1>
62-
<style>
63-
.sponsor {
64-
display: inline-block;
65-
width: 400px;
66-
margin: 2rem 3rem;
67-
}
68-
.sponsor.square {
69-
height: 100px;
70-
width: 100px;
71-
}
72-
73-
@media (max-width: 768px) {
74-
.sponsor {
75-
display: block;
76-
width: 100%;
77-
height: auto;
78-
max-width: 200px;
79-
margin: 1rem auto;
80-
}
81-
.sponsor.square {
82-
height: auto;
83-
width: 80px;
84-
}
85-
}
86-
</style>
87-
<Image class="sponsor" src="/logos/disney-on-light.svg" alt="Disney logo" width={400} height={200} />
88-
<Image class="sponsor" src="/logos/redbull.svg" alt="Redbull logo" width={400} height={200} />
89-
<Image class="sponsor" src="/logos/desmos-on-light.png" alt="Desmos non-profit logo" width={400} height={200} />
90-
<Image class="sponsor bg-[#222] rounded-xl" src="/logos/codeforcause.png" alt="Code for Cause logo and text" width={400} height={200} />
91-
<Image class="sponsor" src="/logos/1password-blue.svg" alt="1Password logo" width={400} height={200} />
92-
<Image class="sponsor" src="/logos/axure.svg" alt="Axure logo" width={400} height={200} />
93-
<Image class="sponsor square" src="/logos/codecrafters.png" title="Code Crafters" alt="Code Crafters logo" width={100} height={100} />
94-
</div>
95-
</div>
75+
<div class='bg-white text-center my-8'>
76+
<h1 class="text-3xl text-black font-['Poppins']">💖 Our sponsors, who will make this event possible 💖</h1>
77+
<style>
78+
.sponsor {
79+
display: inline-block;
80+
width: 400px;
81+
margin: 2rem 3rem;
82+
}
83+
.sponsor.square {
84+
height: 100px;
85+
width: 100px;
86+
}
87+
88+
@media (max-width: 768px) {
89+
.sponsor {
90+
display: block;
91+
width: 100%;
92+
height: auto;
93+
max-width: 200px;
94+
margin: 1rem auto;
95+
}
96+
.sponsor.square {
97+
height: auto;
98+
width: 80px;
99+
}
100+
}
101+
</style>
102+
<Image class='sponsor' src='/logos/disney-on-light.svg' alt='Disney logo' width={400} height={200} />
103+
<Image class='sponsor' src='/logos/redbull.svg' alt='Redbull logo' width={400} height={200} />
104+
<Image class='sponsor' src='/logos/desmos-on-light.png' alt='Desmos non-profit logo' width={400} height={200} />
105+
<Image
106+
class='sponsor bg-[#222] rounded-xl'
107+
src='/logos/codeforcause.png'
108+
alt='Code for Cause logo and text'
109+
width={400}
110+
height={200}
111+
/>
112+
<Image class='sponsor' src='/logos/1password-blue.svg' alt='1Password logo' width={400} height={200} />
113+
<Image class='sponsor' src='/logos/axure.svg' alt='Axure logo' width={400} height={200} />
114+
<Image class='sponsor square' src='/logos/codecrafters.png' title='Code Crafters' alt='Code Crafters logo' width={100} height={100} />
115+
<br />
116+
<br />
117+
<hr />
118+
<br />
119+
<br />
120+
<h2 class='text-2xl py-2'>✨ Individual Sponsors ✨</h2>
121+
<p>John Tan-Aristy</p>
122+
</div>
123+
</div>
96124
</BaseLayout>

0 commit comments

Comments
 (0)