fix(Hero): HeroHeadline character breaking on different viewports

Author: abdullahrather

src/components/Hero.jsx

@@ -225,6 +225,37 @@ const Hero = () => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleResize = () => {
+      const headline = document.getElementById("heroHeadline");
+      if (!headline) return;
+
+      headline.innerHTML = `
+      Transform your vision into
+      <br />
+      <span class='text-indigo-600 dark:text-indigo-400'>
+        intelligent
+      </span> solutions
+    `;
+
+      if (window.innerWidth <= 640) {
+        headline.innerHTML = `
+        <span style="display: inline-block; white-space: nowrap;">Transform your</span>
+        <span style="display: inline-block; white-space: nowrap;"> vision into</span>
+        <br />
+        <span class='text-indigo-600 dark:text-indigo-400' style="display: inline-block; white-space: nowrap;">intelligent</span>
+        <span style="display: inline-block; white-space: nowrap;"> solutions</span>
+      `;
+      }
+    };
+
+    // Run on mount and resize
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <section
       id='hero'

src/styles.css

@@ -1536,4 +1536,25 @@ button:hover,
 
 .loading-screen * {
   cursor: none !important;
+}
+
+/* hero headline character breaking */
+#heroHeadline {
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: none;
+  white-space: normal;
+}
+
+@media (max-width: 640px) {
+  #heroHeadline {
+    font-size: 2.25rem;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width: 480px) {
+  #heroHeadline {
+    font-size: 2rem;
+  }
 }