PageSourceSearch

https://shadcnpreset.com/build

html shadcnpreset.com collected 2026-10-04 14:05:39 UTC 397,534 bytes, 2 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="antialiased geist_mono_b4d4e0d7-module__vc6T-a__variable font-sans inter_b2991b2-module__9mH_6q__variable"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/chunks/19aebd635f1b9009.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/8cfba7ec0bf7870f.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/e05f9fc8ba613e9d.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/567f5818ebba3c18.js"/>
1<script src="/_next/static/chunks/93e6fd28b9ebd5a5.js" async=""></script>
1<script src="/_next/static/chunks/001528e57962aa4b.js" async=""></script>
1<script src="/_next/static/chunks/290a7655cb2ce534.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-9914bc1281055ef5.js" async=""></script>
1<script src="/_next/static/chunks/c62ab4b81f002aaa.js" async=""></script>
1<script src="/_next/static/chunks/2444bd4b37333ef8.js" async=""></script>
1<script src="/_next/static/chunks/461ada3ac3137557.js" async=""></script>
1<script src="/_next/static/chunks/cb3f1d2dbb6b3f01.js" async=""></script>
1<script src="/_next/static/chunks/d0b45cf1075bc3ab.js" async=""></script>
1<script src="/_next/static/chunks/9ab142f18ad9e6da.js" async=""></script>
1<script src="/_next/static/chunks/ce42789c7730c699.js" async=""></script>
1<script src="/_next/static/chunks/a3e5e771319e9ebe.js" async=""></script>
1<script src="/_next/static/chunks/d266f3d5c5479d30.js" async=""></script>
1<script src="/_next/static/chunks/441281cb4864527f.js" async=""></script>
1<script src="/_next/static/chunks/8ca230e1bacc2158.js" async=""></script>
1<script src="/_next/static/chunks/6ecd2cf99faa4fc3.js" async=""></script>
1<script src="/_next/static/chunks/7ed8c83bc6f79ca1.js" async=""></script>
1<script src="/_next/static/chunks/8fa12bb0e3c0d680.js" async=""></script>
1<script src="/_next/static/chunks/9e522aebfbc6b7e0.js" async=""></script>
1<script src="/_next/static/chunks/d3000f2a2c3f1fbc.js" async=""></script>
1<script src="/_next/static/chunks/5ac944aace50aa82.js" async=""></script>
1<script src="/_next/static/chunks/3bcbd37ba9659c90.js" async=""></script>
1<script src="/_next/static/chunks/06f22f000d1421e0.js" async=""></script>
1<script src="/_next/static/chunks/fc64c839cfa77459.js" async=""></script>
1<script src="/_next/static/chunks/803ae84881f6a5cd.js" async=""></script>
1<script src="/_next/static/chunks/53234dd8f34b6e9b.js" async=""></script>
1<script src="/_next/static/chunks/4388a7d5a0125556.js" async=""></script>
1<script src="/_next/static/chunks/dc65826cd0bdd394.js" async=""></script>
1<script src="/_next/static/chunks/2cfc0e1486b3f23f.js" async=""></script>
1<script src="/_next/static/chunks/58df35895e30b929.js" async=""></script>
1<script src="/_next/static/chunks/ebff0d6e1c6e8883.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>Build a page with Jev | shadcnpreset</title><meta name="description" content="Describe a page and Jev assembles it from shadcncraft blocks, dressed in a shadcn preset you can swap."/><link rel="canonical" href="https://shadcnpreset.com/build"/><meta property="og:title" content="Build a page with Jev"/><meta property="og:description" content="Describe a page and Jev assembles it from shadcncraft blocks, dressed in a shadcn preset you can swap."/><meta property="og:url" content="https://shadcnpreset.com/build"/><meta property="og:site_name" content="shadcnpreset"/><meta property="og:image" content="https://shadcnpreset.com/og-card.png"/><meta property="og:image:alt" content="Find the perfect shadcn preset in seconds"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Build a page with Jev"/><meta name="twitter:description" content="Describe a page and Jev assembles it from shadcncraft blocks, dressed in a shadcn preset you can swap."/><meta name="twitter:image" content="https://shadcnpreset.com/og-card.png"/><link rel="icon" href="/favicon.ico?favicon.75e67670.ico" sizes="48x48" type="image/x-icon"/>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body><div hidden=""><!--$--><!--/$--></div><!--$?--><template id="B:0"></template><!--/$-->
1<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
1<script src="/_next/static/chunks/567f5818ebba3c18.js" id="_R_" async=""></script>
1<div hidden id="S:0">
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<!--&--><!--&--><template id="P:1"></template><!--$--><!--/$--><!--/&--><!--/&--></div>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1<div hidden id="S:1"><div data-slot="container-outer" class="grid h-dvh grid-rows-[auto_minmax(0,1fr)] overflow-hidden"><div class="bg-header"><header data-slot="container-outer" class="bg-transparent"><div data-slot="container-inner" class="grid items-center gap-6 py-2 text-header-foreground max-w-full! container-inner"><div class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-6 lg:gap-12"><a class="flex items-center gap-2 text-sm font-medium tracking-tighter" href="/"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v17a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1H3"></path><path d="M16 19h6"></path><path d="M19 22v-6"></path></svg>shadcnpreset</a><div class="col-start-2 row-start-1 flex min-w-0 justify-end lg:justify-between"><div class="flex-1 items-center justify-between gap-8 hidden min-w-0 md:flex lg:justify-between"><nav data-slot="navigation-menu" class="group/navigation-menu relative flex max-w-max flex-1 items-center justify-center"><ul data-slot="navigation-menu-list" class="group flex-1 list-none gap-0 flex flex-wrap items-center justify-center gap-x-2 gap-y-1"><li data-slot="navigation-menu-item" class="relative"><a class="group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted text-header-foreground
1/80 hover:text-header-foreground flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4" data-slot="navigation-menu-link" href="/assistant">Ask AI</a></li><li data-slot="navigation-menu-item" class="relative"><a class="group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted text-header-foreground/80 hover:text-header-foreground flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4" data-active="" aria-current="page" data-slot="navigation-menu-link" href="/build">Build</a></li><li data-slot="navigation-menu-item" class="relative"><button type="button" aria-disabled="false" data-base-ui-click-trigger="" id="base-ui-_R_dmqpav5vlb_" aria-haspopup="dialog" aria-expanded="false" data-slot="popover-trigger" class="group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted group max-w-full text-header-foreground
1/90 data-popup-open:bg-accent/30">Presets<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="relative top-px ml-1 size-4 shrink-0 transition duration-300 group-data-popup-open:rotate-180" aria-hidden="true"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></button></li><li data-slot="navigation-menu-item" class="relative"><button type="button" aria-disabled="false" data-base-ui-click-trigger="" id="base-ui-_R_doqpav5vlb_" aria-haspopup="dialog" aria-expanded="false" data-slot="popover-trigger" class="group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted group max-w-full text-header-foreground
1/90 data-popup-open:bg-accent/30">Tools<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="relative top-px ml-1 size-4 shrink-0 transition duration-300 group-data-popup-open:rotate-180" aria-hidden="true"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></button></li><li data-slot="navigation-menu-item" class="relative"><a class="group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted text-header-foreground/80 hover:text-header-foreground flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4" data-slot="navigation-menu-link" href="/learn">Learn</a></li></ul></nav><div class="flex min-w-0 flex-wrap items-center gap-6 xl:gap-12"><div class="grid items-center gap-1 md:flex"><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 group/toggle extend-touch-target size-8"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4.5"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 18"></path><path d="M12 9l4.65 -4.65"></path><path d="M12 14.3l7.37 -7.37"></path><path d="M12 19.6l8.85 -8.85"></path></svg><span class="sr-only">Toggle theme</span></button><a class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5 h-8 shadow-none" target="_blank" rel="noreferrer" href="https://github.com/morganfeeney/shadcnpreset"><svg viewBox="0 0 438.549 438.549"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 
16.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg></a><div data-orientation="vertical" role="separator" aria-orientation="vertical" data-slot="separator" class="shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch mx-1 mt-1 mr-3 hidden h-6 sm:inline-flex"></div><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-primary text-primary-foreground [a]:hover:bg-primary/80 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-8">Sign in</button></div></div></div><div class="md:hidden"><button type="button" tabindex="0" data-slot="sheet-trigger" data-base-ui-click-trigger="" id="base-ui-_R_r9av5vlb_" aria-haspopup="dialog" aria-expanded="false" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 size-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="size-5" aria-hidden="true"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button></div></div></div></div></header></div><div data-slot="sidebar-wrapper" style="--sidebar-width:24rem;--sidebar-width-icon:3rem" class="group/sidebar-wrapper flex w-full has-data-[variant=inset]:bg-sidebar h-full min-h-0 flex-col overflow-hidden md:flex-row"><div data-slot="sidebar" class="flex h-full flex-col bg-sidebar text-sidebar-foreground max-h-[45dvh] w-full shrink-0 border-b border-border/70 md:h-full md:max-h-none md:w-(--sidebar-width) md:border-r md:border-b-0"><h1 class="sr-only">Build a page</h1><div data-slot="sidebar-header" data-sidebar="header" class="flex p-2 flex-row gap-1.5 px-3 pt-3 pb-0"><div class="min-w-0 flex-1"><div class="flex min-w-0 gap-1.5"><button type="button" tabindex="0" id="base-ui-_R_2kmav5vlb_" role="combobox" aria-expanded="false" aria-haspopup="listbox" data-slot="select-trigger" data-size="default" aria-label="Preset" class="flex items-center justify-between gap-1.5 rounded-lg border border-input py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 w-auto min-w-0 flex-1 bg-background"><span aria-hidden="true" class="size-2.5 shrink-0 rounded-full bg-(--swatch-light) ring-1 ring-border dark:bg-(--swatch-dark)" style="--swatch-light:oklch(0.205 0 0);--swatch-dark:oklch(0.922 0 0)"></span><span data-slot="select-value" class="flex flex-1 text-left truncate">b0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down pointer-events-none size-4 text-muted-foreground" aria-hidden="true"><path d="m6 9 6 6 6-6"></path>▼</svg></button><input id="base-ui-_R_2kmav5vlb_-hidden-input" style="clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:fixed;top:0;left:0" tabindex="-1" aria-hidden="true" value="b0"/><button type="button" tabindex="0" data-slot="button" aria-label="Shuffle preset" title="Shuffle preset" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 size-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button><button type="button" tabindex="0" data-slot="button" aria-label="Save preset" aria-pressed="false" title="Save preset" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 size-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"></path></svg></button></div></div><button type="button" data-disabled="" tabindex="0" disabled="" data-slot="button" aria-label="Copy link to this page" title="Copy link to this page" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-
1px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 size-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"></path></svg></button><button type="button" data-disabled="" tabindex="0" disabled="" data-slot="button" aria-label="Clear page" title="Clear page" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 size-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z"></path></svg></button></div><div data-slot="sidebar-content" data-sidebar="content" class="no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden overscroll-contain px-3 pt-2"><div class="grid grid-cols-[minmax(0,1fr)] gap-3 pb-3"><div class="sticky top-0 z-10 -mx-3 grid gap-2 bg-sidebar px-3 pb-1"><div data-slot="input-group" role="group" class="group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[&gt;[data-align=block-end]]:h-auto has-[&gt;[data-align=block-end]]:flex-col has-[&gt;[data-align=block-start]]:h-auto has-[&gt;[data-align=block-start]]:flex-col has-[&gt;textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[&gt;[data-align=block-end]]:[&amp;&gt;input]:pt-3 has-[&gt;[data-align=block-start]]:[&amp;&gt;input]:pb-3 has-[&gt;[data-align=inline-end]]:[&amp;&gt;input]:pr-1.5 has-[&gt;[data-align=inline-start]]:[&amp;&gt;input]:pl-1.5 bg-background"><div role="group" data-slot="input-group-addon" data-align="inline-start" class="flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&amp;&gt;kbd]:rounded-[calc(var(--radius)-5px)] [&amp;&gt;svg:not([class*=&#x27;
1size-&#x27;])]:size-4 order-first pl-2 has-[&gt;button]:ml-[-0.3rem] has-[&gt;kbd]:ml-[-0.15rem]"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg></div><input id="base-ui-_R_immav5vlb_" data-slot="input-group-control" aria-label="Search blocks" placeholder="Search 157 blocks…" class="h-8 w-full min-w-0 border-input px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent" value=""/></div><ul aria-label="Kinds of block" class="flex flex-wrap gap-1.5"><li><button type="button" tabindex="0" data-slot="button" aria-pressed="true" class="group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground h-7 ga
1p-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">All</button></li><li><button type="button" tabindex="0" data-slot="button" aria-pressed="false" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Marketing</button></li><li><button type="button" tabindex="0" data-slot="button" aria-pressed="false" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Store</button></li><li><button type="button" tabindex="0" data-slot="button" aria-pressed="false" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Dashboard</button></li><li><button type="button" tabindex="0" data-slot="button" aria-pressed="false" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-3.5">Layout</button></li></ul><p class="text-xs text-muted-foreground tabular-nums" aria-live="polite">157<!-- --> <!-- -->blocks</p></div><ul class="grid grid-cols-[minmax(0,1fr)] gap-3"><li><button type="button" aria-label="Add to page: Hero · Centered headline with media hero" title="A classic centered hero with a strong headline, short supporting copy, and a primary call to action. Anchored by a large visual or video to set tone and establish brand presence. Works well as a primary landing hero when you want clarity first and visual impact second." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Centered headline with media hero</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Full-bleed background with centered content" title="A bold, immersive hero that places the headline and call to action directly on a full-bleed visual background. Designed to create mood and instant impact, with social proof reinforcing credibility. Best used when you want an emotional first impression and strong brand presence right at the top." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Full-bleed background with centered content</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Light background with centered content" title="A calm, airy hero that centers the headline and call to action over a soft, low-contrast background. Designed to feel open and approachable, with social proof placed directly beneath the primary action. Works well for product-led sites that want clarity and reassurance without heavy visual weight." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Light background with centered content</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Soft gradient hero with dual CTAs and rating" title="A centered hero set on a subtle gradient background, using stacked CTAs to support different c
1ommitment levels. Includes lightweight credibility with an inline rating, making it well suited to waitlists, previews, or early-access launches where trust and softness matter more than urgency." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Soft gradient hero with dual CTAs and rating</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Split layout with waitlist capture" title="A balanced split hero that pairs left-aligned messaging with a strong visual on the right. Uses an inline email field and single primary CTA to support early-access or waitlist flows. Works well when the image carries mood or concept, while the layout keeps conversion front and center without feeling heavy." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Split layout with waitlist capture</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Feature-led split hero" title="A practical split hero that pairs a strong visual with a short benefits list. Designed to quickly explain value through scannable points, with a clear primary CTA. Works well for product-led pages where clarity and speed to understanding matter more than mood alone." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Feature-led split hero</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Editorial story hero" title="A narrative-led hero that explains the problem before selling the solution. Uses longer-form copy, author attribution, and a strong visual to build trust and context. Best suited to thought leadership, launch posts, or product pages where education and credibility come before conversion." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Editorial story hero</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Minimal page header" title="A str
1ipped-back hero for secondary pages. Focuses on a clear page title, short supporting copy, and a simple primary action. Best for pricing, docs, feature detail pages, or anywhere the goal is clarity over impact." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Minimal page header</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-8.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-8.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Page header with supporting visual" title="A balanced hero that pairs a clear page title and primary actions with a strong supporting image. Works well when you want more visual context than a minimal header, without going full marketing hero. Ideal for feature overviews, product detail pages, or campaign landing pages where clarity still comes first." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Page header with supporting visual</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-9.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-9.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Hero · Full-bleed image hero" title="A bold, image-led hero with text overlaid on photography. Best when you want an emotional hook first and the message second. Works well for marketing pages, brand stories, and team or culture-led sections where the image does most of the work." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Hero</span><span class="truncate text-sm font-medium">Full-bleed image hero</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-10.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-10.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Logo cloud · Inline logo strip" title="A minimal social proof pattern that presents partner or customer logos in a single horizontal row. It builds trust without interrupting flow, using uniform sizing and muted styling so the section supports the page rather than competing with primary content." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Logo cloud</span><span class="truncate text-sm font-medium">Inline logo strip</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/social-proof-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/social-proof-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Logo cloud · Auto-scrolling logo marquee" title="A horizontally scrolling logo strip that loops automatically. It adds motion and density without taking more vertical space. Good when you have lots of logos or want the section to feel more alive. Keep the speed slow and subtle so it reads as credibility, not decoration." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Logo cloud</span><span class="truncate text-sm font-medium">Auto-scrolling logo marquee</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/social-proof-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/social-proof-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Logo cloud · Color logo strip" title="A static row of full-color logos. Feels louder and more brand-forward than grayscale. Works best when the logos are well-known and visually consistent. Less subtle, but stronger at first glance." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Logo cloud</span><span class="truncate text-sm font-medium">Color logo strip</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/social-proof-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/social-proof-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Logo cloud · Inline trust statement" title="A compact logo row paired with a short trust line. Very low visual weight and easy to drop between sections. Good when you want credibility without pulling attention away from the main content." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Logo cloud</span><span class="truncate text-sm font-medium">Inline trust statement</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/social-proof-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/social-proof-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Logo cloud · Visual-led trust section" title="A logo strip paired with a strong visual. Adds credibility while creating a clear visual break between sections. Best used when you want trust signals without relying on testimonials or copy-heavy proof." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Logo cloud</span><span class="truncate text-sm font-medium">Visual-led trust section</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/social-proof-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/social-proof-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V1
136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Logo cloud · Structured grid, editorial feel" title="Centered headline with a strict, even grid below. Strong symmetry, lots of white space, and clear hierarchy. Feels calm, credible, and deliberate. Works well when you want restraint and clarity over motion or visual noise." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Logo cloud</span><span class="truncate text-sm font-medium">Structured grid, editorial feel</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/social-proof-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/social-proof-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Alternating rows with text and image" title="A benefits section with a headline and intro, followed by multiple feature rows that alternate text and visual previews. Each row includes an icon, feature title, short description, bullet points, and a supporting UI image. Use to explain a product&#x27;s core value areas in a structured, scannable way on landing pages." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Alternating rows with text and image</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Alternating rows with actions and image" title="A benefits section with a headline and intro, followed by multiple feature cards arranged in a staggered grid. Each card includes an icon, feature title, short description, supporting UI image, and primary actions. Use to present key product capabilities when you want each feature to stand alone and drive clicks to demos or deeper pages." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Alternating rows with actions and image</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Stacked sections with full-bleed media" title="A benefits section with a headline and intro, followed by stacked feature sections that alternate text and large visual panels. Each feature includes a title, short description, bullet points, and a strong illustrative image. Use when you want to tell a more visual, narrative story around key product benef
1its rather than drive quick scanning or clicks." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Stacked sections with full-bleed media</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Compact icon list" title="A simple benefits block that displays a small set of features as icon-led items with short titles and descriptions. Use when you need to quickly communicate core value points without images, interactions, or deep explanation, such as secondary sections or lower on a page." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Compact icon list</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Icon grid" title="A benefits block with a headline and short intro, followed by a grid of icon-led features arranged in two rows. Each item includes an icon, feature name, and short description. Use to present a broad set of product benef
1its at a glance without visuals or calls to action." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Icon grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Image-led cards" title="A benefits block with a headline and short intro, followed by large visual feature cards. Each card pairs a strong image with a feature title and short description. Use when visuals are doing most of the work and you want to communicate product value through imagery rather than text-heavy explanations." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Image-led cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Split highlights with supporting list" title="A benefits block with a headline and intro, followed by two primary feature highlights with large images. Secondary benefits are listed below as a compact icon-and-text row. Use when you want to spotlight a small number of hero features while still covering supporting capabilities in the same section." 
1class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Split highlights with supporting list</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Hero media with supporting list" title="A benefits block with a headline and intro, followed by a single large hero image. Supporting benefits are listed below as icon-led items with short descriptions. Use when you want a strong visual anchor with concise, secondary benefit details for quick scanning." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Hero media with supporting list</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-8.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-8.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Two-column text layout" title="A benefits block with a strong headline and supporting text split across two columns. Use to clearly explain a single core value or positioning statement when you need more depth than a short tagline but no visuals or feature lists." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Two-column text layout</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-9.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-9.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Full-width media with overlay text" title="A benefits block built around a large, full-width image with short text overlaid directly on the visual. Use to make a single, emotionally driven point where the image carries most of the meaning and the copy reinforces one clear benef
1it." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Full-width media with overlay text</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-10.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-10.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Emphasized lead with supporting column" title="A benefits block with a strong headline on the left and a longer supporting explanation on the right, with a clear visual hierarchy between primary and secondary text. Use to reinforce a core positioning message when you want one idea to land clearly without images or feature lists." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Emphasized lead with supporting column</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-11.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-11.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Two-column icon list" title="A two-column layout that displays a list of items, each paired with an icon, title, and short description. Items flow vertically within each column and adapt to a single column on smaller screens. Use when you need a dense but scannable list with clear visual anchors." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Two-column icon list</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-12.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-12.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Benefits · Card grid with section header" title="A layout with a section header followed by a grid of equal-height cards. Each card includes an icon, title, and short text, arranged in a consistent grid that collapses responsively. Use when you need a structured, repeatable set of items with strong visual separation." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Benefits</span><span class="truncate text-sm font-medium">Card grid with section header</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/benefits-13.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/benefits-13.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Wide stats row with geographic backdrop" title="A horizontally distributed metrics layout that pairs large headline numbers with short labels, anchored by a subtle world map background. The pattern emp
1hasizes scale and credibility without heavy visuals. On mobile, the metrics collapse into a vertical list, keeping each stat easy to scan while preserving hierarchy." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Wide stats row with geographic backdrop</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Centered headline with inline stat columns" title="A metrics layout built around a strong centered heading, followed by evenly spaced stat columns with short supporting labels and optional inline links. The pattern emphasizes balance and readability, using clear vertical dividers to separate each metric. On mobile, the stats stack into a single-column list while keeping the headline and hierarchy intact." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Centered headline with inline stat columns</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Split content with media anchor" title="A two-column metrics layout that pairs a text-led stats group with a strong visual anchor. The pattern uses a left-aligned heading and compact metric blocks, balanced by a fixed-aspect image on the opposite side to create visual weight. On mobile, the image drops below the metrics and the stats stack vertically, preserving hierarchy and scanability." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Split content with media anchor</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Centered headline with inline stat row" title="A symmetric metrics layout built around a centered headline and a single horizontal row of key stats. Each metric is evenly spaced to create a calm, balanced rhythm and equal visual weight. The pattern emp
1hasizes comparability and quick scanning. On mobile, the metrics stack vertically into a single column while keeping the headline centered to maintain hierarchy and focus." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Centered headline with inline stat row</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Carded metrics row" title="A metrics layout where each stat is wrapped in a lightweight card. The cards create clear boundaries, making each metric feel discrete and scannable while still reading as a group. The pattern works well when metrics need visual emphasis without heavy decoration. On mobile, cards stack vertically with consistent spacing, preserving rhythm and hierarchy." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Carded metrics row</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Inline metrics with dividers" title="A single-row metrics layout that uses subtle vertical dividers instead of cards. This keeps the section feeling light and flat while still giving each metric clear separation. Works well when metrics are supporting evidence rather than the main focal point. On smaller screens, the metrics stack into a clean vertical list with the same divider rhythm preserved." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Inline metrics with dividers</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Stats · Inline stats row with optional links" title="A centered section header paired with a single horizontal row of key stats. Uses generous whitespace and consistent column widths to make the numbers feel calm and easy to scan. On smaller screens, the row collapses into a clean vertical stack without changing the overall rhythm." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Stats</span><span class="truncate text-sm font-medium">Inline stats row with optional links</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metrics-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metrics-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Team · Centered team roster grid" title="A centered section with a clear headline and supporting line, followed by an evenly spaced grid of profile tiles. The layout keeps attention on the faces, uses consistent alignment and spacing for quick scanning, and collapses cleanly into fewer columns on smaller screens 
1without changing the overall structure." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Team</span><span class="truncate text-sm font-medium">Centered team roster grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/team-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/team-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Team · Split intro with profile grid" title="A two-column layout where a compact intro block anchors the section on the left while a dense, evenly spaced avatar grid fills the remaining width. The structure balances narrative and faces, maintains a strong visual rhythm, and adapts cleanly to a stacked list on smaller screens without changing the hierarchy." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Team</span><span class="truncate text-sm font-medium">Split intro with profile grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/team-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/team-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Team · Mixed-shape avatar mosaic" title="Team 3 – Mixed-shape avatar mosaic" class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Team</span><span class="truncate text-sm font-medium">Mixed-shape avatar mosaic</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/team-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/team-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Team · Lifestyle imagery with structured roster" title="A split layout that pairs large, candid team photos with a clean, tabular roster below. The imagery adds warmth and context, while the list anchors the section with clear hierarchy and scannability, balancing human presence with structured information." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Team</span><span class="truncate text-sm font-medium">Lifestyle imagery with structured roster</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/team-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/team-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Team · Editorial portrait cards" title="A gallery-style layout built around large, consistent portrait cards with subtle overlays. Emphasizes visual uniformity and hierarchy, using generous spacing and minimal UI chrome to let imagery carry the section while still supporting clear identity and interaction." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Team</span><span class="truncate text-sm font-medium">Editorial portrait cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/team-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/team-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Categories · Category navigation grid with immersive hero imagery" title="A visually driven category section featuring a three-column grid. Each card uses large, high-impact photography as a background, with the category title and a brief descriptive subtext positioned in the bottom-left corner. This layout is designed to inspire users through lifestyle imagery" class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Categories</span><span class="truncate text-sm font-medium">Category navigation grid with immersive hero imagery</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-category-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-category-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Categories · Category grid with external labels" title="A minimalist category navigation section featuring a balanced three-column grid. Unlike overlay styles, this layout places category titles and descriptive subtext directly below each image, ensuring maximum legibility. Using high-quality lifestyle and product photography, it provides a professional and airy entry point to specific store sections." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Categories</span><span class="truncate text-sm font-medium">Category grid with external labels</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-category-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-category-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Categories · Asymmetric category grid with mixed card orientations" title="A visually engaging category section featuring an asymmetric three-column layout. The left column showcases a large, vertical hero image for while the right side is split into two stacked horizontal cards. This varied grid structure creates a modern, editorial feel that emphasizes priority collections through size while maintaining a clean and organized aesthetic with bottom-aligned text overlays." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Categories</span><span class="truncate text-sm font-medium">Asymmetric category grid with mixed card orientations</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-category-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-category-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-
1foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Categories · Inverted asymmetric grid with top-aligned hero card" title="A dynamic category section featuring an asymmetric three-card grid. The layout highlights &quot;New Arrivals&quot; with a large, full-width horizontal hero card at the top, while &quot;Accessories&quot; and &quot;Last Pieces&quot; are displayed in two smaller, side-by-side cards below. All categories utilize immersive photography with bottom-left text overlays, creating a modern and editorial navigation experience." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Categories</span><span class="truncate text-sm font-medium">Inverted asymmetric grid with top-aligned hero card</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-category-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-category-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Categories · vertical category grid with labels" title="A clean and balanced category section featuring a four-column grid of tall, vertical cards. Each card uses high-impact photography with a subtle dark gradient at the bottom to enhance the legibility of the centered white labels. This layout is ideal for stores with multiple key departments, providing a uniform and highly structured entry point to the entire collection." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Categories</span><span class="truncate text-sm font-medium">vertical category grid with labels</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-category-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-category-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product grid · Product grid with header &amp; action cards" title="A clean e-commerce section featuring a left-aligned collection header and a four-column product grid. Each card includes a badge, high-quality product imagery, star ratings, pricing, and a brief description. The layout is finalized with a primary button for each product, designed to streamline the shopping experience through a clear and repetitive visual structure." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product grid</span><span class="truncate text-sm font-medium">Product grid with header &amp; action cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-list-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-list-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product grid · Centered header with product grid" title="A balanced e-commerce section featuring a centered headline. The products are displayed in a clean four-column grid, where each card follows a vertical stack: high-quality product image, centered title, brief description, price, and a primary button. This minimalist approach removes distractions like ratings or badges, focusing entirely on product aesthetics and direct action." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product grid</span><span class="truncate text-sm font-medium">Centered header with product grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-list-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-list-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product grid · Product card grid with color swatches" title="A modern e-commerce grid featuring products housed in individual white cards with subtle borders. In addition to the badge, star ratings, and button, each card includes interactive color swatches for product customization. This layout is optimized for high-engagement retail, providing users with more options and a clear visual containment for each item." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product grid</span><span class="truncate text-sm font-medium">Product card grid with color swatches</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-list-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-list-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product grid · Product grid with centered labels and color swatches" title="A streamlined e-commerce layout featuring a centered collection header and a four-column grid of bordered product cards. Each card prioritizes clear information hierarchy: category badge, star rating, product title, and description, followed by prominent price labels and interactive color swatches. This design is optimized for brands that want to provide a detailed yet airy shopping experience." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product grid</span><span class="truncate text-sm font-medium">Product grid with centered labels and color swatches</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-list-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-list-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product grid · Product grid with horizontal carousel" title="A clean e-commerce section featuring a left-aligned collection header and a four-column product layout. Each item includes a badge, star rating, pricing, and a primary button. The distinctive feature is the inclusion of directional arrow buttons at the bottom-left, allowing users to scroll through a larger inventory within a single, space-efficient horizontal row." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product grid</span><span class="truncate text-sm font-medium">Product grid with horizontal carousel</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-list-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-list-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product details · Product overview with configuration" title="A clean and professional product detail section
1 featuring a large primary image on the left and functional configuration tools on the right. The information hierarchy includes the product title, star ratings, price, and a brief description. Below, users can interact with size selection tiles, color swatches, and a quantity selector before adding the item to the cart. This layout is designed for maximum clarity, guiding the user through the customization process toward a final purchase." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product details</span><span class="truncate text-sm font-medium">Product overview with configuration</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-details-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-details-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product details · Product page with breadcrumbs and accordion" title="A comprehensive product layout featuring a top breadcrumb navigation for easy store browsing. The left side showcases a large product image, while the right side organizes purchase details: rating, price, size tiles, and color swatches. Below the primary button, a vertical accordion provides detailed information keeping the page clean while offering deep product insights." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product details</span><span class="truncate text-sm font-medium">Product page with breadcrumbs and accordion</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-details-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-details-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product details · Detailed product view with specifications and gallery" title="A content-rich product detail section that prioritizes technical information. The layout features a primary text area on the left detailing fabric composition and design features, balanced by a configuration sidebar on the right for size and color selection. Below, a four-column gallery showcases the product in every available color variant, providing a visual overview that aids the customer&#x27;s final decision." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product details</span><span class="truncate text-sm font-medium">Detailed product view with specifications and gallery</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-details-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-details-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product details · Product detail page with vertical thumbnail gallery" title="A streamlined product section featuring a multi-image navigation system. The layout includes a vertical column of clickable thumbnails on the left, which updates the large primary image in the center. The right side is dedicated to product information, including a detailed list, price, size selection tiles, and color swatches. This design is ideal for products that require viewing from multiple angles or in different c
1olors." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product details</span><span class="truncate text-sm font-medium">Product detail page with vertical thumbnail gallery</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-details-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-details-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product details · Product page with bottom gallery and navigation arrows" title="A product detail layout featuring an interactive image gallery. The main product image is supported by a row of four thumbnails at the bottom for multi-angle viewing, along with directional arrows and a zoom icon for deep-dive inspection. The right-hand column maintains a clean hierarchy with product details, pricing, size selection tiles, and color swatches, providing an informative shopping interface." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product details</span><span class="truncate text-sm font-medium">Product page with bottom gallery and navigation arrows</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-details-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-details-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Product details · Product page with centered hero and multi-column FAQ grid" title="A comprehensive product layout featuring a centered hero image flanked by essential purchase controls like price, size selection tiles, and a button. The lower section of the page is dedicated to a high-density information area. This design uses expandable accordions for topics like shipping, returns, and terms, providing a one-stop-shop experience for all customer inquiries." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Product details</span><span class="truncate text-sm font-medium">Product page with centered hero and multi-column FAQ grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/product-details-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/product-details-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Cart · Overlay with itemized list and checkout" title="A functional slide-out cart interface that appears as an overlay on the right side of the screen. It features a clear itemized list of added products, including thumbnail images, titles, brief descriptions, quantities, and prices. The layout is completed by a subtotal calculation at the bottom and a prominent button, providing a seamless transition from browsing to final purchase without leaving the current page." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">
1Cart</span><span class="truncate text-sm font-medium">Overlay with itemized list and checkout</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/shopping-cart-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/shopping-cart-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Cart · shopping cart page with order summary and promo section" title="A comprehensive checkout page featuring a two-column layout. The larger left column displays a detailed list of cart items with quantity adjusters and removal options. The right column serves a sidebar containing a promo code input field and a breakdown of subtotal, shipping, and taxes. This design provides an overview of the order total, ensuring a frictionless transition to the final checkout stage." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Cart</span><span class="truncate text-sm font-medium">shopping cart page with order summary and promo section</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/shopping-cart-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/shopping-cart-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Cart · Centered shopping cart page with inline summary" title="A streamlined and focused shopping cart layout where all elements are stacked in a single centered column. The page displays the list of items with full management controls (quantity and removal), followed directly by the promotional code input and the financial breakdown (subtotal, shipping, and taxes). This design minimizes eye travel and provides a clear, linear path toward the final checkout action." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">
1Cart</span><span class="truncate text-sm font-medium">Centered shopping cart page with inline summary</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/shopping-cart-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/shopping-cart-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Cart · Triple-card cart layout with discount and summary" title="A highly organized shopping cart page that utilizes three distinct white cards on a light gray background to separate functional areas. The main card on the left manages the product list and inventory controls. On the right, two smaller stacked cards isolate the Discount and Summary sections. This modular structure provides visual hierarchy and makes the information of the final checkout stage easy to digest." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Cart</span><span class="truncate text-sm font-medium">Triple-card cart layout with discount and summary</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/shopping-cart-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/shopping-cart-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Checkout · Checkout page with shipping, payment and order summary" title="A comprehensive and professional checkout interface featuring a dual-column layout. The left column is dedicated to user data entry, the right column acts as a fixed &quot;Summary&quot; sidebar, providing a final review of cart items, detailed cost breakdowns (subtotal, shipping, taxes), and the primary action button." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Checkout</span><span class="truncate text-sm font-medium">Checkout page with shipping, payment and order summary</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/checkout-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/checkout-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Checkout · Modular checkout with summary and overview sidebars" title="Checkout interface that uses a multi-card layout to prioritize order transparency. It features a &quot;Summary&quot; of items and an &quot;Overview&quot; of costs (including a promo code field) on the left side, while the more extensive &quot;Shipping Information&quot; and &quot;Payment&quot; forms are grouped in a primary card on the right. This arrangement allows users to keep their order details constantly in sight while navigating through the data entry process." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Checkout</span><span class="truncate text-sm font-medium">Modular checkout with summary and overview sidebars</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/checkout-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/checkout-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Checkout · Checkout with left-aligned order overview and payment stack" title="A checkout layout that separates order details from data entry through a clean, vertical split. The left column is dedicated to a high-visibility &quot;Summary&quot; of cart items and a secondary &quot;Overview&quot; card for financial totals and promo codes. The right side contains the primary &quot;Shipping Information&quot; and &quot;Payment&quot; sections, using a vertically stacked form design that maintains a clear, linear path for the user to complete their purchase." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Checkout</span><span class="truncate text-sm font-medium">Checkout with left-aligned order overview and payment stack</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/checkout-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/checkout-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: KPI cards · Metric cards" title="Four key metrics in a single str
1ip: spend, revenue, cost per lead, and conversion rate." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">KPI cards</span><span class="truncate text-sm font-medium">Metric cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/metric-cards-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/metric-cards-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Trend chart · Hero time series" title="Hero area chart comparing this period against the previous period." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Trend chart</span><span class="truncate text-sm font-medium">Hero time series</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/hero-time-series-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/hero-time-series-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Revenue vs target · Revenue vs target" title="Closed revenue against target and forecast as a tick meter." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Revenue vs target</span><span class="truncate text-sm font-medium">Revenue vs target</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/revenue-vs-target-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/revenue-vs-target-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Goals · Goal progress" title="Month-to-date attainment against monthly targets as bullet bars." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Goals</span><span class="truncate text-sm font-medium">Goal progress</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/goal-progress-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/goal-progress-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Traffic by channel · Traffic by channel" title="Total traffic with a segmented share bar and per-channel breakdown." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Traffic by channel</span><span class="truncate text-sm font-medium">Traffic by channel</span></span><span class="block overflow-hidden rounded-md border bg-muted">
1<img src="/page-builder/thumbnails/light/traffic-by-channel-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/traffic-by-channel-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Channel performance · Channel performance" title="Clicks received vs leads converted, by channel, as grouped bars." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Channel performance</span><span class="truncate text-sm font-medium">Channel performance</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/channel-performance-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/channel-performance-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Campaigns · Campaign performance" title="Top campaigns by leads generated, as a compact data table." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Campaigns</span><span class="truncate text-sm font-medium">Campaign performance</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/campaign-performance-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/campaign-performance-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Paid media · Paid media allocation" title="Donut breakdown of spend across paid channels." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Paid media</span><span class="truncate text-sm font-medium">Paid media allocation</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/paid-media-allocation-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/paid-media-allocation-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Cost per acquisition · Cost per acquisition trend" title="Daily cost per acquisition as an area trend with period comparison." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Cost per acquisition</span><span class="truncate text-sm font-medium">Cost per acquisition trend</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cost-per-acquisition-trend-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cost-per-acquisition-trend-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Attribution · Attribution breakdown" title="Revenue credited by first touch vs last touch, per channel." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Attribution</span><span class="truncate text-sm font-medium">Attribution breakdown</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/attribution-breakdown-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/attribution-breakdown-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Marketing funnel · Marketing funnel" title="Stage-by-stage conversion across the marketing funnel." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Marketing funnel</span><span class="truncate text-sm font-medium">Marketing funnel</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/marketing-funnel-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/marketing-funnel-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Lead to customer · Lead-to-customer funnel" title="Marketing-to-sales handoff as concentric ring progress." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Lead to customer</span><span class="truncate text-sm font-medium">Lead-to-customer funnel</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/lead-to-customer-funnel-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/lead-to-customer-funnel-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Leads by region · Leads by region" title="Leads and pipeline value by country, with list and map views." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Leads by region</span><span class="truncate text-sm font-medium">Leads by region</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/leads-by-region-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/leads-by-region-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Top landing pages · Top landing pages" title="Pages ranked by sessions with visitor share." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors out
1line-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Top landing pages</span><span class="truncate text-sm font-medium">Top landing pages</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/top-landing-pages-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/top-landing-pages-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Engagement heatmap · Engagement by day &amp; hour" title="Open-rate heatmap by send day and hour." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Engagement heatmap</span><span class="truncate text-sm font-medium">Engagement by day &amp; hour</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/engagement-by-day-hour-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/engagement-by-day-hour-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Sales pipeline · Pipeline by stage" title="Open pipeline value and share across deal stages as a funnel." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Sales pipeline</span><span class="truncate text-sm font-medium">Pipeline by stage</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pipeline-by-stage-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pipeline-by-stage-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Win rate · Win rate" title="Win rate with stage-to-stage conversion bars." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Win rate</span><span class="truncate text-sm font-medium">Win rate</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/win-rate-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/win-rate-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Deal velocity · Deal velocity" title="Average days in stage by segment as a heatmap." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Deal velocity</span><span class="truncate text-sm font-medium">Deal velocity</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/deal-velocity-by-segment-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/deal-velocity-by-segment-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Rep leaderboard · Rep leaderboard" title="Reps ranked by quota attainment with target markers." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Rep leaderboard</span><span class="truncate text-sm font-medium">Rep leaderboard</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/rep-leaderboard-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/rep-leaderboard-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li>
1<button type="button" aria-label="Add to page: Deals table · Deals table" title="Open deals with owner, stage, value, and close date." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Deals table</span><span class="truncate text-sm font-medium">Deals table</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/deals-table-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/deals-table-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Customer health · Customer health score" title="Average customer health as an arc gauge with score bands." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Customer health</span><span class="truncate text-sm font-medium">Customer health score</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/customer-health-score-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/customer-health-score-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Activity feed · Filterable timeline with inline context" title="A chronological activity feed presented as a vertical timeline, combining user avatars, action summaries, and timestamps for quick scanning. Includes a top search field and segmented filters to 
1switch between activity types. The layout adapts cleanly to smaller screens by tightening spacing and stacking controls while preserving the same linear reading order." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Activity feed</span><span class="truncate text-sm font-medium">Filterable timeline with inline context</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/activity-feed-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/activity-feed-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: AI insights · AI insights" title="Alerts and opportunities surfaced automatically across the funnel." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">AI insights</span><span class="truncate text-sm font-medium">AI insights</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/ai-insights-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/ai-insights-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Single feature quote" title="A centered, long-form testimonial designed to feel calm and authoritative. Uses generous whitespace, oversized quotation marks, and a single focal block to give the quote weight. Best suited for primary social proof moments where you want one voice to carry the section without visual noise." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Single feature quote</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Centered quote with attribution focus" title="A minimal, centered testimonial layout that tightens the hierarchy around the quote and author. Compared to Testimonial 1, this version reduces visual weight and brings the attribution closer to the content, making it feel more compact and versatile. Works well when you want strong social proof without the section dominating the page." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Centered quote with attribution focus</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Split quote with featured profile" title="Testimonial 3 – Split quote with featured profile" class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Split quote with featured profile</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Image-led split with rating" title="A bold split layout that gives equal weight to a large portrait and the testimonial copy. The oversized image anchors the section visually, while the quote, attribution, and star rating sit in a clean text column for clarity. Works best when you want testimonials to feel premium and emotive, not just informational." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Image-led split with rating</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Split carousel with overlapping profile cards" title="A split testimonial layout with the quote anchored in a static text column and a horizontal carousel of large profile cards running alongside it. The overlapping cards add depth and motion, while the fixed quote keeps the message readable and stable. Works well when you want strong visual presence without letting the imagery overpower the testimonial itself." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Split carousel with overlapping profile cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Multi-profile grid with headline lead" title="A testimonial layout that leads with a strong headline and brand marker, followed by a dense grid of profile cards. The structure shifts emphasis from a single quote to collective validation, using repetition and ratings to build credibility at scale. Best used when you want to show breadth of adoption rather than spotlight one individual voice." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Multi-profile grid with headline lead</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex i
1tems-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Branded quote with team strip" title="A testimonial layout that anchors on a long-form quote with clear brand attribution, then reinforces credibility using a horizontal strip of individual profiles. The composition balances authority and social density, making it effective when you want a strong narrative supported by visible team adoption rather than a single spokesperson." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Branded quote with team strip</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-8.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-8.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Multi-segment case cards" title="A testimonial layout built around small, self-contained story cards, each representing a different team or use case. The grid creates quick scanability while still allowing depth per card, making it well suited to showcasing breadth of adoption across industries rather than a single standout quote." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Multi-segment case cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-9.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-9.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Dense quote grid" title="A compact testimonial layout that surfaces many short quotes at once using a uniform card grid. Designed for volume and credibility, it emphasizes breadth of feedback over individual storytelling, making it effective for scanning, comparison, and reinforcing widespread adoption." 
1class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Dense quote grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-10.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-10.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Testimonials · Editorial quote grid" title="A structured testimonial layout that combines a clear section header with a multi-column grid of short quotes. It balances scannability and depth by presenting many voices at once, using consistent cards and subtle hierarchy to reinforce trust without relying on a single standout story." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Testimonials</span><span class="truncate text-sm font-medium">Editorial quote grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/testimonials-11.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/testimonials-11.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Three-tier card pricing grid" title="A classic three-column pricing layout with equal-weight plan cards for easy comparison. Each card follows the same vertical rhythm with plan name, price, primary action, and feature list, making differences scannable at a glance. The pattern scales cleanly to mobile as a horizontal carousel or stacked cards, keeping one plan in focus at a time." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Three-tier card pricing grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Focused two-plan comparison" title="A simplified pricing layout that presents two plans side by side to reduce choice overload. The shared header anchors context, while the paired cards make differences easy to scan without overwhelming the user. This pattern works well when offerings are intentionally limited or when you want to guide users toward a primary upgrade path, and it adapts cleanly to a 
1swipeable carousel on smaller screens." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Focused two-plan comparison</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Single plan spotlight" title="A centered, single-card pricing layout that puts all attention on one plan. Removing comparisons reduces decision friction and works well for early-stage products, default plans, or checkout-focused pages. The pattern scales cleanly by adding secondary plans later without changing the core structure." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Single plan spotlight</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Three-plan comparison with highlighted default" title="A classic three-tier pricing layout with a clearly emphasized middle plan to guide choice. The visual weight, border treatment, and &quot;most popular&quot; marker steer users toward a recommended option while still allowing easy comparison. Works well when you want flexibility without overwhelming the decision." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Three-plan comparison with highlighted default</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Side-by-side plans with duplicated emphasis" title="A two-plan layout where one option is visually emphasized through stronger borders and hierarchy, even when the plans are similar. This pattern is useful for steering users toward a preferred choice while still showing a clear alternative, without introducing extra complexity or tiers." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Side-by-side plans with duplicated emphasis</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Single-plan focused pricing" title="A minimal pricing pattern that centers on a 
1single plan, removing comparison to reduce decision friction. This works well when there is only one offering, or when you want to validate pricing without distracting users with alternatives." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Single-plan focused pricing</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Pricing · Feature-comparison table pricing" title="A dense pricing pattern that pairs plans with a side-by-side feature matrix. This works when buyers need to evaluate capability differences in detail and are willing to scan vertically to compare limits, access levels, and inclusions across tiers." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Pricing</span><span class="truncate text-sm font-medium">Feature-comparison table pricing</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/pricing-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/pricing-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Blog · Featured grid" title="A responsive blog listing that highlights recent posts in a clean card grid. Includes category, title, read time, author, and date, with a clear section header and optional &quot;See all&quot; action. Works well for homepages or content hubs where you want to surface a small set of featured articles." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Blog</span><span class="truncate text-sm font-medium">Featured grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/blog-listing-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/blog-listing-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Blog · Paginated card grid" title="A card-based blog layout with a clear section header and a progressive &quot;Load more&quot; pattern. Uses consistent post cards with image, category, title, meta, and author, designed to scale as content grows. Suitable for blog index pages or homepages that need a lightweight, expandable feed without full pagination." 
1class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Blog</span><span class="truncate text-sm font-medium">Paginated card grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/blog-listing-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/blog-listing-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Blog · Featured lead with supporting grid" title="A blog layout anchored by a large featured post followed by a compact card grid. Emphasizes editorial hierarchy by spotlighting a primary article, then surfacing recent or related posts underneath. Works well for blog homepages where one story should lead, with the rest supporting discovery and ongoing reading." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Blog</span><span class="truncate text-sm font-medium">Featured lead with supporting grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/blog-listing-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/blog-listing-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Blog · Dense editorial grid" title="A high-density card grid that surfaces many posts at once with equal visual weight. Uses consistent card sizing and rhythm to supp
1ort fast scanning and browsing. Best for archive pages or content hubs where breadth and discovery matter more than a single featured story." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Blog</span><span class="truncate text-sm font-medium">Dense editorial grid</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/blog-listing-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/blog-listing-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Careers · Job list with metadata" title="A simple vertical job list focused on clarity and scannability. Uses a single-column layout with clear role titles and lightweight metadata like location, work type, and salary. Designed to help users quickly compare openings and jump into a role without visual noise." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Careers</span><span class="truncate text-sm font-medium">Job list with metadata</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/careers-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/careers-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Careers · Job list with media lead" title="A split layout that pairs a job list with a large supporting image. Uses the image to set tone and culture, while keeping roles and metadata clean and easy to scan alongside it. Suitable for careers landing pages where brand and roles need equal weight." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Careers</span><span class="truncate text-sm font-medium">Job list with media lead</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/careers-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/careers-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Careers · Card grid job listings" title="A multi-column grid of role cards with consistent metadata and actions. Designed for scanning and comparison across roles, with equal visual weight and clear hierarchy. Works well for larger job sets where breadth matters more than storytelling." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Careers</span><span class="truncate text-sm font-medium">Card grid job listings</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/careers-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/careers-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Careers · Feature image with list" title="A careers layout anchored by a large lifestyle image, followed by a clean vertical job list. Uses imagery to set culture and tone first, then supports focu
1sed role scanning. Best when you want to sell the team and environment before the openings." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Careers</span><span class="truncate text-sm font-medium">Feature image with list</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/careers-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/careers-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Careers · Split intro with stacked listings" title="A careers layout with a left-aligned intro and a dense, stacked job list alongside it. Prioritizes fast scanning of roles over storytelling. Best for teams with multiple open positions where clarity and comparison matter more than brand imagery." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Careers</span><span class="truncate text-sm font-medium">Split intro with stacked listings</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/careers-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/careers-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: FAQs · Grid FAQs with CTA" title="Multi-column FAQ layout with short answers visible by default. Includes an optional CTA panel below. Scales down to a stacked list on mobile." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">FAQs</span><span class="truncate text-sm font-medium">Grid FAQs with CTA</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/faqs-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/faqs-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li>
1<button type="button" aria-label="Add to page: FAQs · Accordion list with centered CTA" title="Single-column, centered accordion for longer answers. Optimized for reading and scanning. Collapses into a stacked accordion on mobile." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">FAQs</span><span class="truncate text-sm font-medium">Accordion list with centered CTA</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/faqs-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/faqs-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: FAQs · Wide accordion with stacked mobile preview" title="A responsive FAQ section with a wide, centered accordion for desktop, plus a compact stacked version shown as a mobile preview. Built for clean scanning, with one expanded answer and the rest collapsed by default." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">FAQs</span><span class="truncate text-sm font-medium">Wide accordion with stacked mobile preview</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/faqs-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/faqs-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: FAQs · Centered accordion with supporting panel" title="A clean, centered FAQ accordion paired with a narrow sidebar version. Uses a strong section header and clear dividers for easy scanning, with an optional support link at the end. Works well for product or marketing pages where FAQs are a secondary section, not the main focus." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">FAQs</span><span class="truncate text-sm font-medium">Centered accordion with supporting panel</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/faqs-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/faqs-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Newsletter · Split layout with visual anchor" title="A newsletter signup pattern that pairs a simple email capture with a strong visual anchor. The form stays lightweight and prominent, while the adjacent product visual adds context and credibility. On smaller screens, the layout stacks to keep the signup action clear and friction-free." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Newsletter</span><span class="truncate text-sm font-medium">Split layout with visual anchor</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/newsletter-signup-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/newsletter-signup-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Newsletter · Value-led signup with supporting bullets" title="A newsletter signup pattern that leads with clear value before the email field. Short bullet points set expectations and reduce hesitation, while the form remains simple and easy to scan. The supporting visual reinfor
1ces product context without competing with the primary signup action, and the layout stacks cleanly on smaller screens." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Newsletter</span><span class="truncate text-sm font-medium">Value-led signup with supporting bullets</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/newsletter-signup-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/newsletter-signup-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Newsletter · Inline headline with minimal form" title="A compact newsletter signup pattern that places the email field inline with the headline. The layout minimizes friction and keeps attention focused on a single action, making it suitable for low-commitment sections or repeated placements. On smaller screens, the form stacks cleanly while preserving hierarchy and clarity." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Newsletter</span><span class="truncate text-sm font-medium">Inline headline with minimal form</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/newsletter-signup-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/newsletter-signup-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Newsletter · Centered call to action with supporting microcopy" title="A centered newsletter signup pattern that emphasizes balance and clarity. The headline and form are vertically stacked to create a clear focal point, with supporting microcopy reinforcing trust without competing for attention. The layout works well as a primary conversion section and scales cleanly to mobile by preserving alignment and spacing." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Newsletter</span><span class="truncate text-sm font-medium">Centered call to action with supporting microcopy</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/newsletter-signup-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/newsletter-signup-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Newsletter · Inline callout with contained form" title="A horizontal newsletter signup pattern presented inside a soft container to separate it from surrounding content. The headline and description anchor the left side while the inline form sits to the right, creating a clear scan path and compact footprint. Works well as an embedded callout within long pages and collapses cleanly to a 
1stacked layout on smaller screens." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Newsletter</span><span class="truncate text-sm font-medium">Inline callout with contained form</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/newsletter-signup-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/newsletter-signup-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Centered form, single-column" title="A centered contact form with a clear headline and stacked inputs. Uses a simple, linear flow that keeps focus on completion. Best for general inquiries where you want minimal distraction and a calm, neutral presentation." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Centered form, single-column</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Centered form in card" title="A centered contact form wrapped in a card with clear visual boundaries. The card adds emphasis and contrast while keeping the layout simple and focused. Good when the form should feel contained and slightly elevated from the page background." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Centered form in card</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Split form with image" title="A two-column layout pairing a contact form with a large supporting image. The image adds personality and visual balance while the form stays clear and readable. Works well when you want the contact section to feel more human and less transactional." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Split form with image</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Multi-channel contact options" title="A centered layout that surfaces multiple ways to get in touch without a form. Uses icon-led contact methods laid out horizontally, with clear labels and availability details. Best when you want to push people to the right channel fast rather than collect messages." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Multi-channel contact options</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Global presence with contact methods" title="A wide, visual-first layout that pairs a world map with key contact channels. Uses location markers to signal global reach, with email, phone, and live chat grouped below for quick access. Good for companies that want to show scale or multiple office
1s without pushing a form." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Global presence with contact methods</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Map-first contact" title="A contact layout built around a large location map, with clear contact methods shown below and in a compact side panel. Works well for businesses with a physical presence where location and availability matter as much as the form itself." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Map-first contact</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Image-led contact" title="A contact layout anchored by a large, friendly image, with key contact options displayed clearly below and in a side panel. Good for brands that want to feel personal and approachable without using a full form upfront." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Image-led contact</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Hero image with channel cards" title="A contact layout that pairs a large, edge-to-edge image with stacked contact channels. The image creates visual weight at the top, while card-based options below make it easy to scan and choose how to get in touch. Works well when you want a strong visual anchor without using a form." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Hero image with channel cards</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-8.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-8.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Centered CTA panel" title="A minimal contact block built around a single, centered call to action. Uses a contained panel with clear hierarchy and one primary button, making it ideal for low-friction contact moments at the end of a page or between sections." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Centered CTA panel</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-9.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-9.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Contact · Centered form with supporting sidebar" title="A balanced contact layout with a primary, centered form and a secondary sidebar that mirrors or reinfor
1ces the same interaction. The main column keeps focus on the form, while the sidebar provides a persistent fallback or alternative entry point. Useful when you want a calm, symmetrical layout with built-in redundancy for conversion." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Contact</span><span class="truncate text-sm font-medium">Centered form with supporting sidebar</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/contact-11.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/contact-11.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · Centered headline with stacked actions" title="A centered call to action with a strong headline, short supporting copy, and side-by-side buttons. The layout feels more editorial and blends naturally into content-heavy pages. Works well when the CTA should feel integrated rather than isolated." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">Centered headline with stacked actions</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · Left-aligned headline with inline actions" title="A left-aligned call to action with a strong headline, short supporting copy, and side-by-side buttons. The layout feels more editorial and blends naturally into content-heavy pages. Works well when the CTA should feel integrated rather than 
1isolated." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">Left-aligned headline with inline actions</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · High-contrast panel with stacked actions" title="A bold, high-contrast CTA presented inside a contained panel, with a centered headline and stacked primary and secondary actions. The strong visual separation makes this ideal for end-of-page moments where the CTA should clearly stand apart from surrounding content." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">High-contrast panel with stacked actions</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · High-contrast panel with left-aligned actions" title="A wide, high-contrast CTA panel with left-aligned content and inline primary and secondary actions. The asymmetric layout creates a strong visual anchor while leaving room for surrounding content, making it well suited for mid-page transitions or section breaks." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">High-contrast panel with left-aligned actions</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · Split content with feature list and media" title="A two-column CTA layout combining structured text and a visual panel. Uses a feature list to add scannability and depth, paired with a supporting image or illustration. Works well when the CTA needs a bit more explanation without becoming a full section." 
1class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">Split content with feature list and media</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · Feature-led split with primary visual" title="A split CTA layout anchored by a dominant visual panel, with supporting copy and a short feature list alongside. Emphasizes imagery first, then reinforces the action with structured text and clear primary and secondary buttons. Suitable when visual tone or brand feel needs to carry more weight than the copy." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">Feature-led split with primary visual</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-6.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-6.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · Product preview split with feature checklist" title="A split CTA layout that pairs structured copy and a short feature list with a live product preview or dashboard screenshot. The layout leads with value explanation, then reinforces credibility through a concrete UI example. Works well when showing real product depth without turning the section into a full feature block." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">Product preview split with feature checklist</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-7.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-7.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Add to page: Call to action · Wi
1de product panel with offset preview" title="A wide, left-aligned CTA paired with a large, offset product screenshot that bleeds toward the edge of the container. The layout creates a sense of depth and scale, making the product feel substantial while keeping the call to action simple and focused. Good for high-confidence CTAs where the UI itself does most of the convincing." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Call to action</span><span class="truncate text-sm font-medium">Wide product panel with offset preview</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/cta-8.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/cta-8.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Add to page</span></button></li><li><button type="button" aria-label="Use as header: Header · Left-aligned dropdown navigation" title="A classic left-aligned top navigation with horizontal links and inline dropdown menus for larger screens. Primary actions are grouped on the right for clear visual separation. On smaller screens, the layout collapses into a full-height mobile menu with expandable sections, preserving hierarchy while keeping the interaction simple and familiar." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">Left-aligned dropdown navigation</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/top-navigation-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/top-navigation-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · Centered primary navigation" title="A center-aligned top navigation that places the primary links in the middle of the header, creating a more balanced, symmetrical layout. Dropdown menus open directly beneath each item on larger screens, while actions remain grouped to the right. On smaller screens, the navigation collapses into a vertical, full-height menu with expandable sections, keeping the structure clear while shifting focus to touch-friendly interaction." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">Centered primary navigation</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/top-navigation-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/top-navigation-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · Compact bar with progressive disclosure" title="A compact top navigation that keeps the large-screen layout minimal and low-profile, with primary links arranged in a single horizontal bar. Dropdowns reveal richer, icon-led menus only when needed, keeping visual noise down by default. On smaller screens, the same structure expands into a stacked, panel-style menu with nested sections, preserving hierarchy while shifting emphasis to vertical scanning and tap targets." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">Compact bar with progressive disclosure</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/top-navigation-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/top-navigation-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · Centered pill navigation with dropdown menu" title="A centered top navigation where primary links sit inside a pill-style container, creating a strong visual anchor across large screens. Dropdown menus open from the center group to reveal secondary links in a compact panel. On small screens, the layout collapses into a full-height drawer with stacked links and clear primary actions, maintaining the same information structure while prioritizing tap comfort and readability." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">
1Centered pill navigation with dropdown menu</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/top-navigation-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/top-navigation-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · Minimal center-aligned links with inline auth" title="A stripped-back, center-aligned top navigation that prioritizes clarity and whitespace. Primary links sit in a single horizontal row with the brand anchored to the left and a lightweight login action on the right. On small screens, the layout collapses into a simple slide-out menu with stacked links and a single secondary action, keeping the structure familiar while reducing visual noise." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">Minimal center-aligned links with inline auth</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/top-navigation-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/top-navigation-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · App Shell Header 1" title="App shell header with a page selector, date range presets, filters, and search." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">App Shell Header 1</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-header-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-header-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · App Shell Header 2" title="Ap
1p shell header with a breadcrumb, faceted filters, and a search field." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">App Shell Header 2</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-header-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-header-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · App Shell Header 3" title="App shell header with a page selector, applied filters as removable chips, and a search field." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">App Shell Header 3</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-header-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-header-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · App Shell Header 4" title="Ap
1p shell header with a page selector, filters, and a primary action." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">App Shell Header 4</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-header-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-header-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as header: Header · App Shell Header 5" title="App shell header with a page selector, a period select, and a date range stepper." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Header</span><span class="truncate text-sm font-medium">App Shell Header 5</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-header-5.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-header-5.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as header</span></button></li><li><button type="button" aria-label="Use as sidebar: Sidebar · Sidebar" title="App shell with a standard sidebar, header, and content slot. Collapsed variant included." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Sidebar</span><span class="truncate text-sm font-medium">Sidebar</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as sidebar</span></button></li><li><button type="button" aria-label="Use as sidebar: Sidebar · Floating sidebar" title="Ap
1p shell with a floating sidebar, header, and content slot. Collapsed variant included." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Sidebar</span><span class="truncate text-sm font-medium">Floating sidebar</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as sidebar</span></button></li><li><button type="button" aria-label="Use as sidebar: Sidebar · Inset sidebar" title="App shell with an inset sidebar, header, and content slot. Collapsed variant included." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Sidebar</span><span class="truncate text-sm font-medium">Inset sidebar</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/app-shell-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/app-shell-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as sidebar</span></button></li><li><button type="button" aria-label="Use as footer: Footer · Multi-column sitemap footer" title="A wide, multi-column footer with grouped navigation links and a compact legal row. Designed for content-heavy sites that need clear link categorization and quick scanning. Includes a stacked variant for mobile layouts." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Footer</span><span class="truncate text-sm font-medium">Multi-column sitemap footer</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/footer-1.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/footer-1.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as footer</span></button></li><li>
1<button type="button" aria-label="Use as footer: Footer · Sitemap footer with newsletter signup" title="A multi-column sitemap footer with a prominent newsletter signup band. Combines navigation, legal links, and email capture in a single layout. Designed for marketing sites that want to convert at the page end, with a stacked mobile layout that prioritizes the signup first." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Footer</span><span class="truncate text-sm font-medium">Sitemap footer with newsletter signup</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/footer-2.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/footer-2.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as footer</span></button></li><li><button type="button" aria-label="Use as footer: Footer · Compact sitemap footer" title="A clean, low-profile sitemap footer with evenly spaced link columns and a minimal brand and legal row. Designed for content-heavy sites that need clear navigation without visual weight. Collapses into a single stacked list on mobile for fast scanning." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Footer</span><span class="truncate text-sm font-medium">Compact sitemap footer</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/footer-3.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/footer-3.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as footer</span></button></li><li>
1<button type="button" aria-label="Use as footer: Footer · Brand-led sitemap footer" title="A sitemap footer anchored by a short brand statement and logo, followed by structured link columns and legal links. Gives more context about the company while keeping navigation clear. Works well for marketing sites where brand positioning matters as much as wayfinding." class="group/card grid w-full gap-2 rounded-lg border bg-background p-2 text-left transition-colors outline-none hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"><span class="flex min-w-0 items-center gap-2"><span data-slot="badge" data-variant="outline" class="group/badge inline-flex h-5 w-fit items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground shrink-0">Footer</span><span class="truncate text-sm font-medium">Brand-led sitemap footer</span></span><span class="block overflow-hidden rounded-md border bg-muted"><img src="/page-builder/thumbnails/light/footer-4.jpg" alt="" loading="lazy" class="block max-h-56 w-full object-cover object-top dark:hidden"/><img src="/page-builder/thumbnails/dark/footer-4.jpg" alt="" loading="lazy" class="hidden max-h-56 w-full object-cover object-top dark:block"/></span><span class="flex items-center justify-end gap-1 text-xs text-muted-foreground group-hover/card:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>Use as footer</span></button></li></ul></div></div><div data-slot="sidebar-footer" data-sidebar="footer" class="flex flex-col p-2 gap-2 border-t border-border/70"><p class="text-xs text-muted-foreground">Blocks<!-- --> from<!-- --> <a href="https://shadcncraft.com?atp=shadcnpreset&amp;src=page-builder" target="_blank" rel="sponsored noopener noreferrer" class="underline underline-offset-4 hover:text-foreground">shadcncraft Pro</a></p></div></div><div class="flex min-h-0 min-w-0 flex-1 flex-col p-2 md:pt-0 md:pl-0"><div class="relative min-h-0 flex-1 overflow-hidden rounded-lg border"><div class="flex h-full flex-col justify-center overflow-y-auto bg-background py-8"><h2 class="px-4 text-center text-[32px] font-semibold tracking-tight text-balance">Describe a page</h2><p class="px-4 pt-2 text-center text-sm text-muted-foreground">Jev drafts it from shadcncraft blocks, or pick blocks in the sidebar.</p><input aria-label="Upload files" class="hidden" title="Upload files" type="file"/><form class="z-20 mx-auto w-full max-w-[690px] p-4"><div data-slot="input-group" role="group" class="group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[&gt;[data-align=block-end]]:h-auto has-[&gt;[data-align=block-end]]:flex-col has-[&gt;[data-align=block-start]]:h-auto has-[&gt;[data-align=block-start]]:flex-col has-[&gt;textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[&gt;[data-align=block-end]]:[&amp;&gt;input]:pt-3 has-[&gt;[data-align=block-start]]:[&amp;&gt;input]:pb-3 has-[&gt;[data-align=inline-end]]:[&amp;&gt;input]:pr-1.5 has-[&gt;[data-align=inline-start]]:[&amp;&gt;input]:pl-1.5 overflow-hidden"><div class="contents"><textarea data-slot="input-group-control" class="flex w-full border-input px-2.5 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex-1 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent field-sizing-content max-h-48 min-h-14 resize-none" name="message" placeholder="Describe a page, like a landing page for a cosy coffee shop…" rows="2" maxLength="300" aria-label="Describe a page"></textarea></div><div role="group" data-slot="input-group-addon" data-align="block-e
1nd" class="flex h-auto cursor-text items-center py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&amp;&gt;kbd]:rounded-[calc(var(--radius)-5px)] [&amp;&gt;svg:not([class*=&#x27;size-&#x27;])]:size-4 order-last w-full px-2.5 pb-2 group-has-[&gt;input]/input-group:pb-2 [.border-t]:pt-2 justify-between gap-1"><div class="flex items-center gap-1 min-w-0"></div><button type="submit" data-disabled="" tabindex="0" disabled="" data-slot="button" data-size="icon-sm" aria-label="Submit" class="group/button shrink-0 justify-center rounded-lg border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-primary text-primary-foreground [a]:hover:bg-primary/80 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 flex items-center gap-2 text-sm shadow-none size-8 p-0 has-[&gt;svg]:p-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left size-4" aria-hidden="true"><path d="M20 4v7a4 4 0 0 1-4 4H4"></path><path d="m9 10-5 5 5 5"></path></svg></button></div></div></form><ul aria-label="Ideas" class="mx-auto flex max-w-[690px] flex-wrap justify-center gap-2 px-4"><li><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Coffee shop</button></li><li><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">SaaS pricing</button></li><li><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-
1px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Ceramics shop</button></li><li><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Sales dashboard</button></li><li><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3.5">Portfolio</button></li></ul></div></div></div></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section></div></div>
1<script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:1","P:1")</script>
1<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
2$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
2<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[34577,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"HotJar\"]\n3:\"$Sreact.suspense\"\n4:I[597412,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"QueryProvider\"]\n5:I[160095,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"ThemeProvider\"]\n6:I[668186,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"PendingVoteApplier\"]\n7:I[714476,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"VoteAuthDialogHost\"]\n8:I[585968,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"TooltipProvider\"]\n9:I[927037,[\"/_next/static/chunks/8ca230e1bacc2158.js\",\"/_next/static/chunks/6ecd2cf99faa4fc3.js\"],\"default\"]\na:I[913583,[\"/_next/static/chunks/8ca230e1bacc2158.js\",\"/_next/static/chunks/6ecd2cf99faa4fc3.js\"],\"default\"]\nb:I[102296,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\"],\"GoogleAnalytics\"]\n13:I[746984,[],\"default\"]\n14:I[852046,[\"/_next/static/chunks/8ca230e1bacc2158.js\",\"/_next/static/chunks/6ecd2cf99faa4fc3.js\"],\"OutletBoundary\"]\n16:I[852046,[\"/_next/static/chunks/8ca230e1bacc2158.js\",\"/_next/static/chunks/6ecd2cf99faa4fc3.js\"],\"ViewportBoundary\"]\n18:I[852046,[\"/_next/static/chunks/8ca230e1bacc2158.js\",\"/_next/static/chunks/6ecd2cf99faa4fc3.js\"],\"MetadataBoundary\"]\n1a:I[658755,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab."])</script>
2<script>self.__next_f.push([1,"js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\",\"/_next/static/chunks/7ed8c83bc6f79ca1.js\",\"/_next/static/chunks/8fa12bb0e3c0d680.js\",\"/_next/static/chunks/9e522aebfbc6b7e0.js\",\"/_next/static/chunks/d3000f2a2c3f1fbc.js\",\"/_next/static/chunks/5ac944aace50aa82.js\",\"/_next/static/chunks/3bcbd37ba9659c90.js\",\"/_next/static/chunks/06f22f000d1421e0.js\",\"/_next/static/chunks/fc64c839cfa77459.js\",\"/_next/static/chunks/803ae84881f6a5cd.js\",\"/_next/static/chunks/53234dd8f34b6e9b.js\",\"/_next/static/chunks/4388a7d5a0125556.js\",\"/_next/static/chunks/dc65826cd0bdd394.js\",\"/_next/static/chunks/2cfc0e1486b3f23f.js\",\"/_next/static/chunks/58df35895e30b929.js\",\"/_next/static/chunks/ebff0d6e1c6e8883.js\"],\"Header1\"]\n1b:I[476216,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\",\"/_next/static/chunks/7ed8c83bc6f79ca1.js\",\"/_next/static/chunks/8fa12bb0e3c0d680.js\",\"/_next/static/chunks/9e522aebfbc6b7e0.js\",\"/_next/static/chunks/d3000f2a2c3f1fbc.js\",\"/_next/static/chunks/5ac944aace50aa82.js\",\"/_next/static/chunks/3bcbd37ba9659c90.js\",\"/_next/static/chunks/06f22f000d1421e0.js\",\"/_next/static/chunks/fc64c839cfa77459.js\",\"/_next/static/chunks/803ae84881f6a5cd.js\",\"/_next/static/chunks/53234dd8f34b6e9b.js\",\"/_next/static/chunks/4388a7d5a0125556.js\",\"/_next/static/chunks/dc65826cd0bdd394.js\",\"/_next/static/chunks/2cfc0e1486b3f23f.js\",\"/_next/static/chunks/58df35895e30b929.js\",\"/_next/static/chunks/ebff0d6e1c6e8883.js\"],\"PageBuilder\"]\n1c:I[466794,[\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"/_next/static/chunks/2444bd4b37333ef8.js\",\"/_next/static/chunks/461ada3ac3137557.js\",\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"/_next/static/chunks/ce42789c7730c699.js\",\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"/_next/static/chunks/d266f3d5c5479d30.js\",\"/_next/static/chunks/441281cb4864527f.js\",\"/_next/static/chunks/7ed8c83bc6f79ca1.js\",\"/_next/static/chunks/8fa12bb0e3c0d680.js\",\"/_next/static/chunks/9e522aebfbc6b7e0.js\",\"/_next/static/chunks/d3000f2a2c3f1fbc.js\",\"/_next/static/chunks/5ac944aace50aa82.js\",\"/_next/static/chunks/3bcbd37ba9659c90.js\",\"/_next/static/chunks/06f22f000d1421e0.js\",\"/_next/static/chunks/fc64c839cfa77459.js\",\"/_next/static/chunks/803ae84881f6a5cd.js\",\"/_next/static/chunks/53234dd8f34b6e9b.js\",\"/_next/static/chunks/4388a7d5a0125556.js\",\"/_next/static/chunks/dc65826cd0bdd394.js\",\"/_next/static/chunks/2cfc0e1486b3f23f.js\",\"/_next/static/chunks/58df35895e30b929.js\",\"/_next/static/chunks/ebff0d6e1c6e8883.js\"],\"Toaster\"]\n1d:I[957599,[\"/_next/static/chunks/8ca230e1bacc2158.js\",\"/_next/static/chunks/6ecd2cf99faa4fc3.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/19aebd635f1b9009.css\",\"style\"]\n:HL[\"/_next/static/chunks/8cfba7ec0bf7870f.css\",\"style\"]\n:HL[\"/_next/static/chunks/e05f9fc8ba613e9d.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.3a6ba036.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
2<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"YPDp4mXqkGjyg06JIq7tu\",\"c\":[\"\",\"build\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"build\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/19aebd635f1b9009.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/8cfba7ec0bf7870f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/e05f9fc8ba613e9d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/c62ab4b81f002aaa.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/2444bd4b37333ef8.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/461ada3ac3137557.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/cb3f1d2dbb6b3f01.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/d0b45cf1075bc3ab.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/9ab142f18ad9e6da.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/ce42789c7730c699.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/a3e5e771319e9ebe.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-8\",{\"src\":\"/_next/static/chunks/d266f3d5c5479d30.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-9\",{\"src\":\"/_next/static/chunks/441281cb4864527f.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"className\":\"antialiased geist_mono_b4d4e0d7-module__vc6T-a__variable font-sans inter_b2991b2-module__9mH_6q__variable\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$3\",null,{\"fallback\":null,\"children\":[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"children\":[[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]}]}]}],[\"$\",\"$Lb\",null,{}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$Lc\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/7ed8c83bc6f79ca1.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/8fa12bb0e3c0d680.js\",\"async\":true,\"nonce\":\"$undefined\"}
2],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/9e522aebfbc6b7e0.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/d3000f2a2c3f1fbc.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/5ac944aace50aa82.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/3bcbd37ba9659c90.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/06f22f000d1421e0.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/fc64c839cfa77459.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-8\",{\"src\":\"/_next/static/chunks/803ae84881f6a5cd.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-9\",{\"src\":\"/_next/static/chunks/53234dd8f34b6e9b.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-10\",{\"src\":\"/_next/static/chunks/4388a7d5a0125556.js\",\"async\":true,\"nonce\":\"$undefined\"}],\"$Ld\",\"$Le\",\"$Lf\",\"$L10\"],\"$L11\"]}],{},null,false,false]},null,false,false]},null,false,false],\"$L12\",false]],\"m\":\"$undefined\",\"G\":[\"$13\",[]],\"S\":false}\n"])</script>
2<script>self.__next_f.push([1,"d:[\"$\",\"script\",\"script-11\",{\"src\":\"/_next/static/chunks/dc65826cd0bdd394.js\",\"async\":true,\"nonce\":\"$undefined\"}]\ne:[\"$\",\"script\",\"script-12\",{\"src\":\"/_next/static/chunks/2cfc0e1486b3f23f.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nf:[\"$\",\"script\",\"script-13\",{\"src\":\"/_next/static/chunks/58df35895e30b929.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n10:[\"$\",\"script\",\"script-14\",{\"src\":\"/_next/static/chunks/ebff0d6e1c6e8883.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n11:[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$3\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@15\"}]}]\n12:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L16\",null,{\"children\":\"$L17\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L18\",null,{\"children\":[\"$\",\"$3\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L19\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nc:[\"$\",\"div\",null,{\"data-slot\":\"container-outer\",\"className\":\"grid h-dvh grid-rows-[auto_minmax(0,1fr)] overflow-hidden\",\"children\":[[\"$\",\"$L1a\",null,{\"className\":\"max-w-full!\"}],[[\"$\",\"$L1b\",null,{\"saved\":null}],[\"$\",\"$L1c\",null,{}]]]}]\n17:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n15:null\n"])</script>
2<script>self.__next_f.push([1,"19:[[\"$\",\"title\",\"0\",{\"children\":\"Build a page with Jev | shadcnpreset\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Describe a page and Jev assembles it from shadcncraft blocks, dressed in a shadcn preset you can swap.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"canonical\",\"href\":\"https://shadcnpreset.com/build\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Build a page with Jev\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"Describe a page and Jev assembles it from shadcncraft blocks, dressed in a shadcn preset you can swap.\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://shadcnpreset.com/build\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:site_name\",\"content\":\"shadcnpreset\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image\",\"content\":\"https://shadcnpreset.com/og-card.png\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:alt\",\"content\":\"Find the perfect shadcn preset in seconds\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Build a page with Jev\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"Describe a page and Jev assembles it from shadcncraft blocks, dressed in a shadcn preset you can swap.\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://shadcnpreset.com/og-card.png\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.75e67670.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"$L1d\",\"15\",{}]]\n"])</script>
2</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.