From d3a6eb52c0c07900dce15bc4a8f5224dae3f68f5 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Sun, 2 Nov 2025 18:13:10 +0000
Subject: [PATCH] feat: update "About Me" button to teal background

Change button to solid teal with hover effect for better UX.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
---
 app/about/page.tsx            |  2 +-
 app/gallery/page.tsx          |  2 +-
 app/globals.css               | 25 +++++++++++++++++++
 app/page.tsx                  | 18 +++++++++-----
 app/sponsor/page.tsx          |  2 +-
 components/cursor-effects.tsx | 38 +++++++++++++++++++++++-----
 components/navigation.tsx     | 47 ++++++++++++++++++++++++-----------
 7 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 728ae94..2825fc5 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -124,7 +124,7 @@ export default function AboutPage() {
         </div>
       </main>
 
-      <footer className="border-t border-border py-8 text-center text-muted-foreground mt-12">
+      <footer className="border-t border-border py-6 text-center text-muted-foreground mt-8">
         <p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
       </footer>
     </div>
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index d61a60f..a32cee7 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -92,7 +92,7 @@ export default function GalleryPage() {
         </div>
       </main>
 
-      <footer className="border-t border-border py-8 text-center text-muted-foreground mt-12">
+      <footer className="border-t border-border py-6 text-center text-muted-foreground mt-8">
         <p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
       </footer>
     </div>
diff --git a/app/globals.css b/app/globals.css
index 731634a..5b386ea 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -231,3 +231,28 @@
   -webkit-text-fill-color: transparent;
   animation: rainbow 3s linear infinite;
 }
+
+/* Added rainbow button animation for dynamic gradient background */
+.rainbow-button {
+  background: linear-gradient(
+    90deg,
+    oklch(0.65 0.25 320),
+    oklch(0.75 0.2 200),
+    oklch(0.85 0.15 60),
+    oklch(0.7 0.22 350),
+    oklch(0.6 0.18 180),
+    oklch(0.65 0.25 320)
+  );
+  background-size: 200% 100%;
+  animation: rainbow-slide 3s linear infinite;
+  color: white;
+}
+
+@keyframes rainbow-slide {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
diff --git a/app/page.tsx b/app/page.tsx
index 2c44741..ed30aa3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -20,8 +20,9 @@ export default function HomePage() {
           <h1 className="text-6xl md:text-8xl font-bold mb-6 rainbow-text text-balance">Paint Spark</h1>
           <p className="text-2xl md:text-3xl mb-4 text-foreground font-semibold">by Banksy</p>
           <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto text-pretty">
-            Welcome to my magical world of anime art! ✨ I'm a 10-year-old artist who loves bringing characters to life
-            with colors and sparkles!
+            {
+              "Welcome to my magical world of anime art! ✨ I'm Banksy Bott, and I love bringing characters to life with colors and sparkles!"
+            }
           </p>
           <div className="flex gap-4 justify-center flex-wrap">
             <Button asChild size="lg" className="text-lg">
@@ -30,7 +31,12 @@ export default function HomePage() {
                 View Gallery
               </Link>
             </Button>
-            <Button asChild size="lg" variant="outline" className="text-lg bg-transparent">
+            <Button
+              asChild
+              size="lg"
+              variant="outline"
+              className="text-lg bg-teal-600 hover:bg-teal-700 text-white border-teal-600"
+            >
               <Link href="/about">
                 <Star className="mr-2 h-5 w-5" />
                 About Me
@@ -85,17 +91,17 @@ export default function HomePage() {
             <p className="text-lg text-muted-foreground mb-6 text-pretty">
               Help me continue creating amazing anime art and bring more magical characters to life!
             </p>
-            <Button asChild size="lg" className="text-lg">
+            <Button asChild size="lg" className="rainbow-button text-white text-lg border-0">
               <Link href="/sponsor">
                 <Heart className="mr-2 h-5 w-5" />
-                Become a Sponsor
+                Sponsor My Art
               </Link>
             </Button>
           </div>
         </section>
       </main>
 
-      <footer className="border-t border-border py-8 text-center text-muted-foreground">
+      <footer className="border-t border-border py-6 text-center text-muted-foreground">
         <p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
       </footer>
     </div>
diff --git a/app/sponsor/page.tsx b/app/sponsor/page.tsx
index d010d34..15826b2 100644
--- a/app/sponsor/page.tsx
+++ b/app/sponsor/page.tsx
@@ -163,7 +163,7 @@ export default function SponsorPage() {
         </div>
       </main>
 
-      <footer className="border-t border-border py-8 text-center text-muted-foreground mt-12">
+      <footer className="border-t border-border py-6 text-center text-muted-foreground mt-8">
         <p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
       </footer>
     </div>
diff --git a/components/cursor-effects.tsx b/components/cursor-effects.tsx
index ed6ca0f..cc6695c 100644
--- a/components/cursor-effects.tsx
+++ b/components/cursor-effects.tsx
@@ -22,7 +22,7 @@ export function CursorEffects() {
     let particleId = 0
     let lastTime = Date.now()
 
-    const handleMouseMove = (e: MouseEvent) => {
+    const createParticles = (x: number, y: number) => {
       const now = Date.now()
       // Throttle particle creation to every 50ms
       if (now - lastTime < 50) return
@@ -35,8 +35,8 @@ export function CursorEffects() {
         const speed = 2 + Math.random() * 3
         newParticles.push({
           id: particleId++,
-          x: e.clientX,
-          y: e.clientY,
+          x,
+          y,
           type: "sparkle",
           color: [
             "#ff0000",
@@ -61,8 +61,8 @@ export function CursorEffects() {
         const speed = 3 + Math.random() * 2
         newParticles.push({
           id: particleId++,
-          x: e.clientX,
-          y: e.clientY,
+          x,
+          y,
           type: "rainbow",
           color: [
             "#ff0000",
@@ -89,8 +89,34 @@ export function CursorEffects() {
       }, 2000)
     }
 
+    const handleMouseMove = (e: MouseEvent) => {
+      createParticles(e.clientX, e.clientY)
+    }
+
+    const handleTouchMove = (e: TouchEvent) => {
+      // Prevent scrolling while creating sparkles
+      if (e.touches.length > 0) {
+        const touch = e.touches[0]
+        createParticles(touch.clientX, touch.clientY)
+      }
+    }
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (e.touches.length > 0) {
+        const touch = e.touches[0]
+        createParticles(touch.clientX, touch.clientY)
+      }
+    }
+
     window.addEventListener("mousemove", handleMouseMove)
-    return () => window.removeEventListener("mousemove", handleMouseMove)
+    window.addEventListener("touchmove", handleTouchMove, { passive: true })
+    window.addEventListener("touchstart", handleTouchStart, { passive: true })
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+      window.removeEventListener("touchmove", handleTouchMove)
+      window.removeEventListener("touchstart", handleTouchStart)
+    }
   }, [])
 
   return (
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 7a870dd..7f706d0 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -4,15 +4,15 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { Sparkles } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 
 export function Navigation() {
   const pathname = usePathname()
 
   const links = [
-    { href: "/", label: "Home" },
     { href: "/about", label: "About Banksy" },
     { href: "/gallery", label: "Gallery" },
-    { href: "/sponsor", label: "Sponsor" },
+    { href: "/sponsor", label: "Sponsor My Art" },
   ]
 
   return (
@@ -20,22 +20,39 @@ export function Navigation() {
       <div className="container flex h-16 items-center justify-between px-4">
         <Link href="/" className="flex items-center gap-2 font-bold text-xl">
           <Sparkles className="h-6 w-6 text-primary" />
-          <span className="rainbow-text">Paint Spark</span>
+          <div className="flex flex-col leading-tight">
+            <span className="rainbow-text">Paint Spark</span>
+            <span className="text-xs font-normal text-muted-foreground">by Banksy</span>
+          </div>
         </Link>
 
         <div className="flex items-center gap-6">
-          {links.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className={cn(
-                "text-sm font-medium transition-colors hover:text-primary",
-                pathname === link.href ? "text-primary" : "text-muted-foreground",
-              )}
-            >
-              {link.label}
-            </Link>
-          ))}
+          {links.map((link) => {
+            if (link.href === "/sponsor") {
+              return (
+                <Button key={link.href} asChild className="rainbow-button text-white font-bold border-0">
+                  <Link href={link.href}>{link.label}</Link>
+                </Button>
+              )
+            }
+
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "text-sm font-bold transition-colors hover:text-primary",
+                  pathname === link.href
+                    ? "text-primary"
+                    : link.href === "/about"
+                      ? "text-teal-600 dark:text-teal-400"
+                      : "text-purple-600 dark:text-purple-400",
+                )}
+              >
+                {link.label}
+              </Link>
+            )
+          })}
         </div>
       </div>
     </nav>