feat: add YouTube channel link in footer and navigation

Add YouTube icon in Connect section and "Videos" link in navigation.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>

app/globals.css

@@ -4,74 +4,91 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(0.985 0.002 264);
+  /* Adding vibrant Tron-inspired color palette with teal, orange, purple, and cyan */
-  --foreground: oklch(0.18 0.015 264);
+  --background: oklch(0.08 0.02 264);
-  --card: oklch(1 0 0);
+  --foreground: oklch(0.95 0.01 180);
-  --card-foreground: oklch(0.18 0.015 264);
+
+  /* Neon Teal/Cyan */
+  --neon-cyan: oklch(0.75 0.15 195);
+  --neon-cyan-bright: oklch(0.85 0.18 195);
+
+  /* Neon Orange */
+  --neon-orange: oklch(0.7 0.2 50);
+  --neon-orange-bright: oklch(0.8 0.22 45);
+
+  /* Neon Purple/Magenta */
+  --neon-purple: oklch(0.65 0.25 320);
+  --neon-magenta: oklch(0.7 0.28 330);
+
+  /* Dark elements */
+  --card: oklch(0.12 0.03 264);
+  --card-foreground: oklch(0.95 0.01 180);
+
+  --primary: var(--neon-cyan);
+  --primary-foreground: oklch(0.08 0.02 264);
+  --secondary: var(--neon-purple);
+  --secondary-foreground: oklch(0.95 0.01 180);
+  --accent: var(--neon-orange);
+  --accent-foreground: oklch(0.08 0.02 264);
+
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.015 264);
+  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.24 0.018 264);
+  --muted: oklch(0.97 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --muted-foreground: oklch(0.556 0 0);
-  --secondary: oklch(0.35 0.045 195);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.95 0.002 264);
-  --muted-foreground: oklch(0.48 0.01 264);
-  --accent: oklch(0.35 0.045 195);
-  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.88 0.005 264);
+  --border: oklch(0.25 0.05 264);
-  --input: oklch(0.88 0.005 264);
+  --input: oklch(0.922 0 0);
-  --ring: oklch(0.35 0.045 195);
+  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.35 0.045 195);
+  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.24 0.018 264);
+  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.48 0.01 264);
+  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.65 0.08 195);
+  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.45 0.06 220);
+  --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.5rem;
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.18 0.015 264);
+  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.24 0.018 264);
+  --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.95 0.002 264);
+  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.18 0.015 264);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.88 0.005 264);
+  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.35 0.045 195);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: oklch(0.145 0.01 264);
+  --background: oklch(0.08 0.02 264);
-  --foreground: oklch(0.93 0.005 264);
+  --foreground: oklch(0.95 0.01 180);
-  --card: oklch(0.18 0.012 264);
+  --card: oklch(0.12 0.03 264);
-  --card-foreground: oklch(0.93 0.005 264);
+  --card-foreground: oklch(0.95 0.01 180);
-  --popover: oklch(0.18 0.012 264);
+  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.93 0.005 264);
+  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.93 0.005 264);
+  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.18 0.015 264);
+  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.45 0.06 195);
+  --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.24 0.015 264);
+  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.62 0.008 264);
+  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.45 0.06 195);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.28 0.015 264);
+  --border: oklch(0.269 0 0);
-  --input: oklch(0.28 0.015 264);
+  --input: oklch(0.269 0 0);
-  --ring: oklch(0.45 0.06 195);
+  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.45 0.06 195);
+  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.65 0.08 195);
+  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.62 0.008 264);
+  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.35 0.045 195);
+  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.55 0.07 220);
+  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.18 0.012 264);
+  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.93 0.005 264);
+  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.45 0.06 195);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.24 0.015 264);
+  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.93 0.005 264);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.28 0.015 264);
+  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.45 0.06 195);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 
 @theme inline {
@@ -113,6 +130,14 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Adding custom neon color utilities */
+  --color-neon-cyan: var(--neon-cyan);
+  --color-neon-cyan-bright: var(--neon-cyan-bright);
+  --color-neon-orange: var(--neon-orange);
+  --color-neon-orange-bright: var(--neon-orange-bright);
+  --color-neon-purple: var(--neon-purple);
+  --color-neon-magenta: var(--neon-magenta);
 }
 
 @layer base {
@@ -123,3 +148,33 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Adding neon glow effect utilities */
+@layer utilities {
+  .neon-glow-cyan {
+    text-shadow: 0 0 10px var(--neon-cyan-bright), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
+  }
+
+  .neon-glow-orange {
+    text-shadow: 0 0 10px var(--neon-orange-bright), 0 0 20px var(--neon-orange), 0 0 30px var(--neon-orange);
+  }
+
+  .neon-glow-purple {
+    text-shadow: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-purple), 0 0 30px var(--neon-purple);
+  }
+
+  .border-neon-cyan {
+    border-color: var(--neon-cyan);
+    box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px rgba(0, 255, 255, 0.1);
+  }
+
+  .border-neon-orange {
+    border-color: var(--neon-orange);
+    box-shadow: 0 0 10px var(--neon-orange), inset 0 0 10px rgba(255, 150, 0, 0.1);
+  }
+
+  .border-neon-purple {
+    border-color: var(--neon-purple);
+    box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px rgba(255, 0, 255, 0.1);
+  }
+}

