From 92ec913432328498c559eef7be7977164085727a Mon Sep 17 00:00:00 2001
From: apg868 <123202954+apg868@users.noreply.github.com>
Date: Fri, 22 Mar 2024 11:27:00 -0400
Subject: [PATCH] update to typewriter. Incomplete, but animation seems to be
 mostly fine. Need more specifications before continuing

---
 src/components/Hero.jsx | 74 ++++++++++++++++++++++++++---------------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index ada2726..8bbdfcf 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,32 +1,63 @@
 export default function Hero() {
     return (
-
         <div className="flex flex-col overflow-hidden">
+            <style>{`
+                @keyframes typewriter {
+                    from { width: 0; }
+                    to { width: 100%; }
+                }
+
+                @keyframes blinkCursor {
+                    0% { border-color: transparent; }
+                    50% { border-color: rgba(0, 0, 0, 0.75); }
+                    100% { border-color: transparent; }
+                }
+
+                .typewriter-program, .typewriter-management {
+                    display: inline-block;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    letter-spacing: normal; /* Reset to default */
+                    animation: typewriter 2.5s steps(40) 1s 1 normal both,
+                               blinkCursor 500ms steps(40) infinite;
+                }
+
+                .typewriter-program {
+                    display: inline-block;
+                    overflow: hidden;
+                    line-height: normal;
+                    white-space: nowrap;
+                    letter-spacing: normal;
+                    animation: typewriter 2.5s steps(40) 1s 1 normal both,
+                               blinkCursor 500ms steps(40) infinite;
+                }
+                
+                .typewriter-management {
+                    display: inline-block;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    letter-spacing: normal;
+                    margin-top: -0.5em;
+                    line-height: normal;
+                    animation: typewriter 2.5s steps(40) 3.5s 1 normal both,
+                               blinkCursor 500ms steps(40) infinite;
+                }
+            `}</style>
             <div className="flex flex-col lg:flex-row justify-between">
                 <div className="flex items-start flex-col lg:flex-row lg:gap-10 mb-14">
                     <div className="ml-3 min-[400px]:ml-10 lg:ml-32 mt-10 lg:mt-20 font-lexend">
                         <h3 className="text-lg lg:text-2xl font-bold text-[#9C9AB7]">We are a one-stop shop for</h3>
-
                         <h1 className="text-5xl lg:text-7xl font-bold text-[#24223C] pb-3">
-                            Program <br />
-                            <div className="absolute ml-[137px] lg:ml-[210px] mt-[12px] lg:mt-5 -z-40">
+                            <span className="typewriter-program">Program</span> <br />
 
-                                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="13" viewBox="0 0 21 13" fill="none">
-                                    <path d="M0.132512 0.0223248C-0.33267 3.37063 0.418768 6.60782 2.51567 8.9709C4.61256 11.334 7.6613 12.3859 10.9247 12.1933C11.3899 8.84497 10.6385 5.60778 8.54157 3.2447C6.44468 0.881625 3.39594 -0.170277 0.132512 0.0223248Z" fill="#3BCABE" />
-                                    <path d="M20.5435 0.0223248C21.0087 3.37063 20.2572 6.60782 18.1603 8.9709C16.0635 11.334 13.0147 12.3859 9.75129 12.1933C9.2861 8.84497 10.0375 5.60778 12.1344 3.2447C14.2313 0.881625 17.2801 -0.170277 20.5435 0.0223248Z" fill="#9ADB67" />
-                                </svg>
-                            </div>
-                            <span className="block text-[#FA9D74] pt-2">Management</span>
+                            <span className="typewriter-management block text-[#FA9D74] pt-2">Management</span>
                         </h1>
-
                         <div className="CTA flex gap-3 mt-10 lg:text-2xl font-semibold">
-                            <button className="px-10 py-3 bg-[#023849] border-4 text-[#FEFDFF] border-[#023849] rounded-[100px]"><a href = "https://discord.gg/PnyMh9325g">Join us on Discord</a></button>
+                            <button className="px-10 py-3 bg-[#023849] border-4 text-[#FEFDFF] border-[#023849] rounded-[100px]">Join us on Discord</button>
                         </div>
                     </div>
-                </div>
-
+                    </div>
                 <div className="mt-14 mr-3 hidden lg:block">
-
                     <svg className="-z-50" width="630" height="235" viewBox="0 0 630 235" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <circle cx="7.5" cy="7.5" r="7.5" fill="#D7F5F2" />
                         <circle cx="42.5" cy="7.5" r="7.5" fill="#D7F5F2" />
@@ -119,9 +150,7 @@ export default function Hero() {
                         <circle cx="567.5" cy="227.5" r="7.5" fill="#D7F5F2" />
                         <circle cx="602.5" cy="227.5" r="7.5" fill="#D7F5F2" />
                     </svg>
-
                     <div className="flex flex-row ml-10">
-
                         <div>
                             <div className="relative -z-40 rect-grad1 w-[6px] h-[229px] -mt-[84px] ml-10 ">
 
@@ -131,9 +160,7 @@ export default function Hero() {
                                 <path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
                             </svg>
                             <div className="relative -ml-[50px] -mt-72 bg-[#3BCABE] w-[194px] h-[194px] rounded-full flex">
-
                                 <img className="rounded-full justify-center items-center m-2" src="./images/h-1.png" alt=""></img>
-
                             </div>
                             
                         </div>
@@ -147,9 +174,7 @@ export default function Hero() {
                                 <path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
                             </svg>
                             <div className="relative -ml-[50px] -mt-80 bg-[#FA9D74] w-[194px] h-[194px] rounded-full flex">
-
                                 <img className="rounded-full justify-center items-center m-4" src="./images/h-2.png" alt=""></img>
-
                             </div>
                         </div>
 
@@ -162,7 +187,6 @@ export default function Hero() {
                                 <path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
                             </svg>
                             <div className="relative -ml-[20px] -mt-60 bg-[#F5D190] w-[125px] h-[125px] rounded-full flex">
-
                                 <img className="rounded-full justify-center items-center m-4" src="./images/h-3.png" alt=""></img>
                             </div>
                         </div>
@@ -281,9 +305,6 @@ export default function Hero() {
                         </div>
 
                     </div>
-
-
-
                 </div>
             </div>
             <div className="rect-grad w-full h-[12px] mb-4">
@@ -291,4 +312,5 @@ export default function Hero() {
             </div>
         </div>
     );
-}
\ No newline at end of file
+    
+}