Revert "Revert ":wrench: Hero 3d shapes responsive""

This reverts commit aa9eda8.

src/slices/Hero/index.tsx

@@ -1,11 +1,10 @@
 "use client";
 import { useEffect, useRef } from "react";
-
 import { Content, KeyTextField } from "@prismicio/client";
 import { SliceComponentProps } from "@prismicio/react";
-import { gsap } from "gsap";
+import { Shapes } from "@/slices/Hero/Shapes";
 import Bounded from "@/components/Bounded";
-import { Shapes } from "./Shapes";
+import gsap from "gsap";
 
 /**
  * Props for `Hero`.
@@ -16,56 +15,52 @@ export type HeroProps = SliceComponentProps<Content.HeroSlice>;
  * Component for "Hero" Slices.
  */
 const Hero = ({ slice }: HeroProps): JSX.Element => {
-  const components = useRef(null);
+  const component = useRef(null);
 
   useEffect(() => {
     let ctx = gsap.context(() => {
-      const tl = gsap.timeline();
-      tl.fromTo(
-        ".name-animation",
-        {
-          x: -100,
-          opacity: 0,
-          rotate: -10,
-        },
-        {
-          x: 0,
-          opacity: 1,
-          rotate: 0,
-          ease: "elastic.out(1,0.3)",
-          duration: 1,
-          transformOrigin: "left top",
-          delay: 0.5,
-          stagger: {
-            each: 0.1,
-            from: "random",
+      // create as many GSAP animations and/or ScrollTriggers here as you want...
+      gsap
+        .timeline()
+        .fromTo(
+          ".name-animation",
+          { x: -100, opacity: 0, rotate: -10 },
+          {
+            x: 0,
+            opacity: 1,
+            rotate: 0,
+
+            ease: "elastic.out(1,0.3)",
+            duration: 1,
+            transformOrigin: "left top",
+            stagger: { each: 0.1, from: "random" },
+          },
+        )
+        .fromTo(
+          ".job-title",
+          {
+            y: 20,
+            opacity: 0,
+            scale: 1.2,
+          },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 1,
+            scale: 1,
+            ease: "elastic.out(1,0.3)",
           },
-        }
-      );
-      tl.fromTo(
-        ".job-title",
-        {
-          opacity: 0,
-          scale: 1.2,
-        },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 1,
-          scale: 1,
-          ease: "elastic.out(1,0.3)",
-        }
-      );
-    }, components);
-    return () => ctx.revert();
+        );
+    }, component);
+    return () => ctx.revert(); // cleanup!
   }, []);
 
   const renderLetters = (name: KeyTextField, key: string) => {
     if (!name) return;
     return name.split("").map((letter, index) => (
       <span
-        key={key + index}
-        className={`name-animation name-animation-${key} inline-block opacity-0`}
+        key={index}
+        className={`name-animation name-animation-${key}-index inline-block opacity-0 `}
       >
         {letter}
       </span>
@@ -76,25 +71,25 @@ const Hero = ({ slice }: HeroProps): JSX.Element => {
     <Bounded
       data-slice-type={slice.slice_type}
       data-slice-variation={slice.variation}
-      ref={components}
+      ref={component}
     >
-      <div className="grid min-h-[70vh] grid-cols-2 md:grid-cols-2 items-center">
+      <div className="grid min-h-[70vh] grid-cols-1 items-center md:grid-cols-2">
         <Shapes />
-        <div className="col-start-1 md:row-start-1">
+        <div className="col-start-1 md:row-start-1 " data-speed=".2">
           <h1
             className="mb-8 text-[clamp(3rem,20vmin,20rem)] font-extrabold leading-none tracking-tighter"
             aria-label={
               slice.primary.first_name + " " + slice.primary.last_name
             }
           >
-            <span className="block text-slate-300">
+            <span className="block text-slate-300 ">
               {renderLetters(slice.primary.first_name, "first")}
             </span>
-            <span className="-mt-[.2rem] block text-slate-500">
+            <span className="-mt-[.2em] block text-slate-500  ">
               {renderLetters(slice.primary.last_name, "last")}
             </span>
           </h1>
-          <span className="job-title opacity-0 block bg-gradient-to-tr from-yellow-500 via-yellow-200 to-yellow-500 bg-clip-text text-2xl font-bold uppercase tracking-[.2rem] text-transparent md:text-4xl">
+          <span className="job-title block bg-gradient-to-tr from-yellow-500 via-yellow-200 to-yellow-500 bg-clip-text text-2xl font-bold uppercase tracking-[.2em] text-transparent opacity-0 md:text-4xl">
             {slice.primary.tag_line}
           </span>
         </div>