Tailwind CSS Hero Sections

All Blocks
Marketing
Hero Sections

Hero Sections

Page hero layouts and landing intros for SaaS homepages, agency sites, storefronts, and campaign-driven marketing pages.

Split Hero with Tabbed Preview Panel Pro

A split hero pairs intro copy with a right-side media panel and tabbed preview block.

Create a responsive hero section named "Split Hero with Tabbed Preview Panel" that visually and behaviorally matches the source reference as closely as possible. Use the destination project's existing framework, styling conventions, semantic tokens, components, icon conventions, tab primitives, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#split-hero-with-tabbed-preview-panel. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Baseline fidelity gates:
- Preserve exact visible copy, data values, order, hierarchy, and default state unless the user explicitly asks to change them.
- Map semantic token roles to one coherent destination token vocabulary. Every source primary role must use the destination project's primary token/config, never Preline blue or fixed blue palette values unless the destination primary is explicitly blue.
- Verify every emitted utility or component class exists in the destination. Map or define a missing semantic token before use; do not leave any undefined source class in generated markup.
- Use exact source assets, image URLs, inline SVGs, avatars, logos, and brand marks when supplied; do not replace them with placeholders, initials, emojis, generic icons, or alternate stock media.
- Final QA: compare the implementation with the exact anchored Preview and HTML source at mobile and desktop widths, including open/alternate states, assets, layering, focus behavior, and dark mode.

Behavior runtime rule:
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.

The details below are derived from the source block code (repo references: `partials/pro/saas-startup/layouts-components/main-page-hero.html` for markup, `partials/pro/saas-startup/js/hero-tabs-scroller.html` for the tab/scroll script). Do not replace them with assumptions from similar hero sections, generic tab components, or default design-system behavior.

Use the destination project's design system for styling, but keep the implementation Tailwind-first. Apply layout, spacing, typography, colors, borders, shadows, responsive behavior, hover/focus states, and `aria-selected` states with Tailwind utility classes directly in the markup. Reuse existing project component classes only when they already exist; do not create new one-off component classes such as `.tab-button`, `.app-row`, `.hero-shell`, or `@layer components` rules just to style this block.

For Tailwind-based projects, preserve the original Tailwind scale instead of translating visual measurements into arbitrary bracket utilities. The classes below are examples from this source, not an exhaustive whitelist: use classes such as `max-w-6xl`, `max-w-xs`, `px-4`, `sm:px-6`, `lg:px-8`, `pt-10`, `md:pt-20`, `pb-14`, `md:pb-20`, `text-4xl`, `md:text-5xl`, `lg:text-6xl`, `text-sm`, `md:text-lg`, `gap-y-12`, `gap-x-5`, `lg:gap-x-8`, `size-4`, and `rounded-xl` where they match the source. Do not convert these or similar source scale utilities to `max-w-[1152px]`, `max-w-[320px]`, `text-[36px]`, `text-[48px]`, `text-[60px]`, `leading-[38px]`, `lg:leading-[60px]`, or similar arbitrary classes.

Use arbitrary bracket utilities only when the original block actually uses them or when Tailwind has no reasonable native utility for the value. A background image URL such as `bg-[url(...)]` is acceptable; arbitrary sizing, spacing, typography, radius, and line-height utilities are not acceptable when a standard Tailwind class or an existing project token class can express the design.

Preserve Tailwind scale/layout utilities, but do not blindly preserve Preline-only token class names. Map token roles to the destination project's actual theme vocabulary. For example, if the destination uses common Tailwind/shadcn-style tokens, use classes like `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `border-border`, `bg-primary`, `text-primary-foreground`, and `ring-ring`. In tokenized Tailwind projects, combine structural utilities with semantic token utilities; do not use raw palette classes like `text-gray-900`, `text-gray-500`, `bg-white`, `bg-gray-50`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600` for colors, surfaces, borders, focus rings, or selected states when semantic tokens exist. If the destination is Bootstrap, use native Bootstrap classes and variables such as `.btn`, `.btn-primary`, `.text-primary`, `.text-body`, `.text-muted`, `.card`, `.border`, `--bs-primary`, and `--bs-primary-rgb`, including any app override such as a green/teal primary. Do not introduce or mix token classes such as `text-muted-foreground-1`, `bg-layer`, `border-layer-line`, `border-primary-line`, `bg-primary-hover`, `bg-primary-focus`, `bg-surface-active`, or `text-surface-foreground` unless those classes already exist in the destination project. Treat these token names as examples; apply the same rule to any other source-specific token class.

Build only this split hero and its source-included tabbed preview panel. Do not append unrelated Tailwind UI sample sections, testimonials, marketing CTAs, page headers, footers, analytics cards, or extra demo blocks around it.

Map the reference colors to semantic project roles such as foreground, muted/secondary text, primary, surface/card, border, shadow, hover, focus, active, and dark-mode surface. Use one destination token vocabulary consistently. Do not scatter inline `style` attributes, raw arbitrary color utilities such as `text-[#1e293b]`, or repeated raw hex/rgb values through the component. If the project is completely blank and has no color tokens, create a small fallback token set with CSS variables or Tailwind theme values once, then consume those tokens through utility classes. Custom CSS should be limited to tokens, custom keyframes, scrollbar hiding, or behavior that Tailwind utilities cannot reasonably express.

If the project is blank or has no established icon library, use the Lucide icon library for all non-brand interface icons. Do not use Lucide for the Download our app brand icons or the rating star; those must use the exact SVGs provided below.

Use the original hosted Preline image assets exactly as listed below. Do not use localhost URLs, placeholder images, Unsplash, gradients, generated mockups, or recreated dashboard mockups for the main preview. The user expects a 1:1 visual result, so the hero background and tab preview screenshots must be used as-is.

Image assets:
- Light hero background: `https://preline.co/assets/img/pro/startup/img11.webp`
- Dark hero background: `https://preline.co/assets/img/pro/startup-dark/img11.webp`
- Dashboard preview light: `https://preline.co/assets/img/pro/startup/img1.webp`
- Dashboard preview dark: `https://preline.co/assets/img/pro/startup-dark/img1.webp`
- Workspace preview light: `https://preline.co/assets/img/pro/startup/img2.webp`
- Workspace preview dark: `https://preline.co/assets/img/pro/startup-dark/img2.webp`
- Payment preview light: `https://preline.co/assets/img/pro/startup/img3.webp`
- Payment preview dark: `https://preline.co/assets/img/pro/startup-dark/img3.webp`
- Analytics preview light: `https://preline.co/assets/img/pro/startup/img4.webp`
- Analytics preview dark: `https://preline.co/assets/img/pro/startup-dark/img4.webp`
- Chat preview light: `https://preline.co/assets/img/pro/startup/img5.webp`
- Chat preview dark: `https://preline.co/assets/img/pro/startup-dark/img5.webp`
- Ecommerce preview light: `https://preline.co/assets/img/pro/startup/img6.webp`
- Ecommerce preview dark: `https://preline.co/assets/img/pro/startup-dark/img6.webp`

Overall layout:
- Full-width SaaS hero section.
- Use the light/dark hero background images above with Tailwind background utilities.
- Source hero wrapper classes to mirror in Tailwind projects: `relative bg-[url(...)] dark:bg-[url(...)] bg-no-repeat bg-cover bg-top`.
- Source section padding classes: `pt-10 md:pt-20 pb-14 md:pb-20`.
- Source container classes: `max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto`.
- Do not replace `max-w-6xl` with `max-w-[1152px]`; use the original Tailwind scale class.
- Light mode foreground: use the project's main foreground/dark text token. If the project is blank, use Preline's deep slate/navy fallback, about `#1e293b`.
- Muted text: use the project's muted or secondary text token. If the project is blank, use Preline's slate gray fallback, about `#64748b`.
- Primary action color: use the project's primary/accent token. In Bootstrap projects, this means the project's `.btn-primary` / `--bs-primary` color, not Preline blue. Only if the project is blank and has no primary token, use Preline's blue fallback, about `#2563eb`.
- Surface, border, hover, shadow, and dark-mode colors should also come from the project tokens first, with Preline-like values only as blank-project fallbacks.

Dark mode:
- Must be fully implemented.
- Use the dark hero background and dark preview images listed above.
- Main text becomes near-white.
- Muted text becomes cool gray.
- Download rows, tabs, browser shell, borders, and preview container must all have intentional dark-mode colors.
- Do not leave any part light-only.

Hero grid:
- Mobile: single column.
- Source grid classes: `mb-4 md:mb-8 grid md:grid-cols-12 items-center gap-y-12 gap-x-5 lg:gap-x-8`.
- Source left column classes: `md:col-span-7`.
- Source right download column classes: `hidden md:block md:mt-auto md:col-span-5`.
- Do not replace `gap-y-12`, `gap-x-5`, `lg:gap-x-8`, `mb-4`, or `md:mb-8` with arbitrary spacing classes.

Left content:
- Eyebrow text: `Web App`
- Source eyebrow scale/layout classes: `mb-3 md:mb-4 font-mono text-sm`.
- Eyebrow token role: muted/secondary text. Use the destination muted token class, for example `text-muted-foreground` when that exists.
- Heading text: `Supercharged Preline Experience`
- Source heading scale/layout classes: `font-bold text-4xl md:text-5xl lg:text-6xl`.
- Heading token role: foreground. Use the destination foreground token class, for example `text-foreground` when that exists.
- Do not use arbitrary typography utilities such as `text-[36px]`, `md:text-[48px]`, `lg:text-[60px]`, `leading-[38px]`, or `lg:leading-[60px]` for the heading in a Tailwind project.
- Paragraph text: `Boost developer efficiency, enhance teamwork, and maximize tech investments with Preline.`
- Paragraph color must match the reference: use the project's normal foreground text color, not muted text. It should read as strong foreground in light mode and near-white/foreground in dark mode.
- Source paragraph scale/layout classes: `mt-5 text-sm md:text-lg`.
- Paragraph token role: foreground. Use the same destination foreground token class used for the heading/body foreground.
- Do not add arbitrary `max-w-[65ch]` or bracket line-height classes such as `leading-[24px]` to the paragraph unless the destination project has no way to match the source spacing with standard utilities.

CTA row:
- Source CTA row classes: `mt-5 flex flex-wrap items-center gap-2`.
- Primary button: `Try it free`
- Source primary button scale/layout/state classes: `py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md hover:shadow-none focus:outline-hidden focus:shadow-none disabled:opacity-50 disabled:pointer-events-none`.
- Primary button token roles: primary background, primary foreground, primary border, primary hover, and primary focus. Use the destination project's primary token utilities, such as `bg-primary`, `text-primary-foreground`, `border-primary`, and the project's normal hover/focus primary treatment. In Bootstrap projects, use the existing `.btn-primary` styling or `--bs-primary` override so the CTA follows the app primary color.
- Secondary button: `Get a demo`
- Source secondary button scale/layout/state classes: `group py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm font-semibold rounded-lg border border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden`.
- Secondary button token role: foreground text.
- Add the small right-arrow icon after `Get a demo` using `size-3.5` and the source opacity/translate hover classes.

Download our app panel placement:
- Hidden on mobile.
- Visible from tablet/desktop upward.
- The panel is NOT top-aligned and NOT vertically centered.
- It sits at the bottom of the right grid column, aligned with the lower part of the hero copy/CTA area.
- Source outer column classes: `hidden md:block md:mt-auto md:col-span-5`.
- Source inner panel classes: `max-w-xs w-full md:ms-auto`.
- Do not use `max-w-[320px]`; use `max-w-xs`.
- Header text: `Download our app`
- Source header scale/layout classes: `mb-2 font-mono text-sm`.
- Header token role: muted/secondary text. Use the destination muted token class consistently.

Download rows:
- Exactly three stacked rows inside one grouped list.
- Group list wrapper classes: `flex flex-col -space-y-px`.
- Each row is a link.
- Source row link scale/layout/state classes: `p-3 sm:p-4 flex items-center gap-x-2 border first:rounded-t-xl last:rounded-b-xl focus:outline-hidden`.
- Row token roles: card/surface background, border, hover border, and focus border. Use the destination project's card/surface and border token classes, such as `bg-card` and `border-border` when those exist.
- Do not use arbitrary height, padding, border-radius, or gap classes for the rows.
- Adjacent rows share borders; avoid double-thick borders.
- Brand icon visual size must use `size-4`.
- Do not enlarge brand icons.
- Use the SVG code below for the brand icons. Do not substitute icon-library versions.

Exact download row layout:
- Left side: brand icon + title.
- Right side: star icon + rating + review count.
- Review count is inline on the right, immediately next to the rating.
- Do NOT place review count below the app name.
- Correct visual order:
  - `[Apple icon] MacOS                         [star] 4.9 1.2m reviews`
  - `[App Store icon] App Store                 [star] 4.9 367k reviews`
  - `[Google Play icon] Google Play             [star] 4.7 975k reviews`
- Star icon:
  - Use the exact SVG below.
  - Filled star.
  - Use `size-3`.
  - Color should use the project foreground/currentColor role, not amber/yellow.
- Rating number:
  - Source rating scale classes: `font-medium text-xs`.
  - Project foreground color.
- Review count:
  - Source review count scale class: `text-xs`.
  - Use the destination muted/secondary token class consistently.
  - Inline immediately after rating number with small spacing.
- Titles:
  - Source title scale classes: `font-medium text-sm`.
  - Use the destination foreground token class consistently.

MacOS icon:
```html
<svg class="shrink-0 size-4 text-foreground" width="75" height="86" viewBox="0 0 75 86" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.6565 20.8071C41.4061 20.8071 45.5728 18.9524 49.1564 15.2429C52.7399 11.5334 54.5318 7.21993 54.5318 2.30245C54.5318 1.76237 54.4891 0.994884 54.4038 0C53.7781 0.0852758 53.3088 0.156339 52.9959 0.213189C48.616 0.838545 44.7622 2.98465 41.4345 6.65142C38.107 10.3183 36.4432 14.241 36.4432 18.4195C36.4432 18.9026 36.5143 19.6986 36.6565 20.8071ZM53.6785 86C57.063 86 60.803 83.6834 64.8986 79.0501C68.9942 74.4168 72.1226 68.9734 74.2842 62.7199C66.2353 58.5698 62.2109 52.6148 62.2109 44.8547C62.2109 38.3738 65.4674 32.831 71.9805 28.2261C67.4583 22.5695 61.4857 19.7412 54.0625 19.7412C50.9339 19.7412 48.0756 20.2102 45.4875 21.1482L43.8664 21.7451L41.6906 22.5979C40.2685 23.138 38.9744 23.4081 37.8083 23.4081C36.8982 23.4081 35.7036 23.0953 34.2248 22.47L32.5609 21.7878L30.9825 21.1482C28.6787 20.1818 26.2043 19.6985 23.5593 19.6985C16.4774 19.6985 10.7892 22.0862 6.49456 26.8617C2.1999 31.637 0.0526123 37.9332 0.0526123 45.7501C0.0526123 56.7506 3.49397 66.9126 10.3768 76.236C15.1549 82.7453 19.5207 86 23.4739 86C25.152 86 26.8158 85.6731 28.4654 85.0193L30.5558 84.1666L32.2197 83.5696C34.5518 82.7453 36.6991 82.3331 38.6615 82.3331C40.7378 82.3331 43.1268 82.8591 45.8288 83.9107L47.1513 84.4224C49.91 85.4741 52.0859 86 53.6785 86Z" fill="currentColor"/></svg>
```

For the SVG snippets above and below, preserve the path data, viewBox, fill/stroke behavior, gradients, and visual sizes. Replace utility class names such as `text-foreground` or `size-4` with the destination project's equivalent classes or token references if those utilities do not exist, but keep the icons visually identical.

App Store icon:
```html
<svg class="shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.536 0H6.464C2.892 0 0 2.892 0 6.464V25.54C0 29.108 2.892 32 6.464 32H25.54C29.108 32 32.004 29.108 32.004 25.536V6.464C32 2.892 29.108 0 25.536 0Z" fill="url(#paint0_linear_4403_2024)"/><path d="M15.864 7.352L16.512 6.232C16.912 5.532 17.804 5.296 18.504 5.696C19.204 6.096 19.44 6.988 19.04 7.688L12.796 18.496H17.312C18.776 18.496 19.596 20.216 18.96 21.408H5.72C4.912 21.408 4.264 20.76 4.264 19.952C4.264 19.144 4.912 18.496 5.72 18.496H9.432L14.184 10.26L12.7 7.684C12.3 6.984 12.536 6.1 13.236 5.692C13.936 5.292 14.82 5.528 15.228 6.228L15.864 7.352ZM10.248 22.908L8.848 25.336C8.448 26.036 7.556 26.272 6.856 25.872C6.156 25.472 5.92 24.58 6.32 23.88L7.36 22.08C8.536 21.716 9.492 21.996 10.248 22.908ZM22.304 18.504H26.092C26.9 18.504 27.548 19.152 27.548 19.96C27.548 20.768 26.9 21.416 26.092 21.416H23.988L25.408 23.88C25.808 24.58 25.572 25.464 24.872 25.872C24.172 26.272 23.288 26.036 22.88 25.336C20.488 21.188 18.692 18.084 17.5 16.016C16.28 13.912 17.152 11.8 18.012 11.084C18.968 12.724 20.396 15.2 22.304 18.504Z" fill="white"/><defs><linearGradient id="paint0_linear_4403_2024" x1="16.002" y1="0" x2="16.002" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18BFFB"/><stop offset="1" stop-color="#2072F3"/></linearGradient></defs></svg>
```

Google Play icon:
```html
<svg class="shrink-0 size-4" width="32" height="37" viewBox="0 0 32 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5159 11.1765L1.20745 0.140891C0.964824 1.05128e-05 0.659583 0.00783721 0.424782 0.148718C0.182154 0.289598 0.0334473 0.540052 0.0334473 0.821813C0.0334473 0.821813 0.041274 1.83928 0.0491007 3.5142L14.1137 17.5788L20.5159 11.1765Z" fill="url(#paint0_linear_4406_2034)"/><path d="M0.0491007 3.5142C0.0725807 9.5564 0.143021 24.2236 0.174328 31.5259L14.1215 17.5788L0.0491007 3.5142Z" fill="url(#paint1_linear_4406_2034)"/><path d="M31.5672 17.4927L20.5159 11.1765L14.1058 17.5788L21.3377 24.8106L31.575 18.8467C31.8177 18.7058 31.9664 18.4475 31.9664 18.1736C31.9664 17.8918 31.8098 17.6336 31.5672 17.4927Z" fill="url(#paint2_linear_4406_2034)"/><path d="M0.166501 31.5259C0.182154 34.1322 0.189981 35.7993 0.189981 35.7993C0.189981 36.0811 0.338688 36.3394 0.581316 36.4724C0.823943 36.6133 1.12136 36.6133 1.36399 36.4724L21.3455 24.8185L14.1137 17.5866L0.166501 31.5259Z" fill="url(#paint3_linear_4406_2034)"/><defs><linearGradient id="paint0_linear_4406_2034" x1="0.0334473" y1="18.3158" x2="31.972" y2="18.3158" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#63BE6B"/><stop offset="0.506" stop-color="#5BBC6A"/><stop offset="1" stop-color="#4AB96A"/></linearGradient><linearGradient id="paint1_linear_4406_2034" x1="0.0249224" y1="18.313" x2="31.9479" y2="18.313" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3EC6F2"/><stop offset="1" stop-color="#45AFE3"/></linearGradient><linearGradient id="paint2_linear_4406_2034" x1="0.0468809" y1="18.322" x2="31.963" y2="18.322" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FAA51A"/><stop offset="0.387" stop-color="#FAB716"/><stop offset="0.741" stop-color="#FAC412"/><stop offset="1" stop-color="#FAC80F"/></linearGradient><linearGradient id="paint3_linear_4406_2034" x1="0.169948" y1="27.082" x2="21.3452" y2="27.082" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EC3B50"/><stop offset="1" stop-color="#E7515B"/></linearGradient></defs></svg>
```

Rating star:
```html
<svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
```

Tabbed preview area:
- Sits below the hero grid.
- Source preview wrapper classes: `pt-4 md:pt-6`.
- Tab row is horizontally scrollable on small screens with hidden scrollbar.
- Tab row must be left-aligned with the browser preview shell/content column.
- Do not center the tab row inside the available width.
- On desktop, the first tab starts at the left edge of the preview area, not in the middle.
- Use `justify-content: flex-start` or the project's equivalent.
- Use accessible tab semantics.
- Default active tab: Dashboard.
- Tabs in order:
  - Dashboard, chart/bars icon.
  - Workspace, briefcase icon.
  - Payment, wallet/card icon.
  - Analytics, pie chart icon.
  - Chat, chat bubbles icon.
  - Ecommerce, shopping bag icon.
- Tab buttons:
  - Rounded full pill.
  - Inline-flex, centered, gap `8px`.
  - Source tab row classes: `hs-scroll-nav-body flex gap-1 snap-x snap-mandatory overflow-x-auto [&::-webkit-scrollbar]:hidden p-0.5`.
  - Source tab button scale/layout classes: `snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap rounded-full`.
  - Tab token roles: foreground/control text, active subtle surface, hover subtle surface, and focus subtle surface. Use the destination project's state pattern and token classes.
  - If the destination uses Preline/HS tabs, the active-state variant may use `hs-tab-active:` with the destination active surface token. If it does not use HS tabs, use the project's normal selected-state class or state binding instead.
  - Tab text and tab icons must use the project's foreground/control text color, not muted or secondary text.
  - Inactive tabs are still dark/foreground text in light mode, matching the reference.
  - Active tab text remains foreground/dark text; only the pill background changes.
  - Dark mode tab text should use the project foreground/near-white control text token, not a low-contrast muted token.
  - Active background: use the project's muted/secondary surface token; if the project is blank, use a Preline-like light gray around `#e5e7eb`.
  - Inactive background: transparent.
  - Hover/focus background: use the project's hover/subtle surface token; if the project is blank, use a Preline-like very light gray.
  - Dark mode must define active, hover, and inactive tab states.

