Added a typewriter component.

src/app/games/page.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import { useRouter } from "next/navigation";
 import { paths } from "@/paths";
+import Typewriter from "@/components/Typewriter/Typewriter";
 
 const navItems = [
   { label: "Visions Of Reality", path: paths.games.vor },
@@ -31,6 +32,7 @@ export default function VisionsOfReality() {
 
       <Stack spacing={2}>
         <Box>
+          
           <Typography variant="h5" fontWeight={700}>
             Some online games available to you.
           </Typography>

src/app/page.tsx

@@ -58,11 +58,6 @@ export default function Home() {
         }}
       />
 
-      <Typography sx={{
-
-      }}>
-        Tartarus
-      </Typography>
       <Container
         maxWidth="lg"
         sx={{

src/components/Typewriter/Typewriter.tsx

@@ -0,0 +1,16 @@
+
+import "./index.css";
+interface TypewriterProps{
+  value: string;
+  color?: string;
+}
+export default function Typewriter({ value, color }: TypewriterProps) {
+
+  return (
+    <div className="typewriter">
+      <div>
+        <p style={{ "--chars": value.length, color: color ? color : "#00AA24" } as React.CSSProperties }>{value}</p>
+      </div>
+    </div>
+  )
+}

src/components/Typewriter/index.css

@@ -0,0 +1,35 @@
+
+.typewriter{
+  display: flex;
+  justify-content: center;
+}
+
+.typewriter p{
+  --chars: 8;
+  font-family: monospace;
+  font-size: 1.5rem;
+
+  color: #00AA24;
+  margin-inline: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 1px solid;
+  animation: typing calc(var(--chars) * 0.07s) steps(var(--chars)) forwards,
+  blink 1s step-end infinite;
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
+}