(v0.1.4-alpha) Update Landing Page

Im like 40% sure where I'm heading with this 😭 Anyways I added a big ahh heading and a small heading below. Added a blinking cursor

Author: rupnil-codes

CHANGELOG.md

@@ -1,6 +1,7 @@
 
 ## TODOS:
 
-- [ ] Fix logo and make it PERFECT 
+- [ ] Fix logo and make it PERFECT.
+- [ ] When the user presses enter it may remove all the text (typewriter) and then do something.
 
 ## CHANGELOGS:

src/routes/landing.jsx

@@ -1,10 +1,15 @@
 import "../styles/routes/landing.css";
 
 function Landing() {
+
     return (
         <>
             <div className={"landing"}>
-                <h1>$ C1PH<span className={"sigma-font"}>Σ</span>R_</h1>
+                <h1>C1PH<span className={"sigma-font"}>Σ</span>R</h1>
+                <h2>
+                    press ENTER to continue
+                    <span className={"cursor"}> █</span>
+                </h2>
             </div>
         </>
     )

src/styles/fonts.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 @font-face {
     font-family: 'CookWidetype';
     src: local('CookWidetype'),

src/styles/routes/landing.css

@@ -6,24 +6,25 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
-
-.terminal {
-    display: flex;
     flex-direction: column;
+}
 
-    height: 60%;
-    width: 60%;
+.landing h1 {
+    font-size: 7rem;
+    margin: -1.75rem;
+}
 
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 0.5rem;
+.landing h2 {
+    font-family: "Space Mono", monospace;
+    font-size: 1.3rem;
+    font-weight: 400;
 }
 
-.terminal .titlebar {
-    display: flex;
-    height: 2.5rem;
-    width: 100%;
+.landing .cursor {
+    animation: blink 1.5s infinite;
+}
 
-    background-color: var(--clr-surface-a10);
-    border-radius: 0.5rem 0.5rem 0 0;
+@keyframes blink {
+    0%,50%,100% { opacity: 1; }
+    25%,75% { opacity: 0; }
 }