{
  "name": "SaaS landing page section layouts",
  "publisher": "BlockSnap",
  "url": "https://blocksnap.site/layouts",
  "license": "CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)",
  "attribution": "Wireframes by BlockSnap, https://blocksnap.site",
  "about": "BlockSnap is an AI landing page builder for SaaS. Describe your product in one sentence and get a full landing page built from these layouts; snap any section to another layout without losing your words.",
  "layouts": [
    {
      "id": "navbar-left",
      "section": "Navigation bar",
      "name": "Links left, next to the logo",
      "description": "Logo, then links with dropdown carets; log in and the main button on the right.",
      "when_to_use": "Almost always: it is the layout visitors expect.",
      "url": "https://blocksnap.site/layouts#navbar-left",
      "svg": "https://blocksnap.site/patterns/navbar-left.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "navbar-dark",
      "section": "Navigation bar",
      "name": "Dark bar on a dark hero",
      "description": "A transparent bar over a dark hero, with light links and a bright button.",
      "when_to_use": "Your hero is dark and the nav should blend into it.",
      "url": "https://blocksnap.site/layouts#navbar-dark",
      "svg": "https://blocksnap.site/patterns/navbar-dark.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "navbar-announce",
      "section": "Navigation bar",
      "name": "Announcement bar above the nav",
      "description": "A thin strip above the nav with one news line and a short link, often dismissible.",
      "when_to_use": "You have a launch, an event or a funding round worth one line.",
      "url": "https://blocksnap.site/layouts#navbar-announce",
      "svg": "https://blocksnap.site/patterns/navbar-announce.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "navbar-right",
      "section": "Navigation bar",
      "name": "Links grouped right",
      "description": "The logo alone on the left; links and the button together on the right.",
      "when_to_use": "Developer and infrastructure brands that want a clean, sparse look.",
      "url": "https://blocksnap.site/layouts#navbar-right",
      "svg": "https://blocksnap.site/patterns/navbar-right.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "navbar-centre",
      "section": "Navigation bar",
      "name": "Links centred",
      "description": "Logo on the left, links centred on the page, the button on the right.",
      "when_to_use": "You have few links and want a balanced, calm bar.",
      "url": "https://blocksnap.site/layouts#navbar-centre",
      "svg": "https://blocksnap.site/patterns/navbar-centre.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "navbar-two-cta",
      "section": "Navigation bar",
      "name": "Two calls to action: sales and sign up",
      "description": "A “Contact sales” or “Request demo” link beside the main “Get started” button.",
      "when_to_use": "You sell both self-serve and through a sales team.",
      "url": "https://blocksnap.site/layouts#navbar-two-cta",
      "svg": "https://blocksnap.site/patterns/navbar-two-cta.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "navbar-utility",
      "section": "Navigation bar",
      "name": "Two tiers: utility row above",
      "description": "A thin row for search, language, support and log in above the main row.",
      "when_to_use": "Enterprise products with many audiences, regions or support paths.",
      "url": "https://blocksnap.site/layouts#navbar-utility",
      "svg": "https://blocksnap.site/patterns/navbar-utility.svg",
      "guide": "https://blocksnap.site/research/navbar"
    },
    {
      "id": "hero-h1",
      "section": "Hero",
      "name": "Centred stack, product below",
      "description": "Headline, subhead and buttons centred, with a large product shot underneath.",
      "when_to_use": "Your product reads well in one wide screenshot.",
      "url": "https://blocksnap.site/layouts#hero-h1",
      "svg": "https://blocksnap.site/patterns/hero-h1.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h2",
      "section": "Hero",
      "name": "Split: text left, visual right",
      "description": "Copy and buttons on the left, the product or a photo on the right.",
      "when_to_use": "You want the words to lead and the visual is compact.",
      "url": "https://blocksnap.site/layouts#hero-h2",
      "svg": "https://blocksnap.site/patterns/hero-h2.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h7",
      "section": "Hero",
      "name": "Left stack, product below",
      "description": "Like the centred stack, but left aligned, with a full-width product below.",
      "when_to_use": "Developer and productivity tools with a dense interface.",
      "url": "https://blocksnap.site/layouts#hero-h7",
      "svg": "https://blocksnap.site/patterns/hero-h7.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h6",
      "section": "Hero",
      "name": "Split headline",
      "description": "A big headline on the left, the intro and buttons in a right column, a wide visual below.",
      "when_to_use": "Your headline is short and bold and needs room.",
      "url": "https://blocksnap.site/layouts#hero-h6",
      "svg": "https://blocksnap.site/patterns/hero-h6.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h4",
      "section": "Hero",
      "name": "Type on a colour field",
      "description": "Large type on a solid or dark ground, with little or no imagery.",
      "when_to_use": "Infrastructure or API products that are hard to screenshot, and strong brands.",
      "url": "https://blocksnap.site/layouts#hero-h4",
      "svg": "https://blocksnap.site/patterns/hero-h4.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h3",
      "section": "Hero",
      "name": "Full-bleed media",
      "description": "A photo or video fills the screen, with the copy on top.",
      "when_to_use": "Visual products, where the result is the selling point.",
      "url": "https://blocksnap.site/layouts#hero-h3",
      "svg": "https://blocksnap.site/patterns/hero-h3.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h8",
      "section": "Hero",
      "name": "Centred, visuals around it",
      "description": "Centred copy, with small cards, photos or icons floating at the edges.",
      "when_to_use": "Platforms with many parts that no single screenshot can show.",
      "url": "https://blocksnap.site/layouts#hero-h8",
      "svg": "https://blocksnap.site/patterns/hero-h8.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "hero-h5",
      "section": "Hero",
      "name": "Product as the hero",
      "description": "The first screen is the product itself: a prompt box, an input or a short quiz.",
      "when_to_use": "AI tools and utilities, where trying it is the best pitch.",
      "url": "https://blocksnap.site/layouts#hero-h5",
      "svg": "https://blocksnap.site/patterns/hero-h5.svg",
      "guide": "https://blocksnap.site/research/hero-section"
    },
    {
      "id": "logos-strip",
      "section": "Customer logos",
      "name": "Caption and a single logo row",
      "description": "A centred caption, such as “Trusted by”, above one row of greyscale logos.",
      "when_to_use": "Almost always: it is the clearest and quietest proof.",
      "url": "https://blocksnap.site/layouts#logos-strip",
      "svg": "https://blocksnap.site/patterns/logos-strip.svg",
      "guide": "https://blocksnap.site/research/customer-logos"
    },
    {
      "id": "logos-marquee",
      "section": "Customer logos",
      "name": "Scrolling marquee",
      "description": "Logos scroll sideways without end and are cut at the edges, often on a dark band.",
      "when_to_use": "You have more logos than fit in one row and want motion.",
      "url": "https://blocksnap.site/layouts#logos-marquee",
      "svg": "https://blocksnap.site/patterns/logos-marquee.svg",
      "guide": "https://blocksnap.site/research/customer-logos"
    },
    {
      "id": "logos-inline",
      "section": "Customer logos",
      "name": "Caption left, logos right",
      "description": "A thin band with the caption at the left and the logos on the same line.",
      "when_to_use": "You want proof in the least possible height.",
      "url": "https://blocksnap.site/layouts#logos-inline",
      "svg": "https://blocksnap.site/patterns/logos-inline.svg",
      "guide": "https://blocksnap.site/research/customer-logos"
    },
    {
      "id": "logos-wall",
      "section": "Customer logos",
      "name": "Logo wall grid",
      "description": "Several rows of logos in a grid, on a light or dark ground.",
      "when_to_use": "Enterprise products with a long list of well-known customers.",
      "url": "https://blocksnap.site/layouts#logos-wall",
      "svg": "https://blocksnap.site/patterns/logos-wall.svg",
      "guide": "https://blocksnap.site/research/customer-logos"
    },
    {
      "id": "logos-tiles",
      "section": "Customer logos",
      "name": "Logos in tiles",
      "description": "Each logo sits in its own bordered tile or pill.",
      "when_to_use": "Your logos vary a lot in shape and need a frame to look even.",
      "url": "https://blocksnap.site/layouts#logos-tiles",
      "svg": "https://blocksnap.site/patterns/logos-tiles.svg",
      "guide": "https://blocksnap.site/research/customer-logos"
    },
    {
      "id": "logos-split",
      "section": "Customer logos",
      "name": "Heading left, logo grid right",
      "description": "A heading and a customer stories link on the left, a two-column logo grid on the right.",
      "when_to_use": "Logos lead into case studies and deserve their own section.",
      "url": "https://blocksnap.site/layouts#logos-split",
      "svg": "https://blocksnap.site/patterns/logos-split.svg",
      "guide": "https://blocksnap.site/research/customer-logos"
    },
    {
      "id": "showcase-split",
      "section": "Features",
      "name": "Alternating text and visual rows",
      "description": "One feature per row, copy on one side and a screenshot on the other; the sides swap.",
      "when_to_use": "You have a few key benefits that each have a screen to show.",
      "url": "https://blocksnap.site/layouts#showcase-split",
      "svg": "https://blocksnap.site/patterns/showcase-split.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-dark-band",
      "section": "Features",
      "name": "Full-width dark feature band",
      "description": "A dark or brand-colour band with light text and a product shot, a list or cards.",
      "when_to_use": "You want to break the rhythm of a light page and stress one point.",
      "url": "https://blocksnap.site/layouts#showcase-dark-band",
      "svg": "https://blocksnap.site/patterns/showcase-dark-band.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-card-row",
      "section": "Features",
      "name": "Heading and image cards",
      "description": "Three or four cards with an image on top, often a carousel with arrows.",
      "when_to_use": "You have several parallel features, products or audiences.",
      "url": "https://blocksnap.site/layouts#showcase-card-row",
      "svg": "https://blocksnap.site/patterns/showcase-card-row.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-icon-grid",
      "section": "Features",
      "name": "Icon grid",
      "description": "Three or four columns of an icon, a title and two lines of text, with no images.",
      "when_to_use": "Many small features that need a quick overview, with clear labels.",
      "url": "https://blocksnap.site/layouts#showcase-icon-grid",
      "svg": "https://blocksnap.site/patterns/showcase-icon-grid.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-centred-shot",
      "section": "Features",
      "name": "Centred heading, big screenshot",
      "description": "One wide product shot, map or diagram under a centred heading.",
      "when_to_use": "One screen or diagram tells the whole story.",
      "url": "https://blocksnap.site/layouts#showcase-centred-shot",
      "svg": "https://blocksnap.site/patterns/showcase-centred-shot.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-bento",
      "section": "Features",
      "name": "Bento grid",
      "description": "Cards of mixed size: one large interface card, with smaller stat and illustration cards.",
      "when_to_use": "A product with many parts that you want to show at a glance.",
      "url": "https://blocksnap.site/layouts#showcase-bento",
      "svg": "https://blocksnap.site/patterns/showcase-bento.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-collage",
      "section": "Features",
      "name": "Floating media collage",
      "description": "Short centred copy with photos or interface pieces scattered or tilted around it.",
      "when_to_use": "Visual or platform products where variety is the point.",
      "url": "https://blocksnap.site/layouts#showcase-collage",
      "svg": "https://blocksnap.site/patterns/showcase-collage.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "showcase-media-bleed",
      "section": "Features",
      "name": "Full-bleed video story",
      "description": "An edge-to-edge customer video with a short caption.",
      "when_to_use": "You have a strong customer film and a brand to match.",
      "url": "https://blocksnap.site/layouts#showcase-media-bleed",
      "svg": "https://blocksnap.site/patterns/showcase-media-bleed.svg",
      "guide": "https://blocksnap.site/research/features-section"
    },
    {
      "id": "tour-accordion",
      "section": "Product tour and how it works",
      "name": "Accordion list with one image",
      "description": "Product areas listed on the left, one open; the large visual on the right follows it.",
      "when_to_use": "You have several product areas and one strong screenshot for each.",
      "url": "https://blocksnap.site/layouts#tour-accordion",
      "svg": "https://blocksnap.site/patterns/tour-accordion.svg"
    },
    {
      "id": "tour-tabs",
      "section": "Product tour and how it works",
      "name": "Tabs over a large screenshot",
      "description": "Pill or underline tabs, then a panel with short copy and a big screenshot.",
      "when_to_use": "Each part of the product needs a wide screenshot to make sense.",
      "url": "https://blocksnap.site/layouts#tour-tabs",
      "svg": "https://blocksnap.site/patterns/tour-tabs.svg"
    },
    {
      "id": "tour-steps-row",
      "section": "Product tour and how it works",
      "name": "Numbered steps in a row",
      "description": "A row of cards with a step number, title and small visual, joined by arrows.",
      "when_to_use": "Getting started takes a few simple steps and you want to show it is easy.",
      "url": "https://blocksnap.site/layouts#tour-steps-row",
      "svg": "https://blocksnap.site/patterns/tour-steps-row.svg"
    },
    {
      "id": "tour-sticky",
      "section": "Product tour and how it works",
      "name": "Sticky title, scrolling features",
      "description": "Title and step dots stay fixed on the left while feature rows scroll on the right.",
      "when_to_use": "You tell a longer product story and want the visitor to keep their place.",
      "url": "https://blocksnap.site/layouts#tour-sticky",
      "svg": "https://blocksnap.site/patterns/tour-sticky.svg"
    },
    {
      "id": "tour-install",
      "section": "Product tour and how it works",
      "name": "Code snippet: live in minutes",
      "description": "A short claim, a framework picker and one install command or code block.",
      "when_to_use": "Developer tools where setup is one command and that is the selling point.",
      "url": "https://blocksnap.site/layouts#tour-install",
      "svg": "https://blocksnap.site/patterns/tour-install.svg"
    },
    {
      "id": "tour-timeline",
      "section": "Product tour and how it works",
      "name": "Vertical timeline",
      "description": "Steps alternate left and right of a central line, then one call to action.",
      "when_to_use": "A rare choice for a process with clear stages that reads best top to bottom.",
      "url": "https://blocksnap.site/layouts#tour-timeline",
      "svg": "https://blocksnap.site/patterns/tour-timeline.svg"
    },
    {
      "id": "usecases-tabs",
      "section": "Use cases",
      "name": "Tabs by team or industry",
      "description": "Pill tabs, then a panel with a pitch, outcome rows or customer logos beside a visual.",
      "when_to_use": "You sell to several teams or industries and each needs its own pitch.",
      "url": "https://blocksnap.site/layouts#usecases-tabs",
      "svg": "https://blocksnap.site/patterns/usecases-tabs.svg"
    },
    {
      "id": "usecases-cards",
      "section": "Use cases",
      "name": "Cards per team or use case",
      "description": "A row of cards, one per team or industry, often on a dark band.",
      "when_to_use": "You want every audience visible at once, each with a link to its own page.",
      "url": "https://blocksnap.site/layouts#usecases-cards",
      "svg": "https://blocksnap.site/patterns/usecases-cards.svg"
    },
    {
      "id": "usecases-role-list",
      "section": "Use cases",
      "name": "Role list beside one visual",
      "description": "A big photo or video next to a list of roles, each with icon, name, line and arrow.",
      "when_to_use": "Your buyers think in job roles and you have one strong image or video.",
      "url": "https://blocksnap.site/layouts#usecases-role-list",
      "svg": "https://blocksnap.site/patterns/usecases-role-list.svg"
    },
    {
      "id": "usecases-story-carousel",
      "section": "Use cases",
      "name": "Customer story carousel",
      "description": "One large customer story card in focus, the next ones collapsed or behind arrows.",
      "when_to_use": "You have real customer stories that show each use case in practice.",
      "url": "https://blocksnap.site/layouts#usecases-story-carousel",
      "svg": "https://blocksnap.site/patterns/usecases-story-carousel.svg"
    },
    {
      "id": "testimonials-case-carousel",
      "section": "Testimonials",
      "name": "Case study carousel with metrics",
      "description": "Large slides with a photo or video, a quote and two or three result numbers, with arrows to move on.",
      "when_to_use": "You have customer stories with measurable results.",
      "url": "https://blocksnap.site/layouts#testimonials-case-carousel",
      "svg": "https://blocksnap.site/patterns/testimonials-case-carousel.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "testimonials-cards",
      "section": "Testimonials",
      "name": "Row of quote cards",
      "description": "Three quote cards, each with stars or a logo, the quote and an avatar; sometimes a scroller.",
      "when_to_use": "You have several short quotes and want a calm, easy section.",
      "url": "https://blocksnap.site/layouts#testimonials-cards",
      "svg": "https://blocksnap.site/patterns/testimonials-cards.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "testimonials-single",
      "section": "Testimonials",
      "name": "One big quote",
      "description": "One large quote with the logo, name and role, and dots or arrows for more.",
      "when_to_use": "One famous customer or one strong line says it best.",
      "url": "https://blocksnap.site/layouts#testimonials-single",
      "svg": "https://blocksnap.site/patterns/testimonials-single.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "testimonials-story-cards",
      "section": "Testimonials",
      "name": "Customer story cards",
      "description": "Tall photo cards, each with a logo, one big number and a short quote.",
      "when_to_use": "Each customer has one headline result worth showing.",
      "url": "https://blocksnap.site/layouts#testimonials-story-cards",
      "svg": "https://blocksnap.site/patterns/testimonials-story-cards.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "testimonials-logo-tabs",
      "section": "Testimonials",
      "name": "Logo tabs switch the story",
      "description": "A row of customer logos acts as tabs and opens a case card with metrics.",
      "when_to_use": "Known brands, each with its own story and numbers.",
      "url": "https://blocksnap.site/layouts#testimonials-logo-tabs",
      "svg": "https://blocksnap.site/patterns/testimonials-logo-tabs.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "testimonials-split",
      "section": "Testimonials",
      "name": "Heading left, quotes right",
      "description": "A heading and a button in the left column, stacked quotes or a photo and quote on the right.",
      "when_to_use": "You want the section to end in an action, not only in praise.",
      "url": "https://blocksnap.site/layouts#testimonials-split",
      "svg": "https://blocksnap.site/patterns/testimonials-split.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "testimonials-accordion",
      "section": "Testimonials",
      "name": "Expanding story panels",
      "description": "Coloured vertical panels: one is open, the others show only a logo.",
      "when_to_use": "A strong visual brand with a few rich stories; rare.",
      "url": "https://blocksnap.site/layouts#testimonials-accordion",
      "svg": "https://blocksnap.site/patterns/testimonials-accordion.svg",
      "guide": "https://blocksnap.site/research/testimonials-section"
    },
    {
      "id": "stats-band-dark",
      "section": "Stats and numbers",
      "name": "Big numbers on a dark band",
      "description": "A dark or coloured band with a heading and a row of large numbers, often split by thin dividers.",
      "when_to_use": "You have a few strong numbers and want them to stand out from the page.",
      "url": "https://blocksnap.site/layouts#stats-band-dark",
      "svg": "https://blocksnap.site/patterns/stats-band-dark.svg"
    },
    {
      "id": "stats-row",
      "section": "Stats and numbers",
      "name": "Centred heading and a numbers row",
      "description": "A centred heading above a light row of big numbers, each with a short label.",
      "when_to_use": "You want a calm, simple proof band that fits any page.",
      "url": "https://blocksnap.site/layouts#stats-row",
      "svg": "https://blocksnap.site/patterns/stats-row.svg"
    },
    {
      "id": "stats-ratings",
      "section": "Stats and numbers",
      "name": "Numbers mixed with ratings",
      "description": "User counts sit next to app store stars and review-site badges, often followed by review cards.",
      "when_to_use": "Your product has strong public ratings to show beside your usage numbers.",
      "url": "https://blocksnap.site/layouts#stats-ratings",
      "svg": "https://blocksnap.site/patterns/stats-ratings.svg"
    },
    {
      "id": "stats-image",
      "section": "Stats and numbers",
      "name": "Photo-led stats",
      "description": "A large photo and a display headline, with a row of numbers under it.",
      "when_to_use": "Rare: your brand has a strong photo and the numbers tell a human story.",
      "url": "https://blocksnap.site/layouts#stats-image",
      "svg": "https://blocksnap.site/patterns/stats-image.svg"
    },
    {
      "id": "trust-award-badges",
      "section": "Trust, security and awards",
      "name": "Award badges row",
      "description": "A row of review-site award shields under a short claim about your rankings.",
      "when_to_use": "You win awards on review sites and sell to buyers who compare tools there.",
      "url": "https://blocksnap.site/layouts#trust-award-badges",
      "svg": "https://blocksnap.site/patterns/trust-award-badges.svg"
    },
    {
      "id": "trust-security-showcase",
      "section": "Trust, security and awards",
      "name": "Security feature showcase",
      "description": "Security shown as a product section: a headline, product UI and a few key points, often dark.",
      "when_to_use": "Security is part of the product itself, as with developer and platform tools.",
      "url": "https://blocksnap.site/layouts#trust-security-showcase",
      "svg": "https://blocksnap.site/patterns/trust-security-showcase.svg"
    },
    {
      "id": "trust-compliance-badges",
      "section": "Trust, security and awards",
      "name": "Compliance seals row",
      "description": "A heading, then a row of round compliance seals and a link to the trust center.",
      "when_to_use": "You sell to teams that must check security and privacy rules before they buy.",
      "url": "https://blocksnap.site/layouts#trust-compliance-badges",
      "svg": "https://blocksnap.site/patterns/trust-compliance-badges.svg"
    },
    {
      "id": "trust-analyst-cards",
      "section": "Trust, security and awards",
      "name": "Analyst recognition cards",
      "description": "A few cards, one per analyst or review-site report, each with a badge or chart.",
      "when_to_use": "Analyst firms name you in their reports and enterprise buyers trust them.",
      "url": "https://blocksnap.site/layouts#trust-analyst-cards",
      "svg": "https://blocksnap.site/patterns/trust-analyst-cards.svg"
    },
    {
      "id": "trust-compliance-split",
      "section": "Trust, security and awards",
      "name": "Text left, seals grid right",
      "description": "A dark band with text and a trust center button at the left and a small grid of seals at the right.",
      "when_to_use": "Rare: you want compliance to read as a calm, separate promise.",
      "url": "https://blocksnap.site/layouts#trust-compliance-split",
      "svg": "https://blocksnap.site/patterns/trust-compliance-split.svg"
    },
    {
      "id": "trust-badge-wall",
      "section": "Trust, security and awards",
      "name": "Heading left, badge wall right",
      "description": "A bold review-site claim at the left and a dense wall of award shields at the right.",
      "when_to_use": "Rare: you hold many awards and want sheer volume to make the point.",
      "url": "https://blocksnap.site/layouts#trust-badge-wall",
      "svg": "https://blocksnap.site/patterns/trust-badge-wall.svg"
    },
    {
      "id": "integrations-split",
      "section": "Integrations",
      "name": "Text left, icon grid right",
      "description": "A heading and a see-all link on one side, a grid of app icon tiles on the other.",
      "when_to_use": "You connect to many tools and want a clear link to the full list.",
      "url": "https://blocksnap.site/layouts#integrations-split",
      "svg": "https://blocksnap.site/patterns/integrations-split.svg"
    },
    {
      "id": "integrations-row",
      "section": "Integrations",
      "name": "Centred heading and icon rows",
      "description": "A centred heading, one or two rows of app icons or logo pills, then a view-all button.",
      "when_to_use": "You want a short, centred section that names your best-known integrations.",
      "url": "https://blocksnap.site/layouts#integrations-row",
      "svg": "https://blocksnap.site/patterns/integrations-row.svg"
    },
    {
      "id": "integrations-cards",
      "section": "Integrations",
      "name": "Integration cards",
      "description": "One card per integration with its icon, name and one line, in scrolling rows or with a featured card.",
      "when_to_use": "Each integration does something worth a line of explanation.",
      "url": "https://blocksnap.site/layouts#integrations-cards",
      "svg": "https://blocksnap.site/patterns/integrations-cards.svg"
    },
    {
      "id": "integrations-cloud",
      "section": "Integrations",
      "name": "Icon cloud around the text",
      "description": "Many app icons scattered across the section, with the heading in a gap in the middle.",
      "when_to_use": "Rare: you have a very large catalog and want it to feel vast at a glance.",
      "url": "https://blocksnap.site/layouts#integrations-cloud",
      "svg": "https://blocksnap.site/patterns/integrations-cloud.svg"
    },
    {
      "id": "integrations-hub",
      "section": "Integrations",
      "name": "Hub with the product in the centre",
      "description": "Your logo sits in the middle and partner icons orbit it or connect to it with lines.",
      "when_to_use": "Rare: your product is the place where data from other tools meets.",
      "url": "https://blocksnap.site/layouts#integrations-hub",
      "svg": "https://blocksnap.site/patterns/integrations-hub.svg"
    },
    {
      "id": "pricing-tiers",
      "section": "Pricing",
      "name": "Plan tiers",
      "description": "Three or four plan cards, one highlighted, often with a billing or audience toggle.",
      "when_to_use": "Your pricing page, or a homepage for a simple product with clear plans.",
      "url": "https://blocksnap.site/layouts#pricing-tiers",
      "svg": "https://blocksnap.site/patterns/pricing-tiers.svg",
      "guide": "https://blocksnap.site/research/pricing-section"
    },
    {
      "id": "pricing-teaser",
      "section": "Pricing",
      "name": "Pricing teaser",
      "description": "A short pricing claim and a button to the pricing page, with no plans shown.",
      "when_to_use": "Your homepage, when the full plans live on their own page.",
      "url": "https://blocksnap.site/layouts#pricing-teaser",
      "svg": "https://blocksnap.site/patterns/pricing-teaser.svg",
      "guide": "https://blocksnap.site/research/pricing-section"
    },
    {
      "id": "pricing-calculator",
      "section": "Pricing",
      "name": "Usage calculator",
      "description": "A slider or inputs that show a live price, or tables of free and paid usage.",
      "when_to_use": "Usage-based products, where the price depends on how much people use.",
      "url": "https://blocksnap.site/layouts#pricing-calculator",
      "svg": "https://blocksnap.site/patterns/pricing-calculator.svg",
      "guide": "https://blocksnap.site/research/pricing-section"
    },
    {
      "id": "pricing-single",
      "section": "Pricing",
      "name": "Single plan spotlight",
      "description": "One plan or price formula, alone or beside short promo copy.",
      "when_to_use": "You have one plan or one clear starting price.",
      "url": "https://blocksnap.site/layouts#pricing-single",
      "svg": "https://blocksnap.site/patterns/pricing-single.svg",
      "guide": "https://blocksnap.site/research/pricing-section"
    },
    {
      "id": "pricing-product-cards",
      "section": "Pricing",
      "name": "Product cards with a from price",
      "description": "Product image cards, each with a “starting at” price.",
      "when_to_use": "You sell several products, each with its own pricing; rare.",
      "url": "https://blocksnap.site/layouts#pricing-product-cards",
      "svg": "https://blocksnap.site/patterns/pricing-product-cards.svg",
      "guide": "https://blocksnap.site/research/pricing-section"
    },
    {
      "id": "faq-centred",
      "section": "FAQ",
      "name": "Centred accordion",
      "description": "A centred heading over a narrow accordion of questions, with an optional “see more” link.",
      "when_to_use": "Most homepages: a short list of common questions.",
      "url": "https://blocksnap.site/layouts#faq-centred",
      "svg": "https://blocksnap.site/patterns/faq-centred.svg",
      "guide": "https://blocksnap.site/research/faq-section"
    },
    {
      "id": "faq-split",
      "section": "FAQ",
      "name": "Heading left, accordion right",
      "description": "The heading and a contact link in a left column, the accordion in the wider right column.",
      "when_to_use": "You want a clear heading and a way to reach a person beside the answers.",
      "url": "https://blocksnap.site/layouts#faq-split",
      "svg": "https://blocksnap.site/patterns/faq-split.svg",
      "guide": "https://blocksnap.site/research/faq-section"
    },
    {
      "id": "faq-grid",
      "section": "FAQ",
      "name": "Two-column grid",
      "description": "Closed question cards in two columns.",
      "when_to_use": "Many short questions of similar weight; rare.",
      "url": "https://blocksnap.site/layouts#faq-grid",
      "svg": "https://blocksnap.site/patterns/faq-grid.svg",
      "guide": "https://blocksnap.site/research/faq-section"
    },
    {
      "id": "faq-categories",
      "section": "FAQ",
      "name": "Category sidebar",
      "description": "A category list with counts on the side, and numbered questions next to it.",
      "when_to_use": "Long FAQs that cover billing, setup and product topics; rare.",
      "url": "https://blocksnap.site/layouts#faq-categories",
      "svg": "https://blocksnap.site/patterns/faq-categories.svg",
      "guide": "https://blocksnap.site/research/faq-section"
    },
    {
      "id": "faq-collapsed",
      "section": "FAQ",
      "name": "Collapsed bar",
      "description": "The whole FAQ is one bar that expands when clicked.",
      "when_to_use": "You want the questions available but out of the way; rare.",
      "url": "https://blocksnap.site/layouts#faq-collapsed",
      "svg": "https://blocksnap.site/patterns/faq-collapsed.svg",
      "guide": "https://blocksnap.site/research/faq-section"
    },
    {
      "id": "cta-centred-light",
      "section": "Call to action",
      "name": "Centred on white",
      "description": "A plain light section with a big centred headline, sometimes with a product shot or images below.",
      "when_to_use": "Your page is light and calm, and the headline is strong enough alone.",
      "url": "https://blocksnap.site/layouts#cta-centred-light",
      "svg": "https://blocksnap.site/patterns/cta-centred-light.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-split-image",
      "section": "Call to action",
      "name": "Split with image",
      "description": "Copy and buttons on one side, a photo, product shot or collage on the other.",
      "when_to_use": "You have one more picture that shows the result.",
      "url": "https://blocksnap.site/layouts#cta-split-image",
      "svg": "https://blocksnap.site/patterns/cta-split-image.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-centred-colour",
      "section": "Call to action",
      "name": "Centred on a brand-colour band",
      "description": "A full-width band in the brand colour or a gradient, with a centred headline and one or two buttons.",
      "when_to_use": "You want the last ask to stand out from a light page.",
      "url": "https://blocksnap.site/layouts#cta-centred-colour",
      "svg": "https://blocksnap.site/patterns/cta-centred-colour.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-centred-dark",
      "section": "Call to action",
      "name": "Centred on dark",
      "description": "A dark band with centred copy, often with a soft glow or a dimmed photo behind.",
      "when_to_use": "Your brand is dark, or the page ends on a dark footer.",
      "url": "https://blocksnap.site/layouts#cta-centred-dark",
      "svg": "https://blocksnap.site/patterns/cta-centred-dark.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-left-stack",
      "section": "Call to action",
      "name": "Left-aligned stack",
      "description": "A big left-aligned headline and one button, with a texture or graphic on the right.",
      "when_to_use": "Your headline is short and bold and the rest of the page is left aligned.",
      "url": "https://blocksnap.site/layouts#cta-left-stack",
      "svg": "https://blocksnap.site/patterns/cta-left-stack.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-inset-card",
      "section": "Call to action",
      "name": "Inset card",
      "description": "A rounded card in colour or dark, set inside the page margins.",
      "when_to_use": "You want a strong ask without a full-width band.",
      "url": "https://blocksnap.site/layouts#cta-inset-card",
      "svg": "https://blocksnap.site/patterns/cta-inset-card.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-inline-row",
      "section": "Call to action",
      "name": "Inline row",
      "description": "Headline on the left, buttons on the right, in one short row.",
      "when_to_use": "The page is already long and the last ask should be compact.",
      "url": "https://blocksnap.site/layouts#cta-inline-row",
      "svg": "https://blocksnap.site/patterns/cta-inline-row.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "cta-form",
      "section": "Call to action",
      "name": "Call to action with lead form",
      "description": "Copy on the left, a contact or qualification form on the right.",
      "when_to_use": "Sales-led products where the next step is a conversation.",
      "url": "https://blocksnap.site/layouts#cta-form",
      "svg": "https://blocksnap.site/patterns/cta-form.svg",
      "guide": "https://blocksnap.site/research/cta-section"
    },
    {
      "id": "resources-card-row",
      "section": "Resources and blog",
      "name": "Card row",
      "description": "A heading with a view all link, then a row of image cards with tag, title and read more.",
      "when_to_use": "You publish often and have a good image for each post.",
      "url": "https://blocksnap.site/layouts#resources-card-row",
      "svg": "https://blocksnap.site/patterns/resources-card-row.svg"
    },
    {
      "id": "resources-carousel",
      "section": "Resources and blog",
      "name": "Tabbed or scrolling cards",
      "description": "Topic tabs or arrows above a row of cards that bleed off the edge of the page.",
      "when_to_use": "You have many posts across several topics and want to show the range.",
      "url": "https://blocksnap.site/layouts#resources-carousel",
      "svg": "https://blocksnap.site/patterns/resources-carousel.svg"
    },
    {
      "id": "resources-featured-list",
      "section": "Resources and blog",
      "name": "Featured story with a list",
      "description": "One large story on the left, a few small stacked items on the right.",
      "when_to_use": "One post or launch matters most right now and should lead.",
      "url": "https://blocksnap.site/layouts#resources-featured-list",
      "svg": "https://blocksnap.site/patterns/resources-featured-list.svg"
    },
    {
      "id": "resources-text-list",
      "section": "Resources and blog",
      "name": "Text-only news list",
      "description": "Dated text cards or news and press columns, with no images.",
      "when_to_use": "You share news and announcements and do not have images for them.",
      "url": "https://blocksnap.site/layouts#resources-text-list",
      "svg": "https://blocksnap.site/patterns/resources-text-list.svg"
    },
    {
      "id": "resources-link-grid",
      "section": "Resources and blog",
      "name": "Resource hub grid",
      "description": "A grid of icon tiles that link to docs, blog, webinars and academy.",
      "when_to_use": "You want to send visitors to learning areas rather than single posts.",
      "url": "https://blocksnap.site/layouts#resources-link-grid",
      "svg": "https://blocksnap.site/patterns/resources-link-grid.svg"
    },
    {
      "id": "footer-brand-left",
      "section": "Footer",
      "name": "Brand column and sitemap",
      "description": "Logo, a short blurb and social links on the left, with a few link columns on the right.",
      "when_to_use": "Most SaaS sites, and any site with a handful of pages.",
      "url": "https://blocksnap.site/layouts#footer-brand-left",
      "svg": "https://blocksnap.site/patterns/footer-brand-left.svg",
      "guide": "https://blocksnap.site/research/footer"
    },
    {
      "id": "footer-mega",
      "section": "Footer",
      "name": "Dense mega sitemap",
      "description": "Many columns with many links each, often with a language picker, mostly on dark.",
      "when_to_use": "Large products with many pages, docs and regions.",
      "url": "https://blocksnap.site/layouts#footer-mega",
      "svg": "https://blocksnap.site/patterns/footer-mega.svg",
      "guide": "https://blocksnap.site/research/footer"
    },
    {
      "id": "footer-columns",
      "section": "Footer",
      "name": "Plain column sitemap",
      "description": "A few short link columns with no brand column, and a legal row below.",
      "when_to_use": "You want a simple footer and the logo already sits in the navigation.",
      "url": "https://blocksnap.site/layouts#footer-columns",
      "svg": "https://blocksnap.site/patterns/footer-columns.svg",
      "guide": "https://blocksnap.site/research/footer"
    },
    {
      "id": "footer-help-band",
      "section": "Footer",
      "name": "Sitemap with help band",
      "description": "Link columns plus a large “How can we help?” line, a contact link or a phone number.",
      "when_to_use": "Sales-led or support-heavy products where talking to someone matters.",
      "url": "https://blocksnap.site/layouts#footer-help-band",
      "svg": "https://blocksnap.site/patterns/footer-help-band.svg",
      "guide": "https://blocksnap.site/research/footer"
    },
    {
      "id": "footer-newsletter",
      "section": "Footer",
      "name": "Sitemap with newsletter signup",
      "description": "An email field and a subscribe button in its own column or above the link columns.",
      "when_to_use": "You publish a blog or updates and want to keep in touch.",
      "url": "https://blocksnap.site/layouts#footer-newsletter",
      "svg": "https://blocksnap.site/patterns/footer-newsletter.svg",
      "guide": "https://blocksnap.site/research/footer"
    },
    {
      "id": "footer-wordmark",
      "section": "Footer",
      "name": "Giant wordmark",
      "description": "The brand name set huge across the footer, at the top or the bottom.",
      "when_to_use": "Strong brands that want the page to end on the name.",
      "url": "https://blocksnap.site/layouts#footer-wordmark",
      "svg": "https://blocksnap.site/patterns/footer-wordmark.svg",
      "guide": "https://blocksnap.site/research/footer"
    }
  ]
}