Tailwind CSS Editorial Detail Pages

All Blocks
Blog & Articles
Editorial Detail Pages

Editorial Detail Pages

Editorial detail pages for customer stories, job details, and case studies with long-form content sections and supporting sidebars.

Customer Story Detail Page with Metrics and Company Sidebar Pro

Editorial customer story layout combines a back-link rail, long-form article column, metric cards, and a sticky company details sidebar.

Create a responsive UI block named "Customer Story Detail Page with Metrics and Company Sidebar" 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/blog-articles/editorial-detail-pages/#customer-story-detail-page-with-metrics-and-company-sidebar. 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: blog-articles/editorial-detail-pages
- Block ID: customer-story-detail-page-with-metrics-and-company-sidebar
- Source description: Editorial customer story layout combines a back-link rail, long-form article column, metric cards, and a sticky company details sidebar.
- Preview iframe: https://preline.co/blocks/blog-articles/editorial-detail-pages/iframes/pro/customer-story-detail-page-with-metrics-and-company-sidebar.html (repo path: blocks/blog-articles/editorial-detail-pages/iframes/pro/customer-story-detail-page-with-metrics-and-company-sidebar.html)
- Source markup reference:
  - partials/pro/saas-startup/pages/customers.html
  - partials/pro/saas-startup/cards/case-study.html

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 source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Three-rail layout in a `max-w-6xl` container: left rail `lg:w-48` with a sticky `Go back` link (chevron-left icon, underline on hover), center column `lg:max-w-xl w-full`, right sidebar `lg:max-w-3xs w-full lg:border-s border-line-2` with sticky `lg:sticky lg:top-20 lg:ps-10` content.
  - Heading group: Shopify brand SVG (`size-8`, fixed green fills) beside big stat `20%` (`font-semibold text-2xl md:text-3xl`), h1 `Rise in Ecommerce`, then an intro paragraph mentioning the fictitious brand 'StyleAura.'.
  - `A conversation with` label in `font-mono text-sm`, followed by 2 grayscale avatar medias: `Niki Kray` / `Staff Product Manager` and `Thomas Moor` / `Project Manager` (`size-9 rounded-full grayscale`).
  - Body section headings in order: `The Challenge`, `The Solution`, `The Impact`, `Looking Ahead`; bullet lists are flex rows with square markers `size-2 mt-2 bg-surface-2 rounded-sm`, and the impact list has bold lead-ins `40% Faster Development: `, `90% Component Reuse: `, `30% Fewer Bugs: `, `100% Design Compliance: `.
  - `More stories` section with exactly 2 metric cards: Mailchimp logo with `43%` / `Enhancement in customer engagement`, and GitLab logo with `$125,000` / `Saved annually`; each card has a `size-10` circular arrow button (sr-only `Learn more`) whose arrow grows a tail on hover/focus.
  - Sidebar facts grid `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-1 gap-5` in order: `Shopify` with `shopify.com` link, `Industry` / `Ecommerce`, `Founded` / `2006`, `Funding raised` / `$2M (Series B)`, `CEO` / `Tobias Lutke`; values use `font-mono text-sm`.
  - No JS or Preline plugins - a static article page; stickiness is pure CSS.

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="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
  
  <div class="flex flex-col lg:flex-row lg:justify-between gap-y-5 gap-x-10">
    
    <div class="lg:w-48">
      <div class="lg:sticky lg:top-20">
        <a class="pe-3 group inline-flex items-center gap-x-2 text-start whitespace-nowrap text-sm text-foreground rounded-full underline-offset-2 hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2" href="../../../templates/websites/saas-startup/customers.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="m15 18-6-6 6-6"/></svg>
          Go back
        </a>
      </div>
    </div>

