diff --git a/apps/www/app/global.css b/apps/www/app/global.css
index 7c72a94..8599398 100644
--- a/apps/www/app/global.css
+++ b/apps/www/app/global.css
@@ -49,227 +49,31 @@
   --card: 230 40% 26.3% !important;
 }
 
-.border-box {
-  position: relative;
-}
-
-.border-box::before,
-.border-box::after {
-  content: "";
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background-color: #2e2e2e;
-}
-
-.border-box::before {
-  top: -4px;
-  left: -4px;
-}
-
-.border-box::after {
-  bottom: -4px;
-  right: -4px;
-}
-
-.border-box::before::before,
-.border-box::before::after,
-.border-box::after::before,
-.border-box::after::after {
-  content: "";
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background-color: #2e2e2e;
-}
-
-.border-box::before::before {
-  top: 0;
-  left: 0;
-}
-
-.border-box::before::before::after {
-  content: "";
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background-color: red;
-  top: 1;
-  left: 3;
-}
-
-.border-box::before::after {
-  top: 0;
-  right: 0;
-}
-
-.border-box::after::before {
-  bottom: 0;
-  left: 0;
-}
-
-.border-box::after::after {
-  bottom: 0;
-  right: 0;
-}
-
-.home_main {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-image: url("/rings-bg.svg");
-  width: 100%;
-  height: 100vh;
-  max-height: 1000px;
-  background-size: cover;
-  position: relative;
-  flex-wrap: wrap;
-  background-repeat: no-repeat;
-  background-position: 50%;
-}
-
-.home_spotlight {
-  background: radial-gradient(
-    50% 50% at 50% 50%,
-    #fff 0,
-    hsla(0, 0%, 100%, 0) 100%
-  );
-  opacity: 0.06;
-  transform: rotate(45deg);
-  width: 100%;
-  top: -80px;
-  max-width: 1800px;
-}
-
-.home_intro {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 800px;
-  padding: 0 16px;
-}
-
-.words_selectionDot__A9lBk {
-  background: #fff;
-  width: 4px;
-  height: 4px;
-  box-shadow: 0 0 0 1px var(--accent-color);
-  position: absolute;
-}
-
-.words_designers__jgVLV {
-  --accent-color: #666;
-  box-shadow: 0 0 0 2px var(--accent-color);
-  padding: 0 2px;
-  position: relative;
-  display: inline-flex;
-}
-
-.words_width__LcrJC {
-  display: inline-block;
-  width: -moz-fit-content;
-  width: fit-content;
-  letter-spacing: -1px;
-  line-height: 16px;
-  border-radius: 3px;
-  padding: 1px 4px;
-  font-size: 12px;
-  background: var(--accent-color);
-  position: absolute;
-  top: -28px;
-  left: 50%;
-  transform: translateX(-50%);
-  animation: words_width_animation 2s normal;
-}
-
-.words_stunning {
-  fill: none;
-  stroke: #f1f1f1;
-  stroke-width: 0.2px;
-  stroke-linejoin: round;
-  stroke-dasharray: 3;
-  stroke-dashoffset: 0;
-}
-
-.words_customizable {
-  padding: 0 2px;
-  position: relative;
-  display: inline-flex;
+.words_width_animat {
+  animation: words_width_animation 4s normal;
+  animation-delay: 1s;
 }
 
 .words_width_lens_body {
-  display: inline-block;
-  justify-content: center;
-  align-items: center;
-  letter-spacing: -1px;
-  line-height: 16px;
-  border-radius: 50%;
-  border: solid 1px #2e2e2e;
-  font-size: 12px;
-  position: absolute;
-  top: -15px;
-  left: 28%;
-  transform: translateX(-50%);
-  animation: lense 2s normal;
+  animation: lense 3s normal;
+  animation-delay: 1s;
 }
 
 .word_large_text {
-  font-size: 3rem;
-  line-height: 1;
-  animation: word_large_text_animation 2s normal;
-}
-
-.words_width_lens {
-  margin: 3px;
-  width: 63px;
-  height: 63px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(1.2px);
-  -webkit-backdrop-filter: blur(1.2px);
+  animation: word_large_text_animation 1s normal;
+  animation-delay: 1s;
 }
 
 .underline-clip:after {
-  content: "";
-  position: absolute;
-  top: 95%;
-  width: 150%;
-  aspect-ratio: 5 / 1;
-  left: 50%;
-  transform: translate(-50%, 0);
-  border-radius: 50%;
-  border: 2px solid hsl(0, 0%, 90%);
-  clip-path: polygon(0 0, 50% 50%, 100% 0);
-  animation: underline_clip 3s none;
-}
-
-.words_interfaces {
-  position: relative;
+  animation: underline_clip 4s none;
 }
 
 .words_interfaces::after {
-  content: "";
-  position: absolute;
-  height: 60px;
-  width: 6px;
-  top: -17px;
-  left: -10px;
-  border-radius: 9999px;
-  background: #f0f0f0;
-  animation: words_interfaces_after_animation 2s normal;
+  animation: words_interfaces_after_animation 3.5s normal;
 }
 
 .words_interfaces::before {
-  content: "";
-  position: absolute;
-  height: 6px;
-  width: 205px;
-  top: -5px;
-  left: -20px;
-  border-radius: 9999px;
-  background: #f0f0f0;
-  animation: words_interfaces_before_animation 2s normal;
+  animation: words_interfaces_before_animation 3.5s normal;
 }
 
 @keyframes words_width_animation {
@@ -289,10 +93,13 @@
 
 @keyframes lense {
   0% {
-    left: 50%;
+    left: 28%;
+  }
+  50% {
+    left: 60%;
   }
   100% {
-    left: 17%;
+    left: 28%;
   }
 }
 
@@ -319,7 +126,7 @@
     width: 0;
     opacity: 0;
   }
-  50% {
+  65% {
     width: 205px;
     opacity: 0.5;
   }
@@ -334,7 +141,7 @@
     height: 0;
     opacity: 0;
   }
-  50% {
+  65% {
     height: 60px;
     opacity: 0.5;
   }
diff --git a/apps/www/components/hero.tsx b/apps/www/components/hero.tsx
index 0c2747f..d79bf27 100644
--- a/apps/www/components/hero.tsx
+++ b/apps/www/components/hero.tsx
@@ -4,46 +4,58 @@ import Link from "next/link";
 
 const Hero = () => {
   return (
-    <main className="home_main">
-      <div aria-hidden="true" className="home_spotlight"></div>
-      <div className="home_intro -mt-72">
+    <main className="flex items-center justify-center bg-[url('/rings-bg.svg')] w-full h-screen bg-cover relative bg-no-repeat flex-wrap bg-center">
+      <div
+        aria-hidden="true"
+        className="bg-[radial-gradient(_50%_50%_at_50%_50%,_#fff_0,_hsla(0,_0%,_100%,_0)_100%_)] opacity-[0.06] rotate-45 w-full -top-[80px] max-w-[1800px]"
+      ></div>
+      <div className="flex flex-col items-center max-w-[800px] px-[16px] py-[0] -mt-72">
         <h1 className="text-4xl font-bold text-center space-x-2 ">
           <span
-            className="words_designers__jgVLV mr-2"
+            className="[box-shadow:0_0_0_2px_#666] px-[2px] py-[0] relative inline-flex mr-2"
             style={{ letterSpacing: "-2px" }}
           >
             <div
-              className="words_selectionDot__A9lBk"
+              className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
               style={{ top: "-3px", left: "-3px" }}
             ></div>
             <div
-              className="words_selectionDot__A9lBk"
+              className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
               style={{ right: "-3px", top: "-3px" }}
             ></div>
             <div
-              className="words_selectionDot__A9lBk"
+              className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
               style={{ bottom: "-3px", left: "-3px" }}
             ></div>
             <div
-              className="words_selectionDot__A9lBk"
+              className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
               style={{ bottom: "-3px", right: "-3px" }}
             ></div>
-            <div className="words_width__LcrJC">330 x 56</div>Craft Seamless
+            <div className="words_width_animat inline-block w-[fit-content] tracking-[-1px] leading-[16px] rounded-[3px] px-[4px] py-px text-[12px] bg-[#666] absolute -top-[28px] left-2/4 -translate-x-1/2">
+              330 x 56
+            </div>
+            Craft Seamless
             <span className="words_comma__9_pb3">,</span>
           </span>
           <span>
-            <text className="words_stunning">
+            <text className="stroke-[#f1f1f1] stroke-[0.2px]">
               {" "}
-              <span className="word_large_text">S</span>tunn
-              <span className="word_large_text">i</span>ng,{" "}
+              <span className="word_large_text text-[3rem] leading-none">
+                S
+              </span>
+              tunn
+              <span className="word_large_text text-[3rem] leading-none">
+                i
+              </span>
+              ng,{" "}
             </text>
           </span>
           <br />
           <div className="my-7" />
-          <span className="words_customizable">
-            <div className="words_width_lens_body">
+          <span className="px-[2px] py-[0] relative inline-flex">
+            <div className="words_width_lens_body inline-block justify-center items-center tracking-[-1px] leading-[16px] rounded-[50%] border-[solid] border-[1px] border-[#2e2e2e] text-[12px] absolute -top-[15px] left-[28%] -translate-x-1/2">
               <div
-                className="words_width_lens"
+                className="m-[3px] w-[63px] h-[63px] rounded-[50%] bg-[rgba(255,_255,_255,_0.2)] [box-shadow:0_4px_30px_rgba(0,_0,_0,_0.1)] backdrop-filter backdrop-blur-[1.2px]"
                 data-word-researchers-glass
                 style={{ transform: "none" }}
               />
@@ -51,9 +63,13 @@ const Hero = () => {
             Customizable
           </span>
           <span className="mx-52" />
-          <span className="words_interfaces">Interfaces</span>
+          <span className="relative words_interfaces after:content-[''] after:absolute after:h-[60px] after:w-[6px] after:-top-[17px] after:-left-[10px] after:rounded-full after:bg-[#f0f0f0] before:content-[''] before:absolute before:h-[6px] before:w-[205px] before:-top-[5px] before:-left-[20px] before:rounded-full before:bg-[#f0f0f0] ">
+            Interfaces
+          </span>
           <span>with</span>
-          <span className="relative underline-clip">Ruru UI</span>
+          <span className="relative underline-clip after:content-['']  after:absolute  after:top-[95%] after:w-[150%] after:[aspect-ratio:5_/_1] after:left-2/4 after:-translate-x-1/2 after:translate-y-[0]  after:rounded-[50%] after:border-[2px] after:border-[solid] after:border-[hsl(0,0%,90%)] after:[clip-path:polygon(0_0,_50%_50%,_100%_0)]">
+            Ruru UI
+          </span>
         </h1>
         <p className="text-muted-foreground text-lg mx-20 mt-6 mb-6 text-center ">
           the ultimate design system and UI library for creating seamless,