fix: word breaking in about

Author: Miran-Firdausi

src/components/AboutUs/index.jsx

@@ -89,28 +89,25 @@ export default function AboutSection() {
   useEffect(() => {
     const paragraph = paragraphRef.current;
 
-    const originalSpan = paragraph.querySelector(".text-primary");
-    const highlightedText = originalSpan.textContent;
-
     // Split all text nodes while preserving the special span
     const splitText = (node) => {
       if (node.nodeType === 3) {
         // Text node
-        const letters = node.textContent.split("");
-        const fragments = letters.map((letter) => {
+        const words = node.textContent.split(" ");
+        const fragments = words.map((word) => {
           const span = document.createElement("span");
           span.className = "inline-block letter-span";
-          span.innerHTML = letter === " " ? " " : letter;
+          span.innerHTML = `${word} `;
           return span;
         });
         node.replaceWith(...fragments);
       } else if (node.classList?.contains("text-primary")) {
         // For highlighted text, split but add special class
-        const letters = node.textContent.split("");
-        const fragments = letters.map((letter) => {
+        const words = node.textContent.split(" ");
+        const fragments = words.map((word) => {
           const span = document.createElement("span");
           span.className = "inline-block letter-span highlighted";
-          span.innerHTML = letter === " " ? " " : letter;
+          span.innerHTML = `${word}} `;
           return span;
         });
         node.replaceWith(...fragments);
@@ -137,7 +134,7 @@ export default function AboutSection() {
     // Animate regular text
     tl.fromTo(
       paragraph.querySelectorAll(".letter-span:not(.highlighted)"),
-      { color: "#595959" },
+      { color: "transparent" },
       {
         color: "#B7AB98",
         stagger: 0.02,
@@ -148,7 +145,7 @@ export default function AboutSection() {
     // Animate highlighted text
     tl.fromTo(
       paragraph.querySelectorAll(".highlighted"),
-      { color: "#595959" },
+      { color: "transparent" },
       {
         color: "#E76941",
         stagger: 0.02,
@@ -177,10 +174,10 @@ export default function AboutSection() {
               ref={paragraphRef}
               className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold"
             >
-              Codex is the coding club at{" "}
+              Codex is the coding club at
               <span className="text-primary">
                 Symbiosis Institute of Technology
-              </span>{" "}
+              </span>
               that brings together students passionate about technology and
               programming. Our club is committed to creating an engaging
               environment where members can learn, collaborate, and grow their

src/pages/About/index.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useState, useRef } from "react";
-import Heading from "@/components/Heading/index";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Oval from "@/assets/images/About/oval.svg";
 import PageTransition from "../../components/PageTransition";
+import Heading from "@/components/Heading/index";
 import "./About.css";
 
 gsap.registerPlugin(ScrollTrigger);

src/pages/Teams/TeamMember.jsx

@@ -22,7 +22,8 @@ const images = {
 };
 
 function TeamMember({ member }) {
-  const { name, position, description, linkedin, instagram, github, id } = member;
+  const { name, position, description, linkedin, instagram, github, id } =
+    member;
   const image = images[id];
 
   return (