feat: update logo and favicon with wave-based design

Introduce neon cyan wave pattern for modern look.

#VERCEL_SKIP

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

app/icon.svg

@@ -0,0 +1,27 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Updated to single-color wave-based design matching logo -->
+  <rect width="100" height="100" rx="8" fill="#0a0f1a" />
+  
+  <!-- Sine wave -->
+  <path d="M 0 50 Q 12.5 30, 25 50 T 50 50 T 75 50 T 100 50" 
+        stroke="#00ffff" 
+        stroke-width="3" 
+        fill="none" 
+        opacity="0.9"/>
+  
+  <!-- Cosine wave -->
+  <path d="M 0 30 Q 12.5 50, 25 30 T 50 30 T 75 30 T 100 30" 
+        stroke="#00ffff" 
+        stroke-width="3" 
+        fill="none" 
+        opacity="0.7"/>
+        
+  <!-- Third wave -->
+  <path d="M 0 60 Q 12.5 40, 25 60 T 50 60 T 75 60 T 100 60" 
+        stroke="#00ffff" 
+        stroke-width="2.5" 
+        fill="none" 
+        opacity="0.6"/>
+  
+  <rect width="98" height="98" x="1" y="1" rx="8" stroke="#00ffff" stroke-width="1" fill="none" opacity="0.3"/>
+</svg>

components/bcrg-logo.tsx

@@ -0,0 +1,109 @@
+interface BCRGLogoProps {
+  className?: string
+  size?: number
+}
+
+export function BCRGLogo({ className = "", size = 32 }: BCRGLogoProps) {
+  const generateSineWave = () => {
+    const points = []
+    const amplitude = 20
+    const frequency = 0.08
+    const centerY = 50
+
+    for (let x = 0; x <= 100; x += 2) {
+      const y = centerY + amplitude * Math.sin(x * frequency)
+      points.push(`${x},${y}`)
+    }
+    return points.join(" ")
+  }
+
+  const generateCosineWave = () => {
+    const points = []
+    const amplitude = 20
+    const frequency = 0.08
+    const centerY = 50
+
+    for (let x = 0; x <= 100; x += 2) {
+      const y = centerY + amplitude * Math.cos(x * frequency)
+      points.push(`${x},${y}`)
+    }
+    return points.join(" ")
+  }
+
+  const generateSecondSineWave = () => {
+    const points = []
+    const amplitude = 15
+    const frequency = 0.12
+    const centerY = 50
+    const phase = Math.PI / 4
+
+    for (let x = 0; x <= 100; x += 2) {
+      const y = centerY + amplitude * Math.sin(x * frequency + phase)
+      points.push(`${x},${y}`)
+    }
+    return points.join(" ")
+  }
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {/* Background square with rounded corners */}
+      <rect width="100" height="100" rx="8" fill="currentColor" fillOpacity="0.05" />
+
+      {/* Sine wave */}
+      <polyline
+        points={generateSineWave()}
+        stroke="var(--neon-cyan)"
+        strokeWidth="2.5"
+        fill="none"
+        opacity="0.9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="drop-shadow-[0_0_8px_rgba(0,255,255,0.5)]"
+      />
+
+      {/* Cosine wave - overlapping with sine */}
+      <polyline
+        points={generateCosineWave()}
+        stroke="var(--neon-cyan)"
+        strokeWidth="2.5"
+        fill="none"
+        opacity="0.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="drop-shadow-[0_0_8px_rgba(0,255,255,0.4)]"
+      />
+
+      {/* Third wave with phase shift for more complexity */}
+      <polyline
+        points={generateSecondSineWave()}
+        stroke="var(--neon-cyan)"
+        strokeWidth="2"
+        fill="none"
+        opacity="0.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="drop-shadow-[0_0_6px_rgba(0,255,255,0.3)]"
+      />
+
+      {/* Outer glow border */}
+      <rect
+        width="98"
+        height="98"
+        x="1"
+        y="1"
+        rx="8"
+        stroke="var(--neon-cyan)"
+        strokeWidth="1"
+        fill="none"
+        opacity="0.3"
+      />
+    </svg>
+  )
+}

components/footer.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link"
 import { Github, Twitter, Youtube } from "lucide-react"
+import { BCRGLogo } from "@/components/bcrg-logo"
 
 export function Footer() {
   return (
@@ -8,7 +9,7 @@ export function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div className="col-span-1 md:col-span-2">
             <div className="flex items-center gap-2 mb-4">
-              <div className="w-8 h-8 bg-primary rounded-sm" />
+              <BCRGLogo size={32} className="text-primary" />
               <span className="text-lg font-semibold">BondingCurve.tech</span>
             </div>
             <p className="text-sm text-muted-foreground leading-relaxed max-w-md">

components/navigation.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Youtube } from "lucide-react"
+import { BCRGLogo } from "@/components/bcrg-logo"
 
 export function Navigation() {
   return (
@@ -10,7 +11,7 @@ export function Navigation() {
       <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-[var(--neon-cyan)] rounded-sm shadow-[0_0_20px_rgba(0,255,255,0.6)]" />
+            <BCRGLogo size={32} className="text-[var(--neon-cyan)]" />
             <span className="text-lg font-semibold neon-glow-cyan text-[var(--neon-cyan-bright)]">
               BondingCurve.tech
             </span>