From e7b17c26386afc24240640aea1e567f32cffd943 Mon Sep 17 00:00:00 2001 From: Elhamullah Hossaini Date: Thu, 20 Nov 2025 11:15:53 +0430 Subject: [PATCH 01/65] refactor: landing page for a better ui --- app/(marketing)/page.tsx | 375 ++++++++++++++---- app/globals.css | 58 +++ components/marketing/command-palette.tsx | 139 +++++++ components/marketing/split-editor.tsx | 111 ++++++ components/marketing/theme-toggle-landing.tsx | 23 ++ components/providers/theme-provider.tsx | 2 +- config/landing.ts | 88 ++++ 7 files changed, 718 insertions(+), 78 deletions(-) create mode 100644 components/marketing/command-palette.tsx create mode 100644 components/marketing/split-editor.tsx create mode 100644 components/marketing/theme-toggle-landing.tsx create mode 100644 config/landing.ts diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index 092c9d1..2446060 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -1,89 +1,310 @@ -import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ThemeToggle } from "@/components/ui"; +import { + ArrowRight, + Code2, + Github, +} from "@/components/icons"; +import { CommandPalette } from "@/components/marketing/command-palette"; +import { SplitEditor } from "@/components/marketing/split-editor"; +import { ThemeToggleLanding } from "@/components/marketing/theme-toggle-landing"; +import { Button } from "@/components/ui"; +import { landingConfig } from "@/config/landing"; import { siteConfig } from "@/config/site"; import Link from "next/link"; -import { Code2, Sparkles } from "@/components/icons"; export const revalidate = 21600; export default function Home() { return ( -
- {/* Background gradients */} -
-
-
- -
-
-
- -
-
- {siteConfig.name} - Pre-alpha + <> + + +
+
- -
- -
-
- - - Built for the community - -

- Open-source practice platform for{" "} - - interviews - - , contests, and teams. -

-

{siteConfig.description}

-
- - + +
+
+
+
+ + {landingConfig.hero.badge} +
+ +

+ {landingConfig.hero.headline.line1} +
+ {landingConfig.hero.headline.line2} +
+ + {landingConfig.hero.headline.line3} + +

+ +

+ {landingConfig.hero.description} +

+ +
+ + +
+ +
+ {landingConfig.stats.map((stat) => ( +
+
+ {stat.value} +
+
{stat.label}
+
+ ))} +
+
+ +
+
+ +
+
+
+ +
+
+
+
+ [01] WHY OPENSOLVE +
+

+ {landingConfig.features.title} +

+
+
+

+ {landingConfig.features.subtitle} +

+
+
+ +
+ {landingConfig.features.items.map((feature) => ( +
+
+
+
+ [{feature.num}] +
+

{feature.title}

+

+ {feature.description} +

+
+
+ ))} +
+
+ +
+
+
+ [02] THE STACK +
+

+ {landingConfig.techStack.title} +

+
+ +
+ {landingConfig.techStack.technologies.map((tech) => ( +
+
+ {tech} +
+ ))} +
+ +
+

+ {landingConfig.techStack.footer} +

+
+
+ +
+
+
+
+ +
+
+ [03] GET STARTED +
+

+ {landingConfig.cta.title} +

+

+ {landingConfig.cta.subtitle} +

+ +
+ + +
+ +
+ {landingConfig.cta.benefits.map((benefit) => ( +
+ {benefit.icon} + {benefit.label} +
+ ))} +
+
+
+
+
+ +
+
+
+
+
+
+ +
+ {siteConfig.name} +
+

+ Open-source algorithmic practice platform +

+
+ +
+
PLATFORM
+ +
+ +
+
RESOURCES
+ +
+ +
+
LEGAL
+ +
+
+ +
+ © {new Date().getFullYear()} {siteConfig.name} · Built by developers, for developers +
-
- -
- - - Self-host ready - - -

Next.js + PostgreSQL + Prisma foundation with strict TypeScript.

-

Docker-first workflow and seeds prepared for future automation.

- - - - - Extensible core - - -

React Query providers, UI primitives, and modular layouts pre-wired.

-

Plug in judging services, auth strategies, and AI helpers incrementally.

- - -
-
-
+ +
+ ); } diff --git a/app/globals.css b/app/globals.css index 9041701..b2b7af3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -303,6 +303,60 @@ } } + @keyframes gradient { + 0% { + background: radial-gradient( + circle at 30% 20%, + rgba(59, 130, 246, 0.15) 0%, + transparent 50% + ), + radial-gradient( + circle at 70% 60%, + rgba(147, 51, 234, 0.12) 0%, + transparent 50% + ), + radial-gradient( + circle at 50% 100%, + rgba(6, 182, 212, 0.1) 0%, + transparent 50% + ); + } + 50% { + background: radial-gradient( + circle at 70% 30%, + rgba(59, 130, 246, 0.12) 0%, + transparent 50% + ), + radial-gradient( + circle at 30% 70%, + rgba(147, 51, 234, 0.15) 0%, + transparent 50% + ), + radial-gradient( + circle at 50% 0%, + rgba(6, 182, 212, 0.1) 0%, + transparent 50% + ); + } + 100% { + background: radial-gradient( + circle at 30% 20%, + rgba(59, 130, 246, 0.15) 0%, + transparent 50% + ), + radial-gradient( + circle at 70% 60%, + rgba(147, 51, 234, 0.12) 0%, + transparent 50% + ), + radial-gradient( + circle at 50% 100%, + rgba(6, 182, 212, 0.1) 0%, + transparent 50% + ); + } + } + .animate-fade-in { animation: fade-in 180ms cubic-bezier(0.16, 1, 0.3, 1); } @@ -356,6 +410,10 @@ animation: glint 3s linear infinite; } + .animate-gradient { + animation: gradient 15s ease infinite; + } + .glass-effect { background: hsl(var(--card) / 0.6); backdrop-filter: blur(12px); diff --git a/components/marketing/command-palette.tsx b/components/marketing/command-palette.tsx new file mode 100644 index 0000000..6a9fbe1 --- /dev/null +++ b/components/marketing/command-palette.tsx @@ -0,0 +1,139 @@ +"use client"; + +import { ArrowRight, Search } from "@/components/icons"; +import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; + +const commands = [ + { id: "problems", label: "Browse Problems", href: "/problems", shortcut: "P" }, + { id: "contests", label: "View Contests", href: "/contests", shortcut: "C" }, + { id: "signup", label: "Sign Up", href: "/sign-up", shortcut: "S" }, + { id: "signin", label: "Sign In", href: "/sign-in", shortcut: "I" }, + { id: "docs", label: "Documentation", href: "https://docs.opensolve.dev", shortcut: "D" }, + { id: "github", label: "View on GitHub", href: "https://github.com/ElhamDevelopmentStudio/open-solve", shortcut: "G" }, +]; + +export const CommandPalette = () => { + const [open, setOpen] = useState(false); + const [search, setSearch] = useState(""); + const [selected, setSelected] = useState(0); + const router = useRouter(); + + const filteredCommands = commands.filter((cmd) => + cmd.label.toLowerCase().includes(search.toLowerCase()) + ); + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && e.key === "k") { + e.preventDefault(); + setOpen((prev) => !prev); + } + + if (!open) return; + + if (e.key === "Escape") { + setOpen(false); + setSearch(""); + setSelected(0); + } + + if (e.key === "ArrowDown") { + e.preventDefault(); + setSelected((prev) => (prev + 1) % filteredCommands.length); + } + + if (e.key === "ArrowUp") { + e.preventDefault(); + setSelected((prev) => (prev - 1 + filteredCommands.length) % filteredCommands.length); + } + + if (e.key === "Enter" && filteredCommands[selected]) { + e.preventDefault(); + const cmd = filteredCommands[selected]; + if (cmd.href.startsWith("http")) { + window.open(cmd.href, "_blank"); + } else { + router.push(cmd.href); + } + setOpen(false); + setSearch(""); + setSelected(0); + } + }; + + window.addEventListener("keydown", handleKeyDown); + return () => window.removeEventListener("keydown", handleKeyDown); + }, [open, filteredCommands, selected, router]); + + if (!open) return null; + + return ( + <> +
setOpen(false)} + /> +
+
+
+ + setSearch(e.target.value)} + placeholder="Type a command or search..." + className="flex-1 bg-transparent font-mono text-sm text-foreground placeholder-muted-foreground outline-none" + autoFocus + /> + + ESC + +
+ +
+ {filteredCommands.length === 0 ? ( +
+ No results found +
+ ) : ( + filteredCommands.map((cmd, idx) => ( + + )) + )} +
+ +
+ Navigate with ↑↓ · Select with Enter · Close with ESC +
+
+
+ + ); +}; diff --git a/components/marketing/split-editor.tsx b/components/marketing/split-editor.tsx new file mode 100644 index 0000000..d8da847 --- /dev/null +++ b/components/marketing/split-editor.tsx @@ -0,0 +1,111 @@ +"use client"; + +import { useState } from "react"; +import { Play, CheckCircle2, XCircle } from "@/components/icons"; + +const problemCode = `// Two Sum +// Given an array of integers, return indices of +// the two numbers that add up to target. + +function twoSum(nums, target) { + const map = new Map(); + + for (let i = 0; i < nums.length; i++) { + const complement = target - nums[i]; + + if (map.has(complement)) { + return [map.get(complement), i]; + } + + map.set(nums[i], i); + } + + return []; +}`; + +const testCases = [ + { input: "[2,7,11,15], target = 9", output: "[0,1]", passed: true }, + { input: "[3,2,4], target = 6", output: "[1,2]", passed: true }, + { input: "[3,3], target = 6", output: "[0,1]", passed: true }, +]; + +export const SplitEditor = () => { + const [running, setRunning] = useState(false); + const [showResults, setShowResults] = useState(false); + + const handleRun = () => { + setRunning(true); + setTimeout(() => { + setRunning(false); + setShowResults(true); + }, 1500); + }; + + return ( +
+
+
+

PROBLEM

+ Two Sum +
+ 
+          {problemCode}
+
+
+ +
+
+

RESULTS

+ +
+ + {showResults ? ( +
+ {testCases.map((test, idx) => ( +
+
+ {test.passed ? ( + + ) : ( + + )} + Test Case {idx + 1} +
+
+
Input: {test.input}
+
Output: {test.output}
+
+
+ ))} +
+ ✓ All tests passed · 3/3 · 12ms +
+
+ ) : ( +
+ Click "Run Tests" to execute +
+ )} +
+
+ ); +}; diff --git a/components/marketing/theme-toggle-landing.tsx b/components/marketing/theme-toggle-landing.tsx new file mode 100644 index 0000000..299f7d0 --- /dev/null +++ b/components/marketing/theme-toggle-landing.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { Moon, Sun } from "@/components/icons"; +import { useTheme } from "next-themes"; + +export const ThemeToggleLanding = () => { + const { theme, setTheme, resolvedTheme } = useTheme(); + + const currentTheme = theme === "system" ? resolvedTheme : theme; + + return ( + + ); +}; + diff --git a/components/providers/theme-provider.tsx b/components/providers/theme-provider.tsx index 4901ee1..6168d10 100644 --- a/components/providers/theme-provider.tsx +++ b/components/providers/theme-provider.tsx @@ -1,7 +1,7 @@ "use client"; -import { ThemeProvider as NextThemesProvider } from "next-themes"; import type { ThemeProviderProps } from "next-themes"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return ( diff --git a/config/landing.ts b/config/landing.ts new file mode 100644 index 0000000..63fe408 --- /dev/null +++ b/config/landing.ts @@ -0,0 +1,88 @@ +export const landingConfig = { + hero: { + badge: "ALPHA v0.1.0", + headline: { + line1: "CODE", + line2: "COMPETE", + line3: "CONQUER", + }, + description: + "Open-source algorithmic practice platform. 2000+ problems. Real-time judge. ICPC-style contests. No BS.", + }, + stats: [ + { value: "50K+", label: "DEVELOPERS" }, + { value: "1M+", label: "SUBMISSIONS" }, + { value: "99.9%", label: "UPTIME" }, + ], + features: { + title: "NOT ANOTHER LEETCODE CLONE", + subtitle: + "We're building the platform we wish existed. Open source. Self-hosted. Built by competitive programmers, for competitive programmers. No tracking. No paywalls. No compromises.", + items: [ + { + num: "01", + title: "REAL-TIME JUDGE", + description: + "Docker-isolated execution. Stream results as they happen. Support for 10+ languages.", + }, + { + num: "02", + title: "ICPC CONTESTS", + description: + "Live leaderboards. Freeze mechanics. Virtual participation. The real deal.", + }, + { + num: "03", + title: "OPEN SOURCE", + description: + "MIT licensed. Fork it. Deploy it. Own your data. PostgreSQL + Docker.", + }, + { + num: "04", + title: "COMMUNITY", + description: + "Discussions. Solution trails. Editorial content. Learn from the best.", + }, + { + num: "05", + title: "ANALYTICS", + description: + "Track progress. Identify weak spots. Visualize growth. Get better.", + }, + { + num: "06", + title: "NO BULLSHIT", + description: + "No ads. No tracking. No premium tiers. Just pure algorithmic practice.", + }, + ], + }, + techStack: { + title: "BUILT WITH MODERN TECH", + technologies: [ + "Next.js", + "TypeScript", + "PostgreSQL", + "Prisma", + "tRPC", + "Docker", + "RabbitMQ", + "Redis", + ], + footer: + "Self-host in 5 minutes. Deploy to AWS, GCP, Azure, or your own hardware. Full control. No vendor lock-in.", + }, + cta: { + title: "READY TO LEVEL UP?", + subtitle: + "Join 50,000+ developers grinding on OpenSolve. Free. Open source. Forever.", + benefits: [ + { label: "NO CREDIT CARD", icon: "✓" }, + { label: "FREE FOREVER", icon: "✓" }, + { label: "MIT LICENSE", icon: "✓" }, + ], + }, +}; + +export type LandingConfig = typeof landingConfig; + From 2ffbeea5e30c82930d9f2ac32be05e95aa93b738 Mon Sep 17 00:00:00 2001 From: Elhamullah Hossaini Date: Thu, 20 Nov 2025 12:04:32 +0430 Subject: [PATCH 02/65] feat: added new design system --- AGENTS.md | 1937 ++++++++++++++++++++++++------- app/globals.css | 266 +++-- components/ui/accordion.tsx | 4 +- components/ui/alert-dialog.tsx | 12 +- components/ui/alert.tsx | 16 +- components/ui/avatar.tsx | 4 +- components/ui/badge.tsx | 5 +- components/ui/breadcrumb.tsx | 6 +- components/ui/button-group.tsx | 8 +- components/ui/button.tsx | 16 +- components/ui/card.tsx | 10 +- components/ui/checkbox.tsx | 2 +- components/ui/command.tsx | 16 +- components/ui/dialog.tsx | 14 +- components/ui/drawer.tsx | 22 +- components/ui/dropdown-menu.tsx | 16 +- components/ui/empty.tsx | 15 +- components/ui/field.tsx | 24 +- components/ui/form.tsx | 6 +- components/ui/hover-card.tsx | 2 +- components/ui/input.tsx | 4 +- components/ui/kbd.tsx | 4 +- components/ui/label.tsx | 2 +- components/ui/pagination.tsx | 8 +- components/ui/popover.tsx | 2 +- components/ui/progress.tsx | 2 +- components/ui/radio-group.tsx | 4 +- components/ui/scroll-area.tsx | 4 +- components/ui/select.tsx | 8 +- components/ui/sheet.tsx | 22 +- components/ui/sidebar.tsx | 44 +- components/ui/skeleton.tsx | 2 +- components/ui/slider.tsx | 4 +- components/ui/sonner.tsx | 4 +- components/ui/switch.tsx | 4 +- components/ui/table.tsx | 14 +- components/ui/tabs.tsx | 8 +- components/ui/textarea.tsx | 2 +- components/ui/toggle-group.tsx | 4 +- components/ui/toggle.tsx | 4 +- components/ui/tooltip.tsx | 5 +- 41 files changed, 1893 insertions(+), 663 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 5e43e35..3323962 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,4 +1,4 @@ -✅ OPEN SOLVE — MASTER REDESIGN & IMPLEMENTATION PROMPT +✅ OPENSOLVE — DESIGN SYSTEM & IMPLEMENTATION GUIDE You are the **principal product/UI engineer for OpenSolve**, an open-source LeetCode alternative. @@ -8,7 +8,7 @@ Your job is to **completely redesign** the given page(s) and all of their nested - **Tailwind CSS** - **Customized shadcn/ui components** - **TanStack Table** -- **hugeicons-react** for all icons (see Section 4.4) +- **hugeicons-react** for all icons This is NOT a tweak or refinement. This is a **full visual + UX rebuild** while keeping the existing data structures, hooks, and behavior intact. @@ -33,523 +33,1622 @@ coding, problems, submissions, contests, leaderboards, discussions, admin toolin --- -## 1. Goal: Complete Redesign (Not Modification) +## 1. OPENSOLVE DESIGN LANGUAGE (CRITICAL - READ CAREFULLY) -**Do NOT**: +### 1.1 Core Aesthetic: "Brutalist Terminal" -- Do not preserve or slightly improve the current layout. -- Do not keep the same structure and just reskin. -- Do not keep “placeholder” structures from the old UI. +OpenSolve uses a **brutalist, terminal-inspired design** that feels like a professional developer tool, not a generic SaaS product. -**Instead**: +**Key Principles:** +- **NO rounded corners** - Use `rounded-none` everywhere (borders, buttons, cards, inputs) +- **Sharp, clean borders** - Always `border-2` for emphasis, `border` for subtle dividers +- **Monospace typography** - Use `font-mono` for ALL text (headings, body, labels, buttons) +- **Numbered sections** - Use bracket notation: `[01]`, `[02]`, `[03]` for major sections +- **Minimalist, functional** - No decoration for decoration's sake +- **Magazine-style layouts** - Asymmetric grids, bold typography, clear hierarchy -- **Replace the entire page UI and all nested components** with a new, intentional, premium OpenSolve design. -- Create a layout and visual hierarchy that looks handcrafted and product-grade—**not** like a generic AI/Tailwind template. +### 1.2 Color System: Subtle Warmth with Semantic Tokens -The new UI must make people think: +**NEVER use hard-coded colors.** Always use semantic tokens for theme support. -> “There’s no way AI built this. This looks like a serious, professionally designed product.” +**Primary Colors:** +```tsx +// Use these semantic tokens: +bg-background // Page background +text-foreground // Primary text +text-muted-foreground // Secondary text +bg-primary // Primary actions/accents +text-primary // Primary colored text +bg-accent // Subtle highlights +border-border // All borders +``` + +**Subtle Gradients (Use Sparingly):** +```tsx +// Headlines and emphasis: +bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent + +// Primary accents: +bg-linear-to-r from-primary via-primary to-primary/70 bg-clip-text text-transparent + +// Subtle backgrounds: +bg-linear-to-br from-primary/5 via-background to-background + +// Hover effects: +bg-linear-to-br from-primary/10 to-transparent +``` + +**Shadows (Subtle with Primary Tint):** +```tsx +shadow-primary/5 // Very subtle +shadow-primary/10 // Subtle +shadow-primary/20 // Medium +shadow-primary/30 // Emphasized +``` + +### 1.3 Typography System + +**ALL text uses monospace fonts:** + +```tsx +// Massive headlines (Hero sections) +className="font-mono text-6xl sm:text-7xl lg:text-8xl font-black leading-[1.05] tracking-tighter" + +// Section headlines +className="font-mono text-4xl sm:text-5xl lg:text-6xl font-black leading-tight tracking-tight" + +// Subsection headlines +className="font-mono text-xl font-bold" + +// Body text +className="font-mono text-base leading-relaxed" + +// Small text / labels +className="font-mono text-sm" + +// Micro text / metadata +className="font-mono text-xs text-muted-foreground" + +// Section markers +className="font-mono text-xs font-bold text-primary/80" +``` + +**NO rounded weights.** Use only: `font-normal`, `font-medium`, `font-bold`, `font-black`. + +### 1.4 Spacing System + +Use **8px** base unit: +- `gap-4` (16px), `gap-6` (24px), `gap-8` (32px), `gap-12` (48px) +- `p-4`, `p-6`, `p-8`, `p-12` for padding +- `py-24`, `py-32` for section spacing + +### 1.5 Component Patterns + +**Buttons:** +```tsx +// Primary CTA + + +// Secondary + +``` + +**Cards/Panels:** +```tsx +// NO rounded corners, sharp borders +
+ {/* content */} +
+ +// With hover effect +
+
+
+ {/* content */} +
+
+``` + +**Section Headers:** +```tsx +
+ [01] SECTION NAME +
+

+ SECTION HEADLINE +

+``` + +**Stats Display:** +```tsx +
+
+ 50K+ +
+
DEVELOPERS
+
+``` + +**Grid Layouts with Borders:** +```tsx +// Creates pixel-perfect grid with divider lines +
+
Item 1
+
Item 2
+
Item 3
+
+``` --- -## 2. Global Layout & Information Architecture (Enforce These Patterns) +## 2. Layout Patterns -OpenSolve uses a **unified app shell**: +### 2.1 Navigation -- **Left Sidebar** → main navigation (Problems, Submissions, Contests, Discussions, Trails, Profile, Admin, etc.) -- **Topbar** → page context and actions +**Top Navigation (Landing/Marketing Pages):** +```tsx + +``` + +**Left Sidebar (App Pages):** +- Use existing `app-shell.tsx` pattern +- Slim, clean, icon + label +- Support collapse on mobile -For any **authenticated/internal page** you redesign: +### 2.2 Hero Sections -1. **Sidebar (persistent)** - - Implement a clean, slim left sidebar for primary navigation. - - Include: - - Product logo/name - - Main nav items (Problems, Contests, Submissions, Leaderboard, Discussions, Trails) - - Admin/Staff area (only if roles permit) - - Use **icon + label** patterns (icons from `hugeicons-react`). - - Support collapse/minify on smaller screens (`md:` up). +```tsx +
+
+ {/* Badge */} +
+ + ALPHA v0.1.0 +
+ + {/* Massive headline */} +

+ CODE +
+ COMPETE +
+ + CONQUER + +

+ + {/* Description */} +

+ Description text here +

+ + {/* CTAs */} +
+ {/* Primary and secondary buttons */} +
+
+ +
+ {/* Feature component */} +
+
+``` -2. **Topbar (always present above content)** - Use the top bar to convey: - - Page **title** and **subtitle** or short context. - - **Breadcrumbs** (e.g., Problems → Two Sum → Submissions). - - Primary **page-level actions**: “New Contest”, “Create Problem”, “Edit”, “Upsolve”, etc. - - User identity: avatar + small dropdown. - - Optional environment/light indicators (e.g., `Dev`, `Staging` badge), if reasonable. +### 2.3 Content Sections -3. **Content Area** - - Below the topbar, design a **clear main content layout**: - - For simple detail pages: single column + side rail. - - For complex pages (problem solving, contest dashboards): **split panes**, sticky headers, and clear sections. +```tsx +
+ {/* Section header */} +
+
+
+ [01] WHY OPENSOLVE +
+

+ NOT ANOTHER +
+ LEETCODE CLONE +

+
+
+

+ Description text +

+
+
+ + {/* Content grid */} +
+ {/* Grid items */} +
+
+``` -4. **Responsiveness** - - On small screens: - - Sidebar collapses into a top menu or overlay. - - Topbar remains, but simplified. - - Content stacks vertically, no horizontal scroll. +--- -Use these patterns **consistently** across all redesigns unless a page is explicitly public/standalone (e.g., landing page, auth screens). +## 3. Interactive Components + +### 3.1 Command Palette (⌘K) + +**MUST IMPLEMENT** for all pages. Users expect this. + +```tsx +// components/marketing/command-palette.tsx or similar +// - Opens with ⌘K / Ctrl+K +// - Arrow key navigation +// - Enter to select +// - ESC to close +// - Sharp borders, no rounded corners +// - Uses semantic colors +``` + +### 3.2 Split Pane Editor/Viewer + +For problem pages, submission views, etc: + +```tsx +
+
+ {/* Left pane */} +
+
+ {/* Right pane */} +
+
+``` + +### 3.3 Theme Toggle + +**ALWAYS include theme toggle** - design works in both light and dark modes. + +```tsx + +``` --- -## 3. Visual Direction & Design System +## 4. Data Configuration Pattern + +**All page content MUST be configurable.** Never hard-code copy in components. + +Create config files like `config/landing.ts`: + +```typescript +export const landingConfig = { + hero: { + badge: "ALPHA v0.1.0", + headline: { + line1: "CODE", + line2: "COMPETE", + line3: "CONQUER", + }, + description: "Open-source algorithmic practice platform...", + }, + stats: [ + { value: "50K+", label: "DEVELOPERS" }, + { value: "1M+", label: "SUBMISSIONS" }, + // ... + ], + features: { + items: [ + { num: "01", title: "...", description: "..." }, + // ... + ], + }, + // ... +}; + +export type LandingConfig = typeof landingConfig; +``` + +Then import and use: + +```tsx +import { landingConfig } from "@/config/landing"; + +

{landingConfig.hero.headline.line1}

+``` + +This allows users who fork the project to easily customize content without touching components. -### 3.1 Color System — Modern Bright SaaS (Blue Primary) +--- -Use a **Modern Bright SaaS** style: +## 5. Icon System — hugeicons-react ONLY -- **Primary**: Blue (mid-saturated, not neon, not dull). - Think something in the range of Tailwind `blue-500` / `blue-600` for primary actions, with lighter tints for backgrounds/badges. -- **Neutrals**: A refined gray scale (e.g., slate/stone) for backgrounds, borders, and typography. -- **Accents** (used sparingly): - - Green for success (AC, RESOLVED, ACTIVE) - - Amber/orange for warnings (RETRYING, OFFSET, PENDING, FREEZE) - - Red/pink for errors/critical (FAILED, REJECTED, SEV1/SEV2) - - Purple or cyan for “special” or “featured” states (editorials, Trails, badges) +**NEVER use lucide-react.** OpenSolve uses `hugeicons-react` exclusively. -Support **both light and dark mode**: +```tsx +import { + Code2, + Github, + ArrowRight, + Play, + CheckCircle2, + // ... etc +} from "@/components/icons"; + +// Or directly: +import { Code2Icon } from "hugeicons-react"; +``` -- Use Tailwind `dark:` variants and/or CSS variables. -- Avoid hard-coded colors like `#000`, `#fff`; instead rely on semantic tokens and classes (e.g. `bg-background`, `text-foreground`, `border-border` if using shadcn theme). +**Icon sizing:** +- Small: `className="h-4 w-4"` +- Medium: `className="h-5 w-5"` +- Large: `className="h-6 w-6"` -### 3.2 Typography +**If you don't know an icon name:** +1. Search the web for "hugeicons-react icon list" +2. Find the most semantic match +3. Import from `@/components/icons` (check `components/icons.ts` for aliases) -- Use a clean, modern sans-serif. -- Establish a clear hierarchy: - - Page title: `text-2xl` / `text-3xl`, `font-semibold` - - Section headings: `text-lg` / `text-xl`, `font-semibold` - - Body: `text-sm` / `text/base`, comfortable line-height - - Meta text: `text-xs` / `text-[13px]`, muted -- Use consistent letter spacing and alignment. No random mix of weights. +--- -### 3.3 Spacing & Layout Rhythm +## 6. States & Domain-Specific Handling -- Use an **8-point spacing system**: 4, 8, 12, 16, 20, 24, etc. -- Prefer Tailwind spacing tokens (`p-4`, `px-6`, `gap-4`, `gap-6`) over arbitrary pixels. -- Use `max-w-*` and `mx-auto` for constrained layouts where it makes sense (e.g. auth pages, simple forms). +### 6.1 Generic UX States -### 3.4 Surfaces & Depth +**ALWAYS design for:** -- Cards and panels should be: - - Subtly rounded (`rounded-xl`, `rounded-2xl` for primary surfaces). - - Light shadows (`shadow-sm`, `shadow-md`), not heavy, with subtle contrast between layers. -- Use separators and soft borders (`border-border`) to structure dense information (tables, timelines, details). +- **Loading** → Use skeleton components, not spinners +```tsx +
+``` + +- **Empty** → Clear message + primary action +```tsx +
+
+ No problems found +
+ +
+``` + +- **Error** → Show message, optional retry +```tsx +
+ {error.message} +
+``` + +### 6.2 Domain States (Badges) + +Map enums to visual tokens: + +```tsx +// Verdict badges +SUCCEEDED → AC +FAILED → WA +RUNNING → RUNNING + +// Problem state +PUBLISHED → PUBLISHED +DRAFT → DRAFT +REVIEW → REVIEW + +// Contest state +RUNNING → LIVE +UPCOMING → UPCOMING +FINISHED → ENDED +``` + +**Badge component:** +```tsx + + STATUS + +``` --- -## 4. Components, Icons & Libraries (OpenSolve Constraints) +## 7. Forms & Modals -### 4.1 Tech Stack +### 7.1 Forms -- **Next.js + TypeScript** -- **Tailwind CSS** -- **shadcn/ui components (customized)** -- **TanStack Query (React Query) over tRPC** -- **TanStack Table** for data tables -- **hugeicons-react** for all icons (see below) +**Complex forms → Multi-step:** +- Progress indicator with steps +- `[01] → [02] → [03]` numbering +- Clear section breaks +- Previous/Next navigation -Do NOT introduce: +**Form inputs:** +```tsx +
+ + +

Helper text

+
+``` -- New UI libraries (no MUI, Chakra, DaisyUI, etc.). -- New motion libraries (no Framer Motion, no GSAP). -- Heavy CSS frameworks beyond Tailwind. +### 7.2 Modals -### 4.2 shadcn/ui +**Use shadcn Dialog, customize:** +```tsx + + + + + MODAL TITLE + + + {/* Content */} + + +``` -- Use shadcn components as your base: `Button`, `Card`, `Tabs`, `Dialog`, `DropdownMenu`, `Badge`, `Tooltip`, `Skeleton`, `Alert`, `Toast`, `Form`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, `Tabs`, `ScrollArea`, etc. -- **Customize them** to match the OpenSolve design system, instead of using vanilla shadcn styles: - - Adjust radii, colors, typography via classNames/tokens. - - Ensure consistency across all redesigned pages. +### 7.3 Toasts -### 4.3 Data Tables — Use TanStack Table +Use shadcn toast, customize: +```tsx +toast({ + title: "Success", + description: "Problem created successfully", + className: "rounded-none border-2 border-success bg-success/5 font-mono", +}); +``` -For any list-heavy / admin / analytics page: +--- -- Use the **existing TanStack Table abstraction** (e.g. a `DataTable` component already in the codebase). -- Do NOT hand-roll random HTML tables when a proper data table is needed. -- Enhance table UX with: - - Sticky headers - - Row hover states - - Clear sorting indicators - - Optional column visibility toggles - - Search & filters integrated into a table toolbar - - Pagination controls that feel native to the design +## 8. Tables (TanStack Table) -### 4.4 Icon System — Migrate to `hugeicons-react` (No `lucide-react`) +For lists of problems, submissions, users, etc: -OpenSolve is moving from `lucide-react` to **`hugeicons-react`**. -You must: +```tsx + + + {/* Filters */} +
+ } +/> +``` -1. **Never import from `lucide-react`.** - - Remove all existing lucide imports. - - Do not introduce new ones. - - Replace every lucide icon with a `hugeicons-react` icon. +**Table styling:** +- Header: `bg-muted font-mono text-xs font-bold uppercase` +- Rows: `border-b border-border hover:bg-accent` +- Cells: `px-4 py-3 font-mono text-sm` -2. **Use `hugeicons-react` for every icon**: - - Navigation icons (sidebar, topbar) - - Action icons (buttons, fab, menus) - - Status icons (success, error, warning, info) - - Domain icons (problems, contests, submissions, discussions, leaderboard, admin, incidents, settings, feature flags, judge, queues, etc.) +--- -3. **If you don’t know which `hugeicons-react` icon to use or how to import it**, you MUST: - - Perform an internet search to look up: - - The `hugeicons-react` package, - - Its icon list and naming conventions, - - The appropriate icon component name and import syntax. - - Then choose the most semantically appropriate icon (e.g. problem→code/algorithm icon, contests→trophy/flag, submissions→checklist or code-run icon, incidents→alert, etc.). +## 9. Motion & Transitions -4. **Consistency**: - - Use a consistent size (e.g. `className="h-4 w-4"` or `h-5 w-5`) for icons in a given context. - - Use consistent stroke/fill style (outlined vs filled) for icons in the same UI area. - - Use Tailwind utility classes to align icons (`inline-flex`, `items-center`, `gap-2`). +**NO external animation libraries.** Use CSS only. -Example (illustrative, not exact): +**Allowed transitions:** +```tsx +className="transition-colors duration-200" +className="transition-all duration-300" +className="transition-opacity duration-150" +``` +**Hover effects:** ```tsx -import { CodeCircle01Icon, Trophy01Icon } from "hugeicons-react"; +// Subtle background +hover:bg-accent - +// Border emphasis +hover:border-primary/50 + +// Color shift +hover:text-primary + +// Combined +className="transition-all hover:border-primary/50 hover:bg-accent hover:text-primary" ``` -Apply this migration & usage pattern consistently in all redesigned components. ----------- +**Group hover patterns:** +```tsx +
+
+ {/* Appears on hover */} +
+
+``` -## 5. States & Domain-Specific Status Handling +--- -You must **explicitly handle all relevant states** for the page you are redesigning. That includes both generic UX states and OpenSolve’s domain states. +## 10. Responsive Design -### 5.1 Generic UX States (Always Design For) +**Mobile-first approach:** -For every major section (lists, details, forms, editor, panels): +```tsx +// Base (mobile) +className="text-sm" -- **Loading state** → skeletons, shimmer, skeleton rows/cards. - -- **Empty state** → friendly, domain-aware copy and a clear primary action (e.g. “Create your first contest”, “No submissions yet — try solving a problem”). - -- **Error state** → clear message, optional “show technical details” toggle, retry button. - -- **Partial/Degraded state** → e.g. when the judge is down but the editor still works. - -- **Permission/Role gate** → e.g. curated tools visible only to `PROBLEM_CURATOR`/`ADMIN`. - -- **Offline/Network issues** (if appropriate) → subtle banner about connectivity. - +// sm: 640px+ +className="text-sm sm:text-base" -### 5.2 OpenSolve Domain States (Map To Visual Tokens) +// md: 768px+ +className="text-sm sm:text-base md:text-lg" -Map important enums to **badges, chips, or color-coded text**. You don’t need to hard-code every case in JSX in this prompt, but your design must assume and support them. +// lg: 1024px+ +className="text-sm sm:text-base md:text-lg lg:text-xl" -Examples: +// xl: 1280px+ +className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl" +``` -- `UserStatus`: `ACTIVE`, `BANNED`, `SHADOW_BANNED` - -- `UserRole`: `USER`, `PROBLEM_CURATOR`, `ADMIN`, `MODERATOR` - -- `ProblemState`: `DRAFT`, `REVIEW`, `PUBLISHED`, `ARCHIVED` - -- `ProblemVisibility`: `PUBLIC`, `UNLISTED`, `INTERNAL` - -- `ProblemJudgeMode`: `AUTO`, `MANUAL`, `HYBRID` - -- `TestCaseKind`: `SAMPLE`, `HIDDEN` - -- `SubmissionStatus`: `QUEUED`, `RUNNING`, `SUCCEEDED`, `FAILED`, `RETRYING`, `MANUAL_PENDING` - -- `ContestState`: `UPCOMING`, `RUNNING`, `FINISHED`, `ARCHIVED` - -- `ContestVisibility`: `PUBLIC`, `PRIVATE` - -- `ContestType`: `COMPETITIVE`, `EDUCATIONAL`, `PRIVATE`, `CUSTOM` - -- `DiscussionState`: `VISIBLE`, `HIDDEN`, `REMOVED` - -- `IncidentStatus`: `OPEN`, `INVESTIGATING`, `MITIGATED`, `MONITORING`, `RESOLVED` - -- `IncidentSeverity`: `SEV1`, `SEV2`, `SEV3` - +**Grid breakpoints:** +```tsx +className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" +``` -General mapping guidelines: +**Container widths:** +```tsx +className="mx-auto max-w-screen-2xl px-6 lg:px-12" +``` -- **Positive or terminal-good** (e.g. `SUCCEEDED`, `PUBLISHED`, `ACTIVE`, `RESOLVED`) → green/blue badges. - -- **Warning/liminal** (e.g. `REVIEW`, `RETRYING`, `UPCOMING`, `MANUAL_PENDING`, `MITIGATING`) → amber/yellow badges. - -- **Danger/bad** (e.g. `FAILED`, `REJECTED`, `BANNED`, `SEV1`) → red badges. - -- **Internal/system-only** or muted states (e.g. `INTERNAL`, `ARCHIVED`, `SHADOW_BANNED`) → gray/muted badges. - +--- -Always ensure state is conveyed via **color + text + shape** (for accessibility). +## 11. Light & Dark Mode Support ----------- +**CRITICAL:** All designs MUST work in both modes. -## 6. Page Types & UX Patterns (Use When Relevant) +**Test both:** +- Light mode: Clean, professional, readable +- Dark mode: Not too harsh, comfortable for long sessions -When the page you’re given is one of these, follow these patterns: +**Use semantic tokens:** +- `bg-background` / `text-foreground` +- `bg-card` / `text-card-foreground` +- `bg-primary` / `text-primary-foreground` +- `border-border` -- **Problem Library / Reader** - - - Left column: filters (difficulty, tags, companies, status). - - - Main: responsive grid or list of problems, status chips, acceptance rate, difficulty badges. - - - Strong search & filter UX, with sticky controls on larger screens. - -- **Problem Details + Editor** - - - **Split layout**: statement pane and code editor pane. - - - Statement: tabs for description, constraints, examples, editorial (if unlocked). - - - Editor: language switcher, boilerplate, run vs submit, status strip with verdict and runtime. - - - Persist drafts per problem + language. - -- **Submissions & History** - - - Use **TanStack Table** with sortable columns (problem, verdict, time, language, runtime, memory). - - - Filters for verdict, language, date range, contest vs practice. - - - Row click → submission detail pane/page with code + case breakdown. - -- **Contests (builder, dashboard, standings)** - - - Contest builder → **multi-step form** (metadata → schedule → settings → problems → review). - - - Standings → table with rank, handle, solves, penalty, with freeze state handled visually. - - - Clear contest state (UPCOMING/RUNNING/FINISHED), countdown timers, registration state. - -- **Discussions & Trails** - - - Thread layout with clear indentation, reply counts, voting buttons, spoiler handling. - - - Trail insights as structured cards with categories and upvotes, maybe a graph or relationship hints. - -- **Admin Panel** - - - Use a **denser layout**, but still breathable. - - - Overview metrics at top (incidents open, queue depth, recent failures). - - - Tabs for Users, Problems, Submissions, Contests, Discussions, Incidents, Feature Flags, System Settings. - - - Remember: **Admin can do everything**. Show powerful tools but with clear warnings and safeguards. - +**Never:** +- `bg-white` / `bg-black` +- `text-gray-900` / `text-gray-100` +- Hard-coded hex colors -Apply what’s relevant to the specific page you are redesigning. +--- ----------- +## 12. Implementation Rules -## 7. Forms, Modals, and Feedback +### 12.1 Code Quality -### 7.1 Forms +- **TypeScript strict mode** - No `any`, proper types +- **No unnecessary comments** - Code should be self-documenting +- **DRY principle** - Extract reusable components +- **Consistent naming** - `handle*` for event handlers -If the page includes a non-trivial form (contest builder, problem editor, settings, etc.): +### 12.2 File Organization -- For long/complex forms → convert into a **multi-step flow** with: - - - Progress indicator - - - Clear section grouping - - - “Next” / “Back” actions - -- Use shadcn `Form` with proper label, description, and error text. - -- Show inline validation and top-level error summary when needed. - -- Mobile-friendly: no cramped inputs, adequate tap targets. - +``` +components/ + marketing/ # Landing page components + command-palette.tsx + split-editor.tsx + problems/ # Problem-specific components + contests/ # Contest-specific components + ui/ # shadcn base components + +config/ + landing.ts # Landing page content + navigation.ts # Nav structure + +lib/ + utils.ts # Utilities +``` -### 7.2 Modals (Preferred) vs Drawers +### 12.3 Imports -- Prefer **modals (Dialogs)** over drawers/sheets. - -- Use shadcn `Dialog` for: - - - Confirmation flows - - - Quick create/edit forms - - - Dangerous actions (delete problem, ban user, rejudge contest, etc.) - -- Only use drawers/sheets if absolutely necessary for mobile or workflows that must remain anchored. - +**Always use aliases:** +```tsx +import { Button } from "@/components/ui/button"; +import { siteConfig } from "@/config/site"; +import { Code2 } from "@/components/icons"; +``` -### 7.3 Toasts / Feedback System +**Order:** +1. React/Next +2. External libraries +3. Components (`@/components`) +4. Utilities (`@/lib`) +5. Config (`@/config`) +6. Types -Every redesigned page must integrate the existing or new **toast system** using shadcn (or compatible pattern): +--- -- Types: - - - success - - - error/failure - - - warning - - - info - -- Toasts must: - - - Be accessible (ARIA labels, understandable message). - - - Be responsive (sane max-width on mobile). - - - Have distinct but subtle styling per variant. - +## 13. Response Structure -Provide **example toast usages** in your response for key flows (e.g., save success, validation error, network failure). +When redesigning a page, structure your response: ----------- +1. **Brief UX Plan** (4-6 bullets) + - Key layout decisions + - Major interactions + - How it fits OpenSolve style -## 8. Motion, Micro-Interactions & Performance +2. **Main Page Component** + - Full TSX with imports + - Use config for data + - Semantic color tokens -- **No external animation libraries** (no Framer Motion, no heavy animation packages). - -- Use **lightweight CSS transitions** and Tailwind utilities only: - - - `transition-all`, `transition-colors`, `transition-opacity` - - - `duration-150` to `duration-300` - - - `ease-out`, `ease-in-out` - -- Add reusable animation utilities in `globals.css` (or equivalent), e.g.: - - - `.fade-in-soft` - - - `.slide-up-soft` - - - `.scale-on-hover` - -- Apply them sparingly: - - - Hover effects on cards/buttons - - - Subtle entry animations for modals or dropdowns - - - Soft highlight when data updates (optional) - +3. **Nested Components** + - Any new components needed + - Clear, focused responsibility -Do NOT over-animate. Prioritize **clarity and snappiness**. +4. **Config File** (if applicable) + - Extract all content/copy + - Type-safe ----------- +5. **Notes** + - Any deviations from standard patterns + - Integration points -## 9. Implementation Rules (Very Important) +--- -When you respond: +## 14. OpenSolve Design Checklist + +Before finalizing ANY design, verify: + +- [ ] Uses `font-mono` for all text +- [ ] Uses `rounded-none` (no rounded corners) +- [ ] Uses semantic color tokens (no hard-coded colors) +- [ ] Has numbered sections with `[01]`, `[02]`, etc. +- [ ] Includes theme toggle +- [ ] Works in both light and dark mode +- [ ] Uses `border-2` for emphasis borders +- [ ] Uses subtle gradients (not garish) +- [ ] Has command palette (if app page) +- [ ] Content is configurable (not hard-coded) +- [ ] Uses `hugeicons-react` (never `lucide-react`) +- [ ] Handles loading, empty, error states +- [ ] Mobile responsive +- [ ] No external animation libraries +- [ ] TypeScript strict, no `any` +- [ ] Matches brutalist terminal aesthetic -1. **Do NOT add unnecessary comments** in the code. - - - Only minimal structural comments where absolutely helpful (e.g., `// Main content`, `// Filters`). - - - No conversational or explanatory comments inside the TSX. - -2. **Do NOT change data contracts**: - - - Keep props, hooks, and API calls consistent with the existing page unless explicitly required. - - - You’re redesigning the UI, not redefining backend contracts. - -3. **TypeScript discipline**: - - - Avoid `any`. - - - Type component props properly. - -4. **Lint & Build Discipline**: - - - Assume you will run: - - - `npm run lint` +--- + +## 15. Example: Full Page Structure + +```tsx +import { Code2, ArrowRight } from "@/components/icons"; +import { CommandPalette } from "@/components/marketing/command-palette"; +import { ThemeToggle } from "@/components/marketing/theme-toggle"; +import { Button } from "@/components/ui/button"; +import { pageConfig } from "@/config/page"; +import Link from "next/link"; + +export default function Page() { + return ( + <> + + +
+ + +
+ {/* Hero */} +
+
+ + {pageConfig.badge} +
- - `npm run build` +

+ {pageConfig.headline} +

- - Your code must be valid, type-safe, and buildable. - - - If you introduce patterns that would cause type/lint errors, fix them before finalizing your answer. - -5. **Support dark & light mode** in all new styles: - - - Use Tailwind `dark:` variants consistently. - - - Ensure contrast ratios are readable. - -6. **Icons**: - - - Never use `lucide-react`. - - - Always use `hugeicons-react`, and if unsure, look up the correct icon and import syntax via internet search. - + {/* Rest of hero */} +
+ + {/* Content sections */} +
+
+ [01] SECTION +
+ {/* Section content */} +
+
+ +
+ {/* Footer */} +
+
+ + ); +} +``` ----------- +--- -## 10. Response Structure & Deliverables +## FINAL REMINDER -When you answer, always structure your response like this: +OpenSolve's design is: +- **Brutalist** (sharp, functional, no decoration) +- **Terminal-inspired** (monospace, clean, developer-focused) +- **Subtly refined** (gentle gradients, semantic colors, warm undertones) +- **Highly configurable** (content in config files) +- **Theme-aware** (perfect light & dark modes) +- **Unique** (doesn't look like other platforms) -1. **High-Level UX & Visual Plan (short)** - - - 4–8 bullet points explaining the new layout and design decisions. - -2. **Updated Page Component(s)** - - - Full **TSX/JSX** for the redesigned page. - - - Include imports. - - - Assume Next.js + TypeScript. - -3. **Nested Components** - - - TSX for all **new or redesigned nested components** used by this page (e.g. toolbars, filters, summary cards, side panels, modals). - - - Keep them in realistic locations (`components/...` etc.), but you don’t need to show file paths—just clear component definitions. - -4. **Styling / Theme Adjustments** - - - Any Tailwind or `globals.css` additions (reusable animation utilities, color tokens, etc.). - - - Any shadcn theme overrides if needed (can be shown as code snippets). - -5. **Toasts & State Handling Examples** - - - Brief code snippet showing how to trigger success/error/warning/info toasts on this page. - - - Show sample handling for loading, empty, and error states in the main UI. - -6. **Short Notes for Future Pages** - - - 3–5 bullets explaining how this design ties back into the global OpenSolve system so future pages can follow the same patterns. - +When someone sees an OpenSolve page, they should immediately think: +> "This is a serious developer tool built by developers who care about craft." ----------- +NOT: +> "Another generic SaaS landing page." -## 11. Core Reminder +Now apply these principles to the page you're redesigning. -- The current UI is **just a temporary testing version**. - -- You are here to create a **premium, modern, bespoke** interface that feels: - - - intentional - - - cohesive across all OpenSolve surfaces - - - tuned for serious power users (competitive programmers, problem setters, contest organizers, admins) - -- Avoid anything that looks like a copy-paste Tailwind template, a generic AI dashboard, or a portfolio starter. - +--- + +## 16. Complete Color System Reference + +### 16.1 Semantic Color Variables + +**ALWAYS use these semantic tokens.** They adapt automatically for light/dark mode. + +Our color system in `globals.css` uses HSL values that automatically switch between themes: + +**Light Mode Values:** +```css +--background: 220 26% 97% /* Soft off-white with blue tint */ +--foreground: 227 25% 10% /* Deep charcoal */ +--primary: 226 78% 58% /* Vibrant blue with warmth */ +--muted-foreground: 224 18% 48% /* Muted gray-blue */ +--border: 214 28% 86% /* Light border */ +--accent: 182 65% 88% /* Cyan accent for highlights */ +``` + +**Dark Mode Values:** +```css +--background: 232 32% 6% /* Rich dark blue-black */ +--foreground: 220 27% 96% /* Soft white */ +--primary: 226 100% 77% /* Bright blue (more vivid) */ +--muted-foreground: 227 18% 72% /* Light muted text */ +--border: 230 21% 22% /* Dark border */ +--accent: 189 42% 22% /* Dark cyan accent */ +``` + +### 16.2 Using Colors in Components + +**Primary Text & Backgrounds:** +```tsx +className="bg-background text-foreground" // Page defaults +className="bg-card text-card-foreground" // Card containers +className="text-muted-foreground" // Secondary text +className="border-border" // All borders +``` + +**Primary Color Accents:** +```tsx +className="bg-primary text-primary-foreground" // Primary buttons +className="text-primary" // Primary text color +className="border-primary" // Primary borders +className="shadow-primary/20" // Subtle primary shadows +``` + +**Opacity Modifiers for Depth:** +```tsx +// Background overlays +className="bg-primary/5" // Very subtle wash +className="bg-primary/10" // Subtle background +className="bg-primary/20" // Noticeable tint +className="bg-primary/50" // Semi-transparent + +// Border emphasis +className="border-primary/30" // Subtle +className="border-primary/50" // Medium +className="border-primary/70" // Strong + +// Text de-emphasis +className="text-primary/80" // Slightly muted +``` + +**State Colors:** +```tsx +// Success (green) +className="bg-success text-success-foreground" +className="bg-success/10 text-success border-success/30" + +// Warning (amber) +className="bg-warning text-warning-foreground" +className="bg-warning/10 text-warning border-warning/30" + +// Error (red) +className="bg-destructive text-destructive-foreground" +className="bg-destructive/10 text-destructive border-destructive/30" + +// Info (blue) +className="bg-info text-info-foreground" +className="bg-info/10 text-info border-info/30" +``` ----------- +### 16.3 Gradient System + +**Text Gradients (Headlines):** +```tsx +// Standard foreground gradient (most headlines) +className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent" + +// Primary accent gradient (emphasized text) +className="bg-linear-to-r from-primary via-primary to-primary/70 bg-clip-text text-transparent" + +// Multi-color gradient (hero emphasis) +className="bg-linear-to-r from-primary to-primary/70 bg-clip-text text-transparent" +``` + +**Background Gradients (Subtle):** +```tsx +// Hover effects (very subtle) +className="bg-linear-to-br from-primary/5 to-transparent" + +// Section backgrounds +className="bg-linear-to-br from-primary/5 via-background to-background" + +// Logo/icon backgrounds +className="bg-linear-to-br from-primary/20 to-primary/5" +``` + +**Shadow System:** +```tsx +// Buttons and CTAs +className="shadow-sm shadow-primary/20" // Subtle +className="shadow-lg shadow-primary/20" // Medium +className="shadow-xl shadow-primary/30" // Strong +className="shadow-2xl shadow-primary/10" // Large, soft + +// On hover +className="hover:shadow-md hover:shadow-primary/30" +``` + +--- + +## 17. Typography Scale & Hierarchy + +### 17.1 Complete Typography System + +**ALL text uses `font-mono` (JetBrains Mono / Menlo / monospace)** + +**Display/Hero Headlines:** +```tsx +// Absolute largest (landing hero) +className="font-mono text-6xl sm:text-7xl lg:text-8xl font-black leading-[1.05] tracking-tighter" + +// Large hero +className="font-mono text-5xl sm:text-6xl lg:text-7xl font-black leading-tight tracking-tight" +``` + +**Section Headlines:** +```tsx +// Main section headers +className="font-mono text-4xl sm:text-5xl lg:text-6xl font-black leading-tight tracking-tight" + +// Subsection headers +className="font-mono text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight" + +// Card/panel titles +className="font-mono text-xl font-bold" +``` + +**Body & Content:** +```tsx +// Primary body text +className="font-mono text-base leading-relaxed" + +// Large body (descriptions) +className="font-mono text-lg leading-relaxed" + +// Standard body +className="font-mono text-sm leading-normal" + +// Small text (captions, labels) +className="font-mono text-xs" +``` + +**Special Elements:** +```tsx +// Section markers/labels +className="font-mono text-xs font-bold text-primary/80 uppercase" + +// Keyboard shortcuts +⌘K + +// Stats/metrics +className="font-mono text-3xl font-bold" + +// Code/technical text +className="font-mono text-sm" +``` + +### 17.2 Text Color Hierarchy + +```tsx +// Primary text +className="text-foreground" + +// Secondary text +className="text-muted-foreground" + +// Tertiary/de-emphasized +className="text-muted-foreground/70" + +// Primary color text (accents, CTAs) +className="text-primary" + +// Muted primary (labels) +className="text-primary/80" +``` + +--- + +## 18. Spacing & Layout System + +### 18.1 Standard Spacing Scale + +Based on **8px** increments: + +```tsx +// Micro spacing +gap-1 // 4px +gap-2 // 8px +gap-3 // 12px +gap-4 // 16px + +// Standard spacing +gap-6 // 24px +gap-8 // 32px +gap-12 // 48px +gap-16 // 64px + +// Large spacing +gap-24 // 96px +gap-32 // 128px +``` + +### 18.2 Section Padding + +```tsx +// Section vertical spacing +className="py-24 lg:py-32" // Standard sections +className="py-16 lg:py-24" // Compact sections +className="py-32 lg:py-40" // Large sections + +// Container horizontal padding +className="px-6 lg:px-12" // Standard page padding +className="p-8" // Card/panel padding +className="p-6" // Compact card padding +className="p-4" // Tight padding +``` + +### 18.3 Grid Systems + +**Content Grids:** +```tsx +// Standard 2-col responsive +className="grid gap-6 sm:grid-cols-2" + +// 3-col responsive +className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3" + +// Feature grids with borders (no gap, using border) +className="grid gap-px bg-border/30 sm:grid-cols-2 lg:grid-cols-3" +``` + +**Hero Layouts:** +```tsx +// Asymmetric hero (60/40 split) +className="grid gap-12 lg:grid-cols-12 lg:gap-16" +// Then: +
Content
+
Visual
+``` + +--- + +## 19. Interactive States & Transitions + +### 19.1 Standard Transitions + +**NEVER use animation libraries.** Only CSS transitions. + +```tsx +// Color transitions (hover, focus) +className="transition-colors duration-200" + +// All-property transitions +className="transition-all duration-300" + +// Opacity fades +className="transition-opacity duration-150" + +// Transform transitions +className="transition-transform duration-200" +``` + +### 19.2 Hover States + +**Buttons:** +```tsx +// Primary button hover +className="hover:shadow-md hover:shadow-primary/30" + +// Outline button hover +className="hover:border-primary/50 hover:bg-accent" + +// Ghost button hover +className="hover:bg-accent hover:text-primary" +``` + +**Cards/Panels:** +```tsx +// Subtle hover +className="transition-all hover:bg-accent" + +// Border emphasis +className="transition-all hover:border-primary/50" + +// Combined (cards) +className="group transition-all hover:border-primary/50 hover:bg-accent" +``` + +**Links:** +```tsx +// Text links +className="text-muted-foreground transition-colors hover:text-primary" + +// Nav links +className="font-mono text-sm text-muted-foreground transition-colors hover:text-primary" +``` + +### 19.3 Group Hover Patterns + +```tsx +
+ {/* Gradient appears on hover */} +
+ + {/* Content with z-index */} +
+ {/* ... */} +
+
+``` + +--- + +## 20. Component Library Reference + +### 20.1 Button Variants + +```tsx +// Primary CTA + + +// Secondary/Outline + + +// Ghost + + +// Icon button + +``` + +### 20.2 Badge/Status Indicators + +```tsx +// Standard badge + + NEW + + +// State-specific badges + + ACCEPTED + + + + PENDING + + + + FAILED + +``` + +### 20.3 Input Fields + +```tsx +// Standard input + + +// Textarea +