[
  {
    "id": "web-hero-clickup",
    "title": "ClickUp — hero with inline email capture and product preview",
    "platform": "web",
    "app": "ClickUp",
    "pattern": "hero",
    "description": "Bold black headline ('Manage operations like a boss') paired with an inline work-email field and a purple Get Started button, with 'Free forever, no credit card' friction-reducers right beside the CTA. A floating product screenshot with a play button sits on a sweeping purple gradient blob, and a logo strip ('Join 800,000+ teams' with Samsung, IBM, Booking.com) anchors the fold with social proof.",
    "tags": ["hero", "landing", "cta", "email-capture", "signup", "screenshot", "social-proof", "gradient"],
    "mobbin_url": "https://mobbin.com/sites/sections/8327bdfc-5c9d-4240-b4af-9431eebd0f9e",
    "image": "images/web-hero-clickup.jpg"
  },
  {
    "id": "web-hero-framer",
    "title": "Framer — dark hero framed inside the product editor",
    "platform": "web",
    "app": "Framer",
    "pattern": "hero",
    "description": "Shows the marketing site rendered inside Framer's own editor chrome, so the hero doubles as a product demo. Deep purple-on-black gradient scene, centered white headline with an emotional hook, and a single high-contrast purple 'Sign up - it's free' pill button. Great example of a dark, immersive hero where the product is the visual.",
    "tags": ["hero", "dark", "cta", "signup", "gradient", "screenshot", "landing"],
    "mobbin_url": "https://mobbin.com/sites/sections/6b15ed49-32d7-4761-b7f8-fefed2414fde",
    "image": "images/web-hero-framer.jpg"
  },
  {
    "id": "web-hero-passionfroot",
    "title": "Passionfroot — warm minimal hero with floating UI fragments",
    "platform": "web",
    "app": "Passionfroot",
    "pattern": "hero",
    "description": "Large serif headline ('Where creators do brand deals') centered on a warm cream background, one short subline, and a single black 'Start for Free' pill. Product-UI fragments (payment card, calendar, charts) float in from the edges at low contrast, hinting at the product without competing with the copy. Excellent restraint and hierarchy.",
    "tags": ["hero", "minimal", "cta", "serif", "landing", "light", "screenshot"],
    "mobbin_url": "https://mobbin.com/sites/sections/d008689a-c73f-4513-a760-25a93ef6f043",
    "image": "images/web-hero-passionfroot.jpg"
  },
  {
    "id": "web-hero-mural",
    "title": "Mural — playful oversized CTA hero",
    "platform": "web",
    "app": "Mural",
    "pattern": "hero",
    "description": "A vivid pink section where the CTA itself is the hero: a giant yellow sticky-note-shaped button reading 'Get started' in a large serif, echoing the product's whiteboard sticky notes. Tiny supporting line above and a persistent 'Sign up, free forever' button in the nav. Memorable, brand-forward take on a conversion section.",
    "tags": ["hero", "cta", "playful", "colorful", "signup", "brand", "landing"],
    "mobbin_url": "https://mobbin.com/sites/sections/edb14076-5e1f-48d8-ba26-5e5e43f9a9b0",
    "image": "images/web-hero-mural.jpg"
  },
  {
    "id": "web-pricing-webflow",
    "title": "Webflow — two-plan pricing with benefit checklist",
    "platform": "web",
    "app": "Webflow",
    "pattern": "pricing",
    "description": "Split layout: left column carries the headline and three checkmarked benefits, right side shows two compact plan cards (Freelancer $16, Agency $35) with per-seat pricing and short feature lists. The recommended plan gets a solid purple fill while the other stays light, making the preferred choice obvious at a glance.",
    "tags": ["pricing", "plans", "cards", "comparison", "saas", "checklist", "cta"],
    "mobbin_url": "https://mobbin.com/sites/sections/5f39c974-75c8-4ea0-abdb-b9bdaa05596d",
    "image": "images/web-pricing-webflow.jpg"
  },
  {
    "id": "web-pricing-elevenlabs",
    "title": "ElevenLabs — six-tier plan comparison table",
    "platform": "web",
    "app": "ElevenLabs",
    "pattern": "pricing",
    "description": "A dense 'Compare our plans' matrix across six tiers (Free to Business), grouped by capability sections like Credits and Text to Speech. Each column gets its own 'Get started' button with the popular tier inverted in black; green checks and gray crosses keep row scanning fast. Strong reference for detailed feature-comparison pricing.",
    "tags": ["pricing", "comparison", "table", "tiers", "saas", "matrix", "cta"],
    "mobbin_url": "https://mobbin.com/sites/sections/ed1a4962-9ba3-4765-9ec1-134cac2a9d2e",
    "image": "images/web-pricing-elevenlabs.jpg"
  },
  {
    "id": "web-pricing-apollo",
    "title": "Apollo — compare-plans table with 'most popular' highlight",
    "platform": "web",
    "app": "Apollo",
    "pattern": "pricing",
    "description": "Four-column comparison ($0 to $119/user) with credit allotments under each price and yellow CTA buttons, the Professional tier flagged with a 'Most Popular' badge and a black button. Features are grouped into collapsible category rows (Outbound, Inbound) with icons, keeping a long matrix scannable.",
    "tags": ["pricing", "comparison", "table", "plans", "badge", "saas", "collapsible"],
    "mobbin_url": "https://mobbin.com/sites/sections/04450619-1e0b-41af-bb83-dc67a4fca119",
    "image": "images/web-pricing-apollo.jpg"
  },
  {
    "id": "web-pricing-maze",
    "title": "Maze — editorial pricing cards on warm neutral background",
    "platform": "web",
    "app": "Maze",
    "pattern": "pricing",
    "description": "Pricing as an asymmetric card grid: Free and Starter stacked on the left with price badges ('$99 per month') in the card corner, Enterprise given a larger card with a lime graphic accent and a long 'Enterprise includes' list. Serif-flavored headings and generous whitespace make a normally dry section feel designed.",
    "tags": ["pricing", "cards", "plans", "enterprise", "minimal", "editorial", "saas"],
    "mobbin_url": "https://mobbin.com/sites/sections/3227e1e7-10d9-4ac3-bf5d-b7ba286afa33",
    "image": "images/web-pricing-maze.jpg"
  },
  {
    "id": "web-features-square",
    "title": "Square — alternating feature rows with photography",
    "platform": "web",
    "app": "Square",
    "pattern": "features",
    "description": "Four stacked feature rows, each pairing a small real-world photo of the product in use with a bold benefit heading, two lines of copy, and a 'Learn more' link, separated by hairline rules. Extremely scannable rhythm that grounds software features in physical retail contexts.",
    "tags": ["features", "list", "photography", "benefits", "rows", "minimal", "learn-more"],
    "mobbin_url": "https://mobbin.com/sites/sections/54ba196c-c979-4564-a54a-c02a23e8e8f7",
    "image": "images/web-features-square.jpg"
  },
  {
    "id": "web-features-fibery",
    "title": "Fibery — icon grid of secondary features",
    "platform": "web",
    "app": "Fibery",
    "pattern": "features",
    "description": "A 4-column grid of 16 lightweight feature entries, each just a small colorful icon and a short label (Map view, Forms, Whiteboards, Automation Rules). Shows how to compress a long capability list into a dense, skimmable grid without screenshots, with a 'new' badge for fresh items.",
    "tags": ["features", "grid", "icons", "bento", "capabilities", "compact", "saas"],
    "mobbin_url": "https://mobbin.com/sites/sections/3f148051-6eff-401c-bc33-113cc1d2e964",
    "image": "images/web-features-fibery.jpg"
  },
  {
    "id": "web-features-mural",
    "title": "Mural — product screenshot gallery grid",
    "platform": "web",
    "app": "Mural",
    "pattern": "features",
    "description": "A 2-up grid of framed product screenshots on saturated pink/purple panels, each captioned (blank board, sticky-note session) with a download link. Demonstrates presenting product UI states as a bold, color-blocked gallery rather than isolated floating screenshots.",
    "tags": ["features", "screenshots", "grid", "gallery", "colorful", "product", "bento"],
    "mobbin_url": "https://mobbin.com/sites/sections/2f012efb-ee2c-4087-8a5a-04b88d103f20",
    "image": "images/web-features-mural.jpg"
  },
  {
    "id": "web-social-proof-tines",
    "title": "Tines — objection-handling proof wall with customer stats",
    "platform": "web",
    "app": "Tines",
    "pattern": "social-proof",
    "description": "Leads with the skeptic's voice ('Sounds... hard to believe?') on a card that cites 200+ G2 reviews at 4.8 stars, then backs it with a mosaic of stat and quote cards from named enterprise logos (Elastic, Snowflake, Mars, Intercom) — '50% reduction in time per ticket', '10 hours saved every day'. Quantified proof beats generic praise.",
    "tags": ["social-proof", "testimonials", "stats", "logos", "g2", "reviews", "bento", "enterprise"],
    "mobbin_url": "https://mobbin.com/sites/sections/58a55724-34ad-4dc5-accb-743f3b00cd68",
    "image": "images/web-social-proof-tines.jpg"
  },
  {
    "id": "web-social-proof-mixpanel",
    "title": "Mixpanel — testimonial marquee mixing tweets and NPS quotes",
    "platform": "web",
    "app": "Mixpanel",
    "pattern": "social-proof",
    "description": "Dark purple gradient section with a large headline over two horizontal rows of testimonial cards: named Twitter posts with avatars on top, anonymous NPS-survey quotes below. The overflowing carded rows imply volume of praise, and mixing attributed tweets with NPS verbatims adds credibility range.",
    "tags": ["social-proof", "testimonials", "tweets", "nps", "dark", "carousel", "cards"],
    "mobbin_url": "https://mobbin.com/sites/sections/02e3c65c-ed1d-42b0-9439-4c285f360e44",
    "image": "images/web-social-proof-mixpanel.jpg"
  },
  {
    "id": "web-social-proof-klarna",
    "title": "Klarna — Trustpilot rating with rotating review cards",
    "platform": "web",
    "app": "Klarna",
    "pattern": "social-proof",
    "description": "Left column stacks a Trustpilot widget (4.0, 370,674 reviews), a 'Shoppers love Klarna' headline, and a 100M+ users claim; right side shows two large star-rated quote cards in brand purple/dark tones with arrow controls to page through more. Third-party rating plus first-person quotes in one tight band, with a small honesty disclaimer.",
    "tags": ["social-proof", "testimonials", "trustpilot", "reviews", "ratings", "carousel", "fintech"],
    "mobbin_url": "https://mobbin.com/sites/sections/1a0904da-e870-48b5-bd03-18e75cbb8de3",
    "image": "images/web-social-proof-klarna.jpg"
  },
  {
    "id": "web-social-proof-sproutsocial",
    "title": "Sprout Social — G2 review cards with star ratings and titles",
    "platform": "web",
    "app": "Sprout Social",
    "pattern": "social-proof",
    "description": "Three equal review cards under a plain 'What our customers say about us' heading, each with a quoted review title, star rating, excerpt, 'Read more' link, and an avatar with the reviewer's name and job title; a G2 logo sits in the corner to source the reviews. The canonical, safe testimonial-card pattern executed cleanly.",
    "tags": ["social-proof", "testimonials", "reviews", "g2", "cards", "stars", "avatars"],
    "mobbin_url": "https://mobbin.com/sites/sections/15b459ef-ab1a-4648-8f36-940ab45d4731",
    "image": "images/web-social-proof-sproutsocial.jpg"
  },
  {
    "id": "web-landing-june",
    "title": "June — centered SaaS landing with two-tone headline",
    "platform": "web",
    "app": "June",
    "pattern": "landing",
    "description": "Classic centered SaaS hero: announcement banner up top, simple nav, huge two-tone headline ('A new way to do product analytics' with the key phrase in purple), one-sentence subcopy, a single 'Get started for free' button, and the dashboard screenshot rising from the fold. A hand-drawn annotation ('Auto-generated reports') points into the screenshot for personality.",
    "tags": ["landing", "hero", "saas", "cta", "screenshot", "centered", "analytics", "banner"],
    "mobbin_url": "https://mobbin.com/screens/b0590443-627a-4533-934a-5ebcf03534a5",
    "image": "images/web-landing-june.jpg"
  },
  {
    "id": "web-landing-productboard",
    "title": "Productboard — landing hero with UI-fragment collage",
    "platform": "web",
    "app": "Productboard",
    "pattern": "landing",
    "description": "Centered headline with the value phrase highlighted in blue, dual CTAs ('Get started' primary, 'Request demo' secondary), and an announcement pill above the nav. Below the fold, the product appears as a collage of cropped UI cards — roadmap, charts, a customer quote — rather than one monolithic screenshot, conveying breadth of features.",
    "tags": ["landing", "hero", "saas", "cta", "screenshot", "collage", "demo", "roadmap"],
    "mobbin_url": "https://mobbin.com/screens/9dae958f-c1a5-4b8f-9409-875008fd9b71",
    "image": "images/web-landing-productboard.jpg"
  },
  {
    "id": "web-landing-stackai",
    "title": "StackAI — monochrome enterprise AI landing",
    "platform": "web",
    "app": "StackAI",
    "pattern": "landing",
    "description": "Near-monochrome landing: oversized serif-ish headline ('From process to AI agent, in minutes'), two muted lines of enterprise positioning, then paired CTAs with the sales-led action ('Get a Demo') in solid black and 'Try It Now' in gray. A large workflow-canvas screenshot in a device frame fills the lower half. Quiet, credible enterprise tone.",
    "tags": ["landing", "hero", "enterprise", "ai", "minimal", "cta", "screenshot", "monochrome"],
    "mobbin_url": "https://mobbin.com/screens/00877e31-4b84-477f-844f-000bb4b4405e",
    "image": "images/web-landing-stackai.jpg"
  },
  {
    "id": "web-signup-ghost",
    "title": "Ghost — single-column create-account form",
    "platform": "web",
    "app": "Ghost",
    "pattern": "signup",
    "description": "Chromeless signup: just a centered logo, a bold 'Create your account.' heading, three labeled fields (full name, email, password), and one full-width muted-rose 'Create Account' button on a soft gradient background. Zero navigation or distractions — the minimal signup archetype.",
    "tags": ["signup", "form", "minimal", "onboarding", "account", "single-column", "cta"],
    "mobbin_url": "https://mobbin.com/screens/da622210-897c-40c7-a1fd-ffc5314b9e8f",
    "image": "images/web-signup-ghost.jpg"
  },
  {
    "id": "web-signup-hodinkee",
    "title": "HODINKEE — editorial-brand signup with stacked fields",
    "platform": "web",
    "app": "HODINKEE",
    "pattern": "signup",
    "description": "Serif 'Sign up' heading over five stacked placeholder-labeled fields and a full-width black uppercase button, keeping the brand's editorial typography even in a utility flow. Inline password requirement hint below the field and legal/reCAPTCHA fine print under the button show how to handle compliance copy without clutter.",
    "tags": ["signup", "form", "editorial", "serif", "account", "validation", "legal"],
    "mobbin_url": "https://mobbin.com/screens/51be05c9-eae8-4e46-9bb1-1de560a6fad1",
    "image": "images/web-signup-hodinkee.jpg"
  },
  {
    "id": "web-signup-wayyy",
    "title": "Wayyy — compact signup with side-by-side name fields",
    "platform": "web",
    "app": "Wayyy",
    "pattern": "signup",
    "description": "Tight centered form: logo mark, small 'Sign up' label, first/last name paired on one row, email and password stacked, a terms checkbox with linked policy, a full-width blue 'Create Account' button, and a 'Already have an account? Login' escape hatch. Textbook field grouping and visual order for a minimal-friction signup.",
    "tags": ["signup", "form", "minimal", "checkbox", "terms", "account", "onboarding"],
    "mobbin_url": "https://mobbin.com/screens/d9403e16-63af-4faf-ad50-c64f5324b0d6",
    "image": "images/web-signup-wayyy.jpg"
  },
  {
    "id": "web-dashboard-felt",
    "title": "Felt — map workspace dashboard with thumbnail grid",
    "platform": "web",
    "app": "Felt",
    "pattern": "dashboard",
    "description": "Left sidebar with nav (Recents, Drafts, Settings) and a projects list, main area showing a dismissible onboarding row of video tutorials above a grid of colorful map-thumbnail cards with title, owner, and last-viewed metadata. A trial-countdown card with 'Talk to Sales' CTA sits pinned at the sidebar bottom — good upgrade-nudge placement.",
    "tags": ["dashboard", "sidebar", "cards", "grid", "thumbnails", "onboarding", "trial", "saas"],
    "mobbin_url": "https://mobbin.com/screens/79f37f27-f1f0-4d31-96ec-899917cb9aa4",
    "image": "images/web-dashboard-felt.jpg"
  },
  {
    "id": "web-dashboard-sana-ai",
    "title": "Sana AI — dark AI-assistant home with suggestion cards",
    "platform": "web",
    "app": "Sana AI",
    "pattern": "dashboard",
    "description": "Dark workspace with a slim sidebar (Home, Templates, Meetings, Files plus color-coded collections), a personal greeting in two-tone type ('Hello, Jane / How can I help you today?'), a row of suggested-content cards, and a persistent chat/ask input across the bottom. A credits meter at the sidebar foot handles usage limits gracefully.",
    "tags": ["dashboard", "dark", "sidebar", "ai", "cards", "chat", "greeting", "assistant"],
    "mobbin_url": "https://mobbin.com/screens/4560f04c-5d7c-4a1c-9316-088ec410a8fb",
    "image": "images/web-dashboard-sana-ai.jpg"
  },
  {
    "id": "web-dashboard-clickup",
    "title": "ClickUp — customizable widget dashboard with edit mode",
    "platform": "web",
    "app": "ClickUp",
    "pattern": "dashboard",
    "description": "Icon-labeled left sidebar (Home, Notifications, Pulse, Goals, Dashboards) beside a widget canvas holding draggable cards — welcome note, chat, docs/links, task list — on a visible layout grid with an 'Edit mode' toggle and '+ Add card' button in the toolbar. A clear reference for user-composable dashboards.",
    "tags": ["dashboard", "sidebar", "widgets", "cards", "customizable", "grid", "saas"],
    "mobbin_url": "https://mobbin.com/screens/21aa1ed3-3c0d-4779-a8bc-1fd991aaf0f5",
    "image": "images/web-dashboard-clickup.jpg"
  },
  {
    "id": "web-dashboard-dovetail",
    "title": "Dovetail — project board with card grid and context menu",
    "platform": "web",
    "app": "Dovetail",
    "pattern": "dashboard",
    "description": "Project workspace showing a grid of content cards (video with thumbnail, transcript notes, empty-state cards like '+ New note' and 'Import data') under a top bar with global search and New note CTA. An open sidebar panel demonstrates show/hide toggles for sections (Notes, Tags, Highlights, Insights) — a nice pattern for user-configurable navigation.",
    "tags": ["dashboard", "sidebar", "cards", "grid", "workspace", "research", "empty-state"],
    "mobbin_url": "https://mobbin.com/screens/bcbc434d-f7e8-44f4-a17a-a00655f0ca4b",
    "image": "images/web-dashboard-dovetail.jpg"
  },
  {
    "id": "web-footer-zendesk",
    "title": "Zendesk — five-column mega footer with newsletter bar",
    "platform": "web",
    "app": "Zendesk",
    "pattern": "footer",
    "description": "Comprehensive sitemap footer: a brand statement ('Champions of customer service') beside five link columns (Products, Features, Resources, Company, Favorite Things), then a distinct newsletter row — 'Enter the fold' with an email field and solid Subscribe button — plus social icons, legal links, and compliance fine print at the bottom.",
    "tags": ["footer", "newsletter", "links", "sitemap", "columns", "social", "legal"],
    "mobbin_url": "https://mobbin.com/sites/sections/2e8bfe6a-f94b-4f8a-84f5-7fd518da9598",
    "image": "images/web-footer-zendesk.jpg"
  },
  {
    "id": "web-footer-shopify",
    "title": "Shopify Supply — black footer with signup band and marquee",
    "platform": "web",
    "app": "Shopify",
    "pattern": "footer",
    "description": "High-contrast black footer opening with a conversion band ('Want more Supply? save 10%') containing a rounded email field with an inline Sign up button, followed by a scrolling 'By merchants, for merchants' marquee ribbon in blue, boxed social icon cells, and a utility row of FAQ/legal links. Footer as brand moment, not just a link dump.",
    "tags": ["footer", "newsletter", "dark", "email-capture", "marquee", "social", "ecommerce"],
    "mobbin_url": "https://mobbin.com/sites/sections/091c7a61-be44-4c2d-bafa-fa3afe0da71c",
    "image": "images/web-footer-shopify.jpg"
  },
  {
    "id": "web-footer-employmenthero",
    "title": "Employment Hero — footer with consent-checkbox newsletter",
    "platform": "web",
    "app": "Employment Hero",
    "pattern": "footer",
    "description": "Six link columns (Company, Support, Region picker, Product, Connect with social icons) above a split lower band pairing a mission statement with a newsletter form that includes explicit GDPR-style consent checkboxes before the purple Subscribe button. Also shows region selection and a full legal link row — a compliance-complete footer.",
    "tags": ["footer", "newsletter", "links", "columns", "consent", "legal", "social"],
    "mobbin_url": "https://mobbin.com/sites/sections/6efab40e-de5e-4dff-bf1c-b28c818a934d",
    "image": "images/web-footer-employmenthero.jpg"
  },
  {
    "id": "web-footer-incommonwith",
    "title": "In Common With — hairline-divided editorial footer",
    "platform": "web",
    "app": "In Common With",
    "pattern": "footer",
    "description": "Refined studio footer organized by thin vertical hairlines: contact and showroom addresses with hours across the top, link columns (Shop, Info, Account) below, and a quiet newsletter block — 'Our Newsletter' label, underlined email input with an outlined Sign Up button, and a privacy note. Typographic, grid-driven, and calm; ideal for premium or editorial brands.",
    "tags": ["footer", "newsletter", "editorial", "minimal", "grid", "links", "typography"],
    "mobbin_url": "https://mobbin.com/sites/sections/f1844604-7696-4970-b30e-43a7669e9ee1",
    "image": "images/web-footer-incommonwith.jpg"
  }
]