<div class="lg:max-w-xl w-full">
      
      <div class="pb-6 mb-6 lg:pb-10 lg:mb-10 lg:last:pb-0 last:mb-0 lg:last:border-b-0 border-b border-line-2">
        <div class="mb-3 flex items-center gap-x-3">
          <svg class="shrink-0 size-8" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.462 6.28384C27.44 6.12384 27.2998 6.03529 27.184 6.02554C27.0684 6.01589 24.6215 5.83452 24.6215 5.83452C24.6215 5.83452 22.9221 4.1474 22.7355 3.96066C22.5489 3.77403 22.1844 3.8308 22.0429 3.87244C22.0221 3.87858 21.6716 3.98674 21.0919 4.16614C20.5243 2.53261 19.5224 1.03145 17.7599 1.03145C17.7112 1.03145 17.6611 1.03343 17.611 1.03628C17.1098 0.373373 16.4889 0.0853729 15.9525 0.0853729C11.8468 0.0853729 9.88524 5.21798 9.27023 7.82619C7.67483 8.32055 6.54146 8.672 6.39669 8.71748C5.50617 8.99682 5.47801 9.02488 5.36108 9.864C5.27308 10.4993 2.94299 28.5189 2.94299 28.5189L21.0995 31.9208L30.9373 29.7925C30.9373 29.7925 27.4837 6.44384 27.462 6.28384ZM20.0884 4.4765L18.5521 4.952C18.5526 4.84373 18.5532 4.73721 18.5532 4.62072C18.5532 3.60548 18.4123 2.78806 18.1862 2.14006C19.0943 2.25403 19.6992 3.28735 20.0884 4.4765ZM17.0596 2.34137C17.3121 2.97403 17.4763 3.88198 17.4763 5.10718C17.4763 5.16987 17.4757 5.22718 17.4752 5.28515C16.476 5.59463 15.3903 5.93063 14.3022 6.26773C14.9132 3.90981 16.0584 2.77096 17.0596 2.34137ZM15.8398 1.18663C16.017 1.18663 16.1955 1.2468 16.3663 1.36439C15.0505 1.98356 13.6401 3.54302 13.0445 6.65721L10.5364 7.43398C11.2341 5.05863 12.8907 1.18663 15.8398 1.18663Z" fill="#95BF46"></path><path d="M27.184 6.02553C27.0684 6.01589 24.6215 5.83452 24.6215 5.83452C24.6215 5.83452 22.9221 4.1474 22.7356 3.96066C22.6658 3.89118 22.5716 3.85556 22.4732 3.84022L21.1004 31.9205L30.9373 29.7925C30.9373 29.7925 27.4837 6.44383 27.462 6.28383C27.44 6.12383 27.2999 6.03529 27.184 6.02553Z" fill="#5E8E3E"></path><path d="M17.7599 11.4614L16.5469 15.0697C16.5469 15.0697 15.4841 14.5025 14.1813 14.5025C12.2714 14.5025 12.1753 15.701 12.1753 16.0031C12.1753 17.6511 16.4711 18.2825 16.4711 22.1427C16.4711 25.1797 14.5449 27.1353 11.9476 27.1353C8.83092 27.1353 7.23706 25.1956 7.23706 25.1956L8.07158 22.4384C8.07158 22.4384 9.70994 23.8449 11.0924 23.8449C11.9957 23.8449 12.3632 23.1337 12.3632 22.614C12.3632 20.4643 8.83881 20.3684 8.83881 16.8361C8.83881 13.863 10.9727 10.986 15.2802 10.986C16.94 10.986 17.7599 11.4614 17.7599 11.4614Z" fill="white"></path></svg>

<h1 class="font-semibold text-2xl lg:text-3xl text-foreground">
          Rise in Ecommerce
        </h1>
        
        <div class="mt-3">
          <p class="text-muted-foreground-2">
            In collaboration with Shopify, Preline embarked on a mission to revolutionize the ecommerce experience for a fictitious fashion brand, 'StyleAura.'.
          </p>
        </div>

<div class="mt-8">
          <p class="font-mono text-sm text-muted-foreground-1">
            A conversation with
          </p>

<div class="mt-3 flex flex-wrap gap-y-4 gap-x-10">
            
            <div class="flex items-center gap-x-3">
              <img class="shrink-0 size-9 rounded-full grayscale" src="https://images.unsplash.com/photo-1720048169575-b179e1a20dc2?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
              <div class="grow">
                <span class="block font-medium text-sm text-foreground">
                  Niki Kray
                </span>
                <span class="block text-xs text-muted-foreground-1">
                  Staff Product Manager
                </span>
              </div>
            </div>

<div class="flex items-center gap-x-3">
              <img class="shrink-0 size-9 rounded-full grayscale" src="https://images.unsplash.com/photo-1721333087252-e4cffc249d2d?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
              <div class="grow">
                <span class="block font-medium text-sm text-foreground">
                  Thomas Moor
                </span>
                <span class="block text-xs text-muted-foreground-1">
                  Project Manager
                </span>
              </div>
            </div>
            
          </div>
        </div>
      </div>

<div class="space-y-7 pb-6 mb-6 lg:pb-10 lg:mb-10 lg:last:pb-0 last:mb-0 lg:last:border-b-0 border-b border-line-2">
        <p class="text-muted-foreground-2">
          When Shopify's engineering team faced the challenge of scaling their development workflows across thousands of developers, they turned to Preline to streamline their UI component system. The results? A 40% reduction in development time and unprecedented consistency across their vast ecosystem of merchant-facing applications.
        </p>

<p class="font-medium text-lg text-foreground">
          The Challenge
        </p>

<p class="text-muted-foreground-2">
          As one of the world's leading ecommerce platforms, Shopify's engineering team manages hundreds of applications that serve millions of merchants globally. With their rapid growth came increasing complexity:
        </p>

<ul class="flex flex-col gap-y-1 text-muted-foreground-2">
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Inconsistent UI components across different teams and applications
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Lengthy development cycles for new features
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Difficulty maintaining design system compliance
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Growing technical debt from duplicate component implementations
          </li>
        </ul>
        
        <p class="text-muted-foreground-2">
          "Before Preline, each team was essentially rebuilding the same components with slight variations. It was becoming unsustainable," explains Sarah Chen, Senior Engineering Manager at Shopify.
        </p>

