feat: Reimplement the October counter application using Next.js, tRPC, and shadcn/ui, replacing the original static HTML/JS setup.

2026-02-04 15:56:36 -05:00 · 2026-02-03 19:40:14 -05:00
parent a32888cf14
commit 2fb4ffebf5
38 changed files with 2519 additions and 529 deletions
--- a/.github/.DS_Store
+++ b/.github/.DS_Store
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,58 @@
+# Deploy to GitHub Pages
+
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main", "master"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          static_site_generator: next
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build with Next.js
+        run: bun run build
+        env:
+          SKIP_ENV_VALIDATION: true
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,111 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+jspm_packages/
+
+# node modules
+node_modules
+node_modules/*
+
+# build output
+out
+out/*
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
--- a/1
+++ b/1
@@ -1 +0,0 @@
-october.today
--- a/README.md
+++ b/README.md
@@ -1,30 +1,63 @@
-# October.Today
+# october.today

-A simple website that displays the date as if October 2019 never ended.
+A simple, elegant counter showing how many days it's been since October 1, 2019.

-## About
+Built with Next.js, shadcn/ui, and the "Soft, Translucent, Alive" design philosophy.

-This website is based on a running joke between friends where we count the days as if we're still in October 2019. Instead of showing today's actual date, it displays it as "October Nth, 2019" where N is the number of days since October 1, 2019.
+## Features

-## How It Works
+- **Dynamic Counter**: Calculates and displays days since October 1, 2019
+- **Smooth Animations**: Number counting animation and interactive hover effects
+- **Share Functionality**: Share via SMS with a single click
+- **Modern Design**: Glassmorphism UI with "Living Blob" background animation
+- **Typography**: Editorial-style typography using Playfair Display and Inter
+- **Analytics**: Optional Umami tracking support

-The site uses JavaScript to:
-1. Calculate the number of days since October 1, 2019
-2. Display the result as "October [day count]" with the appropriate ordinal suffix (st, nd, rd, th)
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Run development server
+bun dev
+
+# Build for production
+bun run build
+# or
+npm run build
+
+# Type check
+bun typecheck
+```

 ## Deployment

-This site is meant to be deployed on GitHub Pages. To deploy:
+This project is configured for static export and deploys automatically to GitHub Pages via GitHub Actions.

-1. Push this repository to GitHub
-2. Go to repository Settings > Pages
-3. Select the main branch as the source
-4. The site will be published at https://[your-username].github.io/[repository-name]/
+### Setup

-## Local Development
+1. Enable GitHub Pages in repository settings (Source: GitHub Actions)
+2. (Optional) Add repository secrets for Umami analytics:
+   - `NEXT_PUBLIC_UMAMI_URL`
+   - `NEXT_PUBLIC_UMAMI_WEBSITE_ID`

-To run this site locally, simply open the `index.html` file in a web browser.
+## Tech Stack
+
+- **Framework**: Next.js 16 (App Router, Static Export)
+- **Styling**: Tailwind CSS v4, shadcn/ui
+- **Fonts**: Playfair Display (headings), Inter (body)
+- **Package Manager**: Bun
+- **Deployment**: GitHub Pages
+
+## Design Philosophy
+
+The design follows three core principles:
+
+- **Soft**: Deep border radii (1rem-1.5rem) for organic, friendly shapes
+- **Translucent**: Glassmorphism effects with backdrop blur
+- **Alive**: Continuous subtle animations that make the UI feel dynamic

 ## License

-This project is open source and available for anyone to use or modify. 
+MIT
--- a/api.js
+++ b/api.js
@@ -1,59 +0,0 @@
-/**
- * October Today API
- * Simple client-side API that returns the current October day count
- */
-
-// Calculate days since October 1, 2019
-function calculateOctoberDay() {
-    const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 is October
-    const today = new Date();
-    
-    // Calculate difference in days
-    const diffTime = Math.abs(today - startDate);
-    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-    
-    return diffDays;
-}
-
-// Set ordinal suffix (st, nd, rd, th)
-function getOrdinalSuffix(number) {
-    const j = number % 10;
-    const k = number % 100;
-    
-    if (j === 1 && k !== 11) {
-        return "st";
-    }
-    if (j === 2 && k !== 12) {
-        return "nd";
-    }
-    if (j === 3 && k !== 13) {
-        return "rd";
-    }
-    return "th";
-}
-
-// Handle requests for the API
-document.addEventListener('DOMContentLoaded', () => {
-    // Check if this is an API request from the URL
-    const urlParams = new URLSearchParams(window.location.search);
-    const isApiRequest = urlParams.get('api');
-    
-    if (isApiRequest === 'json') {
-        const octoberDay = calculateOctoberDay();
-        const suffix = getOrdinalSuffix(octoberDay);
-        
-        // Create the response object
-        const response = {
-            day: octoberDay,
-            ordinal: suffix,
-            formatted: `${octoberDay}${suffix}`,
-            text: `happy october ${octoberDay}${suffix}`
-        };
-        
-        // Display as JSON and prevent normal page rendering
-        document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`;
-        document.body.style.fontFamily = 'monospace';
-        document.body.style.padding = '20px';
-        document.body.style.backgroundColor = '#f5f5f5';
-    }
-}); 
--- a/bun.lock
+++ b/bun.lock
--- a/components.json
+++ b/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils",
+    "ui": "~/components/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  },
+  "registries": {}
+}
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,48 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import tseslint from "typescript-eslint";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+export default tseslint.config(
+  {
+    ignores: [".next"],
+  },
+  ...compat.extends("next/core-web-vitals"),
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    extends: [
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    rules: {
+      "@typescript-eslint/array-type": "off",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        { checksVoidReturn: { attributes: false } },
+      ],
+    },
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  },
+);
--- a/grid.svg
+++ b/grid.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <circle cx="10" cy="10" r="1" fill="currentColor"/>
-</svg> 
--- a/index.html
+++ b/index.html
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>October Today</title>
-    <link rel="stylesheet" href="style.css">
-    <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=Geist:wght@100..900&display=swap" rel="stylesheet">
-    <script defer src="https://stats.soconnor.dev/script.js" data-website-id="6c3731c6-5940-499a-a71f-2d362c861dfc"></script>
-</head>
-<body>
-    <div class="orb primary"></div>
-    <!-- <div class="orb secondary"></div> -->
-    <div class="container">
-        <h1>Today is</h1>
-        <div class="date">
-            <h2>October <span id="october-day">??</span><sup id="ordinal">th</sup></h2>
-            <p class="year">2019.</p>
-        </div>
-        <div class="buttons">
-            <button id="share-button" class="share-button">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M7 11l5-5 5 5"/>
-                    <path d="M12 6v13"/>
-                </svg>
-                Share via SMS
-            </button>
-            <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="why-button">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="10"/>
-                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
-                    <path d="M12 17h.01"/>
-                </svg>
-                Why?
-            </a>
-        </div>
-    </div>
-    <script src="script.js"></script>
-    <script src="api.js"></script>
-</body>
-</html> 
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,16 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+// import "./src/env.ts";
+
+import { type NextConfig } from "next";
+
+const config: NextConfig = {
+    output: "export",
+    images: {
+        unoptimized: true,
+    },
+};
+
+export default config;
--- a/package.json
+++ b/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "october.today",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "next build",
+    "check": "next lint && tsc --noEmit",
+    "dev": "next dev",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
+    "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "preview": "next build && next start",
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.12.0",
+    "@tanstack/react-query": "^5.69.0",
+    "@trpc/client": "^11.0.0",
+    "@trpc/react-query": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "^16.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "server-only": "^0.0.1",
+    "superjson": "^2.2.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@tailwindcss/postcss": "^4.0.15",
+    "@types/node": "^20.14.10",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "^15.2.3",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.15",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.27.0"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.40.0"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -0,0 +1,4 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/script.js
+++ b/script.js
@@ -1,84 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    // Set the start date - October 1, 2019
-    const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 = October
-    
-    // Get today's date
-    const today = new Date();
-    
-    // Calculate days difference
-    const diffTime = Math.abs(today - startDate);
-    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-    
-    // Add 1 because October 1 is the first day
-    const octoberDay = diffDays + 1;
-    
-    // Animate the counter
-    const octoberDayElement = document.getElementById('october-day');
-    const targetNumber = octoberDay;
-    
-    // Start from a lower number for animation
-    let currentNumber = Math.max(1, targetNumber - 50);
-    
-    // Set initial value
-    octoberDayElement.textContent = currentNumber;
-    
-    // Animate the number counting up
-    const counterAnimation = setInterval(() => {
-        currentNumber++;
-        octoberDayElement.textContent = currentNumber;
-        
-        if (currentNumber >= targetNumber) {
-            clearInterval(counterAnimation);
-            // Once animation is done, set the correct ordinal suffix
-            setOrdinalSuffix(targetNumber);
-        }
-    }, 30);
-    
-    // Set the correct ordinal suffix (st, nd, rd, th)
-    function setOrdinalSuffix(number) {
-        const ordinal = document.getElementById('ordinal');
-        
-        if (number % 100 >= 11 && number % 100 <= 13) {
-            // Special case for 11th, 12th, 13th
-            ordinal.textContent = 'th';
-        } else {
-            switch (number % 10) {
-                case 1:
-                    ordinal.textContent = 'st';
-                    break;
-                case 2:
-                    ordinal.textContent = 'nd';
-                    break;
-                case 3:
-                    ordinal.textContent = 'rd';
-                    break;
-                default:
-                    ordinal.textContent = 'th';
-            }
-        }
-        
-        // Set the page title to include the current October day
-        document.title = `October ${number}${ordinal.textContent}, 2019`;
-        
-        // Setup SMS share button
-        setupShareButton(number, ordinal.textContent);
-    }
-    
-    // Setup SMS share button
-    function setupShareButton(dayNumber, ordinalSuffix) {
-        const shareButton = document.getElementById('share-button');
-        
-        if (shareButton) {
-            shareButton.addEventListener('click', function() {
-                // Create the message: "happy october xxxxth"
-                const message = `happy october ${dayNumber}${ordinalSuffix}`;
-                
-                // Create SMS link with the message
-                const smsLink = `sms:?&body=${encodeURIComponent(message)}`;
-                
-                // Open the SMS app
-                window.open(smsLink, '_blank');
-            });
-        }
-    }
-}); 
--- a/src/.DS_Store
+++ b/src/.DS_Store
--- a/src/app/.DS_Store
+++ b/src/app/.DS_Store
--- a/src/app/_components/post.tsx
+++ b/src/app/_components/post.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from "react";
+
+import { api } from "~/trpc/react";
+
+export function LatestPost() {
+  const [latestPost] = api.post.getLatest.useSuspenseQuery();
+
+  const utils = api.useUtils();
+  const [name, setName] = useState("");
+  const createPost = api.post.create.useMutation({
+    onSuccess: async () => {
+      await utils.post.invalidate();
+      setName("");
+    },
+  });
+
+  return (
+    <div className="w-full max-w-xs">
+      {latestPost ? (
+        <p className="truncate">Your most recent post: {latestPost.name}</p>
+      ) : (
+        <p>You have no posts yet.</p>
+      )}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          createPost.mutate({ name });
+        }}
+        className="flex flex-col gap-2"
+      >
+        <input
+          type="text"
+          placeholder="Title"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full rounded-full bg-white/10 px-4 py-2 text-white"
+        />
+        <button
+          type="submit"
+          className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
+          disabled={createPost.isPending}
+        >
+          {createPost.isPending ? "Submitting..." : "Submit"}
+        </button>
+      </form>
+    </div>
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,43 @@
+import "~/styles/globals.css";
+
+import { type Metadata } from "next";
+import { Inter, Playfair_Display } from "next/font/google";
+
+export const metadata: Metadata = {
+  title: "October Today",
+  description: "October Today",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const playfair = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-heading",
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
+      <body>
+        <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
+          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+          <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
+        </div>
+        {children}
+        {process.env.NEXT_PUBLIC_UMAMI_URL && process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
+          <script
+            defer
+            src={process.env.NEXT_PUBLIC_UMAMI_URL}
+            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+          ></script>
+        )}
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,9 @@
+import OctoberCounter from "~/components/OctoberCounter";
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-4">
+      <OctoberCounter />
+    </main>
+  );
+}
--- a/src/components/OctoberCounter.tsx
+++ b/src/components/OctoberCounter.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+
+export default function OctoberCounter() {
+    const [day, setDay] = useState(0);
+    const [ordinal, setOrdinal] = useState("th");
+    const [isAnimating, setIsAnimating] = useState(true);
+
+    useEffect(() => {
+        // Set the start date - October 1, 2019
+        const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 = October
+        const today = new Date();
+
+        // Calculate days difference
+        const diffTime = Math.abs(today.getTime() - startDate.getTime());
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+        // Add 1 because October 1 is the first day
+        const octoberDay = diffDays + 1;
+
+        // Check for API request
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get("api") === "json") {
+            const response = {
+                day: octoberDay,
+                ordinal: getOrdinalSuffix(octoberDay),
+                formatted: `${octoberDay}${getOrdinalSuffix(octoberDay)}`,
+                text: `happy october ${octoberDay}${getOrdinalSuffix(octoberDay)}`,
+            };
+
+            // Replace entire document body to match legacy behavior exactly
+            document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`;
+            document.body.style.fontFamily = "monospace";
+            document.body.style.padding = "20px";
+            document.body.style.backgroundColor = "#f5f5f5";
+            document.body.style.color = "black";
+            return; // Stop animation loop setup
+        }
+
+        // Start animation
+        const targetNumber = octoberDay;
+        let currentNumber = Math.max(1, targetNumber - 50);
+
+        setDay(currentNumber);
+
+        const interval = setInterval(() => {
+            currentNumber++;
+            setDay(currentNumber);
+
+            if (currentNumber >= targetNumber) {
+                clearInterval(interval);
+                setIsAnimating(false);
+                // Set ordinal suffix
+                setOrdinal(getOrdinalSuffix(targetNumber));
+                // Update document title
+                document.title = `October ${targetNumber}${getOrdinalSuffix(targetNumber)}, 2019`;
+            }
+        }, 30);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const getOrdinalSuffix = (number: number) => {
+        if (number % 100 >= 11 && number % 100 <= 13) {
+            return "th";
+        }
+        switch (number % 10) {
+            case 1:
+                return "st";
+            case 2:
+                return "nd";
+            case 3:
+                return "rd";
+            default:
+                return "th";
+        }
+    };
+
+    const handleShare = () => {
+        const message = `happy october ${day}${ordinal}`;
+        const smsLink = `sms:?&body=${encodeURIComponent(message)}`;
+        window.open(smsLink, "_blank");
+    };
+
+    return (
+        <Card className="group relative z-10 mx-auto mb-8 w-full max-w-[600px] overflow-hidden rounded-3xl border-none bg-background/80 shadow-sm backdrop-blur-md transition-all duration-300 hover:-translate-y-[5px] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)]">
+            <div className="absolute inset-0 -z-10 bg-gradient-to-br from-transparent from-0% via-white/5 via-50% to-transparent to-100% opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
+            <CardContent className="p-8 sm:p-12 text-center">
+                <h1 className="mb-8 text-2xl font-medium tracking-tight sm:text-[2rem]">Today is</h1>
+
+                <div className="date my-8">
+                    <h2 className="mb-1 text-[2.5rem] tracking-tight sm:text-[3.5rem] leading-none">
+                        October{" "}
+                        <span className="relative inline-block font-bold text-primary">
+                            {day}
+                            <span className="absolute bottom-[-5px] left-0 h-[3px] w-full origin-left scale-x-0 bg-primary transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
+                        </span>
+                        <sup className="text-[0.6em]">{ordinal}</sup>
+                    </h2>
+                    <p className="year text-2xl tracking-tight text-muted-foreground sm:text-[1.5rem]">2019.</p>
+                </div>
+
+                <div className="buttons mt-6 flex flex-col justify-center gap-3 sm:flex-row sm:gap-2">
+                    <Button
+                        onClick={handleShare}
+                        className="rounded-xl gap-2 transition-all duration-200 hover:-translate-y-[2px] group/btn"
+                    >
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="transition-transform duration-200 group-hover/btn:-translate-y-[2px]"
+                        >
+                            <path d="M7 11l5-5 5 5" />
+                            <path d="M12 6v13" />
+                        </svg>
+                        Share via SMS
+                    </Button>
+
+                    <Button
+                        asChild
+                        className="rounded-xl gap-2 transition-all duration-200 hover:-translate-y-[2px] group/link cursor-pointer"
+                    >
+                        <Link
+                            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                            target="_blank"
+                        >
+                            <svg
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="transition-transform duration-200 group-hover/link:rotate-12"
+                            >
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                                <path d="M12 17h.01" />
+                            </svg>
+                            Why?
+                        </Link>
+                    </Button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/src/env.ts
+++ b/src/env.ts
@@ -0,0 +1,44 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    NODE_ENV: z.enum(["development", "test", "production"]),
+  },
+
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.string().optional(),
+    NEXT_PUBLIC_UMAMI_URL: z.string().url().optional(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
+    NEXT_PUBLIC_UMAMI_URL: process.env.NEXT_PUBLIC_UMAMI_URL,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+});
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -0,0 +1,23 @@
+import { postRouter } from "~/server/api/routers/post";
+import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
+
+/**
+ * This is the primary router for your server.
+ *
+ * All routers added in /api/routers should be manually added here.
+ */
+export const appRouter = createTRPCRouter({
+  post: postRouter,
+});
+
+// export type definition of API
+export type AppRouter = typeof appRouter;
+
+/**
+ * Create a server-side caller for the tRPC API.
+ * @example
+ * const trpc = createCaller(createContext);
+ * const res = await trpc.post.all();
+ *       ^? Post[]
+ */
+export const createCaller = createCallerFactory(appRouter);
--- a/src/server/api/routers/post.ts
+++ b/src/server/api/routers/post.ts
@@ -0,0 +1,40 @@
+import { z } from "zod";
+
+import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
+
+// Mocked DB
+interface Post {
+  id: number;
+  name: string;
+}
+const posts: Post[] = [
+  {
+    id: 1,
+    name: "Hello World",
+  },
+];
+
+export const postRouter = createTRPCRouter({
+  hello: publicProcedure
+    .input(z.object({ text: z.string() }))
+    .query(({ input }) => {
+      return {
+        greeting: `Hello ${input.text}`,
+      };
+    }),
+
+  create: publicProcedure
+    .input(z.object({ name: z.string().min(1) }))
+    .mutation(async ({ input }) => {
+      const post: Post = {
+        id: posts.length + 1,
+        name: input.name,
+      };
+      posts.push(post);
+      return post;
+    }),
+
+  getLatest: publicProcedure.query(() => {
+    return posts.at(-1) ?? null;
+  }),
+});
--- a/src/server/api/trpc.ts
+++ b/src/server/api/trpc.ts
@@ -0,0 +1,103 @@
+/**
+ * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
+ * 1. You want to modify request context (see Part 1).
+ * 2. You want to create a new middleware or type of procedure (see Part 3).
+ *
+ * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
+ * need to use are documented accordingly near the end.
+ */
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+import { ZodError } from "zod";
+
+/**
+ * 1. CONTEXT
+ *
+ * This section defines the "contexts" that are available in the backend API.
+ *
+ * These allow you to access things when processing a request, like the database, the session, etc.
+ *
+ * This helper generates the "internals" for a tRPC context. The API handler and RSC clients each
+ * wrap this and provides the required context.
+ *
+ * @see https://trpc.io/docs/server/context
+ */
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+  return {
+    ...opts,
+  };
+};
+
+/**
+ * 2. INITIALIZATION
+ *
+ * This is where the tRPC API is initialized, connecting the context and transformer. We also parse
+ * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
+ * errors on the backend.
+ */
+const t = initTRPC.context<typeof createTRPCContext>().create({
+  transformer: superjson,
+  errorFormatter({ shape, error }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError:
+          error.cause instanceof ZodError ? error.cause.flatten() : null,
+      },
+    };
+  },
+});
+
+/**
+ * Create a server-side caller.
+ *
+ * @see https://trpc.io/docs/server/server-side-calls
+ */
+export const createCallerFactory = t.createCallerFactory;
+
+/**
+ * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
+ *
+ * These are the pieces you use to build your tRPC API. You should import these a lot in the
+ * "/src/server/api/routers" directory.
+ */
+
+/**
+ * This is how you create new routers and sub-routers in your tRPC API.
+ *
+ * @see https://trpc.io/docs/router
+ */
+export const createTRPCRouter = t.router;
+
+/**
+ * Middleware for timing procedure execution and adding an artificial delay in development.
+ *
+ * You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
+ * network latency that would occur in production but not in local development.
+ */
+const timingMiddleware = t.middleware(async ({ next, path }) => {
+  const start = Date.now();
+
+  if (t._config.isDev) {
+    // artificial delay in dev
+    const waitMs = Math.floor(Math.random() * 400) + 100;
+    await new Promise((resolve) => setTimeout(resolve, waitMs));
+  }
+
+  const result = await next();
+
+  const end = Date.now();
+  console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
+
+  return result;
+});
+
+/**
+ * Public (unauthenticated) procedure
+ *
+ * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
+ * guarantee that a user querying is authorized, but you can still access user session data if they
+ * are logged in.
+ */
+export const publicProcedure = t.procedure.use(timingMiddleware);
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -0,0 +1,217 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: var(--font-heading), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  --animate-blob: blob 7s infinite;
+
+  @keyframes blob {
+    0% {
+      transform: translate(0px, 0px) scale(1);
+    }
+
+    33% {
+      transform: translate(30px, -50px) scale(1.1);
+    }
+
+    66% {
+      transform: translate(-20px, 20px) scale(0.9);
+    }
+
+    100% {
+      transform: translate(0px, 0px) scale(1);
+    }
+  }
+}
+
+/* Base styles */
+body {
+  background-size: 20px 20px;
+  background-position: center;
+}
+
+@theme inline {
+  --radius-xs: calc(var(--radius) - 8px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Font Family utilities */
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+}
+
+:root {
+  --radius: 1rem;
+  /* 16px base radius */
+
+  /* Light mode variables - Monochrome Zinc */
+  --background: hsl(0, 0%, 100%);
+  /* #FFFFFF */
+  --foreground: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --card: hsl(0, 0%, 100%);
+  /* #FFFFFF */
+  --card-foreground: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --popover: hsl(0, 0%, 100%);
+  /* #FFFFFF */
+  --popover-foreground: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --primary: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --primary-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --secondary: hsl(240, 4.8%, 95.9%);
+  /* #F4F4F5 (Zinc-100) used for secondary/muted approx */
+  --secondary-foreground: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --muted: hsl(240, 4.8%, 95.9%);
+  /* #F4F4F5 */
+  --muted-foreground: hsl(240, 3.8%, 46.1%);
+  /* #71717A */
+  --accent: hsl(240, 4.8%, 95.9%);
+  /* #F4F4F5 */
+  --accent-foreground: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --destructive: hsl(0, 84.2%, 60.2%);
+  /* #EF4444 */
+  --destructive-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --border: hsl(240, 5.9%, 90%);
+  /* #E4E4E7 */
+  --input: hsl(240, 5.9%, 90%);
+  /* #E4E4E7 */
+  --ring: hsl(240, 5.9%, 10%);
+  /* #18181B */
+
+  --chart-1: hsl(12, 76%, 61%);
+  --chart-2: hsl(173, 58%, 39%);
+  --chart-3: hsl(197, 37%, 24%);
+  --chart-4: hsl(43, 74%, 66%);
+  --chart-5: hsl(27, 87%, 67%);
+
+  --sidebar: hsl(0, 0%, 98%);
+  --sidebar-foreground: hsl(240, 5.3%, 26.1%);
+  --sidebar-primary: hsl(240, 5.9%, 10%);
+  --sidebar-primary-foreground: hsl(0, 0%, 98%);
+  --sidebar-accent: hsl(240, 4.8%, 95.9%);
+  --sidebar-accent-foreground: hsl(240, 5.9%, 10%);
+  --sidebar-border: hsl(220, 13%, 91%);
+  --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
+}
+
+.dark {
+  /* Dark mode overrides - Monochrome Zinc */
+  --background: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --card: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --card-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --popover: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --popover-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --primary: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --primary-foreground: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --secondary: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --secondary-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --muted: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --muted-foreground: hsl(240, 5%, 64.9%);
+  /* #A1A1AA */
+  --accent: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --accent-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --destructive: hsl(0, 62.8%, 30.6%);
+  /* #7F1D1D */
+  --destructive-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --border: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --input: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --ring: hsl(240, 4.9%, 83.9%);
+  /* #D4D4D8 */
+
+  --chart-1: hsl(220, 70%, 50%);
+  --chart-2: hsl(160, 60%, 45%);
+  --chart-3: hsl(30, 80%, 55%);
+  --chart-4: hsl(280, 65%, 60%);
+  --chart-5: hsl(340, 75%, 55%);
+
+  --sidebar: hsl(240, 5.9%, 10%);
+  --sidebar-foreground: hsl(240, 4.8%, 95.9%);
+  --sidebar-primary: hsl(224.3, 76.3%, 48%);
+  --sidebar-primary-foreground: hsl(0, 0%, 100%);
+  --sidebar-accent: hsl(240, 3.7%, 15.9%);
+  --sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
+  --sidebar-border: hsl(240, 3.7%, 15.9%);
+  --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-heading;
+  }
+}
--- a/src/styles/globals.css.bak
+++ b/src/styles/globals.css.bak
@@ -0,0 +1,74 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* Light mode variables */
+  --color-background: hsl(200, 30%, 97%);
+  --color-foreground: hsl(200, 50%, 20%);
+  --color-card: hsla(0, 0%, 100%, 0.5);
+  --color-card-foreground: hsl(200, 50%, 20%);
+  --color-primary: hsl(200, 85%, 45%);
+  --color-primary-foreground: hsl(0, 0%, 100%);
+  --color-secondary: hsl(37, 95%, 58%);
+  --color-secondary-foreground: hsl(200, 50%, 20%);
+  --color-muted: hsl(200, 30%, 96%);
+  --color-muted-foreground: hsl(200, 30%, 40%);
+  --color-accent: hsl(200, 85%, 45%);
+  --color-accent-foreground: hsl(0, 0%, 100%);
+  --color-border: hsla(200, 30%, 90%, 0.2);
+  --radius: 0.75rem;
+
+  --animate-gradient-move-1: gradient-move-1 30s ease-in-out infinite;
+
+  @keyframes gradient-move-1 {
+    0% {
+      transform: translate(-50%, -50%) scale(1) rotate(0deg);
+    }
+
+    25% {
+      transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
+    }
+
+    50% {
+      transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
+    }
+
+    75% {
+      transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
+    }
+
+    100% {
+      transform: translate(-50%, -50%) scale(1) rotate(360deg);
+    }
+  }
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: hsl(200, 30%, 8%);
+    --color-foreground: hsl(200, 20%, 96%);
+    --color-card: hsla(200, 25%, 15%, 0.4);
+    --color-card-foreground: hsl(200, 15%, 85%);
+    --color-primary: hsl(200, 70%, 40%);
+    --color-primary-foreground: hsl(0, 0%, 100%);
+    --color-secondary: hsl(37, 92%, 50%);
+    --color-secondary-foreground: hsl(200, 20%, 96%);
+    --color-muted: hsl(200, 30%, 20%);
+    --color-muted-foreground: hsl(200, 30%, 65%);
+    --color-accent: hsl(200, 70%, 40%);
+    --color-accent-foreground: hsl(0, 0%, 100%);
+    --color-border: hsla(200, 30%, 20%, 0.2);
+  }
+}
+
+/* Base styles */
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  background-image: url('/grid.svg');
+  background-size: 20px 20px;
+  background-position: center;
+}
--- a/src/trpc/query-client.ts
+++ b/src/trpc/query-client.ts
@@ -0,0 +1,25 @@
+import {
+  defaultShouldDehydrateQuery,
+  QueryClient,
+} from "@tanstack/react-query";
+import SuperJSON from "superjson";
+
+export const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 30 * 1000,
+      },
+      dehydrate: {
+        serializeData: SuperJSON.serialize,
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === "pending",
+      },
+      hydrate: {
+        deserializeData: SuperJSON.deserialize,
+      },
+    },
+  });
--- a/src/trpc/react.tsx
+++ b/src/trpc/react.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
+import { httpBatchStreamLink, loggerLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
+import { useState } from "react";
+import SuperJSON from "superjson";
+
+import { type AppRouter } from "~/server/api/root";
+import { createQueryClient } from "./query-client";
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return createQueryClient();
+  }
+  // Browser: use singleton pattern to keep the same query client
+  clientQueryClientSingleton ??= createQueryClient();
+
+  return clientQueryClientSingleton;
+};
+
+export const api = createTRPCReact<AppRouter>();
+
+/**
+ * Inference helper for inputs.
+ *
+ * @example type HelloInput = RouterInputs['example']['hello']
+ */
+export type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helper for outputs.
+ *
+ * @example type HelloOutput = RouterOutputs['example']['hello']
+ */
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === "development" ||
+            (op.direction === "down" && op.result instanceof Error),
+        }),
+        httpBatchStreamLink({
+          transformer: SuperJSON,
+          url: getBaseUrl() + "/api/trpc",
+          headers: () => {
+            const headers = new Headers();
+            headers.set("x-trpc-source", "nextjs-react");
+            return headers;
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <api.Provider client={trpcClient} queryClient={queryClient}>
+        {props.children}
+      </api.Provider>
+    </QueryClientProvider>
+  );
+}
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return window.location.origin;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}
--- a/src/trpc/server.ts
+++ b/src/trpc/server.ts
@@ -0,0 +1,30 @@
+import "server-only";
+
+import { createHydrationHelpers } from "@trpc/react-query/rsc";
+import { headers } from "next/headers";
+import { cache } from "react";
+
+import { createCaller, type AppRouter } from "~/server/api/root";
+import { createTRPCContext } from "~/server/api/trpc";
+import { createQueryClient } from "./query-client";
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a tRPC call from a React Server Component.
+ */
+const createContext = cache(async () => {
+  const heads = new Headers(await headers());
+  heads.set("x-trpc-source", "rsc");
+
+  return createTRPCContext({
+    headers: heads,
+  });
+});
+
+const getQueryClient = cache(createQueryClient);
+const caller = createCaller(createContext);
+
+export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
+  caller,
+  getQueryClient,
+);
--- a/style.css
+++ b/style.css
@@ -1,323 +0,0 @@
-:root {
-    /* Light mode variables */
-    --background: hsl(200, 30%, 97%);
-    --foreground: hsl(200, 50%, 20%);
-    --card: hsla(0, 0%, 100%, 0.5);
-    --card-foreground: hsl(200, 50%, 20%);
-    --primary: hsl(200, 85%, 45%);
-    --primary-foreground: hsl(0, 0%, 100%);
-    --secondary: hsl(37, 95%, 58%); /* Amber/orange color */
-    --secondary-foreground: hsl(200, 50%, 20%);
-    --muted: hsl(200, 30%, 96%);
-    --muted-foreground: hsl(200, 30%, 40%);
-    --accent: hsl(200, 85%, 45%);
-    --accent-foreground: hsl(0, 0%, 100%);
-    --border: hsla(200, 30%, 90%, 0.2);
-    --radius: 0.75rem;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(200, 30%, 8%);
-        --foreground: hsl(200, 20%, 96%);
-        --card: hsla(200, 25%, 15%, 0.4);
-        --card-foreground: hsl(200, 15%, 85%);
-        --primary: hsl(200, 70%, 40%);
-        --primary-foreground: hsl(0, 0%, 100%);
-        --secondary: hsl(37, 92%, 50%); /* Darker amber for dark mode */
-        --secondary-foreground: hsl(200, 20%, 96%);
-        --muted: hsl(200, 30%, 20%);
-        --muted-foreground: hsl(200, 30%, 65%);
-        --accent: hsl(200, 70%, 40%);
-        --accent-foreground: hsl(0, 0%, 100%);
-        --border: hsla(200, 30%, 20%, 0.2);
-    }
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    border-color: var(--border);
-    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-@keyframes gradient-move-1 {
-    0% {
-        transform: translate(-50%, -50%) scale(1) rotate(0deg);
-    }
-    25% {
-        transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
-    }
-    50% {
-        transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
-    }
-    75% {
-        transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
-    }
-    100% {
-        transform: translate(-50%, -50%) scale(1) rotate(360deg);
-    }
-}
-
-@keyframes gradient-move-2 {
-    0% {
-        transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
-    }
-    25% {
-        transform: translate(-50%, -50%) scale(1) rotate(-90deg);
-    }
-    50% {
-        transform: translate(-50%, -50%) scale(1.05) rotate(-180deg);
-    }
-    75% {
-        transform: translate(-50%, -50%) scale(1) rotate(-270deg);
-    }
-    100% {
-        transform: translate(-50%, -50%) scale(0.95) rotate(-360deg);
-    }
-}
-
-body {
-    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background-color: var(--background);
-    color: var(--foreground);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    padding: 20px;
-    position: relative;
-    overflow: hidden;
-    isolation: isolate;
-}
-
-/* Dot grid background */
-body {
-    background-image: url('grid.svg');
-    background-size: 20px 20px;
-    background-position: center;
-}
-
-/* Spinning orb gradient */
-.orb {
-    position: fixed;
-    width: 120vmax;
-    height: 120vmax;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
-    pointer-events: none;
-    z-index: -10;
-    will-change: transform;
-    filter: blur(40px);
-}
-
-.orb.primary {
-    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
-    opacity: 0.4;
-    animation: gradient-move-1 30s ease-in-out infinite;
-}
-
-.container {
-    background-color: var(--card);
-    color: var(--card-foreground);
-    padding: 50px;
-    border-radius: var(--radius);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    max-width: 600px;
-    width: 100%;
-    margin-bottom: 30px;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border: 1px solid var(--border);
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-    z-index: 10;
-}
-
-.container::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border-radius: inherit;
-    background: linear-gradient(
-        to bottom right,
-        transparent 0%,
-        rgba(255, 255, 255, 0.05) 50%,
-        transparent 100%
-    );
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.container:hover {
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
-    transform: translateY(-5px);
-}
-
-.container:hover::before {
-    opacity: 1;
-}
-
-h1 {
-    font-size: 2rem;
-    margin-bottom: 30px;
-    font-weight: 500;
-    color: var(--foreground);
-    letter-spacing: -0.02em;
-}
-
-.date {
-    margin: 30px 0;
-}
-
-h2 {
-    font-size: 3.5rem;
-    margin-bottom: 5px;
-    color: var(--foreground);
-    letter-spacing: -0.03em;
-}
-
-#october-day {
-    font-weight: 700;
-    color: var(--primary);
-    position: relative;
-    display: inline-block;
-}
-
-#october-day::after {
-    content: '';
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    background-color: var(--primary);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-}
-
-.container:hover #october-day::after {
-    transform: scaleX(1);
-}
-
-.year {
-    font-size: 1.5rem;
-    color: var(--muted-foreground);
-    letter-spacing: -0.02em;
-}
-
-.subtitle {
-    font-style: italic;
-    margin-top: 20px;
-    color: var(--muted-foreground);
-}
-
-footer {
-    color: var(--muted-foreground);
-    font-size: 0.9rem;
-    margin-top: 20px;
-    position: relative;
-    z-index: 10;
-}
-
-.buttons {
-    display: flex;
-    justify-content: center;
-    gap: 12px;
-    margin-top: 24px;
-}
-
-.share-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    border: none;
-    border-radius: var(--radius);
-    padding: 10px 16px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.share-button:hover {
-    opacity: 0.9;
-    transform: translateY(-2px);
-}
-
-.share-button:active {
-    transform: translateY(0);
-}
-
-.share-button svg {
-    transition: transform 0.2s ease;
-}
-
-.share-button:hover svg {
-    transform: translateY(-2px);
-}
-
-.why-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background-color: var(--secondary);
-    color: var(--secondary-foreground);
-    border: none;
-    border-radius: var(--radius);
-    padding: 10px 16px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-decoration: none;
-}
-
-.why-button:hover {
-    opacity: 0.9;
-    transform: translateY(-2px);
-}
-
-.why-button:active {
-    transform: translateY(0);
-}
-
-.why-button svg {
-    transition: transform 0.2s ease;
-}
-
-.why-button:hover svg {
-    transform: rotate(12deg);
-}
-
-@media (max-width: 600px) {
-    .container {
-        padding: 30px;
-    }
-    
-    h1 {
-        font-size: 1.5rem;
-    }
-    
-    h2 {
-        font-size: 2.5rem;
-    }
-    
-    .share-button, .why-button {
-        padding: 8px 12px;
-        font-size: 13px;
-    }
-    
-    .buttons {
-        flex-direction: column;
-        gap: 8px;
-    }
-} 
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,53 @@
+{
+  "compilerOptions": {
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "checkJs": true,
+    /* Bundled projects */
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2022"
+    ],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true,
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.js",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated"
+  ]
+}