From 09c660c503c08a0b551614c7b29bbfebd379c13b Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjunkomath@gmail.com>
Date: Thu, 26 Mar 2026 18:19:15 +1100
Subject: [PATCH 1/2] Update landing page

---
 .../components/layout/footer.component.tsx    |   2 +-
 .../components/layout/header.component.tsx    |  16 +-
 apps/web/components/marketing/cli-demo.tsx    | 160 +++++++++
 .../components/marketing/dual-interface.tsx   |  92 ++++++
 apps/web/components/marketing/faq.tsx         |  65 ++--
 apps/web/components/marketing/features.tsx    | 261 ++++++++-------
 .../components/marketing/get-started-hero.tsx |  57 +---
 apps/web/components/marketing/hero.tsx        | 303 ++++++++++--------
 .../web/components/marketing/how-it-works.tsx |  67 ++++
 .../marketing/open-source-banner.tsx          |  51 +++
 .../components/marketing/pricing-section.tsx  | 172 +++++-----
 apps/web/data/marketing.data.ts               |   7 +-
 apps/web/pages/_document.js                   |  13 +-
 apps/web/pages/index.tsx                      |  51 +--
 apps/web/pages/pricing.tsx                    |   6 +-
 apps/web/styles/global.css                    |  10 +-
 apps/web/tailwind.config.js                   |   7 +-
 17 files changed, 846 insertions(+), 494 deletions(-)
 create mode 100644 apps/web/components/marketing/cli-demo.tsx
 create mode 100644 apps/web/components/marketing/dual-interface.tsx
 create mode 100644 apps/web/components/marketing/how-it-works.tsx
 create mode 100644 apps/web/components/marketing/open-source-banner.tsx

diff --git a/apps/web/components/layout/footer.component.tsx b/apps/web/components/layout/footer.component.tsx
index 23cab8c..f5cb496 100644
--- a/apps/web/components/layout/footer.component.tsx
+++ b/apps/web/components/layout/footer.component.tsx
@@ -86,7 +86,7 @@ export default function FooterComponent() {
       />
 
       <footer
-        className="bg-gray-900 border-t border-white/10 dark:border-black"
+        className="bg-gray-900 border-t border-gray-200 dark:border-white/10"
         aria-labelledby="footer-heading"
       >
         <div className="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
diff --git a/apps/web/components/layout/header.component.tsx b/apps/web/components/layout/header.component.tsx
index b444bec..93752da 100644
--- a/apps/web/components/layout/header.component.tsx
+++ b/apps/web/components/layout/header.component.tsx
@@ -115,14 +115,14 @@ export default function HeaderComponent() {
         }}
       />
 