<p class="font-medium text-lg text-foreground">
          The Solution
        </p>
        
        <ul class="flex flex-col gap-y-1 text-muted-foreground-2">
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Migrating existing components to Preline's ecosystem
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Training 2,000+ developers on the new system
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Establishing new development workflows around Preline's tools
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            Creating custom plugins to integrate with Shopify's internal tools
          </li>
        </ul>

<p class="font-medium text-lg text-foreground">
          The Impact
        </p>

<p class="text-muted-foreground-2">
          Shopify implemented Preline's component library and development toolkit across their entire organization. The implementation process included:
        </p>
        
        <ul class="flex flex-col gap-y-1 text-muted-foreground-2">
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            <div>
              <span class="font-medium text-foreground">40% Faster Development: </span>
              Teams now ship new features in less than half the time
            </div>
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            <div>
              <span class="font-medium text-foreground">90% Component Reuse: </span>
              Dramatic reduction in duplicate code
            </div>
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            <div>
              <span class="font-medium text-foreground">30% Fewer Bugs: </span>
              Standardized components led to more reliable applications
            </div>
          </li>
          <li class="flex gap-x-3">
            <div class="shrink-0 size-2 mt-2 bg-surface-2 rounded-sm"></div>
            <div>
              <span class="font-medium text-foreground">100% Design Compliance: </span>
              Perfect alignment with Shopify's design system
            </div>
          </li>
        </ul>
        
        <p class="text-muted-foreground-2">
          "Preline hasn't just given us a component library – it's given us a new way of thinking about development," says Michael Rodriguez, Director of Frontend Engineering. "Our teams can focus on solving merchant problems instead of rebuilding basic UI elements."
        </p>

<p class="font-medium text-lg text-foreground">
          Looking Ahead
        </p>

<p class="text-muted-foreground-2">
          Following their successful implementation, Shopify is now exploring advanced Preline features to further optimize their development pipeline. They're working closely with the Preline team to develop new capabilities that will benefit both organizations.
        </p>
        
        <p class="text-muted-foreground-2">
          "The partnership with Preline has been transformative," concludes Chen. "We're seeing benefits we didn't even anticipate when we started this journey."
        </p>
      </div>

<div class="mb-5">
        <p class="font-semibold text-lg lg:text-xl text-foreground">
          More stories
        </p>
      </div>
        
      <div class="space-y-5">
        
        <a class="group  flex flex-col bg-card border-card-line focus:outline-hidden rounded-xl transition duration-200" href="../../../templates/websites/saas-startup/customer-details.html">
          <div class="mb-3 md:mb-5 flex items-center gap-x-3">
            <svg class="shrink-0 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>

<div>
              <span class="flex shrink-0 justify-center items-center size-10 bg-layer border border-line-1 text-layer-foreground rounded-full group-hover:bg-primary-100 group-hover:border-primary-100 group-hover:text-primary-600 group-focus:bg-primary-100 group-focus:border-primary-100 group-focus:text-primary-600 dark:group-hover:bg-primary-800/50 dark:group-hover:border-primary-800/10 dark:group-hover:text-primary-500 dark:group-focus:bg-primary-800/10 dark:group-focus:border-primary-800/50 dark:group-focus:text-primary-500">
                <span class="sr-only">Learn more</span>
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path class="origin-left scale-x-50 opacity-0 transition duration-200 lg:group-hover:scale-x-100 lg:group-hover:opacity-100 lg:group-focus:scale-x-100 lg:group-focus:opacity-100" d="M5 12h14"></path>
                  <path class="translate-x-0 transition duration-200 lg:group-hover:translate-x-0.5 lg:group-focus:translate-x-0.5" d="m12 5 7 7-7 7"></path>
                </svg>
              </span>
            </div>
          </div>

<div class="mb-5">
            <p class="font-medium text-lg text-foreground">
              Enhancement in customer engagement
            </p>
            <p class="mt-1 text-muted-foreground-1">
              With the aim of optimizing customer interactions and boosting brand loyalty, the team at Preline leveraged Mailchimp's powerful tools and expertise to deliver exceptional results.
            </p>
          </div>
        </a>