Required script/interaction behavior:
- The source tab behavior is package-backed: Preline `HSTabs` drives the tab switching, Preline `HSScrollNav` centers the active tab in the scrollable strip, and a debounced resize handler keeps the active tab visible. Follow the Behavior runtime rule above: use a destination tab/scroll primitive only when it preserves this geometry, state, and accessibility; otherwise install/use Preline `HSTabs` and `HSScrollNav`. Only under an explicit dependency prohibition implement scoped client-side tab state with the same behavior.
- Clicking a tab updates the active preview panel image.
- Keep `aria-selected`, active tab styling, and hidden panel state in sync.
- On small screens only, when the tab strip overflows, scroll the active tab into view as needed.
- On desktop, do not center the active tab or the tab row; keep the full tab group left-aligned.
- On window resize, debounce about `100ms` and keep the active tab visible without changing the desktop left alignment.
- When tab selection happens and the tab strip is lower on the page, smoothly scroll the page to the tab strip area without a harsh jump.
- Do not silently replace this behavior with a static first tab, CSS-only toggles, or a simplified approximation; the dependency ladder in the Behavior runtime rule decides what powers it.

Browser-style preview shell:
- Source browser outer wrapper classes: `space-y-2`.
- Source browser shell scale/layout classes: `p-1.5 md:p-3 border rounded-xl shadow-lg`.
- Browser shell token roles: translucent card/surface background and subtle border. Use the destination card/surface and border token classes, such as `bg-card/40` and `border-border/50` when those fit the project.
- Source browser header classes: `mb-1 h-4 md:h-6 flex items-center`.
- Browser dots:
  - Three circles: red, yellow, green.
  - Source dots wrapper classes: `flex gap-x-1.5 md:gap-x-2 px-2.5 md:px-3.5`.
  - Source dot classes: `size-2.5 md:size-3 bg-red-400 border border-red-500 rounded-full shadow-inner dark:bg-red-600 dark:border-red-600`, with yellow and green equivalents.
- Preview image:
  - Use the exact tab image URLs listed above.
  - Render as normal images.
  - Full width inside the browser shell.
  - Preserve original aspect ratio.
  - Rounded `8px`.
  - Do not crop, distort, blur, redraw, or replace the images.

Responsive behavior:
- Around `375px` wide:
  - Single-column layout.
  - Download panel hidden.
  - Heading uses `text-4xl`.
  - Paragraph uses `text-sm` and remains dark enough to match reference.
  - Buttons use `text-[13px]`, matching the source.
  - Tabs overflow horizontally.
  - Browser shell fills container width.
- Around `1440px` wide:
  - Container uses `max-w-6xl`.
  - Heading uses `lg:text-6xl`.
  - Download panel visible on the right, bottom-aligned.
  - Browser shell fills the source `max-w-6xl` container.

