frontend redesign work started

apps/main-app/public/components/ui/checkbox.tsx

···
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-border bg-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

apps/main-app/public/index.tsx

···
 
 	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 		const navigationKeys = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Enter', 'Escape']
-		
+
 		// Mark that we should preserve the index for navigation keys
 		if (navigationKeys.includes(e.key)) {
 			preserveIndexRef.current = true
···
 		setIndex(-1)
 		setIsOpen(false)
 		onSelect?.(handle)
-		
+
 		// Auto-submit the form if enabled
 		if (autoSubmit && inputRef.current) {
 			const form = inputRef.current.closest('form')
···
 									height: 'calc(1.5rem + 12px)',
 									borderRadius: '4px',
 									cursor: 'pointer',
-									backgroundColor: i === index ? 'hsl(var(--accent) / 0.5)' : 'transparent',
+									backgroundColor: i === index ? 'color-mix(in oklch, var(--accent) 50%, transparent)' : 'transparent',
 									transition: 'background-color 0.1s'
 								}}
 								onMouseEnter={() => setIndex(i)}
···
 										width: '1.5rem',
 										height: '1.5rem',
 										borderRadius: '50%',
-										backgroundColor: 'hsl(var(--muted))',
+										backgroundColor: 'var(--muted)',
 										overflow: 'hidden',
 										flexShrink: 0
 									}}
···
 										<img
 											src={actor.avatar}
 											alt=""
