<div><span class="lbl">Three rows, alternating sides: drawn screenshot, photo with a stat, photo with a list</span>
<section class="fr" aria-labelledby="fr-title">
<div class="fr-head">
<p class="fr-eyebrow">Shelfwise for independent shops</p>
<h2 class="fr-title" id="fr-title">Stock, orders and the till in one place</h2>
<p class="fr-lead">Shelfwise runs the back office of a shop with one stockroom and a website. Here is what changes on your first week.</p>
</div>
<div class="fr-row">
<div>
<span class="fr-chip"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>Inventory</span>
<h3>Know what is on the shelf without counting it</h3>
<p>Every sale, delivery and online order updates the same stock figure, so the number on the screen is the number on the shelf.</p>
<ul class="fr-checks">
<li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Live stock across the shop floor, the stockroom and the website</li>
<li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Reorder points that suggest quantities from last year's sales</li>
<li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Barcode scanning from any phone camera</li>
</ul>
<a class="fr-link" href="#">See inventory features</a>
</div>
<div class="fr-media">
<div class="fr-app" role="img" aria-label="Shelfwise inventory screen listing four products: granola with 48 in stock, cold brew concentrate low at 6, sourdough starter kit out of stock and sea salt with 31 in stock.">
<div class="fr-app-bar"><i></i><i></i><i></i><span>Shelfwise · Inventory</span></div>
<div class="fr-app-tools"><span class="fr-search"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Search 1,284 products</span><span class="fr-pill-btn">Reorder 2</span></div>
<div class="fr-item"><span class="fr-thumb" style="--fr-thumb:#f59e0b"></span><span><b>Oat and honey granola 500g</b><small>GRN-0412</small></span><span class="fr-bar"><i style="--fr-lvl:80%"></i>48</span><span class="fr-status fr-ok">In stock</span></div>
<div class="fr-item"><span class="fr-thumb" style="--fr-thumb:#78350f"></span><span><b>Cold brew concentrate 1L</b><small>CBC-1100</small></span><span class="fr-bar"><i style="--fr-lvl:10%;--fr-fill:#b45309"></i>6</span><span class="fr-status fr-low">Low</span></div>
<div class="fr-item"><span class="fr-thumb" style="--fr-thumb:#e7e5e4"></span><span><b>Sourdough starter kit</b><small>SDK-0090</small></span><span class="fr-bar"><i style="--fr-lvl:0%"></i>0</span><span class="fr-status fr-out">Out</span></div>
<div class="fr-item"><span class="fr-thumb" style="--fr-thumb:#a8a29e"></span><span><b>Smoked sea salt 250g</b><small>SSS-0250</small></span><span class="fr-bar"><i style="--fr-lvl:52%"></i>31</span><span class="fr-status fr-ok">In stock</span></div>
</div>
</div>
</div>
<div class="fr-row fr-flip">
<div>
<span class="fr-chip"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Fulfilment</span>
<h3>Pick lists in shelf order</h3>
<p>Online orders are batched and sorted by aisle, so one walk round the stockroom packs a whole morning of orders.</p>
<dl class="fr-stat"><dt>38%</dt><dd>faster picking at Larder and Co. in their first month</dd></dl>
<a class="fr-link" href="#">How batch picking works</a>
</div>
<figure class="fr-media">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1000&q=80" alt="Rows of shelves stacked with yellow crates and cardboard boxes in a large stockroom" width="1000" height="750" loading="lazy">
<p class="fr-float" aria-hidden="true"><b>Batch 2041</b><span>14 orders · aisles A to F</span><i style="--fr-done:64%"></i></p>
</figure>
</div>
<div class="fr-row">
<div>
<span class="fr-chip"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>Point of sale</span>
<h3>A till that knows your stock</h3>
<p>The tablet till takes payments at the counter and draws on the same stock, so a sale in the shop never oversells the website.</p>
<ul class="fr-checks">
<li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Cards, contactless and gift vouchers</li>
<li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Keeps selling offline and syncs when the Wi-Fi returns</li>
<li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Receipts by email or text message</li>
</ul>
<a class="fr-link" href="#">Explore the till app</a>
</div>
<figure class="fr-media">
<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?auto=format&fit=crop&w=1000&q=80" alt="A customer paying at a shop counter on a tablet till while the shop assistant smiles across the counter" width="1000" height="750" loading="lazy">
</figure>
</div>
</section></div>
CSS
/* Alternating feature rows: a <section> with a heading, then rows of copy beside a picture. Even rows flip with
order, and every row stacks below 992px with the copy first. The inventory "screenshot" is HTML and CSS
with role="img" and a written description, so it stays sharp and screen readers hear one summary. */
.fr{--fr-ink:#1c1917;--fr-muted:#57534e;--fr-accent:#166534;--fr-accent-hover:#14532d;--fr-tint:#dcfce7;--fr-line:#e7e5e4;--fr-bg:#fffdf8;--fr-radius:28px;
background:var(--fr-bg);color:var(--fr-ink);border-radius:var(--fr-radius);padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
.fr :where(h2,h3,p,ul,dl,dd,figure){margin:0;padding:0}
.fr ul{list-style:none}
.fr a{color:var(--fr-accent);font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fr a:hover{color:var(--fr-accent-hover);text-decoration-thickness:2px}
.fr a:focus-visible{outline:3px solid var(--fr-accent);outline-offset:3px;border-radius:4px}
.fr-head{max-width:640px;margin:0 auto;text-align:center}
.fr-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fr-accent)}
.fr-title{margin-top:12px!important;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.fr-lead{margin-top:14px!important;font-size:1.08rem;color:var(--fr-muted)}
.fr-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,88px);margin-top:clamp(56px,8vw,104px)}
.fr-flip .fr-media{order:-1}
.fr-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border-radius:999px;background:var(--fr-tint);color:var(--fr-accent);font-size:.82rem;font-weight:700}
.fr-chip svg{width:16px;height:16px}
.fr h3{margin-top:16px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.45rem,1.1rem + 1.2vw,2rem);line-height:1.15;letter-spacing:-.015em;font-weight:700}
.fr h3+p{margin-top:14px;font-size:1.04rem;color:var(--fr-muted);max-width:52ch}
.fr-checks{display:grid;gap:12px;margin-top:22px!important}
.fr-checks li{display:flex;gap:12px;align-items:flex-start}
.fr-checks svg{flex:none;width:22px;height:22px;padding:4px;margin-top:1px;border-radius:50%;background:var(--fr-accent);color:#fff}
.fr-link{display:inline-block;margin-top:24px}
.fr-stat{display:flex;align-items:baseline;gap:14px;margin-top:22px!important;padding:16px 18px;border-left:4px solid var(--fr-accent);background:#f5f5f0;border-radius:0 12px 12px 0}
.fr-stat dt{font-family:Georgia,"Times New Roman",serif;font-size:2.2rem;font-weight:700;line-height:1;color:var(--fr-accent)}
.fr-stat dd{font-size:.95rem;color:var(--fr-muted)}
.fr-media{position:relative}
.fr-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.fr-float{position:absolute;left:18px;bottom:18px;min-width:220px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 20px 44px -20px rgba(28,25,23,.5);font-size:.86rem}
.fr-float b{display:block;font-size:.95rem}
.fr-float span{color:var(--fr-muted)}
.fr-float i{display:block;height:6px;margin-top:10px;border-radius:9px;background:linear-gradient(90deg,var(--fr-accent) var(--fr-done),var(--fr-line) 0)}
/* the drawn inventory screen */
.fr-app{overflow:hidden;border:1px solid var(--fr-line);border-radius:18px;background:#fff;box-shadow:0 30px 60px -36px rgba(28,25,23,.55);font-size:.84rem}
.fr-app-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f5f5f4;border-bottom:1px solid var(--fr-line);color:var(--fr-muted);font-size:.78rem}
.fr-app-bar i{width:10px;height:10px;border-radius:50%;background:#d6d3d1}
.fr-app-bar span{margin-left:8px}
.fr-app-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px}
.fr-search{display:flex;align-items:center;gap:8px;flex:1;max-width:240px;padding:7px 10px;border:1px solid var(--fr-line);border-radius:8px;color:#6b6560}
.fr-search svg{width:15px;height:15px}
.fr-pill-btn{padding:7px 12px;border-radius:8px;background:var(--fr-accent);color:#fff;font-weight:650;white-space:nowrap}
.fr-item{display:grid;grid-template-columns:30px 1fr 96px 72px;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid #f0efed}
.fr-thumb{width:30px;height:30px;border-radius:8px;background:var(--fr-thumb)}
.fr-item b{display:block;font-weight:650}
.fr-item small{color:#6b6560;font-size:.74rem}
.fr-bar{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.fr-bar i{flex:1;height:6px;border-radius:9px;background:linear-gradient(90deg,var(--fr-fill,var(--fr-accent)) var(--fr-lvl),#ecebe8 0)}
.fr-status{justify-self:end;padding:3px 9px;border-radius:999px;font-size:.74rem;font-weight:700}
.fr-ok{background:var(--fr-tint);color:var(--fr-accent)}
.fr-low{background:#fef3c7;color:#92400e}
.fr-out{background:#ffe4e6;color:#9f1239}
@media (max-width:991px){
.fr-row{grid-template-columns:1fr}
.fr-flip .fr-media{order:0}
}
@media (max-width:480px){
.fr-item{grid-template-columns:30px 1fr auto;padding:11px 12px}
.fr-bar{display:none}
.fr-app-tools{padding:12px}
.fr-float{left:12px;right:12px;bottom:12px;min-width:0}
}
@media (prefers-reduced-motion:reduce){.fr a{transition:none}}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Three rows, alternating sides: drawn screenshot, photo with a stat, photo with a list</span>
<section class="fr" aria-labelledby="b-fr-title">
<div class="mx-auto text-center" style="max-width:640px">
<p class="fr-eyebrow">Shelfwise for independent shops</p>
<h2 class="fr-title" id="b-fr-title">Stock, orders and the till in one place</h2>
<p class="fr-lead">Shelfwise runs the back office of a shop with one stockroom and a website. Here is what changes on your first week.</p>
</div>
<div class="row fr-row align-items-center">
<div class="col-lg-6">
<span class="badge rounded-pill"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>Inventory</span>
<h3>Know what is on the shelf without counting it</h3>
<p>Every sale, delivery and online order updates the same stock figure, so the number on the screen is the number on the shelf.</p>
<ul class="list-unstyled d-grid gap-2 mt-4 mb-0">
<li class="d-flex gap-3 align-items-start"><svg class="fr-checks-i" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Live stock across the shop floor, the stockroom and the website</li>
<li class="d-flex gap-3 align-items-start"><svg class="fr-checks-i" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Reorder points that suggest quantities from last year's sales</li>
<li class="d-flex gap-3 align-items-start"><svg class="fr-checks-i" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Barcode scanning from any phone camera</li>
</ul>
<a class="d-inline-block mt-4" href="#">See inventory features</a>
</div>
<div class="col-lg-6">
<div class="card fr-app" role="img" aria-label="Shelfwise inventory screen listing four products: granola with 48 in stock, cold brew concentrate low at 6, sourdough starter kit out of stock and sea salt with 31 in stock.">
<div class="card-header"><i></i><i></i><i></i><span class="ms-2">Shelfwise · Inventory</span></div>
<div class="d-flex justify-content-between align-items-center gap-2 p-3"><span class="fr-search d-flex align-items-center gap-2 flex-grow-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Search 1,284 products</span><span class="fr-pill-btn">Reorder 2</span></div>
<table class="table align-middle">
<tbody>
<tr><td><span class="fr-thumb" style="--fr-thumb:#f59e0b"></span></td><td><b class="d-block fw-semibold">Oat and honey granola 500g</b><small>GRN-0412</small></td><td class="fr-bar-col"><span class="d-flex align-items-center gap-2"><span class="progress"><span class="progress-bar" style="width:80%"></span></span>48</span></td><td><span class="badge rounded-pill fr-status fr-ok">In stock</span></td></tr>
<tr><td><span class="fr-thumb" style="--fr-thumb:#78350f"></span></td><td><b class="d-block fw-semibold">Cold brew concentrate 1L</b><small>CBC-1100</small></td><td class="fr-bar-col"><span class="d-flex align-items-center gap-2"><span class="progress"><span class="progress-bar" style="width:10%;background:#b45309"></span></span>6</span></td><td><span class="badge rounded-pill fr-status fr-low">Low</span></td></tr>
<tr><td><span class="fr-thumb" style="--fr-thumb:#e7e5e4"></span></td><td><b class="d-block fw-semibold">Sourdough starter kit</b><small>SDK-0090</small></td><td class="fr-bar-col"><span class="d-flex align-items-center gap-2"><span class="progress"><span class="progress-bar" style="width:0%"></span></span>0</span></td><td><span class="badge rounded-pill fr-status fr-out">Out</span></td></tr>
<tr><td><span class="fr-thumb" style="--fr-thumb:#a8a29e"></span></td><td><b class="d-block fw-semibold">Smoked sea salt 250g</b><small>SSS-0250</small></td><td class="fr-bar-col"><span class="d-flex align-items-center gap-2"><span class="progress"><span class="progress-bar" style="width:52%"></span></span>31</span></td><td><span class="badge rounded-pill fr-status fr-ok">In stock</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row fr-row align-items-center">
<div class="col-lg-6">
<span class="badge rounded-pill"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Fulfilment</span>
<h3>Pick lists in shelf order</h3>
<p>Online orders are batched and sorted by aisle, so one walk round the stockroom packs a whole morning of orders.</p>
<dl class="fr-stat d-flex align-items-baseline gap-3 mt-4 px-3 py-3"><dt>38%</dt><dd>faster picking at Larder and Co. in their first month</dd></dl>
<a class="d-inline-block mt-4" href="#">How batch picking works</a>
</div>
<div class="col-lg-6 order-lg-first">
<figure class="figure position-relative w-100 mb-0">
<img class="figure-img mb-0" src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1000&q=80" alt="Rows of shelves stacked with yellow crates and cardboard boxes in a large stockroom" width="1000" height="750" loading="lazy">
<div class="card fr-float position-absolute" aria-hidden="true"><div class="card-body"><b class="d-block" style="font-size:.95rem">Batch 2041</b><span style="color:var(--fr-muted)">14 orders · aisles A to F</span><div class="progress mt-2"><div class="progress-bar" style="width:64%"></div></div></div></div>
</figure>
</div>
</div>
<div class="row fr-row align-items-center">
<div class="col-lg-6">
<span class="badge rounded-pill"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>Point of sale</span>
<h3>A till that knows your stock</h3>
<p>The tablet till takes payments at the counter and draws on the same stock, so a sale in the shop never oversells the website.</p>
<ul class="list-unstyled d-grid gap-2 mt-4 mb-0">
<li class="d-flex gap-3 align-items-start"><svg class="fr-checks-i" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Cards, contactless and gift vouchers</li>
<li class="d-flex gap-3 align-items-start"><svg class="fr-checks-i" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Keeps selling offline and syncs when the Wi-Fi returns</li>
<li class="d-flex gap-3 align-items-start"><svg class="fr-checks-i" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Receipts by email or text message</li>
</ul>
<a class="d-inline-block mt-4" href="#">Explore the till app</a>
</div>
<div class="col-lg-6">
<figure class="figure w-100 mb-0"><img class="figure-img mb-0" src="https://images.unsplash.com/photo-1556740758-90de374c12ad?auto=format&fit=crop&w=1000&q=80" alt="A customer paying at a shop counter on a tablet till while the shop assistant smiles across the counter" width="1000" height="750" loading="lazy"></figure>
</div>
</div>
</section></div>
CSS
/* Alternating feature rows in Bootstrap 5: .row / .col-lg-6 with .order-lg-first to flip a row, .badge chips,
a .card + .table for the drawn inventory screen and .figure for the photos. This block adds the palette and type. */
.fr{--fr-ink:#1c1917;--fr-muted:#57534e;--fr-accent:#166534;--fr-accent-hover:#14532d;--fr-tint:#dcfce7;--fr-line:#e7e5e4;--fr-radius:28px;
--bs-link-color-rgb:22,101,52;--bs-link-hover-color-rgb:20,83,45;
background:#fffdf8;color:var(--fr-ink);border-radius:var(--fr-radius);padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px);line-height:1.55}
.fr :where(h2,h3,p,dl,dd,figure){margin:0}
.fr a{font-weight:650;text-decoration-thickness:1px;text-underline-offset:4px}
.fr a:hover{text-decoration-thickness:2px}
.fr a:focus-visible{outline:3px solid var(--fr-accent);outline-offset:3px;border-radius:4px;box-shadow:none}
.fr-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fr-accent)}
.fr-title{margin-top:12px!important;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.fr-lead{margin-top:14px!important;font-size:1.08rem;color:var(--fr-muted)}
.fr-row{--bs-gutter-x:clamp(32px,6vw,88px);--bs-gutter-y:32px;margin-top:calc(clamp(56px,8vw,104px) - 32px)}
.fr .badge{--bs-badge-padding-x:12px;--bs-badge-padding-y:5px;--bs-badge-font-size:.82rem;--bs-badge-font-weight:700;--bs-badge-color:var(--fr-accent);
display:inline-flex;align-items:center;gap:7px;padding-left:9px;background:var(--fr-tint)}
.fr .badge svg{width:16px;height:16px}
.fr h3{margin-top:16px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.45rem,1.1rem + 1.2vw,2rem);line-height:1.15;letter-spacing:-.015em;font-weight:700}
.fr h3+p{margin-top:14px;font-size:1.04rem;color:var(--fr-muted);max-width:52ch}
.fr-checks-i{flex:none;width:22px;height:22px;padding:4px;margin-top:1px;border-radius:50%;background:var(--fr-accent);color:#fff}
.fr-stat{border-left:4px solid var(--fr-accent);background:#f5f5f0;border-radius:0 12px 12px 0}
.fr-stat dt{font-family:Georgia,"Times New Roman",serif;font-size:2.2rem;font-weight:700;line-height:1;color:var(--fr-accent)}
.fr-stat dd{font-size:.95rem;color:var(--fr-muted)}
.fr .figure-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.fr-float{left:18px;bottom:18px;min-width:220px;--bs-card-border-width:0;--bs-card-border-radius:14px;--bs-card-spacer-y:14px;--bs-card-spacer-x:16px;
box-shadow:0 20px 44px -20px rgba(28,25,23,.5);font-size:.86rem}
.fr-float .progress{--bs-progress-height:6px;--bs-progress-bar-bg:var(--fr-accent);--bs-progress-bg:var(--fr-line)}
.fr-app{--bs-card-border-color:var(--fr-line);--bs-card-border-radius:18px;--bs-card-cap-bg:#f5f5f4;box-shadow:0 30px 60px -36px rgba(28,25,23,.55);overflow:hidden;font-size:.84rem}
.fr-app .card-header{display:flex;align-items:center;gap:6px;padding:11px 14px;color:var(--fr-muted);font-size:.78rem}
.fr-app .card-header i{width:10px;height:10px;border-radius:50%;background:#d6d3d1}
.fr-search{max-width:240px;padding:7px 10px;border:1px solid var(--fr-line);border-radius:8px;color:#6b6560}
.fr-search svg{width:15px;height:15px}
.fr-pill-btn{padding:7px 12px;border-radius:8px;background:var(--fr-accent);color:#fff;font-weight:650;white-space:nowrap}
.fr-app .table{--bs-table-border-color:#f0efed;margin:0;font-size:.84rem}
.fr-app .table td{padding:11px 8px}
.fr-app .table td:first-child{padding-left:16px;width:46px}
.fr-app .table td:last-child{padding-right:16px;text-align:end}
.fr-thumb{display:block;width:30px;height:30px;border-radius:8px;background:var(--fr-thumb)}
.fr-app small{color:#6b6560;font-size:.74rem}
.fr-app .progress{--bs-progress-height:6px;--bs-progress-bg:#ecebe8;--bs-progress-bar-bg:var(--fr-accent);width:60px}
.fr .fr-ok{background:var(--fr-tint);color:var(--fr-accent)}
.fr .fr-low{background:#fef3c7;color:#92400e}
.fr .fr-out{background:#ffe4e6;color:#9f1239}
.fr-app .fr-status{--bs-badge-padding-x:9px;--bs-badge-padding-y:3px;--bs-badge-font-size:.74rem;padding-left:9px}
@media (max-width:480px){
.fr-bar-col{display:none}
.fr-float{left:12px;right:12px;bottom:12px;min-width:0}
}
@media (prefers-reduced-motion:reduce){.fr a{transition:none}}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Three rows, alternating sides: drawn screenshot, photo with a stat, photo with a list</span>
<section class="rounded-[28px] bg-[#fffdf8] px-[clamp(20px,5vw,72px)] py-[clamp(40px,6vw,88px)] leading-[1.55] text-[#1c1917]" aria-labelledby="t-fr-title">
<div class="mx-auto max-w-[640px] text-center">
<p class="text-[.8rem] font-bold tracking-[.12em] text-[#166534] uppercase">Shelfwise for independent shops</p>
<h2 class="mt-3 font-[Georgia,'Times_New_Roman',serif] text-[clamp(1.9rem,1.2rem+2.4vw,2.9rem)] leading-[1.1] font-bold tracking-[-.02em]" id="t-fr-title">Stock, orders and the till in one place</h2>
<p class="mt-3.5 text-[1.08rem] text-[#57534e]">Shelfwise runs the back office of a shop with one stockroom and a website. Here is what changes on your first week.</p>
</div>
<div class="mt-[clamp(56px,8vw,104px)] grid grid-cols-1 items-center gap-[clamp(32px,6vw,88px)] lg:grid-cols-2">
<div>
<span class="inline-flex items-center gap-[7px] rounded-full bg-[#dcfce7] py-[5px] pr-3 pl-[9px] text-[.82rem] font-bold text-[#166534]"><svg class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>Inventory</span>
<h3 class="mt-4 font-[Georgia,'Times_New_Roman',serif] text-[clamp(1.45rem,1.1rem+1.2vw,2rem)] leading-[1.15] font-bold tracking-[-.015em]">Know what is on the shelf without counting it</h3>
<p class="mt-3.5 max-w-[52ch] text-[1.04rem] text-[#57534e]">Every sale, delivery and online order updates the same stock figure, so the number on the screen is the number on the shelf.</p>
<ul class="mt-[22px] grid gap-3">
<li class="flex items-start gap-3"><svg class="mt-px size-[22px] flex-none rounded-full bg-[#166534] p-1 text-white" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Live stock across the shop floor, the stockroom and the website</li>
<li class="flex items-start gap-3"><svg class="mt-px size-[22px] flex-none rounded-full bg-[#166534] p-1 text-white" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Reorder points that suggest quantities from last year's sales</li>
<li class="flex items-start gap-3"><svg class="mt-px size-[22px] flex-none rounded-full bg-[#166534] p-1 text-white" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Barcode scanning from any phone camera</li>
</ul>
<a class="mt-6 inline-block rounded font-[650] text-[#166534] underline decoration-1 underline-offset-4 hover:text-[#14532d] hover:decoration-2 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#166534]" href="#">See inventory features</a>
</div>
<div class="overflow-hidden rounded-[18px] border border-[#e7e5e4] bg-white text-[.84rem] shadow-[0_30px_60px_-36px_rgba(28,25,23,.55)]" role="img" aria-label="Shelfwise inventory screen listing four products: granola with 48 in stock, cold brew concentrate low at 6, sourdough starter kit out of stock and sea salt with 31 in stock.">
<div class="flex items-center gap-1.5 border-b border-[#e7e5e4] bg-[#f5f5f4] px-3.5 py-[11px] text-[.78rem] text-[#57534e]"><i class="size-2.5 rounded-full bg-[#d6d3d1]"></i><i class="size-2.5 rounded-full bg-[#d6d3d1]"></i><i class="size-2.5 rounded-full bg-[#d6d3d1]"></i><span class="ml-2">Shelfwise · Inventory</span></div>
<div class="flex items-center justify-between gap-2.5 p-3 min-[481px]:p-4"><span class="flex max-w-[240px] flex-1 items-center gap-2 rounded-lg border border-[#e7e5e4] px-2.5 py-[7px] text-[#6b6560]"><svg class="size-[15px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Search 1,284 products</span><span class="rounded-lg bg-[#166534] px-3 py-[7px] font-[650] whitespace-nowrap text-white">Reorder 2</span></div>
<div class="grid grid-cols-[30px_1fr_auto] items-center gap-3 border-t border-[#f0efed] px-3 py-[11px] min-[481px]:grid-cols-[30px_1fr_96px_72px] min-[481px]:px-4"><span class="size-[30px] rounded-lg bg-[#f59e0b]"></span><span><b class="block font-[650]">Oat and honey granola 500g</b><small class="text-[.74rem] text-[#6b6560]">GRN-0412</small></span><span class="hidden items-center gap-2 tabular-nums min-[481px]:flex"><i class="h-1.5 flex-1 rounded-full bg-[#ecebe8]"><i class="block h-full rounded-full bg-[#166534]" style="width:80%"></i></i>48</span><span class="justify-self-end rounded-full px-[9px] py-[3px] text-[.74rem] font-bold bg-[#dcfce7] text-[#166534]">In stock</span></div>
<div class="grid grid-cols-[30px_1fr_auto] items-center gap-3 border-t border-[#f0efed] px-3 py-[11px] min-[481px]:grid-cols-[30px_1fr_96px_72px] min-[481px]:px-4"><span class="size-[30px] rounded-lg bg-[#78350f]"></span><span><b class="block font-[650]">Cold brew concentrate 1L</b><small class="text-[.74rem] text-[#6b6560]">CBC-1100</small></span><span class="hidden items-center gap-2 tabular-nums min-[481px]:flex"><i class="h-1.5 flex-1 rounded-full bg-[#ecebe8]"><i class="block h-full rounded-full bg-[#b45309]" style="width:10%"></i></i>6</span><span class="justify-self-end rounded-full px-[9px] py-[3px] text-[.74rem] font-bold bg-[#fef3c7] text-[#92400e]">Low</span></div>
<div class="grid grid-cols-[30px_1fr_auto] items-center gap-3 border-t border-[#f0efed] px-3 py-[11px] min-[481px]:grid-cols-[30px_1fr_96px_72px] min-[481px]:px-4"><span class="size-[30px] rounded-lg bg-[#e7e5e4]"></span><span><b class="block font-[650]">Sourdough starter kit</b><small class="text-[.74rem] text-[#6b6560]">SDK-0090</small></span><span class="hidden items-center gap-2 tabular-nums min-[481px]:flex"><i class="h-1.5 flex-1 rounded-full bg-[#ecebe8]"><i class="block h-full rounded-full bg-[#166534]" style="width:0%"></i></i>0</span><span class="justify-self-end rounded-full px-[9px] py-[3px] text-[.74rem] font-bold bg-[#ffe4e6] text-[#9f1239]">Out</span></div>
<div class="grid grid-cols-[30px_1fr_auto] items-center gap-3 border-t border-[#f0efed] px-3 py-[11px] min-[481px]:grid-cols-[30px_1fr_96px_72px] min-[481px]:px-4"><span class="size-[30px] rounded-lg bg-[#a8a29e]"></span><span><b class="block font-[650]">Smoked sea salt 250g</b><small class="text-[.74rem] text-[#6b6560]">SSS-0250</small></span><span class="hidden items-center gap-2 tabular-nums min-[481px]:flex"><i class="h-1.5 flex-1 rounded-full bg-[#ecebe8]"><i class="block h-full rounded-full bg-[#166534]" style="width:52%"></i></i>31</span><span class="justify-self-end rounded-full px-[9px] py-[3px] text-[.74rem] font-bold bg-[#dcfce7] text-[#166534]">In stock</span></div>
</div>
</div>
<div class="mt-[clamp(56px,8vw,104px)] grid grid-cols-1 items-center gap-[clamp(32px,6vw,88px)] lg:grid-cols-2">
<div>
<span class="inline-flex items-center gap-[7px] rounded-full bg-[#dcfce7] py-[5px] pr-3 pl-[9px] text-[.82rem] font-bold text-[#166534]"><svg class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Fulfilment</span>
<h3 class="mt-4 font-[Georgia,'Times_New_Roman',serif] text-[clamp(1.45rem,1.1rem+1.2vw,2rem)] leading-[1.15] font-bold tracking-[-.015em]">Pick lists in shelf order</h3>
<p class="mt-3.5 max-w-[52ch] text-[1.04rem] text-[#57534e]">Online orders are batched and sorted by aisle, so one walk round the stockroom packs a whole morning of orders.</p>
<dl class="mt-[22px] flex items-baseline gap-3.5 rounded-r-xl border-l-4 border-[#166534] bg-[#f5f5f0] px-[18px] py-4"><dt class="font-[Georgia,'Times_New_Roman',serif] text-[2.2rem] leading-none font-bold text-[#166534]">38%</dt><dd class="text-[.95rem] text-[#57534e]">faster picking at Larder and Co. in their first month</dd></dl>
<a class="mt-6 inline-block rounded font-[650] text-[#166534] underline decoration-1 underline-offset-4 hover:text-[#14532d] hover:decoration-2 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#166534]" href="#">How batch picking works</a>
</div>
<figure class="relative lg:order-first">
<img class="block aspect-[4/3] h-auto w-full rounded-[22px] object-cover" src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1000&q=80" alt="Rows of shelves stacked with yellow crates and cardboard boxes in a large stockroom" width="1000" height="750" loading="lazy">
<p class="absolute right-3 bottom-3 left-3 rounded-[14px] bg-white px-4 py-3.5 text-[.86rem] shadow-[0_20px_44px_-20px_rgba(28,25,23,.5)] min-[481px]:right-auto min-[481px]:bottom-[18px] min-[481px]:left-[18px] min-[481px]:min-w-[220px]" aria-hidden="true"><b class="block text-[.95rem]">Batch 2041</b><span class="text-[#57534e]">14 orders · aisles A to F</span><i class="mt-2.5 block h-1.5 rounded-full bg-[#e7e5e4]"><i class="block h-full rounded-full bg-[#166534]" style="width:64%"></i></i></p>
</figure>
</div>
<div class="mt-[clamp(56px,8vw,104px)] grid grid-cols-1 items-center gap-[clamp(32px,6vw,88px)] lg:grid-cols-2">
<div>
<span class="inline-flex items-center gap-[7px] rounded-full bg-[#dcfce7] py-[5px] pr-3 pl-[9px] text-[.82rem] font-bold text-[#166534]"><svg class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>Point of sale</span>
<h3 class="mt-4 font-[Georgia,'Times_New_Roman',serif] text-[clamp(1.45rem,1.1rem+1.2vw,2rem)] leading-[1.15] font-bold tracking-[-.015em]">A till that knows your stock</h3>
<p class="mt-3.5 max-w-[52ch] text-[1.04rem] text-[#57534e]">The tablet till takes payments at the counter and draws on the same stock, so a sale in the shop never oversells the website.</p>
<ul class="mt-[22px] grid gap-3">
<li class="flex items-start gap-3"><svg class="mt-px size-[22px] flex-none rounded-full bg-[#166534] p-1 text-white" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Cards, contactless and gift vouchers</li>
<li class="flex items-start gap-3"><svg class="mt-px size-[22px] flex-none rounded-full bg-[#166534] p-1 text-white" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Keeps selling offline and syncs when the Wi-Fi returns</li>
<li class="flex items-start gap-3"><svg class="mt-px size-[22px] flex-none rounded-full bg-[#166534] p-1 text-white" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>Receipts by email or text message</li>
</ul>
<a class="mt-6 inline-block rounded font-[650] text-[#166534] underline decoration-1 underline-offset-4 hover:text-[#14532d] hover:decoration-2 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#166534]" href="#">Explore the till app</a>
</div>
<figure><img class="block aspect-[4/3] h-auto w-full rounded-[22px] object-cover" src="https://images.unsplash.com/photo-1556740758-90de374c12ad?auto=format&fit=crop&w=1000&q=80" alt="A customer paying at a shop counter on a tablet till while the shop assistant smiles across the counter" width="1000" height="750" loading="lazy"></figure>
</div>
</section></div>
About this set
A feature section with a centred heading followed by three rows that alternate copy and picture from side to side, the classic zig-zag layout for explaining a product one feature at a time. Inventory row pairs a label chip, a serif heading, a paragraph, a checklist and a link with a screenshot of a stock list drawn in HTML and CSS, complete with stock bars and In stock, Low and Out status pills. Fulfilment row flips the order and sets a warehouse photo with a floating batch progress card beside a highlighted statistic in a description list. Point of sale row returns to copy on the left with a checklist beside a photo of a counter till. The drawn screenshot is one element with role img and a written description, so it stays crisp, takes your colours and is announced as a single picture rather than a table of numbers. Status pills carry words as well as colour. Below 992px each row stacks with the copy first, and on phones the screenshot drops its stock bars so the product names keep their room. Photos are from Unsplash and load lazily.
What’s included
Three rows that alternate sides, flipped with the order property or .order-lg-first
Inventory screenshot drawn in HTML and CSS with a written description
Photo with a floating progress card and a highlighted statistic
Checklists with tick icons and status pills that use words, not only colour
Rows stack with the copy first below 992px
No JavaScript
Accessibility
The section is named by its h2 and each row has an h3. The drawn screenshot has role img and an aria-label that lists what it shows, photos have descriptive alt text and the decorative progress card is aria-hidden because the copy beside it carries the facts. Links are underlined and show a 3px outline on keyboard focus.
Customise it
Change --fr-accent, --fr-tint, --fr-line and --fr-radius on .fr; the serif headings come from one font-family line. In Bootstrap the chips, table and progress bars read --bs-badge-*, --bs-table-* and --bs-progress-* variables; in Tailwind swap the #166534 and #dcfce7 values.
