feat(theme): barnyard redesign with rustic crypto aesthetic

- New color palette: barn red primary, cream backgrounds, hay gold - Added Abril Fatface display font for headlines - Wood grain texture backgrounds via CSS gradients - Barnyard personality in copy: 'Join the Flock', 'Enter the Coop' - Replaced hardcoded slate colors with theme variables - Updated landing, login, dashboard, onboarding, leaderboard
2026-04-21 14:14:48 -04:00
parent 185018a42e
commit 5db61212dc
8 changed files with 919 additions and 701 deletions
@@ -1,29 +1,37 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
-import { ProvidersWrapper } from '@/components/providers-wrapper';
-import { Toaster } from 'sonner';
+import type { Metadata } from "next";
+import { Abril_Fatface, Inter } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "sonner";
+import { ProvidersWrapper } from "@/components/providers-wrapper";

-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const abril = Abril_Fatface({
+	weight: "400",
+	subsets: ["latin"],
+	variable: "--font-abril",
+});

 export const metadata: Metadata = {
-  title: 'CoopCredits - Media Rewards',
-  description: 'Earn $COOP tokens for watching content on Plex',
+	title: "CoopCredits — Watch, Earn, Cluck",
+	description:
+		"Earn $COOP tokens for watching content on Plex. The Hoboken Chicken coop rewards its flock.",
 };

 export default function RootLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  return (
-    <html lang="en" className="dark">
-      <body className={`${inter.className} dark bg-slate-950 text-foreground`}>
-        <ProvidersWrapper>
-          {children}
-          <Toaster position="top-right" />
-        </ProvidersWrapper>
-      </body>
-    </html>
-  );
+	return (
+		<html lang="en" className="dark">
+			<body
+				className={`${inter.variable} ${abril.variable} font-sans dark bg-background text-foreground antialiased`}
+			>
+				<ProvidersWrapper>
+					{children}
+					<Toaster position="top-right" />
+				</ProvidersWrapper>
+			</body>
+		</html>
+	);
 }