Three ways for the feature cards

Artifacts, Automation Tasks and Extensions, now that the hero has the mode tabs

Lead: The three cards repeat the live app in small screenshots. Each option below removes the repeat in a different way. I would ship B. It adds no section, and each feature sits under the mode it belongs to.

A

Now: three small screenshots

on /platform today, and on home until the merge ships

React

B

Inside each mode tab

recommended

Each feature becomes a chip under the hero caption of the mode it lives in. Click a chip and the screenshot opens over the live frame. No new section.

React

C

What comes back

shows results, not UI

Replace the screenshots with what the work produces. Each card is a finished file type. Automation and Extensions become two short lines under the cards.

React

D

One line each

smallest

Keep the three features as text only: an icon, a name and one sentence, in one row under the hero caption. No images.

React

E

Pick one

Option	Adds a section	Shows the screenshots	Page cost
B Inside each mode tab	ok	on click ok	none
C What comes back	yes warn		one section
D One line each	ok		one row

Which one should the site use?B Inside each mode tab suggestedchips under the hero caption, screenshot on clickC What comes backa file-type section, two short linesD One line eachtext row, no imagesNoneleave the cards off the home page and keep them on /platform

---
title: Three ways for the feature cards
subtitle: Artifacts, Automation Tasks and Extensions, now that the hero has the mode tabs
template: doc
---
Lead: The three cards repeat the live app in small screenshots. Each option below removes the repeat in a different way. I would ship B. It adds no section, and each feature sits under the mode it belongs to.

## A Now: three small screenshots {meta="on /platform today, and on home until the merge ships"}
```react h=360
export default function Now() {
  const cards = [
    ['Artifacts', 'Docs, sheets, slides, sites, designs, images and video, kept in one library.', 'https://www.allternit.com/product/home-artifacts.webp'],
    ['Automation Tasks', 'Goals, routines, loops and agent heartbeats that run on a schedule.', 'https://www.allternit.com/product/home-automation.webp'],
    ['Extensions', 'The Allternit agent inside Word, Excel, PowerPoint and your browser.', 'https://www.allternit.com/product/aci-extensions.webp'],
  ];
  return (
    <div className="bg-[#FAF8F4] p-6 font-sans">
      <div className="grid gap-5 md:grid-cols-3">
        {cards.map(([t, b, src]) => (
          <figure key={t}>
            <div className="overflow-hidden rounded-xl border border-black/10 bg-white"><img src={src} alt="" className="block w-full" /></div>
            <h3 className="mt-3 text-sm font-semibold text-[#0F0F0F]">{t}</h3>
            <p className="mt-1 text-xs leading-relaxed text-[#5C4F42]">{b}</p>
          </figure>
        ))}
      </div>
    </div>
  );
}
```

## B Inside each mode tab {meta="recommended"}
Each feature becomes a chip under the hero caption of the mode it lives in. Click a chip and the screenshot opens over the live frame. No new section.
```react h=470
import { useState } from 'react';
const MODES = [
  { id: 'Home', line: 'Ask, or hand the work over.', chips: [['Artifacts', 'https://www.allternit.com/product/home-artifacts.webp', 'Docs, sheets, slides, sites, designs, images and video, kept in one library.'], ['Automation Tasks', 'https://www.allternit.com/product/home-automation.webp', 'Routines and agent heartbeats that run on a schedule.']] },
  { id: 'Code', line: 'A coding agent with your repo, your terminal and your rules.', chips: [] },
  { id: 'ACI', line: 'Agents that use a browser, or a whole computer.', chips: [['Extensions', 'https://www.allternit.com/product/aci-extensions.webp', 'The agent inside Word, Excel, PowerPoint and your browser.']] },
  { id: 'Bots', line: 'Put a team on it.', chips: [] },
];
export default function InsideTabs() {
  const [m, setM] = useState(0);
  const [peek, setPeek] = useState(null);
  const mode = MODES[m];
  return (
    <div className="bg-[#FAF8F4] p-6 font-sans">
      <div className="mx-auto flex w-max gap-1 rounded-full border border-black/10 bg-white/70 p-1">
        {MODES.map((x, i) => (
          <button key={x.id} onClick={() => { setM(i); setPeek(null); }} className={`rounded-full px-5 py-1.5 text-sm font-medium ${i === m ? 'bg-[#0F0F0F] text-[#FAF8F4]' : 'text-black/60'}`}>{x.id}</button>
        ))}
      </div>
      <div className="relative mt-3 h-56 overflow-hidden rounded-2xl border border-black/10 bg-white">
        <div className="flex h-full items-center justify-center text-xs text-black/35">live app frame ({mode.id})</div>
        {peek && (
          <div className="absolute inset-0 flex flex-col bg-white/95 p-3">
            <img src={peek[1]} alt="" className="min-h-0 flex-1 rounded-lg border border-black/10 object-contain" />
            <p className="mt-2 text-center text-xs text-[#5C4F42]">{peek[2]} <button onClick={() => setPeek(null)} className="ml-2 font-medium text-[#0F0F0F] underline">Back to the app</button></p>
          </div>
        )}
      </div>
      <p className="mt-4 text-center font-serif text-xl text-[#0F0F0F]" style={{ fontFamily: 'Newsreader, Georgia, serif' }}>{mode.line}</p>
      <div className="mt-2 flex flex-wrap justify-center gap-2">
        {mode.chips.map((c) => (
          <button key={c[0]} onClick={() => setPeek(c)} className={`rounded-full border px-3 py-1 text-xs font-medium ${peek && peek[0] === c[0] ? 'border-[#D97757] bg-[#D97757] text-white' : 'border-black/15 bg-white text-[#0F0F0F]'}`}>{c[0]}</button>
        ))}
        {mode.chips.length === 0 && <span className="text-xs text-black/40">Pick Home or ACI to see their chips</span>}
      </div>
    </div>
  );
}
```

