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

fix(ui): make Justine palette visible on marketing + trim rainbow chrome

Browse Source 
- Replace blue/purple gradients with ink gradient text and cream/parch CTA surface
- Step badges and transformation icons use primary (ink) fills
- /features page icons unified to text-primary; Lora section titles
- Tree view status colors use semantic tokens instead of blue/green

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-04-01 21:09:18 -07:00
parent bada63452f
commit 74f8dc4282
11 changed files with 45 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/(marketing)/features/page.tsx
View File

@@ -18,7 +18,7 @@ export default function FeaturesPage() {
return (
<div className="container py-8 md:py-12 lg:py-24">
<div className="mx-auto flex max-w-[980px] flex-col items-center gap-4">
<h1 className="text-4xl font-extrabold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
<h1 className="font-serif text-4xl font-bold leading-tight tracking-tight md:text-6xl lg:leading-[1.1]">
Powerful Features for AI Developers
</h1>
<p className="max-w-[750px] text-center text-lg text-muted-foreground">
@@ -30,7 +30,7 @@ export default function FeaturesPage() {
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 pt-12 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<Code2 className="h-12 w-12 text-blue-600" />
<Code2 className="h-12 w-12 text-primary" />
<CardTitle>Automatic Session Tracking</CardTitle>
<CardDescription>
Every coding session is automatically captured with zero configuration.
@@ -48,7 +48,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Brain className="h-12 w-12 text-purple-600" />
<Brain className="h-12 w-12 text-primary" />
<CardTitle>AI Usage Analytics</CardTitle>
<CardDescription>
Deep insights into how you and your team use AI tools.
@@ -66,7 +66,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<DollarSign className="h-12 w-12 text-green-600" />
<DollarSign className="h-12 w-12 text-primary" />
<CardTitle>Cost Tracking</CardTitle>
<CardDescription>
Real-time cost monitoring for all your AI services.
@@ -84,7 +84,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Clock className="h-12 w-12 text-orange-600" />
<Clock className="h-12 w-12 text-primary" />
<CardTitle>Productivity Metrics</CardTitle>
<CardDescription>
Track your velocity and identify productivity patterns.
@@ -102,7 +102,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Github className="h-12 w-12 text-gray-600" />
<Github className="h-12 w-12 text-primary" />
<CardTitle>GitHub Integration</CardTitle>
<CardDescription>
Connect your repositories for comprehensive code analysis.
@@ -120,7 +120,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Sparkles className="h-12 w-12 text-pink-600" />
<Sparkles className="h-12 w-12 text-primary" />
<CardTitle>Smart Summaries</CardTitle>
<CardDescription>
AI-powered summaries of your work and progress.
@@ -138,7 +138,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Users className="h-12 w-12 text-cyan-600" />
<Users className="h-12 w-12 text-primary" />
<CardTitle>Team Collaboration</CardTitle>
<CardDescription>
Built for teams working with AI tools together.
@@ -156,7 +156,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<FileCode className="h-12 w-12 text-indigo-600" />
<FileCode className="h-12 w-12 text-primary" />
<CardTitle>Code Quality Tracking</CardTitle>
<CardDescription>
Monitor code quality and AI-generated code effectiveness.
@@ -174,7 +174,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<TrendingUp className="h-12 w-12 text-emerald-600" />
<TrendingUp className="h-12 w-12 text-primary" />
<CardTitle>Trend Analysis</CardTitle>
<CardDescription>
Understand long-term patterns in your development process.
@@ -192,7 +192,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Shield className="h-12 w-12 text-red-600" />
<Shield className="h-12 w-12 text-primary" />
<CardTitle>Privacy & Security</CardTitle>
<CardDescription>
Your code and data stay private and secure.
@@ -210,7 +210,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<Zap className="h-12 w-12 text-yellow-600" />
<Zap className="h-12 w-12 text-primary" />
<CardTitle>Real-Time Insights</CardTitle>
<CardDescription>
Get instant feedback as you code.
@@ -228,7 +228,7 @@ export default function FeaturesPage() {
<Card>
<CardHeader>
<BarChart3 className="h-12 w-12 text-violet-600" />
<BarChart3 className="h-12 w-12 text-primary" />
<CardTitle>Custom Reports</CardTitle>
<CardDescription>
Create custom reports tailored to your needs.

11
app/globals.css
View File

@@ -8,6 +8,17 @@
@keyframes vibn-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.vibn-enter { animation: vibn-enter 0.35s ease both; }
/* Marketing — Justine ink & parchment (no blue/purple chrome) */
.vibn-gradient-text {
background-image: linear-gradient(90deg, var(--vibn-mid) 0%, var(--vibn-ink) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vibn-cta-surface {
background-image: linear-gradient(to bottom right, var(--vibn-cream), var(--vibn-parch));
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);