(v0.5.0-alpha) Animations!

Added small micro-interactions and animations to  the whole site! It feels alive (kinda) now-

Author: rupnil-codes

README.md

@@ -3,7 +3,10 @@ A YSWS concept stressing on Cybersecurity & Cryptography!
 
 **CIPHER**
 
-YS: A techy app/game focused on cryptography, security, puzzles, CTFs and other techy stuff that ill think later (Cybersecurity related)
+~~YS: A techy app/game focused on cryptography, security, puzzles, CTFs and other techy stuff that ill think later (Cybersecurity related)~~
+YS: An app, game or site with one specific vulnerability AND another version where you fixed it.
 WS: yubikeys, hackduckys, Laptops, wifi modules, etc
 
+There'll be bounty's for finding the vulnerability.
+
 PS: There'll be some vulnerable sites (that ill make) and the first person to crack those gets bonus prizes

src/routes/landing.jsx

@@ -84,8 +84,8 @@ function Landing() {
                         <div className={"body"}>
                             <p>anon@hackclub ~ % ./start --journey</p>
                             <p>OBJECTIVE: <span className={"accent"}>BUILD. BREAK. SECURE.</span><br/>
-                                REWARD SYSTEM: <span className={"info"}>BYTES ENABLED</span><br/>
-                                STATUS: <span className={"success"}>READY</span>
+                                REWARD SYSTEM: <span className={"info"}>BYTES</span><br/>
+                                STATUS: <span className={"success"}>BUILDING</span>
                                 <span className={"cursor"}><b>_</b></span>
                             </p>
                         </div>

src/styles/routes/landing.css

@@ -5,15 +5,15 @@
     width: 100%;
     height: 100vh;
 
-    max-height: 45rem;
+    max-height: 47rem;
 
     display: flex;
     flex-direction: column;
 }
 
 .landing .hero {
     margin-top: 6rem;
-    height: calc(100vh - 6rem);
+    height: calc(100vh - 4rem);
     width: 100%;
 
     flex: 1;
@@ -128,7 +128,12 @@
 
     /*border: 2px solid color-mix(in srgb, var(--clr-primary-a30) 20%, transparent);*/
 
-    box-shadow: 0 0 2rem 0 var(--clr-surface-a0);
+    box-shadow: 0 0 4rem 1rem var(--clr-surface-a0);
+    transition: 0.3s all ease-in-out;
+}
+.landing .hero .terminal:hover {
+    /*translate: 0 -1rem;*/
+    margin-top: 2.5rem;
 }
 
 .landing .hero .terminal .titlebar {
@@ -321,15 +326,29 @@
     border-radius: 1rem;
 
     /*box-shadow: 0 0 6rem -3rem var(--clr-primary-a30);*/
+    transition: all 0.3s ease-in-out;
 }
 .ysws .cards .card.ys {
     rotate: -5deg;
+    /*margin-left: 2rem;*/
+    /*box-shadow: 0 0 2rem 0 var(--clr-surface-a0);*/
+}
+.ysws .cards .card.ys:hover {
+    rotate: -7deg;
     /*margin-right: 1rem;*/
+    scale: 1.05;
 }
 .ysws .cards .card.ws {
     rotate: 5deg;
     margin-top: 5rem;
-    /*margin-left: 1rem;*/
+    /*margin-right: 2rem;*/
+
+    box-shadow: 0 0 1rem 0 var(--clr-surface-a0);
+}
+.ysws .cards .card.ws:hover {
+    rotate: 7deg;
+    scale: 1.05;
+    /*margin-right: 1rem;*/
 }
 
 .ysws .cards .card .header {
@@ -399,7 +418,11 @@
     height: 4rem;
     width: 9rem;
 
-    transform: scaleY(-1) rotate(-15deg);
+    transform: scaleY(-1) rotate(-10deg);
+    transition: transform 0.3s ease-in-out;
+}
+.arrow:hover {
+    transform: scaleY(-1) rotate(-25deg);
 }
 
 
@@ -467,6 +490,14 @@
     border: 2px solid var(--clr-surface-a10);
 
     /*box-shadow: 0 0 6rem -3rem var(--clr-primary-a30);*/
+    box-shadow: 0 0 2rem 0 var(--clr-surface-a0);
+
+    transition: 0.3s all ease-in-out;
+}
+.community .container .terminal:hover {
+    scale: 1.05;
+    /*translate: 0 0 3deg;*/
+    rotate: 3deg;
 }
 
 .community .container .terminal .titlebar {