<a class="group  flex flex-col bg-card border-card-line focus:outline-hidden rounded-xl transition duration-200" href="../../../templates/websites/saas-startup/customer-details.html">
          <div class="mb-3 md:mb-5 flex items-center gap-x-3">
            <svg class="shrink-0 size-8" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.8875 15.3054C32.9242 16.2093 32.8209 17.1099 32.5811 17.9792C32.3447 18.8486 31.9716 19.6695 31.4787 20.4141C30.989 21.1593 30.3861 21.8167 29.6935 22.3607L29.6769 22.3745L23.019 27.563L19.7451 30.1433L17.7501 31.7089C17.6335 31.8024 17.5036 31.8716 17.3671 31.9201C17.2305 31.9686 17.084 31.9929 16.9374 31.9929C16.7942 31.9929 16.6477 31.9686 16.5111 31.9201C16.3745 31.8716 16.2447 31.8024 16.1281 31.7089L14.1331 30.1433L10.8591 27.563L4.24125 22.4057L4.20129 22.378L4.18796 22.3641C3.49187 21.8203 2.88904 21.1623 2.39611 20.4176C1.90319 19.6729 1.53016 18.8486 1.29036 17.9792C1.05056 17.1099 0.947313 16.2059 0.98395 15.3019C1.02392 14.3979 1.20044 13.5078 1.51018 12.6626L1.55348 12.5414L5.90654 0.747936C5.92875 0.69021 5.95539 0.634792 5.98648 0.581684C6.01534 0.528576 6.04976 0.478931 6.08972 0.43275C6.12747 0.38426 6.16855 0.339234 6.21295 0.297671C6.25736 0.258417 6.30399 0.221472 6.35284 0.186836C6.45609 0.121028 6.56267 0.0725381 6.67924 0.0448295C6.79248 0.0136573 6.91238 -0.000196993 7.02895 0.00673016C7.14885 0.0136573 7.26542 0.0379024 7.37533 0.0829289C7.48524 0.124492 7.59181 0.186836 7.68507 0.263035C7.72948 0.302289 7.77278 0.343852 7.81496 0.387724C7.85493 0.433905 7.89046 0.483549 7.92154 0.536658C7.95485 0.587457 7.98371 0.641719 8.00814 0.699446C8.03256 0.754863 8.05254 0.812589 8.06809 0.872625L11.0023 10.2139H22.8792L25.8134 0.872625C25.8289 0.812589 25.85 0.754863 25.8767 0.699446C25.9011 0.644029 25.93 0.589766 25.9633 0.536658C25.9944 0.485858 26.0299 0.437368 26.0699 0.391187C26.1098 0.345006 26.1531 0.302289 26.1997 0.263035C26.293 0.186836 26.3962 0.127955 26.5062 0.0829289C26.6194 0.0413659 26.736 0.0171209 26.8525 0.0101937C26.9724 0.00326659 27.089 0.0136573 27.2056 0.0448295C27.3188 0.0760017 27.4287 0.124492 27.5286 0.1903C27.5797 0.222627 27.6275 0.259571 27.6719 0.301134C27.7163 0.340388 27.7573 0.38426 27.7951 0.43275C27.8328 0.48124 27.8673 0.532039 27.8983 0.585148C27.9272 0.638256 27.9527 0.693673 27.9749 0.751399L32.3213 12.5483L32.3646 12.6696C32.6744 13.5112 32.8509 14.4014 32.8875 15.3054Z" fill="#E24329"/><path d="M32.8909 15.309C32.9275 16.2095 32.8243 17.1135 32.5845 17.9829C32.3447 18.8523 31.9717 19.6766 31.4787 20.4213C30.9858 21.1659 30.383 21.824 29.6902 22.3678L29.6736 22.3816L23.0157 27.5701C23.0157 27.5701 20.1881 25.3499 16.9374 22.7903L26.4795 15.2813C26.9092 14.9453 27.3588 14.6371 27.8218 14.3531C28.2847 14.0656 28.7643 13.8093 29.2539 13.5807C29.7468 13.3521 30.2498 13.1477 30.7593 12.978C31.2722 12.8049 31.7918 12.6628 32.3214 12.5485L32.3647 12.6698C32.6744 13.5149 32.8509 14.405 32.8909 15.309Z" fill="#FC6D26"/><path d="M16.9374 22.7903C20.1881 25.343 23.0191 27.5701 23.0191 27.5701L19.7451 30.1504L17.7501 31.716C17.6335 31.8095 17.5036 31.8788 17.3671 31.9273C17.2305 31.9758 17.084 32 16.9374 32C16.7942 32 16.6477 31.9758 16.5111 31.9273C16.3746 31.8788 16.2447 31.8095 16.1281 31.716L14.1331 30.1504L10.8591 27.5701C10.8591 27.5701 13.6868 25.343 16.9374 22.7903Z" fill="#FCA326"/><path d="M16.9374 22.7834C13.6834 25.343 10.8591 27.5632 10.8591 27.5632L4.24125 22.4059L4.20129 22.3782L4.18796 22.3643C3.49187 21.8205 2.88904 21.1625 2.39611 20.4178C1.90319 19.6731 1.53016 18.8488 1.29036 17.9794C1.05056 17.1101 0.947313 16.2061 0.98395 15.3021C1.02392 14.3981 1.20044 13.508 1.51018 12.6628L1.55348 12.5416C2.08304 12.6559 2.60261 12.7979 3.11552 12.9711C3.6251 13.1443 4.12801 13.3452 4.62094 13.5772C5.11053 13.8058 5.59014 14.0656 6.05309 14.3496C6.51604 14.6336 6.96233 14.9453 7.39531 15.2813L16.9374 22.7834Z" fill="#FC6D26"/></svg>

<div class="mb-5">
            <p class="font-medium text-lg text-foreground">
              Saved annually
            </p>
            <p class="mt-1 text-muted-foreground-1">
              Gitlab spent the equivalent of $25k per year in spreadsheet processes. Now Preline does it for them.
            </p>
          </div>
        </a>
        
      </div>
    </div>

