HTML
Copy
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Logo row</span>
<section class="rounded-3xl bg-white px-[clamp(20px,5vw,64px)] py-[clamp(36px,5vw,72px)] leading-normal text-[#1c1917]" aria-labelledby="t-lc-row">
<h2 class="text-center text-[.86rem] font-bold tracking-[.12em] text-[#57534e] uppercase" id="t-lc-row">Trusted by more than 4,000 operations teams</h2>
<ul class="mt-[30px] flex flex-wrap items-center justify-center gap-x-8 gap-y-[22px] text-[1.25rem] sm:gap-x-10 sm:gap-y-7"><li><span class="inline-flex items-center gap-[9px] leading-none whitespace-nowrap text-[#57534e] before:flex-none before:content-[''] text-[1em] font-[Georgia,'Times_New_Roman',serif] italic font-bold tracking-[-.01em] before:size-[18px] before:rounded-full before:border-3 before:border-current">Quillstone</span></li><li><span class="inline-flex items-center gap-[9px] leading-none whitespace-nowrap text-[#57534e] before:flex-none before:content-[''] text-[.76em] font-extrabold tracking-[.13em] uppercase before:h-4 before:w-[18px] before:bg-current before:[clip-path:polygon(50%_0,100%_100%,0_100%)]">Verdant Labs</span></li><li><span class="inline-flex items-center gap-[9px] leading-none whitespace-nowrap text-[#57534e] before:flex-none before:content-[''] text-[1.1em] font-black tracking-[-.05em] before:size-[13px] before:rotate-45 before:rounded-[2px] before:bg-current">loomwork</span></li><li><span class="inline-flex items-center gap-[9px] leading-none whitespace-nowrap text-[#57534e] before:flex-none before:content-[''] font-mono text-[.86em] font-bold tracking-[-.02em] before:h-[18px] before:w-3.5 before:bg-[linear-gradient(90deg,currentColor_0_35%,transparent_35%_65%,currentColor_65%)]">Ferrow & Co</span></li><li><span class="inline-flex items-center gap-[9px] leading-none whitespace-nowrap text-[#57534e] before:flex-none before:content-[''] text-[1em] font-['Avenir_Next_Condensed','Arial_Narrow',-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,sans-serif] font-extrabold tracking-[.04em] uppercase [font-stretch:condensed] before:h-2.5 before:w-5 before:self-center before:rounded-t-[20px] before:bg-current">Halden</span></li><li><span class="inline-flex items-center gap-[9px] leading-none whitespace-nowrap text-[#57534e] before:flex-none before:content-[''] text-[1em] font-[ui-rounded,'SF_Pro_Rounded','Nunito',-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,sans-serif] font-bold tracking-[-.02em] before:h-[13px] before:w-6 before:rounded-full before:border-3 before:border-current">Pebblebank</span></li></ul>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Metrics beside a logo grid</span>
<section class="grid grid-cols-1 items-center gap-[clamp(36px,6vw,80px)] rounded-3xl bg-white px-[clamp(20px,5vw,64px)] py-[clamp(36px,5vw,72px)] leading-normal text-[#1c1917] lg:grid-cols-2" aria-labelledby="t-lc-metrics">
<div>
<p class="text-[.8rem] font-bold tracking-[.12em] text-[#b45309] uppercase">Ledgerline customers</p>
<h2 class="mt-3 text-[clamp(1.75rem,1.2rem+2vw,2.5rem)] leading-[1.1] font-extrabold tracking-[-.025em]" id="t-lc-metrics">The numbers our customers report</h2>
<p class="mt-3.5 max-w-[52ch] text-[1.05rem] text-[#57534e]">Finance teams move to Ledgerline to close the month faster. This is what changed for them in the first year.</p>
<dl class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-3"><div class="border-t-3 border-[#1c1917] pt-4"><dt class="text-[clamp(1.7rem,1.3rem+1.4vw,2.3rem)] leading-[1.05] font-extrabold tracking-[-.03em]">42%</dt><dd class="mt-1.5 text-[.92rem] text-[#57534e]">fewer manual journal entries</dd></div><div class="border-t-3 border-[#1c1917] pt-4"><dt class="text-[clamp(1.7rem,1.3rem+1.4vw,2.3rem)] leading-[1.05] font-extrabold tracking-[-.03em]">3.1 days</dt><dd class="mt-1.5 text-[.92rem] text-[#57534e]">saved on every month-end close</dd></div><div class="border-t-3 border-[#1c1917] pt-4"><dt class="text-[clamp(1.7rem,1.3rem+1.4vw,2.3rem)] leading-[1.05] font-extrabold tracking-[-.03em]">98%</dt><dd class="mt-1.5 text-[.92rem] text-[#57534e]">of customers renew each year</dd></div></dl>
<p class="mt-[22px] text-[.84rem] text-[#57534e]">Median figures from 212 customers surveyed in March 2026.</p>
</div>
<ul class="grid grid-cols-2 overflow-hidden rounded-[18px] border border-[#e7e5e4] text-[1.05rem] sm:grid-cols-3" aria-label="Ledgerline customers"><li class="grid min-h-28 place-items-center border-r border-b border-[#e7e5e4] bg-[#fafaf9] p-4 max-sm:even:border-r-0 max-sm:[&:nth-last-child(-n+2)]:border-b-0 sm:[&:nth-child(3n)]:border-r-0 sm:[&:nth-last-child(-n+3)]:border-b-0"><span class="inline-flex items-center gap-[9px] leading-none whitespace-normal text-[#57534e] before:flex-none before:content-[''] text-[1em] font-[Georgia,'Times_New_Roman',serif] italic font-bold tracking-[-.01em] before:size-[18px] before:rounded-full before:border-3 before:border-current">Quillstone</span></li><li class="grid min-h-28 place-items-center border-r border-b border-[#e7e5e4] bg-[#fafaf9] p-4 max-sm:even:border-r-0 max-sm:[&:nth-last-child(-n+2)]:border-b-0 sm:[&:nth-child(3n)]:border-r-0 sm:[&:nth-last-child(-n+3)]:border-b-0"><span class="inline-flex items-center gap-[9px] leading-none whitespace-normal text-[#57534e] before:flex-none before:content-[''] text-[.76em] font-extrabold tracking-[.13em] uppercase before:h-4 before:w-[18px] before:bg-current before:[clip-path:polygon(50%_0,100%_100%,0_100%)]">Verdant Labs</span></li><li class="grid min-h-28 place-items-center border-r border-b border-[#e7e5e4] bg-[#fafaf9] p-4 max-sm:even:border-r-0 max-sm:[&:nth-last-child(-n+2)]:border-b-0 sm:[&:nth-child(3n)]:border-r-0 sm:[&:nth-last-child(-n+3)]:border-b-0"><span class="inline-flex items-center gap-[9px] leading-none whitespace-normal text-[#57534e] before:flex-none before:content-[''] text-[1.1em] font-black tracking-[-.05em] before:size-[13px] before:rotate-45 before:rounded-[2px] before:bg-current">loomwork</span></li><li class="grid min-h-28 place-items-center border-r border-b border-[#e7e5e4] bg-[#fafaf9] p-4 max-sm:even:border-r-0 max-sm:[&:nth-last-child(-n+2)]:border-b-0 sm:[&:nth-child(3n)]:border-r-0 sm:[&:nth-last-child(-n+3)]:border-b-0"><span class="inline-flex items-center gap-[9px] leading-none whitespace-normal text-[#57534e] before:flex-none before:content-[''] font-mono text-[.86em] font-bold tracking-[-.02em] before:h-[18px] before:w-3.5 before:bg-[linear-gradient(90deg,currentColor_0_35%,transparent_35%_65%,currentColor_65%)]">Ferrow & Co</span></li><li class="grid min-h-28 place-items-center border-r border-b border-[#e7e5e4] bg-[#fafaf9] p-4 max-sm:even:border-r-0 max-sm:[&:nth-last-child(-n+2)]:border-b-0 sm:[&:nth-child(3n)]:border-r-0 sm:[&:nth-last-child(-n+3)]:border-b-0"><span class="inline-flex items-center gap-[9px] leading-none whitespace-normal text-[#57534e] before:flex-none before:content-[''] text-[1em] font-['Avenir_Next_Condensed','Arial_Narrow',-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,sans-serif] font-extrabold tracking-[.04em] uppercase [font-stretch:condensed] before:h-2.5 before:w-5 before:self-center before:rounded-t-[20px] before:bg-current">Halden</span></li><li class="grid min-h-28 place-items-center border-r border-b border-[#e7e5e4] bg-[#fafaf9] p-4 max-sm:even:border-r-0 max-sm:[&:nth-last-child(-n+2)]:border-b-0 sm:[&:nth-child(3n)]:border-r-0 sm:[&:nth-last-child(-n+3)]:border-b-0"><span class="inline-flex items-center gap-[9px] leading-none whitespace-normal text-[#57534e] before:flex-none before:content-[''] text-[1em] font-[ui-rounded,'SF_Pro_Rounded','Nunito',-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,sans-serif] font-bold tracking-[-.02em] before:h-[13px] before:w-6 before:rounded-full before:border-3 before:border-current">Pebblebank</span></li></ul>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Rating, quote and figures in one strip</span>
<section class="grid grid-cols-1 overflow-hidden rounded-3xl bg-white leading-normal text-[#1c1917] sm:grid-cols-2 lg:grid-cols-[auto_1fr_auto]" aria-labelledby="t-lc-proof">
<div class="flex flex-col justify-center border-t border-[#e7e5e4] bg-[#fffbeb] p-[clamp(28px,4vw,44px)] lg:border-t-0"><b class="text-[3.4rem] leading-none font-extrabold tracking-[-.04em]">4.8</b><span class="mt-2.5 flex gap-[3px] text-[#d97706]" aria-hidden="true"><svg class="size-5 fill-current" width="20" height="20" 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="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="size-5 fill-current" width="20" height="20" 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="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="size-5 fill-current" width="20" height="20" 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="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="size-5 fill-current" width="20" height="20" 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="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="size-5 fill-current" width="20" height="20" 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="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span><p class="mt-2 max-w-[16ch] text-[.88rem] text-[#57534e]">out of 5 from 1,240 reviews</p></div>
<div class="p-[clamp(28px,4vw,44px)] max-lg:col-span-full max-lg:row-start-1 lg:border-l lg:border-[#e7e5e4]">
<h2 class="text-[.8rem] font-bold tracking-[.12em] text-[#b45309] uppercase" id="t-lc-proof">What finance teams say about Ledgerline</h2>
<figure>
<blockquote class="mt-3 text-[clamp(1.1rem,1rem+.5vw,1.32rem)] leading-[1.45] font-semibold tracking-[-.01em]"><p>We replaced three tools and a weekly spreadsheet. Month-end close went from six days to two, and nobody misses the spreadsheet.</p></blockquote>
<figcaption class="mt-[18px] flex items-center gap-3 text-[.92rem]"><span class="grid size-[42px] flex-none place-items-center rounded-full bg-[#1c1917] text-[.85rem] font-bold text-white" aria-hidden="true">IO</span><div>Ines Okafor<small class="block text-[.86rem] text-[#57534e]">Finance lead, Pebblebank</small></div></figcaption>
</figure>
</div>
<dl class="grid content-center gap-[22px] border-t border-[#e7e5e4] p-[clamp(28px,4vw,44px)] sm:border-l lg:min-w-[200px] lg:border-t-0"><div><dt class="text-[1.8rem] leading-none font-extrabold tracking-[-.03em]">92%</dt><dd class="mt-1 max-w-[20ch] text-[.88rem] text-[#57534e]">would recommend Ledgerline to a peer</dd></div><div><dt class="text-[1.8rem] leading-none font-extrabold tracking-[-.03em]">11 min</dt><dd class="mt-1 max-w-[20ch] text-[.88rem] text-[#57534e]">median first reply from support</dd></div></dl>
</section></div>