Final side-by-side QA:
- Compare against the reference screenshot.
- The paragraph must be dark/foreground, not pale muted text.
- The download panel must be bottom-aligned in the right column.
- The tab row must be left-aligned with the preview shell, not centered.
- Tab labels and icons must be dark/foreground control text, not muted/secondary text.
- Brand icons must use the exact SVGs above and render with `size-4`.
- The star must be small, filled, and foreground-colored.
- Review count must sit inline on the right next to star + rating.
- Review count must not appear below the app name.
- The tab preview must use the real hosted Preline images from `preline.co`.
- Dark mode must use the dark hosted Preline images.
- Generated code should be Tailwind-first: use utility classes in the markup, reuse existing project classes only if they already exist, and avoid new component classes for one-off block styling.
- In Tailwind-based projects, generated code should preserve the original Tailwind scale classes instead of converting them to arbitrary bracket classes.
- Generated code should use one coherent destination token vocabulary. It should not mix Preline-only token classes such as `text-muted-foreground-1` or `bg-layer` with another Tailwind theme unless those tokens already exist in the destination project.
- In tokenized Tailwind projects, generated code uses semantic token classes for semantic color roles and does not mix in raw palette classes such as `text-gray-900`, `bg-white`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600`.
- Generated code should use semantic project tokens and should not be full of inline styles, raw arbitrary color utilities, or repeated raw hex/rgb values.
- No unrelated Tailwind UI sample sections, testimonials, CTAs, page headers, footers, analytics cards, or additional demo blocks are added.
- The hero composition, spacing, download-app block, tabs, and browser shell should match the reference closely.

<div class="relative bg-[url(../../assets/img/pro/startup/img11.webp)] dark:bg-[url(../../assets/img/pro/startup-dark/img11.webp)] bg-no-repeat bg-cover bg-top">
                      <div class="pt-10 md:pt-20 pb-14 md:pb-20 relative z-10">
                        <div class="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
                          
                          <div class="mb-4 md:mb-8 grid md:grid-cols-12 items-center gap-y-12 gap-x-5 lg:gap-x-8">
                            <div class="md:col-span-7">
                              <p class="mb-3 md:mb-4 font-mono text-sm text-muted-foreground-1">
                                Web App
                              </p>

<h1 class="font-bold text-foreground text-4xl md:text-5xl lg:text-6xl">
                                Supercharged Preline Experience
                              </h1>
          
                              <p class="mt-5 text-sm md:text-lg text-foreground">
                                Boost developer efficiency, enhance teamwork, and maximize tech investments with Preline.
                              </p>
        
                              <div class="mt-5 flex flex-wrap items-center gap-2">
                                <a class="py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover hover:shadow-none focus:outline-hidden focus:bg-primary-focus focus:shadow-none disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Try it free
                                </a>
                                <a class="group py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm font-semibold rounded-lg border border-transparent text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" href="#">
                                  Get a demo
                                  <svg class="shrink-0 size-3.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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
                                </a>
                              </div>
                            </div>

<div class="hidden md:block md:mt-auto md:col-span-5">
                              <div class="max-w-xs w-full md:ms-auto">
                                <p class="mb-2 font-mono text-sm text-muted-foreground-1">
                                  Download our app
                                </p>

<div class="flex flex-col -space-y-px">
                                  
                                  <a class="p-3 sm:p-4 flex items-center gap-x-2 bg-layer border border-layer-line first:rounded-t-xl last:rounded-b-xl hover:border-line-3 focus:outline-hidden focus:border-line-3" href="#">
                                    <svg class="shrink-0 size-4 text-foreground" width="75" height="86" viewBox="0 0 75 86" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.6565 20.8071C41.4061 20.8071 45.5728 18.9524 49.1564 15.2429C52.7399 11.5334 54.5318 7.21993 54.5318 2.30245C54.5318 1.76237 54.4891 0.994884 54.4038 0C53.7781 0.0852758 53.3088 0.156339 52.9959 0.213189C48.616 0.838545 44.7622 2.98465 41.4345 6.65142C38.107 10.3183 36.4432 14.241 36.4432 18.4195C36.4432 18.9026 36.5143 19.6986 36.6565 20.8071ZM53.6785 86C57.063 86 60.803 83.6834 64.8986 79.0501C68.9942 74.4168 72.1226 68.9734 74.2842 62.7199C66.2353 58.5698 62.2109 52.6148 62.2109 44.8547C62.2109 38.3738 65.4674 32.831 71.9805 28.2261C67.4583 22.5695 61.4857 19.7412 54.0625 19.7412C50.9339 19.7412 48.0756 20.2102 45.4875 21.1482L43.8664 21.7451L41.6906 22.5979C40.2685 23.138 38.9744 23.4081 37.8083 23.4081C36.8982 23.4081 35.7036 23.0953 34.2248 22.47L32.5609 21.7878L30.9825 21.1482C28.6787 20.1818 26.2043 19.6985 23.5593 19.6985C16.4774 19.6985 10.7892 22.0862 6.49456 26.8617C2.1999 31.637 0.0526123 37.9332 0.0526123 45.7501C0.0526123 56.7506 3.49397 66.9126 10.3768 76.236C15.1549 82.7453 19.5207 86 23.4739 86C25.152 86 26.8158 85.6731 28.4654 85.0193L30.5558 84.1666L32.2197 83.5696C34.5518 82.7453 36.6991 82.3331 38.6615 82.3331C40.7378 82.3331 43.1268 82.8591 45.8288 83.9107L47.1513 84.4224C49.91 85.4741 52.0859 86 53.6785 86Z" fill="currentColor"/></svg>
  
                                    <div class="grow">
                                      <ul class="flex flex-wrap items-center gap-1">
                                        <li class="inline-flex items-center gap-x-1">
                                          <span class="font-medium text-sm text-foreground">
                                            MacOS
                                          </span>
                                        </li>

<li class="inline-flex items-center gap-x-1">
                                          <span class="text-xs text-muted-foreground-1">
                                            1.2m reviews
                                          </span>
                                        </li>
                                      </ul>
                                    </div>
                                  </a>

<a class="p-3 sm:p-4 flex items-center gap-x-2 bg-layer border border-layer-line first:rounded-t-xl last:rounded-b-xl hover:border-line-3 focus:outline-hidden focus:border-line-3" href="#">
                                    <svg class="shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.536 0H6.464C2.892 0 0 2.892 0 6.464V25.54C0 29.108 2.892 32 6.464 32H25.54C29.108 32 32.004 29.108 32.004 25.536V6.464C32 2.892 29.108 0 25.536 0Z" fill="url(#paint0_linear_4403_2024)"/><path d="M15.864 7.352L16.512 6.232C16.912 5.532 17.804 5.296 18.504 5.696C19.204 6.096 19.44 6.988 19.04 7.688L12.796 18.496H17.312C18.776 18.496 19.596 20.216 18.96 21.408H5.72C4.912 21.408 4.264 20.76 4.264 19.952C4.264 19.144 4.912 18.496 5.72 18.496H9.432L14.184 10.26L12.7 7.684C12.3 6.984 12.536 6.1 13.236 5.692C13.936 5.292 14.82 5.528 15.228 6.228L15.864 7.352ZM10.248 22.908L8.848 25.336C8.448 26.036 7.556 26.272 6.856 25.872C6.156 25.472 5.92 24.58 6.32 23.88L7.36 22.08C8.536 21.716 9.492 21.996 10.248 22.908ZM22.304 18.504H26.092C26.9 18.504 27.548 19.152 27.548 19.96C27.548 20.768 26.9 21.416 26.092 21.416H23.988L25.408 23.88C25.808 24.58 25.572 25.464 24.872 25.872C24.172 26.272 23.288 26.036 22.88 25.336C20.488 21.188 18.692 18.084 17.5 16.016C16.28 13.912 17.152 11.8 18.012 11.084C18.968 12.724 20.396 15.2 22.304 18.504Z" fill="white"/><defs><linearGradient id="paint0_linear_4403_2024" x1="16.002" y1="0" x2="16.002" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18BFFB"/><stop offset="1" stop-color="#2072F3"/></linearGradient></defs></svg>
  
                                    <div class="grow">
                                      <ul class="flex flex-wrap items-center gap-1">
                                        <li class="inline-flex items-center gap-x-1">
                                          <span class="font-medium text-sm text-foreground">
                                            App Store
                                          </span>
                                        </li>

<li class="inline-flex items-center gap-x-1">
                                          <span class="text-xs text-muted-foreground-1">
                                            367k reviews
                                          </span>
                                        </li>
                                      </ul>
                                    </div>
                                  </a>

<a class="p-3 sm:p-4 flex items-center gap-x-2 bg-layer border border-layer-line first:rounded-t-xl last:rounded-b-xl hover:border-line-3 focus:outline-hidden focus:border-line-3" href="#">
                                    <svg class="shrink-0 size-4" width="32" height="37" viewBox="0 0 32 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5159 11.1765L1.20745 0.140891C0.964824 1.05128e-05 0.659583 0.00783721 0.424782 0.148718C0.182154 0.289598 0.0334473 0.540052 0.0334473 0.821813C0.0334473 0.821813 0.041274 1.83928 0.0491007 3.5142L14.1137 17.5788L20.5159 11.1765Z" fill="url(#paint0_linear_4406_2034)"/><path d="M0.0491007 3.5142C0.0725807 9.5564 0.143021 24.2236 0.174328 31.5259L14.1215 17.5788L0.0491007 3.5142Z" fill="url(#paint1_linear_4406_2034)"/><path d="M31.5672 17.4927L20.5159 11.1765L14.1058 17.5788L21.3377 24.8106L31.575 18.8467C31.8177 18.7058 31.9664 18.4475 31.9664 18.1736C31.9664 17.8918 31.8098 17.6336 31.5672 17.4927Z" fill="url(#paint2_linear_4406_2034)"/><path d="M0.166501 31.5259C0.182154 34.1322 0.189981 35.7993 0.189981 35.7993C0.189981 36.0811 0.338688 36.3394 0.581316 36.4724C0.823943 36.6133 1.12136 36.6133 1.36399 36.4724L21.3455 24.8185L14.1137 17.5866L0.166501 31.5259Z" fill="url(#paint3_linear_4406_2034)"/><defs><linearGradient id="paint0_linear_4406_2034" x1="0.0334473" y1="18.3158" x2="31.972" y2="18.3158" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#63BE6B"/><stop offset="0.506" stop-color="#5BBC6A"/><stop offset="1" stop-color="#4AB96A"/></linearGradient><linearGradient id="paint1_linear_4406_2034" x1="0.0249224" y1="18.313" x2="31.9479" y2="18.313" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3EC6F2"/><stop offset="1" stop-color="#45AFE3"/></linearGradient><linearGradient id="paint2_linear_4406_2034" x1="0.0468809" y1="18.322" x2="31.963" y2="18.322" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FAA51A"/><stop offset="0.387" stop-color="#FAB716"/><stop offset="0.741" stop-color="#FAC412"/><stop offset="1" stop-color="#FAC80F"/></linearGradient><linearGradient id="paint3_linear_4406_2034" x1="0.169948" y1="27.082" x2="21.3452" y2="27.082" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EC3B50"/><stop offset="1" stop-color="#E7515B"/></linearGradient></defs></svg>
  
                                    <div class="grow">
                                      <ul class="flex flex-wrap items-center gap-1">
                                        <li class="inline-flex items-center gap-x-1">
                                          <span class="font-medium text-sm text-foreground">
                                            Google Play
                                          </span>
                                        </li>

<li class="inline-flex items-center gap-x-1">
                                          <span class="text-xs text-muted-foreground-1">
                                            975k reviews
                                          </span>
                                        </li>
                                      </ul>
                                    </div>
                                  </a>
                                  
                                </div>
                                
                              </div>
                            </div>
                            
                          </div>

<div class="space-y-2">
                            <div id="hs-pro-hero-tabs-scroll" class="relative pt-4 md:pt-6 overflow-hidden" data-hs-scroll-nav>
                              
                              <nav id="hs-pro-hero-tabs" class="hs-scroll-nav-body flex gap-1 snap-x snap-mandatory overflow-x-auto [&::-webkit-scrollbar]:hidden p-0.5" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                                <button type="button" class="hs-tab-active:bg-surface-active snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap text-surface-foreground rounded-full hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-dth-item-dashboard" aria-selected="true" data-hs-tab="#hs-pro-tabs-dth-dashboard" aria-controls="hs-pro-tabs-dth-dashboard" role="tab" >
                                  <svg class="shrink-0 size-4" 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 16v5"/><path d="M16 14v7"/><path d="M20 10v11"/><path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15"/><path d="M4 18v3"/><path d="M8 14v7"/></svg> Dashboard
                                </button>
                                <button type="button" class="hs-tab-active:bg-surface-active snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap text-surface-foreground rounded-full hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dth-item-workspace" aria-selected="false" data-hs-tab="#hs-pro-tabs-dth-workspace" aria-controls="hs-pro-tabs-dth-workspace" role="tab" >
                                  <svg class="shrink-0 size-4" 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 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg> Workspace
                                </button>
                                <button type="button" class="hs-tab-active:bg-surface-active snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap text-surface-foreground rounded-full hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dth-item-payment" aria-selected="false" data-hs-tab="#hs-pro-tabs-dth-payment" aria-controls="hs-pro-tabs-dth-payment" role="tab" >
                                  <svg class="shrink-0 size-4" 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="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/></svg> Payment
                                </button>
                                <button type="button" class="hs-tab-active:bg-surface-active snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap text-surface-foreground rounded-full hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dth-item-analytics" aria-selected="false" data-hs-tab="#hs-pro-tabs-dth-analytics" aria-controls="hs-pro-tabs-dth-analytics" role="tab" >
                                  <svg class="shrink-0 size-4" 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="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg> Analytics
                                </button>
                                <button type="button" class="hs-tab-active:bg-surface-active snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap text-surface-foreground rounded-full hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dth-item-chat" aria-selected="false" data-hs-tab="#hs-pro-tabs-dth-chat" aria-controls="hs-pro-tabs-dth-chat" role="tab" >
                                  <svg class="shrink-0 size-4" 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="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg> Chat
                                </button>
                                <button type="button" class="hs-tab-active:bg-surface-active snap-start p-2 md:px-3 inline-flex justify-center items-center gap-x-2 border border-transparent text-xs sm:text-[13px] whitespace-nowrap text-surface-foreground rounded-full hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dth-item-ecommerce" aria-selected="false" data-hs-tab="#hs-pro-tabs-dth-ecommerce" aria-controls="hs-pro-tabs-dth-ecommerce" role="tab" >
                                  <svg class="shrink-0 size-4" 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="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg> Ecommerce
                                </button>
                              </nav>
                              
                            </div>

<div class="p-1.5 md:p-3 bg-layer/40 border border-line-inverse/10 rounded-xl shadow-lg">
                              
                              <div class="mb-1 h-4 md:h-6 flex items-center">
                                
                                <div class="flex gap-x-1.5 md:gap-x-2 px-2.5 md:px-3.5">
                                  <span class="size-2.5 md:size-3 bg-red-400 border border-red-500 rounded-full shadow-inner dark:bg-red-600 dark:border-red-600"></span>
                                  <span class="size-2.5 md:size-3 bg-yellow-400 border border-yellow-500 rounded-full shadow-inner dark:bg-yellow-600 dark:border-yellow-600"></span>
                                  <span class="size-2.5 md:size-3 bg-green-400 border border-green-500 rounded-full shadow-inner dark:bg-green-600 dark:border-green-600"></span>
                                </div>
                                
                              </div>
                              
    
                              
                              <div id="hs-pro-tabs-dth-dashboard" role="tabpanel" aria-labelledby="hs-pro-tabs-dth-item-dashboard">
                                <img class="dark:hidden rounded-lg" src="../../../assets/img/pro/startup/img1.webp" alt="Light Hero Image">
                                <img class="dark:block hidden rounded-lg" src="../../../assets/img/pro/startup-dark/img1.webp" alt="Light Hero Image">
                              </div>

<div id="hs-pro-tabs-dth-workspace" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dth-item-workspace">
                                <img class="dark:hidden rounded-lg" src="../../../assets/img/pro/startup/img2.webp" alt="Light Hero Image">
                                <img class="dark:block hidden rounded-lg" src="../../../assets/img/pro/startup-dark/img2.webp" alt="Light Hero Image">
                              </div>

<div id="hs-pro-tabs-dth-payment" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dth-item-payment">
                                <img class="dark:hidden rounded-lg" src="../../../assets/img/pro/startup/img3.webp" alt="Light Hero Image">
                                <img class="dark:block hidden rounded-lg" src="../../../assets/img/pro/startup-dark/img3.webp" alt="Light Hero Image">
                              </div>

<div id="hs-pro-tabs-dth-analytics" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dth-item-analytics">
                                <img class="dark:hidden rounded-lg" src="../../../assets/img/pro/startup/img4.webp" alt="Light Hero Image">
                                <img class="dark:block hidden rounded-lg" src="../../../assets/img/pro/startup-dark/img4.webp" alt="Light Hero Image">
                              </div>

<div id="hs-pro-tabs-dth-chat" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dth-item-chat">
                                <img class="dark:hidden rounded-lg" src="../../../assets/img/pro/startup/img5.webp" alt="Light Hero Image">
                                <img class="dark:block hidden rounded-lg" src="../../../assets/img/pro/startup-dark/img5.webp" alt="Light Hero Image">
                              </div>

<div id="hs-pro-tabs-dth-ecommerce" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dth-item-ecommerce">
                                <img class="dark:hidden rounded-lg" src="../../../assets/img/pro/startup/img6.webp" alt="Light Hero Image">
                                <img class="dark:block hidden rounded-lg" src="../../../assets/img/pro/startup-dark/img6.webp" alt="Light Hero Image">
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>
                      </div>
                    </div>

tabs.element.on('change', ({ el }) => {
                            scrollNav.element.centerElement(el);
                          });

window.addEventListener('resize', _.debounce(() => {
                            scrollNav.element.centerElement(tabs.element.current);
                          }, 100));

window.addEventListener('change.hs.tab', ({ detail }) => {
                            if (detail.payload.tabsId !== tabsId) return false;

const tabs = document.querySelector('#hs-pro-hero-tabs-scroll');

window.scrollTo({
                              top: tabs.offsetTop,
                              behavior: 'smooth'
                            });
                          });
                        })();
                      });
                    </script>

Open SaaS Startup homepage

Editorial Split Hero with Product Stage Free

Split intro sits above a daytime valley stage holding a product screenshot and a client logo row.

Create a responsive UI block named "Editorial Split Hero with Product Stage" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#editorial-split-hero-with-product-stage. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: editorial-split-hero-with-product-stage
- Source description: Split intro sits above a daytime valley stage holding a product screenshot and a client logo row.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/editorial-split-hero-with-product-stage.html (repo path: blocks/marketing/hero-sections/iframes/free/editorial-split-hero-with-product-stage.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-editorial-split-with-product-stage.html
- Source assets:
  - assets/img/hero/valley.webp
  - assets/img/pro/startup/img1.webp
  - assets/img/pro/startup-dark/img1.webp

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Three stacked regions inside `bg-background`: split intro, daytime valley stage with a product screenshot, then the Simple Logo Cloud marks. There is no navbar.
  - Intro is `grid lg:grid-cols-12 lg:items-start` in `max-w-340`: headline in `lg:col-span-7` (`font-semibold tracking-tight text-3xl sm:text-4xl lg:text-5xl`, default sans — do not use `font-serif`) reading `A quieter workspace for every paper you keep.`; copy plus two CTAs in `lg:col-span-5`.
  - Hero CTAs: solid primary `Get Started` (`bg-primary border-primary-line text-primary-foreground hover:bg-primary-hover`) and layer-outline `View Demo`, both `rounded-lg` with a trailing arrow-up-right icon. Do not convert them to pills or to `bg-foreground`.
  - Product stage is `relative overflow-hidden rounded-3xl`. Behind the screenshot sits a single cover still, `assets/img/hero/valley.webp` — the daytime valley photograph. Do not use `valley-night.webp` or a day-to-night crossfade on this block; night belongs only to the centered day-to-night hero.
  - No CSS tab. Do not animate this still. Do not replace it with a CSS gradient or waving mesh.
  - Stage inner padding is `px-6 pt-8 sm:px-10 sm:pt-12 lg:px-16 lg:pt-16` with no bottom padding. The screenshot is `w-full rounded-t-2xl shadow-xl` (sharp bottom corners) (`assets/img/pro/startup/img1.webp`, dark: `assets/img/pro/startup-dark/img1.webp`) so it sits flush on the bottom of the landscape. Stage shell is `rounded-3xl` on all corners. Do not round the screenshot bottom. Do not rebuild that UI in HTML.
  - Logo row reuses the seven brand SVGs from the Simple Logo Cloud (`partials/blocks/sources/pages/clients-base.html`) in `flex justify-between items-center gap-x-4`, `text-foreground`, with the same `hidden sm:block` / `hidden md:block` visibility. Do not replace them with wordmarks or other logos.
  - Fully static. No Preline JS plugins and no `data-hs-*` attributes.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="bg-background">
  
  <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
    <div class="grid lg:grid-cols-12 lg:gap-10 lg:items-start">
      <div class="lg:col-span-7">
        <h1 class="font-semibold tracking-tight text-foreground text-3xl sm:text-4xl lg:text-5xl">
          A quieter workspace for every paper you keep.
        </h1>
      </div>
      <div class="mt-6 lg:mt-0 lg:col-span-5">
        <p class="text-muted-foreground-1">Read, annotate, organise and connect your research in one place — so the thread between papers stays visible while you write.</p>
        <div class="mt-6 inline-flex flex-wrap items-center gap-3">
          <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover" href="#">
            Get Started
            <svg class="shrink-0 size-4" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
          </a>
          <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" href="#">
            View Demo
            <svg class="shrink-0 size-4" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
          </a>
        </div>
      </div>
    </div>
  </div>

<div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8">
    <div class="relative overflow-hidden rounded-3xl">
      <div class="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
        <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('../../../assets/img/hero/valley.webp')"></div>
      </div>

<div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-16 lg:pb-24">
    <div class="flex justify-between items-center gap-x-4">
      <svg class="w-14 md:w-20 h-auto text-foreground mx-auto" enable-background="new 0 0 2499 614" viewBox="0 0 2499 614" xmlns="http://www.w3.org/2000/svg"><path d="m431.7 0h-235.5v317.8h317.8v-235.5c0-45.6-36.7-82.3-82.3-82.3zm-308.9 0h-40.5c-45.6 0-82.3 36.7-82.3 82.3v40.5h122.8zm-122.8 196.2h122.8v122.8h-122.8zm392.5 317.8h40.5c45.6 0 82.3-36.7 82.3-82.3v-39.2h-122.8zm-196.3-121.5h122.8v122.8h-122.8zm-196.2 0v40.5c0 45.6 36.7 82.3 82.3 82.3h40.5v-122.8zm828-359.6h-48.1v449.4h254.5v-43h-206.4zm360.8 119c-93.7 0-159.5 69.6-159.5 169.6v11.5c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-21.5-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h243.1v-2.5s1.3-15.2 1.3-22.8c-.3-91.2-53.4-149.5-134.4-149.5zm-108.9 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm521.6-96.2v16.5c-20.3-34.2-58.2-55.7-97.5-55.7h-3.8c-86.1 0-145.6 68.4-145.6 168.4 0 101.3 57 169.6 141.8 169.6 67.1 0 97.5-40.5 107.6-58.2v49.4h45.6v-447h-46.8v157zm-98.8 257c-59.5 0-98.7-50.6-98.7-126.6 0-73.4 41.8-125.3 100-125.3 49.4 0 98.7 39.2 98.7 125.3 0 93.7-51.9 126.6-100 126.6zm424.1-250.7v2.5c-8.9-15.2-36.7-48.1-103.8-48.1-84.8 0-140.5 64.6-140.5 163.3s58.2 165.8 144.3 165.8c46.8 0 78.5-16.5 100-50.6v44.3c0 62-39.2 97.5-108.9 97.5-29.1 0-59.5-7.6-86.1-21.5l-2.5-1.3-17.7 39.2 2.5 1.3c32.9 16.5 69.6 25.3 105.1 25.3 74.7 0 154.4-38 154.4-143.1v-311.3h-46.8zm-93.7 241.8c-62 0-102.5-48.1-102.5-122.8 0-76 35.4-119 96.2-119 67.1 0 98.7 39.2 98.7 119 1.3 78.5-31.6 122.8-92.4 122.8zm331.7-286.1c-93.7 0-158.2 69.6-158.2 168.4v11.4c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-22.8-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h244.2v-2.5s1.3-15.2 1.3-22.8c0-89.9-53.2-148.2-135.5-148.2zm-107.6 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm440.6-127.9c-6.3-1.3-11.4-1.3-17.7-2.5-44.3 0-81 27.9-100 74.7v-72.2h-46.8l1.3 320.3v2.5h48.1v-135.4c0-20.3 2.5-41.8 8.9-60.8 15.2-49.4 49.4-81 89.9-81 5.1 0 10.1 0 15.2 1.3h2.5v-46.8z" fill="currentColor"/></svg>
      <svg class="w-14 md:w-20 h-auto text-foreground mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="-4.126838974812941 0.900767442746961 939.436838974813 230.18142889845947" width="2500" height="607"><path d="M667.21 90.58c-13.76 0-23.58 4.7-28.4 13.6l-2.59 4.82V92.9h-22.39v97.86h23.55v-58.22c0-13.91 7.56-21.89 20.73-21.89 12.56 0 19.76 7.77 19.76 21.31v58.8h23.56v-63c0-23.3-12.79-37.18-34.22-37.18zm-114.21 0c-27.79 0-45 17.34-45 45.25v13.74c0 26.84 17.41 43.51 45.44 43.51 18.75 0 31.89-6.87 40.16-21l-14.6-8.4c-6.11 8.15-15.87 13.2-25.55 13.2-14.19 0-22.66-8.76-22.66-23.44v-3.89h65.73v-16.23c0-26-17.07-42.74-43.5-42.74zm22.09 43.15h-44.38v-2.35c0-16.11 7.91-25 22.27-25 13.83 0 22.09 8.76 22.09 23.44zm360.22-56.94V58.07h-81.46v18.72h28.56V172h-28.56v18.72h81.46V172h-28.57V76.79zM317.65 55.37c-36.38 0-59 22.67-59 59.18v19.74c0 36.5 22.61 59.18 59 59.18s59-22.68 59-59.18v-19.74c-.01-36.55-22.65-59.18-59-59.18zm34.66 80.27c0 24.24-12.63 38.14-34.66 38.14S283 159.88 283 135.64v-22.45c0-24.24 12.64-38.14 34.66-38.14s34.66 13.9 34.66 38.14zm98.31-45.06c-12.36 0-23.06 5.12-28.64 13.69l-2.53 3.9V92.9h-22.4v131.53h23.56v-47.64l2.52 3.74c5.3 7.86 15.65 12.55 27.69 12.55 20.31 0 40.8-13.27 40.8-42.93v-16.64c0-21.37-12.63-42.93-41-42.93zM468.06 149c0 15.77-9.2 25.57-24 25.57-13.8 0-23.43-10.36-23.43-25.18v-14.72c0-15 9.71-25.56 23.63-25.56 14.69 0 23.82 9.79 23.82 25.56zm298.47-90.92L719 190.76h23.93l9.1-28.44h54.64l.09.28 9 28.16h23.92L792.07 58.07zm-8.66 85.53l21.44-67.08 21.22 67.08zM212.59 95.12a57.27 57.27 0 0 0-4.92-47.05 58 58 0 0 0-62.4-27.79A57.29 57.29 0 0 0 102.06 1a57.94 57.94 0 0 0-55.27 40.14A57.31 57.31 0 0 0 8.5 68.93a58 58 0 0 0 7.13 67.94 57.31 57.31 0 0 0 4.92 47A58 58 0 0 0 83 211.72 57.31 57.31 0 0 0 126.16 231a57.94 57.94 0 0 0 55.27-40.14 57.3 57.3 0 0 0 38.28-27.79 57.92 57.92 0 0 0-7.12-67.95zM126.16 216a42.93 42.93 0 0 1-27.58-10c.34-.19 1-.52 1.38-.77l45.8-26.44a7.43 7.43 0 0 0 3.76-6.51V107.7l19.35 11.17a.67.67 0 0 1 .38.54v53.45A43.14 43.14 0 0 1 126.16 216zm-92.59-39.54a43 43 0 0 1-5.15-28.88c.34.21.94.57 1.36.81l45.81 26.45a7.44 7.44 0 0 0 7.52 0L139 142.52v22.34a.67.67 0 0 1-.27.6l-46.3 26.72a43.14 43.14 0 0 1-58.86-15.77zm-12-100A42.92 42.92 0 0 1 44 57.56V112a7.45 7.45 0 0 0 3.76 6.51l55.9 32.28L84.24 162a.68.68 0 0 1-.65.06L37.3 135.33a43.13 43.13 0 0 1-15.77-58.87zm159 37l-55.9-32.28L144 70a.69.69 0 0 1 .65-.06l46.29 26.73a43.1 43.1 0 0 1-6.66 77.76V120a7.44 7.44 0 0 0-3.74-6.54zm19.27-29c-.34-.21-.94-.57-1.36-.81L152.67 57.2a7.44 7.44 0 0 0-7.52 0l-55.9 32.27V67.14a.73.73 0 0 1 .28-.6l46.29-26.72a43.1 43.1 0 0 1 64 44.65zM78.7 124.3l-19.36-11.17a.73.73 0 0 1-.37-.54V59.14A43.09 43.09 0 0 1 129.64 26c-.34.19-.95.52-1.38.77l-45.8 26.44a7.45 7.45 0 0 0-3.76 6.51zm10.51-22.67l24.9-14.38L139 101.63v28.74l-24.9 14.38-24.9-14.38z" fill="currentColor"/></svg>
      <svg class="w-14 md:w-20 h-auto text-foreground mx-auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2428 1002"><path fill-rule="evenodd" clip-rule="evenodd" d="M311.5 389.8h191.8l67 117.5 77.8-117.5h178.3L682.7 590.7l154 220.7H648.1l-77.8-135.8-91.7 135.8h-175l153.2-220.7-145.3-200.9Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1279.3 640.7H955.4c2.9 26 10 45.2 21 58a76.5 76.5 0 0 0 61.1 27.3c16 0 31.5-4 45.3-12 8.8-5 18.2-13.7 28.2-26.5l159.2 14.7c-24.4 42.4-53.7 72.7-88 91.2-34.5 18.2-83.8 27.5-148.2 27.5-55.8 0-99.7-7.9-131.8-23.6a193.2 193.2 0 0 1-79.6-75c-21-34.4-31.6-74.6-31.6-121 0-65.8 21.2-119.2 63.3-159.8 42.3-40.8 100.6-61.3 175-61.3 60.3 0 108 9.2 142.8 27.5a184 184 0 0 1 79.8 79.3c18.3 34.7 27.4 79.8 27.4 135.3v18.4ZM1115 563.3c-3.2-31.3-11.6-53.7-25.2-67.1a73.1 73.1 0 0 0-53.8-20.3 73.6 73.6 0 0 0-61.6 30.6c-9.7 12.7-16 31.6-18.5 56.8H1115Zm137-173.5h168.3l81.9 267.1 84.5-267H1750l-179.1 421.5h-143.3L1252 389.8Zm463.2 212c0-64.3 21.7-117.4 65-159 43.5-41.7 102-62.6 176-62.6 84.4 0 148.2 24.5 191.3 73.5 34.6 39.4 52 88 52 145.8 0 64.7-21.5 117.8-64.5 159.3-43 41.3-102.4 62-178.5 62-67.7 0-122.5-17.1-164.3-51.5-51.4-42.6-77-98.4-77-167.6Zm162-.5c0 37.7 7.5 65.5 22.8 83.4a72 72 0 0 0 57.3 27.1c23.4 0 42.5-9 57.4-26.7 15-17.8 22.5-46 22.5-85.4 0-36.4-7.6-63.7-22.7-81.5a70.5 70.5 0 0 0-56-26.7c-23.5 0-43 9-58.3 27-15.4 18.2-23 45.9-23 82.8ZM2363.1.1a64 64 0 0 1 0 127.9 64 64 0 0 1 0-128Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1912.1 671.5c220.3-135 326.4-327 334-419.2 8.7-106.7-71-235.9-358.9-238-345 3.6-790 158.3-1163.6 360.4h138c315.8-152.6 672-266.2 1000.8-275.2 287.7-7.8 304.4 149.2 302 199-3.6 71-74.7 234.5-252.3 373Zm-1315.7-222-36 22.7 10 17.5 26-40.1ZM419.8 567.5C212 717 57 873.2.8 1001.9 77.8 897.1 217 771 394.9 647l40.4-58.1-15.5-21.4Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2036.3 580a819.8 819.8 0 0 0 114.2-122.8l-3-3.5c-8-9.2-17-17.5-26.5-25-21 39.8-50 83.7-88.2 128.3 1.6 7 2.8 14.7 3.5 23Z" fill="currentColor"/></svg>
      <svg class="w-14 md:w-20 h-auto text-foreground mx-auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 33"><path d="M9.3 16.5C9.3 9 14.3 2.7 21.2.7a16.5 16.5 0 1 0 0 31.6c-6.9-2-11.9-8.3-11.9-15.8Z" fill="currentColor"/><path d="M21.7 10c4 0 7.4 2.8 8.5 6.4a8.9 8.9 0 1 0-17 0c1-3.6 4.4-6.3 8.5-6.3Z" fill="currentColor"/><path d="M24.8 19.4c0 3-2 5.5-4.8 6.3A6.6 6.6 0 1 0 20 13c2.8.8 4.8 3.4 4.8 6.4Z" fill="currentColor"/><path d="M39.6 13.5A4.4 4.4 0 0 1 44 9.1h1.3v2.7l-1 .2-1 .6-.2.4-.1.5h2.3v3H43v9.2h-3.4v-9.3h-1.3v-2.9h1.3ZM55.7 13.5h3.4v6.1a6.9 6.9 0 0 1-1.7 4.6 6 6 0 0 1-4.5 1.8c-1 0-1.8-.1-2.5-.5a6 6 0 0 1-3.2-3.4c-.3-.8-.4-1.6-.4-2.5v-6H50v6c0 .5 0 1 .2 1.3l.5 1c.2.4.5.6.9.8.3.2.8.3 1.2.3a2.6 2.6 0 0 0 2.1-1c.3-.3.4-.7.5-1l.2-1.4v-6ZM61.2 25.7V9.5h3.4v16.2h-3.4ZM66.9 25.7V9.5h3.3v16.2H67ZM78.5 21.2l3.3-7.7h3.7l-5.7 12.2h-2.7l-5.6-12.2H75l3.4 7.7ZM87 13.5h3.3v12.2H87V13.5Zm1.6-5 .8.1.6.4.4.7.2.7a1.9 1.9 0 0 1-.6 1.4l-.6.4a2 2 0 0 1-.8.1c-.5 0-1-.2-1.3-.5a2 2 0 0 1-.4-2.1c0-.3.2-.5.4-.7l.6-.4.7-.1ZM98.8 13.2a6.7 6.7 0 0 1 4.8 1.9 6.3 6.3 0 0 1 1.9 5.7h-9.8a3.3 3.3 0 0 0 3.2 2.2c.5 0 1-.1 1.4-.4.5-.2.9-.5 1.2-1h3.7c-.2.7-.5 1.3-1 1.8a6.1 6.1 0 0 1-3.3 2.3 7 7 0 0 1-6.9-1.6 6.1 6.1 0 0 1-2-4.5 6.1 6.1 0 0 1 2-4.5c.7-.6 1.4-1 2.2-1.4.8-.3 1.7-.5 2.6-.5Zm3.2 5.2c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.3-.7-2-.7s-1.4.3-2 .7c-.5.4-.9.9-1.1 1.5h6.3ZM123 13.5h3.6l-5 12.2H119l-2.5-6.5-2.5 6.5h-2.7l-5-12.2h3.6l2.7 7 2.8-7h2.2l2.8 7 2.7-7Z" fill="currentColor"/></svg>
      <svg class="hidden sm:block w-14 md:w-20 h-auto text-foreground mx-auto" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 88 22" xml:space="preserve" enable-background="new 0 0 88 22"><path d="M36.3 14.6a7.3 7.3 0 0 1-5.6 2.8c-3.8 0-6.8-2.7-6.8-6.2a6 6 0 0 1 2-4.5A6 6 0 0 1 30.5 5c2.2 0 4.3 1 5.6 2.8l-2.5 1.8a3.7 3.7 0 0 0-3.1-1.8 3.5 3.5 0 0 0-3.5 3.5c.1 2 1.7 3.5 3.6 3.5 1.3 0 2.5-.6 3.2-1.7l2.5 1.5z" fill="currentColor"/><path d="M37.7 0H40.8V17.1H37.7z" fill="currentColor"/><path d="M49.1 14.7c2 0 3.7-1.6 3.8-3.6-.1-2-1.8-3.6-3.8-3.6s-3.7 1.6-3.8 3.6c.1 2 1.7 3.6 3.8 3.6m0-9.8c1.7-.1 3.4.5 4.7 1.7 1.3 1.2 2 2.8 2.1 4.5a6.4 6.4 0 0 1-2.1 4.5 6.4 6.4 0 0 1-4.7 1.7c-3.8 0-6.8-2.7-6.8-6.2s3-6.2 6.8-6.2" fill="currentColor"/><path d="M55.3 5.1 59 5.1 62 11.5 65.2 5.1 68.6 5.1 62 17.8z" fill="currentColor"/><path d="M77.5 9.4a3 3 0 0 0-2.9-1.9c-1.3 0-2.5.7-3.1 1.9h6zm2 6.3a7 7 0 0 1-4.6 1.6c-3.8 0-6.8-2.7-6.8-6.2 0-1.7.7-3.3 1.9-4.5a6 6 0 0 1 4.6-1.7c1.7-.1 3.3.6 4.5 1.8s1.8 2.8 1.7 4.5v.8h-9.6a3.9 3.9 0 0 0 6.5 1.5l1.8 2.2zm2.8-5.3c0-2.9 2.2-5.2 5.7-5.2V8c-.7 0-1.5.3-2 .8s-.7 1.3-.6 2v6.3h-3.1v-6.7z" fill="currentColor"/><path d="M9.7 5.6a5 5 0 0 0-8.3-3.5C0 3.5-.4 5.6.3 7.4s2.5 3 4.5 3h4.9V5.6zm1.4 0a5 5 0 0 1 8.3-3.5c1.4 1.4 1.8 3.5 1.1 5.3s-2.5 3-4.5 3h-4.9V5.6zm0 11a5 5 0 0 0 8.3 3.5c1.4-1.4 1.8-3.5 1.1-5.3s-2.5-3-4.5-3h-4.9v4.8zm-6.3 3.5c1.9 0 3.5-1.5 3.5-3.5v-3.5H4.8c-1.9 0-3.5 1.5-3.5 3.5s1.6 3.5 3.5 3.5zm4.9-3.5a5 5 0 0 1-8.3 3.5C0 18.7-.4 16.6.3 14.8s2.5-3 4.5-3h4.9v4.8z" fill="currentColor"/></svg>
      <svg class="hidden md:block w-14 md:w-20 h-auto text-foreground mx-auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 32"><g clip-path="url(#a)" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.1 0A3.1 3.1 0 0 0 0 3.1v25.2c0 1.7 1.4 3.1 3.1 3.1h25.2c1.7 0 3.1-1.4 3.1-3.1V3C31.4 1.4 30 0 28.3 0H3Zm7.3 18H13c2 0 3.3-2 2.5-3.8l-2.7-6a2.4 2.4 0 0 1 4.4-2L24.7 23a2.5 2.5 0 1 1-4.6 2l-.5-1c-.4-1-1.4-1.6-2.5-1.6h-3c-1 0-2 .6-2.5 1.6l-.4 1a2.5 2.5 0 0 1-4.7-2L8 19.6c.4-1 1.3-1.6 2.4-1.6Zm10.7-9.4L22.5 5c0-.3.5-.3.6 0l.6 1.2.1.1 1.5.8c.2.1.2.5 0 .6L21.5 9a.3.3 0 0 1-.5-.4ZM7.4 13.4l3.6 1.3c.3.1.5-.1.4-.4l-1.3-3.6a.3.3 0 0 0-.6 0L8.7 12l-.1.2-1.3.6c-.2.1-.2.5 0 .6ZM42.1 26.7h-3l6.6-20.3c.1-.3.4-.4.6-.4h4.5c.2 0 .5.1.6.4L58 26.7h-3l-2-6.3H44l-2 6.3Zm2.9-9 2.8-8.6a.8.8 0 0 1 1.5 0l2.8 8.7H45Z"/><path d="M60.5 11.3v15.4h2.7V12c0-.3-.3-.6-.7-.6h-2ZM106 6h-2v20.7h2.7V6.6c0-.3-.3-.6-.7-.6ZM68.2 13.5a2.2 2.2 0 1 1-4.4 0 2.2 2.2 0 0 1 4.4 0ZM77.9 11.4c3.9.3 5.4 3.8 5.7 5.4h-2.9c-.3-2-2.7-3.9-5.7-2.8-3.3 1.2-3.2 4.8-3 6 .2 1.1.6 3 3 4 3 1.1 5.4-.8 5.7-2.8h2.9c-.3 1.7-1.8 5-5.7 5.4-4.3.5-6-1.5-6.8-2.4a7 7 0 0 1-1.4-2.8c-.8-3.5.4-6.5 1.4-7.6.7-1 2.5-2.8 6.8-2.4Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M87.8 13.8c-1 1-2.2 4-1.5 7.6.2.8.8 2 1.5 2.8.7.9 2.3 2.5 5.8 2.5 3.6 0 5.1-1.6 5.9-2.5a7 7 0 0 0 1.4-2.8c.8-3.5-.5-6.5-1.4-7.6-.7-1-2.3-2.5-5.9-2.5-3.5 0-5.1 1.6-5.8 2.5Zm1 6.3c-.2-1.3-.4-4.9 3-6a5.4 5.4 0 0 1 3.6 0c3.4 1.1 3.3 4.7 3.1 6-.2 1-.6 3-3 4a5.4 5.4 0 0 1-3.7 0c-2.4-1-2.9-3-3-4Z"/></g></svg>
      <svg class="hidden md:block w-14 md:w-20 h-auto text-foreground mx-auto" xmlns="http://www.w3.org/2000/svg" width="2500" height="1036" viewBox="0 -6.166 294.398 121.975"><path d="M12.139 90.511c-3.939 0-7.799-.479-10.938-1.292l.487-8.277c3.053 1.123 7.313 2.012 11.254 2.012 5.952 0 10.775-2.492 10.775-8.359C23.718 63.172 0 68.002 0 50.466c0-9.325 7.315-15.834 19.941-15.834 3.214 0 6.51.397 9.809.959l-.485 7.802c-3.132-.963-6.591-1.527-9.806-1.527-6.754 0-10.211 3.134-10.211 7.638 0 10.855 23.72 6.839 23.72 23.798-.005 9.973-7.882 17.209-20.829 17.209M54.106 90.264c-2.249 0-3.938-.076-6.03-.479v17.397h-8.601V49.746h8.12c0 2.094-.082 5.309-.484 7.476h.162c2.25-5.068 6.833-8.283 12.944-8.283 9.487 0 14.712 6.75 14.712 18.814.001 14.076-7.473 22.511-20.823 22.511m3.861-34.246c-6.434 0-9.892 7.558-9.892 14.384v12.312c1.852.562 3.86.804 6.272.804 6.833 0 11.497-4.182 11.497-14.958.001-8.039-2.49-12.542-7.877-12.542zM102.519 57.381C94.561 55.936 90.7 61.485 90.7 73.466v16.238h-8.606V49.746H90.3c0 2.246-.246 5.791-.809 8.844h.162c1.771-5.388 5.79-10.377 13.271-9.651l-.405 8.442M114.803 43.797c-3.056 0-5.55-2.414-5.55-5.393 0-2.971 2.494-5.385 5.55-5.385 2.974 0 5.467 2.333 5.467 5.385 0 2.979-2.493 5.393-5.467 5.393m4.26 45.907h-8.6V49.746h8.6v39.958zM154.449 89.704V63.975c0-4.982-1.374-7.875-5.951-7.875-6.03 0-10.457 6.345-10.457 14.302v19.303h-8.603V49.746h8.203c0 2.094-.162 5.546-.563 7.796l.082.075c2.33-5.141 7.157-8.68 13.91-8.68 9.084 0 11.9 5.711 11.9 12.787v27.979h-8.521M186.675 90.425c-8.524 0-11.1-3.294-11.1-12.214V56.417h-7.634v-6.671h7.634V37.04l8.523-2.333v15.039h10.532v6.671h-10.448v19.137c0 5.954 1.205 7.558 5.224 7.558 1.769 0 3.699-.24 5.226-.643v7.076c-2.331.486-5.307.88-7.957.88" fill="currentColor"/><path d="M233.712 78.636c11.72-15.086 20.938-32.809 20.938-45.537 0-6.652-4.765-11.295-10.978-14.823.123 13.831-4.668 46.263-9.96 60.36M195.279 115.809c27.47-9.188 67.29-30.598 94.985-49.725 2.324-1.6 4.135-3.085 4.135-5.685 0-4.519-8.275-10.576-12.292-12.987-21.792 22.653-65.163 56.596-86.828 68.397" fill="currentColor"/><path d="M220.76 96.567c16.938-11.709 41.545-33.739 49.873-45.727 1.963-2.82 3.416-4.454 3.416-7.405 0-4.839-5.644-8.382-9.703-10.849-9.727 22.924-31.579 51.469-43.586 63.981M236.192 64.087c2.191-14.477.903-31.952-1.894-42.913-1.521-5.969-6.901-12.706-11.88-14.812 6.526 18.522 12.128 44.898 13.774 57.725" fill="currentColor"/><path d="M231.367 43.779C226.235 29.91 213.446.998 194.633-6.165c12.247 13.516 30.417 40.337 36.734 49.944" fill="currentColor"/></svg>
    </div>
  </div>
  
</div>

Center-Aligned Hero with Day-to-Night Background Free

A centered intro sits on a full-bleed landscape that crossfades from daylight to night.

Create a responsive UI block named "Center-Aligned Hero with Day-to-Night Background" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#center-aligned-hero-with-day-night-background. Open this exact anchored block and inspect its Preview, HTML, and CSS tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: center-aligned-hero-with-day-night-background
- Source description: A centered intro sits on a full-bleed landscape that crossfades from daylight to night.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/center-aligned-hero-with-day-night-background.html (repo path: blocks/marketing/hero-sections/iframes/free/center-aligned-hero-with-day-night-background.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-center-aligned-day-night.html
- Source assets:
  - assets/img/hero/valley.webp
  - assets/img/hero/valley-night.webp

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Full-bleed photographic hero: a `relative overflow-hidden` section with two stacked cover stills of the same valley (day under night) plus a `bg-inverse/25` scrim. Copy sits in `relative z-10 max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-24 min-h-150 md:min-h-[80dvh] flex flex-col justify-center space-y-8`.
  - Day plate: `assets/img/hero/valley.webp`. Night plate: `assets/img/hero/valley-night.webp`. Both are `absolute inset-0 bg-cover bg-center bg-no-repeat`. Night starts at `opacity-0` and uses `motion-reduce:animate-none animate-[hs-hero-day-night_22s_ease-in-out_infinite]`.
  - The `@keyframes hs-hero-day-night` rule lives in the CSS tab, not in the HTML snippet: `0%, 18% { opacity: 0; }`, `42%, 62% { opacity: 1; }`, `86%, 100% { opacity: 0; }`. Do not inline a `<style>` block in the HTML.
  - Exactly four centered elements stack in this order: announcement pill, h1, paragraph, two CTAs. Do not draw flowers, stars, cabins, or other scene elements; the photographs already contain them.
  - The announcement pill reads `We just raised $20M` followed by a rounded chevron-right badge; the pill is frosted glass `bg-layer/40 hover:bg-layer/50 p-1 ps-4 rounded-full shadow-lg shadow-transparent backdrop-blur-xl` with `text-layer-foreground` and no border.
  - Heading is `Design with ease.` (`font-semibold text-foreground-inverse text-4xl sm:text-5xl md:text-6xl lg:text-7xl`) in `max-w-3xl text-center mx-auto`.
  - Paragraph is `Design smarter with AI that understands you. So you can take a breath.` rendered at `text-lg text-foreground-inverse/80`.
  - Two CTAs in `inline-flex flex-wrap justify-center items-center gap-3`: a layer-surface `Get Started` pill with a trailing chevron-right (`bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover rounded-full py-3 px-4`), then a ghost `Watch Demo` control with a leading play icon (`border-transparent text-foreground-inverse hover:bg-plain/10 rounded-full`).
  - Fully static; no Preline JS plugins and no `data-hs-*` attributes.

<div class="relative overflow-hidden">
  <div class="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('../../../assets/img/hero/valley.webp')"></div>
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-0 motion-reduce:animate-none animate-[hs-hero-day-night_22s_ease-in-out_infinite]" style="background-image: url('../../../assets/img/hero/valley-night.webp')"></div>
    <div class="absolute inset-0 bg-inverse/25"></div>
  </div>

<div class="relative z-10 max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-24 min-h-150 md:min-h-[80dvh] flex flex-col justify-center space-y-8">
    
    <div class="flex justify-center">
      <a class="group inline-flex items-center bg-layer/40 hover:bg-layer/50 p-1 ps-4 rounded-full shadow-lg shadow-transparent backdrop-blur-xl focus:outline-hidden focus:bg-layer/50" href="#">
        <p class="me-2 text-layer-foreground text-sm">
          We just raised $20M
        </p>
        <span class="group-hover:bg-layer/50 py-1.5 px-2.5 flex justify-center items-center gap-x-2 rounded-full bg-layer/50 font-semibold text-layer-foreground text-sm">
          <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
        </span>
      </a>
    </div>

<div class="max-w-3xl text-center mx-auto">
      <h1 class="block font-semibold text-foreground-inverse text-4xl sm:text-5xl md:text-6xl lg:text-7xl">
        Design with ease.
      </h1>
    </div>

<div class="max-w-3xl text-center mx-auto">
      <p class="text-lg text-foreground-inverse/80">Design smarter with AI that understands you. So you can take a breath.</p>
    </div>

<div class="text-center">
      <div class="inline-flex flex-wrap justify-center items-center gap-3">
        <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-hover" href="#">
          Get Started
          <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
        </a>
        <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-transparent text-foreground-inverse hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10" href="#">
          <svg class="shrink-0 size-4" 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"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          Watch Demo
        </a>
      </div>
    </div>
    
  </div>
</div>

Two-Column Hero with Tall Image Pro

A two-column hero places editorial copy beside a tall supporting image block.

Create a responsive Tailwind CSS hero block named "Two-Column Hero with Tall Image" that visually matches the source reference as closely as possible. Use the destination project's existing framework, styling conventions, semantic tokens, components, and icon conventions. Do not add external UI dependencies just to recreate this static block.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#two-column-hero-with-tall-image. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

The source block is from the Preline Digital Agency about page. Despite the catalog title, the actual source is not a normal left-copy/right-image split hero. It is a centered editorial hero with overlapping absolute image cards around the headline. Do not turn it into a generic two-column hero, side-by-side feature layout, landing page, header, or full website.

Full-width behavior is source-critical. The hero section itself spans the full viewport width on the background surface. The absolute image collage must be positioned from a full-width `relative` stage, not from a centered `max-w-*` container. Do not put `relative` and `max-w-7xl` on the same wrapper when that wrapper also contains the absolute image cards; otherwise the image coordinates are trapped inside the centered max-width. The live source has a full-width `relative z-10 min-h-130 lg:min-h-200` stage and only then a static `max-w-7xl mx-auto` alignment wrapper. Do not "simplify" those into one `relative mx-auto max-w-7xl` wrapper. In generated code, the safest structure is: full-width relative/min-height stage owns the absolute image wrappers, while the centered copy sits in its own max-width content wrapper. Do not wrap the whole hero in a site `.container`, `mx-auto max-w-*`, card, preview frame, or narrow section. The floating image collage should be able to reach toward the viewport sides, especially the left tall image and right middle image.

Use Tailwind utilities directly in the markup. Reuse existing project component classes only when they already exist. Do not create one-off classes such as `.hero-shell`, `.floating-card`, `.image-card`, or `@layer components` rules just to style this block.

For Tailwind-based projects, preserve source scale/layout utilities where they exist in the project, but keep them in the correct structural role: `relative`, `bg-background`, `min-h-130`, `lg:min-h-200`, `flex`, `flex-col`, `justify-center`, `max-w-7xl`, `mx-auto`, `px-4`, `xl:px-0`, `max-w-lg`, `lg:max-w-3xl`, `px-6`, `sm:px-10`, `text-center`, `mb-4`, `font-semibold`, `text-sm`, `uppercase`, `tracking-wider`, `text-4xl`, `lg:text-5xl`, `xl:text-6xl`, `leading-[1.1]`, `rounded-xl`, `scale-50`, `md:scale-75`, and `lg:scale-100`. Do not combine the full-width coordinate role (`relative`, `min-h-130`, `lg:min-h-200`, absolute image wrappers) with the centered content role (`max-w-*`, `mx-auto`, copy padding) on one wrapper. `max-w-7xl` is not a coordinate-stage class in this hero; if used at all, it must be static and must not be the positioned ancestor for the image collage. Do not convert standard source scale classes into arbitrary replacements such as `max-w-[1280px]`, `text-[36px]`, or repeated inline pixel styles. Bracket utilities are acceptable where the source actually uses bracket positioning values such as `top-[2%]`, `inset-s-[4%]`, `top-[25%]`, and `-bottom-[10%]`.

Preserve Tailwind scale/layout utilities, but map Preline token roles to the destination project's token vocabulary. Source token roles:
- Page/background surface: `bg-background`.
- Foreground text: `text-foreground`.
- Primary emphasis text: `text-primary`.
If the destination is a tokenized Tailwind project, use its semantic tokens, such as `bg-background`, `text-foreground`, and `text-primary` when available. Do not mix those with raw palette classes like `bg-white`, `text-gray-900`, `dark:bg-gray-950`, or `text-blue-600` for the same roles. If the destination is Bootstrap, map these roles to native Bootstrap/app variables such as `.bg-body`, `.text-body`, `.text-primary`, and the configured `--bs-primary`; do not hardcode Preline blue unless the destination primary is actually blue.

Use the source image assets exactly. Do not use placeholders, gradients, generated art, Unsplash alternatives, screenshots, or mock dashboard imagery.

Image assets and positions:
- Top/center-left small vertical image: `https://images.unsplash.com/photo-1719937206097-ae8528124815?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
  - Source wrapper: `block absolute top-[2%] inset-s-[4%] sm:inset-s-[20%] lg:inset-s-[30%] xl:inset-s-[34%] -z-1 scale-50 md:scale-75 lg:scale-100`
  - Inner width: `w-72`