## C What comes back {meta="shows results, not UI"}
Replace the screenshots with what the work produces. Each card is a finished file type. Automation and Extensions become two short lines under the cards.
```react h=420
export default function Outputs() {
  const items = [
    ['Deck', '#1F3A5F', (<div className="space-y-1.5"><div className="h-2 w-3/4 rounded bg-white/80" /><div className="h-1.5 w-1/2 rounded bg-white/40" /><div className="mt-3 grid grid-cols-3 gap-1"><div className="h-6 rounded bg-white/30" /><div className="h-6 rounded bg-white/50" /><div className="h-6 rounded bg-white/30" /></div></div>)],
    ['Doc', '#E9E4DA', (<div className="space-y-1.5"><div className="h-2 w-2/3 rounded bg-black/70" />{[1, 2, 3, 4].map((i) => <div key={i} className="h-1 w-full rounded bg-black/20" />)}</div>)],
    ['Sheet', '#0F766E', (<div className="grid grid-cols-4 gap-0.5">{Array.from({ length: 16 }, (_, i) => <div key={i} className={`h-3 ${i < 4 ? 'bg-white/70' : 'bg-white/25'}`} />)}</div>)],
    ['Site', '#F2A93B', (<div><div className="flex gap-1"><span className="h-1.5 w-1.5 rounded-full bg-black/40" /><span className="h-1.5 w-1.5 rounded-full bg-black/40" /></div><div className="mt-2 h-8 rounded bg-black/15" /><div className="mt-1.5 h-1.5 w-1/2 rounded bg-black/40" /></div>)],
  ];
  return (
    <div className="bg-[#FAF8F4] p-6 font-sans">
      <h3 className="font-serif text-2xl text-[#0F0F0F]" style={{ fontFamily: 'Newsreader, Georgia, serif' }}>Ask for it. Get the file back.</h3>
      <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        {items.map(([name, color, body]) => (
          <div key={name} className="flex aspect-[4/5] flex-col rounded-2xl p-4" style={{ background: color }}>
            <div className="flex-1">{body}</div>
            <p className={`text-sm font-medium ${color === '#E9E4DA' || color === '#F2A93B' ? 'text-[#0F0F0F]' : 'text-white'}`}>{name}</p>
          </div>
        ))}
      </div>
      <div className="mt-4 grid gap-2 text-sm text-[#5C4F42] md:grid-cols-2">
        <p><span className="font-medium text-[#0F0F0F]">Runs on a schedule.</span> Routines and heartbeats keep going while you are away.</p>
        <p><span className="font-medium text-[#0F0F0F]">Works inside your apps.</span> Word, Excel, PowerPoint and your browser.</p>
      </div>
    </div>
  );
}
```

## D One line each {meta="smallest"}
Keep the three features as text only: an icon, a name and one sentence, in one row under the hero caption. No images.
```react h=240
export default function OneLine() {
  const rows = [
    ['▣', 'Artifacts', 'Docs, sheets, slides, sites and images in one library.'],
    ['↻', 'Automation Tasks', 'Routines and heartbeats that run on a schedule.'],
    ['⧉', 'Extensions', 'The agent inside Word, Excel, PowerPoint and your browser.'],
  ];
  return (
    <div className="bg-[#FAF8F4] p-6 font-sans">
      <div className="grid gap-4 border-t border-black/10 pt-5 md:grid-cols-3">
        {rows.map(([icon, t, b]) => (
          <div key={t} className="flex gap-3">
            <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[#0F0F0F] text-sm text-[#FAF8F4]">{icon}</span>
            <div><p className="text-sm font-semibold text-[#0F0F0F]">{t}</p><p className="mt-0.5 text-xs leading-relaxed text-[#5C4F42]">{b}</p></div>
          </div>
        ))}
      </div>
    </div>
  );
}
```

## E Pick one
| Option | Adds a section | Shows the screenshots | Page cost |
|---|---|---|---|
| B Inside each mode tab | no ok | on click ok | none |
| C What comes back | yes warn | no | one section |
| D One line each | no ok | no | one row |

```ask
Which one should the site use?
* B Inside each mode tab | chips under the hero caption, screenshot on click
- C What comes back | a file-type section, two short lines
- D One line each | text row, no images
- None | leave the cards off the home page and keep them on /platform
```