<div class="lg:max-w-3xs w-full lg:border-s border-line-2">
      
      <div class="lg:sticky lg:top-20 lg:ps-10">
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-1 gap-5">
          <div>
            <p class="font-semibold text-sm text-foreground">
              Shopify
            </p>
            <a class="font-mono text-sm text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2" href="#">
              shopify.com
            </a>
          </div>

<div>
            <p class="font-semibold text-sm text-foreground">
              Industry
            </p>
            <p class="mt-1 font-mono text-sm text-muted-foreground-2">
              Ecommerce
            </p>
          </div>

<div>
            <p class="font-semibold text-sm text-foreground">
              Founded
            </p>
            <p class="mt-1 font-mono text-sm text-muted-foreground-2">
              2006
            </p>
          </div>

<div>
            <p class="font-semibold text-sm text-foreground">
              Funding raised
            </p>
            <p class="mt-1 font-mono text-sm text-muted-foreground-2">
              $2M (Series B)
            </p>
          </div>

<div>
            <p class="font-semibold text-sm text-foreground">
              CEO
            </p>
            <p class="mt-1 font-mono text-sm text-muted-foreground-2">
              Tobias Lutke
            </p>
          </div>
        </div>
      </div>
      
    </div>
    
  </div>
  
</div>

Job detail page pairs a long-form role description with a sticky application facts sidebar for deadline, department, and employment details.

Create a responsive UI block named "Job Detail Page with Application Facts Sidebar" 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/blog-articles/editorial-detail-pages/#job-detail-page-with-application-facts-sidebar. 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: blog-articles/editorial-detail-pages
- Block ID: job-detail-page-with-application-facts-sidebar
- Source description: Job detail page pairs a long-form role description with a sticky application facts sidebar for deadline, department, and employment details.
- Preview iframe: https://preline.co/blocks/blog-articles/editorial-detail-pages/iframes/pro/job-detail-page-with-application-facts-sidebar.html (repo path: blocks/blog-articles/editorial-detail-pages/iframes/pro/job-detail-page-with-application-facts-sidebar.html)
- Source markup reference:
  - partials/pro/digital-agency/pages/careers-job-details.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Page header inside a `max-w-5xl` container: a `Back to listings` primary link with a left-arrow icon that shifts left on hover/focus, then h1 `Senior frontend developer`.
  - Two-column layout `flex flex-col lg:flex-row lg:justify-between gap-x-10`: a `grow` long-form article column and a right sidebar card `lg:w-70 py-6 lg:px-6 lg:border border-line-2 rounded-xl` inside `lg:sticky lg:top-20`.
  - Article opens with `Hello 👋` and `I'm Christina-CEO here at Preline.`; section headings in order: `It's time for our first product manager.` (the only h2), `What you'll be doing`, `What you'll need to do well in this role`, `We expect a lot from you, but in return you'll`.
  - Bullet lists are flex rows with square markers `size-2 mt-2 bg-surface-1 rounded-sm`; counts in order: 5 items, 5 items, 9 items, 10 items.
  - Sidebar facts as labeled pairs, in order: `Application Deadline:` / `December 31, 2025`, `Department:` / `Engineering`, `Employment Type:` / `Full-Time`, `Location:` / `Toronto, ON, Canada`, `Compensation:` / `$100,000 - $120,000 per year`.
  - Sidebar ends with an `Apply now` pill button (`bg-primary rounded-full`, arrow icon shifting right on hover/focus) linking to the application page.
  - No JS or Preline plugins - a static article page; stickiness is pure CSS.

<div class="bg-background">
                    <div class="w-full max-w-5xl px-4 xl:px-0 py-5 sm:py-10 mx-auto">
                      <div class="mb-10">
                        <div class="mb-5">
                          <a class="group inline-flex items-center gap-x-2 font-medium text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="careers.html">
                            <svg class="shrink-0 size-4 transition group-hover:-translate-x-0.5 group-focus:-translate-x-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                            Back to listings
                          </a>
                        </div>
      
                        <h1 class="font-semibold text-2xl lg:text-3xl text-foreground">
                          Senior frontend developer
                        </h1>
                      </div>

<div class="flex flex-col lg:flex-row lg:justify-between gap-x-10">
                        
                        <div class="grow">
                          <div class="space-y-7 pb-6 mb-6 lg:pb-10 lg:mb-10 lg:last:pb-0 last:mb-0 lg:last:border-b-0 border-b border-line-2">
                            <p class="text-muted-foreground-1 leading-7">
                              Hello 👋
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              I'm Christina-CEO here at Preline.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              We're a high-growth, bootstrapped HR-tech start-up building and selling software that helps in-house talent acquisition teams attract, hire and retain the best talent.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              We launched in 2018, and have since grown to hundreds of customers, millions in revenue, consistent triple-digit year-on-year growth, a team of ~20 incredible people, and a robust and beautiful product used by growing organisations every day, all without taking on a penny of outside capital.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              The journey so far has been awesome - and we're just getting started - but these first signs of meaningful scale have meant our team are spread thin, our customer base (and their expectations of our product) has broadened, and it's harder to manage the competing priorities of our various stakeholders (customers, internal teams, etc.).
                            </p>

