'use client'

import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'motion/react'

/** Boot-sequence prelude — types "DorkOS is starting." then fades to reveal the page. */
export function Prelude() {
  const [text, setText] = useState('')
  const [visible, setVisible] = useState(true)
  const fullText = 'DorkOS is starting.'

  useEffect(() => {
    let i = 0
    const typeInterval = setInterval(() => {
      i++
      setText(fullText.slice(0, i))
      if (i >= fullText.length) {
        clearInterval(typeInterval)
        // Hold for 600ms after typing completes, then fade out
        setTimeout(() => setVisible(false), 600)
      }
    }, 45)
    return () => clearInterval(typeInterval)
  }, [])

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center"
          style={{ background: '#1A1814' }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.4, ease: 'easeOut' }}
        >
          <p className="font-mono text-sm tracking-[0.08em]" style={{ color: '#F5F0E6' }}>
            {text}
            <span className="cursor-blink" aria-hidden="true" />
          </p>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

git add apps/web/src/layers/features/marketing/ui/Prelude.tsx
git commit -m "feat(web): add Prelude boot-sequence component"

export interface VillainCard {
  id: string
  label: string
  body: string
}

export const villainCards: VillainCard[] = [
  {
    id: 'dead-terminal',
    label: 'The Dead Terminal',
    body: 'Your agent finished at 11:47pm. Clean code. Tests passing. PR ready. Then the terminal closed. The work sat there for three days until you found it by accident.\n\nYour best teammate shipped \u2014 and had no way to tell you.',
  },
  {
    id: 'goldfish',
    label: 'The Goldfish',
    body: '"Let me give you some context\u2026"\n\nYou have typed this sentence four hundred times. Every session begins at zero. Every session, you re-introduce yourself to something that was brilliant five minutes ago.',
  },
  {
    id: 'tab-graveyard',
    label: 'The Tab Graveyard',
    body: 'Ten agents. Ten terminals. One of them is waiting for approval. One finished twenty minutes ago. One broke something. You are alt-tabbing between them like it is 2005 and you are managing browser bookmarks.',
  },
  {
    id: '3am-build',
    label: 'The 3am Build',
    body: 'CI went red at 2:47am. The fix was three lines of code. Your agent knew exactly what to do. Your terminal was closed. The build stayed red until morning.',
  },
]

'use client'

import { motion } from 'motion/react'
import { villainCards } from '../lib/villain-cards'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

