Use typewriter react component

package.json

@@ -51,6 +51,7 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
+    "typewriter-effect": "^2.21.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/components/home-hero.scss

@@ -0,0 +1,38 @@
+.Typewriter {
+	background: inherit;
+	display: inline-block;
+}
+
+.Typewriter__cursor {
+	-webkit-animation: Typewriter-cursor 1s infinite;
+	animation: Typewriter-cursor 1s infinite;
+	margin-left: 1px
+}
+
+@-webkit-keyframes Typewriter-cursor {
+	0% {
+		opacity: 0
+	}
+
+	50% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}
+
+@keyframes Typewriter-cursor {
+	0% {
+		opacity: 0
+	}
+
+	50% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}

src/components/home-hero.tsx

@@ -1,54 +1,42 @@
 import { buttonVariants } from "@/components/ui/button";
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
-import { useEffect } from "react";
+import Typewriter from 'typewriter-effect';
 
-export default function HomeHero() {
-
-	useEffect(() => {(async () => {
-		await import('./typewriter')
-
-		var app = document.getElementById('typewriter');
-
-		var typewriter: any = new (window as any).Typewriter(app, {
-			loop: true,
-			delay: 50,
-			deleteSpeed: 50,
-			skipAddStyles: true
-		});
-
-		typewriter.typeString('sin vueltas')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('fácilmente')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('hoy mismo')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('via API')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('con PHP')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('con Python')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('con Node')
-			.pauseFor(2500)
-			.deleteAll()
-			.typeString('con Ruby')
-			.pauseFor(2500)
-			.start();
-	})().catch(() => {})}, []);
+import './home-hero.scss'
 
+export default function HomeHero() {
 	return (
 		<>
 			<h1
 			className="font-heading text-4xl font-bold sm:text-5xl md:text-6xl lg:text-6xl !leading-[1.1] text-balance"
 			>
-			Conectate a <br />AFIP&nbsp;<span id="typewriter" className="text-gradient_indigo-purple">sin vueltas</span>
+			Conectate a <br />AFIP&nbsp;<span className="text-gradient_indigo-purple">
+				<span id="Typewriter-default" ref={ref => {
+					ref?.remove();
+				}}>sin vueltas</span>
+				<Typewriter
+					options={{
+						strings: ['sin vueltas',
+							'fácilmente',
+							'hoy mismo',
+							'via API',
+							'con PHP',
+							'con Python',
+							'con Node',
+							'con Ruby'
+						],
+						autoStart: true,
+						delay: 50,
+						deleteSpeed: 50,
+						skipAddStyles: true,
+						loop: true,
+					}}
+					onInit={() => {
+						document.getElementById('Typewriter-default')?.remove();
+					}}
+				/>
+			</span>
 			</h1>
 
 			<p