# The Official Landing Page for the Yuuki Project **Showcase the model. Embed the demo. Tell the story.**
**A dark, cyberpunk-minimal site built with Next.js and sakura pink.**

[![License](https://img.shields.io/badge/MIT-222222?style=flat-square&logo=opensourceinitiative&logoColor=white)](LICENSE) [![Next.js](https://img.shields.io/badge/Next.js_16-222222?style=flat-square&logo=nextdotjs&logoColor=white)](https://nextjs.org/) [![React](https://img.shields.io/badge/React_19-222222?style=flat-square&logo=react&logoColor=white)](https://react.dev/) [![Tailwind](https://img.shields.io/badge/Tailwind_v4-222222?style=flat-square&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/) [![TypeScript](https://img.shields.io/badge/TypeScript-222222?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Vercel](https://img.shields.io/badge/Vercel-222222?style=flat-square&logo=vercel&logoColor=white)](https://vercel.com/)
---

**8 handcrafted sections.**

Hero with animated terminal prompt.
Model stats and evaluation data.
Full ecosystem showcase.
Embedded Gradio demo.
Evaluation benchmarks.
Creator profile and origin story.
GitHub Sponsors integration.
Responsive footer with full link map.

**One page. Zero backend.**

Static site, no database, no API keys.
Dark theme with sakura pink (#f472b6) accents.
Monospace terminal aesthetic.
Built for the Yuuki ecosystem.

Deployed on Vercel in one click.

---

## What is Yuuki-Web?

**Yuuki-Web** is the official landing page for the [Yuuki project](https://huggingface.co/OpceanAI) -- a code-generation model trained entirely on a smartphone with zero budget. The site serves as the public face of the project: introducing the model, showcasing the ecosystem tools (YUY CLI and YUY-Chat), embedding a live interactive demo, presenting evaluation data, and providing a way for people to support the project financially. The site is built with **Next.js 16**, **Tailwind CSS v4**, and **TypeScript**. It uses a dark cyberpunk-minimal design language with sakura pink accents inspired by the Japanese name Yuuki (courage/bravery). The entire site is static -- no backend, no database, no environment variables required.
---

## Features

Hero Section

Full-viewport hero with animated typing effect in a terminal-style code block. Headline communicates the core message: an AI model trained on a phone with $0 budget. CTA buttons link to the live demo and GitHub.

Model Overview

Technical card grid displaying key model specifications: architecture (GPT-2, 124M params), training hardware (Snapdragon 685), dataset composition (multilingual code), training progress (5.3%), and model size (988 MB). All stats presented in a clean bento-grid layout.

Ecosystem Showcase

Side-by-side feature cards for the two companion tools -- YUY (CLI for downloading and running models) and YUY-Chat (TUI chat interface). Each card includes description, key features, tech stack badges, and terminal code examples showing real commands.

Live Demo

Embedded HuggingFace Space via iframe with a macOS-style window chrome (traffic light dots, URL bar, external link). Loads the Gradio-powered Yuuki-best model directly in the browser. No setup required.

Evaluation & Stats

Data-driven section showing benchmark scores across programming languages (Agda 55/100, C 20/100, Assembly 15/100, Python 8/100). Includes training metrics: loss curves, steps completed, and checkpoint comparisons between 1400 and 2000.

Creator Profile

About section for agua_omg with custom avatar, personal bio, social links (GitHub, Twitter/X, Discord, HuggingFace), and quick-stat cards (4+ projects, Rust, Redmi 12, $0 budget). Includes the full origin story of the name "Yuuki" -- from Japanese kanji to Girls' Last Tour.

Sponsor Section

Embedded GitHub Sponsors card via iframe alongside CTA buttons for sponsoring and starring repos. Clean messaging about supporting a zero-budget solo project.

Footer

Four-column footer with organized link sections: Ecosystem (model, demo, training code), Tools (YUY, YUY-Chat, HuggingFace), Community (GitHub org, Twitter, sponsor link), and the project tagline.

---

## Design System

### Color Palette | Token | Value | Usage | |:------|:------|:------| | `--background` | `#050505` | Page background | | `--foreground` | `#fafafa` | Primary text | | `--card` | `#0e0e0e` | Card surfaces | | `--muted-foreground` | `#737373` | Secondary text | | `--border` | `#1f1f1f` | Borders and dividers | | `--sakura` | `#f472b6` | Primary accent (pink) | | `--sakura-dim` | `rgba(244,114,182,0.15)` | Subtle pink backgrounds | | `--sakura-border` | `rgba(244,114,182,0.25)` | Pink-tinted borders |
### Typography | Role | Font | Weight | |:-----|:-----|:-------| | Headings | Geist | Bold (700) | | Body text | Geist | Regular (400) | | Code / Labels | Geist Mono | Regular (400) |
### Design Principles - **Dark-first.** The entire site uses a near-black background (`#050505`) with high-contrast white text and sakura pink accents. No light mode. - **Terminal aesthetic.** Monospace labels, code blocks, and a typing animation in the hero reinforce the developer/hacker vibe. - **Minimal color.** Three colors total: black, white, and pink. No gradients unless explicitly decorative. - **Card-based layout.** Every section uses bordered cards with subtle background differentiation on a consistent grid. - **Mobile-first responsive.** All layouts use flexbox with responsive breakpoints. Grid layouts collapse to single columns on small screens.
---

## Tech Stack

| Technology | Version | Purpose | |:-----------|:--------|:--------| | **Next.js** | 16 | React framework, App Router, static rendering | | **React** | 19 | UI component library | | **TypeScript** | 5.x | Type safety | | **Tailwind CSS** | 4 | Utility-first styling with `@theme inline` tokens | | **shadcn/ui** | Latest | Base component primitives (cards, buttons) | | **Lucide React** | Latest | Icon library | | **Geist** | Latest | Font family (sans + mono) |
### External Embeds | Embed | Method | Source | |:------|:-------|:------| | Yuuki Demo | `