Skip to content

Commit e64a7b4

Browse files
rupnil-codesrupnil-codes
committed
(v0.4.6-alpha) Button animations!
Added the button func. and animations also the background now slowly moves!
1 parent b491ca0 commit e64a7b4

3 files changed

Lines changed: 98 additions & 43 deletions

File tree

‎src/routes/landing.jsx‎

Lines changed: 52 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import "../styles/routes/landing.css";
2-
import {ArrowDown, ArrowUpRight} from "lucide-react";
2+
import {ArrowDown, ArrowUpRight, ArrowRight} from "lucide-react";
33
import {useState} from "react";
44

55

66
function Landing() {
77

8+
const [openIndex, setOpenIndex] = useState(null);
9+
810
const generateBinary = (length = 256) => {
911
return Array.from({length}, (_, i) => i % 2 ? 1 : 0).join("");
1012
}
@@ -61,7 +63,7 @@ function Landing() {
6163
Learn More <ArrowDown size={16} strokeWidth={2}/>
6264
</div>
6365
</a>
64-
<a href={"#footer"}>
66+
<a href={"https://rsvp.hackclub.community/cipher"} target="_blank" rel="noopener noreferrer">
6567
<div className={"button-container-important"}>
6668
RSVP <ArrowUpRight size={16} strokeWidth={3}/>
6769
</div>
@@ -176,7 +178,7 @@ function Landing() {
176178
{/*</div>*/}
177179
<a href={"http://hackclub.com/slack"} target="_blank" rel="noopener noreferrer">
178180
<div className={"button-container-important"}>
179-
Join Slack
181+
Join Slack <ArrowRight size={16} strokeWidth={3}/>
180182
</div>
181183
</a>
182184
</div>
@@ -222,35 +224,44 @@ function Landing() {
222224
<p>Some of your pressing questions about <i>CIPHER</i><br/>
223225
has been answered below: </p>
224226

225-
<div className={"container"}>
226-
<div className={"faq"}>
227-
<div className={"question"}>Q. When will this start?</div>
228-
<div className={"answer"}><i>CIPHER</i> is a YSWS concept. If this gets selected for 2026 Summer
229-
Internship or if I get sponsors this will become a reality! Keep an eye on #cipher!
230-
</div>
231-
</div>
232-
<div className={"faq"}>
233-
<div className={"question"}>Q. Can I submit multiple projects?</div>
234-
<div className={"answer"}>YES! in fact you are encouraged to make multiple projects.</div>
235-
</div>
236-
<div className={"faq"}>
237-
<div className={"question"}>Q. What is <i>"BYTES"</i>?</div>
238-
<div className={"answer"}>
239-
<i>BYTES</i> are the fake currency of Cipher. After submitting a project, it will go through
240-
voting. The result of the voting determines how many <i>BYTES</i> you'll receive for each
241-
hour coded.<br/><br/>
242-
Use the <i>BYTES</i> to buy something nice!
243-
</div>
244-
</div>
245-
<div className={"faq"}>
246-
<div className={"question"}>Q. How do I track time?</div>
247-
<div className={"answer"}>
248-
Use Hackatime, an editor extension that tracks the time you spend coding. You can install it
249-
<a href={"https://hackatime.hackclub.com/"} target="_blank"
250-
rel="noopener noreferrer"> here</a>
251-
!
227+
<div className="container">
228+
{[
229+
{
230+
q: "When will this start?",
231+
a: <> <i>CIPHER</i> is a YSWS concept. If this gets selected for 2026 Summer Internship or if I get sponsors this will become a reality! Keep an eye on #cipher! </>
232+
},
233+
{
234+
q: "Can I submit multiple projects?",
235+
a: <>YES! in fact you are encouraged to make multiple projects.</>
236+
},
237+
{
238+
q: 'What is "BYTES"?',
239+
a: <> <i>BYTES</i> are the fake currency of Cipher. After submitting a project, it will go through
240+
voting. The result of the voting determines how many <i>BYTES</i> you'll receive for each
241+
hour coded.<br/><br/>
242+
Use the <i>BYTES</i> to buy something nice! </>
243+
},
244+
{
245+
q: "How do I track time?",
246+
a: <>Use Hackatime, an editor extension that tracks the time you spend coding. You can install it
247+
<a href={"https://hackatime.hackclub.com/"} target="_blank"
248+
rel="noopener noreferrer"> here</a>
249+
!</>
250+
}
251+
].map((item, i) => (
252+
<div className="faq" key={i}>
253+
<div
254+
className="question"
255+
onClick={() => setOpenIndex(openIndex === i ? null : i)}
256+
>
257+
Q. {item.q}
258+
</div>
259+
260+
<div className={`answer ${openIndex === i ? "open" : ""}`}>
261+
{item.a}
262+
</div>
252263
</div>
253-
</div>
264+
))}
254265
</div>
255266
</section>
256267
<section id={"footer"} className={"footer"}>
@@ -267,12 +278,16 @@ function Landing() {
267278
<p>CIPHER is nowhere near completion. So, if you want CIPHER to become a reality, RSVP now! and
268279
keep an eye on #cipher!</p>
269280
<div className={"buttons"}>
270-
<div className={"button-container"}>
271-
Join Slack
272-
</div>
273-
<div className={"button-container"}>
274-
RSVP
275-
</div>
281+
<a href={"https://hackclub.com/slack"} target={"_blank"} rel="noopener noreferrer" >
282+
<div className={"button-container"}>
283+
Join Slack <ArrowUpRight size={16} strokeWidth={3}/>
284+
</div>
285+
</a>
286+
<a href={"https://rsvp.hackclub.community/cipher"} target={"_blank"} rel="noopener noreferrer" >
287+
<div className={"button-container"}>
288+
RSVP <ArrowUpRight size={16} strokeWidth={3}/>
289+
</div>
290+
</a>
276291
</div>
277292
</div>
278293
<div className={"footer"}>

‎src/styles/App.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
);
1515

1616
background-size: 20px 20px;
17+
18+
animation: drift 3s linear infinite;
1719
}
1820
.dotted-bg::before {
1921
content: "";
@@ -28,6 +30,15 @@
2830
);
2931
}
3032

33+
@keyframes drift {
34+
from {
35+
background-position: 0 0;
36+
}
37+
to {
38+
background-position: 20px 20px;
39+
}
40+
}
41+
3142
.viewport {
3243
position: relative;
3344
min-height: 100%;

‎src/styles/routes/landing.css‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128

129129
/*border: 2px solid color-mix(in srgb, var(--clr-primary-a30) 20%, transparent);*/
130130

131-
/*box-shadow: 0 0 1rem 0 var(--clr-surface-a10);*/
131+
box-shadow: 0 0 2rem 0 var(--clr-surface-a0);
132132
}
133133

134134
.landing .hero .terminal .titlebar {
@@ -556,12 +556,23 @@
556556

557557
border-radius: 0.5rem;
558558
font-weight: 400;
559+
560+
transition: 0.2s ease-in-out all;
561+
}
562+
.community .container .buttons .button-container-important:hover {
563+
translate: 0.5rem 0;
564+
/*background-color: var(--clr-primary-a10);*/
559565
}
560566

561567
a {
562568
text-decoration: none;
563569
}
564570

571+
.footer a {
572+
/*text-decoration: none;*/
573+
color: var(--clr-primary-a80);
574+
}
575+
565576

566577
.faqs {
567578
display: flex;
@@ -646,10 +657,18 @@ a {
646657
outline: 2px dashed color-mix(in srgb, var(--clr-surface-a10) 80%, black);
647658

648659
border-radius: 0.75rem;
649-
650660
background-color: var(--clr-dark-a0);
651-
}
652661

662+
/*max-height: 0;*/
663+
/*overflow: hidden;*/
664+
/*opacity: 0;*/
665+
/*transition: all 0.3s ease-in-out;*/
666+
}
667+
/*.faqs .container .faq .answer.open {*/
668+
/* max-height: 300px;*/
669+
/* opacity: 1;*/
670+
/* margin-top: 8px;*/
671+
/*}*/
653672

654673

655674
.footer {
@@ -683,7 +702,7 @@ a {
683702

684703
.footer .rsvp {
685704
margin: 6rem 6rem 1rem 6rem;
686-
padding: 4rem 2rem;
705+
padding: 3rem 2rem;
687706

688707
width: 100%;
689708
max-width: 40rem;
@@ -695,7 +714,7 @@ a {
695714
flex-direction: column;
696715
align-items: center;
697716
justify-content: center;
698-
gap: 0.5rem;
717+
gap: 1rem;
699718

700719
border-radius: 1rem;
701720
border: 2px dashed var(--clr-surface-a20);
@@ -713,9 +732,13 @@ a {
713732

714733
color: var(--clr-surface-tonal-a50);
715734
text-align: center;
735+
736+
line-height: 1.65rem;
716737
}
717738

718739
.footer .rsvp .buttons {
740+
margin-top: 0.4rem;
741+
719742
display: flex;
720743
flex-direction: row;
721744
gap: 1rem;
@@ -725,13 +748,19 @@ a {
725748

726749
.footer .rsvp .buttons .button-container {
727750
display: flex;
728-
flex-direction: column;
751+
flex-direction: row;
729752
align-items: center;
753+
gap: 1rem;
730754

731755
padding: 0.75rem 1.5rem;
732756

733757
background-color: var(--clr-primary-a0);
734758
border-radius: 0.5rem;
759+
760+
transition: all 0.2s ease-in-out;
761+
}
762+
.footer .rsvp .buttons .button-container:hover {
763+
translate: 0 -0.4rem;
735764
}
736765

737766
.footer .container .footer {

0 commit comments

Comments
 (0)