improve onboarding intro hero section

Author: yyyort

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/BubbleBackground.tsx

@@ -63,7 +63,7 @@ export function BubbleBackground() {
         size: A.r * 2,
         topPct: toPct(A.y - A.r, vh),
         leftPct: toPct(A.x - A.r, vw),
-        hue: hues[0],
+        hue: hues[0] ?? 285,
         depth: 0.75,
         floatDur: 12 + Math.random() * 5,
         delay: Math.random() * 1.2,
@@ -73,7 +73,7 @@ export function BubbleBackground() {
         size: B.r * 2,
         topPct: toPct(B.y - B.r, vh),
         leftPct: toPct(B.x - B.r, vw),
-        hue: hues[2],
+        hue: hues[2] ?? 200,
         depth: 1.0,
         floatDur: 12 + Math.random() * 5,
         delay: Math.random() * 1.2,
@@ -100,7 +100,7 @@ export function BubbleBackground() {
         size: d,
         topPct: toPct(cy - r, vh),
         leftPct: toPct(cx - r, vw),
-        hue: hues[(3 + smallSpheres.length) % hues.length],
+        hue: hues[(3 + smallSpheres.length) % hues.length] ?? 255,
         depth: 0.9,
         floatDur: 7 + Math.random() * 4,
         delay: Math.random() * 3,
@@ -229,17 +229,63 @@ export function BubbleBackground() {
       <style jsx global>{`
         @keyframes bb-float-y {
           0% {
-            transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0) scale(1);
+          }
+          25% {
+            transform: translate3d(2px, -8px, 0) scale(1.02);
           }
           50% {
-            transform: translate3d(0, -10px, 0);
+            transform: translate3d(0, -16px, 0) scale(1);
+          }
+          75% {
+            transform: translate3d(-2px, -8px, 0) scale(0.98);
+          }
+          100% {
+            transform: translate3d(0, 0, 0) scale(1);
+          }
+        }
+        
+        @keyframes bb-float-x {
+          0% {
+            transform: translateX(0);
+          }
+          33% {
+            transform: translateX(4px);
+          }
+          66% {
+            transform: translateX(-4px);
+          }
+          100% {
+            transform: translateX(0);
+          }
+        }
+        
+        @keyframes bb-pulse {
+          0% {
+            opacity: 0.7;
+          }
+          50% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.7;
+          }
+        }
+        
+        @keyframes bb-rotate {
+          0% {
+            transform: rotate(0deg);
           }
           100% {
-            transform: translate3d(0, 0, 0);
+            transform: rotate(360deg);
           }
         }
+        
         .bb-float {
-          animation: bb-float-y 9s ease-in-out infinite;
+          animation: bb-float-y 9s ease-in-out infinite,
+                     bb-float-x 7s ease-in-out infinite,
+                     bb-pulse 6s ease-in-out infinite,
+                     bb-rotate 20s linear infinite;
         }
       `}</style>
     </div>

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/FloatingCodeTags.tsx

@@ -35,32 +35,51 @@ export function FloatingCodeTags() {
   }, [mouseX, mouseY]);
 
   return (
-    <div className="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+    <div className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
       {codeTags.map((tag, i) => {
-        const x = useTransform(mouseX, [0, windowSize.width], [-10, 10]);
-        const y = useTransform(mouseY, [0, windowSize.height], [-10, 10]);
-        const top = Math.random() * 90 + 5;
-        const left = Math.random() * 90 + 5;
+        const x = useTransform(mouseX, [0, windowSize.width], [-8, 8]);
+        const y = useTransform(mouseY, [0, windowSize.height], [-8, 8]);
+        
+        // Avoid placing tags in the center area where logo/text is
+        let top = Math.random() * 90 + 5;
+        let left = Math.random() * 90 + 5;
+        
+        // Keep tags away from center area (30%-70% both horizontally and vertically)
+        if (top > 30 && top < 70 && left > 30 && left < 70) {
+          // Randomly place in corners instead
+          const corners = [
+            { top: Math.random() * 25 + 5, left: Math.random() * 25 + 5 }, // top-left
+            { top: Math.random() * 25 + 5, left: Math.random() * 25 + 75 }, // top-right
+            { top: Math.random() * 25 + 75, left: Math.random() * 25 + 5 }, // bottom-left
+            { top: Math.random() * 25 + 75, left: Math.random() * 25 + 75 }, // bottom-right
+          ];
+          const corner = corners[Math.floor(Math.random() * corners.length)];
+          if (corner) {
+            top = corner.top;
+            left = corner.left;
+          }
+        }
+        
         const delay = Math.random() * 2;
 
         return (
           <motion.span
             key={tag + i}
-            className="absolute select-none font-mono text-sm text-white opacity-20 blur-[0.5px]"
+            className="absolute select-none font-mono text-xs text-white opacity-15 blur-[0.3px] lg:text-sm"
             style={{
               top: `${top}%`,
               left: `${left}%`,
               x,
               y,
             }}
-            initial={{ opacity: 0, scale: 0.8 }}
+            initial={{ opacity: 0, scale: 0.6 }}
             animate={{
-              opacity: 0.2,
-              scale: 1,
-              y: ["0%", "-5%", "0%"],
+              opacity: [0.1, 0.2, 0.1],
+              scale: [0.8, 1, 0.8],
+              y: ["0%", "-8%", "0%"],
             }}
             transition={{
-              duration: 6 + Math.random() * 3,
+              duration: 8 + Math.random() * 4,
               repeat: Infinity,
               delay,
               ease: "easeInOut",

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/HeroSection.tsx

@@ -12,15 +12,15 @@ export default function HeroSection({ h1Ref }: HeroSectionProps) {
     <>
       <p
         id="welcome-text"
-        className="relative text-[25px] text-[#02e6dd] drop-shadow-[0_0_12px_#02e6dd] lg:-mr-[140px]"
+        className="relative text-[32px] text-[#02e6dd] drop-shadow-[0_0_16px_#02e6dd] lg:-mr-[140px] lg:text-[40px]"
       >
         Welcome to
       </p>
 
       <h1
         id="codebility-h1"
         ref={h1Ref}
-        className="relative z-[999999] -mr-[140px] mt-16 hidden text-[91px] lg:flex"
+        className="relative z-[999999] -mr-[140px] mt-16 hidden text-[120px] lg:flex 2xl:text-[140px]"
       >
         <span id="co" className="flex">
           {"Co".split("").map((c, i) => (
@@ -47,28 +47,30 @@ export default function HeroSection({ h1Ref }: HeroSectionProps) {
       </h1>
 
       <div className="z-[999] mt-10 flex items-center justify-center lg:hidden">
-        <span className=" -mr-4 text-[clamp(32px,10vw,48px)] text-white">
+        <span className="text-[clamp(40px,12vw,60px)] text-white leading-none">
           Co
         </span>
-        <Image
-          src="/assets/images/onboarding/code_logo.svg"
-          alt="d"
-          width={66}
-          height={66}
-          className="object-contain"
-        />
-        <span className="-ml-4 text-[clamp(32px,10vw,48px)] text-white">
+        <div className="mx-1 flex items-center justify-center">
+          <Image
+            src="/assets/images/onboarding/code_logo.svg"
+            alt="d"
+            width={66}
+            height={66}
+            className="object-contain translate-y-[-2px]"
+          />
+        </div>
+        <span className="text-[clamp(40px,12vw,60px)] text-white leading-none">
           ebility
         </span>
       </div>
 
       {/* Grouped h2 and button centered between h1 and bottom */}
-      <div className="pointer-events-none inset-0 mt-10 flex flex-col items-center justify-between lg:absolute lg:mt-0">
-        <div className="hidden pt-[260px] lg:block" />
-        <div className="pointer-events-auto z-[999] flex flex-col items-center space-y-10 lg:-mr-[140px]">
+      <div className="pointer-events-none inset-0 mt-12 flex flex-col items-center justify-between lg:absolute lg:mt-0">
+        <div className="hidden pt-[300px] lg:block" />
+        <div className="pointer-events-auto z-[999] flex flex-col items-center space-y-12 lg:-mr-[140px]">
           <h2
             id="codebility-h2"
-            className="z-10 text-center text-[clamp(32px,5vw,64px)] text-white drop-shadow-[0_0_1px_#fff] 2xl:text-[64px]"
+            className="z-10 text-center text-[clamp(36px,6vw,80px)] font-medium text-white drop-shadow-[0_0_2px_#fff] 2xl:text-[80px]"
           >
             Everyone has the ability to code
           </h2>
@@ -83,7 +85,7 @@ export default function HeroSection({ h1Ref }: HeroSectionProps) {
             className="
     group relative inline-flex items-center justify-center overflow-hidden
     rounded-full bg-gradient-to-r from-cyan-500 to-fuchsia-500
-    px-8 py-3 text-base font-semibold text-white
+    px-10 py-4 text-lg font-semibold text-white
     shadow-[0_12px_40px_-12px_rgba(168,85,247,0.45)]
     transition-all duration-300
     hover:brightness-[1.05]

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/StickyLogo.tsx

@@ -12,7 +12,7 @@ export default function StickyLogo({ logoRef, isVisible }: StickyLogoProps) {
   return (
     <div
       ref={logoRef}
-      className={`fixed left-1/2 top-[195px] z-[9999] hidden aspect-square w-[120px] -translate-x-1/2 rounded-full shadow-xl transition-opacity duration-300 will-change-transform lg:block ${
+      className={`fixed left-[calc(50%-30px)] top-[260px] z-[9999] hidden aspect-square w-[120px] -translate-x-1/2 rounded-full shadow-xl transition-opacity duration-300 will-change-transform lg:block ${
         isVisible || !isDesktop ? "" : "pointer-events-none opacity-0"
       }`}
       style={{

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/index.tsx

@@ -1,4 +1,4 @@
-// HeroWithAboutEffect/index.tsx (patched)
+// HeroWithAboutEffect/index.tsx
 
 "use client";
 
@@ -40,14 +40,16 @@ export default function HeroWithAboutEffect() {
         ref={heroRef}
         className="primary-gradient relative flex items-center justify-center px-10 py-10 text-white lg:h-screen lg:min-h-screen"
       >
-        <div className="relative mx-auto flex w-full flex-col items-center justify-start overflow-hidden rounded-3xl bg-gray-950 p-10 lg:h-[calc(100vh-80px)]">
+        <div className="relative mx-auto flex w-full flex-col items-center justify-start overflow-hidden rounded-3xl bg-gradient-to-br from-gray-900 via-gray-950 to-black p-10 shadow-2xl lg:h-[calc(100vh-80px)]">
           <BubbleBackground />
           <LottieBackground />
+          <FloatingCodeTags />
           {/* soft decor glows for dark motif */}
           <div className="pointer-events-none absolute inset-0">
-            <div className="absolute -left-24 -top-24 h-80 w-80 rounded-full bg-cyan-400/10 blur-3xl" />
-            <div className="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-fuchsia-500/10 blur-3xl" />
-            <div className="absolute inset-0 bg-[radial-gradient(1200px_600px_at_85%_10%,rgba(99,102,241,0.10),transparent_60%),radial-gradient(1100px_560px_at_15%_90%,rgba(124,58,237,0.10),transparent_60%)]" />
+            <div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-cyan-400/15 blur-3xl" />
+            <div className="absolute -bottom-32 -right-32 h-[28rem] w-[28rem] rounded-full bg-fuchsia-500/15 blur-3xl" />
+            <div className="absolute left-1/2 top-1/4 h-64 w-64 -translate-x-1/2 rounded-full bg-violet-500/10 blur-3xl" />
+            <div className="absolute inset-0 bg-[radial-gradient(1400px_700px_at_85%_10%,rgba(99,102,241,0.12),transparent_60%),radial-gradient(1200px_600px_at_15%_90%,rgba(124,58,237,0.12),transparent_60%)]" />
           </div>
           <HeroSection h1Ref={h1Ref} />
         </div>

apps/codebility/app/globals.css

@@ -173,8 +173,9 @@
 .primary-gradient {
   background: linear-gradient(
     129deg,
-    var(--violet-color) 0%,
-    var(--teal-color) 100%
+    #0a0b1e 0%,
+    #1a0b2e 35%,
+    #2d1b3d 100%
   );
 }