feat: simplify theme system to single Warm Sage brand palette
Consolidate from 11 themes to one cohesive Warm Sage palette across landing page, auth layout, dashboard components, kanban columns, demo banner, theme picker, and CSS variables. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -7,10 +7,10 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
|
||||
return (
|
||||
<div className="min-h-screen flex bg-[#FAFAF7]">
|
||||
{/* Left brand panel — hidden on mobile */}
|
||||
<div className="hidden lg:flex lg:w-[480px] xl:w-[540px] relative flex-col justify-between bg-[#1C1917] p-10 overflow-hidden">
|
||||
<div className="hidden lg:flex lg:w-[480px] xl:w-[540px] relative flex-col justify-between bg-[#2D3436] p-10 overflow-hidden">
|
||||
{/* Decorative blurs */}
|
||||
<div className="absolute top-0 right-0 w-80 h-80 rounded-full bg-[#E07A3A]/15 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-[#0D7C66]/10 blur-[80px] pointer-events-none" />
|
||||
<div className="absolute top-0 right-0 w-80 h-80 rounded-full bg-[#6B8F71]/15 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-[#C4856A]/10 blur-[80px] pointer-events-none" />
|
||||
|
||||
{/* Subtle grid */}
|
||||
<div
|
||||
@@ -40,15 +40,15 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
|
||||
<div className="relative">
|
||||
<h2 className="font-heading text-3xl font-bold text-white leading-snug mb-4">
|
||||
Home maintenance,<br />
|
||||
<span className="text-[#E07A3A]">simplified.</span>
|
||||
<span className="text-[#8FB896]">simplified.</span>
|
||||
</h2>
|
||||
<p className="text-[#A8A29E] leading-relaxed max-w-sm">
|
||||
<p className="text-[#9A9E97] leading-relaxed max-w-sm">
|
||||
Track tasks, organize contractors, and store important
|
||||
documents — all in one place built for homeowners.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="relative text-xs text-[#78716C]">
|
||||
<p className="relative text-xs text-[#8A8F87]">
|
||||
© {new Date().getFullYear()} Casera
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -8,8 +8,8 @@ export default function DemoLandingPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-[#FAFAF7] px-6 relative overflow-hidden">
|
||||
{/* Decorative background */}
|
||||
<div className="absolute top-20 right-[-10%] w-[500px] h-[500px] rounded-full bg-[#E07A3A]/[0.04] blur-3xl pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-[-5%] w-[300px] h-[300px] rounded-full bg-[#0D7C66]/[0.03] blur-3xl pointer-events-none" />
|
||||
<div className="absolute top-20 right-[-10%] w-[500px] h-[500px] rounded-full bg-[#6B8F71]/[0.04] blur-3xl pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-[-5%] w-[300px] h-[300px] rounded-full bg-[#C4856A]/[0.03] blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="relative mx-auto max-w-lg text-center">
|
||||
{/* Logo */}
|
||||
@@ -21,16 +21,16 @@ export default function DemoLandingPage() {
|
||||
height={36}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
<span className="font-heading text-2xl font-bold tracking-tight text-[#1C1917]">
|
||||
<span className="font-heading text-2xl font-bold tracking-tight text-[#2D3436]">
|
||||
Casera
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Hero */}
|
||||
<h1 className="font-heading text-4xl font-bold tracking-tight text-[#1C1917]">
|
||||
<h1 className="font-heading text-4xl font-bold tracking-tight text-[#2D3436]">
|
||||
See Casera in action
|
||||
</h1>
|
||||
<p className="mt-4 text-lg text-[#78716C] leading-relaxed">
|
||||
<p className="mt-4 text-lg text-[#8A8F87] leading-relaxed">
|
||||
Explore the full app with sample data. No account needed —
|
||||
just click and start exploring.
|
||||
</p>
|
||||
@@ -39,7 +39,7 @@ export default function DemoLandingPage() {
|
||||
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link
|
||||
href="/demo/app"
|
||||
className="group inline-flex items-center gap-2.5 rounded-full bg-[#E07A3A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#E07A3A]/20 hover:bg-[#C4632A] transition-all"
|
||||
className="group inline-flex items-center gap-2.5 rounded-full bg-[#C4856A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#C4856A]/20 hover:bg-[#A86B52] transition-all"
|
||||
>
|
||||
<Play className="size-4" />
|
||||
Launch Demo
|
||||
@@ -48,9 +48,9 @@ export default function DemoLandingPage() {
|
||||
</div>
|
||||
|
||||
{/* Login link */}
|
||||
<p className="mt-8 text-sm text-[#A8A29E]">
|
||||
<p className="mt-8 text-sm text-[#9A9E97]">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-[#E07A3A] font-medium hover:underline">
|
||||
<Link href="/login" className="text-[#6B8F71] font-medium hover:underline">
|
||||
Sign In
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
+28
-13
@@ -49,25 +49,40 @@
|
||||
--radius-4xl: calc(var(--radius) + 16px);
|
||||
|
||||
/* App-specific theme-aware Tailwind utilities */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F7F7F7;
|
||||
--color-text-primary: #1C1917;
|
||||
--color-text-secondary: #78716C;
|
||||
--color-text-on-primary: #FFFFFF;
|
||||
--color-bg-primary: var(--color-bg-primary);
|
||||
--color-bg-secondary: var(--color-bg-secondary);
|
||||
--color-text-primary: var(--color-text-primary);
|
||||
--color-text-secondary: var(--color-text-secondary);
|
||||
--color-text-on-primary: var(--color-text-on-primary);
|
||||
--color-app-primary: var(--color-primary);
|
||||
--color-app-secondary: var(--color-secondary);
|
||||
--color-app-accent: var(--color-accent);
|
||||
--color-app-error: var(--color-error);
|
||||
|
||||
/* Landing page brand colors (theme-independent) */
|
||||
--color-brand-orange: #E07A3A;
|
||||
--color-brand-orange-dark: #C4632A;
|
||||
--color-brand-orange-light: #FFF3EB;
|
||||
--color-brand-teal: #0D7C66;
|
||||
--color-brand-teal-light: #ECFDF5;
|
||||
--color-brand-slate: #1C1917;
|
||||
/* Brand colors — Warm Sage palette */
|
||||
--color-brand-sage: #6B8F71;
|
||||
--color-brand-sage-light: #EDF2ED;
|
||||
--color-brand-clay: #C4856A;
|
||||
--color-brand-clay-light: #FDF3EE;
|
||||
--color-brand-charcoal: #2D3436;
|
||||
--color-brand-cream: #FAFAF7;
|
||||
--color-brand-linen: #F2EFE9;
|
||||
--color-brand-stone: #E8E3DC;
|
||||
|
||||
/* Legacy brand aliases (for any remaining references) */
|
||||
--color-brand-orange: #C4856A;
|
||||
--color-brand-orange-dark: #A86B52;
|
||||
--color-brand-orange-light: #FDF3EE;
|
||||
--color-brand-teal: #6B8F71;
|
||||
--color-brand-teal-light: #EDF2ED;
|
||||
--color-brand-slate: #2D3436;
|
||||
--color-brand-warm: #FFFFFF;
|
||||
|
||||
/* Warm shadow tokens */
|
||||
--shadow-warm-sm: 0 1px 3px rgba(45, 52, 54, 0.06), 0 1px 2px rgba(45, 52, 54, 0.04);
|
||||
--shadow-warm-md: 0 4px 12px rgba(45, 52, 54, 0.07), 0 2px 4px rgba(45, 52, 54, 0.04);
|
||||
--shadow-warm-lg: 0 8px 24px rgba(45, 52, 54, 0.08), 0 4px 8px rgba(45, 52, 54, 0.04);
|
||||
|
||||
/* Animation tokens */
|
||||
--animate-fade-up: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
--animate-fade-in: fade-in 0.6s ease both;
|
||||
@@ -76,7 +91,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--radius: 0.75rem;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
+53
-53
@@ -18,14 +18,14 @@ const features = [
|
||||
title: "Smart Task Tracking",
|
||||
description:
|
||||
"Kanban boards, recurring schedules, and due date reminders keep every repair and project on track.",
|
||||
color: "bg-[#FFF3EB] text-[#E07A3A]",
|
||||
color: "bg-[#EDF2ED] text-[#6B8F71]",
|
||||
},
|
||||
{
|
||||
icon: HardHat,
|
||||
title: "Contractor Rolodex",
|
||||
description:
|
||||
"Store contact details, specialties, and notes for every service provider. Never lose a plumber's number again.",
|
||||
color: "bg-[#ECFDF5] text-[#0D7C66]",
|
||||
color: "bg-[#FDF3EE] text-[#C4856A]",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
@@ -82,9 +82,9 @@ const highlights = [
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-[#1C1917] font-sans selection:bg-[#E07A3A]/20">
|
||||
<div className="min-h-screen bg-[#FAFAF7] text-[#2D3436] font-sans selection:bg-[#6B8F71]/20">
|
||||
{/* ─── Navigation ─── */}
|
||||
<nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-xl border-b border-[#E7E5E4]/60">
|
||||
<nav className="fixed top-0 w-full z-50 bg-[#FAFAF7]/80 backdrop-blur-xl border-b border-[#E8E3DC]/60">
|
||||
<div className="max-w-7xl mx-auto px-6 flex items-center justify-between h-16">
|
||||
<Link href="/" className="flex items-center gap-2.5">
|
||||
<Image
|
||||
@@ -94,7 +94,7 @@ export default function HomePage() {
|
||||
height={32}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
<span className="font-heading text-xl font-bold tracking-tight text-[#1C1917]">
|
||||
<span className="font-heading text-xl font-bold tracking-tight text-[#2D3436]">
|
||||
Casera
|
||||
</span>
|
||||
</Link>
|
||||
@@ -102,19 +102,19 @@ export default function HomePage() {
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="#features"
|
||||
className="text-sm font-medium text-[#78716C] hover:text-[#1C1917] transition-colors"
|
||||
className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
<a
|
||||
href="#how-it-works"
|
||||
className="text-sm font-medium text-[#78716C] hover:text-[#1C1917] transition-colors"
|
||||
className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
|
||||
>
|
||||
How It Works
|
||||
</a>
|
||||
<Link
|
||||
href="/demo"
|
||||
className="text-sm font-medium text-[#78716C] hover:text-[#1C1917] transition-colors"
|
||||
className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
|
||||
>
|
||||
Demo
|
||||
</Link>
|
||||
@@ -123,13 +123,13 @@ export default function HomePage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-sm font-medium text-[#78716C] hover:text-[#1C1917] transition-colors hidden sm:inline-flex"
|
||||
className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors hidden sm:inline-flex"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/register"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-[#1C1917] px-5 py-2 text-sm font-semibold text-white hover:bg-[#292524] transition-colors"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-[#2D3436] px-5 py-2 text-sm font-semibold text-white hover:bg-[#3D4446] transition-colors"
|
||||
>
|
||||
Get Started
|
||||
<ArrowRight className="size-3.5" />
|
||||
@@ -142,14 +142,14 @@ export default function HomePage() {
|
||||
<section className="relative pt-32 pb-24 md:pt-40 md:pb-32 overflow-hidden">
|
||||
{/* Decorative background */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-20 right-[-10%] w-[600px] h-[600px] rounded-full bg-[#E07A3A]/[0.04] blur-3xl" />
|
||||
<div className="absolute bottom-0 left-[-5%] w-[400px] h-[400px] rounded-full bg-[#0D7C66]/[0.03] blur-3xl" />
|
||||
<div className="absolute top-20 right-[-10%] w-[600px] h-[600px] rounded-full bg-[#6B8F71]/[0.04] blur-3xl" />
|
||||
<div className="absolute bottom-0 left-[-5%] w-[400px] h-[400px] rounded-full bg-[#C4856A]/[0.03] blur-3xl" />
|
||||
{/* Subtle grid pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(#1C1917 1px, transparent 1px), linear-gradient(90deg, #1C1917 1px, transparent 1px)",
|
||||
"linear-gradient(#2D3436 1px, transparent 1px), linear-gradient(90deg, #2D3436 1px, transparent 1px)",
|
||||
backgroundSize: "64px 64px",
|
||||
}}
|
||||
/>
|
||||
@@ -158,17 +158,17 @@ export default function HomePage() {
|
||||
<div className="max-w-7xl mx-auto px-6 relative">
|
||||
<div className="max-w-3xl">
|
||||
{/* Badge */}
|
||||
<div className="animate-fade-up stagger-1 inline-flex items-center gap-2 rounded-full border border-[#E7E5E4] bg-white px-4 py-1.5 text-sm text-[#78716C] mb-8 shadow-sm">
|
||||
<span className="inline-block size-2 rounded-full bg-[#0D7C66] animate-pulse" />
|
||||
<div className="animate-fade-up stagger-1 inline-flex items-center gap-2 rounded-full border border-[#E8E3DC] bg-white px-4 py-1.5 text-sm text-[#8A8F87] mb-8 shadow-sm">
|
||||
<span className="inline-block size-2 rounded-full bg-[#6B8F71] animate-pulse" />
|
||||
Now available for homeowners
|
||||
</div>
|
||||
|
||||
<h1 className="animate-fade-up stagger-2 font-heading text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight leading-[1.08]">
|
||||
Your home,{" "}
|
||||
<span className="text-[#E07A3A]">perfectly maintained.</span>
|
||||
<span className="text-[#6B8F71]">perfectly maintained.</span>
|
||||
</h1>
|
||||
|
||||
<p className="animate-fade-up stagger-3 mt-6 text-lg md:text-xl text-[#78716C] max-w-xl leading-relaxed">
|
||||
<p className="animate-fade-up stagger-3 mt-6 text-lg md:text-xl text-[#8A8F87] max-w-xl leading-relaxed">
|
||||
Track tasks, organize contractors, and store important
|
||||
documents. Everything you need to keep your home running
|
||||
smoothly — in one place.
|
||||
@@ -177,17 +177,17 @@ export default function HomePage() {
|
||||
<div className="animate-fade-up stagger-4 mt-10 flex flex-wrap gap-4">
|
||||
<Link
|
||||
href="/register"
|
||||
className="group inline-flex items-center gap-2 rounded-full bg-[#E07A3A] px-7 py-3.5 text-base font-semibold text-white shadow-lg shadow-[#E07A3A]/20 hover:bg-[#C4632A] transition-all hover:shadow-xl hover:shadow-[#E07A3A]/25"
|
||||
className="group inline-flex items-center gap-2 rounded-full bg-[#C4856A] px-7 py-3.5 text-base font-semibold text-white shadow-lg shadow-[#C4856A]/20 hover:bg-[#A86B52] transition-all hover:shadow-xl hover:shadow-[#C4856A]/25"
|
||||
>
|
||||
Get Started — Free
|
||||
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/demo"
|
||||
className="group inline-flex items-center gap-2 rounded-full border-2 border-[#E7E5E4] bg-white px-7 py-3.5 text-base font-semibold text-[#1C1917] hover:border-[#D6D3D1] hover:bg-[#F5F5F4] transition-all"
|
||||
className="group inline-flex items-center gap-2 rounded-full border-2 border-[#E8E3DC] bg-white px-7 py-3.5 text-base font-semibold text-[#2D3436] hover:border-[#D6D1CA] hover:bg-[#F2EFE9] transition-all"
|
||||
>
|
||||
Try the Demo
|
||||
<ChevronRight className="size-4 text-[#A8A29E] transition-transform group-hover:translate-x-0.5" />
|
||||
<ChevronRight className="size-4 text-[#8A8F87] transition-transform group-hover:translate-x-0.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,21 +196,21 @@ export default function HomePage() {
|
||||
<div className="animate-fade-up stagger-5 hidden lg:block absolute top-12 right-6 w-[420px]">
|
||||
<div className="relative">
|
||||
{/* Main card */}
|
||||
<div className="rounded-2xl bg-white border border-[#E7E5E4] shadow-xl shadow-black/[0.04] p-5">
|
||||
<div className="rounded-2xl bg-white border border-[#E8E3DC] shadow-xl shadow-[#2D3436]/[0.04] p-5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="size-8 rounded-lg bg-[#FFF3EB] flex items-center justify-center">
|
||||
<CheckSquare className="size-4 text-[#E07A3A]" />
|
||||
<div className="size-8 rounded-lg bg-[#EDF2ED] flex items-center justify-center">
|
||||
<CheckSquare className="size-4 text-[#6B8F71]" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold">Upcoming Tasks</div>
|
||||
<div className="text-xs text-[#A8A29E]">3 due this week</div>
|
||||
<div className="text-xs text-[#8A8F87]">3 due this week</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2.5">
|
||||
{[
|
||||
{ task: "Replace HVAC filter", due: "Tomorrow", status: "bg-[#FEF3C7] text-[#92400E]" },
|
||||
{ task: "Schedule gutter cleaning", due: "Wed", status: "bg-[#ECFDF5] text-[#0D7C66]" },
|
||||
{ task: "Check smoke detectors", due: "Fri", status: "bg-[#FFF3EB] text-[#E07A3A]" },
|
||||
{ task: "Schedule gutter cleaning", due: "Wed", status: "bg-[#EDF2ED] text-[#6B8F71]" },
|
||||
{ task: "Check smoke detectors", due: "Fri", status: "bg-[#FDF3EE] text-[#C4856A]" },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.task}
|
||||
@@ -229,13 +229,13 @@ export default function HomePage() {
|
||||
|
||||
{/* Floating stat card */}
|
||||
<div
|
||||
className="absolute -bottom-8 -left-8 rounded-xl bg-white border border-[#E7E5E4] shadow-lg shadow-black/[0.04] p-4 w-48"
|
||||
className="absolute -bottom-8 -left-8 rounded-xl bg-white border border-[#E8E3DC] shadow-lg shadow-[#2D3436]/[0.04] p-4 w-48"
|
||||
style={{ animation: "float 6s ease-in-out infinite" }}
|
||||
>
|
||||
<div className="text-xs text-[#A8A29E] mb-1">This Month</div>
|
||||
<div className="text-2xl font-bold font-heading text-[#0D7C66]">12 Done</div>
|
||||
<div className="mt-2 h-1.5 rounded-full bg-[#F7F7F7] overflow-hidden">
|
||||
<div className="h-full w-3/4 rounded-full bg-[#0D7C66]" />
|
||||
<div className="text-xs text-[#8A8F87] mb-1">This Month</div>
|
||||
<div className="text-2xl font-bold font-heading text-[#6B8F71]">12 Done</div>
|
||||
<div className="mt-2 h-1.5 rounded-full bg-[#F2EFE9] overflow-hidden">
|
||||
<div className="h-full w-3/4 rounded-full bg-[#6B8F71]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -244,7 +244,7 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Social proof strip ─── */}
|
||||
<section className="border-y border-[#E7E5E4] bg-white/50">
|
||||
<section className="border-y border-[#E8E3DC] bg-white/50">
|
||||
<div className="max-w-7xl mx-auto px-6 py-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-center">
|
||||
{[
|
||||
{ value: "Free", label: "to get started" },
|
||||
@@ -252,10 +252,10 @@ export default function HomePage() {
|
||||
{ value: "All-in-one", label: "home management" },
|
||||
].map((stat) => (
|
||||
<div key={stat.label} className="flex items-baseline gap-2">
|
||||
<span className="text-lg font-bold font-heading text-[#1C1917]">
|
||||
<span className="text-lg font-bold font-heading text-[#2D3436]">
|
||||
{stat.value}
|
||||
</span>
|
||||
<span className="text-sm text-[#A8A29E]">{stat.label}</span>
|
||||
<span className="text-sm text-[#8A8F87]">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -265,13 +265,13 @@ export default function HomePage() {
|
||||
<section id="features" className="py-24 md:py-32">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="max-w-2xl mb-16">
|
||||
<p className="text-sm font-semibold text-[#E07A3A] uppercase tracking-wider mb-3">
|
||||
<p className="text-sm font-semibold text-[#6B8F71] uppercase tracking-wider mb-3">
|
||||
Features
|
||||
</p>
|
||||
<h2 className="font-heading text-3xl md:text-4xl font-bold tracking-tight">
|
||||
Everything your home needs, nothing it doesn't.
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-[#78716C] leading-relaxed">
|
||||
<p className="mt-4 text-lg text-[#8A8F87] leading-relaxed">
|
||||
Casera brings all your home maintenance into one clear,
|
||||
organized space. No bloat, no learning curve.
|
||||
</p>
|
||||
@@ -281,7 +281,7 @@ export default function HomePage() {
|
||||
{features.map((feature, i) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className={`group relative rounded-2xl border border-[#E7E5E4] bg-white p-8 transition-all hover:shadow-lg hover:shadow-black/[0.04] hover:-translate-y-0.5 stagger-${i + 1}`}
|
||||
className={`group relative rounded-2xl border border-[#E8E3DC] bg-white p-8 transition-all hover:shadow-lg hover:shadow-[#2D3436]/[0.04] hover:-translate-y-0.5 stagger-${i + 1}`}
|
||||
>
|
||||
<div
|
||||
className={`inline-flex items-center justify-center size-12 rounded-xl ${feature.color} mb-5`}
|
||||
@@ -291,7 +291,7 @@ export default function HomePage() {
|
||||
<h3 className="font-heading text-xl font-bold mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-[#78716C] leading-relaxed">
|
||||
<p className="text-[#8A8F87] leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -303,11 +303,11 @@ export default function HomePage() {
|
||||
{/* ─── How It Works ─── */}
|
||||
<section
|
||||
id="how-it-works"
|
||||
className="py-24 md:py-32 bg-[#F7F7F7] relative noise-overlay"
|
||||
className="py-24 md:py-32 bg-[#F2EFE9] relative noise-overlay"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-6 relative">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<p className="text-sm font-semibold text-[#0D7C66] uppercase tracking-wider mb-3">
|
||||
<p className="text-sm font-semibold text-[#6B8F71] uppercase tracking-wider mb-3">
|
||||
How It Works
|
||||
</p>
|
||||
<h2 className="font-heading text-3xl md:text-4xl font-bold tracking-tight">
|
||||
@@ -318,13 +318,13 @@ export default function HomePage() {
|
||||
<div className="grid md:grid-cols-3 gap-8 md:gap-12">
|
||||
{steps.map((step) => (
|
||||
<div key={step.number} className="text-center md:text-left">
|
||||
<div className="inline-flex items-center justify-center size-14 rounded-2xl bg-[#1C1917] text-white font-heading font-bold text-lg mb-5">
|
||||
<div className="inline-flex items-center justify-center size-14 rounded-2xl bg-[#2D3436] text-white font-heading font-bold text-lg mb-5">
|
||||
{step.number}
|
||||
</div>
|
||||
<h3 className="font-heading text-xl font-bold mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-[#78716C] leading-relaxed">
|
||||
<p className="text-[#8A8F87] leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -340,7 +340,7 @@ export default function HomePage() {
|
||||
<h2 className="font-heading text-3xl md:text-4xl font-bold tracking-tight">
|
||||
Built for real homeowners
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-[#78716C]">
|
||||
<p className="mt-4 text-lg text-[#8A8F87]">
|
||||
Thoughtful details that make home maintenance feel manageable.
|
||||
</p>
|
||||
</div>
|
||||
@@ -349,13 +349,13 @@ export default function HomePage() {
|
||||
{highlights.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-2xl border border-[#E7E5E4] bg-white p-6 hover:shadow-md hover:shadow-black/[0.03] transition-all"
|
||||
className="rounded-2xl border border-[#E8E3DC] bg-white p-6 hover:shadow-md hover:shadow-[#2D3436]/[0.03] transition-all"
|
||||
>
|
||||
<item.icon className="size-6 text-[#E07A3A] mb-4" />
|
||||
<item.icon className="size-6 text-[#6B8F71] mb-4" />
|
||||
<h3 className="font-heading font-bold text-base mb-1.5">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#78716C] leading-relaxed">
|
||||
<p className="text-sm text-[#8A8F87] leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -366,23 +366,23 @@ export default function HomePage() {
|
||||
|
||||
{/* ─── CTA Section ─── */}
|
||||
<section className="py-24 md:py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[#1C1917]" />
|
||||
{/* Orange glow */}
|
||||
<div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full bg-[#E07A3A]/10 blur-[120px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 w-[400px] h-[400px] rounded-full bg-[#0D7C66]/10 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-[#2D3436]" />
|
||||
{/* Sage glow */}
|
||||
<div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full bg-[#6B8F71]/10 blur-[120px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 w-[400px] h-[400px] rounded-full bg-[#C4856A]/10 blur-[100px] pointer-events-none" />
|
||||
|
||||
<div className="max-w-3xl mx-auto px-6 text-center relative">
|
||||
<h2 className="font-heading text-3xl md:text-5xl font-bold tracking-tight text-white">
|
||||
Ready to take control of your home?
|
||||
</h2>
|
||||
<p className="mt-5 text-lg text-[#A8A29E] max-w-xl mx-auto leading-relaxed">
|
||||
<p className="mt-5 text-lg text-[#9A9E97] max-w-xl mx-auto leading-relaxed">
|
||||
Join homeowners who've simplified their maintenance routine.
|
||||
Free to start, no credit card required.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/register"
|
||||
className="group inline-flex items-center gap-2 rounded-full bg-[#E07A3A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#E07A3A]/20 hover:bg-[#C4632A] transition-all"
|
||||
className="group inline-flex items-center gap-2 rounded-full bg-[#C4856A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#C4856A]/20 hover:bg-[#A86B52] transition-all"
|
||||
>
|
||||
Get Started — Free
|
||||
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
|
||||
@@ -398,7 +398,7 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Footer ─── */}
|
||||
<footer className="bg-[#1C1917] border-t border-white/5 text-[#A8A29E]">
|
||||
<footer className="bg-[#2D3436] border-t border-white/5 text-[#9A9E97]">
|
||||
<div className="max-w-7xl mx-auto px-6 py-16">
|
||||
<div className="grid md:grid-cols-4 gap-10">
|
||||
{/* Brand */}
|
||||
|
||||
Reference in New Issue
Block a user