/** Pain-point recognition section — four villain cards that name the problem. */
export function VillainSection() {
  return (
    <section className="py-32 px-8 bg-cream-primary">
      <motion.div
        className="max-w-3xl mx-auto"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        {/* Section header */}
        <motion.div variants={REVEAL} className="text-center mb-20">
          <h2
            className="text-charcoal text-[28px] md:text-[32px] font-medium tracking-[-0.02em] leading-[1.3] mb-4"
          >
            What your agents do when you leave.
          </h2>
          <p className="text-warm-gray text-lg">Nothing.</p>
        </motion.div>

        {/* Villain cards */}
        <motion.div variants={STAGGER} className="space-y-6">
          {villainCards.map((card) => (
            <motion.article
              key={card.id}
              variants={REVEAL}
              className="rounded-lg px-6 py-5"
              style={{
                background: '#FFFEFB',
                borderLeft: '3px solid rgba(122, 117, 106, 0.3)',
              }}
            >
              <span className="font-mono text-2xs tracking-[0.12em] uppercase text-warm-gray-light block mb-3">
                {card.label}
              </span>
              {card.body.split('\n\n').map((paragraph, i) => (
                <p
                  key={i}
                  className="text-warm-gray text-[15px] leading-[1.75] mb-3 last:mb-0"
                >
                  {paragraph}
                </p>
              ))}
            </motion.article>
          ))}
        </motion.div>

        {/* Below cards */}
        <motion.div variants={REVEAL} className="text-center mt-16">
          <p className="text-charcoal text-lg leading-[1.7]">
            You pay for the most powerful AI coding agent available.
          </p>
          <p className="text-charcoal text-lg leading-[1.7]">
            It only works when you are sitting in front of it.
          </p>
        </motion.div>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/VillainSection.tsx apps/web/src/layers/features/marketing/lib/villain-cards.ts
git commit -m "feat(web): add VillainSection pain-point cards"

'use client'

import { motion } from 'motion/react'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

/** The OS metaphor reframe — makes "operating system" feel inevitable, not claimed. */
export function PivotSection() {
  return (
    <section className="py-40 px-8 bg-cream-secondary">
      <motion.div
        className="max-w-2xl mx-auto text-center"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        <motion.p
          variants={REVEAL}
          className="text-charcoal text-[24px] md:text-[28px] font-medium tracking-[-0.02em] leading-[1.4] mb-10"
        >
          We solved this for applications fifty years ago.
        </motion.p>

        <motion.div variants={STAGGER} className="space-y-3 mb-10">
          {[
            'Processes needed scheduling. We built cron.',
            'Processes needed communication. We built IPC.',
            'Processes needed discovery. We built registries.',
            'Processes needed memory. We built filesystems.',
          ].map((line) => (
            <motion.p
              key={line}
              variants={REVEAL}
              className="text-warm-gray text-[15px] md:text-base leading-[1.7]"
            >
              {line}
            </motion.p>
          ))}
        </motion.div>

        <motion.p
          variants={REVEAL}
          className="text-charcoal text-[24px] md:text-[28px] font-medium tracking-[-0.02em] leading-[1.4] mb-4"
        >
          We called it an operating system.
        </motion.p>

        <motion.p
          variants={REVEAL}
          className="text-warm-gray-light text-base"
        >
          Your agents need the same thing.
        </motion.p>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/PivotSection.tsx
git commit -m "feat(web): add PivotSection OS metaphor reframe"

export interface TimelineEntry {
  id: string
  time: string
  paragraphs: string[]
}

export const timelineEntries: TimelineEntry[] = [
  {
    id: '1114pm',
    time: '11:14 PM',
    paragraphs: [
      'You queue three tasks. A test suite that needs expanding. A dependency upgrade across two services. A refactor you\u2019ve been putting off.',
      'You type one command. [PULSE] schedules all three.',
      'You close the laptop.',
    ],
  },
  {
    id: '1115pm',
    time: '11:15 PM',
    paragraphs: [
      'The first agent picks up the test suite. It reads the coverage report, identifies the gaps, starts writing.',
      'You are brushing your teeth.',
    ],
  },
  {
    id: '247am',
    time: '2:47 AM',
    paragraphs: [
      'CI breaks on the dependency upgrade. [PULSE] detects it. Dispatches an agent. The agent reads the error, traces the cause, opens a fix. Tests go green.',
      'Your phone buzzes once. A Telegram message from [RELAY]: \u201CCI was red. Fixed. PR #247 ready for review.\u201D',
      'You do not see it until morning.',
    ],
  },
  {
    id: '248am',
    time: '2:48 AM',
    paragraphs: [
      'The agent that fixed CI notices the test suite agent is working in the same service. [MESH] routes a coordination signal \u2014 one waits for the other to merge first, avoiding a conflict.',
      'No human involved. No terminal open.',
    ],
  },
  {
    id: '700am',
    time: '7:00 AM',
    paragraphs: [
      'You open your laptop. [CONSOLE] shows the night at a glance: three PRs ready for review, one CI fix merged, the refactor at 80% \u2014 waiting on a design question it queued for you. The overnight cost: $4.20 in API calls.',
    ],
  },
  {
    id: '704am',
    time: '7:04 AM',
    paragraphs: [
      'You approve two PRs. You request a change on the third. You queue two more tasks for the day.',
      'Your agents have been productive for eight hours. You have been awake for four minutes.',
    ],
  },
]

'use client'

import { Fragment } from 'react'
import { motion } from 'motion/react'
import { timelineEntries } from '../lib/timeline-entries'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

const MODULE_NAMES = ['PULSE', 'RELAY', 'MESH', 'CONSOLE', 'WING', 'LOOP', 'ENGINE']

/** Render text with [MODULE] references highlighted in brand orange monospace. */
function renderWithModules(text: string) {
  const parts = text.split(/(\[[A-Z]+\])/)
  return parts.map((part, i) => {
    const match = part.match(/^\[([A-Z]+)\]$/)
    if (match && MODULE_NAMES.includes(match[1])) {
      return (
        <span key={i} className="font-mono text-brand-orange">
          {match[1]}
        </span>
      )
    }
    return <Fragment key={i}>{part}</Fragment>
  })
}

/** "A Night with DorkOS" — vertical timeline showing the product through story. */
export function TimelineSection() {
  return (
    <section className="py-32 px-8 bg-cream-white">
      <motion.div
        className="max-w-3xl mx-auto"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        {/* Section header */}
        <motion.div variants={REVEAL} className="mb-20">
          <span className="font-mono text-2xs tracking-[0.2em] uppercase text-brand-orange block mb-6 text-center">
            A Night with DorkOS
          </span>
        </motion.div>

        {/* Timeline entries */}
        <div className="relative">
          {/* Vertical line */}
          <div
            className="absolute left-[72px] top-0 bottom-0 w-px hidden md:block"
            style={{ background: 'rgba(139, 90, 43, 0.12)' }}
          />

          <motion.div variants={STAGGER} className="space-y-12">
            {timelineEntries.map((entry) => (
              <motion.div
                key={entry.id}
                variants={REVEAL}
                className="flex flex-col md:flex-row gap-4 md:gap-8"
              >
                {/* Timestamp */}
                <div className="shrink-0 md:w-[72px] md:text-right">
                  <span
                    className="font-mono text-xs tracking-[0.04em]"
                    style={{ color: '#7A756A' }}
                  >
                    {entry.time}
                  </span>
                </div>

                {/* Dot on the timeline line (desktop only) */}
                <div className="hidden md:flex items-start pt-1.5">
                  <div
                    className="w-2 h-2 rounded-full shrink-0"
                    style={{ background: '#E85D04' }}
                  />
                </div>

                {/* Narrative */}
                <div className="flex-1 space-y-3">
                  {entry.paragraphs.map((p, i) => (
                    <p
                      key={i}
                      className="text-warm-gray text-[15px] leading-[1.75]"
                    >
                      {renderWithModules(p)}
                    </p>
                  ))}
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/TimelineSection.tsx apps/web/src/layers/features/marketing/lib/timeline-entries.ts
git commit -m "feat(web): add TimelineSection overnight narrative"

export interface Subsystem {
  id: string
  gap: string
  name: string
  description: string
  status: 'available' | 'coming-soon'
}

export const subsystems: Subsystem[] = [
  { id: 'pulse', gap: 'No schedule', name: 'Pulse', description: 'Cron-based autonomous execution. Your agents run while you sleep.', status: 'available' },
  { id: 'relay', gap: 'No communication', name: 'Relay', description: 'Built-in messaging. Telegram, webhooks, inter-agent channels. Your agents reach you.', status: 'available' },
  { id: 'mesh', gap: 'No coordination', name: 'Mesh', description: 'Agent discovery and network. Your agents find each other and collaborate.', status: 'available' },
  { id: 'wing', gap: 'No memory', name: 'Wing', description: 'Persistent context across sessions. Your agents remember.', status: 'coming-soon' },
  { id: 'console', gap: 'No oversight', name: 'Console', description: 'Browser-based command center. You see everything, from anywhere.', status: 'available' },
  { id: 'loop', gap: 'No feedback loop', name: 'Loop', description: 'Signal, hypothesis, dispatch, measure. Your agents improve.', status: 'available' },
]

'use client'

import { motion } from 'motion/react'
import { subsystems } from '../lib/subsystems'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

/** Compact subsystems reference — gap on the left, module fix on the right. */
export function SubsystemsSection() {
  return (
    <section className="py-32 px-8 bg-cream-primary">
      <motion.div
        className="max-w-[720px] mx-auto"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        <motion.span
          variants={REVEAL}
          className="font-mono text-2xs tracking-[0.2em] uppercase text-brand-orange block mb-16 text-center"
        >
          Subsystems
        </motion.span>

        <motion.div variants={STAGGER} className="space-y-0">
          {subsystems.map((sub) => (
            <motion.div
              key={sub.id}
              variants={REVEAL}
              className="flex items-baseline gap-6 py-4"
              style={{ borderBottom: '1px solid rgba(139, 90, 43, 0.06)' }}
            >
              {/* Gap label */}
              <span className="shrink-0 w-[140px] text-right font-mono text-2xs tracking-[0.06em] text-warm-gray-light">
                {sub.gap}
              </span>

              {/* Status indicator */}
              <div className="shrink-0 w-1.5 h-1.5 rounded-full mt-1" style={{ background: '#E85D04' }} />

              {/* Module name + description */}
              <div className="flex-1">
                <span className="font-mono text-sm text-brand-orange">{sub.name}</span>
                {sub.status === 'coming-soon' && (
                  <span className="font-mono text-2xs text-warm-gray-light ml-2">Coming soon</span>
                )}
                <span className="text-warm-gray text-sm"> — {sub.description}</span>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/SubsystemsSection.tsx apps/web/src/layers/features/marketing/lib/subsystems.ts
git commit -m "feat(web): add SubsystemsSection compact module reference"

'use client'

import { useState, useEffect, useRef } from 'react'
import Link from 'next/link'
import { motion, useInView } from 'motion/react'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

/** The install command with typing animation, positioned at peak desire. */
export function InstallMoment() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, amount: 0.5 })
  const [displayText, setDisplayText] = useState('')
  const hasAnimated = useRef(false)
  const command = 'npm install -g dorkos'

  useEffect(() => {
    if (!isInView || hasAnimated.current) return
    hasAnimated.current = true
    let i = 0
    const interval = setInterval(() => {
      i++
      setDisplayText(command.slice(0, i))
      if (i >= command.length) clearInterval(interval)
    }, 50)
    return () => clearInterval(interval)
  }, [isInView])

  return (
    <section ref={ref} className="py-40 px-8 bg-cream-tertiary">
      <motion.div
        className="max-w-xl mx-auto text-center"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        {/* The command */}
        <motion.div variants={REVEAL} className="mb-10">
          <div className="inline-block bg-cream-secondary rounded-lg px-8 py-5">
            <p className="font-mono text-lg md:text-xl text-charcoal">
              <span style={{ color: '#7A756A' }}>$ </span>
              {displayText || command}
              <span className="cursor-blink" aria-hidden="true" />
            </p>
          </div>
        </motion.div>

        {/* Trust line */}
        <motion.p
          variants={REVEAL}
          className="font-mono text-2xs tracking-[0.1em] text-warm-gray-light mb-6"
        >
          Built on the Claude Agent SDK&nbsp;&nbsp;&middot;&nbsp;&nbsp;Open
          Source&nbsp;&nbsp;&middot;&nbsp;&nbsp;MIT Licensed&nbsp;&nbsp;&middot;&nbsp;&nbsp;Self-Hosted
        </motion.p>

        {/* Taglines */}
        <motion.p variants={REVEAL} className="text-charcoal text-lg font-medium mb-2">
          Open source. Self-hosted. Yours.
        </motion.p>
        <motion.p variants={REVEAL} className="text-warm-gray text-base">
          One person. Ten agents. Ship around the clock.
        </motion.p>

        {/* CTA links */}
        <motion.div variants={REVEAL} className="flex items-center justify-center gap-6 mt-8">
          <Link
            href="https://www.npmjs.com/package/dorkos"
            target="_blank"
            rel="noopener noreferrer"
            className="marketing-btn hidden lg:inline-flex items-center gap-2"
            style={{ background: '#E85D04', color: '#FFFEFB' }}
          >
            npm install -g dorkos
            <span className="cursor-blink" aria-hidden="true" />
          </Link>
          <Link
            href="/docs/getting-started/quickstart"
            className="marketing-btn inline-flex lg:hidden items-center gap-2"
            style={{ background: '#E85D04', color: '#FFFEFB' }}
          >
            Get started
          </Link>
          <Link
            href="/docs/getting-started/quickstart"
            className="font-mono text-button tracking-[0.08em] text-warm-gray-light hover:text-brand-orange transition-smooth"
          >
            Read the docs
          </Link>
        </motion.div>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/InstallMoment.tsx
git commit -m "feat(web): add InstallMoment section at peak desire"

'use client'

import { useState } from 'react'
import { AnimatePresence, motion } from 'motion/react'
import posthog from 'posthog-js'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

interface IdentityCloseProps {
  email: string
}

/** Tribal identity close — origin story, boldness invitation, and contact postscript. */
export function IdentityClose({ email }: IdentityCloseProps) {
  const [revealed, setRevealed] = useState(false)

  return (
    <section id="about" className="py-40 px-8 bg-cream-white">
      <motion.div
        className="max-w-2xl mx-auto text-center"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        {/* Tribal statement */}
        <motion.h2
          variants={REVEAL}
          className="text-charcoal text-[28px] md:text-[32px] font-medium tracking-[-0.02em] leading-[1.3] mb-12"
        >
          Built by dorks. For dorks. Run by you.
        </motion.h2>

        {/* Origin story */}
        <motion.div variants={STAGGER} className="space-y-6 mb-12">
          <motion.p variants={REVEAL} className="text-warm-gray text-[15px] leading-[1.75]">
            Dork was never an insult to us.
          </motion.p>
          <motion.p variants={REVEAL} className="text-warm-gray text-[15px] leading-[1.75]">
            It is what you call someone who cares too much about something most
            people do not care about at all. Someone who has opinions about cron
            expressions. Someone who names their agents. Someone who wakes up at
            6am to check a CI pipeline that nobody asked them to check.
          </motion.p>
          <motion.p variants={REVEAL} className="text-warm-gray text-[15px] leading-[1.75]">
            We build at 3am because we cannot stop. Not because someone is paying
            us to. Because the problem is right there and walking away from it
            feels worse than staying up.
          </motion.p>
        </motion.div>

        {/* Provenance */}
        <motion.p
          variants={REVEAL}
          className="text-warm-gray-light text-sm leading-[1.8] mb-12"
        >
          One developer. Section 8 housing. Library books. Code before graduation.
          <br />
          Thirty million users. An exit in twelve months. Warner Bros. Art Blocks.
          <br />
          And then this — because the tools that matter most are built by the
          people who need them.
        </motion.p>

        {/* Boldness invitation */}
        <motion.div variants={REVEAL} className="mb-16">
          <p className="text-charcoal text-lg leading-[1.7]">
            The developers building agent teams will outship everyone.
          </p>
          <p className="text-charcoal text-lg leading-[1.7]">
            Not because they are better.
          </p>
          <p className="text-charcoal text-lg leading-[1.7]">
            Because they never stop.
          </p>
        </motion.div>

        {/* Email postscript */}
        <motion.div variants={REVEAL} className="pt-8" style={{ borderTop: '1px solid rgba(139, 90, 43, 0.08)' }}>
          <div className="inline-flex items-center gap-2">
            <span className="text-warm-gray text-sm">
              Questions, ideas, or just want to say hello —
            </span>
            <AnimatePresence mode="wait">
              {revealed ? (
                <motion.a
                  key="email"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  href={`mailto:${email}`}
                  className="font-mono text-sm text-brand-orange hover:text-brand-green transition-smooth"
                >
                  {email}
                </motion.a>
              ) : (
                <motion.button
                  key="reveal"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  onClick={() => {
                    setRevealed(true)
                    posthog.capture('contact_email_revealed')
                  }}
                  className="font-mono text-sm text-brand-orange hover:text-brand-green transition-smooth"
                >
                  reveal_email
                  <span className="cursor-blink" aria-hidden="true" />
                </motion.button>
              )}
            </AnimatePresence>
          </div>
        </motion.div>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/IdentityClose.tsx
git commit -m "feat(web): add IdentityClose tribal identity section"

'use client'

import { motion } from 'motion/react'
import { REVEAL, STAGGER, VIEWPORT } from '../lib/motion-variants'

/** Final page close — the boot sequence completes. */
export function TheClose() {
  return (
    <section className="py-32 px-8 bg-cream-primary">
      <motion.div
        className="max-w-xl mx-auto text-center"
        initial="hidden"
        whileInView="visible"
        viewport={VIEWPORT}
        variants={STAGGER}
      >
        <motion.p
          variants={REVEAL}
          className="text-charcoal text-xl md:text-2xl font-medium tracking-[-0.02em] leading-[1.4] mb-10"
        >
          Your agents are ready. Leave the rest to them.
        </motion.p>

        <motion.p
          variants={REVEAL}
          className="font-mono text-base text-brand-orange"
        >
          Ready.
        </motion.p>
      </motion.div>
    </section>
  )
}

git add apps/web/src/layers/features/marketing/ui/TheClose.tsx
git commit -m "feat(web): add TheClose boot-complete section"

// Replace the three body paragraphs with:
<motion.p variants={REVEAL} className="text-warm-gray text-lg leading-[1.7] mb-6">
  Claude Code uses Anthropic&apos;s API. Your code context is sent to their
  servers. DorkOS does not change that.
</motion.p>

<motion.p variants={REVEAL} className="text-charcoal font-semibold text-lg leading-[1.7] mb-6">
  What DorkOS controls: the orchestration runs on your machine. Sessions
  are stored locally. Tools execute in your shell. The scheduling, the
  messaging, the coordination — yours.
</motion.p>

<motion.p variants={REVEAL} className="text-warm-gray text-lg leading-[1.7]">
  We believe in honest tools for serious builders.
</motion.p>

git add apps/web/src/layers/features/marketing/ui/HonestySection.tsx
git commit -m "feat(web): tighten HonestySection copy"

git add apps/web/src/layers/features/marketing/ui/ActivityFeedHero.tsx
git commit -m "feat(web): rebuild hero with stacked layout and new copy"

git add apps/web/src/layers/features/marketing/ui/MarketingFooter.tsx
git commit -m "feat(web): update footer with tagline and simplified layout"

export { Prelude } from './ui/Prelude'
export { VillainSection } from './ui/VillainSection'
export { PivotSection } from './ui/PivotSection'
export { TimelineSection } from './ui/TimelineSection'
export { SubsystemsSection } from './ui/SubsystemsSection'
export { InstallMoment } from './ui/InstallMoment'
export { IdentityClose } from './ui/IdentityClose'
export { TheClose } from './ui/TheClose'

import { siteConfig } from '@/config/site'
import {
  Prelude,
  ActivityFeedHero,
  VillainSection,
  PivotSection,
  TimelineSection,
  SubsystemsSection,
  HonestySection,
  InstallMoment,
  IdentityClose,
  TheClose,
  MarketingNav,
  MarketingHeader,
  MarketingFooter,
} from '@/layers/features/marketing'

const navLinks = [
  { label: 'about', href: '#about' },
  { label: 'blog', href: '/blog' },
  { label: 'docs', href: '/docs' },
]

const socialLinks = [
  // ... same GitHub + npm SVG icons as current
]

export default function HomePage() {
  return (
    <>
      <Prelude />
      <MarketingHeader />

      <main>
        <ActivityFeedHero
          ctaText="npm install -g dorkos"
          ctaHref={siteConfig.npm}
          githubHref={siteConfig.github}
        />
        <VillainSection />
        <PivotSection />
        <TimelineSection />
        <SubsystemsSection />
        <HonestySection />
        <InstallMoment />
        <IdentityClose email={siteConfig.contactEmail} />
        <TheClose />
      </main>

      <MarketingFooter
        email={siteConfig.contactEmail}
        socialLinks={socialLinks}
      />

      <MarketingNav links={navLinks} />
    </>
  )
}

"Your AI agents are brilliant. They just can't do anything when you leave. DorkOS gives them scheduling, communication, memory, and a command center. Open source. Self-hosted. You slept. They shipped."

git add apps/web/src/layers/features/marketing/index.ts apps/web/src/app/\(marketing\)/page.tsx apps/web/src/app/\(marketing\)/layout.tsx
git commit -m "feat(web): compose new homepage with narrative arc"

git add -A
git commit -m "fix(web): visual QA polish for homepage rebuild"