diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb
index 669c7270a..94386539e 100644
--- a/app/controllers/static_pages_controller.rb
+++ b/app/controllers/static_pages_controller.rb
@@ -24,6 +24,16 @@ def index
     end
   end
 
+  def hardware
+    if current_user
+      redirect_to root_path
+    else
+      set_homepage_seo_content
+      @home_stats = Cache::HomeStatsJob.perform_now
+      render inertia: "HardwareHome/SignedOut", props: signed_out_props
+    end
+  end
+
   def signin
     return redirect_to root_path if current_user
 
diff --git a/app/javascript/pages/HardwareHome/SignedOut.svelte b/app/javascript/pages/HardwareHome/SignedOut.svelte
new file mode 100644
index 000000000..1d27761f8
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/SignedOut.svelte
@@ -0,0 +1,218 @@
+<script module lang="ts">
+  import MarketingLayout from "../../layouts/MarketingLayout.svelte";
+  export const layout = MarketingLayout;
+</script>
+
+<script lang="ts">
+  import { Link } from "@inertiajs/svelte";
+  import PhilosophySection from "./signedOut/PhilosophySection.svelte";
+  import FeaturesGrid from "./signedOut/FeaturesGrid.svelte";
+  import EditorGrid from "./signedOut/EditorGrid.svelte";
+  import HowItWorks from "./signedOut/HowItWorks.svelte";
+  import FAQSection from "./signedOut/FAQSection.svelte";
+  import CTASection from "./signedOut/CTASection.svelte";
+  import MarketingFooter from "../../components/MarketingFooter.svelte";
+
+  type HomeStats = { seconds_tracked?: number; users_tracked?: number };
+  type FlashMessage = { message: string; class_name: string };
+
+  let {
+    home_stats,
+    flash = [],
+  }: {
+    sign_in_email: boolean;
+    show_dev_tool: boolean;
+    dev_magic_link?: string | null;
+    csrf_token: string;
+    home_stats: HomeStats;
+    flash?: FlashMessage[];
+  } = $props();
+
+  const fmt = new Intl.NumberFormat("en-US");
+  const formatNumber = (v: number) => fmt.format(v);
+  const hoursTracked = $derived(
+    home_stats?.seconds_tracked
+      ? Math.floor(home_stats.seconds_tracked / 3600)
+      : 0,
+  );
+  const usersTracked = $derived(home_stats?.users_tracked ?? 0);
+
+  let flashVisible = $state(false);
+  let flashHiding = $state(false);
+
+  $effect(() => {
+    if (!flash.length) {
+      flashVisible = false;
+      flashHiding = false;
+      return;
+    }
+    flashVisible = true;
+    flashHiding = false;
+    let removeId: ReturnType<typeof setTimeout> | undefined;
+    const hideId = setTimeout(() => {
+      flashHiding = true;
+      removeId = setTimeout(() => {
+        flashVisible = false;
+        flashHiding = false;
+      }, 250);
+    }, 6000);
+    return () => {
+      clearTimeout(hideId);
+      if (removeId) clearTimeout(removeId);
+    };
+  });
+
+  const NAV_LINKS = [
+    { href: "#philosophy", label: "Philosophy" },
+    { href: "#features", label: "Features" },
+    { href: "#integrations", label: "Integrations" },
+    { href: "#faq", label: "FAQ" },
+    {
+      href: "https://github.com/hackclub/hackatime",
+      label: "GitHub",
+      external: true,
+    },
+  ];
+
+  const STATS = $derived([
+    { value: usersTracked, label: "users" },
+    { value: hoursTracked, label: "hours tracked" },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Hackatime - Track your development time</title>
+</svelte:head>
+
+<div class="landing-page min-h-screen w-full bg-darker text-surface-content">
+  {#if flashVisible && flash.length > 0}
+    <div
+      class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[60] w-full max-w-md px-4 space-y-2"
+    >
+      {#each flash as item}
+        <div
+          class="flash-message shadow-lg flash-message--enter {flashHiding
+            ? 'flash-message--leaving'
+            : ''} {item.class_name}"
+        >
+          {item.message}
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <header
+    class="fixed top-0 w-full bg-darker/95 backdrop-blur-sm z-50 border-b border-surface-200/60"
+  >
+    <div
+      class="max-w-[1100px] mx-auto px-6 py-4 flex justify-between items-center"
+    >
+      <a href="/" class="flex items-center gap-3">
+        <img
+          src="/images/new-icon-rounded.png"
+          class="w-10 h-10 rounded-lg"
+          alt="Hackatime"
+        />
+        <span class="font-bold text-2xl tracking-tight">Hackatime</span>
+      </a>
+      <nav
+        class="hidden md:flex gap-8 items-center text-sm font-medium text-secondary"
+      >
+        {#each NAV_LINKS as { href, label, external }}
+          <a
+            {href}
+            target={external ? "_blank" : undefined}
+            class="hover:text-surface-content transition-colors">{label}</a
+          >
+        {/each}
+        <Link
+          href="/signin"
+          class="px-4 py-2 bg-primary text-on-primary rounded-md font-semibold hover:opacity-90 transition-colors"
+        >
+          Sign in
+        </Link>
+      </nav>
+    </div>
+  </header>
+
+  <section class="pt-40 pb-20">
+    <div class="max-w-[900px] mx-auto px-6 text-center">
+      <h1
+        class="text-5xl md:text-6xl font-bold tracking-tight leading-[1.1] mb-6 text-pretty"
+      >
+        The open-source project time tracker
+      </h1>
+      <p
+        class="text-lg md:text-xl text-secondary max-w-[70ch] mx-auto leading-relaxed mb-8"
+      >
+        Hackatime is a free, open-source replacement for WakaTime. Your design
+        habits, project breakdowns and language stats belong to you - not a
+        proprietary database!
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center mb-10">
+        <Link
+          href="/signin"
+          class="px-7 py-3.5 bg-primary text-on-primary rounded-md font-semibold text-base hover:opacity-90 transition-colors"
+        >
+          Start tracking
+        </Link>
+        <Link
+          href="/docs"
+          class="px-7 py-3.5 bg-surface border border-surface-200 text-surface-content rounded-md font-semibold text-base hover:border-primary hover:text-primary transition-colors"
+        >
+          Read the docs
+        </Link>
+      </div>
+
+      {#if hoursTracked > 0 || usersTracked > 0}
+        <div
+          class="flex items-center justify-center gap-8 mb-16 text-secondary text-sm"
+        >
+          {#each STATS as { value, label }}
+            {#if value > 0}
+              <div class="flex flex-col items-center">
+                <span class="text-2xl font-bold text-surface-content"
+                  >{formatNumber(value)}</span
+                >
+                <span>{label}</span>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      {:else}
+        <div class="mb-16"></div>
+      {/if}
+
+      <div
+        class="bg-surface border border-surface-200 rounded-lg shadow-lg overflow-hidden"
+      >
+        <div
+          class="bg-surface-100 px-4 py-3 border-b border-surface-200 flex gap-2"
+        >
+          <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
+          <div class="w-2.5 h-2.5 rounded-full bg-orange"></div>
+          <div class="w-2.5 h-2.5 rounded-full bg-cyan"></div>
+        </div>
+        <div class="bg-surface">
+          <img
+            src="/images/hardware-home.webp"
+            alt="Hackatime Dashboard"
+            class="w-full h-auto block rounded"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <PhilosophySection />
+  <FeaturesGrid />
+  <EditorGrid />
+  <HowItWorks />
+  <FAQSection />
+  <CTASection
+    hoursTracked={formatNumber(hoursTracked)}
+    usersTracked={formatNumber(usersTracked)}
+  />
+
+  <MarketingFooter />
+</div>
diff --git a/app/javascript/pages/HardwareHome/signedOut/AuthForm.svelte b/app/javascript/pages/HardwareHome/signedOut/AuthForm.svelte
new file mode 100644
index 000000000..186be5ee0
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/AuthForm.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+  import Button from "../../../components/Button.svelte";
+  import HackClubLogo from "../../../components/HackClubLogo.svelte";
+  import { sessions } from "../../../api";
+  import Slack from "hcicons-svelte/slack";
+
+  let {
+    sign_in_email,
+    show_dev_tool,
+    dev_magic_link,
+    csrf_token,
+    redirect_to,
+    continue_param,
+  }: {
+    sign_in_email: boolean;
+    show_dev_tool: boolean;
+    dev_magic_link?: string | null;
+    csrf_token: string;
+    redirect_to?: string;
+    continue_param?: string | null;
+  } = $props();
+
+  const query = $derived(
+    continue_param ? { query: { continue: continue_param } } : undefined,
+  );
+  const hcaAuthPath = $derived(
+    query ? sessions.hcaNew.path(query) : sessions.hcaNew.path(),
+  );
+  const slackAuthPath = $derived(
+    query ? sessions.slackNew.path(query) : sessions.slackNew.path(),
+  );
+  const emailAuthPath = sessions.email.path();
+
+  let isSigningIn = $state(false);
+</script>
+
+<div class="w-full max-w-md space-y-4">
+  {#if sign_in_email}
+    <div
+      class="rounded-2xl border border-surface-200 bg-surface p-8 text-center space-y-2"
+    >
+      <p class="text-surface-content font-medium">Check your email!</p>
+      <p class="text-secondary text-sm">
+        We sent a sign-in link to your inbox. Check your spam if you can't see
+        it!
+      </p>
+      {#if show_dev_tool && dev_magic_link}
+        <a
+          href={dev_magic_link}
+          class="text-xs text-secondary underline hover:text-surface-content"
+        >
+          Dev: Open Link
+        </a>
+      {/if}
+    </div>
+  {:else}
+    <a
+      href={hcaAuthPath}
+      onclick={() => (isSigningIn = true)}
+      class="w-full flex items-center justify-center gap-3 px-6 py-3.5 rounded-xl bg-primary text-on-primary font-medium hover:opacity-90 transition-all"
+    >
+      {#if isSigningIn}
+        <svg class="h-5 w-5 animate-spin" viewBox="0 0 24 24" fill="none">
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+      {:else}
+        <HackClubLogo class="h-5 w-5" />
+      {/if}
+      <span>Sign in with Hack Club</span>
+    </a>
+
+    <a
+      href={slackAuthPath}
+      class="w-full flex items-center justify-center gap-3 px-6 py-3.5 rounded-xl bg-surface border border-surface-200 text-surface-content font-medium hover:bg-surface-100 transition-all"
+    >
+      <Slack size={20} />
+      <span>Sign in with Slack</span>
+    </a>
+
+    <div class="flex items-center gap-4 py-1">
+      <div class="flex-1 h-px bg-surface-200"></div>
+      <span class="text-xs text-muted uppercase tracking-wider">or</span>
+      <div class="flex-1 h-px bg-surface-200"></div>
+    </div>
+
+    <form method="post" action={emailAuthPath} data-turbo="false">
+      <input type="hidden" name="authenticity_token" value={csrf_token} />
+      {#if redirect_to}
+        <input type="hidden" name="redirect_to" value={redirect_to} />
+      {/if}
+      {#if continue_param}
+        <input type="hidden" name="continue" value={continue_param} />
+      {/if}
+      <div class="flex gap-2">
+        <input
+          type="email"
+          name="email"
+          placeholder="you@email.com"
+          required
+          class="flex-1 bg-surface text-surface-content placeholder-muted rounded-xl py-3.5 px-4 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all border border-surface-200 focus:border-primary text-sm"
+        />
+        <Button
+          type="submit"
+          unstyled
+          class="px-5 py-3.5 bg-surface border border-primary text-primary rounded-xl hover:bg-primary hover:text-on-primary transition-all text-sm font-medium"
+        >
+          Send link
+        </Button>
+      </div>
+    </form>
+  {/if}
+</div>
diff --git a/app/javascript/pages/HardwareHome/signedOut/CTASection.svelte b/app/javascript/pages/HardwareHome/signedOut/CTASection.svelte
new file mode 100644
index 000000000..78e974602
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/CTASection.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Link } from "@inertiajs/svelte";
+  import Section from "./Section.svelte";
+
+  let {
+    hoursTracked,
+    usersTracked,
+  }: { hoursTracked: string; usersTracked: string } = $props();
+</script>
+
+<Section bg="bg-primary" py="py-24">
+  <div class="text-center">
+    <h2
+      class="text-3xl md:text-4xl font-semibold text-on-primary tracking-tight mb-4"
+    >
+      Start tracking your designing.
+    </h2>
+    <p class="text-on-primary/90 text-lg mb-10">
+      Join {usersTracked} users who have tracked {hoursTracked}+ hours of
+      development with Hackatime.
+    </p>
+    <Link
+      href="/signin"
+      class="inline-flex items-center justify-center px-10 py-3.5 bg-surface text-primary rounded-md font-semibold text-lg hover:bg-surface-100 transition-colors"
+    >
+      Create free account
+    </Link>
+    <div class="mt-6 text-sm text-on-primary/80">
+      Free to use, forever · Open source (MIT)
+    </div>
+  </div>
+</Section>
diff --git a/app/javascript/pages/HardwareHome/signedOut/EditorGrid.svelte b/app/javascript/pages/HardwareHome/signedOut/EditorGrid.svelte
new file mode 100644
index 000000000..789d30fb2
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/EditorGrid.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { Link } from "@inertiajs/svelte";
+  import Section from "./Section.svelte";
+  import Plus from "hcicons-svelte/plus";
+
+  const editors = [
+    { name: "VS Code", slug: "vs-code" },
+    { name: "JetBrains", slug: "intellij-idea" },
+    { name: "Vim", slug: "vim" },
+    { name: "Neovim", slug: "neovim" },
+    { name: "Sublime", slug: "sublime-text" },
+    { name: "Cursor", slug: "cursor" },
+    { name: "Zed", slug: "zed" },
+    { name: "Terminal", slug: "terminal" },
+    { name: "Figma", slug: "figma" },
+    { name: "Godot", slug: "godot" },
+  ];
+
+  const tileBox =
+    "w-16 h-16 bg-surface border border-surface-200 rounded-xl flex items-center justify-center mb-2 shadow-sm transition-all duration-150 group-hover:border-primary group-hover:shadow-md group-hover:-translate-y-0.5";
+</script>
+
+<Section id="integrations" bg="bg-surface-100">
+  <div class="grid md:grid-cols-3 gap-12 items-center">
+    <!-- Right 2/3: existing content -->
+    <div class="md:col-span-2 text-center">
+      <h2
+        class="text-3xl md:text-4xl font-semibold text-surface-content tracking-tight mb-4"
+      >
+        Works where you work.
+      </h2>
+      <p class="text-secondary mx-auto max-w-[60ch] text-lg mb-12">
+        Hackatime uses the open-source WakaTime plugin ecosystem. If your editor
+        has a plugin, it works with Hackatime.
+      </p>
+      <div
+        class="flex flex-wrap justify-center gap-x-8 gap-y-10 max-w-[800px] mx-auto"
+      >
+        {#each editors as { name, slug }}
+          <Link
+            href={`/docs/editors/${slug}`}
+            class="flex flex-col items-center w-20 group"
+          >
+            <div class={tileBox}>
+              <img
+                src={`/images/editor-icons/${slug}-128.png`}
+                alt={name}
+                class="w-8 h-8 object-contain transition-transform duration-150 group-hover:scale-110"
+              />
+            </div>
+            <span
+              class="text-xs font-medium text-secondary transition-colors group-hover:text-primary"
+              >{name}</span
+            >
+          </Link>
+        {/each}
+
+        <Link
+          href="/docs#all-editors"
+          class="flex flex-col items-center w-20 group"
+        >
+          <div class={tileBox}>
+            <Plus
+              size={32}
+              class="text-secondary transition-colors group-hover:text-primary"
+            />
+          </div>
+          <span
+            class="text-xs font-medium text-secondary transition-colors group-hover:text-primary"
+            >More</span
+          >
+        </Link>
+      </div>
+    </div>
+    <!-- Left 1/3: Lookout callout -->
+    <div
+      class="flex flex-col items-center text-center md:items-start md:text-left bg-surface border border-surface-200 rounded-2xl p-6 shadow-sm"
+    >
+      <img
+        src="https://lookout.hackclub.com/icon.png"
+        alt="Lookout"
+        class="w-14 h-14 rounded-xl mb-4 shadow-sm"
+      />
+      <h3
+        class="text-xl font-semibold text-surface-content tracking-tight mb-2"
+      >
+        CAD?
+      </h3>
+      <p class="text-secondary text-base max-w-[32ch]">
+        Use
+        <Link
+          href="https://lookout.hackclub.com"
+          class="text-primary underline underline-offset-2 hover:opacity-80"
+          >Lookout</Link
+        >
+        to automatically record a timelapse of your session alongside your Hackatime
+        stats.
+      </p>
+    </div>
+  </div>
+</Section>
diff --git a/app/javascript/pages/HardwareHome/signedOut/FAQSection.svelte b/app/javascript/pages/HardwareHome/signedOut/FAQSection.svelte
new file mode 100644
index 000000000..ebbce6003
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/FAQSection.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Section from "./Section.svelte";
+
+  const faqs = [
+    {
+      q: "Is this really free?",
+      a: "Yep. Hackatime is a free service by Hack Club. We made it for ourselves and our events, and it's good marketing :)",
+    },
+    {
+      q: "How do I migrate from WakaTime?",
+      a: "Point your existing WakaTime plugin at Hackatime's API URL and enter your Hackatime API key! You can even import your WakaTime data into Hackatime.",
+    },
+    {
+      q: "Is my design private?",
+      a: "Hackatime only receives metadata (e.g. file names, project names, timestamps, language). We never see your actual source code.",
+    },
+    {
+      q: "Can I self-host this?",
+      a: "Yep! The entire codebase is open source on GitHub. Spin up your own instance for complete data sovereignty.",
+    },
+  ];
+</script>
+
+<Section id="faq" bg="bg-surface">
+  <h2
+    class="text-3xl md:text-4xl font-semibold text-surface-content tracking-tight mb-8"
+  >
+    Frequently Asked Questions
+  </h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-10">
+    {#each faqs as { q, a }}
+      <div>
+        <h4 class="text-lg font-semibold text-surface-content mb-2">{q}</h4>
+        <p class="text-secondary text-base leading-relaxed">{a}</p>
+      </div>
+    {/each}
+  </div>
+</Section>
diff --git a/app/javascript/pages/HardwareHome/signedOut/FeaturesGrid.svelte b/app/javascript/pages/HardwareHome/signedOut/FeaturesGrid.svelte
new file mode 100644
index 000000000..d8928793b
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/FeaturesGrid.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Section from "./Section.svelte";
+  import {
+    Icon,
+    Clock,
+    CodeBracketSquare,
+    DocumentText,
+    ArrowDownTray,
+    UserGroup,
+    LockClosed,
+    type IconSource,
+  } from "svelte-hero-icons";
+
+  const features: { title: string; description: string; icon: IconSource }[] = [
+    {
+      title: "Time tracking",
+      description:
+        "Automatic tracking that starts when you type and stops when you take a break.",
+      icon: Clock,
+    },
+    {
+      title: "Stats",
+      description:
+        "See your actual tech stack - how much time do you spend in CAD vs. code editors?",
+      icon: CodeBracketSquare,
+    },
+    {
+      title: "File-level insights",
+      description:
+        "Drill into specific files and find the ones consuming all your time.",
+      icon: DocumentText,
+    },
+    {
+      title: "Zero lock-in",
+      description: "Your data is yours. Export your entire history as JSON.",
+      icon: ArrowDownTray,
+    },
+    {
+      title: "Leaderboards (coming soon)",
+      description: "Create private leaderboards for your team or hackathon.",
+      icon: UserGroup,
+    },
+    {
+      title: "Privacy-first",
+      description:
+        "We never see your source code, so your projects stay private.",
+      icon: LockClosed,
+    },
+  ];
+</script>
+
+<Section id="features">
+  <div class="text-center max-w-175 mx-auto mb-12">
+    <h2
+      class="text-3xl md:text-4xl font-semibold text-surface-content tracking-tight mb-4"
+    >
+      Everything you need, nothing you don't.
+    </h2>
+    <p class="text-secondary text-lg text-pretty">
+      Granular telemetry for your development environment that helps you stay
+      productive.
+    </p>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    {#each features as { title, description, icon }}
+      <div class="p-8 bg-surface border border-surface-200 rounded-lg">
+        <Icon src={icon} solid size="32" class="text-purple mb-4" />
+        <h3 class="text-lg font-semibold text-surface-content mb-2">{title}</h3>
+        <p class="text-secondary text-base leading-relaxed">{description}</p>
+      </div>
+    {/each}
+  </div>
+</Section>
diff --git a/app/javascript/pages/HardwareHome/signedOut/HowItWorks.svelte b/app/javascript/pages/HardwareHome/signedOut/HowItWorks.svelte
new file mode 100644
index 000000000..d4cd1d1d5
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/HowItWorks.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import Section from "./Section.svelte";
+
+  type Tab = "hardware" | "software";
+
+  let activeTab: Tab = "hardware";
+
+  const steps: Record<Tab, { n: string; title: string; body: string }[]> = {
+    software: [
+      {
+        n: "01",
+        title: "Register",
+        body: "Create a free account on Hackatime. You'll get an API key — that's how your editor identifies you.",
+      },
+      {
+        n: "02",
+        title: "Install Plugin",
+        body: "Install the WakaTime plugin for your editor (VS Code, JetBrains, Vim, etc.) from its extension marketplace.",
+      },
+      {
+        n: "03",
+        title: "Configure",
+        body: "Enter your API key and set the api_url to Hackatime. Done.",
+      },
+    ],
+    hardware: [
+      {
+        n: "01",
+        title: "Register",
+        body: "Create a free account on Hackatime. We'll connect to your program for timelapses.",
+      },
+      {
+        n: "02",
+        title: "Install Lookout",
+        body: "Install Lookout, our timelapse recording software. It works on Windows, Mac, and Linux.",
+      },
+      {
+        n: "03",
+        title: "Configure",
+        body: "Start a timelapse from your program's site. Done.",
+      },
+    ],
+  };
+</script>
+
+<Section>
+  <h2
+    class="text-3xl md:text-4xl font-semibold text-surface-content text-center tracking-tight mb-8"
+  >
+    Start tracking in 30 seconds.
+  </h2>
+
+  <div class="flex justify-center mb-12">
+    <div class="inline-flex rounded-lg bg-surface-100 p-1">
+      <button
+        class="px-5 py-2 rounded-md text-sm font-semibold tracking-wide transition-colors"
+        class:bg-surface-0={activeTab === "hardware"}
+        class:text-primary={activeTab === "hardware"}
+        class:text-secondary={activeTab !== "hardware"}
+        on:click={() => (activeTab = "hardware")}
+      >
+        Hardware
+      </button>
+      <button
+        class="px-5 py-2 rounded-md text-sm font-semibold tracking-wide transition-colors"
+        class:bg-surface-0={activeTab === "software"}
+        class:text-primary={activeTab === "software"}
+        class:text-secondary={activeTab !== "software"}
+        on:click={() => (activeTab = "software")}
+      >
+        Software
+      </button>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    {#each steps[activeTab] as { n, title, body }}
+      <div class="border-l-2 border-surface-200 pl-4">
+        <span class="text-sm font-bold text-primary tracking-widest">{n}</span>
+        <h3 class="text-lg font-semibold text-surface-content mt-2 mb-2">
+          {title}
+        </h3>
+        <p class="text-secondary text-base leading-relaxed">{body}</p>
+      </div>
+    {/each}
+  </div>
+</Section>
diff --git a/app/javascript/pages/HardwareHome/signedOut/PhilosophySection.svelte b/app/javascript/pages/HardwareHome/signedOut/PhilosophySection.svelte
new file mode 100644
index 000000000..c68efa218
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/PhilosophySection.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Section from "./Section.svelte";
+
+  const cards = [
+    {
+      title: "No artificial limits",
+      body: "Other trackers delete your history after two weeks unless you pay. Hackatime stores it indefinitely, making it a perfect alternative to WakaTime.",
+    },
+    {
+      title: "Community built",
+      body: "Built by the makers at Hack Club. Anyone can contribute to the codebase and help shape the product!",
+    },
+  ];
+</script>
+
+<Section id="philosophy" bg="bg-surface">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
+    <div>
+      <h2
+        class="text-3xl md:text-4xl font-semibold text-primary tracking-tight mb-6"
+      >
+        Your data should belong to you
+      </h2>
+      <p class="text-secondary text-lg leading-relaxed mb-4">
+        We have an extensive API you can play around with, and you can export
+        your data to any tool you like, anytime.
+      </p>
+    </div>
+    <div class="space-y-6">
+      {#each cards as { title, body }}
+        <div class="p-8 bg-darker border border-surface-200 rounded-lg">
+          <h3 class="text-lg font-semibold text-surface-content mb-2">
+            {title}
+          </h3>
+          <p class="text-secondary text-base leading-relaxed">{body}</p>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Section>
diff --git a/app/javascript/pages/HardwareHome/signedOut/Section.svelte b/app/javascript/pages/HardwareHome/signedOut/Section.svelte
new file mode 100644
index 000000000..4341365b9
--- /dev/null
+++ b/app/javascript/pages/HardwareHome/signedOut/Section.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    id,
+    bg = "",
+    py = "py-20",
+    children,
+  }: {
+    id?: string;
+    bg?: string;
+    py?: string;
+    children: Snippet;
+  } = $props();
+</script>
+
+<section class="{py} w-full {bg}" {id}>
+  <div class="max-w-[1100px] mx-auto px-6">
+    {@render children()}
+  </div>
+</section>
diff --git a/config/routes.rb b/config/routes.rb
index 3f2aba8c0..2b0d0e061 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -110,6 +110,9 @@ def matches?(request)
 
   get "/signin", to: "static_pages#signin", as: :signin
 
+  # hardware variant of homepage
+  get "/hardware", to: "static_pages#hardware", as: :hardware
+
   # Auth routes
   get "/auth/hca", to: "sessions#hca_new", as: :hca_auth
   get "/auth/hca/callback", to: "sessions#hca_create"
diff --git a/public/images/hardware-home.webp b/public/images/hardware-home.webp
new file mode 100644
index 000000000..2f0c92bb8
Binary files /dev/null and b/public/images/hardware-home.webp differ