[#1] No animated text

web/package.json

@@ -41,8 +41,7 @@
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",
-    "react-html-parser": "^2.0.2",
-    "react-typed": "^2.0.12"
+    "react-html-parser": "^2.0.2"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.4.0",

web/src/components/Title/Titles/Titles.tsx

@@ -1,38 +1,28 @@
-import { ReactTyped } from 'react-typed'
-
 interface TitlesProps {
   titles: string[]
   className?: string
 }
 
-export const Titles = ({ titles, className }: TitlesProps) => {
+export const Titles = ({ titles }: TitlesProps) => {
   const titlesFiltered = titles.filter((title) => title !== '')
 
   return (
     <>
-      <h1 className="text-3xl sm:text-5xl font-bold">
-        Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`}
-        {titlesFiltered.length > 0 && (
-          <>
-            , <br />
-            <ReactTyped
-              className={className}
-              strings={titlesFiltered}
-              typeSpeed={50}
-              backSpeed={40}
-              backDelay={1000}
-              startWhenVisible
-              loop
-              onStringTyped={(pos, self) => {
-                if (pos === 0) {
-                  self.stop()
-                  setTimeout(() => self.start(), 2500)
-                }
-              }}
-            />
-          </>
-        )}
-      </h1>
+      {titlesFiltered.length >= 3 && (
+        <div className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-center items-center">
+          <span className="badge badge-lg badge-ghost">
+            {titlesFiltered[0]}
+          </span>
+          <div className="hidden sm:divider sm:divider-horizontal" />
+          <span className="badge badge-lg badge-ghost">
+            {titlesFiltered[1]}
+          </span>
+          <div className="hidden sm:divider sm:divider-horizontal" />
+          <span className="badge badge-lg badge-ghost">
+            {titlesFiltered[2]}
+          </span>
+        </div>
+      )}
     </>
   )
 }

web/src/components/Title/TitlesForm/TitlesForm.tsx

@@ -8,8 +8,6 @@ import { Form, Label, Submit, TextField } from '@redwoodjs/forms'
 import { TypedDocumentNode, useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
-const MAX_TITLES = 5
-
 interface TitlesFormProps {
   titles?: Titles
 }
@@ -25,14 +23,10 @@ const UPDATE_TITLES_MUTATION: TypedDocumentNode<UpdateTitlesInput> = gql`
 const TitlesForm = ({ titles }: TitlesFormProps) => {
   const title1ref = useRef<HTMLInputElement>(null)
 
-  const [preview, setPreview] = useState<boolean>(false)
-
   const states = [
     useState<string>(titles?.titles[0]),
     useState<string>(titles?.titles[1]),
     useState<string>(titles?.titles[2]),
-    useState<string>(titles?.titles[3]),
-    useState<string>(titles?.titles[4]),
   ]
 
   useEffect(() => title1ref.current?.focus(), [])
@@ -56,10 +50,7 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
 
   return (
     <Form onSubmit={onSubmit} className="space-y-2">
-      <p className="text-center opacity-70">
-        The first title gets displayed for longer
-      </p>
-      {Array.from({ length: MAX_TITLES }).map((_, i) => (
+      {Array.from({ length: 3 }).map((_, i) => (
         <Label key={i} name={`title${i}`} className="form-control w-full">
           <Label
             name={`title${i}`}
@@ -83,25 +74,24 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
               className="w-full"
             />
           </Label>
-          {preview && (
-            <div className="label">
-              <p>
-                Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`},{' '}
-                <span className="text-primary">{states[i][0]}</span>
-              </p>
-            </div>
-          )}
         </Label>
       ))}
 
+      <div className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-center items-center py-2">
+        <span className="badge badge-lg badge-ghost whitespace-nowrap">
+          {states[0][0]}
+        </span>
+        <div className="hidden sm:divider sm:divider-horizontal" />
+        <span className="badge badge-lg badge-ghost whitespace-nowrap">
+          {states[1][0]}
+        </span>
+        <div className="hidden sm:divider sm:divider-horizontal" />
+        <span className="badge badge-lg badge-ghost whitespace-nowrap">
+          {states[2][0]}
+        </span>
+      </div>
+
       <nav className="my-2 flex justify-center space-x-2">
-        <button
-          type="button"
-          className="btn btn-sm uppercase"
-          onClick={() => setPreview(!preview)}
-        >
-          {preview ? 'Hide' : 'Show'} Preview
-        </button>
         <Submit
           disabled={updateLoading}
           className="btn btn-primary btn-sm uppercase"

web/src/pages/HomePage/HomePage.tsx

@@ -24,7 +24,10 @@ const HomePage = () => (
     <div className="hero min-h-[calc(100vh-6rem)]">
       <div className="hero-content flex flex-col gap-8">
         <div className="flex flex-col text-center gap-8">
-          <TitlesCell className="text-primary" />
+          <h1 className="text-3xl sm:text-5xl font-bold">
+            Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`}
+          </h1>
+          <TitlesCell />
           <h3 className="text-xl">
             📍{' '}
             {[