update: hero style (#25)

Author: CharlieLeee

app/globals.css

@@ -159,4 +159,9 @@
   .animated-underline-muted:hover {
     background-size: 100% 1px, 100% 1px;
   }
+
+  /* Gradient text for banner keywords */
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-sky-500 via-violet-500 to-emerald-500;
+  }
 }

app/page.tsx

@@ -6,6 +6,7 @@ import { FunderSection } from "@/components/funding/FunderSection"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Aurora } from "@/components/visuals/Aurora"
 import publicationsData from "@/data/publications.json"
 import researchData from "@/data/research.json"
 
@@ -15,7 +16,8 @@ export default function Home() {
   return (
     <div className="flex flex-col">
       {/* Hero Section */}
-      <section className="relative border-b">
+      <section className="relative overflow-hidden border-b">
+        <Aurora />
         <div className="section-container py-20 sm:py-24 lg:py-32">
           <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-8 lg:grid-cols-[2.5fr_1fr] lg:gap-16">
             {/* Logo - Mobile Only (Top) */}
@@ -31,7 +33,7 @@ export default function Home() {
                   href="/research"
                   className="group relative inline-block underline decoration-foreground/40 decoration-1 underline-offset-4 transition-colors hover:decoration-foreground sm:no-underline"
                 >
-                  computational neuroscience
+                  <span className="text-gradient">computational neuroscience</span>
                   <span className="absolute bottom-1 left-0 hidden h-[1px] w-full bg-foreground/25 sm:block" />
                   <span className="absolute bottom-1 left-0 hidden h-[1px] w-0 bg-foreground transition-all duration-300 group-hover:w-full sm:block" />
                 </Link>{" "}
@@ -40,7 +42,7 @@ export default function Home() {
                   href="/research"
                   className="group relative inline-block underline decoration-foreground/40 decoration-1 underline-offset-4 transition-colors hover:decoration-foreground sm:no-underline"
                 >
-                  machine learning
+                  <span className="text-gradient">machine learning</span>
                   <span className="absolute bottom-1 left-0 hidden h-[1px] w-full bg-foreground/25 sm:block" />
                   <span className="absolute bottom-1 left-0 hidden h-[1px] w-0 bg-foreground transition-all duration-300 group-hover:w-full sm:block" />
                 </Link>

components/visuals/Aurora.tsx

@@ -0,0 +1,24 @@
+export function Aurora() {
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0 -z-10 hidden overflow-hidden dark:block"
+    >
+      {/* Constrain aurora to content width */}
+      <div className="relative mx-auto h-full max-w-7xl">
+        {/* Top center glow */}
+        <div className="absolute left-1/2 top-[-10%] h-[40rem] w-[45rem] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,theme(colors.sky.400/.25),transparent_60%)] blur-3xl" />
+
+        {/* Left side glows (behind text) */}
+        <div className="absolute left-[10%] top-[10%] size-[24rem] rounded-full bg-[radial-gradient(ellipse_at_center,theme(colors.violet.500/.15),transparent_60%)] blur-2xl" />
+        <div className="absolute left-[30%] top-[5%] size-[26rem] rounded-full bg-[radial-gradient(ellipse_at_center,theme(colors.emerald.400/.18),transparent_60%)] blur-2xl" />
+
+        {/* Right side glow (behind logo) */}
+        <div className="absolute right-[5%] top-[20%] size-[28rem] rounded-full bg-[radial-gradient(ellipse_at_center,theme(colors.purple.400/.15),transparent_60%)] blur-2xl" />
+
+        {/* Bottom center glow */}
+        <div className="absolute bottom-[-10%] left-1/2 h-[32rem] w-[50rem] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,theme(colors.cyan.400/.12),transparent_60%)] blur-3xl" />
+      </div>
+    </div>
+  )
+}