Browse Source

cosmetics

drawing-pad
Stephanie Gredell 1 month ago
parent
commit
7fb2ac8685
  1. 3
      frontend/index.html
  2. 57
      frontend/src/components/Footer/Footer.tsx
  3. 2
      frontend/src/components/Navbar/Navbar.tsx
  4. 30
      frontend/src/pages/AdminPage.tsx

3
frontend/index.html

@ -4,6 +4,9 @@ @@ -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">

57
frontend/src/components/Footer/Footer.tsx

@ -1,59 +1,10 @@ @@ -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>
);

2
frontend/src/components/Navbar/Navbar.tsx

@ -77,7 +77,7 @@ export function Navbar() { @@ -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"

30
frontend/src/pages/AdminPage.tsx

@ -8,25 +8,37 @@ export function AdminPage() { @@ -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>

Loading…
Cancel
Save