- Left tall image: `https://images.unsplash.com/photo-1744836239470-f1cfcbb9d691?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
  - Source wrapper: `hidden md:block absolute top-[25%] lg:top-[35%] -inset-s-[5%] lg:-inset-s-[10%] xl:-inset-s-[4%] 2xl:inset-s-[2%] -z-1 scale-50 md:scale-75 lg:scale-100`
  - Inner width: `w-90`
- Top-right small image: `https://images.unsplash.com/photo-1744380623181-a675718f120c?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
  - Source wrapper: `hidden sm:block absolute top-0 lg:top-[12%] inset-e-[15%] xl:inset-e-[24%] 2xl:inset-e-[28%] -z-1 scale-50 md:scale-75 lg:scale-100`
  - Inner width: `w-40`
- Right middle image: `https://images.unsplash.com/photo-1720048171256-38c59a19fd37?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
  - Source wrapper: `hidden sm:block absolute top-[40%] inset-e-0 lg:-inset-e-[4%] xl:inset-e-[2%] 2xl:inset-e-[8%] -z-1 scale-50 md:scale-75 xl:scale-100`
  - Inner width: `w-50`
- Bottom large horizontal image: `https://images.unsplash.com/photo-1744922679571-e6d7e9a8804c?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
  - Source wrapper: `block absolute -bottom-[10%] lg:-bottom-[5%] inset-e-[35%] xl:inset-e-[40%] -z-1 scale-50 md:scale-75 xl:scale-100`
  - Inner width: `w-96`

All image cards:
- Images are real `<img>` elements, not CSS backgrounds.
- Each image sits inside a width wrapper and the image itself uses `rounded-xl`.
- Keep the cards visually behind the centered text using negative z-index behavior. The text content must remain readable and above images.
- Use the source image cropping and URL query parameters. Do not change to a different `w`, `fit`, or crop strategy unless the destination image component requires equivalent parameters.

Overall layout:
- Outer section is a full-width hero on the background surface.
- Source outer classes: `relative bg-background`.
- Full-width coordinate stage: `relative z-10 min-h-130 lg:min-h-200 flex flex-col justify-center`. This stage owns the absolute image wrappers and must not include `mx-auto`, `max-w-7xl`, `.container`, or any other centered width limit.
- Centered content wrapper: `relative z-10 max-w-lg lg:max-w-3xl mx-auto px-6 sm:px-10 text-center`.
- If the destination page needs an additional page/content alignment wrapper, keep it around text-only content or unrelated follow-up sections. Do not place the absolute image cards inside that max-width wrapper.
- The content sits centered both horizontally and vertically within the tall hero.
- Do not add a top navigation, CTA buttons, paragraph, stats, client logos, card grids, or other sections around this hero.

Recommended wrapper shape for this hero:
```
<section class="relative bg-background">
  <div class="relative z-10 flex min-h-130 flex-col justify-center lg:min-h-200">
    <div class="relative z-10 mx-auto max-w-lg px-6 text-center sm:px-10 lg:max-w-3xl">
      ...
    </div>

<div class="absolute ...">image card</div>
    <div class="absolute ...">image card</div>
  </div>
</section>
```
Forbidden generated shape:
```
<div class="relative z-10 mx-auto max-w-7xl ...">
  <div class="absolute ...">image card</div>
</div>
```
The forbidden shape is wrong because `relative` and `max-w-7xl` are on the same wrapper, so the absolute image positions are measured inside the centered max-width instead of the viewport-wide hero stage.

Visible copy:
- Eyebrow: `The Preline Story`
- Heading: `Our mission is to make work meaningful`
- The word `meaningful` is inside the heading and uses the primary text role.

Typography:
- Eyebrow source classes: `mb-4 font-semibold text-sm uppercase tracking-wider`; token role: foreground text.
- Heading source classes: `font-bold text-foreground text-4xl lg:text-5xl xl:text-6xl leading-[1.1]`.
- Primary emphasized word source class: `text-primary`.
- Do not add extra line breaks unless natural wrapping requires it at the viewport width. The heading should remain centered and balanced.

Responsive behavior:
- Mobile: centered text remains visible; only the first and bottom absolute images are visible. The left tall image is hidden until `md`; the two right images are hidden until `sm`.
- Small and medium screens: right-side images appear from `sm`, left tall image appears from `md`, and image wrappers scale from `scale-50` to `md:scale-75`.
- Large screens: hero uses `lg:min-h-200`; image wrappers use the large-screen positions and scale toward full size.
- Do not collapse the absolute image collage into a normal stacked image gallery on mobile.

Theme behavior:
- The block should work in light and dark mode through semantic destination tokens.
- The source image URLs do not change between light and dark.
- Background, foreground text, and primary text must come from project tokens so theme switching remains coherent.

Interactions:
- This block is static. Do not invent sliders, tabs, animations, hover cards, video controls, or scroll effects.

Final side-by-side QA:
- The result is a centered editorial hero with floating rounded image cards behind the text, not a split hero with copy on one side and one image on the other.
- The outer hero spans the full browser width. The full-width relative coordinate stage that contains the absolute image wrappers does not have `max-w-7xl`, `mx-auto`, or `.container`.
- Inspect the DOM: no absolute image wrapper is nested inside an element that combines `relative` with `max-w-7xl` or another centered max-width. Max-width wrappers may constrain the text copy or act as static alignment wrappers, but they must not be the positioned ancestor or coordinate system for the image collage.
- The text reads exactly `The Preline Story` and `Our mission is to make work meaningful`, with only `meaningful` using the primary text color.
- The five source images are used exactly and keep their source sizes, visibility breakpoints, and absolute positions.
- The content is above the images; images do not cover the heading.
- Tailwind scale utilities are preserved where available, and source token classes are mapped to the destination project's semantic tokens instead of hardcoded palette classes.
- No unrelated header, CTA, paragraph, footer, or extra marketing section was added.

<div class="relative bg-background">
                      <div class="relative z-10 min-h-130 lg:min-h-200 flex flex-col justify-center">
                        <div class="max-w-7xl mx-auto px-4 xl:px-0">
                          
                          <div class="relative z-10 max-w-lg lg:max-w-3xl mx-auto px-6 sm:px-10 text-center">
                            <p class="mb-4 font-semibold text-sm uppercase tracking-wider text-foreground">
                              The Preline Story
                            </p>

<h1 class="font-bold text-foreground text-4xl lg:text-5xl xl:text-6xl leading-[1.1]">
                              Our mission is to make work <span class="text-primary">meaningful</span>
                            </h1>
                          </div>

Open Digital Agency about page

Hero with Video Preview and Stats Pro

Intro copy, key figures, and a large video preview share one editorial hero layout.

Create a responsive hero section named "Hero with Video Preview and Stats" that visually matches the source reference as closely as possible. Use the destination project's existing framework, styling conventions, semantic tokens, components, icon conventions, and dark-mode strategy. Do not add external UI dependencies just to recreate this static block.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#hero-with-video-preview-and-stats. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

The source block is from the Preline Digital Agency case-study page. It is not a generic SaaS hero, split hero, testimonial section, stats grid, full case-study page, video player page, or landing page with navigation. Build only this hero: a top proof pill, an editorial headline, supporting paragraph, a large video-preview image panel, a small Uniqlo attribution card, and a centered play button.

Source structure:
- Primary source partial: `partials/pro/digital-agency/layouts-components/story-hero.html`.
- Preview iframe source: `blocks/marketing/hero-sections/iframes/pro/hero-with-video-preview-and-stats.html`.
- Related template context: `templates/websites/digital-agency/index.html?page=case-study.html`, linked from the block as `Open Digital Agency case study`. Use it only for fidelity to the digital-agency case-study hero. Do not recreate the rest of the case-study page.
- If the destination can import the source partial, use it. If it cannot, recreate the visible structure and behavior faithfully from the source.

Overall section:
- Source outer surface is `bg-background`.
- Top content wrapper uses `max-w-5xl mx-auto px-4 xl:px-0 pt-24 lg:pt-32 pb-12 md:pb-24`.
- Media wrapper below uses `max-w-6xl mx-auto px-4 xl:px-0`.
- Do not wrap the whole hero in a card, browser frame, centered narrow text-only container, generic section shell, or full-page template.
- Do not add a navbar, footer, CTA buttons, extra stats cards, client logo grid, testimonial carousel, modal, or unrelated case-study content.
- The source "stats" content is the compact proof pill text `100+ success stories`. Do not invent numeric metric cards such as revenue, users, conversion rate, or growth percentage.

Token and color mapping:
- Treat Preline source token classes as semantic roles, not literal class names to copy everywhere.
- Map `bg-background`, `bg-layer`, `border-layer-line`, `text-layer-foreground`, `text-foreground`, `text-muted-foreground-1`, `text-primary`, `bg-primary`, `border-primary-line`, `text-primary-foreground`, `text-foreground-inverse`, and primary hover/focus roles to the destination project's actual token vocabulary.
- In tokenized Tailwind or shadcn-style projects, prefer semantic classes such as `bg-background`, `bg-card`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `text-primary`, and `text-primary-foreground` when those match the role.
- In Bootstrap projects, map these roles to Bootstrap/app variables such as `.bg-body`, `.text-body`, `.text-muted`, `.text-primary`, `.btn-primary`, `--bs-primary`, and `--bs-primary-rgb`.
- Do not hardcode Preline blue, `blue-*` utilities, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- The red Uniqlo mark is a brand asset and must remain red/white. The three proof-pill brand marks keep their source brand colors.
- Use one token vocabulary consistently. Do not mix Preline token names, shadcn token names, raw Tailwind palette colors, inline hex values, and invented token classes in the same component.

