fix: intro grid

src/components/Intro.tsx

@@ -36,7 +36,7 @@ const Intro = () => {
 
   useEffect(() => {
     if (typewriterRef.current) {
-      typewriterRef.current.deleteAll(0.001);
+      typewriterRef.current.deleteAll(0.0000000000000000000001);
       typewriterRef.current
         .typeString(text)
         .start()
@@ -55,33 +55,39 @@ const Intro = () => {
 
   return (
     <>
-      <div className="text-center">
-        <div className="mx-auto my-8 w-80">
-          <Typewriter
-            options={{ delay: 40 }}
-            onInit={(typewriter) => {
-              typewriterRef.current = typewriter;
-              typewriter
-                .typeString(text)
-                .start()
-                .callFunction(() => {
-                  setIsAnimationComplete(true);
-                });
-            }}
-          />
+      {/*<div className="grid h-screen place-items-center">*/}
+      <div className="container">
+        <div className="text">
+          <div id="intro-text" className="font-primary">
+            <Typewriter
+              options={{
+                delay: 40,
+              }}
+              onInit={(typewriter) => {
+                typewriterRef.current = typewriter;
+                typewriter
+                  .typeString(text)
+                  .start()
+                  .callFunction(() => {
+                    setIsAnimationComplete(true);
+                  });
+              }}
+            />
+          </div>
         </div>
+        <div className="girly justify-center">
+          <img src={pathToSvg} alt="girly" />
+        </div>
+
+        <button
+          onClick={handleClick}
+          className={`button max-h-[4rem] max-w-xs border-4 border-black p-2 ${
+            !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
+          }`}
+        >
+          Next
+        </button>
       </div>
-      <div className="mt-4 justify-center">
-        <img src={pathToSvg} alt="girly" className="mt-12" />
-      </div>
-      <button
-        onClick={handleClick}
-        className={`mt-8 border-4 border-black px-4 py-2 ${
-          !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
-        }`}
-      >
-        Next
-      </button>
     </>
   );
 };

src/index.css

+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&display=swap');
 
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
 }
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
+
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
 }
 
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
 }
 
-.typing-effect {
-  overflow: hidden;
-  word-break:break-all;
-  /*white-space: nowrap;*/
-  overflow-wrap: break-word; /* Updated line */
-  /*border-right: 0.15em solid #000; !* Adjust the color and width as needed *!*/
-  font-size: 2rem; /* Adjust the font size as needed */
-  text-align: left; /* Adjust the text alignment */
-  margin-bottom: 2rem;
+#intro-text {
+    font-size: 2rem;
+    line-height: 2rem;
+    font-weight: 400;
 }
 
-@keyframes typing {
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
+strong {
+    font-weight: 700;
 }
 
-@keyframes blink-caret {
-  from,
-  to {
-    border-color: transparent;
-  }
-  50% {
-    border-color: #000; /* Adjust the color as needed */
-  }
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    gap: 0 0;
+    grid-auto-flow: row;
+    grid-template-areas:
+    ". text text text text text text text ."
+    ". . . girly girly girly . . ."
+    ". . . girly girly girly . . ."
+    ". . . . button . . . .";
 }
+
+.button {
+    grid-area: button;
+    max-height: 4rem;
+    margin-top: 4rem;
+}
+
+.girly {
+    grid-area: girly;
+}
+
+.text {
+    grid-area: text;
+    align-self: center;
+}
+

tailwind.config.js

@@ -25,7 +25,7 @@ export default {
         },
       },
       fontFamily: {
-        primary: ['Kablammo'],
+        primary: ["'Indie Flower'", 'cursive'],
       },
     },
   },