From 7fb2ac8685fcc0afc56855a8f57f6b4ed643e37a Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Mon, 8 Dec 2025 20:42:12 -0800
Subject: [PATCH] cosmetics

---
 frontend/index.html                       |  3 ++
 frontend/src/components/Footer/Footer.tsx | 57 ++---------------------
 frontend/src/components/Navbar/Navbar.tsx |  2 +-
 frontend/src/pages/AdminPage.tsx          | 30 ++++++++----
 4 files changed, 29 insertions(+), 63 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 7827540..89b5c40 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Butterfly+Kids&display=swap" rel="stylesheet">
     <title>Rainbow, Cupcakes & Unicorns - Free Games for Kids</title>
   </head>
   <body class="font-sans antialiased">
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index c733fd2..5b0454c 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -1,59 +1,10 @@
 export function Footer() {
   return (
     <footer className="bg-muted border-t border-border mt-16">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mb-8">
-          <div>
-            <h3 className="font-bold text-foreground mb-4">Rainbows, Cupcakes and Unicorns</h3>
-            <p className="text-sm text-muted-foreground">
-              Making education and fun accessible for every child, completely free.
-            </p>
-          </div>
-          <div>
-            <h3 className="font-bold text-foreground mb-4">Quick Links</h3>
-            <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>
-                <a href="/" className="hover:text-foreground transition-colors">
-                  All Games
-                </a>
-              </li>
-              <li>
-                <a href="/" className="hover:text-foreground transition-colors">
-                  Categories
-                </a>
-              </li>
-              <li>
-                <a href="/" className="hover:text-foreground transition-colors">
-                  Top Rated
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <h3 className="font-bold text-foreground mb-4">Legal</h3>
-            <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>
-                <a href="#" className="hover:text-foreground transition-colors">
-                  Privacy Policy
-                </a>
-              </li>
-              <li>
-                <a href="#" className="hover:text-foreground transition-colors">
-                  Terms of Service
-                </a>
-              </li>
-              <li>
-                <a href="#" className="hover:text-foreground transition-colors">
-                  Contact Us
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div className="border-t border-border pt-8 text-center text-sm text-muted-foreground">
-          <p>© 2025 Rainbows, Cupcakes and Unicorns. Free fun for all children. No ads, no logins, no worries! 🎓</p>
-        </div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-center">
+        <p className="text-center text-sm text-muted-foreground">
+          © 2025 Rainbows, Cupcakes and Unicorns. Free fun for all children. No ads, no logins, no worries! 🎓
+        </p>
       </div>
     </footer>
   );
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
index 1787c6b..58a2dac 100644
--- a/frontend/src/components/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -77,7 +77,7 @@ export function Navbar() {
                 alt="Rainbow" 
                 className="h-10 w-10 md:h-12 md:w-12 object-contain"
               />
-              <h1 className="text-3xl md:text-4xl font-bold text-foreground">Rainbows, Cupcakes & Unicorns</h1>
+              <h1 className="text-3xl md:text-4xl font-bold text-foreground" style={{ fontFamily: "'Butterfly Kids', cursive" }}>Rainbows, Cupcakes & Unicorns</h1>
               <img 
                 src="/cupcake.png" 
                 alt="Cupcake" 
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index 2682757..caaf8a2 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -8,25 +8,37 @@ export function AdminPage() {
         <p className="m-0 text-sm text-muted-foreground">Manage app settings and configurations</p>
       </div>
       
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-6 p-6 max-w-[1200px] mx-auto">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 max-w-[1200px] mx-auto">
         <Link 
           to="/admin/videos" 
-          className="flex flex-col items-center text-center py-8 px-6 bg-card border border-border rounded-xl no-underline text-foreground transition-all hover:-translate-y-1 hover:shadow-lg group"
+          className="bg-pink-100 hover:bg-pink-200 w-full p-6 rounded-3xl font-semibold text-foreground transition-all active:scale-95 hover:shadow-lg flex flex-col items-center text-center no-underline"
         >
-          <div className="text-5xl mb-4">📹</div>
-          <h2 className="m-0 mb-2 text-2xl font-medium text-foreground">Video App</h2>
-          <p className="m-0 text-sm text-muted-foreground leading-relaxed">
+          <div className="mb-3">
+            <img 
+              src="/video-marketing.png" 
+              alt="Video App" 
+              className="w-20 h-20 object-contain"
+            />
+          </div>
+          <h2 className="text-xl font-bold mb-1">Video App</h2>
+          <p className="text-sm opacity-75">
             Manage YouTube channels and video time limits
           </p>
         </Link>
         
         <Link 
           to="/admin/speech-sounds" 
-          className="flex flex-col items-center text-center py-8 px-6 bg-card border border-border rounded-xl no-underline text-foreground transition-all hover:-translate-y-1 hover:shadow-lg group"
+          className="bg-purple-100 hover:bg-purple-200 w-full p-6 rounded-3xl font-semibold text-foreground transition-all active:scale-95 hover:shadow-lg flex flex-col items-center text-center no-underline"
         >
-          <div className="text-5xl mb-4">🗣️</div>
-          <h2 className="m-0 mb-2 text-2xl font-medium text-foreground">Speech Sounds</h2>
-          <p className="m-0 text-sm text-muted-foreground leading-relaxed">
+          <div className="mb-3">
+            <img 
+              src="/unicorn-talking.png" 
+              alt="Speech Sounds" 
+              className="w-20 h-20 object-contain"
+            />
+          </div>
+          <h2 className="text-xl font-bold mb-1">Speech Sounds</h2>
+          <p className="text-sm opacity-75">
             Manage word groups for speech sound practice
           </p>
         </Link>