Tailwind scale and layout:
- Preserve source scale utilities where the destination Tailwind setup supports them: `max-w-5xl`, `max-w-6xl`, `mx-auto`, `px-4`, `xl:px-0`, `pt-24`, `lg:pt-32`, `pb-12`, `md:pb-24`, `mb-3`, `py-1`, `px-3`, `gap-x-1.5`, `size-7`, `size-5`, `text-sm`, `rounded-full`, `text-5xl`, `md:text-6xl`, `max-w-4xl`, `mt-5`, `text-lg`, `h-100`, `md:h-150`, `rounded-xl`, `max-w-xs`, `p-6`, `size-8`, `mb-2`, `text-lg`, `sm:text-2xl`, and `size-16`.
- Do not replace standard source scale classes with arbitrary values such as `max-w-[1024px]`, `text-[48px]`, `h-[600px]`, or repeated inline styles.
- The source does use an arbitrary background image utility for the video preview. That is allowed because the source uses a CSS background image.

Proof pill:
- The pill sits above the heading, inside the top content wrapper.
- Source pill classes: `mb-3 py-1 px-3 inline-flex items-center gap-x-1.5 bg-layer border border-layer-line text-layer-foreground text-sm rounded-full`.
- The left side contains three overlapping brand icon bubbles with source classes `-ms-2 flex items-center -space-x-3`.
- Each icon bubble is `size-7 flex shrink-0 justify-center items-center bg-layer rounded-full`.
- Each brand icon SVG inside is `shrink-0 size-5`.
- Preserve the three source inline brand marks exactly from `story-hero.html`: Slack-style multicolor mark, orange partner mark, and App Store-style mark. Keep their source brand colors, path data, viewBox, gradients, and sizing. Do not replace them with text, initials, generic logos, Lucide icons, emojis, or placeholders.
- First proof-pill SVG:
```html
<svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333V8.53333Z" fill="#36C5F0"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654V23.4654Z" fill="#ECB22E"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.53081 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"></path></svg>
```
- Second proof-pill SVG:
```html
<svg class="shrink-0 size-5" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_12670_125260)"><path d="M20.9373 16.007C20.9379 17.1608 20.7297 18.3053 20.3229 19.385C19.2428 19.7917 18.0981 20.0002 16.9439 20.0004H16.9304C15.7419 19.9989 14.6032 19.7816 13.5524 19.3855C13.1454 18.3056 12.937 17.161 12.9374 16.007V15.993C12.9369 14.8394 13.1448 13.6952 13.5512 12.6155C14.6313 12.208 15.7762 11.9995 16.9306 12H16.9441C18.0983 11.9994 19.2431 12.2079 20.3231 12.6154C20.7299 13.6949 20.938 14.8392 20.9374 15.9929V16.0069L20.9373 16.007ZM32.7152 13.3334H23.3757L29.9793 6.72925C29.461 6.00115 28.8828 5.31757 28.2508 4.68563V4.68512C27.6188 4.05386 26.9354 3.47621 26.2077 2.95813L19.6036 9.56225V0.22275C18.7252 0.074991 17.8361 0.000484612 16.9454 0L16.9289 0C16.0229 0.0005 15.1356 0.0775 14.2708 0.22275V9.56225L7.66669 2.95813C6.93887 3.47607 6.25577 4.05413 5.62456 4.68625L5.62106 4.68875C4.99013 5.3199 4.41277 6.00242 3.89494 6.72925L10.4996 13.3334H1.16019C1.16019 13.3334 0.937439 15.0875 0.937439 15.9945V16.0055C0.937439 16.9125 1.01431 17.8014 1.16019 18.6666H10.4997L3.89506 25.2708C4.93402 26.7288 6.20869 28.0034 7.66669 29.0424L14.2708 22.4377V31.7778C15.1482 31.9248 16.0362 31.9991 16.9258 32H16.9484C17.8381 31.9992 18.7261 31.9249 19.6034 31.7778V22.4377L26.2082 29.0424C26.9357 28.5241 27.619 27.9463 28.2508 27.3149L28.2523 27.3134C28.8835 26.6814 29.4611 25.9982 29.9793 25.2708L23.3747 18.6666H32.7152C32.8606 17.8029 32.9364 16.9166 32.9374 16.0116V15.9884C32.9364 15.0834 32.8606 14.1971 32.7152 13.3334Z" fill="#FF4A00"></path></g><defs><clipPath id="clip0_12670_125260"><rect width="32" height="32" fill="white" transform="translate(0.937439)"></rect></clipPath></defs></svg>
```
- Third proof-pill SVG:
```html
<svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.536 0H6.464C2.892 0 0 2.892 0 6.464V25.54C0 29.108 2.892 32 6.464 32H25.54C29.108 32 32.004 29.108 32.004 25.536V6.464C32 2.892 29.108 0 25.536 0Z" fill="url(#paint0_linear_4403_2024)"></path><path d="M15.864 7.352L16.512 6.232C16.912 5.532 17.804 5.296 18.504 5.696C19.204 6.096 19.44 6.988 19.04 7.688L12.796 18.496H17.312C18.776 18.496 19.596 20.216 18.96 21.408H5.72C4.912 21.408 4.264 20.76 4.264 19.952C4.264 19.144 4.912 18.496 5.72 18.496H9.432L14.184 10.26L12.7 7.684C12.3 6.984 12.536 6.1 13.236 5.692C13.936 5.292 14.82 5.528 15.228 6.228L15.864 7.352ZM10.248 22.908L8.848 25.336C8.448 26.036 7.556 26.272 6.856 25.872C6.156 25.472 5.92 24.58 6.32 23.88L7.36 22.08C8.536 21.716 9.492 21.996 10.248 22.908ZM22.304 18.504H26.092C26.9 18.504 27.548 19.152 27.548 19.96C27.548 20.768 26.9 21.416 26.092 21.416H23.988L25.408 23.88C25.808 24.58 25.572 25.464 24.872 25.872C24.172 26.272 23.288 26.036 22.88 25.336C20.488 21.188 18.692 18.084 17.5 16.016C16.28 13.912 17.152 11.8 18.012 11.084C18.968 12.724 20.396 15.2 22.304 18.504Z" fill="white"></path><defs><linearGradient id="paint0_linear_4403_2024" x1="16.002" y1="0" x2="16.002" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18BFFB"></stop><stop offset="1" stop-color="#2072F3"></stop></linearGradient></defs></svg>
```
- Pill text is exactly `100+ success stories`.

Hero copy:
- Heading text is exactly `Globally recognized — and growing every day`.
- The words `Globally recognized` use the primary text role. The rest of the heading uses the foreground text role.
- Source heading classes: `font-semibold text-foreground text-5xl md:text-6xl`.
- Do not replace `—` with a hyphen in the rendered UI; the visual separator is an em dash.
- Supporting paragraph is exactly `Global brands see measurable success when they collaborate with us. From higher conversion and payment approval rates to faster processing speeds. Discover their stories here.`
- Paragraph wrapper is `max-w-4xl`.
- Paragraph source classes: `mt-5 text-muted-foreground-1 text-lg`.
- Do not add CTA buttons, author metadata, breadcrumbs, tags, or extra text.

Video preview panel:
- The media preview sits below the copy in the `max-w-6xl` wrapper.
- Source media classes: `h-100 md:h-150 bg-[url('...')] bg-center bg-cover bg-no-repeat relative rounded-xl`.
- Use this exact background image URL:
  `https://images.unsplash.com/photo-1743360543515-d3b506e6d3c2?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
- Keep it as the video preview image; do not replace it with a stock video embed, iframe, actual autoplay video, generated image, dark overlay, blurred placeholder, or alternate Unsplash photo.
- Preserve `bg-center`, `bg-cover`, `bg-no-repeat`, fixed source heights, and `rounded-xl`.
- Do not crop with an `<img>` element unless the destination framework cannot represent the source background image; if using `<img>`, preserve the same cover behavior, center crop, height, and rounded corners.

Uniqlo attribution card:
- The attribution card is absolutely positioned over the bottom-left of the video preview on mobile and bottom-right on medium screens and up.
- Source wrapper classes: `absolute bottom-0 inset-s-0 inset-e-0 max-w-xs p-6 md:inset-s-auto`.
- It is not a floating card with its own background, border, or shadow. It is text and logo directly over the media.
- Preserve the source red Uniqlo SVG exactly, including `size-8 mb-2`, red square, white paths, viewBox, and path data. Do not replace it with text, a generic logo, initials, or an image file.
- SVG:
```html
<svg class="shrink-0 size-8 mb-2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0.00012207 32H32.0001V0H0.00012207V32Z" fill="#E60012"/>
  <path d="M18.1935 14.1437H27.2813V12.1342H18.1935V14.1437ZM19.1982 6.40096H26.2765V4.37859H19.1982V6.40096ZM11.7939 4.37859H5.72034V6.40096H9.76512V12.1342H4.71882V14.1437H13.8131V12.1342H11.7939V4.37859ZM25.2589 25.6006H20.2061V19.877H25.2589V25.6006ZM27.2812 17.8482H18.1934V27.6247H27.2812V17.8482ZM5.72034 17.8482L4.6898 22.7429H6.70897L7.32018 19.877H11.3746L10.1877 25.6006H4.10439L3.70764 27.6246H11.7939L13.8131 17.8482H5.72034Z" fill="white"/>
</svg>
```
- Text line 1: `Uniqlo`, `text-lg font-semibold text-foreground-inverse sm:text-2xl`.
- Text line 2: `CTO & Head of Software Business Operations at Uniqlo`, `mt-1 text-foreground-inverse`.
- Keep text inverse/white over the image. Do not map these inverse roles to normal foreground if that would make the text dark on the image.

Play button:
- The play button is centered over the video preview.
- Source wrapper classes: `absolute top-1/2 inset-s-1/2 -translate-y-1/2 -translate-x-1/2`.
- Button classes: `size-16 flex shrink-0 justify-center items-center bg-primary border border-primary-line text-primary-foreground rounded-full hover:scale-115 focus:outline-hidden focus:scale-115 transition-all duration-200`.
- Use the destination primary token for the button surface, border, foreground, hover, and focus state.
- The play icon is a filled triangle using the source SVG:
```html
<svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg>
```
- The button does not need to open a modal unless the destination product already provides a video modal for this hero. Do not invent a modal, player controls, autoplay behavior, or a fake YouTube embed.

Responsive behavior:
- Mobile uses the same single-column hierarchy: proof pill, heading, paragraph, then full-width video preview.
- The video panel is `h-100` on mobile and `md:h-150` from medium screens up.
- The attribution card spans the bottom inset horizontally on mobile (`inset-s-0 inset-e-0`) and shifts to the end side from medium screens up (`md:inset-s-auto`).
- The play button remains visually centered over the media at all breakpoints.
- The heading should wrap naturally without clipping; do not force one-line heading text.
- No text or attribution content should overlap the play button in a way that harms readability.

Accessibility:
- Use a semantic `section` or hero landmark appropriate to the destination project.
- If the play button is interactive, give it an accessible name such as `Play video`.
- If the play button is decorative in a static mock, render it as a button only if it has an accessible label and a real or planned action.
- Decorative brand icons in the proof pill can be `aria-hidden="true"` if the pill text communicates the meaning.
- If the Uniqlo logo is informative, include accessible text through adjacent `Uniqlo` text; the SVG itself can be decorative.
- Ensure sufficient contrast for inverse text over the preview image.

Final QA checklist:
- The result is exactly one hero block, not the full Digital Agency case-study page.
- Top container uses the source spacing and `max-w-5xl`; media container uses `max-w-6xl`.
- Proof pill contains three overlapping brand icon bubbles and exact text `100+ success stories`.
- Heading reads `Globally recognized — and growing every day`, with only `Globally recognized` in primary color.
- Paragraph text matches the source exactly and stays muted.
- The media preview uses the exact Unsplash background URL, `bg-center`, `bg-cover`, source heights, and rounded-xl corners.
- The Uniqlo card is positioned over the bottom of the image, uses the exact red inline SVG, and keeps inverse text.
- The centered play button is a `size-16` primary circular button with the filled play triangle and hover/focus scale behavior.
- Primary roles adapt to the destination primary color and do not stay Preline blue unless the destination primary is blue.
- No extra stat cards, CTAs, modal overlays, video embeds, page nav, footer, testimonials, or unrelated content are introduced.

<div class="bg-background">
                      <div class="max-w-5xl mx-auto px-4 xl:px-0 pt-24 lg:pt-32 pb-12 md:pb-24">
                        
                        <div class="mb-3 py-1 px-3 inline-flex items-center gap-x-1.5 bg-layer border border-layer-line text-layer-foreground text-sm rounded-full">
                          <div class="-ms-2 flex items-center -space-x-3">
                            <div class="size-7 flex shrink-0 justify-center items-center bg-layer rounded-full">
                              <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333V8.53333Z" fill="#36C5F0"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654V23.4654Z" fill="#ECB22E"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.53081 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"></path></svg>
                            </div>
                            <div class="size-7 flex shrink-0 justify-center items-center bg-layer rounded-full">
                              <svg class="shrink-0 size-5" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_12670_125260)"><path d="M20.9373 16.007C20.9379 17.1608 20.7297 18.3053 20.3229 19.385C19.2428 19.7917 18.0981 20.0002 16.9439 20.0004H16.9304C15.7419 19.9989 14.6032 19.7816 13.5524 19.3855C13.1454 18.3056 12.937 17.161 12.9374 16.007V15.993C12.9369 14.8394 13.1448 13.6952 13.5512 12.6155C14.6313 12.208 15.7762 11.9995 16.9306 12H16.9441C18.0983 11.9994 19.2431 12.2079 20.3231 12.6154C20.7299 13.6949 20.938 14.8392 20.9374 15.9929V16.0069L20.9373 16.007ZM32.7152 13.3334H23.3757L29.9793 6.72925C29.461 6.00115 28.8828 5.31757 28.2508 4.68563V4.68512C27.6188 4.05386 26.9354 3.47621 26.2077 2.95813L19.6036 9.56225V0.22275C18.7252 0.074991 17.8361 0.000484612 16.9454 0L16.9289 0C16.0229 0.0005 15.1356 0.0775 14.2708 0.22275V9.56225L7.66669 2.95813C6.93887 3.47607 6.25577 4.05413 5.62456 4.68625L5.62106 4.68875C4.99013 5.3199 4.41277 6.00242 3.89494 6.72925L10.4996 13.3334H1.16019C1.16019 13.3334 0.937439 15.0875 0.937439 15.9945V16.0055C0.937439 16.9125 1.01431 17.8014 1.16019 18.6666H10.4997L3.89506 25.2708C4.93402 26.7288 6.20869 28.0034 7.66669 29.0424L14.2708 22.4377V31.7778C15.1482 31.9248 16.0362 31.9991 16.9258 32H16.9484C17.8381 31.9992 18.7261 31.9249 19.6034 31.7778V22.4377L26.2082 29.0424C26.9357 28.5241 27.619 27.9463 28.2508 27.3149L28.2523 27.3134C28.8835 26.6814 29.4611 25.9982 29.9793 25.2708L23.3747 18.6666H32.7152C32.8606 17.8029 32.9364 16.9166 32.9374 16.0116V15.9884C32.9364 15.0834 32.8606 14.1971 32.7152 13.3334Z" fill="#FF4A00"></path></g><defs><clipPath id="clip0_12670_125260"><rect width="32" height="32" fill="white" transform="translate(0.937439)"></rect></clipPath></defs></svg>
                            </div>
                            <div class="size-7 flex shrink-0 justify-center items-center bg-layer rounded-full">
                              <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.536 0H6.464C2.892 0 0 2.892 0 6.464V25.54C0 29.108 2.892 32 6.464 32H25.54C29.108 32 32.004 29.108 32.004 25.536V6.464C32 2.892 29.108 0 25.536 0Z" fill="url(#paint0_linear_4403_2024)"></path><path d="M15.864 7.352L16.512 6.232C16.912 5.532 17.804 5.296 18.504 5.696C19.204 6.096 19.44 6.988 19.04 7.688L12.796 18.496H17.312C18.776 18.496 19.596 20.216 18.96 21.408H5.72C4.912 21.408 4.264 20.76 4.264 19.952C4.264 19.144 4.912 18.496 5.72 18.496H9.432L14.184 10.26L12.7 7.684C12.3 6.984 12.536 6.1 13.236 5.692C13.936 5.292 14.82 5.528 15.228 6.228L15.864 7.352ZM10.248 22.908L8.848 25.336C8.448 26.036 7.556 26.272 6.856 25.872C6.156 25.472 5.92 24.58 6.32 23.88L7.36 22.08C8.536 21.716 9.492 21.996 10.248 22.908ZM22.304 18.504H26.092C26.9 18.504 27.548 19.152 27.548 19.96C27.548 20.768 26.9 21.416 26.092 21.416H23.988L25.408 23.88C25.808 24.58 25.572 25.464 24.872 25.872C24.172 26.272 23.288 26.036 22.88 25.336C20.488 21.188 18.692 18.084 17.5 16.016C16.28 13.912 17.152 11.8 18.012 11.084C18.968 12.724 20.396 15.2 22.304 18.504Z" fill="white"></path><defs><linearGradient id="paint0_linear_4403_2024" x1="16.002" y1="0" x2="16.002" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18BFFB"></stop><stop offset="1" stop-color="#2072F3"></stop></linearGradient></defs></svg>
                            </div>
                          </div>

100+ success stories
                        </div>
                        
    
                        <h1 class="font-semibold text-foreground text-5xl md:text-6xl">
                          <span class="text-primary">Globally recognized</span> — and growing every day
                        </h1>
                        <div class="max-w-4xl">
                          <p class="mt-5 text-muted-foreground-1 text-lg">
                            Global brands see measurable success when they collaborate with us. From higher conversion and payment approval rates to faster processing speeds. Discover their stories here.
                          </p>
                        </div>
                      </div>

<div class="max-w-6xl mx-auto px-4 xl:px-0">
                        <div class="h-100 md:h-150 bg-[url('https://images.unsplash.com/photo-1743360543515-d3b506e6d3c2?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-center bg-cover bg-no-repeat relative rounded-xl">
                          
                          <div class="absolute bottom-0 inset-s-0 inset-e-0 max-w-xs p-6 md:inset-s-auto">
                            <svg class="shrink-0 size-8 mb-2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M0.00012207 32H32.0001V0H0.00012207V32Z" fill="#E60012"/>
                              <path d="M18.1935 14.1437H27.2813V12.1342H18.1935V14.1437ZM19.1982 6.40096H26.2765V4.37859H19.1982V6.40096ZM11.7939 4.37859H5.72034V6.40096H9.76512V12.1342H4.71882V14.1437H13.8131V12.1342H11.7939V4.37859ZM25.2589 25.6006H20.2061V19.877H25.2589V25.6006ZM27.2812 17.8482H18.1934V27.6247H27.2812V17.8482ZM5.72034 17.8482L4.6898 22.7429H6.70897L7.32018 19.877H11.3746L10.1877 25.6006H4.10439L3.70764 27.6246H11.7939L13.8131 17.8482H5.72034Z" fill="white"/>
                            </svg>
                            <p class="text-lg font-semibold text-foreground-inverse sm:text-2xl">Uniqlo</p>
                            <p class="mt-1 text-foreground-inverse">CTO & Head of Software Business Operations at Uniqlo</p>
                          </div>
                          
      
                          
                          <div class="absolute top-1/2 inset-s-1/2 -translate-y-1/2 -translate-x-1/2">
                            <button type="button" class="size-16 flex shrink-0 justify-center items-center bg-primary border border-primary-line text-primary-foreground rounded-full hover:scale-115 focus:outline-hidden focus:scale-115 transition-all duration-200">
                              <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg>
                            </button>
                          </div>
                          
                        </div>
                      </div>
                    </div>

Open Digital Agency case study

Compact Intro Hero with Product Preview Pro

A compact intro block leads into supporting product imagery and a primary action row.

Create a responsive hero section named "Compact Intro Hero with Product Preview" that visually matches the source reference as closely as possible. Use the destination project's existing framework, styling conventions, semantic tokens, components, icon conventions, and dark-mode strategy. Do not add external UI dependencies just to recreate this static block.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#compact-intro-hero-with-product-preview. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

The source block is from the Preline SaaS Startup features page. It is not a generic centered hero, product screenshot hero, dashboard preview, feature grid, landing page with navigation, flow/payment header, step timeline, or full website. Build only this hero: a compact centered text intro on a dotted surface with several absolute floating product/app cards behind and around the copy.

Source structure:
- Primary source partial: `partials/pro/saas-startup/layouts-components/features-page-hero.html`.
- Preview iframe source: `blocks/marketing/hero-sections/iframes/pro/compact-intro-hero-with-product-preview.html`.
- Related template context: `templates/websites/saas-startup/index.html?page=features.html`, linked from the block as `Open SaaS Startup features page`. Use it only for fidelity to this features-page hero. Do not recreate the rest of the page.
- If the destination can import or read the source partial, use it. If it cannot, recreate the visible structure and behavior faithfully from the details below.
- Ignore all surrounding site/app chrome from screenshots or host pages, including Preline docs navigation, sidebars, account bars, flow headers, payment steppers, avatars, close buttons, and progress timelines. Those are not part of this block.

Overall section:
- Outer hero is `relative overflow-hidden bg-surface`.
- Add the subtle dotted background with a before pseudo-element: `before:absolute before:inset-0 before:bg-[radial-gradient(var(--color-surface-2)_1px,transparent_1px)] before:bg-size-[20px_20px] before:size-full`.
- Stage classes: `relative z-10 min-h-150 lg:min-h-200 flex flex-col justify-center`.
- Main container classes: `max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto`.
- Center copy wrapper: `max-w-sm md:max-w-xl mx-auto text-center`.
- The full-width stage is the coordinate system for all absolute cards. The `max-w-6xl` container is static in the source and must not become the positioned ancestor for the cards.
- Do not put `relative`, `isolate`, a transform, or an overflow clip on the `max-w-6xl` container if doing so traps the absolute cards inside the centered max-width. Keep `relative` on the full-width stage instead.
- Do not wrap the hero in a card, browser frame, normal page container, mock dashboard shell, split layout, or marketing page scaffold.
- Do not add a navbar, flow header, stepper, payment progress timeline, CTA row, footer, stats grid, client logos, testimonials, tabs, search box, or unrelated feature cards.

Recommended wrapper shape:
```html
<section class="relative overflow-hidden bg-surface before:absolute before:inset-0 before:bg-[radial-gradient(var(--color-surface-2)_1px,transparent_1px)] before:bg-size-[20px_20px] before:size-full">
  <div class="relative z-10 flex min-h-150 flex-col justify-center lg:min-h-200">
    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-sm text-center md:max-w-xl">...</div>
      <div class="absolute ... -z-1">floating card</div>
    </div>
  </div>