+											loading="lazy"
 											style={{
 												display: 'block',
 												width: '100%',
···
 
 	return (
 		<>
-			<div className="min-h-screen">
+			<div className="w-full min-h-screen flex flex-col">
 				{/* Header */}
-				<header className="border-b border-border/40 bg-background/80 backdrop-blur-sm sticky top-0 z-50">
-					<div className="container mx-auto px-4 py-4 flex items-center justify-between">
+				<header className="w-full border-b border-border/40 bg-background/80 backdrop-blur-sm sticky top-0 z-50">
+					<div className="max-w-6xl w-full mx-auto px-4 h-16 flex items-center justify-between">
 						<div className="flex items-center gap-2">
 							<img src="/transparent-full-size-ico.png" alt="wisp.place" className="w-8 h-8" />
-							<span className="text-xl font-semibold text-foreground">
+							<span className="text-lg font-semibold text-foreground">
 								wisp.place
 							</span>
 						</div>
-						<div className="flex items-center gap-3">
+						<div className="flex items-center gap-4">
+							<a
+								href="https://docs.wisp.place"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+							>
+								Read the Docs
+							</a>
 							<Button
-								variant="ghost"
+								variant="outline"
 								size="sm"
+								className="btn-hover-lift"
 								onClick={() => setShowForm(true)}
 							>
 								Sign In
 							</Button>
-							<Button
-								size="sm"
-								className="bg-accent text-accent-foreground hover:bg-accent/90"
-								asChild
-							>
-								<a href="https://docs.wisp.place" target="_blank" rel="noopener noreferrer">
-									Read the Docs
-								</a>
-							</Button>
 						</div>
 					</div>
 				</header>
 
 				{/* Hero Section */}
-				<section className="container mx-auto px-4 py-20 md:py-32">
+				<section className="container mx-auto px-4 py-24 md:py-36">
 					<div className="max-w-4xl mx-auto text-center">
-						<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 mb-8">
-							<span className="w-2 h-2 bg-accent rounded-full animate-pulse"></span>
-							<span className="text-sm text-foreground">
-								Built on AT Protocol
-							</span>
-						</div>
-
-						<h1 className="text-5xl md:text-7xl font-bold text-balance mb-6 leading-tight">
-							Your Website.Your Control. Lightning Fast.
+						{/* Main Headline */}
+						<h1 className="animate-fade-in-up animate-delay-100 text-5xl md:text-7xl font-bold mb-2 leading-tight tracking-tight">
+							Deploy Anywhere.
+						</h1>
+						<h1 className="animate-fade-in-up animate-delay-200 text-5xl md:text-7xl font-bold mb-8 leading-tight tracking-tight text-gradient-animate">
+							For Free. Forever.
 						</h1>
 
-						<p className="text-xl md:text-2xl text-muted-foreground text-balance mb-10 leading-relaxed max-w-3xl mx-auto">
-							Host static sites in your AT Protocol account. You
-							keep ownership and control. We just serve them fast
-							through our CDN.
+						{/* Subheadline */}
+						<p className="animate-fade-in-up animate-delay-300 text-lg md:text-xl text-muted-foreground mb-12 leading-relaxed max-w-2xl mx-auto">
+							The easiest way to deploy and orchestrate static sites.
+							Push updates instantly. Host on our infrastructure or yours.
+							All powered by AT Protocol.
 						</p>
 
-						<div className="max-w-md mx-auto relative">
+						{/* CTA Buttons */}
+						<div className="animate-fade-in-up animate-delay-400 max-w-lg mx-auto relative">
 							<div
-								className={`transition-all duration-500 ease-in-out ${
-									showForm
-										? 'opacity-0 -translate-y-5 pointer-events-none'
-										: 'opacity-100 translate-y-0'
-								}`}
+								className={`transition-all duration-500 ease-in-out ${showForm
+									? 'opacity-0 -translate-y-5 pointer-events-none absolute inset-0'
+									: 'opacity-100 translate-y-0'
+									}`}
 							>
-								<Button
-									size="lg"
-									className="bg-primary text-primary-foreground hover:bg-primary/90 text-lg px-8 py-6 w-full"
-									onClick={() => setShowForm(true)}
-								>
-									Log in with AT Proto
-									<ArrowRight className="ml-2 w-5 h-5" />
-								</Button>
+								<div className="flex flex-col sm:flex-row gap-3 justify-center">
+									<Button
+										size="lg"
+										className="bg-foreground text-background hover:bg-foreground/90 text-base px-6 py-5 btn-hover-lift"
+										onClick={() => setShowForm(true)}
+									>
+										<span className="mr-2 font-bold">@</span>
+										Deploy with AT
+									</Button>
+									<Button
+										variant="outline"
+										size="lg"
+										className="text-base px-6 py-5 btn-hover-lift"
+										asChild
+									>
+										<a href="https://docs.wisp.place/cli/" target="_blank" rel="noopener noreferrer">
+											<span className="font-mono mr-2 text-muted-foreground">&gt;_</span>
+											Install wisp-cli
+										</a>
+									</Button>
+								</div>
 							</div>
 
 							<div
-								className={`transition-all duration-500 ease-in-out absolute inset-0 ${
-									showForm
-										? 'opacity-100 translate-y-0'
-										: 'opacity-0 translate-y-5 pointer-events-none'
-								}`}
+								className={`transition-all duration-500 ease-in-out ${showForm
+									? 'opacity-100 translate-y-0'
+									: 'opacity-0 translate-y-5 pointer-events-none absolute inset-0'
+									}`}
 							>
 								<form
 									onSubmit={async (e) => {
···
 									</ActorTypeahead>
 									<button
 										type="submit"
-										className="w-full bg-accent hover:bg-accent/90 text-accent-foreground font-semibold py-4 px-6 text-lg rounded-lg inline-flex items-center justify-center transition-colors"
+										className="w-full bg-foreground text-background hover:bg-foreground/90 font-semibold py-4 px-6 text-lg rounded-lg inline-flex items-center justify-center transition-colors btn-hover-lift"
 									>
 										Continue
 										<ArrowRight className="ml-2 w-5 h-5" />
···
 								</div>
 								<div>
 									<h3 className="text-xl font-semibold mb-2">
-										Upload your static site
+										Drop in your files
 									</h3>
 									<p className="text-muted-foreground">
-										Your HTML, CSS, and JavaScript files are
-										stored in your AT Protocol account as
-										gzipped blobs and a manifest record.
+										Upload your site through our dashboard or push with the CLI.
+										Everything gets stored directly in your AT Protocol account.
 									</p>
 								</div>
 							</div>
···
 								</div>
 								<div>
 									<h3 className="text-xl font-semibold mb-2">
-										We serve it globally
+										We handle the rest
 									</h3>
 									<p className="text-muted-foreground">
-										Wisp.place reads your site from your
-										account and delivers it through our CDN
-										for fast loading anywhere.
+										Your site goes live instantly on our global CDN.
+										Custom domains, HTTPS, caching—all automatic.
 									</p>
 								</div>
 							</div>
···
 								</div>
 								<div>
 									<h3 className="text-xl font-semibold mb-2">
-										You stay in control
+										Push updates instantly
 									</h3>
 									<p className="text-muted-foreground">
-										Update or remove your site anytime
-										through your AT Protocol account. No
-										lock-in, no middleman ownership.
+										Ship changes in seconds. Update through the dashboard,
+										run wisp-cli deploy, or wire up your CI/CD pipeline.
 									</p>
 								</div>
 							</div>
···
 				</section>
 
 				{/* Footer */}
-				<footer className="border-t border-border/40 bg-muted/20">
+				<footer className="border-t border-border/40 bg-muted/20 mt-auto">
 					<div className="container mx-auto px-4 py-8">
 						<div className="text-center text-sm text-muted-foreground">
 							<p>

apps/main-app/public/styles/global.css

···
 :root {
   color-scheme: light;
 
-  /* Warm beige background inspired by Sunset design #E9DDD8 */
-  --background: oklch(0.90 0.012 35);
-  /* Very dark brown text for strong contrast #2A2420 */
-  --foreground: oklch(0.18 0.01 30);
+  /* Warm beige background inspired by Sunset design */
+  --background: oklch(0.92 0.012 35);
+  /* Very dark brown text for strong contrast */
+  --foreground: oklch(0.15 0.015 30);
 
-  /* Slightly lighter card background */
-  --card: oklch(0.93 0.01 35);
-  --card-foreground: oklch(0.18 0.01 30);
+  /* Slightly lighter card background for elevation */
+  --card: oklch(0.95 0.008 35);
+  --card-foreground: oklch(0.15 0.015 30);
 
-  --popover: oklch(0.93 0.01 35);
-  --popover-foreground: oklch(0.18 0.01 30);
+  --popover: oklch(0.96 0.006 35);
+  --popover-foreground: oklch(0.15 0.015 30);
 
-  /* Dark brown primary inspired by #645343 */
-  --primary: oklch(0.35 0.02 35);
-  --primary-foreground: oklch(0.95 0.01 35);
+  /* Dark brown primary - darker for better contrast */
+  --primary: oklch(0.30 0.025 35);
+  --primary-foreground: oklch(0.96 0.008 35);
 
-  /* Bright pink accent for links #FFAAD2 */
-  --accent: oklch(0.78 0.15 345);
-  --accent-foreground: oklch(0.18 0.01 30);
+  /* Deeper pink accent for better visibility */
+  --accent: oklch(0.65 0.18 345);
+  --accent-foreground: oklch(0.15 0.015 30);
 
-  /* Medium taupe secondary inspired by #867D76 */
-  --secondary: oklch(0.52 0.015 30);
-  --secondary-foreground: oklch(0.95 0.01 35);
+  /* Darker taupe secondary for better contrast */
+  --secondary: oklch(0.85 0.012 30);
+  --secondary-foreground: oklch(0.25 0.02 30);
 
-  /* Light warm muted background */
+  /* Muted areas with better distinction */
   --muted: oklch(0.88 0.01 35);
-  --muted-foreground: oklch(0.42 0.015 30);
+  --muted-foreground: oklch(0.35 0.02 30);
 
-  --border: oklch(0.75 0.015 30);
-  --input: oklch(0.92 0.01 35);
-  --ring: oklch(0.72 0.08 15);
+  /* Significantly darker border for visibility */
+  --border: oklch(0.65 0.02 30);
+  /* Input backgrounds lighter than cards */
+  --input: oklch(0.97 0.005 35);
+  --ring: oklch(0.55 0.12 345);
 
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.50 0.20 25);
+  --destructive-foreground: oklch(0.98 0 0);
 
-  --chart-1: oklch(0.78 0.15 345);
+  --chart-1: oklch(0.65 0.18 345);
   --chart-2: oklch(0.32 0.04 285);
-  --chart-3: oklch(0.56 0.08 220);
-  --chart-4: oklch(0.85 0.02 130);
-  --chart-5: oklch(0.93 0.03 85);
+  --chart-3: oklch(0.50 0.10 220);
+  --chart-4: oklch(0.70 0.08 130);
+  --chart-5: oklch(0.75 0.06 85);
 
   --radius: 0.75rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.94 0.008 35);
+  --sidebar-foreground: oklch(0.15 0.015 30);
+  --sidebar-primary: oklch(0.30 0.025 35);
+  --sidebar-primary-foreground: oklch(0.96 0.008 35);
+  --sidebar-accent: oklch(0.90 0.01 35);
+  --sidebar-accent-foreground: oklch(0.20 0.02 30);
+  --sidebar-border: oklch(0.65 0.02 30);
+  --sidebar-ring: oklch(0.55 0.12 345);
 }
 
 .dark {
···
   * {
     @apply border-border outline-ring/50;
   }
+
+  html {
+    scrollbar-gutter: stable;
+  }
+
   body {
     @apply bg-background text-foreground;
   }
 }
 
 @keyframes arrow-bounce {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateX(0);
   }
+
   50% {
     transform: translateX(4px);
   }
···
   border-radius: 0.5rem;
   padding: 1rem;
   overflow-x: auto;
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
 }
 
 .shiki-wrapper pre {
   margin: 0 !important;
   padding: 0 !important;
 }
+
+/* ========== Landing Page Animations ========== */
+
+/* Animated gradient for headline text */
+@keyframes gradient-shift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.text-gradient-animate {
+  background: linear-gradient(90deg,
+      oklch(0.55 0.22 350),
+      oklch(0.60 0.24 10),
+      oklch(0.55 0.22 350));
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 4s ease-in-out infinite;
+}
+
+.dark .text-gradient-animate {
+  background: linear-gradient(90deg,
+      oklch(0.75 0.12 295),
+      oklch(0.85 0.10 5),
+      oklch(0.75 0.12 295));
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Floating/breathing animation for hero elements */
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-float-delayed {
+  animation: float 3s ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+/* Staggered fade-in animation */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+.animate-delay-100 {
+  animation-delay: 0.1s;
+}
+
+.animate-delay-200 {
+  animation-delay: 0.2s;
+}
+
+.animate-delay-300 {
+  animation-delay: 0.3s;
+}
+
+.animate-delay-400 {
+  animation-delay: 0.4s;
+}
+
+.animate-delay-500 {
+  animation-delay: 0.5s;
+}
+
+.animate-delay-600 {
+  animation-delay: 0.6s;
+}
+
+/* Terminal cursor blink */
+@keyframes cursor-blink {
+
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-cursor-blink {
+  animation: cursor-blink 1s step-end infinite;
+}
+
+/* Button hover scale effect */
+.btn-hover-lift {
+  transition: all 0.2s ease-out;
+}
+
+.btn-hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn-hover-lift:active {
+  transform: translateY(0);
+}
+
+/* Subtle pulse for feature dots */
+@keyframes dot-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+.animate-dot-pulse {
+  animation: dot-pulse 2s ease-in-out infinite;
+}
+
+.animate-dot-pulse-delayed-1 {
+  animation: dot-pulse 2s ease-in-out infinite;
+  animation-delay: 0.3s;
+}
+
+.animate-dot-pulse-delayed-2 {
+  animation: dot-pulse 2s ease-in-out infinite;
+  animation-delay: 0.6s;
+}

docs/src/styles/custom.css

···
 	/* Increase base font size by 10% */
 	font-size: 110%;
 
-	/* Light theme - Warm beige background from app */
-	--sl-color-bg: oklch(0.90 0.012 35);
-	--sl-color-bg-sidebar: oklch(0.93 0.01 35);
-	--sl-color-bg-nav: oklch(0.93 0.01 35);
-	--sl-color-text: oklch(0.18 0.01 30);
-	--sl-color-text-accent: oklch(0.78 0.15 345);
-	--sl-color-accent: oklch(0.78 0.15 345);
-	--sl-color-accent-low: oklch(0.95 0.03 345);
-	--sl-color-border: oklch(0.75 0.015 30);
-	--sl-color-gray-1: oklch(0.52 0.015 30);
-	--sl-color-gray-2: oklch(0.42 0.015 30);
-	--sl-color-gray-3: oklch(0.33 0.015 30);
-	--sl-color-gray-4: oklch(0.25 0.015 30);
-	--sl-color-gray-5: oklch(0.75 0.015 30);
+	/* Light theme - Warm beige with improved contrast */
+	--sl-color-bg: oklch(0.92 0.012 35);
+	--sl-color-bg-sidebar: oklch(0.95 0.008 35);
+	--sl-color-bg-nav: oklch(0.95 0.008 35);
+	--sl-color-text: oklch(0.15 0.015 30);
+	--sl-color-text-accent: oklch(0.65 0.18 345);
+	--sl-color-accent: oklch(0.65 0.18 345);
+	--sl-color-accent-low: oklch(0.92 0.05 345);
+	--sl-color-border: oklch(0.65 0.02 30);
+	--sl-color-gray-1: oklch(0.45 0.02 30);
+	--sl-color-gray-2: oklch(0.35 0.02 30);
+	--sl-color-gray-3: oklch(0.28 0.02 30);
+	--sl-color-gray-4: oklch(0.20 0.015 30);
+	--sl-color-gray-5: oklch(0.65 0.02 30);
 	--sl-color-bg-accent: oklch(0.88 0.01 35);
 }
 
···
 /* Sidebar active/hover state text contrast fix */
 .sidebar a[aria-current="page"],
 .sidebar a[aria-current="page"] span {
-	color: oklch(0.23 0.015 285) !important;
+	color: oklch(0.15 0.015 30) !important;
 }
 
 [data-theme="dark"] .sidebar a[aria-current="page"],