change icons around, minor css changes

frontend/src/components/Footer/Footer.tsx

@@ -4,7 +4,7 @@ export function Footer() {
       <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">Rainbow, Cupcakes and Unicorns</h3>
+            <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>
@@ -52,7 +52,7 @@ export function Footer() {
         </div>
 
         <div className="border-t border-border pt-8 text-center text-sm text-muted-foreground">
-          <p>© 2025 PlayLearn. Free learning for all children. No ads, no logins, no worries! 🎓</p>
+          <p>© 2025 Rainbows, Cupcakes and Unicorns. Free learning for all children. No ads, no logins, no worries! 🎓</p>
         </div>
       </div>
     </footer>

frontend/src/components/Navbar/Navbar.tsx

@@ -72,9 +72,17 @@ export function Navbar() {
         <div className="max-w-5xl mx-auto px-4 py-5">
           <div className="flex items-center gap-3 justify-between">
             <Link to="/" className="flex items-center gap-3">
-              <span className="text-4xl">🌈</span>
+              <img 
-              <h1 className="text-3xl md:text-4xl font-bold text-foreground">Rainbow, Cupcakes & Unicorns</h1>
+                src="/rainbow.png" 
-              <span className="text-4xl">🧁</span>
+                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>
+              <img 
+                src="/cupcake.png" 
+                alt="Cupcake" 
+                className="h-10 w-10 md:h-12 md:w-12 object-contain"
+              />
             </Link>
             
             <div className="flex items-center gap-3">

frontend/src/components/VideoGrid/VideoGrid.tsx

@@ -76,7 +76,7 @@ export function VideoGrid({
           <button
             onClick={() => onPageChange(page - 1)}
             disabled={page === 1}
-            className="px-4 py-2 bg-secondary text-secondary-foreground border-none rounded-full cursor-pointer text-sm font-medium transition-all text-white shadow-lg hover:-translate-y-0.5 hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+            className="text-sm font-semibold px-3 py-2 rounded-full transition-all active:scale-95 bg-white text-foreground border-2 border-primary hover:bg-pink-50 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
           >
             Previous
           </button>
@@ -98,10 +98,10 @@ export function VideoGrid({
                 <button
                   key={pageNum}
                   onClick={() => onPageChange(pageNum)}
-                  className={`w-9 h-9 bg-card border border-transparent rounded-full cursor-pointer text-sm font-medium transition-all text-foreground hover:bg-primary/10 hover:border-primary/50 ${
+                  className={`text-sm font-semibold px-3 py-2 rounded-full transition-all active:scale-95 ${
                     page === pageNum 
-                      ? 'bg-gradient-to-r from-primary to-secondary text-white border-transparent' 
+                      ? 'bg-primary text-primary-foreground shadow-md' 
-                      : ''
+                      : 'bg-white text-foreground border-2 border-primary hover:bg-pink-50'
                   }`}
                 >
                   {pageNum}
@@ -113,7 +113,7 @@ export function VideoGrid({
           <button
             onClick={() => onPageChange(page + 1)}
             disabled={page === totalPages}
-            className="px-4 py-2 bg-secondary text-secondary-foreground border-none rounded-full cursor-pointer text-sm font-medium transition-all text-white shadow-lg hover:-translate-y-0.5 hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+            className="text-sm font-semibold px-3 py-2 rounded-full transition-all active:scale-95 bg-white text-foreground border-2 border-primary hover:bg-pink-50 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
           >
             Next
           </button>

frontend/src/pages/LandingPage.tsx

@@ -44,7 +44,23 @@ export function LandingPage() {
                     }
                   }}
                 >
-                  <div className="mb-3 text-5xl">{emoji}</div>
+                  <div className="mb-3">
+                    {app.id === 'videos' ? (
+                      <img 
+                        src="/video-marketing.png" 
+                        alt="Video App" 
+                        className="w-20 h-20 object-contain"
+                      />
+                    ) : app.id === 'speechsounds' ? (
+                      <img 
+                        src="/unicorn-talking.png" 
+                        alt="Speech Sounds" 
+                        className="w-20 h-20 object-contain"
+                      />
+                    ) : (
+                      <span className="text-5xl">{emoji}</span>
+                    )}
+                  </div>
                   <h3 className="text-xl font-bold mb-1">{app.name}</h3>
                   <p className="text-sm opacity-75">{app.description}</p>
                 </Link>