<h2 class="font-medium text-lg text-foreground">
                              It's time for our first product manager.
                            </h2>

<p class="text-muted-foreground-1 leading-7">
                              We need someone to own product end-to-end, and (more importantly), we need someone with a set of skills and experience that I (CEO and de-facto product manager to date) don't have! The role will report directly into me, but you'll work closely with every leader in the business (Customer Success, Engineering, Sales, Marketing, etc.) and in time will be responsible for building out a fully-fledged product team.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              If this sounds like the kind of role that'd be appealing to you, read on - but before we dive into the detail, here are a few things about Unify that'll either make you say "hell, yeah", or "hell, no":
                            </p>

<ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                We don't mind where you're based, but you'll need to ensure you have at least four hours of timezone overlap with UK to ensure we can work together as productively as possible. You'll need a quiet location to work from with good internet connectivity if you're working remote (we are happy to pay for access to a co-working space if needed).
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                We're growing fast and this role is key to our growth. You'll be well compensated (as well as a meaningful equity allocation, great benefits and so on), but expectations are high and we all work hard here - we're not the company you join if you're looking to 'slow down'.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                We don't work with one particular industry or size of organization, and we sell to all European and US time zones. You'll be expected to quickly understand the challenges faced by all of these different types of organisations, position our product to maximise the value we're adding to these organisations and so on. It's not easy.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                We're bootstrapped, profitable, and have no plans to raise external capital at this stage. We have a clearly defined strategy from today through to exit (we'll share this in detail with you through the hiring process) and we believe there are a number of huge benefits to our approach, but being bootstrapped also introduces challenges - our team is smaller than an average VC-backed business at our stage, we each carry more responsibility than would be typical, and we are much more intentional about how we deploy our capital.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Our HQ is in Jersey, UK but we built the company to be remote-first and have a distributed remote team across the UK and US.
                              </li>
                            </ul>

<p class="font-medium text-lg text-foreground">
                              What you'll be doing
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              You'll help us drive the product vision and development of our core user experience across our three main personas - in-house recruiters, hiring managers and their candidates.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              To do this, you'll own the complete product lifecycle - defining product requirements, working with the team on low-fi wireframes, drafting and reviewing specs and partnering with engineering, design, marketing, sales and customer success to deliver meaningful product improvements for our customers and prospects against a planned schedule.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              The specifics of how you allocate your time, what initiatives / projects you prioritise from a product perspective and so on are all up for grabs. The team and I all know that we need to level-up the way we think about product, and this role is going to help us do that. We're looking for someone who can very quickly ramp up (i.e. in weeks, not months), develop an understanding of our market, product, team, processes and so on - once you've done so, basically everything about how we deliver product is up for grabs.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              That said, if you're looking for examples of how we're spending our time from a product perspective at the moment, here are a few:
                            </p>
          
                            <ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Understanding our customers, their pain points, and how they're using our product - having direct conversations with customers, reviewing support requests, evaluating survey responses and digging into analytics.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Reviewing our 'product stack' and implementing systems and tools to help streamline and scale product internally - e.g. Linear for issue tracking, Segment for customer data / logging, Abstract for design review and so on.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Defining both a short and long-term roadmap and communicating that effectively both internally and externally.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Implementing better product education (again, both internally and externally) - working with sales and customer success to ensure they're aware of new releases and the ramifications of those releases on our customers and prospects, and working with customer success specifically to ensure we're delivering a fantastic in-product support experience.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Working on our ecosystem - we are strong believers in an open ecosystem - we want to 'stay in our lane' and focus on the ATS market, but have an Open API and a large (and rapidly growing) ecosystem of third-party integration partners that offer best-in-class point solutions across the wider HR Tech landscape. There's work to be done to improve our partner programme, better roadmap integrations, continually improve and better document our Open API, etc.
                              </li>
                            </ul>

<p class="text-muted-foreground-1 leading-7">
                              Our ideal candidate will have:
                            </p>
          
                            <ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                3+ years' work experience in a product lead / product management role at a growth stage SaaS business, ideally in the B2B space.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Much better than average written and verbal communication skills.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Exceptional listening skills and the ability to assess information quickly.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Strong technical acumen, plus solid data and analytical skills. We want someone who has a real instinct and can think strategically, but who can validate / back up their strategy with data.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Strong user experience and design sensibilities. We care a lot about design, and we'll need you to do so as well.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                The ability to tell compelling stories that offer valuable perspectives / the ability to evangelise our product both internally and externally.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                The ability to communicate effectively with stakeholders of all roles and levels within the business - you'll need to ensure engineering, sales, marketing and customer success are all working in alignment, and build authority and mutual respect with individuals within all of these teams to deliver in the role.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                The ability to learn fast and get up to speed with our systems and processes quickly, as well as to help us define and implement new systems and processes as needed.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                A desire and ability to perform exceptionally well in an ambiguous and fast-paced start-up environment.
                              </li>
                            </ul>
          
                            <p class="text-muted-foreground-1 leading-7">
                              Please note that the experience, skills and so on listed above are not explicit requirements. They're there to give you a feel for the type of person we're looking for - if you have some but not all of these, but don't be put off from applying - but be prepared to explain how your perspective / experience / skills / etc set you apart from our applicants when we speak.
                            </p>