</section>
```

Forbidden wrapper shape:
```html
<section class="relative overflow-hidden ...">
  <div class="mx-auto max-w-6xl relative ...">
    <div class="absolute ...">floating card</div>
  </div>
</section>
```
The forbidden shape is wrong because the floating cards become positioned inside the centered `max-w-6xl` wrapper, making them cluster around the headline and overlap the Slack/card content with the text.

Visible copy:
- Eyebrow text: `Preline Build`
- Eyebrow classes: `mb-3 md:mb-4 font-mono text-sm`.
- Eyebrow token role: muted/secondary text.
- Heading text: `Do more with Preline in Web App`
- Heading classes: `font-bold text-foreground text-4xl md:text-5xl lg:text-6xl`.
- Supporting paragraph text: `You can use Preline for much more than just Web App.`
- Paragraph classes: `mt-5 text-sm md:text-lg text-foreground`.
- The paragraph is foreground-strength text in the source, not muted text.

Token and color mapping:
- Treat Preline token classes as semantic roles, not as literal colors to hardcode.
- Map `bg-surface`, `bg-card`, `bg-layer`, `bg-layer-hover`, `bg-layer-focus`, `bg-surface-1`, `bg-surface-hover`, `bg-surface-focus`, `border-layer-line`, `border-line-2`, `border-line-3`, `text-foreground`, `text-muted-foreground-1`, `text-muted-foreground-2`, `text-layer-foreground`, `text-surface-foreground`, `text-primary`, `fill-primary`, `text-primary-foreground`, `ring-card/50`, `ring-layer/50`, and tooltip roles to the destination project's actual token vocabulary.
- In tokenized Tailwind or shadcn-style projects, prefer semantic classes such as `bg-background`, `bg-card`, `bg-muted`, `border-border`, `text-foreground`, `text-muted-foreground`, `text-primary`, `fill-primary`, `bg-primary`, and `text-primary-foreground` when they match the source role.
- In Bootstrap projects, map roles to app variables and Bootstrap classes such as `.bg-body`, `.card`, `.border`, `.text-body`, `.text-muted`, `.text-primary`, `--bs-primary`, and `--bs-primary-rgb`.
- Do not hardcode Preline blue, `blue-*` utilities, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- The Preline logo badge inside the Isabella Cruz card uses the destination primary color through `fill-primary`/currentColor. It must adapt to the project's primary color.
- Preserve intentional non-primary accent colors from the source: yellow priority badge, purple total-users icon/glow, indigo Dropbox card, green progress bar, Slack brand logo colors, gradient Pro badge, and the actual image colors. These are accents/brand details, not the primary theme color.
- Use one destination token vocabulary consistently. Do not mix Preline token names, shadcn token names, raw Tailwind palette colors, inline hex values, and invented token classes in the same component unless a color is a required brand/icon accent.

Tailwind scale and layout:
- Preserve source scale utilities where the destination Tailwind setup supports them: `min-h-150`, `lg:min-h-200`, `max-w-6xl`, `px-4`, `sm:px-6`, `lg:px-8`, `max-w-sm`, `md:max-w-xl`, `text-4xl`, `md:text-5xl`, `lg:text-6xl`, `text-sm`, `md:text-lg`, `p-2.5`, `p-4`, `sm:p-5`, `p-5`, `w-64`, `w-48`, `w-32`, `w-80`, `w-96`, `size-5`, `size-7`, `size-8`, `size-10`, `size-11`, `rounded-xl`, `rounded-2xl`, and `shadow-lg`.
- Source arbitrary position utilities are important and should be preserved in Tailwind projects: `top-[2%]`, `inset-s-[4%]`, `sm:inset-s-[20%]`, `lg:inset-s-[33%]`, `top-[15%]`, `lg:top-[25%]`, `md:inset-s-[5%]`, `xl:inset-s-[14%]`, `lg:bottom-[15%]`, `inset-s-[10%]`, `lg:inset-s-[12%]`, `top-[5%]`, `inset-e-[15%]`, `lg:inset-e-[25%]`, `top-[35%]`, `xl:inset-e-[5%]`, `bottom-[10%]`, `lg:bottom-[20%]`, `inset-e-[2%]`, `-bottom-[15%]`, `inset-e-[35%]`, and `xl:inset-e-[40%]`.
- Do not replace source scale classes with arbitrary pixel utilities such as `max-w-[1152px]`, `text-[60px]`, `min-h-[800px]`, `rounded-[16px]`, or inline styles when standard Tailwind/source classes exist.

Floating cards:
- All floating cards are decorative/supporting product-preview elements around the centered copy. They sit behind the text with `-z-1`, use ringed card surfaces, rounded corners, and shadows.
- Keep the absolute wrappers as siblings of the centered copy inside the source markup, but make their positioned ancestor the full-width stage, not a constrained centered container. Do not collapse them into a normal grid, carousel, or stacked list.
- Hidden/blurred/opacity classes are source-critical; preserve the breakpoints and opacity/blur where listed.
- The centered copy must sit above the decorative card layer. If the destination's negative z-index behavior conflicts with its stacking context, implement the same relationship with an explicit low-z card layer and `relative z-10` copy wrapper rather than allowing cards to cover text.
- On desktop, non-blurred cards such as Slack and Isabella Cruz must flank the copy instead of sitting on top of the headline or paragraph. At common desktop widths, keep a clear visual gap between the main copy column and foreground cards; only the intentionally blurred background cards may pass behind the text.
- Do not use `left-1/2`, `right-1/2`, translate-centered positioning, or a manually centered cluster to place the floating cards. Use the source side-based `inset-s-*` and `inset-e-*` relationships.
- Do not make the Slack card a foreground overlay over the paragraph. In the source it appears to the right side of the hero composition, not centered over the copy.

Datatables Integration card:
- Position wrapper: `hidden lg:block absolute top-[2%] inset-s-[4%] sm:inset-s-[20%] lg:inset-s-[33%] -z-1 scale-75 lg:scale-100`.
- Card classes: `p-2.5 w-64 flex flex-col gap-y-2.5 bg-card ring-6 ring-card/50 rounded-2xl shadow-lg`.
- Title: `Datatables Integration`.
- Avatar row uses this image exactly:
  `https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80`
- Avatar name: `Daniel Hobbs`.
- Priority badge reads `Medium` with a star glyph; it uses yellow badge styling.
- Issue badges read `Feature` with a lightning glyph and `Docs` with a document glyph; they use layer/card token styling.
- Footer contains comment count `24`, attachment count `8`, and a progress bar at `100%` with green fill.

Total Users card:
- Position wrapper: `absolute top-[15%] lg:top-[25%] inset-s-0 md:inset-s-[5%] xl:inset-s-[14%] -z-1 scale-75 lg:scale-100`.
- Card classes: `relative w-64 overflow-hidden p-4 sm:p-5 bg-card ring-6 ring-card/50 rounded-2xl shadow-lg`.
- Include the soft purple source glow using `before:absolute before:top-0 before:inset-e-0 before:size-full before:bg-linear-to-br before:from-purple-100 before:via-transparent before:blur-xl dark:before:from-purple-800/30 dark:before:via-transparent`.
- Header icon is the users icon in a small layer surface with `text-purple-500`.
- Text: `Total Users` and value `356`.
- Avatar stack includes:
  - Lewis Clarke image: `https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80`
  - Initial avatar `L` for Lori Hunter.
  - Ella Lauda image: `https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80`

Dropbox billing card:
- Position wrapper: `absolute bottom-0 lg:bottom-[15%] inset-s-[10%] lg:inset-s-[12%] -z-1 scale-75 xl:scale-100 blur-xs`.
- Card classes: `relative w-48 overflow-hidden p-4 bg-indigo-200 ring-6 ring-layer/50 rounded-2xl shadow-lg dark:bg-indigo-900`.
- Keep the Dropbox mark and the abstract background SVG from the source, using indigo source accents. Do not recolor this card to primary.
- Text content:
  - `Dropbox`
  - `119.88 / yr`
  - `Due Nov 2`
  - Link/button `Cancel`

Preline account card:
- Position wrapper: `absolute top-0 lg:top-[5%] inset-e-[15%] lg:inset-e-[25%] -z-1 scale-75 lg:scale-100`.
- Card classes: `py-4 px-3 w-32 flex flex-col items-center gap-x-3 bg-card ring-6 ring-card/50 rounded-2xl shadow-lg`.
- Avatar image:
  `https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
- Overlay a small circular Preline logo badge at the lower end of the avatar. The logo paths use `fill-primary`, so the mark follows the destination primary color.
- Text: `Isabella Cruz` and `Preline account`.

Slack integration card:
- Position wrapper: `hidden md:block absolute top-[35%] inset-e-0 xl:inset-e-[5%] -z-1 scale-75 xl:scale-100`.
- Card classes: `p-5 w-80 space-y-4 flex flex-col bg-card ring-6 ring-card/50 rounded-2xl shadow-lg`.
- Header has the exact multicolor Slack logo from the source and a checkbox-style `Connected` control.
- Body text:
  - Title `Slack`
  - Description `Connect a slack workspace in order to setup automated notifications.`
  - Button `View integration`
- Keep Slack logo brand colors. Do not replace it with a Lucide icon or single-color primary icon.

Windrunner product card:
- Position wrapper: `absolute bottom-[10%] lg:bottom-[20%] opacity-50 inset-e-[2%] -z-1 scale-75 xl:scale-100 blur-xs`.
- Card classes: `p-2.5 w-64 flex flex-col gap-y-2.5 bg-card ring-6 ring-card/50 rounded-2xl shadow-lg`.
- Text:
  - `Windrunner`
  - `Color: White, Size: M`
  - Button `Rate product`
- Product image URL:
  `https://images.unsplash.com/photo-1506629082955-511b1aa562c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`

Daniel Hobbs profile card:
- Position wrapper: `hidden lg:block absolute -bottom-[15%] inset-e-[35%] xl:inset-e-[40%] -z-1 scale-75 xl:scale-100 blur-xs`.
- Card classes: `w-96 flex flex-col bg-card ring-6 ring-card/50 rounded-2xl shadow-lg`.
- Top banner is the source abstract SVG with cyan, orange, and blue shapes.
- Avatar image:
  `https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80`
- Badge: `Pro`, uppercase, `bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse`.
- Include the favorite star and overflow buttons from the source as small circular outline controls.
- Body:
  - Name `Daniel Hobbs`
  - Role: `Front-End Developer`
  - Phone: `-`
  - Email: `daniel@email.com`
  - Hourly price: `$120-$160`

Responsive behavior:
- Mobile keeps the centered text and only the source-visible decorative cards. Do not force all hidden desktop cards to display.
- The hero must keep `min-h-150` on small screens and `lg:min-h-200` on large screens so the floating cards have the same breathing room.
- Cards that are hidden at `md` or `lg` in the source should stay hidden until those breakpoints.
- Scale wrappers (`scale-75`, `lg:scale-100`, `xl:scale-100`) are part of the source layout and should remain.
- The centered copy must remain readable above decorative cards at all viewport widths. Floating cards should not overlap the heading or paragraph in a way that damages legibility.

Accessibility:
- Use a semantic `section` or hero landmark appropriate to the destination project.
- Decorative floating cards can be marked `aria-hidden="true"` if they are purely visual and duplicate no necessary content.
- Buttons that remain interactive should have accessible names. If a decorative card is `aria-hidden`, its nested buttons should not be focusable.
- Images in decorative cards can use empty alt text when the whole card is decorative; if the destination keeps cards accessible, use descriptive alt text such as `Daniel Hobbs avatar` or `Windrunner product image`.
- Preserve visible focus styles for any interactive controls that remain in the accessibility tree.

Final QA checklist:
- The result is exactly one SaaS Startup features-page hero block, not a full page.
- The outer section uses the dotted `bg-surface` background and the tall `min-h-150 lg:min-h-200` stage.
- Center copy reads exactly `Preline Build`, `Do more with Preline in Web App`, and `You can use Preline for much more than just Web App.`
- The main copy is centered in `max-w-sm md:max-w-xl`.
- Floating cards use the source absolute positions, breakpoints, scale, opacity, blur, rings, rounded corners, and shadows.
- The source card texts, image URLs, brand marks, product labels, and profile details are preserved.
- Primary-colored elements, especially the Preline logo badge, adapt to the destination primary color and do not stay Preline blue unless the project primary is blue.
- Purposeful brand/accent colors such as Slack, Dropbox/indigo, yellow priority, purple user icon, green progress, and gradient Pro badge are preserved.
- No extra navbar, CTA buttons, stats section, product screenshot, tabs, footer, or unrelated marketing content is introduced.

<div class="relative overflow-hidden bg-surface before:absolute before:inset-0 before:bg-[radial-gradient(var(--color-surface-2)_1px,transparent_1px)] before:bg-size-[20px_20px] before:size-full">
                      <div class="relative z-10 min-h-150 lg:min-h-200 flex flex-col justify-center">
                        <div class="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
                          
                          <div class="max-w-sm md:max-w-xl mx-auto text-center">
                            <p class="mb-3 md:mb-4 font-mono text-sm text-muted-foreground-1">
                              Preline Build
                            </p>

<h1 class="font-bold text-foreground text-4xl md:text-5xl lg:text-6xl">
                              Do more with Preline in Web App
                            </h1>
        
                            <p class="mt-5 text-sm md:text-lg text-foreground">
                              You can use Preline for much more than just Web App.
                            </p>
                          </div>

<div class="hidden lg:block absolute top-[2%] inset-s-[4%] sm:inset-s-[20%] lg:inset-s-[33%] -z-1 scale-75 lg:scale-100">
                            
                            <div class="p-2.5 w-64 flex flex-col gap-y-2.5 bg-card ring-6 ring-card/50 rounded-2xl shadow-lg">
                              <span class="block font-medium text-sm text-foreground">
                                Datatables Integration
                              </span>

<div class="flex items-center gap-x-1">
                                  <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                  <div class="grow">
                                    <span class="block text-[13px] text-foreground">
                                      Daniel Hobbs
                                    </span>
                                  </div>
                                </div>
                                
                              </div>

<div class="flex flex-wrap gap-1">
                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-yellow-200 bg-yellow-100 text-yellow-800 dark:border-yellow-500/20 dark:bg-yellow-500/10 dark:text-yellow-500">
                                  Medium 🌟
                                </span>
                              </div>

<div class="flex flex-wrap gap-1">
                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-layer-line text-layer-foreground">
                                  Feature ⚡️
                                </span>
                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-layer-line text-layer-foreground">
                                  Docs 📄
                                </span>
                              </div>

<div class="flex items-center">
                                <span class="flex justify-center items-center gap-x-1 text-xs text-muted-foreground-1">
                                  <svg class="shrink-0 size-3" 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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path></svg>
                                  24
                                </span>

<div class="ms-auto w-1/2 flex items-center gap-x-1 whitespace-nowrap">
                                  <div class="flex w-full h-1 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center rounded-full overflow-hidden bg-green-500 text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%;"></div>
                                  </div>
                                  <div class="w-10 text-end -mt-0.5">
                                    <span class="text-xs text-muted-foreground-1">100%</span>
                                  </div>
                                </div>
                                
                              </div>
                              
                            </div>
                            
                          </div>

<h2 class="text-sm md:text-base text-foreground">
                                  Total Users
                                </h2>

<div class="flex items-center -space-x-2">
                                    
                                    <div class="hs-tooltip [--placement:auto] hidden sm:inline-block hover:z-10">
                                      <img class="hs-tooltip-toggle shrink-0 size-7 border-2 border-card rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Lewis Clarke
                                      </span>
                                    </div>

<div class="hs-tooltip [--placement:auto] hidden sm:inline-block hover:z-10">
                                      <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-7 bg-surface-1 border-2 border-card text-layer-foreground text-xs font-medium uppercase rounded-full">
                                        L
                                      </span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Lori Hunter
                                      </span>
                                    </div>

<div class="hs-tooltip [--placement:auto] hidden sm:inline-block hover:z-10">
                                      <img class="hs-tooltip-toggle shrink-0 size-7 border-2 border-card rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Ella Lauda
                                      </span>
                                    </div>
                                    
                                  </div>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="absolute bottom-0 lg:bottom-[15%] inset-s-[10%] lg:inset-s-[12%] -z-1 scale-75 xl:scale-100 blur-xs">
                            
                            <div class="relative w-48 overflow-hidden p-4 bg-indigo-200 ring-6 ring-layer/50 rounded-2xl shadow-lg dark:bg-indigo-900">
                              <div class="relative z-10">
                                
                                <svg class="mb-2 shrink-0 size-8 text-indigo-700 dark:text-foreground-inverse" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M8 2L0 7.27424L8 12.471L15.9999 7.27424L8 2ZM23.9999 2L15.9999 7.27424L23.9999 12.471L31.9998 7.27424L23.9999 2ZM0 17.7451L8 23.0194L15.9999 17.7451L8 12.471L0 17.7451ZM23.9999 12.471L15.9999 17.7451L23.9999 23.0194L31.9998 17.7451L23.9999 12.471ZM8 24.7258L15.9999 30L23.9999 24.7258L15.9999 19.5291L8 24.7258Z" fill="currentColor"></path>
                                </svg>
                                
      
                                <h3 class="font-semibold text-sm text-foreground">
                                   Dropbox
                                </h3>

<div class="mt-5">
                                  <p class="font-semibold text-xl text-foreground">
                                     119.88 <span class="font-normal text-sm text-indigo-900 dark:text-indigo-100/50">/ yr</span>
                                  </p>
                                  <p class="text-xs text-indigo-900 dark:text-indigo-100/50">
                                     Due Nov 2
                                  </p>
                                  <div class="mt-4">
                                    <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-indigo-800 hover:text-indigo-600 disabled:opacity-50 disabled:pointer-events-none decoration-2 focus:outline-hidden focus:underline dark:text-indigo-100/50 dark:hover:text-indigo-100">
                                       Cancel
                                    </button>
                                  </div>
                                </div>
                              </div>

<div class="text-center">
                                <p class="font-medium text-foreground">
                                  Isabella Cruz
                                </p>

<p class="text-[13px] text-muted-foreground-1">
                                  Preline account
                                </p>
                              </div>
                            </div>
                            
                          </div>

<div>
                                  
                                  <label for="hs-pro-daicn1" class="relative py-2 px-2.5 w-full sm:w-auto block text-center sm:text-start rounded-lg cursor-pointer text-xs font-medium focus:outline-hidden">
                                    <input type="checkbox" id="hs-pro-daicn1" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 text-transparent rounded-lg cursor-pointer focus:ring-layer after:block after:size-full after:rounded-md checked:after:bg-surface-1 checked:text-transparent checked:bg-none focus:bg-surface-1 focus:ring-0 focus:ring-offset-0 checked:focus:after:bg-surface disabled:opacity-50 disabled:pointer-events-none" checked="">
                                    <span class="relative z-10 peer-checked:hidden text-foreground">
                                      Connect
                                    </span>
                                    <span class="relative z-10 justify-center items-center gap-x-1.5 hidden peer-checked:flex peer-checked:text-foreground text-foreground">
                                      <svg class="shrink-0 size-3.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                      Connected
                                    </span>
                                  </label>
                                  
                                </div>
                              </div>

<div>
                                <p class="font-medium text-foreground">
                                  Slack
                                </p>

<p class="mt-1 text-sm text-muted-foreground-1">
                                  Connect a slack workspace in order to setup automated notifications.
                                </p>
                              </div>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                View integration
                              </button>
                            </div>
                            
                          </div>

<div class="absolute bottom-[10%] lg:bottom-[20%] opacity-50 inset-e-[2%] -z-1 scale-75 xl:scale-100 blur-xs">
                            
                            <div class="p-2.5 w-64 flex flex-col gap-y-2.5 bg-card ring-6 ring-card/50 rounded-2xl shadow-lg">
                              <div class="h-full flex gap-x-3">
                                <div class="grow h-full flex flex-col">
                                  <div>
                                    <p class="font-medium text-sm text-foreground">
                                      Windrunner
                                    </p>
                                    <p class="mt-1 text-sm text-muted-foreground-1">
                                      Color: White, Size: M
                                    </p>
                                  </div>
                                  <div class="mt-2">
                                    <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                      Rate product
                                    </button>
                                  </div>
                                </div>
                                <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1506629082955-511b1aa562c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                              </div>
                            </div>
                            
                          </div>

<div class="-mt-8 px-4 mb-3">
                                <div class="relative flex items-center gap-x-3">
                                  <div class="relative w-20">
                                    <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                    <div class="absolute -bottom-3 inset-x-0 text-center">
                                      <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                                    </div>
                                  </div>
    
                                  <div class="absolute bottom-2 inset-e-0">
                                    
                                    <div class="h-full flex justify-end items-end gap-x-2">
                                      
                                      <button type="button" class="flex justify-center items-center gap-x-3 size-7 text-sm border border-line-2 text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                        <svg class="shrink-0 size-3.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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                                        <span class="sr-only">Add to favorites</span>
                                      </button>

<div class="p-4 h-full">
                                <h2 class="mb-2 font-medium text-foreground">
                                  Daniel Hobbs
                                </h2>

<dl class="grid grid-cols-2 gap-x-2">
                                  <dt class="py-1 text-sm text-muted-foreground-1">
                                    Role:
                                  </dt>
                                  <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                                    Front-End Developer
                                  </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                                    Phone:
                                  </dt>
                                  <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                                    -
                                  </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                                    Email:
                                  </dt>
                                  <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                                    daniel@email.com
                                  </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                                    Hourly price:
                                  </dt>
                                  <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                                    $120-$160
                                  </dd>
                                </dl>
                                
                              </div>
                            </div>
                            
                          </div>
                        </div>
                      </div>
                    </div>

Open SaaS Startup features page

Split Hero with Product Mockup Pro

A two-column hero pairs sales copy with a large product mockup and supporting details.

Create a responsive hero section named "Split Hero with Product Mockup" that visually matches the source reference as closely as possible. Use the destination project's existing framework, styling conventions, semantic tokens, components, icon conventions, and dark-mode strategy. Do not add external UI dependencies just to recreate this static block.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#split-hero-with-product-mockup. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

The catalog title says "Split Hero with Product Mockup", but the actual source is a Storefront ecommerce sale hero: a wide rounded image banner with centered inverse text and two underlined category links. Do not turn it into a split-layout SaaS hero, dashboard mockup, device mockup, product UI screenshot, app chrome, feature grid, or full ecommerce page.

