Restore homepage hero contrast

Author: DipakMandlik

components/landing/hero-section.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import { TubesBackground } from "./tubes-background";
+import { AnimatedSphere } from "./animated-sphere";
 import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const words = ["learn", "build", "practice", "ship"];
@@ -24,29 +25,57 @@ export function HeroSection() {
   }, [prefersReducedMotion]);
 
   return (
-    <section className="relative min-h-screen overflow-hidden bg-[#050608]">
-      <TubesBackground className="min-h-screen rounded-b-[2rem] md:rounded-b-[3rem]">
-        <div className="mx-auto flex min-h-screen max-w-[1400px] flex-col justify-center px-6 py-32 lg:px-12 lg:py-40">
+    <section className="relative flex min-h-screen flex-col justify-center overflow-hidden bg-background text-foreground">
+      <div className="absolute right-[-12%] top-1/2 hidden h-[620px] w-[620px] -translate-y-1/2 pointer-events-none md:block lg:h-[820px] lg:w-[820px]">
+        <TubesBackground
+          tone="light"
+          enableClickInteraction={false}
+          className="h-full min-h-full rounded-full border border-cyan-500/10 shadow-[0_30px_120px_rgba(6,182,212,0.16)]"
+        />
+      </div>
+
+      <div className="absolute right-0 top-1/2 hidden h-[600px] w-[600px] -translate-y-1/2 opacity-25 pointer-events-none md:block lg:h-[800px] lg:w-[800px]">
+        <AnimatedSphere />
+      </div>
+
+      <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-30">
+        {[...Array(8)].map((_, i) => (
           <div
-            className={`mb-8 transition-all duration-700 ${
-              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-            }`}
-          >
-            <span className="inline-flex items-center gap-3 text-sm font-mono text-white/70">
-              <span className="h-px w-8 bg-cyan-300/60 shadow-[0_0_18px_rgba(34,211,238,0.9)]" />
-              The platform to master AI
-            </span>
-          </div>
+            key={`h-${i}`}
+            className="absolute h-px bg-foreground/10"
+            style={{ top: `${12.5 * (i + 1)}%`, left: 0, right: 0 }}
+          />
+        ))}
+        {[...Array(12)].map((_, i) => (
+          <div
+            key={`v-${i}`}
+            className="absolute w-px bg-foreground/10"
+            style={{ left: `${8.33 * (i + 1)}%`, top: 0, bottom: 0 }}
+          />
+        ))}
+      </div>
+
+      <div className="relative z-10 mx-auto max-w-[1400px] px-6 py-32 lg:px-12 lg:py-40">
+        <div
+          className={`mb-8 transition-all duration-700 ${
+            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
+          }`}
+        >
+          <span className="inline-flex items-center gap-3 text-sm font-mono text-muted-foreground">
+            <span className="h-px w-8 bg-foreground/30" />
+            The platform to master AI
+          </span>
+        </div>
 
         <div className="mb-12">
           <h1
-            className={`max-w-6xl text-[clamp(3rem,12vw,10rem)] font-display leading-[0.9] tracking-tight text-white drop-shadow-[0_0_38px_rgba(6,182,212,0.3)] transition-all duration-1000 ${
+            className={`text-[clamp(3rem,12vw,10rem)] font-display leading-[0.9] tracking-tight transition-all duration-1000 ${
               isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
             }`}
           >
-            <span className="block text-white/78">AIByDM</span>
+            <span className="block">The place to</span>
             <span className="block">
-              <span className="relative inline-block brand-hero-wordmark">
+              <span className="relative inline-block brand-wordmark-text">
                 <span key={wordIndex} className="inline-flex">
                   {words[wordIndex].split("").map((char, i) => (
                     <span
@@ -58,7 +87,7 @@ export function HeroSection() {
                     </span>
                   ))}
                 </span>
-                <span className="absolute -bottom-2 left-0 right-0 h-3 bg-cyan-300/20 shadow-[0_0_30px_rgba(34,211,238,0.55)]" />
+                <span className="absolute -bottom-2 left-0 right-0 h-3 bg-cyan-400/15 shadow-[0_0_28px_rgba(6,182,212,0.22)]" />
               </span>{" "}
               AI
             </span>
@@ -67,7 +96,7 @@ export function HeroSection() {
 
         <div className="grid lg:grid-cols-2 gap-12 lg:gap-24 items-end">
           <p
-            className={`max-w-xl text-xl leading-relaxed text-white/72 transition-all delay-200 duration-700 lg:text-2xl ${
+            className={`max-w-xl text-xl leading-relaxed text-muted-foreground transition-all delay-200 duration-700 lg:text-2xl ${
               isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
             }`}
           >
@@ -83,7 +112,7 @@ export function HeroSection() {
             <Button
               asChild
               size="lg"
-              className="h-14 rounded-full bg-white px-8 text-base text-[#050608] shadow-[0_0_34px_rgba(34,211,238,0.32)] hover:bg-cyan-50 group"
+              className="group h-14 rounded-full bg-foreground px-8 text-base text-background hover:bg-foreground/90"
             >
               <Link href="/learn">
                 Start learning free
@@ -94,14 +123,13 @@ export function HeroSection() {
               asChild
               size="lg"
               variant="outline"
-              className="h-14 rounded-full border-white/30 bg-white/5 px-8 text-base text-white backdrop-blur-md hover:bg-white/12"
+              className="h-14 rounded-full border-foreground/20 px-8 text-base hover:bg-foreground/5"
             >
               <Link href="/tools">Explore tools</Link>
             </Button>
           </div>
         </div>
-        </div>
-      </TubesBackground>
+      </div>
     </section>
   );
 }

components/landing/tubes-background.tsx

@@ -8,6 +8,7 @@ type TubesBackgroundProps = {
   children?: ReactNode;
   className?: string;
   enableClickInteraction?: boolean;
+  tone?: "light" | "dark";
 };
 
 type TubesApp = {
@@ -32,6 +33,7 @@ export function TubesBackground({
   children,
   className,
   enableClickInteraction = true,
+  tone = "light",
 }: TubesBackgroundProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const appRef = useRef<TubesApp | null>(null);
@@ -93,25 +95,49 @@ export function TubesBackground({
   return (
     <div
       className={cn(
-        "relative min-h-[620px] overflow-hidden bg-[#050608] text-white",
+        tone === "dark"
+          ? "relative min-h-[620px] overflow-hidden bg-[#050608] text-white"
+          : "relative min-h-[620px] overflow-hidden bg-transparent text-foreground",
         className,
       )}
       onClick={handleClick}
     >
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_20%,rgba(6,182,212,0.28),transparent_32%),radial-gradient(circle_at_76%_12%,rgba(249,115,22,0.2),transparent_28%),linear-gradient(135deg,#050608_0%,#0b1517_54%,#11100a_100%)]" />
-      <div className="absolute inset-0 opacity-45 [background-image:linear-gradient(rgba(255,255,255,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.08)_1px,transparent_1px)] [background-size:72px_72px]" />
+      <div
+        className={cn(
+          "absolute inset-0",
+          tone === "dark"
+            ? "bg-[radial-gradient(circle_at_25%_20%,rgba(6,182,212,0.28),transparent_32%),radial-gradient(circle_at_76%_12%,rgba(249,115,22,0.2),transparent_28%),linear-gradient(135deg,#050608_0%,#0b1517_54%,#11100a_100%)]"
+            : "bg-[radial-gradient(circle_at_28%_24%,rgba(6,182,212,0.22),transparent_34%),radial-gradient(circle_at_76%_18%,rgba(249,115,22,0.16),transparent_30%),linear-gradient(135deg,rgba(255,255,255,0.86),rgba(236,254,255,0.48),rgba(255,247,237,0.36))]",
+        )}
+      />
+      <div
+        className={cn(
+          "absolute inset-0 [background-size:72px_72px]",
+          tone === "dark"
+            ? "opacity-45 [background-image:linear-gradient(rgba(255,255,255,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.08)_1px,transparent_1px)]"
+            : "opacity-55 [background-image:linear-gradient(rgba(15,23,42,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.06)_1px,transparent_1px)]",
+        )}
+      />
       {!prefersReducedMotion ? (
         <canvas
           ref={canvasRef}
           aria-hidden="true"
           className={cn(
             "absolute inset-0 block h-full w-full transition-opacity duration-700",
-            isLoaded ? "opacity-90" : "opacity-0",
+            tone === "light" ? "mix-blend-multiply saturate-125" : "",
+            isLoaded ? (tone === "dark" ? "opacity-90" : "opacity-45") : "opacity-0",
           )}
           style={{ touchAction: "none" }}
         />
       ) : null}
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(5,6,8,0.18)_42%,rgba(5,6,8,0.74)_100%)]" />
+      <div
+        className={cn(
+          "absolute inset-0",
+          tone === "dark"
+            ? "bg-[radial-gradient(circle_at_center,transparent_0%,rgba(5,6,8,0.18)_42%,rgba(5,6,8,0.74)_100%)]"
+            : "bg-[radial-gradient(circle_at_center,transparent_0%,rgba(250,250,246,0.12)_44%,rgba(250,250,246,0.82)_100%)]",
+        )}
+      />
       <div className="relative z-10 h-full pointer-events-none">{children}</div>
     </div>
   );