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,10 +55,14 @@ const Intro = () => {
 
   return (
     <>
-      <div className="text-center">
-        <div className="mx-auto my-8 w-80">
+      {/*<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 }}
+              options={{
+                delay: 40,
+              }}
               onInit={(typewriter) => {
                 typewriterRef.current = typewriter;
                 typewriter
@@ -71,17 +75,19 @@ const Intro = () => {
             />
           </div>
         </div>
-      <div className="mt-4 justify-center">
-        <img src={pathToSvg} alt="girly" className="mt-12" />
+        <div className="girly justify-center">
+          <img src={pathToSvg} alt="girly" />
         </div>
+
         <button
           onClick={handleClick}
-        className={`mt-8 border-4 border-black px-4 py-2 ${
+          className={`button max-h-[4rem] max-w-xs border-4 border-black p-2 ${
             !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
           }`}
         >
           Next
         </button>
+      </div>
     </>
   );
 };

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;
@@ -31,6 +32,7 @@ a {
     color: #646cff;
     text-decoration: inherit;
 }
+
 a:hover {
     color: #535bf2;
 }
@@ -70,40 +72,51 @@ button:focus-visible {
         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;
 }
+
+.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 . . . .";
 }
 
-@keyframes blink-caret {
-  from,
-  to {
-    border-color: transparent;
+.button {
+    grid-area: button;
+    max-height: 4rem;
+    margin-top: 4rem;
 }
-  50% {
-    border-color: #000; /* Adjust the color as needed */
+
+.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'],
       },
     },
   },