feat: simplify Get Started to one docker command below hero, redesign Enterprise with gradient cards, remove About from nav

apps/landing/src/app/page.tsx

@@ -13,10 +13,10 @@ export default function Home() {
       <Navbar />
       <main>
         <Hero />
+        <HowItWorks />
         <WhyChoose />
         <BentoGrid />
         <Enterprise />
-        <HowItWorks />
         <OpenSource />
       </main>
       <Footer />

apps/landing/src/components/enterprise.tsx

@@ -6,20 +6,23 @@ const features = [
   {
     title: "Data Sovereignty",
     description:
-      "Your images never leave your network. No external API calls, no cloud dependencies. Full GDPR, HIPAA, CCPA compliance by architecture.",
+      "Your images never leave your network. No external API calls, no cloud dependencies. GDPR, HIPAA, CCPA compliant by architecture.",
     icon: Lock,
+    gradient: "from-amber-500/10 to-orange-500/5",
   },
   {
     title: "Enterprise Controls",
     description:
-      "Multi-user authentication, team permissions, API key management, and audit logging. Everything you need for regulated environments.",
+      "Multi-user authentication, team permissions, API key management, and audit logging for regulated environments.",
     icon: Users,
+    gradient: "from-blue-500/10 to-indigo-500/5",
   },
   {
     title: "Deploy Anywhere",
     description:
       "Docker, Kubernetes, bare metal. ARM and x86. Air-gapped networks. One container, any infrastructure.",
     icon: Server,
+    gradient: "from-emerald-500/10 to-teal-500/5",
   },
 ];
 
@@ -28,22 +31,25 @@ export function Enterprise() {
     <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">
+          <p className="text-center text-sm font-medium text-accent">Enterprise ready</p>
-            Built for organizations that take data seriously.
+          <h2 className="mt-2 text-center text-3xl font-bold tracking-tight md:text-4xl">
+            Your data never leaves your network.
           </h2>
           <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.
+            Deploy on your infrastructure, behind your firewall, on your terms.
           </p>
         </FadeIn>
 
-        <div className="mt-16 grid gap-8 md:grid-cols-3 md:gap-12">
+        <div className="mt-16 grid gap-6 md:grid-cols-3">
           {features.map((feat, i) => (
             <FadeIn key={feat.title} delay={i * 0.1}>
-              <div className="rounded-2xl border border-border bg-background-alt p-8 transition-all hover:shadow-md">
+              <div
-                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-accent/10">
+                className={`group h-full rounded-2xl bg-gradient-to-br ${feat.gradient} border border-border p-8 transition-all hover:shadow-lg hover:-translate-y-0.5`}
+              >
+                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-background shadow-sm">
                   <feat.icon size={22} className="text-accent" />
                 </div>
-                <h3 className="mt-4 text-xl font-bold">{feat.title}</h3>
+                <h3 className="mt-5 text-xl font-bold">{feat.title}</h3>
                 <p className="mt-3 leading-relaxed text-muted">{feat.description}</p>
               </div>
             </FadeIn>

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

@@ -2,50 +2,41 @@ import { FadeIn } from "./fade-in";
 
 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="bg-background-alt px-6 py-20 md:py-28">
-      <div className="mx-auto max-w-3xl">
+      <div className="mx-auto max-w-2xl text-center">
         <FadeIn>
-          <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
+          <p className="text-sm font-medium text-accent">Get started in seconds</p>
-            Get started in seconds.
+          <h2 className="mt-2 text-2xl font-bold tracking-tight md:text-3xl">
+            One command. That's it.
           </h2>
-          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted">
-            One command. Everything included.
-          </p>
         </FadeIn>
 
         <FadeIn delay={0.1}>
-          <div className="mt-12 overflow-hidden rounded-2xl border border-border bg-[#1e1e1e] shadow-xl">
+          <div className="mt-8 overflow-hidden rounded-xl border border-border bg-[#1e1e1e] shadow-lg">
-            <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
+            <div className="flex items-center gap-2 border-b border-white/10 px-4 py-2.5">
-              <div className="h-3 w-3 rounded-full bg-[#ff5f57]" />
+              <div className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
-              <div className="h-3 w-3 rounded-full bg-[#febc2e]" />
+              <div className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
-              <div className="h-3 w-3 rounded-full bg-[#28c840]" />
+              <div className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
-              <span className="ml-2 text-xs text-white/40">Terminal</span>
             </div>
-            <div className="p-6 font-mono text-sm leading-loose">
+            <div className="px-5 py-4 text-left font-mono text-sm">
-              <p className="text-white/50"># Pull the image</p>
               <p className="text-white">
-                <span className="text-green-400">$</span> docker pull snapotter/snapotter
+                <span className="text-green-400">$</span>{" "}
+                <span className="select-all">
+                  docker run -d -p 1349:1349 -v snapotter-data:/data ghcr.io/ashim-hq/ashim:latest
+                </span>
               </p>
-              <p className="mt-4 text-white/50"># Run it</p>
-              <p className="text-white">
-                <span className="text-green-400">$</span> docker run -p 8080:8080
-                snapotter/snapotter
-              </p>
-              <p className="mt-4 text-white/50"># That's it. Open your browser.</p>
-              <p className="text-amber-400">SnapOtter is running at http://localhost:8080</p>
             </div>
           </div>
         </FadeIn>
 
-        <FadeIn delay={0.2}>
+        <FadeIn delay={0.15}>
-          <p className="mt-8 text-center text-sm text-muted">
+          <p className="mt-6 text-sm text-muted">
-            Works on Linux, macOS, and Windows. ARM and x86 supported.
+            Linux, macOS, Windows. ARM and x86.{" "}
-            <br />
             <a
               href="https://docs.snapotter.com"
-              className="mt-1 inline-block font-medium text-accent hover:underline"
+              className="font-medium text-accent hover:underline"
             >
-              Read the full installation guide
+              Full docs
             </a>
           </p>
         </FadeIn>

apps/landing/src/components/navbar.tsx

@@ -8,7 +8,6 @@ const links = [
   { label: "Download", href: "#how-it-works" },
   { label: "Pricing", href: "#enterprise" },
   { label: "Docs", href: "https://docs.snapotter.com" },
-  { label: "About", href: "#open-source" },
   { label: "Contact", href: "/contact" },
 ];