<p class="font-medium text-lg text-foreground">
                              We expect a lot from you, but in return you'll
                            </p>
          
                            <ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Be part of a business where Product is massively respected across the board - whilst we don't yet have a dedicated product team, we made considerable early investments in our brand, build out a design system to prepare us for product scale, have a robust customer success team that engages proactively with our customers to understand their product requirements and so on. We all understand the importance of getting this hire right.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Make a meaningful, measurable contribution to the business and define both the direction of the product itself, as well as the design, structure and execution of our entire product organisation as we scale over the coming years.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Get the support you need to do a great job (MacBook Pro, the software you need, personal development budget, regular 1:1s, etc).
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Work extremely closely with high-calibre, experienced and bloody lovely team members from our founders down to our newest team members.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Visit our office in Jersey regularly (if you're working remote).
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Have unlimited holidays (minimum requirement of 21 days per year).
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Be able to work where and when you want (as long as you're getting the job done).
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Get top of the line healthcare for you and your family.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Get a meaningful equity allocation.
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-1 rounded-sm"></div>
                                Grow your career, fast.
                              </li>
                            </ul>

<p class="text-muted-foreground-1 leading-7">
                              We understand that this will be one of many jobs you hold over the course of your career, and we work extremely hard to get to know you personally, to understand as much as possible about your longer-term plans / career trajectory, and to shape your experience here at Unify in support of that. If the time comes that you want to move onto a new role in the future, you'll have loads of experience and a compelling story of how you made a huge impact, in a high-growth business, in a competitive market.
                            </p>
                          </div>
                        </div>

<div>
                          <div class="lg:sticky lg:top-20">
                            <div class="lg:w-70 py-6 lg:px-6 lg:border border-line-2 rounded-xl">
                              <div class="flex flex-col gap-6">
                                <div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Application Deadline:
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    December 31, 2025
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Department:
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Engineering
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Employment Type:
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Full-Time
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Location:
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Toronto, ON, Canada
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Compensation:
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    $100,000 - $120,000 per year
                                  </p>
                                </div>

<div>
                                  <a class="group inline-flex items-center gap-x-2 py-2 px-3 bg-primary border border-primary-line text-primary-foreground font-medium text-sm text-nowrap rounded-full focus:outline-hidden" href="careers-apply.html">
                                    Apply now
                                    <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                                  </a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>
                  </div>

Case study detail page combines a wide hero image, long-form article body, and a sticky company facts sidebar.

Create a responsive UI block named "Case Study Detail Page with Hero Image and Company Sidebar" 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/blog-articles/editorial-detail-pages/#case-study-detail-page-with-hero-image-and-company-sidebar. 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: blog-articles/editorial-detail-pages
- Block ID: case-study-detail-page-with-hero-image-and-company-sidebar
- Source description: Case study detail page combines a wide hero image, long-form article body, and a sticky company facts sidebar.
- Preview iframe: https://preline.co/blocks/blog-articles/editorial-detail-pages/iframes/pro/case-study-detail-page-with-hero-image-and-company-sidebar.html (repo path: blocks/blog-articles/editorial-detail-pages/iframes/pro/case-study-detail-page-with-hero-image-and-company-sidebar.html)
- Source markup reference:
  - partials/pro/digital-agency/pages/case-study-details.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Full-bleed hero image strip at the very top: `w-full h-30 sm:h-40 object-cover` (short banner, not a tall hero), above a `max-w-5xl` content container.
  - Two-column layout `flex flex-col lg:flex-row lg:justify-between gap-x-10`: a `grow` article column and a right sidebar card `lg:w-70 py-6 lg:px-6 lg:border border-line-2 rounded-xl` inside `lg:sticky lg:top-20` (the border only appears at lg).
  - h1 is `20% Rise in Ecommerce`; article section headings, in order: `The Challenge`, `The Solution`, `The Impact`, `Looking Ahead` (styled `font-medium text-lg`, not h2/h3 tags).
  - Bullet lists are flex rows with small square markers (`size-2 mt-2 bg-surface-3 rounded-sm`), not native list bullets; challenge, solution, and impact lists each have 4 items.
  - Impact list items have bold lead-ins: `40% Faster Development: `, `90% Component Reuse: `, `30% Fewer Bugs: `, `100% Design Compliance: `.
  - Sidebar facts in order: a Shopify company blurb with `shopify.com` underlined primary link, then labeled pairs `Industry` / `Ecommerce`, `Founded` / `2006`, `Funding raised` / `$2M (Series B)`, `CEO` / `Tobias Lutke`.
  - No JS or Preline plugins - a static article page; stickiness is pure CSS.

<div class="bg-background">
                    <img class="w-full h-30 sm:h-40 object-cover" src="https://images.unsplash.com/photo-1658297063569-162817482fb6?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="w-full max-w-5xl px-4 xl:px-0 pt-5 sm:pt-10 mx-auto">
                      
                      <div class="flex flex-col lg:flex-row lg:justify-between gap-x-10">
                        
                        <div class="grow">
                          <div class="space-y-7 pb-6 mb-6 lg:pb-10 lg:mb-10 lg:last:pb-0 last:mb-0 lg:last:border-b-0 border-b border-line-2">
                            <h1 class="font-semibold text-2xl lg:text-3xl text-foreground">
                              20% Rise in Ecommerce
                            </h1>
          
                            <p class="text-muted-foreground-1 leading-7">
                              In collaboration with Shopify, Preline embarked on a mission to revolutionize the ecommerce experience for a fictitious fashion brand, StyleAura.
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              When Shopify's engineering team faced the challenge of scaling their development workflows across thousands of developers, they turned to Preline to streamline their UI component system. The results? A 40% reduction in development time and unprecedented consistency across their vast ecosystem of merchant-facing applications.
                            </p>

<p class="font-medium text-lg text-foreground">
                              The Challenge
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              As one of the world's leading ecommerce platforms, Shopify's engineering team manages hundreds of applications that serve millions of merchants globally. With their rapid growth came increasing complexity:
                            </p>

<ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Inconsistent UI components across different teams and applications
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Lengthy development cycles for new features
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Difficulty maintaining design system compliance
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Growing technical debt from duplicate component implementations
                              </li>
                            </ul>
          
                            <p class="text-muted-foreground-1 leading-7">
                              "Before Preline, each team was essentially rebuilding the same components with slight variations. It was becoming unsustainable," explains Sarah Chen, Senior Engineering Manager at Shopify.
                            </p>

<p class="font-medium text-lg text-foreground">
                              The Solution
                            </p>
          
                            <ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Migrating existing components to Preline's ecosystem
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Training 2,000+ developers on the new system
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Establishing new development workflows around Preline's tools
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                Creating custom plugins to integrate with Shopify's internal tools
                              </li>
                            </ul>

<p class="font-medium text-lg text-foreground">
                              The Impact
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              Shopify implemented Preline's component library and development toolkit across their entire organization. The implementation process included:
                            </p>
          
                            <ul class="flex flex-col gap-y-3 text-muted-foreground-1">
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                <div>
                                  <span class="font-medium text-foreground">40% Faster Development: </span>
                                  Teams now ship new features in less than half the time
                                </div>
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                <div>
                                  <span class="font-medium text-foreground">90% Component Reuse: </span>
                                  Dramatic reduction in duplicate code
                                </div>
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                <div>
                                  <span class="font-medium text-foreground">30% Fewer Bugs: </span>
                                  Standardized components led to more reliable applications
                                </div>
                              </li>
                              <li class="flex gap-x-3">
                                <div class="shrink-0 size-2 mt-2 bg-surface-3 rounded-sm"></div>
                                <div>
                                  <span class="font-medium text-foreground">100% Design Compliance: </span>
                                  Perfect alignment with Shopify's design system
                                </div>
                              </li>
                            </ul>
          
                            <p class="text-muted-foreground-1 leading-7">
                              "Preline hasn't just given us a component library – it's given us a new way of thinking about development," says Michael Rodriguez, Director of Frontend Engineering. "Our teams can focus on solving merchant problems instead of rebuilding basic UI elements."
                            </p>

<p class="font-medium text-lg text-foreground">
                              Looking Ahead
                            </p>

<p class="text-muted-foreground-1 leading-7">
                              Following their successful implementation, Shopify is now exploring advanced Preline features to further optimize their development pipeline. They're working closely with the Preline team to develop new capabilities that will benefit both organizations.
                            </p>
          
                            <p class="text-muted-foreground-1 leading-7">
                              "The partnership with Preline has been transformative," concludes Chen. "We're seeing benefits we didn't even anticipate when we started this journey."
                            </p>
                          </div>
                        </div>

<div>
                          <div class="lg:sticky lg:top-20">
                            <div class="lg:w-70 py-6 lg:px-6 lg:border border-line-2 rounded-xl">
                              <div class="flex flex-col gap-6">
                                <div>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Shopify is a Canadian multinational ecommerce company headquartered in Ottawa, Ontario.
                                  </p>

<p class="mt-3">
                                    <a class="text-sm text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2" href="#">
                                      shopify.com
                                    </a>
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Industry
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Ecommerce
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Founded
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    2006
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    Funding raised
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    $2M (Series B)
                                  </p>
                                </div>

<div>
                                  <p class="font-semibold text-sm text-foreground">
                                    CEO
                                  </p>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Tobias Lutke
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>
                  </div>

Editorial Detail Pages

Customer Story Detail Page with Metrics and Company Sidebar Pro

Job Detail Page with Application Facts Sidebar Pro

Case Study Detail Page with Hero Image and Company Sidebar Pro