fix: redesign section flow with alternating white/gray backgrounds, remove all dark sections, change 50+ to 40+ tools

apps/landing/src/app/layout.tsx

@@ -7,12 +7,12 @@ const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 export const metadata: Metadata = {
   title: "SnapOtter | Self-Hosted Image Processing",
   description:
-    "50+ image processing tools with local AI. Runs 100% offline. No data leaves your network. Open source and free forever.",
+    "40+ image processing tools with local AI. Runs 100% offline. No data leaves your network. Open source and free forever.",
   metadataBase: new URL("https://snapotter.com"),
   openGraph: {
     title: "SnapOtter | Self-Hosted Image Processing",
     description:
-      "50+ image processing tools with local AI. Runs 100% offline. No data leaves your network.",
+      "40+ image processing tools with local AI. Runs 100% offline. No data leaves your network.",
     url: "https://snapotter.com",
     siteName: "SnapOtter",
     type: "website",
@@ -29,7 +29,7 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     title: "SnapOtter | Self-Hosted Image Processing",
     description:
-      "50+ image processing tools with local AI. Runs 100% offline. No data leaves your network.",
+      "40+ image processing tools with local AI. Runs 100% offline. No data leaves your network.",
     images: ["/og-image.svg"],
   },
 };

apps/landing/src/components/api-callout.tsx

@@ -18,7 +18,7 @@ const response = `{
 
 export function ApiCallout() {
   return (
-    <section id="api" className="px-6 py-24 md:py-36">
+    <section id="api" className="bg-background-alt px-6 py-24 md:py-36">
       <div className="mx-auto max-w-6xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">

apps/landing/src/components/bento-grid.tsx

@@ -382,7 +382,7 @@ export function BentoGrid() {
       <div className="mx-auto max-w-6xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
-            50+ tools. Zero cloud dependency.
+            40+ tools. Zero cloud dependency.
           </h2>
           <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
             Search to find exactly what you need. Every tool runs 100% locally.

apps/landing/src/components/enterprise.tsx

@@ -25,26 +25,26 @@ const features = [
 
 export function Enterprise() {
   return (
-    <section id="enterprise" className="bg-dark-bg px-6 py-24 text-dark-fg md:py-36">
+    <section id="enterprise" className="px-6 py-24 md:py-36">
       <div className="mx-auto max-w-6xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
             Built for organizations that take data seriously.
           </h2>
-          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-dark-muted">
+          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
             Self-host on your own infrastructure. Your images never leave your network.
           </p>
         </FadeIn>
 
-        <div className="mt-16 grid gap-12 md:grid-cols-3 md:gap-16">
+        <div className="mt-16 grid gap-8 md:grid-cols-3 md:gap-12">
           {features.map((feat, i) => (
             <FadeIn key={feat.title} delay={i * 0.1}>
-              <div>
-                <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5">
+              <div className="rounded-2xl border border-border bg-background-alt p-8 transition-all hover:shadow-md">
+                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-accent/10">
                   <feat.icon size={22} className="text-accent" />
                 </div>
                 <h3 className="mt-4 text-xl font-bold">{feat.title}</h3>
-                <p className="mt-3 leading-relaxed text-dark-muted">{feat.description}</p>
+                <p className="mt-3 leading-relaxed text-muted">{feat.description}</p>
               </div>
             </FadeIn>
           ))}

apps/landing/src/components/how-it-works.tsx

@@ -23,7 +23,7 @@ const steps = [
 
 export function HowItWorks() {
   return (
-    <section id="how-it-works" className="bg-background-alt px-6 py-24 md:py-36">
+    <section id="how-it-works" className="px-6 py-24 md:py-36">
       <div className="mx-auto max-w-6xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">

apps/landing/src/components/open-source.tsx

@@ -3,7 +3,7 @@ import { FadeIn } from "./fade-in";
 
 export function OpenSource() {
   return (
-    <section id="open-source" className="bg-background-alt px-6 py-24 md:py-36">
+    <section id="open-source" className="px-6 py-24 md:py-36">
       <div className="mx-auto max-w-3xl text-center">
         <FadeIn>
           <h2 className="text-3xl font-bold tracking-tight md:text-4xl">Open source. Always.</h2>

apps/landing/src/components/three-ways.tsx

@@ -25,7 +25,7 @@ const ways = [
 
 export function ThreeWays() {
   return (
-    <section className="px-6 py-24 md:py-36">
+    <section className="bg-background-alt px-6 py-24 md:py-36">
       <div className="mx-auto max-w-6xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">

apps/landing/src/components/typing-cursor.tsx

@@ -11,7 +11,7 @@ const phrases = [
   "No limits. No hidden caps.",
   "Works fully offline.",
   "Unlimited batch processing.",
-  "50+ image tools.",
+  "40+ image tools.",
   "14 AI models. Your hardware.",
   "Lightning fast. Built on Sharp.",
   "Air-gapped ready.",

apps/landing/src/components/why-choose.tsx

@@ -36,7 +36,7 @@ const benefits = [
 
 export function WhyChoose() {
   return (
-    <section className="bg-dark-bg px-6 py-24 text-dark-fg md:py-36">
+    <section className="bg-background-alt px-6 py-24 md:py-36">
       <div className="mx-auto max-w-6xl">
         <FadeIn>
           <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
@@ -47,14 +47,12 @@ export function WhyChoose() {
         <div className="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {benefits.map((benefit, i) => (
             <FadeIn key={benefit.title} delay={i * 0.05}>
-              <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+              <div className="rounded-2xl border border-border bg-background p-6 transition-all hover:shadow-md">
                 <div className="flex items-center gap-3">
-                  <benefit.icon size={24} className="text-accent shrink-0" />
+                  <benefit.icon size={24} className="shrink-0 text-accent" />
                   <h3 className="text-lg font-bold">{benefit.title}</h3>
                 </div>
-                <p className="mt-3 text-sm leading-relaxed text-dark-muted">
-                  {benefit.description}
-                </p>
+                <p className="mt-3 text-sm leading-relaxed text-muted">{benefit.description}</p>
               </div>
             </FadeIn>
           ))}