mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt Stackless UI: warm palette, sidebar, project tab bar with Design tab

Browse Source 
- Add Google Fonts (Newsreader/Outfit/IBM Plex Mono) + warm beige CSS palette
- New VIBNSidebar: Stackless-style 220px sidebar with project list + user footer
- New ProjectShell: project header with name/status/progress% + tab bar
- Tabs: Atlas → PRD → Design → Build → Deploy → Settings
- New /prd page: section-by-section progress view
- New /build page: locked until PRD complete
- Projects list page: Stackless-style row layout
- Simplify overview page to just render AtlasChat

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-02 16:01:33 -08:00
parent 7ba3b9563e
commit aaa3f51592
9 changed files with 1051 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/globals.css
View File

@@ -1,8 +1,14 @@
@import "tailwindcss";
@import "tw-animate-css";
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
@custom-variant dark (&:is(.dark *));
@keyframes vibn-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes vibn-blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
@keyframes vibn-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.vibn-enter { animation: vibn-enter 0.35s ease both; }
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
@@ -45,37 +51,38 @@
:root {
--radius: 0.5rem;
--background: oklch(0.985 0 0);
--foreground: oklch(0.09 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.09 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.09 0 0);
--primary: oklch(0.09 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.94 0 0);
--secondary-foreground: oklch(0.09 0 0);
--muted: oklch(0.94 0 0);
--muted-foreground: oklch(0.50 0 0);
--accent: oklch(0.94 0 0);
--accent-foreground: oklch(0.09 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.88 0 0);
--input: oklch(0.88 0 0);
--ring: oklch(0.70 0 0);
/* Stackless warm beige palette */
--background: #f6f4f0;
--foreground: #1a1a1a;
--card: #ffffff;
--card-foreground: #1a1a1a;
--popover: #ffffff;
--popover-foreground: #1a1a1a;
--primary: #1a1a1a;
--primary-foreground: #ffffff;
--secondary: #f0ece4;
--secondary-foreground: #1a1a1a;
--muted: #f0ece4;
--muted-foreground: #a09a90;
--accent: #eae6de;
--accent-foreground: #1a1a1a;
--destructive: #d32f2f;
--border: #e8e4dc;
--input: #e0dcd4;
--ring: #d0ccc4;
--chart-1: oklch(0.70 0.15 60);
--chart-2: oklch(0.70 0.12 210);
--chart-3: oklch(0.55 0.10 220);
--chart-4: oklch(0.40 0.08 230);
--chart-5: oklch(0.75 0.15 70);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.09 0 0);
--sidebar-primary: oklch(0.09 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.94 0 0);
--sidebar-accent-foreground: oklch(0.09 0 0);
--sidebar-border: oklch(0.88 0 0);
--sidebar-ring: oklch(0.70 0 0);
--sidebar: #ffffff;
--sidebar-foreground: #1a1a1a;
--sidebar-primary: #1a1a1a;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #f6f4f0;
--sidebar-accent-foreground: #1a1a1a;
--sidebar-border: #e8e4dc;
--sidebar-ring: #d0ccc4;
}
.dark {