From 2685727a93751097cb42ca4894079f87fc3d6390 Mon Sep 17 00:00:00 2001 From: vyakymenko Date: Wed, 22 Apr 2026 13:07:59 +0000 Subject: [PATCH] design: Instrument Serif + Inter, phoenix logo, Fibe token system --- app/globals.css | 173 ++++++++++++------- app/layout.jsx | 6 +- app/page.jsx | 434 ++++++++++++++++++++++-------------------------- 3 files changed, 318 insertions(+), 295 deletions(-) diff --git a/app/globals.css b/app/globals.css index 89822ef..2206260 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,95 +2,156 @@ @tailwind components; @tailwind utilities; -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap'); -* { box-sizing: border-box; margin: 0; padding: 0; } +@layer base { + :root { + --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; + --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; -html { - font-family: 'Inter', system-ui, sans-serif; - scroll-behavior: smooth; + /* Fibe dark tokens */ + --background: #08080a; + --foreground: #fafafa; + --card: #121214; + --card-foreground: #fafafa; + --muted: #1c1c1f; + --muted-foreground: #a1a1aa; + --accent: #1a1525; + --accent-foreground: #c4b5fd; + --border: rgba(139, 92, 246, 0.15); + --border-subtle: rgba(139, 92, 246, 0.08); + --primary: #a78bfa; + --primary-dark: #8b5cf6; + --primary-light: #c4b5fd; + --ring: #8b5cf6; + --radius: 0.75rem; + --radius-xl: 1rem; + --shadow-glass: 0 8px 32px 0 rgb(139 92 246 / 0.12); + --shadow-elevated: 0 8px 30px -4px rgb(0 0 0 / 0.5), 0 4px 10px -4px rgb(0 0 0 / 0.4); + --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); + } + + /* Phoenix logo animation */ + @keyframes header-flame-out { + 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: brightness(1); } + 8% { opacity: 0.98; filter: brightness(1.12); } + 28% { transform: translate(-50%,-50%) scale(0.85); opacity: 0.95; } + 42% { transform: translate(-50%,-50%) scale(0.3); opacity: 0.25; filter: brightness(1.3); } + 48% { transform: translate(-50%,-50%) scale(0.12); opacity: 0; } + 52% { transform: translate(-50%,-50%) scale(0.08); opacity: 0; } + 68% { transform: translate(-50%,-50%) scale(0.55); opacity: 0.65; filter: brightness(1.15); } + 82% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.95; } + 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: brightness(1); } + } + + @keyframes gradientShift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + } + + @keyframes floatUp { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: translateY(0); } + } + + @keyframes pulseGlow { + 0%, 100% { box-shadow: 0 0 20px rgba(167,139,250,0.2); } + 50% { box-shadow: 0 0 50px rgba(167,139,250,0.4), 0 0 80px rgba(139,92,246,0.2); } + } + + .animate-flame-out { animation: header-flame-out 3.2s cubic-bezier(0.4,0,0.2,1) infinite; } + .animate-float-up { animation: floatUp 0.6s ease-out forwards; } + .animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; } } -body { - background: #0a0914; - color: #f1f5f9; +*, *::before, *::after { box-sizing: border-box; } + +html { + font-family: var(--font-sans); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + scroll-behavior: smooth; + background: var(--background); + color: var(--foreground); overflow-x: hidden; } -/* Animated gradient background */ +body { + font-family: var(--font-sans); + background: var(--background); + color: var(--foreground); + min-height: 100vh; +} + +/* Display font for headings */ +.font-display { + font-family: var(--font-display); +} + +/* Animated purple-indigo gradient background */ .bg-fibe { - background: linear-gradient(135deg, #0f0c29 0%, #1a1540 30%, #302b63 60%, #24243e 100%); + background: linear-gradient(135deg, #0b0916 0%, #0f0c29 25%, #1a1540 50%, #261f5a 75%, #1e1a42 100%); background-size: 400% 400%; - animation: gradientShift 15s ease infinite; + animation: gradientShift 18s ease infinite; } -@keyframes gradientShift { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } -} - -/* Grid overlay */ +/* Subtle grid */ .grid-overlay { background-image: - linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px); - background-size: 48px 48px; + linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px); + background-size: 52px 52px; } -/* Glassmorphism */ +/* Glass card */ .glass { - background: rgba(255,255,255,0.04); - border: 1px solid rgba(255,255,255,0.09); + background: rgba(255,255,255,0.03); + border: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .glass-strong { - background: rgba(255,255,255,0.07); - border: 1px solid rgba(167,139,250,0.2); + background: rgba(26,21,37,0.7); + border: 1px solid rgba(167,139,250,0.18); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); + box-shadow: var(--shadow-glass); } -/* Glow effects */ -.glow-purple { - box-shadow: 0 0 60px rgba(167,139,250,0.15), 0 0 120px rgba(167,139,250,0.06); +/* Glows */ +.glow-orb { + position: absolute; + border-radius: 50%; + pointer-events: none; + filter: blur(1px); } -.text-glow { - text-shadow: 0 0 40px rgba(167,139,250,0.4); -} - -/* Accent */ -.accent { color: #a78bfa; } -.accent-bg { background: #a78bfa; } - -/* Gradient text */ +/* Gradient text — display font hero */ .gradient-text { - background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #60a5fa 100%); + background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #818cf8 80%, #93c5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } -/* Subtle radial glows */ -.glow-orb-1 { - position: absolute; - width: 600px; height: 600px; - background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; -} -.glow-orb-2 { - position: absolute; - width: 400px; height: 400px; - background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; +/* Tags / pills */ +.tag { + background: rgba(139,92,246,0.1); + border: 1px solid rgba(139,92,246,0.2); + color: #c4b5fd; + font-size: 0.7rem; + font-family: var(--font-sans); + font-weight: 500; + letter-spacing: 0.02em; + padding: 0.2rem 0.6rem; + border-radius: 999px; } /* Scrollbar */ -::-webkit-scrollbar { width: 6px; } -::-webkit-scrollbar-track { background: #0f0c29; } -::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 3px; } -::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); } +::-webkit-scrollbar { width: 5px; } +::-webkit-scrollbar-track { background: var(--background); } +::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 3px; } +::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.4); } diff --git a/app/layout.jsx b/app/layout.jsx index ed8a4b4..95c2c27 100644 --- a/app/layout.jsx +++ b/app/layout.jsx @@ -1,13 +1,13 @@ import './globals.css' export const metadata = { - title: 'Fibe — Ship faster. Break less.', - description: 'Fibe is a fullstack playground orchestrator. Spin up production-like environments in seconds.', + title: 'Fibe — Your entire stack, live in seconds.', + description: 'Fibe orchestrates fullstack environments from any git repo. Web apps, APIs, databases, AI agents, preview envs and jobs — on your infra, zero DevOps.', } export default function RootLayout({ children }) { return ( - + {children} ) diff --git a/app/page.jsx b/app/page.jsx index 5321bed..d7bf4ac 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -2,29 +2,45 @@ export default function Home() { return (
- {/* Ambient glow orbs */} -
-
-
+ {/* Ambient orbs */} +
+
+
{/* ── NAV ── */} -