Source structure:
- Primary source partial: `partials/pro/storefront/layouts-components/hero-static.html`.
- Preview iframe source: `blocks/marketing/hero-sections/iframes/pro/split-hero-with-product-mockup.html`.
- Related template context: `templates/ecommerce/storefront/index.html?page=categories.html`, linked from the block as `Open Storefront categories page`. Use it only for fidelity to this hero. Do not recreate the rest of the storefront page.
- The block preview passes this custom wrapper class into the partial: `pt-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto`.
- Ignore surrounding docs/page chrome from screenshots or host pages, including Preline docs navigation, sidebars, toolbars, account menus, payment/flow headers, steppers, avatars, and close buttons. Those are not part of this hero.

Overall layout:
- Build exactly one ecommerce sale hero section.
- Outer wrapper classes from the preview: `pt-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto`.
- Inner hero frame classes: `h-72 sm:h-96 xl:h-120 relative`.
- The frame is a wide rounded banner, not a card grid, browser mockup, two-column layout, or device shell.
- Do not add a navbar, product cards, category grid, stats, CTA buttons, filters, breadcrumbs, search box, footer, or unrelated ecommerce sections.
- Preserve the source max width and padding relationship. Do not replace `max-w-340` with a generic `max-w-7xl`, `container`, or full-bleed hero unless the destination project has no equivalent custom scale and you must map it to the nearest existing project container.

Image:
- Use this exact image URL:
  `https://images.unsplash.com/photo-1471602514494-6b059b461fa0?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
- Render it as an actual image, not a CSS gradient, generated illustration, dashboard screenshot, placeholder, or alternate product photo.
- Image classes: `absolute inset-0 size-full object-cover rounded-xl`.
- Preserve the source crop behavior: full frame cover, centered by normal `object-cover`, and rounded `xl` corners.
- Do not add a dark overlay, blur layer, glass panel, color wash, or decorative gradients unless the destination cannot meet contrast without it. If an overlay is required for accessibility, keep it subtle and do not change the source hierarchy.

Centered content:
- Content wrapper classes: `relative z-10 size-full max-w-md mx-auto flex flex-col justify-center items-center`.
- Content is centered horizontally and vertically over the image.
- It is not left-aligned, not in a card, not split into columns, and not pinned to a corner.
- Eyebrow text: `Summer sale`
- Eyebrow structural classes: `text-sm md:text-base uppercase`.
- Eyebrow source color role: `text-foreground-inverse`; map this role to an existing destination inverse/on-image text class before writing the final class list.
- Heading text: `Up to 50% off`
- Heading structural classes: `mt-3 font-semibold text-3xl sm:text-4xl lg:text-5xl`.
- Heading source color role: `text-foreground-inverse`; map this role to an existing destination inverse/on-image text class before writing the final class list.
- Link group wrapper: `mt-5 md:mt-10`.
- Link row classes: `flex flex-wrap justify-center gap-5`.
- Links are text links, not filled buttons or outline buttons.
- Link structural classes: `text-sm md:text-base underline underline-offset-4 focus:outline-hidden`.
- Link source color role: `text-foreground-inverse` with hover/focus at about 80% opacity; map this role to existing destination inverse/on-image text and hover/focus classes before writing the final class list.
- Link texts and targets:
  - `Shop men`, target equivalent to `templates/ecommerce/storefront/listing-grid.html`.
  - `Shop women`, target equivalent to `templates/ecommerce/storefront/listing-grid-with-categories.html`.
- If the destination app uses routing helpers or framework links, map the hrefs to the equivalent local category routes while preserving text, underline styling, sizing, and spacing.

Token and color mapping:
- Treat Preline token classes as semantic roles, not literal class names to copy blindly.
- Before using any semantic token utility from the source, inspect the destination project's Tailwind config, global CSS/theme variables, and existing components to confirm the utility actually exists.
- Do not emit undefined source-only classes such as `text-foreground-inverse` in the final component unless the destination project already defines them.
- Map `text-foreground-inverse` to the destination project's existing inverse-on-image text utility, usually `text-white`, `text-primary-foreground` only if that token is already used as white/inverse text in the project, `text-on-dark`, `text-inverse`, or another established app token.
- Map hover/focus inverse states to an existing destination class such as `hover:text-white/80 focus:text-white/80` or the app's equivalent inverse-muted hover/focus state. Do not use normal foreground or muted text over this image if it reduces contrast.
- If no equivalent inverse text utility or token exists, add the smallest project-appropriate token/class first, then use it consistently. For Tailwind v4/CSS-token projects, define an inverse foreground color token such as `--color-foreground-inverse: #fff` in the theme layer so `text-foreground-inverse` resolves. For Tailwind config projects, extend the theme or add a small utility for the inverse text role. For Bootstrap projects, use or add the app's inverse text utility. Do not leave a broken class in markup.
- This hero has no primary-colored CTA in the source. Do not introduce `bg-primary`, `text-primary`, `blue-*`, or primary buttons just because a marketing hero often has a CTA.
- In tokenized Tailwind or shadcn-style projects, use semantic roles such as `text-white`, the project's inverse text token, or `text-primary-foreground` only when that token actually exists and matches the on-image role. Use one token vocabulary consistently.
- In Bootstrap projects, map inverse text to `.text-white` or the app's inverse-on-dark utility and preserve link underline/hover behavior.
- Do not hardcode Preline blue, `blue-*` utilities, or fixed blue hex/rgb values for any semantic role.

Tailwind scale and layout:
- Preserve source scale utilities where the destination Tailwind setup supports them: `pt-10`, `w-full`, `max-w-340`, `px-4`, `sm:px-6`, `lg:px-8`, `mx-auto`, `h-72`, `sm:h-96`, `xl:h-120`, `relative`, `absolute`, `inset-0`, `size-full`, `object-cover`, `rounded-xl`, `max-w-md`, `flex`, `flex-col`, `justify-center`, `items-center`, `text-sm`, `md:text-base`, `uppercase`, `mt-3`, `font-semibold`, `text-3xl`, `sm:text-4xl`, `lg:text-5xl`, `mt-5`, `md:mt-10`, `flex-wrap`, `justify-center`, `gap-5`, `underline`, and `underline-offset-4`.
- Do not convert standard source scale classes into arbitrary pixel utilities such as `h-[480px]`, `max-w-[1360px]`, `rounded-[12px]`, `text-[48px]`, or inline styles when the destination supports the Tailwind scale.
- If the destination Tailwind config lacks `max-w-340` or `h-120`, use the closest project-approved token/scale and keep the visual proportions: a wide centered container and a desktop banner height around the source `xl:h-120`.

Responsive behavior:
- Mobile: the wrapper keeps horizontal padding, the hero is `h-72`, text remains centered, and links can wrap in the centered row.
- Small screens: height becomes `sm:h-96`.
- Extra-large screens: height becomes `xl:h-120`.
- The image must keep `object-cover` and rounded corners at all breakpoints.
- Text must not overflow or clip; the heading wraps only if the viewport requires it.

Accessibility:
- Use a semantic `section` or hero landmark appropriate to the destination project.
- The image can use `alt="Hero Image"` to match the source, or a more descriptive alt such as `Summer fashion sale` if the destination requires meaningful image text.
- The two category links must be keyboard-focusable and keep visible focus styling.
- Ensure inverse text has sufficient contrast over the image. If contrast is inadequate in the destination, add the minimum subtle overlay needed without changing the source layout.

Final QA checklist:
- The result is one Storefront sale hero, not a full ecommerce page.
- No app chrome, flow header, stepper, navbar, sidebar, account menu, dashboard, device mockup, product cards, or extra sections are introduced.
- The wrapper uses `pt-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto` or the closest destination-equivalent container.
- The inner frame uses `h-72 sm:h-96 xl:h-120 relative`.
- The exact Unsplash image URL is used as an absolute full-cover rounded image.
- Text reads exactly `Summer sale` and `Up to 50% off`.
- The only actions are the underlined text links `Shop men` and `Shop women`, spaced with `gap-5`.
- Inverse text roles stay readable over the image and do not become normal foreground/muted text.
- No undefined source token classes remain in the generated markup. If the destination lacked `text-foreground-inverse`, the output uses an existing equivalent such as `text-white` or adds a real token/class before using it.
- No Preline blue or primary CTA styling is added, because the source has no primary CTA.

<div class="pt-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div class="h-72 sm:h-96 xl:h-120 relative">
                        <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1471602514494-6b059b461fa0?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 size-full max-w-md mx-auto flex flex-col justify-center items-center">
                          <p class="text-sm md:text-base uppercase text-foreground-inverse">
                            Summer sale
                          </p>

<div class="mt-5 md:mt-10">
                            <div class="flex flex-wrap justify-center gap-5">
                              <a class="text-sm md:text-base text-foreground-inverse underline underline-offset-4 hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../templates/ecommerce/storefront/listing-grid.html">
                                Shop men
                              </a>

<a class="text-sm md:text-base text-foreground-inverse underline underline-offset-4 hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../templates/ecommerce/storefront/listing-grid-with-categories.html">
                                Shop women
                              </a>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

Open Storefront categories page

Split Hero with Image and Review Chips Free

Copy, a supporting image, and small review chips are stacked into one split hero.

Create a responsive hero section named "Split Hero with Image and Review Chips" that visually matches the source reference as closely as possible. Use the destination project's existing framework, styling conventions, semantic tokens, components, icon conventions, and dark-mode strategy. Do not add external UI dependencies just to recreate this static block.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#split-hero-with-image-and-review-chips. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

The source block is a Free Preline two-column hero with left-side copy, two CTA links/buttons, two compact review chips, and a right-side rounded portrait image with decorative offset layers. Do not turn it into a generic SaaS hero, full landing page, review carousel, card grid, dashboard mockup, ecommerce banner, or hero with a single testimonial card.

Source structure:
- Primary source partial: `partials/blocks/sources/pages/hero-with-image-and-reviews.html`.
- Preview iframe source: `blocks/marketing/hero-sections/iframes/free/split-hero-with-image-and-review-chips.html`.
- If the destination can import or read the source partial, use it. If it cannot, recreate the visible structure and behavior faithfully from the details below.
- Ignore surrounding docs/page chrome from screenshots or host pages, including Preline docs navigation, sidebars, toolbars, account menus, flow headers, steppers, avatars, and close buttons. Those are not part of this hero.

Overall layout:
- Build exactly one two-column hero block.
- Source container classes: `max-w-340 mx-auto px-4 sm:px-6 lg:px-8`.
- Source grid classes: `grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center`.
- The left column contains copy, actions, and review chips.
- The right column contains the image, offset gradient layer, and decorative bottom mosaic SVG.
- Do not add navbars, footers, extra sections, pricing cards, stats grids, product cards, or unrelated testimonials.
- The source iframe body adds `py-10 xl:py-0 xl:mt-10 bg-white dark:bg-neutral-900`; if building a standalone preview, keep equivalent vertical spacing and background. If embedding inside an existing page section, do not add unrelated page chrome.

Token and class availability:
- Treat Preline token classes as semantic roles, not destination-ready class names.
- Before using any source token utility, inspect the destination project's Tailwind config, global CSS/theme variables, and existing components to confirm that utility exists.
- Do not emit undefined source-only classes such as `max-w-340`, `text-foreground`, `text-primary`, `bg-primary`, `border-primary-line`, `text-primary-foreground`, `bg-layer`, `border-layer-line`, `text-layer-foreground`, `bg-layer-hover`, `bg-layer-focus`, `from-surface-1`, or `-z-1` unless the destination project actually defines them.
- Prefer existing destination equivalents when they match the role: `text-foreground`, `text-muted-foreground`, `text-primary`, `bg-primary`, `text-primary-foreground`, `bg-card`, `bg-background`, `border-border`, `shadow-sm`, `hover:bg-accent`, `focus:bg-accent`, `-z-10`, `to-transparent`, or app-specific tokens.
- If no equivalent exists, add the smallest project-appropriate token or utility first, then use it consistently. Do not leave broken classes in markup.
- Primary roles must map to the destination primary color/config, not Preline blue. This applies to the highlighted `Preline` word, primary CTA background, border, foreground, hover, and focus states.
- The review stars and Google/Forbes wordmarks use `currentColor` in the source. They should inherit the destination foreground color, not amber/yellow or a brand color.

Left copy:
- Heading text: `Start your journey with Preline`
- Heading structural classes: `block text-3xl font-bold sm:text-4xl lg:text-6xl lg:leading-tight`.
- Heading foreground source role: `text-foreground`; map to the destination foreground text token.
- The word `Preline` is wrapped in a span using the source role `text-primary`; map it to the destination primary text token.
- Paragraph text: `Hand-picked professionals and expertly crafted components, designed for any kind of entrepreneur.`
- Paragraph structural classes: `mt-3 text-lg`.
- Paragraph source role: `text-foreground`; map to the destination foreground text token.

CTA row:
- Button row classes: `mt-7 grid gap-3 w-full sm:inline-flex`.
- Primary CTA text: `Get started`.
- Primary CTA source structural classes: `py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg disabled:opacity-50 disabled:pointer-events-none`.
- Primary CTA source roles: `bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus`.
- Map those roles to existing destination primary utilities or add the missing token utilities first. Do not hardcode Preline blue or leave `border-primary-line` unresolved.
- Include the right-arrow icon after `Get started`:
```html
<svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
```
- Secondary CTA text: `Contact sales team`.
- Secondary CTA source structural classes: `py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg shadow-2xs disabled:opacity-50 disabled:pointer-events-none`.
- Secondary CTA source roles: `bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus`.
- Map secondary CTA roles to existing destination card/layer/accent/button-secondary utilities or add the missing token utilities first. Do not render it as a primary button.

Review chips:
- Review wrapper classes: `mt-6 lg:mt-10 grid grid-cols-2 gap-x-5`.
- Each review chip is a compact vertical block with `py-5`.
- Do not turn reviews into large cards, pill badges, avatars, testimonial quotes, or a carousel.
- Star row classes: `flex gap-x-1`.
- Each full star SVG uses `size-4` and source foreground role `text-foreground`. Use the exact full-star path below and repeat it five times for Google and four times for Forbes.
```html
<svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
</svg>
```
- The Forbes review has a fifth half-star. Use this exact half-star SVG:
```html
<svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M49.6867 20.0305C50.2889 19.3946 49.9878 18.1228 49.0846 18.1228L33.7306 15.8972C33.4296 15.8972 33.1285 15.8972 32.8275 15.2613L25.9032 0.317944C25.6021 0 25.3011 0 25 0V42.6046C25 42.6046 25.3011 42.6046 25.6021 42.6046L39.7518 49.9173C40.3539 50.2352 41.5581 49.5994 41.2571 48.6455L38.5476 32.4303C38.5476 32.1124 38.5476 31.7944 38.8486 31.4765L49.6867 20.0305Z" fill="transparent"/>
  <path d="M0.313299 20.0305C-0.288914 19.3946 0.0122427 18.1228 0.915411 18.1228L16.2694 15.8972C16.5704 15.8972 16.8715 15.8972 17.1725 15.2613L24.0968 0.317944C24.3979 0 24.6989 0 25 0V42.6046C25 42.6046 24.6989 42.6046 24.3979 42.6046L10.2482 49.9173C9.64609 50.2352 8.44187 49.5994 8.74292 48.6455L11.4524 32.4303C11.4524 32.1124 11.4524 31.7944 11.1514 31.4765L0.313299 20.0305Z" fill="currentColor"/>
</svg>
```
- Google review text: `4.6 /5 - from 12k reviews`; only `4.6` is bold.
- Forbes review text: `4.8 /5 - from 5k reviews`; only `4.8` is bold.
- Review text classes: `mt-3 text-sm` plus destination foreground role.
- Below each review text is a brand wordmark wrapper `mt-5`.
- Google wordmark SVG classes: `h-auto w-16` plus destination foreground role. Width/height/viewBox: `width="80" height="27" viewBox="0 0 80 27"`.
- Forbes wordmark SVG classes: `h-auto w-16` plus destination foreground role. Width/height/viewBox: `width="110" height="28" viewBox="0 0 110 28"`.
- Preserve the source wordmark path data from `hero-with-image-and-reviews.html`; do not replace the wordmarks with text labels, generic logos, images, or icon-library icons.

Right image column:
- Right column wrapper classes: `relative ms-4`.
- Image URL:
  `https://images.unsplash.com/photo-1665686377065-08ba896d16fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&h=800&q=80`
- Image classes: `w-full rounded-md`.
- Image alt text: `Hero Image`.
- Do not replace the image with a placeholder, generated image, stock alternative, product screenshot, or device mockup.
- Offset decorative layer source structural classes: `absolute inset-0 size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6`.
- Offset layer source roles: `-z-1 bg-linear-to-tr from-surface-1 via-transparent to-travia-transparent`.
- If `-z-1`, `from-surface-1`, or `to-travia-transparent` do not exist in the destination, map them to real equivalents such as `-z-10`, an existing muted/background gradient token, and `to-transparent`, or add the smallest real token/utility first.
- Preserve the visual relationship: the offset layer sits behind the rounded image and peeks out lower/right/left according to the source margin utilities.

Decorative mosaic SVG:
- Add the bottom-left/right mosaic SVG as an absolute decorative element inside the image column.
- Wrapper classes: `absolute bottom-0 inset-s-0`.
- SVG classes: `w-2/3 ms-auto h-auto text-white dark:text-neutral-900`.
- If `dark:text-neutral-900` or RTL logical margin utilities are unavailable, map them to the project's equivalent dark-mode foreground/background contrast and logical spacing.
- Preserve the source rect mosaic shape, viewBox `0 0 630 451`, and currentColor fill behavior. Do not replace it with dots, blobs, gradients, bokeh, or an icon.
- Mark this mosaic SVG `aria-hidden="true"` if the destination app keeps decorative assets hidden from assistive tech.

Responsive behavior:
- Mobile stacks the left column above the image because the grid becomes one column before `md`.
- From `md`, use two equal columns with `md:grid-cols-2`.
- Gaps increase from `gap-4` to `md:gap-8` and `xl:gap-20`.
- Review chips stay in two columns under the buttons using `grid grid-cols-2 gap-x-5`.
- The right image remains rounded and full width inside its column.
- No text, button, review chip, image, or decorative SVG should overlap or clip at mobile or desktop widths.

Accessibility:
- Use a semantic `section` or hero landmark appropriate to the destination project.
- CTAs must be keyboard-focusable links or buttons with visible focus states.
- Decorative star icons, brand wordmark SVGs, and mosaic SVG can be hidden from assistive tech if adjacent text communicates the review meaning.
- Ensure the primary CTA has adequate contrast after mapping to the destination primary token.
- Preserve meaningful link text exactly: `Get started` and `Contact sales team`.

Final QA checklist:
- The result is exactly one split hero block, not a full page.
- Container, grid, spacing, and responsive columns follow the source.
- Heading, paragraph, CTA texts, review scores, review counts, and image URL match the source exactly.
- The highlighted `Preline` word and primary button use the destination primary token/config, not Preline blue unless the destination primary is blue.
- Secondary CTA uses a real destination layer/card/secondary role, not an undefined `bg-layer` class and not another primary button.
- Review stars and wordmarks inherit destination foreground color and keep exact source shapes.
- The right image keeps the offset gradient layer and bottom mosaic SVG behind/over the image as in the source.
- No undefined source token classes remain in generated markup; missing token roles are mapped to existing destination classes or added as real utilities before use.

<div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8">
  
  <div class="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
    <div>
      <h1 class="block text-3xl font-bold text-foreground sm:text-4xl lg:text-6xl lg:leading-tight">Start your journey with <span class="text-primary">Preline</span></h1>
      <p class="mt-3 text-lg text-foreground">Hand-picked professionals and expertly crafted components, designed for any kind of entrepreneur.</p>
      
      
      <div class="mt-7 grid gap-3 w-full sm:inline-flex">
        <a class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          Get started
          <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
        </a>
        <a class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          Contact sales team
        </a>
      </div>

<div class="mt-6 lg:mt-10 grid grid-cols-2 gap-x-5">
        
        <div class="py-5">
          <div class="flex gap-x-1">
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
          </div>
          
          <p class="mt-3 text-sm text-foreground">
            <span class="font-bold">4.6</span> /5 - from 12k reviews
          </p>

<div class="py-5">
          <div class="flex gap-x-1">
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z" fill="currentColor"/>
            </svg>
            <svg class="size-4 text-foreground" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M49.6867 20.0305C50.2889 19.3946 49.9878 18.1228 49.0846 18.1228L33.7306 15.8972C33.4296 15.8972 33.1285 15.8972 32.8275 15.2613L25.9032 0.317944C25.6021 0 25.3011 0 25 0V42.6046C25 42.6046 25.3011 42.6046 25.6021 42.6046L39.7518 49.9173C40.3539 50.2352 41.5581 49.5994 41.2571 48.6455L38.5476 32.4303C38.5476 32.1124 38.5476 31.7944 38.8486 31.4765L49.6867 20.0305Z" fill="transparent"/>
              <path d="M0.313299 20.0305C-0.288914 19.3946 0.0122427 18.1228 0.915411 18.1228L16.2694 15.8972C16.5704 15.8972 16.8715 15.8972 17.1725 15.2613L24.0968 0.317944C24.3979 0 24.6989 0 25 0V42.6046C25 42.6046 24.6989 42.6046 24.3979 42.6046L10.2482 49.9173C9.64609 50.2352 8.44187 49.5994 8.74292 48.6455L11.4524 32.4303C11.4524 32.1124 11.4524 31.7944 11.1514 31.4765L0.313299 20.0305Z" fill="currentColor"/>
            </svg>
          </div>
          
          <p class="mt-3 text-sm text-foreground">
            <span class="font-bold">4.8</span> /5 - from 5k reviews
          </p>

<div class="absolute bottom-0 inset-s-0">
        <svg class="w-2/3 ms-auto h-auto text-white dark:text-neutral-900" width="630" height="451" viewBox="0 0 630 451" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="531" y="352" width="99" height="99" fill="currentColor"/>
          <rect x="140" y="352" width="106" height="99" fill="currentColor"/>
          <rect x="482" y="402" width="64" height="49" fill="currentColor"/>
          <rect x="433" y="402" width="63" height="49" fill="currentColor"/>
          <rect x="384" y="352" width="49" height="50" fill="currentColor"/>
          <rect x="531" y="328" width="50" height="50" fill="currentColor"/>
          <rect x="99" y="303" width="49" height="58" fill="currentColor"/>
          <rect x="99" y="352" width="49" height="50" fill="currentColor"/>
          <rect x="99" y="392" width="49" height="59" fill="currentColor"/>
          <rect x="44" y="402" width="66" height="49" fill="currentColor"/>
          <rect x="234" y="402" width="62" height="49" fill="currentColor"/>
          <rect x="334" y="303" width="50" height="49" fill="currentColor"/>
          <rect x="581" width="49" height="49" fill="currentColor"/>
          <rect x="581" width="49" height="64" fill="currentColor"/>
          <rect x="482" y="123" width="49" height="49" fill="currentColor"/>
          <rect x="507" y="124" width="49" height="24" fill="currentColor"/>
          <rect x="531" y="49" width="99" height="99" fill="currentColor"/>
        </svg>
      </div>
      
    </div>
    
  </div>
  