-      <Disclosure as="nav" className="bg-gray-900">
+      <Disclosure as="nav" className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-transparent">
         {({ open }) => (
           <>
             <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
               <div className="relative flex items-center justify-between h-16">
                 <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                   {/* Mobile menu button*/}
-                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-white">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XIcon className="block h-6 w-6" aria-hidden="true" />
@@ -141,7 +141,7 @@ export default function HeaderComponent() {
                         src={logoImage}
                         alt="changes.page"
                       />
-                      <p className="text-gray-50 text-md mx-2 hero">
+                      <p className="text-gray-900 dark:text-gray-50 text-md mx-2 font-sans">
                         changes<strong>.page</strong>
                       </p>
                     </div>
@@ -162,8 +162,8 @@ export default function HeaderComponent() {
                             href={item.href}
                             className={classNames(
                               item.href == router.pathname
-                                ? "bg-gray-900 text-white"
-                                : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                                ? "bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white"
+                                : "text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
                               "px-3 py-2 rounded-md text-sm font-medium"
                             )}
                             aria-current={
@@ -273,7 +273,7 @@ export default function HeaderComponent() {
                       <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
                         <Link
                           href={ROUTES.LOGIN}
-                          className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
+                          className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-500 transition-colors"
                         >
                           Sign in
                         </Link>
@@ -292,7 +292,7 @@ export default function HeaderComponent() {
                     as={Link}
                     href={item.href}
                     className={classNames(
-                      "text-gray-300 hover:bg-gray-700 hover:text-white",
+                      "text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
                       "block px-3 py-2 rounded-md text-base font-medium"
                     )}
                   >
@@ -307,7 +307,7 @@ export default function HeaderComponent() {
                   <Link
                     href={ROUTES.LOGIN}
                     className={classNames(
-                      "text-gray-300 hover:bg-gray-700 hover:text-white",
+                      "text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
                       "block px-3 py-2 rounded-md text-base font-medium"
                     )}
                   >
diff --git a/apps/web/components/marketing/cli-demo.tsx b/apps/web/components/marketing/cli-demo.tsx
new file mode 100644
index 0000000..82e743a
--- /dev/null
+++ b/apps/web/components/marketing/cli-demo.tsx
@@ -0,0 +1,160 @@
+import {
+  LightningBoltIcon,
+  ChipIcon,
+  CodeIcon,
+} from "@heroicons/react/solid";
+
+const useCases = [
+  {
+    icon: LightningBoltIcon,
+    title: "CI/CD Pipelines",
+    description: "Auto-publish release notes on every deploy.",
+  },
+  {
+    icon: ChipIcon,
+    title: "AI Agents",
+    description: "Let AI generate changelogs from your commits.",
+  },
+  {
+    icon: CodeIcon,
+    title: "GitHub Actions",
+    description: "Sync PRs to changelog posts automatically.",
+  },
+];
+
+export default function CliDemo() {
+  return (
+    <div className="bg-gray-900 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl hero">
+            Built for your pipeline
+          </h2>
+          <p className="mt-4 text-lg leading-8 text-gray-300">
+            The{" "}
+            <code className="text-green-400 bg-gray-800 px-1.5 py-0.5 rounded text-sm">
+              chp
+            </code>{" "}
+            CLI gives you full control over your changelog from the command line.
+          </p>
+        </div>
+
+        <div className="mt-16 mx-auto max-w-4xl">
+          <div className="rounded-xl border border-white/10 bg-gray-950 overflow-hidden shadow-2xl">
+            <div className="flex items-center gap-2 px-4 py-3 bg-gray-900/80 border-b border-white/5">
+              <div className="flex gap-1.5">
+                <div className="w-3 h-3 rounded-full bg-red-500/70" />
+                <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
+                <div className="w-3 h-3 rounded-full bg-green-500/70" />
+              </div>
+              <div className="flex-1 flex justify-center">
+                <span className="text-xs text-gray-400 font-mono">
+                  Terminal
+                </span>
+              </div>
+            </div>
+
+            <div className="p-6 font-mono text-sm leading-loose space-y-1 overflow-x-auto">
+              <div>
+                <span className="text-green-400">$ </span>
+                <span className="text-white">npm install -g </span>
+                <span className="text-cyan-400">@changespage/cli</span>
+              </div>
+
+              <div className="h-4" />
+
+              <div>
+                <span className="text-green-400">$ </span>
+                <span className="text-white">export </span>
+                <span className="text-cyan-400">CHANGESPAGE_SECRET_KEY</span>
+                <span className="text-white">=</span>
+                <span className="text-yellow-300">sk_live_...</span>
+              </div>
+
+              <div className="h-4" />
+
+              <div>
+                <span className="text-green-400">$ </span>
+                <span className="text-white">echo </span>
+                <span className="text-yellow-300">
+                  &quot;## Bug Fixes
+                </span>
+              </div>
+              <div>
+                <span className="text-yellow-300">
+                  - Fixed login timeout on mobile
+                </span>
+              </div>
+              <div>
+                <span className="text-yellow-300">
+                  - Resolved dark mode rendering&quot;
+                </span>
+                <span className="text-white"> | chp posts create \</span>
+              </div>
+              <div className="pl-6">
+                <span className="text-cyan-400">--title </span>
+                <span className="text-yellow-300">
+                  &quot;v2.4.1 Patch Release&quot;
+                </span>
+                <span className="text-white"> \</span>
+              </div>
+              <div className="pl-6">
+                <span className="text-cyan-400">--tags </span>
+                <span className="text-white">fix \</span>
+              </div>
+              <div className="pl-6">
+                <span className="text-cyan-400">--status </span>
+                <span className="text-white">published</span>
+              </div>
+
+              <div className="h-4" />
+
+              <div className="text-gray-500">
+                <span className="text-gray-600">{`{`}</span>
+              </div>
+              <div className="pl-4">
+                <span className="text-gray-400">&quot;id&quot;</span>
+                <span className="text-gray-600">: </span>
+                <span className="text-yellow-300/70">
+                  &quot;post_abc123&quot;
+                </span>
+                <span className="text-gray-600">,</span>
+              </div>
+              <div className="pl-4">
+                <span className="text-gray-400">&quot;title&quot;</span>
+                <span className="text-gray-600">: </span>
+                <span className="text-yellow-300/70">
+                  &quot;v2.4.1 Patch Release&quot;
+                </span>
+                <span className="text-gray-600">,</span>
+              </div>
+              <div className="pl-4">
+                <span className="text-gray-400">&quot;status&quot;</span>
+                <span className="text-gray-600">: </span>
+                <span className="text-green-400/70">
+                  &quot;published&quot;
+                </span>
+              </div>
+              <div className="text-gray-600">{`}`}</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+          {useCases.map((useCase) => (
+            <div
+              key={useCase.title}
+              className="text-center rounded-xl bg-gray-800/30 border border-gray-700/50 p-6"
+            >
+              <useCase.icon className="h-8 w-8 text-green-400 mx-auto mb-4" />
+              <h3 className="text-base font-semibold text-white mb-2">
+                {useCase.title}
+              </h3>
+              <p className="text-sm text-gray-400">{useCase.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/dual-interface.tsx b/apps/web/components/marketing/dual-interface.tsx
new file mode 100644
index 0000000..ac34e6c
--- /dev/null
+++ b/apps/web/components/marketing/dual-interface.tsx
@@ -0,0 +1,92 @@
+import {
+  ChartBarIcon,
+  CheckCircleIcon,
+  CodeIcon,
+  CogIcon,
+  CollectionIcon,
+  GlobeAltIcon,
+  LightningBoltIcon,
+  PencilIcon,
+  TerminalIcon,
+  UserGroupIcon,
+} from "@heroicons/react/solid";
+
+const humanFeatures = [
+  { name: "Rich markdown editor with live preview", icon: PencilIcon },
+  { name: "Interactive roadmap boards with voting", icon: CollectionIcon },
+  { name: "Post scheduling and reactions", icon: LightningBoltIcon },
+  { name: "Audience analytics dashboard", icon: ChartBarIcon },
+  { name: "Team collaboration", icon: UserGroupIcon },
+  { name: "Custom domains & white-label branding", icon: GlobeAltIcon },
+];
+
+const agentFeatures = [
+  { name: "Full CRUD via chp CLI", icon: TerminalIcon },
+  { name: "Pipe content from stdin", icon: CodeIcon },
+  { name: "Auth via environment variables", icon: CogIcon },
+  { name: "JSON output for scripting", icon: CodeIcon },
+  { name: "GitHub Actions integration", icon: LightningBoltIcon },
+  { name: "Zapier automation", icon: LightningBoltIcon },
+];
+
+export default function DualInterface() {
+  return (
+    <div className="bg-gray-900 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl hero">
+            Two interfaces. One platform.
+          </h2>
+          <p className="mt-4 text-lg leading-8 text-gray-300">
+            Whether you&apos;re a product manager crafting a release story or a
+            CI pipeline shipping automated updates, Changes.page delivers.
+          </p>
+        </div>
+
+        <div className="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="rounded-2xl bg-gray-800/50 border border-gray-700 p-8 lg:p-10 hover:border-indigo-500/50 transition-colors">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-500/10">
+                <UserGroupIcon className="h-6 w-6 text-indigo-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-white">For Humans</h3>
+            </div>
+            <p className="text-gray-400 mb-8">
+              A beautiful web interface for crafting changelogs that your users
+              will love.
+            </p>
+            <ul className="space-y-4">
+              {humanFeatures.map((feature) => (
+                <li key={feature.name} className="flex items-center gap-3">
+                  <CheckCircleIcon className="h-5 w-5 text-indigo-400 flex-shrink-0" />
+                  <span className="text-gray-300">{feature.name}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-2xl bg-gray-800/50 border border-gray-700 p-8 lg:p-10 hover:border-green-500/50 transition-colors">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10">
+                <TerminalIcon className="h-6 w-6 text-green-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-white">For Agents</h3>
+            </div>
+            <p className="text-gray-400 mb-8">
+              A powerful CLI and API designed for automation, CI/CD pipelines,
+              and AI agents.
+            </p>
+            <ul className="space-y-4">
+              {agentFeatures.map((feature) => (
+                <li key={feature.name} className="flex items-center gap-3">
+                  <CheckCircleIcon className="h-5 w-5 text-green-400 flex-shrink-0" />
+                  <span className="text-gray-300">{feature.name}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/faq.tsx b/apps/web/components/marketing/faq.tsx
index f7e8e99..60ac8ba 100644
--- a/apps/web/components/marketing/faq.tsx
+++ b/apps/web/components/marketing/faq.tsx
@@ -7,73 +7,58 @@ export default function FAQs() {
     () => [
       {
         id: "trial",
-        question: "Do you offer free trial?",
-        answer: "Yes, we offer a 14 days free trial.",
-      },
-      {
-        id: "card",
-        question: "Do I need to enter a credit card to create a page?",
-        answer: "No, you don't need to enter a credit card to create a page.",
+        question: "Do you offer a free trial?",
+        answer:
+          "Yes, 14 days free with no credit card required.",
       },
       {
         id: "can-i-customize-my-page",
         question: "Can I customize my page?",
         answer:
-          "Yes, you can use your custom domain and branding to customize your page.",
-      },
-      {
-        id: "domain",
-        question: "Do you support custom domains?",
-        answer:
-          "Yes, we also provision SSL certificates for your custom domain.",
-      },
-      {
-        id: "is-changes-page-seo-friendly",
-        question: "Is changes.page SEO friendly?",
-        answer:
-          "Yes, our pages are server side rendered, making them fast and search engine friendly.",
+          "Yes. Custom domains with auto-provisioned SSL, plus full branding control over colors, logo, and cover image.",
       },
       {
         id: "can-i-receive-notifications",
         question: "Can users receive notifications about updates?",
         answer:
-          "Yes, users can receive instant email and RSS notifications about updates.",
+          "Yes, via email digests and RSS feeds.",
       },
       {
-        id: "is-changes-page-reliable",
-        question: "Is changes.page reliable?",
+        id: "can-i-automate-my-page",
+        question: "Can I automate my changelog?",
         answer:
-          "Yes, we have an industry-leading 99.9%+ uptime and our systems are highly scalable and redundant.",
+          "Yes. Use the CLI, JSON API, GitHub Actions, or Zapier to publish updates from your pipeline.",
       },
       {
-        id: "can-i-automate-my-page",
-        question: "Can I automate my changelog page?",
+        id: "ai-agents",
+        question: "Can AI agents create changelog posts?",
         answer:
-          "Yes, you can automate your page with the help of Zapier integration.",
+          "Yes. The CLI accepts piped content via stdin with --tags and --status flags, so AI agents can create fully formatted posts programmatically.",
       },
       {
-        id: "can-i-see-audience-analytics",
-        question: "Can I see audience analytics for my page?",
+        id: "cli-required",
+        question: "Do I need the CLI to use Changes.page?",
         answer:
-          "Yes, you can see detailed insights into your page's visitors with metrics such as top referrers, operating systems, and browser information.",
+          "No. The web interface provides full functionality. The CLI and API are additional interfaces for teams that want automation.",
       },
       {
-        id: "md",
-        question: "Do you support markdown?",
-        answer: "Yes, we use a markdown editor for writing posts in your page.",
+        id: "is-changes-page-reliable",
+        question: "Is Changes.page reliable?",
+        answer:
+          "Yes, 99.9%+ uptime with highly scalable and redundant infrastructure.",
       },
     ],
     []
   );
 
   return (
-    <div className="bg-gray-900">
+    <div className="bg-gray-50 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:py-16 lg:px-8">
-        <div className="mx-auto max-w-4xl divide-y divide-white/10">
-          <h2 className="text-2xl font-bold leading-10 tracking-tight text-white hero">
+        <div className="mx-auto max-w-4xl divide-y divide-gray-200 dark:divide-white/10">
+          <h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900 dark:text-white hero">
             Frequently asked questions
           </h2>
-          <dl className="mt-10 space-y-6 divide-y divide-white/10">
+          <dl className="mt-10 space-y-6 divide-y divide-gray-200 dark:divide-white/10">
             {faqs.map((faq) => (
               <Disclosure as="div" key={faq.id} className="pt-6">
                 {({ open }) => (
@@ -81,7 +66,7 @@ export default function FAQs() {
                     <dt>
                       <Disclosure.Button
                         id={faq.id}
-                        className="flex w-full items-start justify-between text-left text-white"
+                        className="flex w-full items-start justify-between text-left text-gray-900 dark:text-white"
                       >
                         <span className="text-base font-semibold leading-7">
                           {faq.question}
@@ -95,8 +80,8 @@ export default function FAQs() {
                         </span>
                       </Disclosure.Button>
                     </dt>
-                    <Disclosure.Panel as="dd" className="mt-2 pr-12">
-                      <p className="text-base leading-7 text-gray-300">
+                    <Disclosure.Panel as="dd" className="mt-2 pr-4 sm:pr-12">
+                      <p className="text-base leading-7 text-gray-600 dark:text-gray-300">
                         {faq.answer}
                       </p>
                     </Disclosure.Panel>
diff --git a/apps/web/components/marketing/features.tsx b/apps/web/components/marketing/features.tsx
index 370c338..cc64fab 100644
--- a/apps/web/components/marketing/features.tsx
+++ b/apps/web/components/marketing/features.tsx
@@ -1,150 +1,193 @@
 import {
   BeakerIcon,
-  CashIcon,
   ChartBarIcon,
-  CheckCircleIcon,
+  CodeIcon,
   CollectionIcon,
-  HeartIcon,
+  GlobeAltIcon,
   LightningBoltIcon,
   MailIcon,
+  PencilIcon,
   StarIcon,
+  TerminalIcon,
+  UserGroupIcon,
 } from "@heroicons/react/solid";
-import Head from "next/head";
-import Image from "next/image";
-import { useMemo } from "react";
-import appScreenshot from "../../public/images/hero/app-screenshot.png";
+import { Tab } from "@headlessui/react";
 
-export default function Features() {
-  const features = useMemo(
-    () => [
+const tabColors = {
+  "For your team": {
+    bg: "bg-indigo-500/10",
+    icon: "text-indigo-600 dark:text-indigo-400",
+    pill: "bg-indigo-600",
+  },
+  "For your pipeline": {
+    bg: "bg-emerald-500/10",
+    icon: "text-emerald-600 dark:text-emerald-400",
+    pill: "bg-emerald-600",
+  },
+  "For your brand": {
+    bg: "bg-violet-500/10",
+    icon: "text-violet-600 dark:text-violet-400",
+    pill: "bg-violet-600",
+  },
+} as const;
+
+const tabs = [
+  {
+    name: "For your team" as const,
+    features: [
       {
-        name: "White-label",
-        description:
-          "Use your custom domain and branding to customize your page.",
-        icon: StarIcon,
+        name: "Rich markdown editor",
+        description: "Full-featured editor with live preview and image uploads.",
+        icon: PencilIcon,
       },
       {
-        name: "SEO friendly & fast",
-        description:
-          "Our pages are server side rendered, making them fast and search engine friendly.",
+        name: "Interactive roadmaps",
+        description: "Public roadmap boards with community voting.",
+        icon: CollectionIcon,
+      },
+      {
+        name: "Scheduling & reactions",
+        description: "Schedule posts and let users react to updates.",
         icon: LightningBoltIcon,
       },
       {
-        name: "Interactive Roadmaps",
-        description:
-          "Build public roadmaps with voting to engage your community and prioritize features together.",
-        icon: CollectionIcon,
+        name: "Audience analytics",
+        description: "Visitor insights with referrers, OS, and browser data.",
+        icon: ChartBarIcon,
       },
       {
-        name: "Notifications",
-        description:
-          "Effortlessly engage users with instant email & RSS notifications of updates.",
-        icon: MailIcon,
+        name: "Team collaboration",
+        description: "Invite members and collaborate on changelogs.",
+        icon: UserGroupIcon,
+      },
+    ],
+  },
+  {
+    name: "For your pipeline" as const,
+    features: [
+      {
+        name: "CLI operations",
+        description: "Full CRUD via the chp CLI from your terminal or CI/CD.",
+        icon: TerminalIcon,
       },
       {
-        name: "Battle-tested reliability",
-        description:
-          "We've an industry leading 99.9%+ uptime and our systems are highly scalable and redundant.",
-        icon: CheckCircleIcon,
+        name: "JSON API & RSS",
+        description: "Your page available as JSON, RSS, and plain text.",
+        icon: CodeIcon,
       },
       {
-        name: "Automate",
-        description:
-          "With the help of Zapier integration you can set your page on autopilot.",
+        name: "GitHub Changelog Agent",
+        description: "AI-powered changelog generation from commits and PRs.",
         icon: BeakerIcon,
       },
       {
-        name: "Audience Analytics",
-        description:
-          "Detailed insights into your page's visitors with metrics like top referrers, operating systems, and browser information.",
-        icon: ChartBarIcon,
+        name: "GitHub Actions",
+        description: "Publish changelogs directly from your workflow.",
+        icon: LightningBoltIcon,
+      },
+      {
+        name: "Zapier automation",
+        description: "Connect to 5,000+ apps and automate your changelog.",
+        icon: BeakerIcon,
+      },
+    ],
+  },
+  {
+    name: "For your brand" as const,
+    features: [
+      {
+        name: "Custom domains + SSL",
+        description: "Your own domain with auto-provisioned SSL certificates.",
+        icon: GlobeAltIcon,
+      },
+      {
+        name: "White-label branding",
+        description: "Customize colors, logo, and cover image.",
+        icon: StarIcon,
       },
       {
-        name: "Designed for developers",
-        description:
-          "Your page is available in plain text, JSON and markdown format letting you easily embed it anywhere.",
-        icon: HeartIcon,
+        name: "SEO friendly",
+        description: "Server-side rendered pages, fast and search optimized.",
+        icon: LightningBoltIcon,
+      },
+      {
+        name: "Email & RSS notifications",
+        description: "Keep users informed with email digests and RSS feeds.",
+        icon: MailIcon,
       },
       {
-        name: "Wallet-friendly",
-        description:
-          "Get your page up and running for just $5 with a 14-day free trial.",
-        icon: CashIcon,
+        name: "React SDK & widget",
+        description: "Embed changelogs anywhere with the SDK or JS widget.",
+        icon: CodeIcon,
       },
     ],
-    []
-  );
+  },
+];
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
 
+export default function Features() {
   return (
-    <div className="bg-gray-900 py-16 sm:py-32">
-      <Head>
-        <script
-          type="module"
-          src="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.esm.js"
-        ></script>
-      </Head>
+    <div className="bg-white dark:bg-gray-950 py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl sm:text-center font-semibold">
-          <h2 className="text-xl leading-8 tracking-tight text-indigo-400">
-            Proudly open-source
+        <div className="max-w-xl">
+          <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl hero">
+            Everything you need to ship updates
           </h2>
-          <p className="mt-2 text-3xl tracking-tight text-white sm:text-4xl hero">
-            An{" "}
-            <span className="underline decoration-yellow-500 text-white">
-              open-source
-            </span>{" "}
-            platform for{" "}
-            <span className="underline decoration-red-500 text-white">
-              changelogs
-            </span>{" "}
-            and{" "}
-            <span className="underline decoration-blue-500 text-white">
-              roadmaps
-            </span>
-            , built for modern teams.
+          <p className="mt-4 text-lg leading-8 text-gray-600 dark:text-gray-400">
+            A complete platform for crafted announcements and automated releases.
           </p>
         </div>
       </div>
-      <div className="hidden lg:block relative overflow-hidden pt-16">
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
-          <Image
-            src={appScreenshot}
-            alt="App screenshot"
-            className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-white/10"
-            width={1216}
-            height={767}
-          />
-          <div className="relative" aria-hidden="true">
-            <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-gray-900 pt-[7%]" />
-          </div>
-        </div>
-      </div>
-      <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
-        <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
-          {features.map((feature) => (
-            <div key={feature.name} className="relative pl-9">
-              <dt className="inline font-semibold text-white">
-                <feature.icon
-                  className="absolute top-1 left-1 h-5 w-5 text-indigo-500"
-                  aria-hidden="true"
-                />
-                {feature.name}
-              </dt>{" "}
-              <dd className="block">{feature.description}</dd>
-            </div>
-          ))}
-        </dl>
-      </div>
 
-      {/* <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
-        <zapier-workflow
-          client-id="rnKv828fHE7sPhcZdGhwqWbIsJkOfhUEh2RAHQw4"
-          theme="dark"
-          intro-copy-display="show"
-          guess-zap-display="show"
-          zap-create-from-scratch-display="show"
-        />
-      </div> */}
+      <div className="mx-auto mt-16 max-w-7xl px-6 lg:px-8">
+        <Tab.Group>
+          <Tab.List className="flex justify-start gap-2 overflow-x-auto pb-2 -mx-6 px-6 sm:mx-0 sm:px-0 sm:overflow-visible">
+            {tabs.map((tab) => (
+              <Tab
+                key={tab.name}
+                className={({ selected }) =>
+                  classNames(
+                    "rounded-full px-5 py-2 text-sm font-semibold transition-colors focus:outline-none whitespace-nowrap",
+                    selected
+                      ? `${tabColors[tab.name].pill} text-white`
+                      : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
+                  )
+                }
+              >
+                {tab.name}
+              </Tab>
+            ))}
+          </Tab.List>
+
+          <Tab.Panels className="mt-12">
+            {tabs.map((tab) => (
+              <Tab.Panel key={tab.name}>
+                <dl className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
+                  {tab.features.map((feature) => (
+                    <div key={feature.name} className="relative pl-12">
+                      <dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                        <div className={`absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-lg ${tabColors[tab.name].bg}`}>
+                          <feature.icon
+                            className={`h-5 w-5 ${tabColors[tab.name].icon}`}
+                            aria-hidden="true"
+                          />
+                        </div>
+                        {feature.name}
+                      </dt>
+                      <dd className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
+                        {feature.description}
+                      </dd>
+                    </div>
+                  ))}
+                </dl>
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/components/marketing/get-started-hero.tsx b/apps/web/components/marketing/get-started-hero.tsx
index 8922072..2f57c7a 100644
--- a/apps/web/components/marketing/get-started-hero.tsx
+++ b/apps/web/components/marketing/get-started-hero.tsx
@@ -3,61 +3,26 @@ import { ROUTES } from "../../data/routes.data";
 
 export default function GetStartedHero() {
   return (
-    <div className="relative isolate overflow-hidden bg-gray-900">
-      <div className="py-24 px-6 sm:px-6 sm:py-32 max-w-6xl mx-auto lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <h2 className="text-4xl font-bold tracking-tight text-white hero">
-            Ready to dive in?
-            <br />
-            Get started with a free trial.
+    <div className="bg-white dark:bg-gray-950 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="max-w-xl">
+          <h2 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white hero">
+            Start shipping updates today
           </h2>
-          <p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">
-            Whether you&apos;re a small startup or a large enterprise, our
-            platform is designed to meet your needs.
+          <p className="mt-4 text-lg leading-8 text-gray-600 dark:text-gray-400">
+            14-day free trial. No credit card required.
           </p>
-          <div className="mt-10 flex items-center justify-center gap-x-6">
+
+          <div className="mt-10">
             <Link
               href={ROUTES.PAGES}
-              className="rounded-md bg-white px-3.5 py-1.5 text-base font-semibold leading-7 text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              className="rounded-md bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-colors"
             >
-              Get Started
+              Create your page
             </Link>
-            {/* <Link
-              href={ROUTES.PRICING}
-              className="text-base font-semibold leading-7 text-white"
-            >
-              Learn more<span aria-hidden="true">→</span>
-            </Link> */}
           </div>
         </div>
       </div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 1024 1024"
-        className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
-        aria-hidden="true"
-      >
-        <circle
-          cx={512}
-          cy={512}
-          r={512}
-          fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
-          fillOpacity="0.7"
-        />
-        <defs>
-          <radialGradient
-            id="8d958450-c69f-4251-94bc-4e091a323369"
-            cx={0}
-            cy={0}
-            r={1}
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(512 512) rotate(90) scale(512)"
-          >
-            <stop stopColor="#7775D6" />
-            <stop offset={1} stopColor="#E935C1" stopOpacity={0} />
-          </radialGradient>
-        </defs>
-      </svg>
     </div>
   );
 }
diff --git a/apps/web/components/marketing/hero.tsx b/apps/web/components/marketing/hero.tsx
index 700f1b7..573a6a2 100644
--- a/apps/web/components/marketing/hero.tsx
+++ b/apps/web/components/marketing/hero.tsx
@@ -1,177 +1,206 @@
 import { ChevronRightIcon } from "@heroicons/react/solid";
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
 import { ROUTES } from "../../data/routes.data";
 import capture from "../../public/images/hero/capture.png";
-import appLogo from "../../public/images/logo.png";
 import { Post } from "@changespage/react";
 const version = require("../../package.json").version;
 
+function AppScreenshot() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-white/10 overflow-hidden shadow-2xl">
+      <Image
+        src={capture}
+        alt="Changes.page changelog with timeline posts, reactions, and email subscriptions"
+        width={800}
+        height={762}
+        className="w-full"
+        priority
+      />
+    </div>
+  );
+}
+
+function TerminalMockup() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-white/10 bg-gray-950 overflow-hidden shadow-2xl h-full flex flex-col">
+      <div className="flex items-center gap-2 px-4 py-2.5 bg-gray-900/60 border-b border-white/5">
+        <div className="flex gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-gray-700" />
+          <div className="w-2.5 h-2.5 rounded-full bg-gray-700" />
+          <div className="w-2.5 h-2.5 rounded-full bg-gray-700" />
+        </div>
+        <div className="flex-1 flex justify-center">
+          <span className="text-xs text-gray-500 font-mono">~/ project</span>
+        </div>
+      </div>
+      <div className="p-4 sm:p-5 font-mono text-xs sm:text-sm leading-normal overflow-x-auto flex-1">
+        <div className="space-y-0.5">
+          <div>
+            <span className="text-green-400">$ </span>
+            <span className="text-white">chp posts create \</span>
+          </div>
+          <div className="pl-4">
+            <span className="text-indigo-300">--title </span>
+            <span className="text-yellow-300">&quot;v2.4.0 Release&quot;</span>
+            <span className="text-white"> \</span>
+          </div>
+          <div className="pl-4">
+            <span className="text-indigo-300">--tags </span>
+            <span className="text-white">new,improvement \</span>
+          </div>
+          <div className="pl-4">
+            <span className="text-indigo-300">--status </span>
+            <span className="text-white">published \</span>
+          </div>
+          <div className="pl-4">
+            <span className="text-indigo-300">--body </span>
+            <span className="text-yellow-300">&quot;## What&apos;s New</span>
+          </div>
+          <div className="pl-4">
+            <span className="text-yellow-300">- Dark mode support</span>
+          </div>
+          <div className="pl-4">
+            <span className="text-yellow-300">- Faster page loads&quot;</span>
+          </div>
+        </div>
+
+        <div className="mt-5 pt-4 border-t border-white/5">
+          <div className="text-green-400 mb-3">
+            &#10003; Post published successfully
+          </div>
+          <div className="text-gray-600 space-y-0.5">
+            <div>
+              <span className="text-gray-500">&quot;id&quot;</span>
+              <span className="text-gray-600">{`: `}</span>
+              <span className="text-gray-400">&quot;post_k8f2...&quot;</span>
+            </div>
+            <div>
+              <span className="text-gray-500">&quot;title&quot;</span>
+              <span className="text-gray-600">{`: `}</span>
+              <span className="text-gray-400">&quot;v2.4.0 Release&quot;</span>
+            </div>
+            <div>
+              <span className="text-gray-500">&quot;status&quot;</span>
+              <span className="text-gray-600">{`: `}</span>
+              <span className="text-green-400/70">&quot;published&quot;</span>
+            </div>
+            <div>
+              <span className="text-gray-500">&quot;url&quot;</span>
+              <span className="text-gray-600">{`: `}</span>
+              <span className="text-indigo-400/70">&quot;hey.changes.page/post/v240&quot;</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-5">
+          <span className="text-green-400">$ </span>
+          <span className="text-gray-600">|</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CopyableCommand() {
+  const [copied, setCopied] = useState(false);
+  const command = "npm install -g @changespage/cli";
+
+  return (
+    <button
+      onClick={() => {
+        navigator.clipboard.writeText(command);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }}
+      className="group flex items-center gap-3 rounded-lg border border-gray-300 dark:border-gray-700 px-4 py-2.5 font-mono text-sm text-gray-500 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+    >
+      <span className="text-indigo-500 dark:text-green-400">$</span>
+      <span>{command}</span>
+      <span className="text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-400 transition-colors">
+        {copied ? (
+          <svg className="h-4 w-4 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        ) : (
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+        )}
+      </span>
+    </button>
+  );
+}
+
 export default function Hero({
-  stars = null,
   latestPost = null,
 }: {
-  stars?: string | null;
   latestPost: Post | null;
 }) {
   return (
-    <div className="relative isolate overflow-hidden bg-gray-900">
-      <svg
-        className="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
-        aria-hidden="true"
-      >
-        <defs>
-          <pattern
-            id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
-            width={200}
-            height={200}
-            x="50%"
-            y={-1}
-            patternUnits="userSpaceOnUse"
-          >
-            <path d="M.5 200V.5H200" fill="none" />
-          </pattern>
-        </defs>
-        <svg x="50%" y={-1} className="overflow-visible fill-gray-800/20">
-          <path
-            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
-            strokeWidth={0}
-          />
-        </svg>
-        <rect
-          width="100%"
-          height="100%"
-          strokeWidth={0}
-          fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
-        />
-      </svg>
-      <svg
-        viewBox="0 0 1108 632"
-        aria-hidden="true"
-        className="absolute top-10 left-[calc(50%-4rem)] -z-10 w-[69.25rem] max-w-none transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
-      >
-        <path
-          fill="url(#175c433f-44f6-4d59-93f0-c5c51ad5566d)"
-          fillOpacity=".2"
-          d="M235.233 402.609 57.541 321.573.83 631.05l234.404-228.441 320.018 145.945c-65.036-115.261-134.286-322.756 109.01-230.655C968.382 433.026 1031 651.247 1092.23 459.36c48.98-153.51-34.51-321.107-82.37-385.717L810.952 324.222 648.261.088 235.233 402.609Z"
-        />
-        <defs>
-          <linearGradient
-            id="175c433f-44f6-4d59-93f0-c5c51ad5566d"
-            x1="1220.59"
-            x2="-85.053"
-            y1="432.766"
-            y2="638.714"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#4F46E5" />
-            <stop offset={1} stopColor="#80CAFF" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <div className="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:py-40 lg:px-8">
-        <div className="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
-          <div className="mt-24 sm:mt-32 lg:mt-12">
-            <Image
-              className="hidden lg:block h-11"
-              src={appLogo}
-              alt="changes.page"
-              width={44}
-              height={44}
-            />
-
-            <div className="mt-24 sm:mt-32 lg:mt-16">
+    <div className="relative overflow-hidden bg-gray-50 dark:bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:py-40 lg:px-8">
+        <div className="max-w-2xl">
+          {latestPost && (
+            <div className="mb-8">
               <Link
                 href="/changelog"
                 rel="noopener noreferrer"
-                className="inline-flex space-x-6"
+                className="inline-flex items-center gap-3"
               >
-                <span className="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-400 ring-1 ring-inset ring-indigo-500/20">
+                <span className="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400 ring-1 ring-inset ring-indigo-500/20">
                   NEW
                 </span>
-                <span className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-300">
-                  {latestPost ? (
-                    <span>{latestPost.title}</span>
-                  ) : (
-                    <span>Just shipped v{version}</span>
-                  )}
+                <span className="inline-flex items-center gap-1.5 text-sm font-medium leading-6 text-gray-600 dark:text-gray-300 truncate max-w-[200px] sm:max-w-none">
+                  <span className="truncate">{latestPost.title}</span>
                   <ChevronRightIcon
-                    className="h-5 w-5 text-gray-500"
+                    className="h-4 w-4 text-gray-400 dark:text-gray-500"
                     aria-hidden="true"
                   />
                 </span>
               </Link>
             </div>
-          </div>
-          <p className="mt-2 text-3xl font-semibold tracking-tight text-white sm:text-4xl hero">
-            <span className="underline decoration-blue-500 text-white">
-              Changelogs
-            </span>{" "}
-            and{" "}
-            <span className="underline decoration-blue-500 text-white">
-              roadmaps
-            </span>{" "}
-            made{" "}
-            <span className="underline decoration-yellow-500 text-white">
-              smarter, faster,
-            </span>{" "}
+          )}
+
+          <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl hero">
+            The changelog platform for{" "}
+            <span className="italic text-indigo-600 dark:text-indigo-400">humans</span>{" "}
             and{" "}
-            <span className="underline decoration-red-500 text-white">
-              user-focused.
-            </span>
-          </p>
+            <span className="italic text-indigo-600 dark:text-indigo-400">agents</span>
+          </h1>
 
-          <p className="mt-6 text-lg leading-8 text-gray-300">
-            Our open-source platform empowers you to share what you&apos;ve
-            built with changelogs and what&apos;s coming next with roadmaps.
-            Notify users via email, gather feedback with voting, track
-            analytics, and enjoy a host of additional features. Kickstart your
-            page in just a few minutes!
+          <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400 max-w-xl">
+            Craft changelogs in a beautiful editor or push them from your CI/CD
+            pipeline. One platform, two interfaces.
           </p>
 
-          <div className="mt-10 flex items-center gap-x-6">
+          <div className="mt-10 flex flex-col sm:flex-row items-start gap-4">
             <Link
               href={ROUTES.PAGES}
-              className="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+              className="rounded-md bg-indigo-600 px-5 py-2.5 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-colors"
             >
-              Get Started
+              Get Started Free
             </Link>
 
-            <Link
-              href="https://github.com/techulus/changes-page"
-              target="_blank"
-              rel="noreferrer"
-              className="flex"
-            >
-              <div className="flex h-10 w-10 items-center justify-center space-x-2 rounded-md border border-muted bg-white">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  className="h-5 w-5 text-foreground"
-                >
-                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
-                </svg>
-              </div>
-              <div className="flex items-center">
-                <div className="h-4 w-4 border-y-8 border-l-0 border-r-8 border-solid border-muted border-y-transparent"></div>
-                <div className="flex h-10 items-center rounded-md border border-muted px-4 font-medium bg-white">
-                  {stars} stars on GitHub
-                </div>
-              </div>
-            </Link>
+            <div className="hidden sm:block">
+              <CopyableCommand />
+            </div>
           </div>
         </div>
-        <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mt-0 lg:mr-0 lg:max-w-none lg:flex-none xl:ml-32">
-          <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
-            <Image
-              src={capture}
-              alt="App screenshot"
-              width={800}
-              height={762}
-              className="w-[40rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
-              priority
-            />
+
+        <div className="mt-20 grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
+          <div>
+            <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 mb-3">
+              Web Editor
+            </p>
+            <AppScreenshot />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-emerald-600 dark:text-green-400 mb-3">
+              CLI &amp; API
+            </p>
+            <TerminalMockup />
           </div>
         </div>
       </div>
diff --git a/apps/web/components/marketing/how-it-works.tsx b/apps/web/components/marketing/how-it-works.tsx
new file mode 100644
index 0000000..301ed7f
--- /dev/null
+++ b/apps/web/components/marketing/how-it-works.tsx
@@ -0,0 +1,67 @@
+export default function HowItWorks() {
+  return (
+    <div className="bg-gray-900 py-24 sm:py-32 overflow-hidden">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl hero">
+            Different inputs. Same beautiful output.
+          </h2>
+          <p className="mt-4 text-lg leading-8 text-gray-300">
+            However your content arrives, your users see the same beautifully
+            formatted, branded changelog page.
+          </p>
+        </div>
+
+        <div className="mt-20 relative">
+          <div className="hidden lg:block absolute left-1/4 right-1/4 top-[120px] h-px bg-gradient-to-r from-indigo-500/50 via-gray-700 to-green-500/50" />
+          <div className="hidden lg:block absolute left-1/2 top-[120px] bottom-[80px] w-px bg-gradient-to-b from-gray-700 to-indigo-500/50" />
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24">
+            <div className="text-center">
+              <div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-indigo-500/10 border-2 border-indigo-500/30 mb-6">
+                <span className="text-2xl font-bold text-indigo-400">1</span>
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-3">
+                Write in the editor
+              </h3>
+              <p className="text-gray-400 max-w-sm mx-auto">
+                Open the dashboard, use the markdown editor, add images, set
+                tags, and schedule publishing — all from the web UI.
+              </p>
+            </div>
+
+            <div className="text-center">
+              <div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10 border-2 border-green-500/30 mb-6">
+                <span className="text-2xl font-bold text-green-400">1</span>
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-3">
+                Push from the terminal
+              </h3>
+              <p className="text-gray-400 max-w-sm mx-auto">
+                Run{" "}
+                <code className="text-green-400 bg-gray-800 px-1.5 py-0.5 rounded text-sm">
+                  chp posts create
+                </code>{" "}
+                from your CI/CD pipeline. Pipe in release notes from your build
+                system.
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-16 text-center">
+            <div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/20 to-green-500/20 border-2 border-indigo-500/30 mb-6">
+              <span className="text-2xl font-bold text-white">2</span>
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">
+              Your changelog, published
+            </h3>
+            <p className="text-gray-400 max-w-md mx-auto">
+              Same beautifully formatted page. Same email notifications.
+              Same branded experience for your users.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/open-source-banner.tsx b/apps/web/components/marketing/open-source-banner.tsx
new file mode 100644
index 0000000..868251a
--- /dev/null
+++ b/apps/web/components/marketing/open-source-banner.tsx
@@ -0,0 +1,51 @@
+import Link from "next/link";
+
+export default function OpenSourceBanner({
+  stars,
+}: {
+  stars: string | null;
+}) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-950 py-20 sm:py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="rounded-2xl border border-gray-200 dark:border-white/[0.06] bg-white dark:bg-white/[0.02] px-8 py-12 sm:px-12 sm:py-16">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-8">
+            <div className="max-w-md">
+              <p className="text-sm font-medium tracking-wider uppercase text-indigo-600 dark:text-indigo-400 mb-3">
+                Open Source
+              </p>
+              <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl hero">
+                Built in public
+              </h2>
+              <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-400">
+                Star us on GitHub, report issues, or contribute directly.
+              </p>
+            </div>
+
+            <Link
+              href="https://github.com/techulus/changes-page"
+              target="_blank"
+              rel="noreferrer"
+              className="group inline-flex items-center gap-3 self-start rounded-lg border border-gray-300 dark:border-white/10 bg-gray-50 dark:bg-white/[0.04] px-6 py-3 text-base font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/[0.08] hover:border-gray-400 dark:hover:border-white/20 transition-colors"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                className="h-5 w-5 text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white transition-colors"
+              >
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+              Star on GitHub
+              {stars ? (
+                <span className="inline-flex items-center rounded-md bg-gray-200 dark:bg-white/10 px-2.5 py-0.5 text-sm tabular-nums">
+                  {stars}
+                </span>
+              ) : null}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/pricing-section.tsx b/apps/web/components/marketing/pricing-section.tsx
index fdef8c4..d873e6a 100644
--- a/apps/web/components/marketing/pricing-section.tsx
+++ b/apps/web/components/marketing/pricing-section.tsx
@@ -1,8 +1,6 @@
 import { CheckIcon } from "@heroicons/react/solid";
-import Image from "next/image";
 import Link from "next/link";
 import { ROUTES } from "../../data/routes.data";
-import background from "../../public/images/hero/pricing.jpg";
 
 interface Addon {
   price: number;
@@ -20,123 +18,97 @@ export default function PricingSection({
 }: PricingSectionProps) {
   const priceInDollars = unit_amount / 100;
   const features = [
-    "Email notifications (add-on)",
+    "Markdown editor with image uploads",
     "Public roadmap with community voting",
     "Post scheduling, reactions & pinned posts",
     "Team collaboration & member invites",
     "Custom domain + SSL",
     "GitHub Changelog Agent",
-    "Markdown editor with image uploads",
     "Audience analytics",
     "JSON API & RSS feed",
     "React SDK & embeddable widget",
     "Zapier & GitHub integration",
-    "SEO friendly",
+    "CLI + API access",
+    "Email notifications (add-on)",
   ];
 
   return (
-    <div className="bg-gradient-to-b from-slate-900 via-slate-900 to-gray-900">
-      <div className="relative overflow-hidden pt-24 pb-96 lg:mt-0">
-        <div>
-          <Image
-            className="absolute top-0 left-1/2 w-[1440px] lg:w-full max-w-none rotate-180 -translate-x-1/2 opacity-70"
-            src={background}
-            alt="Grid"
-            width={1440}
-            height={693}
-          />
+    <div className="bg-gray-50 dark:bg-gray-900 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="max-w-xl">
+          <h2 className="text-lg font-semibold leading-8 text-indigo-600 dark:text-indigo-400">
+            Simple Pricing
+          </h2>
+          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white hero">
+            One plan. Everything included.
+          </p>
         </div>
-        <div className="relative mx-auto max-w-7xl px-6 text-center lg:px-8">
-          <div className="mx-auto max-w-2xl lg:max-w-4xl">
-            <h2 className="text-lg font-semibold leading-8 text-indigo-200">
-              Simple Pricing
-            </h2>
-            <p className="mt-2 text-4xl font-bold tracking-tight text-white hero">
-              Everything you need for just ${priceInDollars}
+
+        <div className="mx-auto mt-16 max-w-2xl rounded-3xl border border-gray-200 dark:border-gray-700 lg:mx-0 lg:flex lg:max-w-none bg-white dark:bg-gray-950">
+          <div className="p-8 sm:p-10 lg:flex-auto">
+            <ul
+              role="list"
+              className="grid grid-cols-1 gap-2 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:grid-cols-2 sm:gap-3"
+            >
+              {features.map((feature) => (
+                <li key={feature} className="flex gap-x-3">
+                  <CheckIcon
+                    className="h-6 w-5 flex-none text-indigo-600 dark:text-indigo-500"
+                    aria-hidden="true"
+                  />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+            <p className="mt-6 text-sm text-gray-500">
+              Fair usage applies to storage and bandwidth per page. We
+              don&apos;t impose hard limits, but may reach out if usage
+              significantly exceeds typical patterns.
             </p>
           </div>
-        </div>
-      </div>
-
-      <div className="flow-root pb-32 lg:pb-40">
-        <div className="relative -mt-80">
-          <div className="relative z-10 mx-auto max-w-7xl px-6">
-            <div className="mx-auto mt-16 max-w-2xl rounded-3xl border-2 border-indigo-500 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none bg-gray-900">
-              <div className="p-8 sm:p-10 lg:flex-auto">
-                <div className="flex items-center gap-x-4">
-                  <h4 className="flex-none text-sm font-semibold leading-6 text-indigo-500">
-                    Add-ons are billed separately
-                  </h4>
-                  <div className="h-px flex-auto bg-gray-700" />
+          <div className="p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
+            <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 py-6 text-center ring-1 ring-inset ring-gray-200 dark:ring-gray-800 lg:flex lg:flex-col lg:justify-center lg:py-20">
+              <div className="mx-auto max-w-xs px-8">
+                <div className="mt-6 flex items-baseline justify-center gap-x-2">
+                  <p className="hero mt-4 flex items-baseline text-5xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+                    ${priceInDollars}
+                    <span className="text-lg font-semibold leading-8 tracking-normal text-gray-500 dark:text-gray-400">
+                      /page /mo
+                    </span>
+                  </p>
+                  <span className="text-sm font-semibold leading-6 tracking-wide text-gray-500">
+                    USD
+                  </span>
                 </div>
-                <ul
-                  role="list"
-                  className="mt-6 grid grid-cols-1 gap-2 text-sm leading-6 text-gray-200 sm:grid-cols-2 sm:gap-3"
-                >
-                  {features.map((feature) => (
-                    <li key={feature} className="flex gap-x-3">
-                      <CheckIcon
-                        className="h-6 w-5 flex-none text-indigo-500"
-                        aria-hidden="true"
-                      />
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-                <p className="mt-6 text-sm text-gray-400">
-                  <span className="font-bold text-indigo-400">
-                    Fair usage applies to storage and bandwidth per page.
-                  </span>{" "}
-                  We don&apos;t impose hard limits, but we may reach out if your
-                  usage significantly exceeds typical patterns. We&apos;re here
-                  to support growing teams, not restrict them.
-                </p>
-              </div>
-              <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
-                <div className="rounded-2xl bg-gray-950 py-6 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-20">
-                  <div className="mx-auto max-w-xs px-8">
-                    <div className="mt-6 flex items-baseline justify-center gap-x-2">
-                      <p className="hero mt-4 flex items-baseline text-5xl font-bold tracking-tight text-gray-100">
-                        ${priceInDollars}
-                        <span className="text-lg font-semibold leading-8 tracking-normal text-gray-400">
-                          /page /mo
-                        </span>
-                      </p>
-                      <span className="text-sm font-semibold leading-6 tracking-wide text-gray-500">
-                        USD
-                      </span>
-                    </div>
-
-                    {addons?.length ? (
-                      <div className="mt-4">
-                        <p className="text-base font-medium text-gray-300">
-                          + Optional Add-Ons
-                        </p>
 
-                        {addons.map(({ price, name }) => (
-                          <p key={name}>
-                            <span className="text-lg font-bold tracking-tight text-white">
-                              ${price}
-                            </span>{" "}
-                            <span className="text-base font-medium text-gray-300">
-                              /{name}
-                            </span>
-                          </p>
-                        ))}
-                      </div>
-                    ) : null}
-
-                    <Link
-                      href={ROUTES.PAGES}
-                      className="mt-6 inline-block w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-center text-sm font-semibold leading-5 text-white shadow-md hover:bg-indigo-700"
-                    >
-                      Start free trial
-                    </Link>
-                    <p className="text-xs mt-2 text-gray-400">
-                      14-days free trial
+                {addons?.length ? (
+                  <div className="mt-4">
+                    <p className="text-base font-medium text-gray-500 dark:text-gray-400">
+                      + Optional Add-Ons
                     </p>
+
+                    {addons.map(({ price, name }) => (
+                      <p key={name}>
+                        <span className="text-lg font-bold tracking-tight text-gray-900 dark:text-white">
+                          ${price}
+                        </span>{" "}
+                        <span className="text-base font-medium text-gray-500 dark:text-gray-400">
+                          /{name}
+                        </span>
+                      </p>
+                    ))}
                   </div>
-                </div>
+                ) : null}
+
+                <Link
+                  href={ROUTES.PAGES}
+                  className="mt-6 inline-block w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-center text-sm font-semibold leading-5 text-white shadow-sm hover:bg-indigo-500 transition-colors"
+                >
+                  Start free trial
+                </Link>
+                <p className="text-xs mt-2 text-gray-500">
+                  14-day free trial, no credit card required
+                </p>
               </div>
             </div>
           </div>
diff --git a/apps/web/data/marketing.data.ts b/apps/web/data/marketing.data.ts
index 7b2feff..5b9c654 100644
--- a/apps/web/data/marketing.data.ts
+++ b/apps/web/data/marketing.data.ts
@@ -1,6 +1,7 @@
-export const TAGLINE = "Changelogs made smarter, faster, and user-focused.";
+export const TAGLINE = "The changelog platform for humans and agents.";
 export const SUBTITLE =
-  "The ultimate solution for keeping your customers and stakeholders informed about the latest updates and news from your business.";
+  "Create changelogs and roadmaps through a beautiful web editor or automate them via CLI and API.";
 
-export const DEFAULT_TITLE = "changes.page | Changelog simplified.";
+export const DEFAULT_TITLE =
+  "changes.page | Changelog Platform for Humans and Agents";
 export const MARKETING_TITLE = "changes.page blog";
diff --git a/apps/web/pages/_document.js b/apps/web/pages/_document.js
index 835eacc..d016c62 100644
--- a/apps/web/pages/_document.js
+++ b/apps/web/pages/_document.js
@@ -5,7 +5,8 @@ export default class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          <meta name="theme-color" content="#262626" />
+          <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
+          <meta name="theme-color" content="#262626" media="(prefers-color-scheme: dark)" />
           <meta name="author" content="Techulus" />
 
           <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -61,6 +62,16 @@ export default class MyDocument extends Document {
             media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
             rel="apple-touch-startup-image"
           />
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossOrigin="anonymous"
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
+            rel="stylesheet"
+          />
           <link
             rel="stylesheet"
             href="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.css"
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index 0fb4500..1c82406 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -5,6 +5,7 @@ import HeaderComponent from "../components/layout/header.component";
 import Features from "../components/marketing/features";
 import GetStartedHero from "../components/marketing/get-started-hero";
 import Hero from "../components/marketing/hero";
+import OpenSourceBanner from "../components/marketing/open-source-banner";
 import PricingSection from "../components/marketing/pricing-section";
 import { createChangesPageClient } from "@changespage/react";
 import { InferGetStaticPropsType } from "next";
@@ -73,16 +74,15 @@ export default function Index({
   latestPost,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <div className="h-full dark:bg-gray-800">
+    <div className="h-full bg-white dark:bg-gray-900">
       <Head>
         <title>
-          Changes.page - Changelog & Roadmap Platform for Product Teams
+          Changes.page — The Changelog Platform for Humans and Agents
         </title>
         <meta
           name="description"
-          content="Create beautiful changelogs and interactive roadmaps. Share what you've built and what's coming next. Notify users, gather feedback with voting, and track engagement with analytics."
+          content="Create changelogs and roadmaps through a beautiful web editor or automate them via CLI and API. Open-source, designed for product teams and CI/CD pipelines."
         />
-        {/* FAQ Schema for SEO */}
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{
@@ -122,14 +122,6 @@ export default function Index({
                     text: "Yes, we also provision SSL certificates for your custom domain.",
                   },
                 },
-                {
-                  "@type": "Question",
-                  name: "Is changes.page SEO friendly?",
-                  acceptedAnswer: {
-                    "@type": "Answer",
-                    text: "Yes, our pages are server side rendered, making them fast and search engine friendly.",
-                  },
-                },
                 {
                   "@type": "Question",
                   name: "Can users receive notifications about updates?",
@@ -138,44 +130,20 @@ export default function Index({
                     text: "Yes, users can receive instant email and RSS notifications about updates.",
                   },
                 },
-                {
-                  "@type": "Question",
-                  name: "Is changes.page reliable?",
-                  acceptedAnswer: {
-                    "@type": "Answer",
-                    text: "Yes, we have an industry-leading 99.9%+ uptime and our systems are highly scalable and redundant.",
-                  },
-                },
                 {
                   "@type": "Question",
                   name: "Can I automate my changelog page?",
                   acceptedAnswer: {
                     "@type": "Answer",
-                    text: "Yes, you can automate your page with the help of Zapier integration.",
-                  },
-                },
-                {
-                  "@type": "Question",
-                  name: "Can I see audience analytics for my page?",
-                  acceptedAnswer: {
-                    "@type": "Answer",
-                    text: "Yes, you can see detailed insights into your page's visitors with metrics such as top referrers, operating systems, and browser information.",
-                  },
-                },
-                {
-                  "@type": "Question",
-                  name: "Do you support markdown?",
-                  acceptedAnswer: {
-                    "@type": "Answer",
-                    text: "Yes, we use a markdown editor for writing posts in your page.",
+                    text: "Yes, you can automate your page using the CLI, API, GitHub Actions, or Zapier integration.",
                   },
                 },
                 {
                   "@type": "Question",
-                  name: "Do you support roadmaps?",
+                  name: "Can AI agents create changelog posts?",
                   acceptedAnswer: {
                     "@type": "Answer",
-                    text: "Yes, you can create interactive roadmap boards with voting functionality to engage your community and prioritize features together.",
+                    text: "Yes. The CLI is designed for automation. AI agents can pipe content via stdin and use the --tags and --status flags to create fully formatted posts programmatically.",
                   },
                 },
               ],
@@ -186,10 +154,9 @@ export default function Index({
       <HeaderComponent />
 
       <main>
-        <section>
-          <Hero stars={stars} latestPost={latestPost} />
-        </section>
+        <Hero latestPost={latestPost} />
         <Features />
+        <OpenSourceBanner stars={stars} />
         <PricingSection addons={addons} unit_amount={unit_amount} />
         <GetStartedHero />
         <FAQs />
diff --git a/apps/web/pages/pricing.tsx b/apps/web/pages/pricing.tsx
index a6b3c47..48c2922 100644
--- a/apps/web/pages/pricing.tsx
+++ b/apps/web/pages/pricing.tsx
@@ -12,14 +12,14 @@ export default function Pricing({ unit_amount, addons }) {
 
       <PricingSection unit_amount={unit_amount} addons={addons} />
 
-      <div className="bg-gray-900 py-8 text-center">
-        <p className="text-sm text-gray-400">
+      <div className="bg-white dark:bg-gray-900 py-8 text-center">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
           Questions about pricing?{" "}
           <a
             href="https://techulus.atlassian.net/servicedesk/customer/portal/1/group/1/create/2"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-indigo-400 hover:text-indigo-300"
+            className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
           >
             Contact support
           </a>
diff --git a/apps/web/styles/global.css b/apps/web/styles/global.css
index 5e6602e..d8c3e22 100644
--- a/apps/web/styles/global.css
+++ b/apps/web/styles/global.css
@@ -13,13 +13,17 @@ div#__next > div {
 html,
 body,
 div#__next {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 
 ::selection {
-  color: #d0d6e0;
-  background: #4f52b4;
+  color: #fff;
+  background: #4f46e5;
+}
+
+.hero {
+  font-family: 'Instrument Serif', Georgia, serif;
 }
 
 .editor-preview-full,
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 10d0aa6..d6a4cd4 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
     {
       // emit base + dark variants for the used families and shades (incl. preview 500)
       pattern:
-        /(bg|text|border)-(blue|indigo|purple|pink|red|orange|yellow|green|emerald|cyan)-(100|200|500|800|900)/,
+        /(bg|text|border)-(blue|indigo|purple|violet|pink|red|orange|yellow|green|emerald|teal|cyan)-(100|200|400|500|600|800|900)/,
       variants: ["dark"],
     },
     // Gray backgrounds/borders used globally
@@ -35,6 +35,11 @@ module.exports = {
           "Arial",
           "sans-serif",
         ],
+        display: [
+          "'Instrument Serif'",
+          "Georgia",
+          "serif",
+        ],
       },
     },
   },

From b12fc2994cb876ee23e605b4335e06e15f3fc6cb Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjunkomath@gmail.com>
Date: Thu, 26 Mar 2026 20:00:57 +1100
Subject: [PATCH 2/2] Address CR

---
 .../components/layout/footer.component.tsx    | 26 +++++++++----------
 apps/web/pages/_document.js                   |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/layout/footer.component.tsx b/apps/web/components/layout/footer.component.tsx
index f5cb496..bc2f145 100644
--- a/apps/web/components/layout/footer.component.tsx
+++ b/apps/web/components/layout/footer.component.tsx
@@ -86,7 +86,7 @@ export default function FooterComponent() {
       />
 
       <footer
-        className="bg-gray-900 border-t border-gray-200 dark:border-white/10"
+        className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-white/10"
         aria-labelledby="footer-heading"
       >
         <div className="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
@@ -115,7 +115,7 @@ export default function FooterComponent() {
                   <a
                     key={item.name}
                     href={item.href}
-                    className="text-gray-500 hover:text-gray-400"
+                    className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
                   >
                     <span className="sr-only">{item.name}</span>
                     <item.icon className="h-6 w-6" aria-hidden="true" />
@@ -126,7 +126,7 @@ export default function FooterComponent() {
             <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
               <div className="md:grid md:grid-cols-2 md:gap-8">
                 <div>
-                  <h3 className="text-sm font-semibold leading-6 text-white">
+                  <h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
                     Integrations
                   </h3>
                   <ul role="list" className="mt-6 space-y-2">
@@ -134,7 +134,7 @@ export default function FooterComponent() {
                       <li key={item.name}>
                         <Link
                           href={item.href}
-                          className="text-sm leading-6 text-gray-300 hover:text-white"
+                          className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                           target="_blank"
                           rel="noreferrer noopener"
                         >
@@ -145,7 +145,7 @@ export default function FooterComponent() {
                   </ul>
                 </div>
                 <div className="mt-10 md:mt-0">
-                  <h3 className="text-sm font-semibold leading-6 text-white">
+                  <h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
                     Support
                   </h3>
                   <ul role="list" className="mt-6 space-y-2">
@@ -153,7 +153,7 @@ export default function FooterComponent() {
                       <li key={item.name}>
                         <a
                           href={item.href}
-                          className="text-sm leading-6 text-gray-300 hover:text-white"
+                          className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                           target="_blank"
                           rel="noreferrer"
                         >
@@ -167,7 +167,7 @@ export default function FooterComponent() {
                           // @ts-ignore
                           window?.ChangesPage?.openWidget();
                         }}
-                        className="text-sm leading-6 text-gray-300 hover:text-white changes-page-btn"
+                        className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white changes-page-btn"
                       >
                         What&apos;s New
                       </button>
@@ -177,7 +177,7 @@ export default function FooterComponent() {
               </div>
               <div className="md:grid md:grid-cols-2 md:gap-8">
                 <div>
-                  <h3 className="text-sm font-semibold leading-6 text-white">
+                  <h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
                     Resources
                   </h3>
                   <ul role="list" className="mt-6 space-y-2">
@@ -185,7 +185,7 @@ export default function FooterComponent() {
                       <li key={item.name}>
                         <Link
                           href={item.href}
-                          className="text-sm leading-6 text-gray-300 hover:text-white"
+                          className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                         >
                           {item.name}
                         </Link>
@@ -194,7 +194,7 @@ export default function FooterComponent() {
                   </ul>
                 </div>
                 <div className="mt-10 md:mt-0">
-                  <h3 className="text-sm font-semibold leading-6 text-white">
+                  <h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
                     Legal
                   </h3>
                   <ul role="list" className="mt-6 space-y-2">
@@ -202,7 +202,7 @@ export default function FooterComponent() {
                       <li key={item.name}>
                         <Link
                           href={item.href}
-                          className="text-sm leading-6 text-gray-300 hover:text-white"
+                          className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                         >
                           {item.name}
                         </Link>
@@ -213,8 +213,8 @@ export default function FooterComponent() {
               </div>
             </div>
           </div>
-          <div className="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
-            <p className="text-xs leading-5 text-gray-400">
+          <div className="mt-16 border-t border-gray-200 dark:border-white/10 pt-8 sm:mt-20 lg:mt-24">
+            <p className="text-xs leading-5 text-gray-500 dark:text-gray-400">
               {version && `v${version} | `} &copy; {new Date().getFullYear()}{" "}
               changes.page, All rights reserved.
             </p>
diff --git a/apps/web/pages/_document.js b/apps/web/pages/_document.js
index d016c62..b2e33c1 100644
--- a/apps/web/pages/_document.js
+++ b/apps/web/pages/_document.js
@@ -6,7 +6,7 @@ export default class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
-          <meta name="theme-color" content="#262626" media="(prefers-color-scheme: dark)" />
+          <meta name="theme-color" content="#171717" media="(prefers-color-scheme: dark)" />
           <meta name="author" content="Techulus" />
 
           <meta name="apple-mobile-web-app-capable" content="yes" />