app/page.tsx

@@ -5,10 +5,12 @@ import { ResearchSection } from "@/components/research-section"
 import { LibrarySection } from "@/components/library-section"
 import { OpenSourceSection } from "@/components/open-source-section"
 import { Footer } from "@/components/footer"
+import { CursorTrails } from "@/components/cursor-trails"
 
 export default function Home() {
   return (
     <main className="min-h-screen">
+      <CursorTrails />
       <Navigation />
       <HeroSection />
       <AboutSection />

components/about-section.tsx

@@ -29,11 +29,15 @@ export function AboutSection() {
   ]
 
   return (
-    <section id="about" className="py-20 px-4 sm:px-6 lg:px-8 bg-muted/30">
+    <section id="about" className="relative py-20 px-4 sm:px-6 lg:px-8 bg-card/30 overflow-hidden">
-      <div className="max-w-7xl mx-auto">
+      <div className="absolute top-10 left-20 w-80 h-80 bg-[var(--neon-orange)] rounded-full blur-[120px] opacity-15 animate-pulse" />
+
+      <div className="max-w-7xl mx-auto relative z-10">
         <div className="max-w-2xl mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">About the BCRG</h2>
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-orange text-[var(--neon-orange-bright)]">
-          <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
+            About the BCRG
+          </h2>
+          <p className="text-lg text-foreground/80 leading-relaxed text-pretty">
             The Bonding Curve Research Group is an independent, decentralized collective united in our dedication to
             advancing the understanding and application of bonding curves in crypto-economics. We bring together
             expertise from multiple disciplines to create tools and knowledge that benefit the entire Web3 community.
@@ -42,14 +46,17 @@ export function AboutSection() {
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {values.map((value, index) => (
-            <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
+            <Card
+              key={index}
+              className="p-6 bg-card/50 border-2 border-neon-orange hover:shadow-[0_0_30px_rgba(255,140,0,0.4)] transition-all"
+            >
               <div className="flex items-start gap-4">
-                <div className="p-2 rounded-lg bg-accent/10">
+                <div className="p-2 rounded-lg bg-[var(--neon-orange)]/20 border border-[var(--neon-orange)]">
-                  <value.icon className="h-6 w-6 text-accent" />
+                  <value.icon className="h-6 w-6 text-[var(--neon-orange-bright)]" />
                 </div>
                 <div>
-                  <h3 className="text-xl font-semibold mb-2">{value.title}</h3>
+                  <h3 className="text-xl font-semibold mb-2 text-[var(--neon-orange)]">{value.title}</h3>
-                  <p className="text-muted-foreground leading-relaxed">{value.description}</p>
+                  <p className="text-foreground/70 leading-relaxed">{value.description}</p>
                 </div>
               </div>
             </Card>

components/cursor-trails.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+interface Trail {
+  points: { x: number; y: number }[]
+  color: string
+  opacity: number
+  createdAt: number
+}
+
+export function CursorTrails() {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const trailsRef = useRef<Trail[]>([])
+  const mouseRef = useRef({ x: 0, y: 0, lastX: 0, lastY: 0 })
+  const animationRef = useRef<number>()
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const resize = () => {
+      canvas.width = window.innerWidth
+      canvas.height = window.innerHeight
+    }
+    resize()
+    window.addEventListener("resize", resize)
+
+    const colors = [
+      "rgba(0, 255, 255, 0.6)", // Cyan
+      "rgba(255, 0, 255, 0.6)", // Magenta
+      "rgba(138, 43, 226, 0.6)", // Purple
+      "rgba(255, 140, 0, 0.6)", // Orange
+      "rgba(20, 20, 30, 0.8)", // Near-black
+      "rgba(0, 200, 200, 0.6)", // Teal
+      "rgba(255, 100, 50, 0.6)", // Orange-red
+    ]
+
+    let colorIndex = 0
+    let frameCount = 0
+
+    const handleMouseMove = (e: MouseEvent) => {
+      mouseRef.current.lastX = mouseRef.current.x
+      mouseRef.current.lastY = mouseRef.current.y
+      mouseRef.current.x = e.clientX
+      mouseRef.current.y = e.clientY
+
+      const dx = mouseRef.current.x - mouseRef.current.lastX
+      const dy = mouseRef.current.y - mouseRef.current.lastY
+      const distance = Math.sqrt(dx * dx + dy * dy)
+
+      if (distance > 5 && frameCount % 2 === 0) {
+        const points: { x: number; y: number }[] = []
+        const steps = 20
+
+        // Create a perpendicular vector for sine wave oscillation
+        const perpX = -dy / distance
+        const perpY = dx / distance
+
+        // Random frequency and amplitude for varied squiggles
+        const frequency = 0.3 + Math.random() * 0.5
+        const amplitude = 15 + Math.random() * 25
+
+        for (let i = 0; i <= steps; i++) {
+          const t = i / steps
+          // Base position along the line
+          const baseX = mouseRef.current.lastX + dx * t
+          const baseY = mouseRef.current.lastY + dy * t
+
+          // Add sine wave oscillation perpendicular to movement direction
+          const wave = Math.sin(t * Math.PI * frequency * 4) * amplitude * (1 - t * 0.3)
+
+          points.push({
+            x: baseX + perpX * wave,
+            y: baseY + perpY * wave,
+          })
+        }
+
+        trailsRef.current.push({
+          points,
+          color: colors[colorIndex],
+          opacity: 1,
+          createdAt: Date.now(),
+        })
+
+        colorIndex = (colorIndex + 1) % colors.length
+      }
+      frameCount++
+    }
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      const now = Date.now()
+      trailsRef.current = trailsRef.current.filter((trail) => {
+        const age = now - trail.createdAt
+        const maxAge = 2000
+
+        if (age > maxAge) return false
+
+        trail.opacity = 1 - age / maxAge
+
+        ctx.beginPath()
+        ctx.strokeStyle = trail.color.replace(/[\d.]+\)$/, `${trail.opacity * 0.6})`)
+        ctx.lineWidth = 2 + trail.opacity * 2
+        ctx.lineCap = "round"
+        ctx.lineJoin = "round"
+
+        if (trail.points.length > 0) {
+          ctx.moveTo(trail.points[0].x, trail.points[0].y)
+
+          for (let i = 1; i < trail.points.length - 1; i++) {
+            const xc = (trail.points[i].x + trail.points[i + 1].x) / 2
+            const yc = (trail.points[i].y + trail.points[i + 1].y) / 2
+            ctx.quadraticCurveTo(trail.points[i].x, trail.points[i].y, xc, yc)
+          }
+
+          if (trail.points.length > 1) {
+            const last = trail.points[trail.points.length - 1]
+            ctx.lineTo(last.x, last.y)
+          }
+        }
+
+        // Add glow effect
+        ctx.shadowBlur = 15 * trail.opacity
+        ctx.shadowColor = trail.color
+        ctx.stroke()
+        ctx.shadowBlur = 0
+
+        return true
+      })
+
+      animationRef.current = requestAnimationFrame(animate)
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+    animate()
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+      window.removeEventListener("resize", resize)
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <canvas ref={canvasRef} className="pointer-events-none fixed inset-0 z-50" style={{ mixBlendMode: "screen" }} />
+  )
+}

components/footer.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { Github, Twitter } from "lucide-react"
+import { Github, Twitter, Youtube } from "lucide-react"
 
 export function Footer() {
   return (
@@ -38,6 +38,15 @@ export function Footer() {
                   Research
                 </Link>
               </li>
+              <li>
+                <Link
+                  href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
+                  target="_blank"
+                  className="hover:text-foreground transition-colors"
+                >
+                  Videos
+                </Link>
+              </li>
               <li>
                 <Link
                   href="https://github.com/bonding-curves"
@@ -67,6 +76,13 @@ export function Footer() {
               >
                 <Twitter className="h-5 w-5" />
               </Link>
+              <Link
+                href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
+                target="_blank"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <Youtube className="h-5 w-5" />
+              </Link>
             </div>
           </div>
         </div>

components/hero-section.tsx

@@ -4,31 +4,42 @@ import { ArrowRight } from "lucide-react"
 
 export function HeroSection() {
   return (
-    <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
+    <section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
-      <div className="max-w-7xl mx-auto">
+      <div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-20 animate-pulse" />
-        <div className="max-w-3xl">
+      <div
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/20 border border-accent/30 text-accent-foreground text-sm mb-6">
+        className="absolute bottom-10 left-20 w-72 h-72 bg-[var(--neon-purple)] rounded-full blur-[100px] opacity-15 animate-pulse"
-            <div className="w-1.5 h-1.5 rounded-full bg-accent" />
+        style={{ animationDelay: "1s" }}
-            Independent Research Collective
+      />
-          </div>
 
-          <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance">
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="max-w-3xl">
+          
+
+          <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
             Bonding Curve Research Group
           </h1>
 
-          <p className="text-xl md:text-2xl text-muted-foreground mb-8 leading-relaxed text-pretty">
+          <p className="text-xl md:text-2xl text-foreground/80 mb-8 leading-relaxed text-pretty">
-            We are a decentralized collective of scholars, engineers, and researchers dedicated to the comprehensive
+            We are a decentralized squad of engineers, researchers, and data analysts dedicated to the study, development, and practical implementation of bonding curves as programmable financial primitives.
-            study, development, and practical implementation of bonding curves as programmable financial primitives.
           </p>
 
           <div className="flex flex-wrap gap-4">
-            <Button asChild size="lg" className="bg-primary hover:bg-primary/90">
+            <Button
+              asChild
+              size="lg"
+              className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_20px_rgba(0,255,255,0.5)]"
+            >
               <Link href="#research">
                 Explore Research
                 <ArrowRight className="ml-2 h-4 w-4" />
               </Link>
             </Button>
-            <Button asChild variant="outline" size="lg">
+            <Button
+              asChild
+              variant="outline"
+              size="lg"
+              className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
+            >
               <Link
                 href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
                 target="_blank"

components/library-section.tsx

@@ -28,11 +28,19 @@ export function LibrarySection() {
   ]
 
   return (
-    <section id="library" className="py-20 px-4 sm:px-6 lg:px-8 bg-muted/30">
+    <section id="library" className="relative py-20 px-4 sm:px-6 lg:px-8 bg-card/30 overflow-hidden">
-      <div className="max-w-7xl mx-auto">
+      <div className="absolute top-10 right-20 w-96 h-96 bg-[var(--neon-purple)] rounded-full blur-[120px] opacity-15 animate-pulse" />
+      <div
+        className="absolute bottom-20 left-10 w-80 h-80 bg-[var(--neon-magenta)] rounded-full blur-[100px] opacity-12 animate-pulse"
+        style={{ animationDelay: "2s" }}
+      />
+
+      <div className="max-w-7xl mx-auto relative z-10">
         <div className="max-w-2xl mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">BCRG Library</h2>
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-purple text-[var(--neon-magenta)]">
-          <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
+            BCRG Library
+          </h2>
+          <p className="text-lg text-foreground/80 leading-relaxed text-pretty">
             A comprehensive toolkit for exploring the design space of bonding curves, producing re-usable tooling as
             infrastructure for future research and practical implementations.
           </p>
@@ -40,31 +48,40 @@ export function LibrarySection() {
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
           {features.map((feature, index) => (
-            <Card key={index} className="p-6">
+            <Card
+              key={index}
+              className="p-6 bg-card/50 border-2 border-neon-purple hover:shadow-[0_0_30px_rgba(138,43,226,0.4)] transition-all"
+            >
               <div className="flex items-start gap-4">
-                <div className="p-2 rounded-lg bg-accent/10">
+                <div className="p-2 rounded-lg bg-[var(--neon-purple)]/20 border border-[var(--neon-purple)]">
-                  <feature.icon className="h-6 w-6 text-accent" />
+                  <feature.icon className="h-6 w-6 text-[var(--neon-magenta)]" />
                 </div>
                 <div>
-                  <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+                  <h3 className="text-xl font-semibold mb-2 text-[var(--neon-purple)]">{feature.title}</h3>
-                  <p className="text-muted-foreground leading-relaxed">{feature.description}</p>
+                  <p className="text-foreground/70 leading-relaxed">{feature.description}</p>
                 </div>
               </div>
             </Card>
           ))}
         </div>
 
-        <Card className="p-8 bg-card border-2">
+        <Card className="p-8 bg-card/50 border-2 border-[var(--neon-purple)] shadow-[0_0_30px_rgba(138,43,226,0.3)]">
           <div className="flex flex-col md:flex-row items-center justify-between gap-6">
             <div className="flex-1">
-              <h3 className="text-2xl font-bold mb-3">Get Started with the Library</h3>
+              <h3 className="text-2xl font-bold mb-3 text-[var(--neon-magenta)]">Get Started with the Library</h3>
-              <p className="text-muted-foreground leading-relaxed mb-4">
+              <p className="text-foreground/70 leading-relaxed mb-4">
                 Access our comprehensive documentation and tutorials to start modeling and analyzing bonding curves
                 today.
               </p>
-              <code className="block bg-muted px-4 py-2 rounded text-sm font-mono">pip install conding</code>
+              <code className="block bg-black/50 border border-[var(--neon-purple)] px-4 py-2 rounded text-sm font-mono text-[var(--neon-purple)]">
+                pip install conding
+              </code>
             </div>
-            <Button asChild size="lg" className="bg-primary hover:bg-primary/90">
+            <Button
+              asChild
+              size="lg"
+              className="bg-[var(--neon-purple)] hover:bg-[var(--neon-magenta)] text-white font-semibold shadow-[0_0_20px_rgba(138,43,226,0.5)]"
+            >
               <Link
                 href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
                 target="_blank"

components/navigation.tsx

@@ -2,31 +2,58 @@
 
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import { Youtube } from "lucide-react"
 
 export function Navigation() {
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-border">
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-b-2 border-neon-cyan shadow-[0_0_20px_rgba(0,255,255,0.3)]">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <Link href="/" className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-primary rounded-sm" />
+            <div className="w-8 h-8 bg-[var(--neon-cyan)] rounded-sm shadow-[0_0_20px_rgba(0,255,255,0.6)]" />
-            <span className="text-lg font-semibold">BCRG</span>
+            <span className="text-lg font-semibold neon-glow-cyan text-[var(--neon-cyan-bright)]">
+              BondingCurve.Tech
+            </span>
           </Link>
 
           <div className="hidden md:flex items-center gap-8">
-            <Link href="#about" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#about"
+              className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange"
+            >
               About
             </Link>
-            <Link href="#research" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#research"
+              className="text-sm text-[var(--neon-cyan)] hover:text-[var(--neon-cyan-bright)] transition-colors hover:neon-glow-cyan"
+            >
               Research
             </Link>
-            <Link href="#library" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#library"
+              className="text-sm text-[var(--neon-purple)] hover:text-[var(--neon-magenta)] transition-colors hover:neon-glow-purple"
+            >
               Library
             </Link>
-            <Link href="#open-source" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
+              target="_blank"
+              className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange flex items-center gap-1"
+            >
+              <Youtube className="h-4 w-4" />
+              Videos
+            </Link>
+            <Link
+              href="#open-source"
+              className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange"
+            >
               Open Source
             </Link>
-            <Button asChild size="sm" className="bg-primary hover:bg-primary/90">
+            <Button
+              asChild
+              size="sm"
+              className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_15px_rgba(0,255,255,0.5)]"
+            >
               <Link href="https://github.com/bonding-curves" target="_blank">
                 GitHub
               </Link>

components/research-section.tsx

@@ -29,11 +29,19 @@ export function ResearchSection() {
   ]
 
   return (
-    <section id="research" className="py-20 px-4 sm:px-6 lg:px-8">
+    <section id="research" className="relative py-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
-      <div className="max-w-7xl mx-auto">
+      <div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-15 animate-pulse" />
+      <div
+        className="absolute bottom-10 left-10 w-80 h-80 bg-[var(--neon-magenta)] rounded-full blur-[100px] opacity-10 animate-pulse"
+        style={{ animationDelay: "1.5s" }}
+      />
+
+      <div className="max-w-7xl mx-auto relative z-10">
         <div className="max-w-2xl mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">Research & Publications</h2>
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
-          <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
+            Research & Publications
+          </h2>
+          <p className="text-lg text-foreground/80 leading-relaxed text-pretty">
             Our research focuses on empirical analysis, practical applications, and in-depth exploration of bonding
             curves as vital components for crafting robust digital economies in the DeFi ecosystem.
           </p>
@@ -41,17 +49,24 @@ export function ResearchSection() {
 
         <div className="grid grid-cols-1 gap-6">
           {publications.map((pub, index) => (
-            <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
+            <Card
+              key={index}
+              className="p-6 bg-card/50 border-2 border-neon-cyan hover:shadow-[0_0_30px_rgba(0,255,255,0.4)] transition-all"
+            >
               <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                 <div className="flex-1">
-                  <h3 className="text-xl font-semibold mb-2">{pub.title}</h3>
+                  <h3 className="text-xl font-semibold mb-2 text-[var(--neon-cyan)]">{pub.title}</h3>
-                  <p className="text-muted-foreground mb-3 leading-relaxed">{pub.description}</p>
+                  <p className="text-foreground/70 mb-3 leading-relaxed">{pub.description}</p>
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <div className="flex items-center gap-2 text-sm text-[var(--neon-cyan)]/70">
                     <Calendar className="h-4 w-4" />
                     <span>{pub.date}</span>
                   </div>
                 </div>
-                <Button asChild variant="outline" className="self-start md:self-center bg-transparent">
+                <Button
+                  asChild
+                  variant="outline"
+                  className="self-start md:self-center border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_10px_rgba(0,255,255,0.3)] bg-transparent"
+                >
                   <Link href={pub.link} target="_blank">
                     Read More
                     <ExternalLink className="ml-2 h-4 w-4" />
@@ -63,7 +78,12 @@ export function ResearchSection() {
         </div>
 
         <div className="mt-12 text-center">
-          <Button asChild size="lg" variant="outline">
+          <Button
+            asChild
+            size="lg"
+            variant="outline"
+            className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
+          >
             <Link href="https://mirror.xyz/0x8fF6Fe58b468B1F18d2C54e2B0870b4e847C730d" target="_blank">
               View All Publications on Mirror
               <ExternalLink className="ml-2 h-4 w-4" />