</div>

Full-Bleed Image Hero with Text Overlay Free

Headline and supporting copy are placed directly on top of a full-bleed image.

Create a responsive UI block named "Full-Bleed Image Hero with Text Overlay" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#full-bleed-image-hero-with-text-overlay. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: full-bleed-image-hero-with-text-overlay
- Source description: Headline and supporting copy are placed directly on top of a full-bleed image.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/full-bleed-image-hero-with-text-overlay.html (repo path: blocks/marketing/hero-sections/iframes/free/full-bleed-image-hero-with-text-overlay.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-text-on-image.html

Hero with Client Logo Row Free

The intro block is followed by a horizontal row of client logos and a primary action.

Create a responsive UI block named "Hero with Client Logo Row" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#hero-with-client-logo-row. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: hero-with-client-logo-row
- Source description: The intro block is followed by a horizontal row of client logos and a primary action.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/hero-with-client-logo-row.html (repo path: blocks/marketing/hero-sections/iframes/free/hero-with-client-logo-row.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-dark-and-yellow-with-clients-section.html
  - partials/blocks/sources/pages/logo-cloud-with-illustration-background.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - The block is two stacked sections: a hero on `bg-background`, then a separate clients strip appended directly below it.
  - Hero heading is `Preline Agency: Transforming ideas into reality` with only `Preline Agency:` wrapped in `text-primary`, at `font-semibold text-5xl md:text-6xl`.
  - Hero paragraph is `It is a creative hub where imagination meets craftsmanship to transform ideas into tangible realities. At Preline Agency, we specialize in turning conceptual visions into concrete forms, whether it be through design, artistry, or technological innovation.` at `text-muted-foreground-1 text-lg` in `mt-5 max-w-4xl`.
  - Both sections share the container `max-w-5xl ... px-4 xl:px-0`; the hero uses `pt-24 lg:pt-32 pb-24`.
  - The clients strip is headed by `Trusted by Open Source, enterprise, and more than 99,000 of you` (an `<h2>` at `text-muted-foreground-1`, `mb-4`).
  - Exactly five brand logo SVGs sit in one `flex justify-between gap-6` row, each `py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-muted-foreground-1` with `fill="currentColor"`.
  - Behind the logos is a large decorative line-art SVG - `absolute -bottom-20 inset-s-1/2 w-475 transform -translate-x-1/2`, sixteen stroked paths at `stroke-black/10 dark:stroke-white/10` - with the content lifted above it by `relative z-10`.
  - There is no button, badge or CTA anywhere in the block; it is fully static with no Preline JS plugins.

<div class="overflow-hidden bg-background">
  <div class="max-w-5xl mx-auto px-4 xl:px-0 pt-24 lg:pt-32 pb-24">
    <h1 class="font-semibold text-foreground text-5xl md:text-6xl">
      <span class="text-primary">Preline Agency:</span> Transforming ideas into reality
    </h1>
    <div class="mt-5 max-w-4xl">
      <p class="text-muted-foreground-1 text-lg">
        It is a creative hub where imagination meets craftsmanship to transform ideas into tangible realities. At Preline Agency, we specialize in turning conceptual visions into concrete forms, whether it be through design, artistry, or technological innovation.
      </p>
    </div>
  </div>
</div>

<div class="relative overflow-hidden pt-4 bg-background">
  <svg class="absolute -bottom-20 inset-s-1/2 w-475 transform -translate-x-1/2" width="2745" height="488" viewBox="0 0 2745 488" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.5 330.864C232.505 403.801 853.749 527.683 1482.69 439.719C2111.63 351.756 2585.54 434.588 2743.87 487" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 308.873C232.505 381.81 853.749 505.692 1482.69 417.728C2111.63 329.765 2585.54 412.597 2743.87 465.009" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 286.882C232.505 359.819 853.749 483.701 1482.69 395.738C2111.63 307.774 2585.54 390.606 2743.87 443.018" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 264.891C232.505 337.828 853.749 461.71 1482.69 373.747C2111.63 285.783 2585.54 368.615 2743.87 421.027" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 242.9C232.505 315.837 853.749 439.719 1482.69 351.756C2111.63 263.792 2585.54 346.624 2743.87 399.036" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 220.909C232.505 293.846 853.749 417.728 1482.69 329.765C2111.63 241.801 2585.54 324.633 2743.87 377.045" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 198.918C232.505 271.855 853.749 395.737 1482.69 307.774C2111.63 219.81 2585.54 302.642 2743.87 355.054" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 176.927C232.505 249.864 853.749 373.746 1482.69 285.783C2111.63 197.819 2585.54 280.651 2743.87 333.063" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 154.937C232.505 227.873 853.749 351.756 1482.69 263.792C2111.63 175.828 2585.54 258.661 2743.87 311.072" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 132.946C232.505 205.882 853.749 329.765 1482.69 241.801C2111.63 153.837 2585.54 236.67 2743.87 289.082" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 110.955C232.505 183.891 853.749 307.774 1482.69 219.81C2111.63 131.846 2585.54 214.679 2743.87 267.091" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 88.9639C232.505 161.901 853.749 285.783 1482.69 197.819C2111.63 109.855 2585.54 192.688 2743.87 245.1" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 66.9729C232.505 139.91 853.749 263.792 1482.69 175.828C2111.63 87.8643 2585.54 170.697 2743.87 223.109" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 44.9819C232.505 117.919 853.749 241.801 1482.69 153.837C2111.63 65.8733 2585.54 148.706 2743.87 201.118" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 22.991C232.505 95.9276 853.749 219.81 1482.69 131.846C2111.63 43.8824 2585.54 126.715 2743.87 179.127" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
    <path d="M0.5 1C232.505 73.9367 853.749 197.819 1482.69 109.855C2111.63 21.8914 2585.54 104.724 2743.87 157.136" class="stroke-black/10 dark:stroke-white/10" stroke="currentColor"/>
  </svg>
  
  <div class="relative z-10">
    <div class="max-w-5xl px-4 xl:px-0 mx-auto">
      <div class="mb-4">
        <h2 class="text-muted-foreground-1">Trusted by Open Source, enterprise, and more than 99,000 of you</h2>
      </div>

Open Digital Agency homepage

Hero with Polygon Background Accent Free

A centered hero uses a decorative shape layer behind the main text block.

Create a responsive UI block named "Hero with Polygon Background Accent" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#hero-with-polygon-background-accent. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: hero-with-polygon-background-accent
- Source description: A centered hero uses a decorative shape layer behind the main text block.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/hero-with-polygon-background-accent.html (repo path: blocks/marketing/hero-sections/iframes/free/hero-with-polygon-background-accent.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-with-polygon-bg-element.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - The polygon accent is a `before:` pseudo-element background image, not an inline SVG: `before:bg-[url('https://preline.co/assets/svg/examples/polygon-bg-element.svg')]` with `dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')]`, plus `before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-1 before:transform before:-translate-x-1/2`.
  - The announcement pill reads `PRO release - Join to waitlist` followed by a chevron-right badge, and is `p-1 ps-3 rounded-full bg-layer border border-layer-line`.
  - Heading is `Let's Build Together` (straight apostrophe) where only `Together` is gradient-clipped via `bg-clip-text bg-linear-to-tl from-primary to-chart-5 text-transparent`.
  - Paragraph is `Preline UI is an open-source set of prebuilt UI components, ready-to-use examples and Figma design system based on the utility-first Tailwind CSS framework.`
  - Exactly two CTAs: a gradient `Get started` link (`rounded-md`, `from-primary to-chart-5` with hover/focus swapping to `from-chart-5 to-primary`) with trailing chevron, then a `font-mono` button reading `$ npm i preline` ending in a `size-7` rounded clipboard badge whose icon has `group-hover:rotate-6 transition`.
  - A meta row follows the buttons: `Package Manager:` then bold `npm`, a `hidden sm:block` thin diagonal-slash SVG (`M6 13L10 3`), then the link `Installation Guide` with a trailing chevron.
  - Container is `max-w-340 mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10`; pill, heading, paragraph, buttons and meta row are all centered.
  - Fully static: the `$ npm i preline` button has no clipboard wiring, there are no `data-hs-*` attributes and no Preline JS plugins.

<div class="relative overflow-hidden before:absolute before:top-0 before:inset-s-1/2 before:bg-[url('https://preline.co/assets/svg/examples/polygon-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-1 before:transform before:-translate-x-1/2">
  <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
    
    <div class="flex justify-center">
      <a class="inline-flex items-center gap-x-2 bg-layer border border-layer-line text-sm text-layer-foreground p-1 ps-3 rounded-full transition hover:border-layer-line focus:outline-hidden focus:border-layer-line" href="#">
        PRO release - Join to waitlist
        <span class="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface-1 font-semibold text-sm text-surface-foreground">
          <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
        </span>
      </a>
    </div>

<div class="mt-5 max-w-2xl text-center mx-auto">
      <h1 class="block font-bold text-foreground text-4xl md:text-5xl lg:text-6xl">
        Let's Build
        <span class="bg-clip-text bg-linear-to-tl from-primary to-chart-5 text-transparent">Together</span>
      </h1>
    </div>

<div class="mt-5 max-w-3xl text-center mx-auto">
      <p class="text-lg text-muted-foreground-2">Preline UI is an open-source set of prebuilt UI components, ready-to-use examples and Figma design system based on the utility-first Tailwind CSS framework.</p>
    </div>

<div class="mt-8 gap-3 flex flex-col sm:flex-row justify-center">
      <a class="inline-flex justify-center items-center gap-x-3 text-center bg-linear-to-tl from-primary to-chart-5 hover:from-chart-5 hover:to-primary border border-transparent text-primary-foreground text-sm font-medium rounded-md focus:outline-hidden focus:from-chart-5 focus:to-primary py-3 px-4" href="#">
        Get started
        <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
      </a>
      <button type="button" class="relative group p-2 ps-3 inline-flex justify-center items-center gap-x-2 text-sm font-mono rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
        $ npm i preline
        <span class="flex justify-center items-center bg-surface-1 rounded-md size-7">
          <svg class="shrink-0 size-4 group-hover:rotate-6 transition" 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"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
        </span>
      </button>
    </div>

<div class="mt-5 flex flex-col sm:flex-row justify-center items-center gap-1.5 sm:gap-3">
      <div class="flex flex-wrap gap-1 sm:gap-3">
        <span class="text-sm text-muted-foreground-2">Package Manager:</span>
        <span class="text-sm font-bold text-foreground">npm</span>
      </div>
      <svg class="hidden sm:block size-5 text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"/>
      </svg>
      <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
        Installation Guide
        <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
      </a>
    </div>
  </div>
</div>

Center-Aligned Dark Hero Free

A centered text stack sits inside a high-contrast hero with minimal supporting elements.

Create a responsive UI block named "Center-Aligned Dark Hero" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#center-aligned-dark-hero. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: center-aligned-dark-hero
- Source description: A centered text stack sits inside a high-contrast hero with minimal supporting elements.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/center-aligned-dark-hero.html (repo path: blocks/marketing/hero-sections/iframes/free/center-aligned-dark-hero.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-center-aligned-in-dark-bg.html

<div class="bg-inverse bg-linear-to-b from-chart-5/10 via-transparent">
  <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8">
    
    <div class="flex justify-center">
      <a class="group inline-flex items-center bg-plain/10 hover:bg-plain/10 border border-plain/10 p-1 ps-4 rounded-full shadow-md focus:outline-hidden focus:bg-plain/10" href="../../../figma/">
        <p class="me-2 text-white text-sm">
          Preline UI Figma is live.
        </p>
        <span class="group-hover:bg-plain/10 py-1.5 px-2.5 flex justify-center items-center gap-x-2 rounded-full bg-plain/10 font-semibold text-foreground-inverse text-sm">
          <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
        </span>
      </a>
    </div>

<div class="max-w-3xl text-center mx-auto">
      <h1 class="block font-medium text-foreground-inverse text-4xl sm:text-5xl md:text-6xl lg:text-7xl">
        Now it's easier than ever to build products
      </h1>
    </div>

<div class="max-w-3xl text-center mx-auto">
      <p class="text-lg text-foreground-inverse/70">Preline is a large open-source project, crafted with Tailwind CSS framework by Hmlstream.</p>
    </div>

<div class="text-center">
      <a class="inline-flex justify-center items-center gap-x-3 text-center bg-linear-to-tl from-primary to-chart-5 shadow-lg shadow-transparent hover:shadow-primary-hover/50 border border-transparent text-primary-foreground text-sm font-medium rounded-full focus:outline-hidden focus:shadow-primary-focus/50 py-3 px-6" href="#">
        Get started
        <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
      </a>
    </div>
    
  </div>
</div>

Hero with Square Background Accent Free

The main copy block is framed by a square accent shape and a short action row.

Create a responsive UI block named "Hero with Square Background Accent" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#hero-with-square-background-accent. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: hero-with-square-background-accent
- Source description: The main copy block is framed by a square accent shape and a short action row.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/hero-with-square-background-accent.html (repo path: blocks/marketing/hero-sections/iframes/free/hero-with-square-background-accent.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-with-squared-bg-element.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - The squared accent is a `before:` pseudo-element background image: `before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')]` with the `examples-dark` variant for dark mode, plus `before:bg-no-repeat before:bg-top before:size-full before:-z-1 before:transform before:-translate-x-1/2` - note there is no `before:bg-cover` here.
  - The announcement pill reads `Explore the Capital Product`, then a divided secondary label `Explore` styled `border-s border-line-2 text-primary ps-2`, then a `text-primary` chevron-right; the pill itself is `text-xs p-2 px-3 rounded-full bg-layer border border-layer-line`.
  - Heading is `Supercharged Preline Experience`, `font-bold text-4xl md:text-5xl lg:text-6xl`, constrained to `max-w-xl text-center mx-auto`.
  - Paragraph is `Preline is a large open-source project, crafted with Tailwind CSS framework by Hmlstream.` at `text-lg text-muted-foreground-2` in `max-w-3xl`.
  - There is exactly one CTA: `Continue with Github` with a leading solid GitHub mark (16 viewBox, `fill="currentColor"`, no stroke), on a `bg-linear-to-tl from-primary to-chart-5` pill at `rounded-full py-3 px-4`.
  - Container is `max-w-340 mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10`, with exactly four centered stacked elements: pill, h1, paragraph, CTA.
  - Fully static; no `data-hs-*` attributes and no Preline JS plugins.

<div class="relative overflow-hidden before:absolute before:top-0 before:inset-s-1/2 before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')] before:bg-no-repeat before:bg-top before:size-full before:-z-1 before:transform before:-translate-x-1/2">
  <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
    
    <div class="flex justify-center">
      <a class="inline-flex items-center gap-x-2 bg-layer border border-layer-line text-xs text-layer-foreground p-2 px-3 rounded-full transition hover:border-line-3 focus:outline-hidden focus:border-line-3" href="#">
        Explore the Capital Product
        <span class="flex items-center gap-x-1">
          <span class="border-s border-line-2 text-primary ps-2">Explore</span>
          <svg class="shrink-0 size-4 text-primary" 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="m9 18 6-6-6-6"/></svg>
        </span>
      </a>
    </div>

<div class="mt-5 max-w-xl text-center mx-auto">
      <h1 class="block font-bold text-foreground text-4xl md:text-5xl lg:text-6xl">
        Supercharged Preline Experience
      </h1>
    </div>

<div class="mt-5 max-w-3xl text-center mx-auto">
      <p class="text-lg text-muted-foreground-2">Preline is a large open-source project, crafted with Tailwind CSS framework by Hmlstream.</p>
    </div>

<div class="mt-8 gap-3 flex justify-center">
      <a class="inline-flex justify-center items-center gap-x-3 text-center bg-linear-to-tl from-primary to-chart-5 hover:from-chart-5 hover:to-primary focus:outline-hidden focus:from-chart-5 focus:to-primary text-primary-foreground text-sm font-medium rounded-full py-3 px-4" href="#">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
        </svg>
        Continue with Github
      </a>
    </div>
    
  </div>
</div>

Hero with Gradient Background Free

A centered hero uses a full-width gradient field behind the heading and actions.

Create a responsive UI block named "Hero with Gradient Background" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#hero-with-gradient-background. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: hero-with-gradient-background
- Source description: A centered hero uses a full-width gradient field behind the heading and actions.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/hero-with-gradient-background.html (repo path: blocks/marketing/hero-sections/iframes/free/hero-with-gradient-background.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-gradient-bg.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - An eyebrow line reads `Preline: A vision for 2023` and is gradient-clipped text: `inline-block text-sm font-medium bg-clip-text bg-linear-to-l from-primary to-chart-5 text-transparent`.
  - Heading is `The Intuitive Web Solutions` (`font-semibold text-4xl md:text-5xl lg:text-6xl`), followed by `Preline UI is an open-source set of prebuilt UI components, ready-to-use examples and Figma design system based on the utility-first Tailwind CSS framework.`
  - Exactly two CTAs in this order: solid primary `Get started` with a trailing chevron-right, then a borderless ghost link `Preline Figma` with a leading five-color Figma glyph using literal fills `#0ACF83`, `#A259FF`, `#F24E1E`, `#FF7262`, `#1ABCFE`.
  - The buttons stack vertically on mobile and go side by side from `sm`: `mt-8 gap-3 flex flex-col sm:flex-row justify-center`.
  - The background is a single blurred blob marked `aria-hidden="true"`, positioned `absolute -top-96 inset-s-1/2 transform -translate-x-1/2`, and shaped `bg-linear-to-tl from-primary-50 via-primary-100 to-primary-50 blur-3xl w-360 h-200 origin-top-left -rotate-12 -translate-x-60` with `dark:from-primary-900/70 dark:via-primary-900/70 dark:to-primary-900/70`.
  - Copy sits in `max-w-2xl text-center mx-auto` inside `max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-16`, layered above the blob by a `relative z-10` wrapper.
  - No image, no announcement pill, no logo row and no stats; fully static with no Preline JS plugins.

<div class="relative overflow-hidden">
  
  <div aria-hidden="true" class="flex absolute -top-96 inset-s-1/2 transform -translate-x-1/2">
    <div class="bg-linear-to-tl from-primary-50 via-primary-100 to-primary-50 blur-3xl w-360 h-200 rounded-fulls origin-top-left -rotate-12 -translate-x-60 dark:from-primary-900/70 dark:via-primary-900/70 dark:to-primary-900/70"></div>
  </div>

<div class="relative z-10">
    <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-16">
      <div class="max-w-2xl text-center mx-auto">
        <p class="inline-block text-sm font-medium bg-clip-text bg-linear-to-l from-primary to-chart-5 text-transparent">
          Preline: A vision for 2023
        </p>

<div class="mt-5 max-w-2xl">
          <h1 class="block font-semibold text-foreground text-4xl md:text-5xl lg:text-6xl">
            The Intuitive Web Solutions
          </h1>
        </div>

<div class="mt-5 max-w-3xl">
          <p class="text-lg text-muted-foreground-2">Preline UI is an open-source set of prebuilt UI components, ready-to-use examples and Figma design system based on the utility-first Tailwind CSS framework.</p>
        </div>

<div class="mt-8 gap-3 flex flex-col sm:flex-row justify-center">
          <a class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none" href="#">
            Get started
            <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
          </a>
          <a class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none" href="#">
            <svg class="shrink-0 size-4" width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.875 18C8.531 18 9.875 16.656 9.875 15V12H6.875C5.219 12 3.875 13.344 3.875 15C3.875 16.656 5.219 18 6.875 18Z" fill="#0ACF83"></path>
              <path d="M3.875 9C3.875 7.344 5.219 6 6.875 6H9.875V12H6.875C5.219 12 3.875 10.656 3.875 9Z" fill="#A259FF"></path>
              <path d="M3.875 3C3.875 1.344 5.219 0 6.875 0H9.875V6H6.875C5.219 6 3.875 4.656 3.875 3Z" fill="#F24E1E"></path>
              <path d="M9.87501 0H12.875C14.531 0 15.875 1.344 15.875 3C15.875 4.656 14.531 6 12.875 6H9.87501V0Z" fill="#FF7262"></path>
              <path d="M15.875 9C15.875 10.656 14.531 12 12.875 12C11.219 12 9.87501 10.656 9.87501 9C9.87501 7.344 11.219 6 12.875 6C14.531 6 15.875 7.344 15.875 9Z" fill="#1ABCFE"></path>
            </svg>
            Preline Figma
          </a>
        </div>
        
      </div>
    </div>
  </div>
</div>

Center-Aligned Hero with Video Play Button Free

A centered text stack sits above a media preview with a large play control.

Create a responsive UI block named "Center-Aligned Hero with Video Play Button" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sections/#center-aligned-hero-with-video-play-button. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sections
- Block ID: center-aligned-hero-with-video-play-button
- Source description: A centered text stack sits above a media preview with a large play control.
- Preview iframe: https://preline.co/blocks/marketing/hero-sections/iframes/free/center-aligned-hero-with-video-play-button.html (repo path: blocks/marketing/hero-sections/iframes/free/center-aligned-hero-with-video-play-button.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-center-aligned-with-video-play-button-on-image.html

<div class="relative overflow-hidden">
  <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="max-w-2xl text-center mx-auto">
      <h1 class="block text-3xl font-bold text-foreground sm:text-4xl md:text-5xl">Designed for you to get more <span class="text-primary">simple</span></h1>
      <p class="mt-3 text-lg text-foreground">Build your business here. Take it anywhere.</p>
    </div>
    
    <div class="mt-10 relative max-w-5xl mx-auto">
      <div class="w-full object-cover h-96 sm:h-120 bg-[url('https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1020&q=80')] bg-no-repeat bg-center bg-cover rounded-xl"></div>

<div class="absolute inset-0 size-full">
        <div class="flex flex-col justify-center items-center size-full">
          <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none" href="#">
            <svg class="shrink-0 size-4" 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"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            Play the overview
          </a>
        </div>
      </div>