[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f1h00t08y7hyaw":3,"public-section-categories":779,"$f32fdcs3nw4icy":1169,"$fr2l7976hbk7y":1582},{"ads":4,"websiteCategories":77,"technologies":521,"locations":644,"announcementBanner":8},[5,11,22,31,38,47,54,61,70],{"id":6,"title":7,"description":8,"description_html":8,"image":8,"sponsor_name":8,"sponsor_logo":8,"sponsor_cta":8,"alt":8,"hash":9,"slot":8,"is_default":10},77,"Nicelydone",null,"px6ccwd9rr6sacqr5parsckwswfgnrjc",1,{"id":12,"title":13,"description":14,"description_html":15,"image":16,"sponsor_name":7,"sponsor_logo":17,"sponsor_cta":18,"alt":19,"hash":20,"slot":21,"is_default":10},79,"Nicelydone SaaS UI Library","The SaaS UI library built for humans and AI agents","The SaaS UI library built\n  for humans and AI agents","nicelydone-04-26-6.png","https:\u002F\u002Fd2ocroys3p1hkd.cloudfront.net\u002Fsponsor\u002Flogo-nd-full.svg","Browse design inspiration","Nicelyd\n  one is a SaaS UI library built for humans and AI agents.","57ecffb17be508237ffc9775270b1aa2","primary",{"id":23,"title":24,"description":25,"description_html":26,"image":27,"sponsor_name":7,"sponsor_logo":17,"sponsor_cta":28,"alt":29,"hash":30,"slot":21,"is_default":10},80,"Nicelydone MCP","Give your AI agent access to 220k real SaaS screens","Give your AI agent access\n  to 220k real SaaS screens","nicelydone-04-26-4.png","Connect Nicelydone MCP","Give your AI age\n  nt SaaS taste with Nicelydone MCP and 220k real screens.","ff3d07e2ce2c374087dd006e9296fd5c",{"id":32,"title":13,"description":33,"description_html":34,"image":35,"sponsor_name":7,"sponsor_logo":17,"sponsor_cta":18,"alt":36,"hash":37,"slot":21,"is_default":10},81,"Find real SaaS UI patterns for humans and AI agents","Find real SaaS UI\n  patterns for humans and AI agents","nicelydone-04-26-1.png","Nicelyd\n  one is a SaaS UI library of real product screens and user flows.","5bffa8d40bbbd955efe19f73285c2f6b",{"id":39,"title":40,"description":41,"description_html":42,"image":43,"sponsor_name":7,"sponsor_logo":17,"sponsor_cta":44,"alt":45,"hash":46,"slot":21,"is_default":10},82,"Nicelydone for AI Agents","The SaaS UI library your AI agent can actually use","The SaaS UI library yo\n  ur AI agent can actually use","nicelydone-04-26-3.png","Give agents SaaS context","Nicely\n  done MCP gives AI agents real SaaS UI examples they can use.","aa81a74a3b2607304365e19ace95be65",{"id":48,"title":24,"description":49,"description_html":50,"image":51,"sponsor_name":7,"sponsor_logo":17,"sponsor_cta":28,"alt":52,"hash":53,"slot":21,"is_default":10},83,"220k real SaaS screens, connected through MCP","220k real SaaS screens, connected t\n  hrough MCP","nicelydone-04-26-5.png","Nicelydone conne\n  cts 220k real SaaS screens to AI agents through MCP.","f7b51a5be622a3bb0a175b0a35a42ac7",{"id":55,"title":40,"description":56,"description_html":57,"image":58,"sponsor_name":7,"sponsor_logo":17,"sponsor_cta":44,"alt":59,"hash":60,"slot":21,"is_default":10},84,"Give your AI agent a SaaS UI library it can actually use","Give\n  your AI agent a SaaS UI library it can actually use","nicelydone-04-26-2.png","Nicely\n  done gives AI agents a usable SaaS UI library for product design context.","7c448a8e2a225d0f0d3e61300a6f3066",{"id":62,"title":63,"description":64,"description_html":8,"image":65,"sponsor_name":63,"sponsor_logo":65,"sponsor_cta":66,"alt":63,"hash":67,"slot":68,"is_default":69},87,"FontPulse","Identify fonts on any website and save your best finds.","\u002Fimages\u002Ffontpulse.png","Get FontPulse","f5a63u3zb5si0sdzkee3hw7r1g3zz6aw","font_sponsor",0,{"id":71,"title":72,"description":73,"description_html":8,"image":74,"sponsor_name":72,"sponsor_logo":8,"sponsor_cta":8,"alt":73,"hash":75,"slot":76,"is_default":69},89,"Readymag","Create your dream website with Readymag","c6f73ab5-abd4-41ff-bac5-eb8b8e181a73.png","c56a52bf292db5de800b481e65bb2e34","secondary",[78,85,92,99,106,112,119,126,133,140,147,154,161,168,175,182,189,195,201,208,215,222,229,236,242,249,256,263,270,276,282,289,295,302,309,316,323,330,337,342,348,355,361,366,373,379,386,393,400,406,412,419,426,432,438,445,452,458,465,472,478,485,492,497,504,510,516],{"id":79,"name":80,"slug":81,"description":82,"_count":83},21,"Agency & consulting","agency-consulting","Browse agency and consulting websites built to win briefs. Get inspired by real services and case studies, curated with HD screenshots and the fonts each website uses.",{"websites":84},2618,{"id":86,"name":87,"slug":88,"description":89,"_count":90},27,"Application","application","Browse application marketing sites for web and mobile. Get inspired by real onboarding flows and feature explainers, curated with HD screenshots and the fonts each website uses.",{"websites":91},462,{"id":93,"name":94,"slug":95,"description":96,"_count":97},8,"Architecture","architecture","Browse architecture websites with clean structure and visuals. Get inspired by real project sheets and portfolio grids, curated with HD screenshots and the fonts each website uses.",{"websites":98},447,{"id":100,"name":101,"slug":102,"description":103,"_count":104},30,"Art & illustration","art-illustration","Explore art and illustration websites that spotlight creativity. Get inspired by real portfolios and galleries, curated with HD screenshots and the fonts each website uses.",{"websites":105},219,{"id":107,"name":108,"slug":109,"description":8,"_count":110},629,"Artificial intelligence","artificial-intelligence",{"websites":111},228,{"id":113,"name":114,"slug":115,"description":116,"_count":117},57,"Automotive","automotive","Browse automotive websites for brands and dealers. Get inspired by real model pages and configurators, curated with HD screenshots and the fonts each website uses.",{"websites":118},31,{"id":120,"name":121,"slug":122,"description":123,"_count":124},37,"Beauty & cosmetics","beauty-cosmetics","Browse beauty and cosmetics websites that convert. Get inspired by real product pages, shade finders, and routines, curated with HD screenshots and the fonts each website uses.",{"websites":125},419,{"id":127,"name":128,"slug":129,"description":130,"_count":131},14,"Branding","branding","Browse branding-focused websites that express identity. Get inspired by real case studies, logo systems, and visuals, curated with HD screenshots and the fonts each website uses.",{"websites":132},572,{"id":134,"name":135,"slug":136,"description":137,"_count":138},9,"Business & corporate","business-corporate","Discover business and corporate websites made modern. Get inspired by real company sites with service and careers pages, curated with HD screenshots and the fonts each website uses.",{"websites":139},481,{"id":141,"name":142,"slug":143,"description":144,"_count":145},62,"Coffee","coffee","Explore coffee websites with aroma-rich branding. Get inspired by real cafés, product shops, and guides, curated with HD screenshots and the fonts each website uses.",{"websites":146},63,{"id":148,"name":149,"slug":150,"description":151,"_count":152},42,"Community","community","Explore community websites that bring people together. Get inspired by real forums, groups, and membership pages, curated with HD screenshots and the fonts each website uses.",{"websites":153},125,{"id":155,"name":156,"slug":157,"description":158,"_count":159},595,"Conference","conference","Browse conference websites that drive registrations. Get inspired by real agendas, speakers, and sponsor pages, curated with HD screenshots and the fonts each website uses.",{"websites":160},28,{"id":162,"name":163,"slug":164,"description":165,"_count":166},48,"Cryptocurrency","cryptocurrency","Discover crypto and web3 websites with clear UX. Get inspired by real token sites and docs hubs, curated with HD screenshots and the fonts each website uses.",{"websites":167},144,{"id":169,"name":170,"slug":171,"description":172,"_count":173},10,"Culture & education","culture-education","Explore culture and education websites for schools and institutions. Get inspired by real course pages and calendars, curated with HD screenshots and the fonts each website uses.",{"websites":174},381,{"id":176,"name":177,"slug":178,"description":179,"_count":180},33,"Datavisualization","datavisualization","Explore data visualization websites that make numbers clear. Get inspired by real dashboards and infographics, curated with HD screenshots and the fonts each website uses.",{"websites":181},15,{"id":183,"name":184,"slug":185,"description":186,"_count":187},7,"Design","design","Explore design studio and agency websites with personality. Get inspired by real services and project pages, curated with HD screenshots and the fonts each website uses.",{"websites":188},1203,{"id":190,"name":191,"slug":192,"description":8,"_count":193},192,"Design studio","design-studio",{"websites":194},152,{"id":196,"name":197,"slug":198,"description":199,"_count":200},41,"Directory","directory","Discover directory websites that organize content. Get inspired by real listings and filtering patterns, curated with HD screenshots and the fonts each website uses.",{"websites":93},{"id":202,"name":203,"slug":204,"description":205,"_count":206},67,"E-commerce","e-commerce","Explore ecommerce websites for online shops. Get inspired by real product pages, carts, and checkouts, curated with HD screenshots and the fonts each website uses.",{"websites":207},1545,{"id":209,"name":210,"slug":211,"description":212,"_count":213},272,"Editorial","editorial","Browse editorial websites with strong systems. Get inspired by real article layouts and publishing sites, curated with HD screenshots and the fonts each website uses.",{"websites":214},73,{"id":216,"name":217,"slug":218,"description":219,"_count":220},61,"Entertainment","entertainment","Discover entertainment websites with high energy. Get inspired by real trailers, schedules, and fan pages, curated with HD screenshots and the fonts each website uses.",{"websites":221},60,{"id":223,"name":224,"slug":225,"description":226,"_count":227},45,"Environmental","environmental","Discover environmental websites with purpose. Get inspired by real campaigns and green initiatives, curated with HD screenshots and the fonts each website uses.",{"websites":228},321,{"id":230,"name":231,"slug":232,"description":233,"_count":234},2,"Event","event","Browse event websites for conferences, festivals, and weddings. Get inspired by real ticketing flows, agendas, and schedules, curated with HD screenshots and the fonts each website uses.",{"websites":235},267,{"id":237,"name":238,"slug":239,"description":240,"_count":241},40,"Experience","experience","Browse experience-led websites with rich interaction. Get inspired by real immersive designs and motion, curated with HD screenshots and the fonts each website uses.",{"websites":162},{"id":243,"name":244,"slug":245,"description":246,"_count":247},4,"Fashion","fashion","Explore fashion websites from global brands to indie boutiques. Get inspired by real lookbooks and product pages, curated with HD screenshots and the fonts each website uses.",{"websites":248},927,{"id":250,"name":251,"slug":252,"description":253,"_count":254},12,"Film & tv","film-tv","Discover film and TV websites with cinematic impact. Get inspired by real trailers, episode guides, and press kits, curated with HD screenshots and the fonts each website uses.",{"websites":255},236,{"id":257,"name":258,"slug":259,"description":260,"_count":261},46,"Finance","finance","Explore finance and fintech websites with clarity. Get inspired by real dashboards and pricing pages, curated with HD screenshots and the fonts each website uses.",{"websites":262},404,{"id":264,"name":265,"slug":266,"description":267,"_count":268},23,"Food & drink","food-drink","Discover food and drink websites with appetite appeal. Get inspired by real menus, product stories, and brand pages, curated with HD screenshots and the fonts each website uses.",{"websites":269},641,{"id":271,"name":272,"slug":273,"description":274,"_count":275},55,"Front-end development","front-end-development","Explore front-end development websites from professionals. Get inspired by real code demos and project writeups, curated with HD screenshots and the fonts each website uses.",{"websites":237},{"id":277,"name":278,"slug":279,"description":280,"_count":281},24,"Fun","fun","Explore playful websites that focus on delight. Get inspired by real interactive layouts and bold colors, curated with HD screenshots and the fonts each website uses.",{"websites":86},{"id":283,"name":284,"slug":285,"description":286,"_count":287},35,"Furnitures","furnitures","Discover furniture websites with tactile presentation. Get inspired by real product pages and room scenes, curated with HD screenshots and the fonts each website uses.",{"websites":288},224,{"id":290,"name":291,"slug":292,"description":293,"_count":294},59,"Governmental","governmental","Explore governmental websites built for service. Get inspired by real portals and form flows, curated with HD screenshots and the fonts each website uses.",{"websites":118},{"id":296,"name":297,"slug":298,"description":299,"_count":300},16,"Health","health","Discover health and wellness websites with clean UX. Get inspired by real service pages and booking flows, curated with HD screenshots and the fonts each website uses.",{"websites":301},318,{"id":303,"name":304,"slug":305,"description":306,"_count":307},38,"Homeware","homeware","Discover homeware websites for everyday living. Get inspired by real lifestyle shops and decor pages, curated with HD screenshots and the fonts each website uses.",{"websites":308},193,{"id":310,"name":311,"slug":312,"description":313,"_count":314},39,"Hotel, place & venue","hotel-place-venue","Explore hotel and venue websites designed to book. Get inspired by real room pages and availability flows, curated with HD screenshots and the fonts each website uses.",{"websites":315},285,{"id":317,"name":318,"slug":319,"description":320,"_count":321},47,"Interior design","interior-design","Browse interior design websites with strong taste. Get inspired by real project sheets and studio portfolios, curated with HD screenshots and the fonts each website uses.",{"websites":322},162,{"id":324,"name":325,"slug":326,"description":327,"_count":328},4300,"Japanese","japanese","Discover Japanese websites with craft and restraint. Get inspired by real minimal layouts and cultural details, curated with HD screenshots and the fonts each website uses.",{"websites":329},603,{"id":331,"name":332,"slug":333,"description":334,"_count":335},58,"Kids","kids","Discover kids-focused websites that balance fun and clarity. Get inspired by real toy shops and product pages, curated with HD screenshots and the fonts each website uses.",{"websites":336},17,{"id":338,"name":339,"slug":340,"description":8,"_count":341},435,"Legal","legal",{"websites":243},{"id":343,"name":344,"slug":345,"description":346,"_count":347},29,"Luxury","luxury","Discover luxury websites with refined aesthetics. Get inspired by real premium layouts and storytelling, curated with HD screenshots and the fonts each website uses.",{"websites":308},{"id":349,"name":350,"slug":351,"description":352,"_count":353},11,"Magazine, newspaper & blog","magazine-newspaper-blog","Browse editorial websites for magazines, news, and blogs. Get inspired by real article layouts and content hubs, curated with HD screenshots and the fonts each website uses.",{"websites":354},388,{"id":356,"name":357,"slug":358,"description":8,"_count":359},416,"Marketing","marketing",{"websites":360},143,{"id":362,"name":363,"slug":364,"description":8,"_count":365},149,"Membership","membership",{"websites":134},{"id":367,"name":368,"slug":369,"description":370,"_count":371},36,"Mobile","mobile","Explore mobile-first websites and app landings. Get inspired by real responsive layouts and app sites, curated with HD screenshots and the fonts each website uses.",{"websites":372},120,{"id":374,"name":375,"slug":376,"description":377,"_count":378},437,"Museum","museum","Discover museum websites that frame collections beautifully. Get inspired by real exhibitions and galleries, curated with HD screenshots and the fonts each website uses.",{"websites":237},{"id":380,"name":381,"slug":382,"description":383,"_count":384},20,"Music & sound","music-sound","Explore music websites for artists, labels, and venues. Get inspired by real tour pages, audio players, and merch, curated with HD screenshots and the fonts each website uses.",{"websites":385},203,{"id":387,"name":388,"slug":389,"description":390,"_count":391},44,"Non-profit","non-profit","Browse nonprofit websites built around impact. Get inspired by real donation flows and project pages, curated with HD screenshots and the fonts each website uses.",{"websites":392},91,{"id":394,"name":395,"slug":396,"description":397,"_count":398},50,"Packaging","packaging","Browse packaging websites that highlight products. Get inspired by real branding and package designs, curated with HD screenshots and the fonts each website uses.",{"websites":399},66,{"id":336,"name":401,"slug":402,"description":403,"_count":404},"Photography","photography","Explore photography websites with gallery-first layouts. Get inspired by real image grids and photographer showcases, curated with HD screenshots and the fonts each website uses.",{"websites":405},427,{"id":10,"name":407,"slug":408,"description":409,"_count":410},"Portfolio","portfolio","Explore portfolio websites built by designers and studios. Get inspired by real case studies and project showcases, curated with HD screenshots and the fonts each website uses.",{"websites":411},1429,{"id":413,"name":414,"slug":415,"description":416,"_count":417},51,"Product design","product-design","Discover product design websites that explain outcomes. Get inspired by real process pages and results, curated with HD screenshots and the fonts each website uses.",{"websites":418},146,{"id":420,"name":421,"slug":422,"description":423,"_count":424},53,"Production","production","Browse production studio websites for film and digital. Get inspired by real reels and project credits, curated with HD screenshots and the fonts each website uses.",{"websites":425},325,{"id":427,"name":428,"slug":429,"description":430,"_count":431},34,"Real estate","real-estate","Browse real estate websites for listings and developments. Get inspired by real property pages and map searches, curated with HD screenshots and the fonts each website uses.",{"websites":418},{"id":433,"name":434,"slug":435,"description":436,"_count":437},54,"Restaurant","restaurant","Discover restaurant websites designed for reservations. Get inspired by real menus, contact, and hours, curated with HD screenshots and the fonts each website uses.",{"websites":413},{"id":439,"name":440,"slug":441,"description":442,"_count":443},32,"Restaurant, café & bar","restaurant-cafe-bar","Discover restaurant, café, and bar websites with style. Get inspired by real menus, reservations, and location pages, curated with HD screenshots and the fonts each website uses.",{"websites":444},100,{"id":446,"name":447,"slug":448,"description":449,"_count":450},472,"Saas","saas","Explore SaaS websites with crisp messaging. Get inspired by real feature breakdowns and pricing, curated with HD screenshots and the fonts each website uses.",{"websites":451},350,{"id":453,"name":454,"slug":455,"description":205,"_count":456},13,"Shop","shop",{"websites":457},102,{"id":459,"name":460,"slug":461,"description":462,"_count":463},18,"Showcase","showcase","Browse showcase websites highlighting work and experiments. Get inspired by real creative projects, curated with HD screenshots and the fonts each website uses.",{"websites":464},140,{"id":466,"name":467,"slug":468,"description":469,"_count":470},52,"Spirits & wine","spirits-wine","Explore spirits and wine websites with distinctive style. Get inspired by real product storytelling and bottle pages, curated with HD screenshots and the fonts each website uses.",{"websites":471},112,{"id":118,"name":473,"slug":474,"description":475,"_count":476},"Sports","sports","Browse sports websites for teams, leagues, and athletes. Get inspired by real scoreboards and schedules, curated with HD screenshots and the fonts each website uses.",{"websites":477},222,{"id":479,"name":480,"slug":481,"description":482,"_count":483},3,"Startup","startup","Discover startup websites with bold launches and clear value props. Get inspired by real landing pages and pricing layouts, curated with HD screenshots and the fonts each website uses.",{"websites":484},528,{"id":486,"name":487,"slug":488,"description":489,"_count":490},5,"Technology","technology","Browse technology websites for products, tools, and platforms. Get inspired by real feature sections and product showcases, curated with HD screenshots and the fonts each website uses.",{"websites":491},749,{"id":221,"name":493,"slug":494,"description":495,"_count":496},"Transportation","transportation","Browse transportation websites for travel and logistics. Get inspired by real routing, tracking, and booking, curated with HD screenshots and the fonts each website uses.",{"websites":79},{"id":498,"name":499,"slug":500,"description":501,"_count":502},19,"Travel","travel","Discover travel and destination websites that inspire. Get inspired by real itineraries, maps, and booking flows, curated with HD screenshots and the fonts each website uses.",{"websites":503},171,{"id":505,"name":506,"slug":507,"description":508,"_count":509},49,"Type foundry","type-foundry","Explore type foundry websites that sell fonts. Get inspired by real specimen pages and testers, curated with HD screenshots and the fonts each website uses.",{"websites":271},{"id":511,"name":512,"slug":513,"description":514,"_count":515},6,"Typography","typography","Discover typography-driven websites that put type at the center. Get inspired by real layouts with expressive hierarchy and motion, curated with HD screenshots and the fonts each website uses.",{"websites":360},{"id":517,"name":518,"slug":519,"description":8,"_count":520},330,"Venture capital","venture-capital",{"websites":283},[522,526,530,534,537,541,545,549,553,557,561,567,570,574,578,582,584,587,590,594,598,601,605,609,613,617,620,623,627,630,636,640],{"id":523,"name":524,"displayed_name":8,"slug":525,"brand_color":8,"brand_logo_url":8},5130,"Astro","astro",{"id":527,"name":528,"displayed_name":8,"slug":529,"brand_color":8,"brand_logo_url":8},3302,"BigCommerce","bigcommerce",{"id":531,"name":532,"displayed_name":8,"slug":533,"brand_color":8,"brand_logo_url":8},634,"Cargo","cargo-site",{"id":535,"name":532,"displayed_name":8,"slug":536,"brand_color":8,"brand_logo_url":8},96,"cargo",{"id":538,"name":539,"displayed_name":8,"slug":540,"brand_color":8,"brand_logo_url":8},3669,"Cargo.site","cargosite",{"id":542,"name":543,"displayed_name":8,"slug":544,"brand_color":8,"brand_logo_url":8},3061,"Carrd","carrd",{"id":546,"name":547,"displayed_name":8,"slug":548,"brand_color":8,"brand_logo_url":8},1054,"Craft","craft",{"id":550,"name":551,"displayed_name":8,"slug":552,"brand_color":8,"brand_logo_url":8},205,"Element UI","element-ui",{"id":554,"name":555,"displayed_name":8,"slug":556,"brand_color":8,"brand_logo_url":8},114,"Elementor","elementor",{"id":558,"name":559,"displayed_name":8,"slug":560,"brand_color":8,"brand_logo_url":8},973,"Format","format",{"id":562,"name":563,"displayed_name":563,"slug":564,"brand_color":565,"brand_logo_url":566},4418,"Framer","framer-sites","#000000","\u002Fimages\u002Flogos\u002Fframer-mark-w.svg",{"id":243,"name":568,"displayed_name":8,"slug":569,"brand_color":8,"brand_logo_url":8},"GSAP","gsap",{"id":571,"name":572,"displayed_name":8,"slug":573,"brand_color":8,"brand_logo_url":8},2077,"LeadPages","leadpages",{"id":575,"name":576,"displayed_name":8,"slug":577,"brand_color":8,"brand_logo_url":8},607,"Next.js","nextjs",{"id":579,"name":580,"displayed_name":8,"slug":581,"brand_color":8,"brand_logo_url":8},358,"Nuxt.js","nuxtjs",{"id":71,"name":580,"displayed_name":8,"slug":583,"brand_color":8,"brand_logo_url":8},"nuxt-js",{"id":453,"name":585,"displayed_name":8,"slug":586,"brand_color":8,"brand_logo_url":8},"React","react",{"id":588,"name":72,"displayed_name":8,"slug":589,"brand_color":8,"brand_logo_url":8},188,"readymag",{"id":591,"name":592,"displayed_name":8,"slug":593,"brand_color":8,"brand_logo_url":8},175,"Ruby","ruby",{"id":595,"name":596,"displayed_name":8,"slug":597,"brand_color":8,"brand_logo_url":8},172,"Ruby on Rails","ruby-on-rails",{"id":387,"name":599,"displayed_name":8,"slug":600,"brand_color":8,"brand_logo_url":8},"Shopify","shopify",{"id":602,"name":603,"displayed_name":8,"slug":604,"brand_color":8,"brand_logo_url":8},150,"Squarespace","squarespace",{"id":606,"name":607,"displayed_name":8,"slug":608,"brand_color":8,"brand_logo_url":8},2734,"Svelte","svelte",{"id":610,"name":611,"displayed_name":8,"slug":612,"brand_color":8,"brand_logo_url":8},1304,"Tailwind CSS","tailwind-css",{"id":614,"name":615,"displayed_name":8,"slug":616,"brand_color":8,"brand_logo_url":8},2011,"Tilda","tilda",{"id":160,"name":618,"displayed_name":8,"slug":619,"brand_color":8,"brand_logo_url":8},"Typekit","typekit",{"id":127,"name":621,"displayed_name":8,"slug":622,"brand_color":8,"brand_logo_url":8},"Vercel","vercel",{"id":624,"name":625,"displayed_name":8,"slug":626,"brand_color":8,"brand_logo_url":8},316,"Vue","vue",{"id":10,"name":628,"displayed_name":8,"slug":629,"brand_color":8,"brand_logo_url":8},"Vue.js","vue-js",{"id":631,"name":632,"displayed_name":8,"slug":633,"brand_color":634,"brand_logo_url":635},74,"Webflow","webflow","#146EF5","\u002Fimages\u002Flogos\u002Fwebflow-mark-w.svg",{"id":637,"name":638,"displayed_name":8,"slug":639,"brand_color":8,"brand_logo_url":8},1041,"Wix","wix",{"id":641,"name":642,"displayed_name":8,"slug":643,"brand_color":8,"brand_logo_url":8},22,"WordPress","wordpress",[645,647,649,651,653,655,657,659,661,663,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693,695,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735,737,739,741,743,745,747,749,751,753,755,757,759,761,763,765,767,769,771,773,775,777],{"country":646,"name":646},"Argentina",{"country":648,"name":648},"Armenia",{"country":650,"name":650},"Australia",{"country":652,"name":652},"Austria",{"country":654,"name":654},"Belgium",{"country":656,"name":656},"Benin",{"country":658,"name":658},"Bolivia",{"country":660,"name":660},"Brazil",{"country":662,"name":662},"Bulgaria",{"country":664,"name":664},"Canada",{"country":666,"name":666},"Cape Town",{"country":668,"name":668},"Chile",{"country":670,"name":670},"Colombia",{"country":672,"name":672},"Croatia",{"country":674,"name":674},"Czech Republic",{"country":676,"name":676},"Denmark",{"country":678,"name":678},"England",{"country":680,"name":680},"Estonia",{"country":682,"name":682},"Finland",{"country":684,"name":684},"France",{"country":686,"name":686},"Germany",{"country":688,"name":688},"Greece",{"country":690,"name":690},"Guatemala",{"country":692,"name":692},"Hong Kong",{"country":694,"name":694},"Hungary",{"country":696,"name":696},"Iceland",{"country":698,"name":698},"India",{"country":700,"name":700},"Indonesia",{"country":702,"name":702},"Ireland",{"country":704,"name":704},"Israel",{"country":706,"name":706},"Italy",{"country":708,"name":708},"Japan",{"country":710,"name":710},"Kazakhstan ",{"country":712,"name":712},"Latvia",{"country":714,"name":714},"Luxembourg",{"country":716,"name":716},"Malaysia",{"country":718,"name":718},"Mexico",{"country":720,"name":720},"Netherlands",{"country":722,"name":722},"New Caledonia",{"country":724,"name":724},"New Zealand",{"country":726,"name":726},"Nigeria",{"country":728,"name":728},"Norway",{"country":730,"name":730},"Peru",{"country":732,"name":732},"Philippines",{"country":734,"name":734},"Poland",{"country":736,"name":736},"Portugal",{"country":738,"name":738},"Romania",{"country":740,"name":740},"Russia",{"country":742,"name":742},"Scotland",{"country":744,"name":744},"Serbia",{"country":746,"name":746},"Singapore",{"country":748,"name":748},"Slovakia",{"country":750,"name":750},"South Africa",{"country":752,"name":752},"South Korea",{"country":754,"name":754},"Spain",{"country":756,"name":756},"Sweden",{"country":758,"name":758},"Switzerland",{"country":760,"name":760},"Taiwan",{"country":762,"name":762},"The Nederlands",{"country":764,"name":764},"The Netherlands",{"country":766,"name":766},"Turkey",{"country":768,"name":768},"Ukraine",{"country":770,"name":770},"United Arab Emirates",{"country":772,"name":772},"United Kingdom",{"country":774,"name":774},"United States",{"country":776,"name":776},"Uruguay",{"country":778,"name":778},"USA",{"categories":780},[781,787,791,796,801,806,811,816,821,825,829,834,839,844,849,853,858,862,867,871,875,879,884,888,892,897,901,905,909,913,917,921,926,931,935,939,944,948,952,956,960,964,969,973,978,982,987,992,997,1002,1007,1012,1016,1018,1022,1026,1031,1036,1041,1045,1050,1055,1060,1064,1069,1073,1078,1083,1088,1093,1098,1103,1108,1113,1117,1122,1127,1132,1136,1140,1144,1146,1151,1155,1159,1164],{"id":10,"name":782,"slug":783,"indexable":784,"_count":785},"Hero","hero",true,{"sections":786},890,{"id":134,"name":788,"slug":789,"indexable":784,"_count":790},"Footer","footer",{"sections":491},{"id":169,"name":792,"slug":793,"indexable":784,"_count":794},"Header","header",{"sections":795},621,{"id":12,"name":797,"slug":798,"indexable":784,"_count":799},"Feature","feature",{"sections":800},554,{"id":479,"name":802,"slug":803,"indexable":784,"_count":804},"Value Proposition","value-proposition",{"sections":805},393,{"id":39,"name":807,"slug":808,"indexable":784,"_count":809},"Testimonial","testimonial",{"sections":810},294,{"id":310,"name":812,"slug":813,"indexable":784,"_count":814},"Gallery","gallery",{"sections":815},235,{"id":181,"name":817,"slug":818,"indexable":784,"_count":819},"Call to Action","call-to-action",{"sections":820},234,{"id":486,"name":822,"slug":823,"indexable":784,"_count":824},"About Us","about-us",{"sections":588},{"id":336,"name":826,"slug":827,"indexable":784,"_count":828},"FAQ","faq",{"sections":464},{"id":23,"name":830,"slug":831,"indexable":784,"_count":832},"Brand","brand",{"sections":833},121,{"id":296,"name":835,"slug":836,"indexable":784,"_count":837},"Newsletter","newsletter",{"sections":838},118,{"id":427,"name":840,"slug":841,"indexable":784,"_count":842},"Blog","blog",{"sections":843},109,{"id":93,"name":845,"slug":846,"indexable":784,"_count":847},"Contact","contact",{"sections":848},107,{"id":498,"name":850,"slug":851,"indexable":784,"_count":852},"How It Works","how-it-works",{"sections":535},{"id":48,"name":854,"slug":855,"indexable":784,"_count":856},"Stat","stat",{"sections":857},95,{"id":250,"name":859,"slug":860,"indexable":784,"_count":861},"Team","team",{"sections":39},{"id":367,"name":863,"slug":864,"indexable":784,"_count":865},"Case Study","case-study",{"sections":866},72,{"id":459,"name":868,"slug":869,"indexable":784,"_count":870},"Pricing","pricing",{"sections":216},{"id":264,"name":872,"slug":873,"indexable":784,"_count":874},"Statistics","statistics",{"sections":196},{"id":349,"name":876,"slug":877,"indexable":784,"_count":878},"Articles","articles",{"sections":427},{"id":880,"name":881,"slug":882,"indexable":784,"_count":883},25,"Client Logos","client-logos",{"sections":176},{"id":303,"name":885,"slug":886,"indexable":784,"_count":887},"Navigation","navigation",{"sections":118},{"id":511,"name":889,"slug":890,"indexable":784,"_count":891},"Integrations","integrations",{"sections":160},{"id":118,"name":893,"slug":894,"indexable":784,"_count":895},"Image Gallery","image-gallery",{"sections":896},26,{"id":453,"name":898,"slug":899,"indexable":784,"_count":900},"Featured Content","featured-content",{"sections":641},{"id":79,"name":902,"slug":903,"indexable":784,"_count":904},"Benefits","benefits",{"sections":79},{"id":32,"name":906,"slug":907,"indexable":784,"_count":908},"Resource","resource",{"sections":459},{"id":86,"name":910,"slug":911,"indexable":784,"_count":912},"Products","products",{"sections":296},{"id":127,"name":914,"slug":915,"indexable":784,"_count":916},"Case Studies","case-studies",{"sections":127},{"id":641,"name":918,"slug":919,"indexable":784,"_count":920},"Bento","bento",{"sections":250},{"id":922,"name":923,"slug":924,"indexable":784,"_count":925},97,"List","list",{"sections":169},{"id":380,"name":927,"slug":928,"indexable":929,"_count":930},"Mission","mission",false,{"sections":134},{"id":439,"name":932,"slug":933,"indexable":929,"_count":934},"Customer Stories","customer-stories",{"sections":93},{"id":183,"name":936,"slug":937,"indexable":929,"_count":938},"Resources","resources",{"sections":183},{"id":940,"name":941,"slug":942,"indexable":929,"_count":943},196,"Reviews","reviews",{"sections":183},{"id":283,"name":945,"slug":946,"indexable":929,"_count":947},"Use Cases","use-cases",{"sections":183},{"id":896,"name":949,"slug":950,"indexable":929,"_count":951},"Book Demo","book-demo",{"sections":511},{"id":120,"name":953,"slug":954,"indexable":929,"_count":955},"Card","card",{"sections":511},{"id":843,"name":957,"slug":958,"indexable":929,"_count":959},"Content","content",{"sections":511},{"id":176,"name":961,"slug":962,"indexable":929,"_count":963},"Partners","partners",{"sections":486},{"id":965,"name":966,"slug":967,"indexable":929,"_count":968},90,"Product","product",{"sections":486},{"id":100,"name":970,"slug":971,"indexable":929,"_count":972},"Collections","collections",{"sections":243},{"id":974,"name":975,"slug":976,"indexable":929,"_count":977},138,"Timeline","timeline",{"sections":243},{"id":471,"name":979,"slug":980,"indexable":929,"_count":981},"Category","category",{"sections":479},{"id":983,"name":984,"slug":985,"indexable":929,"_count":986},108,"Form","form",{"sections":479},{"id":988,"name":989,"slug":990,"indexable":929,"_count":991},86,"Image","image",{"sections":479},{"id":993,"name":994,"slug":995,"indexable":929,"_count":996},110,"Problem","problem",{"sections":479},{"id":998,"name":999,"slug":1000,"indexable":929,"_count":1001},132,"Product list","product-list",{"sections":479},{"id":1003,"name":1004,"slug":1005,"indexable":929,"_count":1006},99,"Service","service",{"sections":479},{"id":1008,"name":1009,"slug":1010,"indexable":929,"_count":1011},116,"Article","article",{"sections":230},{"id":160,"name":1013,"slug":1014,"indexable":929,"_count":1015},"Careers","careers",{"sections":230},{"id":62,"name":231,"slug":232,"indexable":929,"_count":1017},{"sections":230},{"id":277,"name":1019,"slug":1020,"indexable":929,"_count":1021},"Events","events",{"sections":230},{"id":838,"name":1023,"slug":1024,"indexable":929,"_count":1025},"Links","links",{"sections":230},{"id":1027,"name":1028,"slug":1029,"indexable":929,"_count":1030},190,"Map","map",{"sections":230},{"id":1032,"name":1033,"slug":1034,"indexable":929,"_count":1035},220,"Media","media",{"sections":230},{"id":1037,"name":1038,"slug":1039,"indexable":929,"_count":1040},119,"Schedule","schedule",{"sections":230},{"id":308,"name":1042,"slug":1043,"indexable":929,"_count":1044},"Table","table",{"sections":230},{"id":1046,"name":1047,"slug":1048,"indexable":929,"_count":1049},128,"Value","value",{"sections":230},{"id":1051,"name":1052,"slug":1053,"indexable":929,"_count":1054},104,"Awards","awards",{"sections":10},{"id":1056,"name":1057,"slug":1058,"indexable":929,"_count":1059},78,"Contact Form","contact-form",{"sections":10},{"id":372,"name":1061,"slug":1062,"indexable":929,"_count":1063},"Data","data",{"sections":10},{"id":1065,"name":1066,"slug":1067,"indexable":929,"_count":1068},214,"Event list","event-list",{"sections":10},{"id":71,"name":1070,"slug":1071,"indexable":929,"_count":1072},"Exhibition","exhibition",{"sections":10},{"id":1074,"name":1075,"slug":1076,"indexable":929,"_count":1077},134,"Features grid","features-grid",{"sections":10},{"id":1079,"name":1080,"slug":1081,"indexable":929,"_count":1082},106,"Link","link",{"sections":10},{"id":1084,"name":1085,"slug":1086,"indexable":929,"_count":1087},212,"Location","location",{"sections":10},{"id":1089,"name":1090,"slug":1091,"indexable":929,"_count":1092},113,"Menu","menu",{"sections":10},{"id":1094,"name":1095,"slug":1096,"indexable":929,"_count":1097},180,"Partnership","partnership",{"sections":10},{"id":1099,"name":1100,"slug":1101,"indexable":929,"_count":1102},200,"Platform","platform",{"sections":10},{"id":1104,"name":1105,"slug":1106,"indexable":929,"_count":1107},111,"Podcast","podcast",{"sections":10},{"id":1109,"name":1110,"slug":1111,"indexable":929,"_count":1112},130,"Product Card","product-card",{"sections":10},{"id":105,"name":1114,"slug":1115,"indexable":929,"_count":1116},"Product Gallery","product-gallery",{"sections":10},{"id":1118,"name":1119,"slug":1120,"indexable":929,"_count":1121},93,"Product Information","product-information",{"sections":10},{"id":1123,"name":1124,"slug":1125,"indexable":929,"_count":1126},173,"Product Showcase","product-showcase",{"sections":10},{"id":1128,"name":1129,"slug":1130,"indexable":929,"_count":1131},241,"Roadmap","roadmap",{"sections":10},{"id":457,"name":1133,"slug":1134,"indexable":929,"_count":1135},"Search","search",{"sections":10},{"id":554,"name":1137,"slug":1138,"indexable":929,"_count":1139},"Section","section",{"sections":10},{"id":148,"name":1141,"slug":1142,"indexable":929,"_count":1143},"Services","services",{"sections":10},{"id":343,"name":454,"slug":455,"indexable":929,"_count":1145},{"sections":10},{"id":1147,"name":1148,"slug":1149,"indexable":929,"_count":1150},127,"Summary","summary",{"sections":10},{"id":153,"name":1152,"slug":1153,"indexable":929,"_count":1154},"Target Audience","target-audience",{"sections":10},{"id":392,"name":1156,"slug":1157,"indexable":929,"_count":1158},"Text","text",{"sections":10},{"id":1160,"name":1161,"slug":1162,"indexable":929,"_count":1163},215,"Trust","trust",{"sections":10},{"id":1165,"name":1166,"slug":1167,"indexable":929,"_count":1168},103,"Video","video",{"sections":10},{"sections":1170,"count":1342,"category":1343,"tag":1581},[1171,1191,1211,1230,1248,1264,1280,1296,1312,1323],{"id":1172,"image":1173,"name":850,"slug":1174,"seo_title":1175,"seo_description":1176,"seo_alt_text":1177,"seo_tags":1178,"seo_indexable":784,"website":1184,"categories":1188},29383,"4c863e7f-8156-4ac5-92df-da56312e8d16.png","schematik-ai-hardware-section-how-it-works-kzcko6","Schematik How It Works: From Idea to Hardware","This Schematik how-it-works block walks through turning a plain-English idea into physical hardware. A centered headline and wry subhead sit above three equal rounded cards: a cropped prompt UI with oversized type, a dark syntax-highlighted code panel, and a photograph of a breadboard build. Matching step labels and short copy sit beneath each card, aligning Describe, Review, and Build. Cream space, soft shadows, and mixed media make the sequence concrete without extra chrome.","Schematik how-it-works: three cards show a prompt, code, and breadboard above Describe, Review, and Build steps",[1179,1180,1181,1182,1183],"Three Column","Card-based","Photographic","Oversized Type","Monospace",{"id":1185,"slug":1186,"title":1187},92786,"schematik","Schematik",[1189],{"category":1190},{"id":498,"name":850,"slug":851},{"id":1192,"image":1193,"name":1194,"slug":1195,"seo_title":1196,"seo_description":1197,"seo_alt_text":1198,"seo_tags":1199,"seo_indexable":784,"website":1204,"categories":1208},27005,"075db45c-641a-4a3b-baef-e4c0c387845c.png","How it works workflow","uniplay-section-how-it-works-k1xpho","Uniplay How It Works Workflow","Uniplay’s How it works block opens with an oversized two-line headline on the left and a short supporting sentence on the right, then splits into process content. Six numbered cards stack on the left, each tagged Company, Uniplay, or Employee; the first step is expanded with body copy while the others stay closed. The right panel is a dashed upload diagram with mint and green DOC, PPT, PDF, and video tiles around a cloud icon. Pale space, black grotesk type, and line icons keep the sequence easy to scan.","Uniplay how-it-works section with oversized headline, six process cards, and green file-upload diagram",[1200,1201,1180,1202,1182,1203],"Two Column","Light","Line Art","Grotesk",{"id":1205,"slug":1206,"title":1207},92228,"uniplay","Uniplay",[1209],{"category":1210},{"id":498,"name":850,"slug":851},{"id":1212,"image":1213,"name":1214,"slug":1215,"seo_title":1216,"seo_description":1217,"seo_alt_text":1218,"seo_tags":1219,"seo_indexable":784,"website":1223,"categories":1227},20325,"93029012-5816-466c-9d7e-8080656c26ad.png","How it works","console-section-how-it-works-uphw1r","Console How It Works: Auto-Resolve Playbooks","This Console section introduces autonomous IT request resolution. Hierarchy runs from a rust all-caps eyebrow and thin accent rule, through a two-line serif headline, into a nested beige Playbooks card with an icon, title, and explanatory paragraph. Content stacks left in a rounded white frame, leaving a wide empty field on the right. Pairing editorial serif display type with a quieter inset card separates the promise from the how-to without extra chrome.","Console how-it-works section with a serif auto-resolve headline and nested Playbooks card.",[1220,1180,210,1221,1222],"Stacked","Serif-led","All Caps",{"id":1224,"slug":1225,"title":1226},81814,"console","Console",[1228],{"category":1229},{"id":498,"name":850,"slug":851},{"id":1231,"image":1232,"name":1214,"slug":1233,"seo_title":1234,"seo_description":1235,"seo_alt_text":1236,"seo_tags":1237,"seo_indexable":784,"website":1241,"categories":1245},7300,"c27d7bd0-9d38-4424-a4db-5342f30cb91b.png","claimable-section-how-it-works-gujc2i","Claimable How It Works Four-Step Cards","Claimable's how-it-works section pairs a bold left-aligned headline with a pill CTA, then walks through four numbered appeal steps in a single row of equal cards. Each card sits on a different pastel field and shows a product UI: file drop, intake form, generation checklist, and a stamped appeal letter. Short titles and supporting copy sit beneath the visuals, so the sequence reads as upload, questions, generate, then submit. Numbered labels with hairline rules keep the process order clear without extra chrome.","Claimable how-it-works section with four pastel cards showing upload, questions, generation, and submitted appeal.",[1238,1180,1201,1239,1240,1222],"Grid","Colourful","Illustrative",{"id":1242,"slug":1243,"title":1244},80090,"claimable","Claimable",[1246],{"category":1247},{"id":498,"name":850,"slug":851},{"id":1249,"image":1250,"name":850,"slug":1251,"seo_title":1252,"seo_description":1253,"seo_alt_text":1254,"seo_tags":1255,"seo_indexable":784,"website":1257,"categories":1261},5685,"69755dda-5ad4-48c8-8795-bf954992c2b7.png","bounti-section-how-it-works-e844bn","Bounti How It Works Uneven Photo Cards","Bounti’s How It Works block pairs a small blue label and heavy left headline with a quieter right-aligned line about productivity. Beneath that, three rounded workplace photographs sit in an uneven row: a wide food-prep shot overlaid with document-type chips and a caption about uploading manuals, plus two cropped portraits of frontline workers. The layout uses real operational imagery and floating UI labels to introduce the first step instead of a numbered list.","Bounti How It Works section with a large headline and three rounded workplace photos plus upload chips.",[1256,1181,1180,1201,1203],"Asymmetric",{"id":1258,"slug":1259,"title":1260},74807,"bounti","Bounti",[1262],{"category":1263},{"id":498,"name":850,"slug":851},{"id":1265,"image":1266,"name":850,"slug":1267,"seo_title":1268,"seo_description":1269,"seo_alt_text":1270,"seo_tags":1271,"seo_indexable":784,"website":1273,"categories":1277},5704,"ae75e760-cc85-47bf-9cac-4ce0a029b259.png","silna-health-section-how-it-works-t2noi7","Silna Health How It Works Expiry Reminders","This Silna Health how-it-works section stacks a large headline, a four-item all-caps label row, a product email mockup, and supporting copy. Expiry Reminders is visually selected, then a white inbox window and overlapping action alert sit on a sky photograph. The hierarchy treats the UI artifact as the proof point, while the soft photographic field and restrained navy type keep the reminder calm rather than administrative.","Silna Health how-it-works section with feature tabs and an expiry-reminder email over a blue sky.",[1220,1181,1272,1221,1222],"Layered",{"id":1274,"slug":1275,"title":1276},74831,"silna-health","Silna Health",[1278],{"category":1279},{"id":498,"name":850,"slug":851},{"id":1281,"image":1282,"name":850,"slug":1283,"seo_title":1284,"seo_description":1285,"seo_alt_text":1286,"seo_tags":1287,"seo_indexable":784,"website":1289,"categories":1293},5454,"4fdc3ccf-39cf-4eb6-ae78-04a51b044319.png","incident-section-how-it-works-bhugfs","incident.io How-It-Works: AI Companion Lifecycle","This incident.io how-it-works block introduces the AI companion across the incident lifecycle. A large serif headline sits above two cream product frames: a dark phone paging screen with an AI alert summary callout, and a light Slack-style triage channel. Step titles and supporting copy sit under each frame, while a tick-mark timeline with a red progress marker runs along the bottom. Pairing a high-contrast device mock with a quieter desktop channel keeps the two stages comparable without flattening their contexts.","incident.io how-it-works section with AI companion headline, phone alert, Slack triage, and timeline",[1200,1201,210,1221,1288],"Display Type",{"id":1290,"slug":1291,"title":1292},74634,"incident","Incident",[1294],{"category":1295},{"id":498,"name":850,"slug":851},{"id":1297,"image":1298,"name":850,"slug":1299,"seo_title":1300,"seo_description":1301,"seo_alt_text":1302,"seo_tags":1303,"seo_indexable":784,"website":1305,"categories":1309},5479,"782474c1-ff1a-48a7-991d-4af881b368ac.png","saber-section-how-it-works-s0leju","Saber How-It-Works Two-Column Research Steps","This Saber how-it-works block walks through sequential GTM research with two side-by-side product panels. The left step, Research the account, is fully rendered as an Acme company card with metadata chips, a summary, overlapping contact portraits, and pastel signal tags. The right step, Identify key contacts, is muted and skeletonized so the first action stays primary. Brief supporting copy and circular prev\u002Fnext controls sit below the mockups.","Saber how-it-works section: detailed Acme account card beside a faded key-contacts panel.",[1200,1180,1201,1181,1304],"Sans-serif",{"id":1306,"slug":1307,"title":1308},74638,"saber","Saber",[1310],{"category":1311},{"id":498,"name":850,"slug":851},{"id":1313,"image":1314,"name":850,"slug":1315,"seo_title":8,"seo_description":8,"seo_alt_text":8,"seo_tags":8,"seo_indexable":784,"website":1316,"categories":1320},743,"c3fe6a51-747b-4e77-93fc-7a9b7c0ea01d.png","lens-section-how-it-works-gopvpl",{"id":1317,"slug":1318,"title":1319},71263,"lens","Lens",[1321],{"category":1322},{"id":498,"name":850,"slug":851},{"id":1324,"image":1325,"name":1326,"slug":1327,"seo_title":1328,"seo_description":1329,"seo_alt_text":1330,"seo_tags":1331,"seo_indexable":784,"website":1335,"categories":1339},1305,"8f237e05-29b2-44a0-b82f-62ac6390912b.png","Home Explore Section","tavus-section-how-it-works-jxmqkb","Tavus Home Explore Section with Use-Case Cards","This Tavus home section introduces conversational video through a centered headline and a cover-flow of use-case cards. Category chips, titles such as Physician’s Assistant and History Tutor, short copy, and Get Demo buttons sit on rounded dark panels, with the middle card facing forward and neighbors receding in perspective. Soft off-white space and inner radial gradients isolate the featured card. Arrow controls below the row present the set as a carousel rather than a fixed grid.","Tavus home explore section with centered headline and 3D carousel of conversational video use-case cards",[1332,1180,1333,1334,1222],"Edge-to-edge","3D","Gradient",{"id":1336,"slug":1337,"title":1338},69905,"tavus","Tavus",[1340],{"category":1341},{"id":498,"name":850,"slug":851},{"pages":10,"sections":169},{"id":498,"name":850,"slug":851,"seo_title":1344,"seo_description":1345,"intro":1346,"design_guidance":1347,"pattern_groups":1348,"faqs":1570,"indexable":784,"_count":1580},"How It Works: Patterns From Real Product Pages","A practical reference for How It Works sections: numbered steps, process diagrams, product walkthroughs, and the trade-offs that show up in design review.","A How It Works section explains the path from first contact to a finished outcome. Its job is to reduce uncertainty: what happens, in what order, and what the user or team actually has to do. On product pages it often sits after the promise and before pricing or proof, answering the quiet objection that the offer is too abstract. You will see more than one way to do that work. Some teams use three numbered cards with a verb-led title. Others draw a linear roadmap, a system diagram, or a product interface that stands in for the missing step. A few skip the grid entirely and write the process as a scene. That variation is not decoration. It is a choice about whether the reader needs a sequence, a mechanism, or evidence that the thing already exists.","The first review question I ask is whether the steps are actions the reader can imagine, or internal phases dressed as a customer journey. \"Discovery, Structure, Build, Improve\" can sell a studio method. It fails on a consumer product, where people want \"scan the disc,\" not \"onboarding alignment.\" Count the cognitive load. Three steps with one verb and one outcome each scan cleanly. Seven icons in a row start to feel like a supply-chain poster unless each mark is unmistakable. If a diagram needs a legend, it is probably a methodology page, not a landing-section explainer. Watch the relationship between copy and picture. A screenshot that shows the exact moment described in step two earns its space. A decorative dial or overlapping circles only helps if the metaphor maps to the claim. Otherwise it becomes a second puzzle. Cover the headline. Can you still tell what the product does from the steps alone? If not, the labels are too generic: setup, customize, enjoy. Horizontal timelines and Venn diagrams also need a single-column plan; the sequence has to survive without the original geometry. A button under the steps only works if the last beat already implies readiness. \"Get intros\" after a human onboarding story is coherent. A leap from \"we bottle it\" to \"apply now\" is not.",[1349,1392,1435,1466,1508,1539],{"title":1350,"sectionIds":1351,"description":1355,"sections":1356},"Numbered step cards",[1352,1353,1354],25864,25296,24473,"Three equal cards remain the default because they force a short plot: start, middle, result. The strongest versions pair a numbered verb with a concrete artifact—an app screen, a house visit, a scan. Weak ones repeat the same sentence shape and leave no sense of effort or time.",[1357,1369,1381],{"id":1352,"image":1358,"name":1359,"slug":1360,"seo_alt_text":1361,"seo_indexable":784,"website":1362,"categories":1366},"8538a565-1164-42e0-8b58-80174d5b1475.png","Process steps","mora-section-how-it-works-d3d89u","Mora process-steps section with three columns for Onboarding Call, Workspace Setup, and Check-in Call.",{"id":1363,"slug":1364,"title":1365},86107,"mora","Mora",[1367],{"category":1368},{"id":498,"name":850,"slug":851},{"id":1353,"image":1370,"name":1371,"slug":1372,"seo_alt_text":1373,"seo_indexable":784,"website":1374,"categories":1378},"d67c5116-a738-4953-811b-76b942bbc3ca.png","Process Steps","norma-section-how-it-works-vyjqhh","Norma how-it-works section with three cards for building a preset, scanning the steel disc, and blocked apps.",{"id":1375,"slug":1376,"title":1377},83599,"norma","Norma",[1379],{"category":1380},{"id":498,"name":850,"slug":851},{"id":1354,"image":1382,"name":1214,"slug":1383,"seo_alt_text":1384,"seo_indexable":784,"website":1385,"categories":1389},"4c7497e9-6927-4a5b-a051-6e4db8fc64a1.png","jetson-section-how-it-works-hvrhjq","Jetson how-it-works section with a green field, bold headline, and three illustrated process cards",{"id":1386,"slug":1387,"title":1388},85209,"jetson","Jetson",[1390],{"category":1391},{"id":498,"name":850,"slug":851},{"title":1393,"sectionIds":1394,"description":1398,"sections":1399},"Linear journeys and roadmaps",[1395,1396,1397],25977,25599,24129,"A left-to-right path is useful when the value is the journey itself: seed to bottle, discovery to live product, evaluation to support. Arrows do the sequencing so labels can stay short. The risk is a long icon chain that looks official but hides what happens at each handoff.",[1400,1412,1424],{"id":1395,"image":1401,"name":1402,"slug":1403,"seo_alt_text":1404,"seo_indexable":784,"website":1405,"categories":1409},"6de357c6-4933-42a6-8960-3b3dc6e722bd.png","Process","zentto-section-how-it-works-byq6fo","Zentto process section with left headline and a dark Discovery card listing four numbered steps.",{"id":1406,"slug":1407,"title":1408},84356,"zentto","Zentto",[1410],{"category":1411},{"id":498,"name":850,"slug":851},{"id":1396,"image":1413,"name":1414,"slug":1415,"seo_alt_text":1416,"seo_indexable":784,"website":1417,"categories":1421},"e43f4573-adba-4867-a0cf-025247e2debc.png","Process Roadmap","adaptual-health-section-how-it-works-ddi6dm","Adaptual Health process roadmap titled The Adaptual Australian way, with seven farm-to-bottle line icons",{"id":1418,"slug":1419,"title":1420},85978,"adaptual-health","Adaptual Health",[1422],{"category":1423},{"id":498,"name":850,"slug":851},{"id":1397,"image":1425,"name":1214,"slug":1426,"seo_alt_text":1427,"seo_indexable":784,"website":1428,"categories":1432},"7422f5b7-595d-4a36-8bc7-565fee553995.png","lighthouse-section-how-it-works-hgiok2","Lighthouse how-it-works section: laptop photo beside a dark four-step process grid for U.S. immigration.",{"id":1429,"slug":1430,"title":1431},84921,"lighthouse","Lighthouse",[1433],{"category":1434},{"id":498,"name":850,"slug":851},{"title":1436,"sectionIds":1437,"description":1440,"sections":1441},"Mechanism diagrams",[1438,1439],25944,25637,"Some offers are not a sequence of user tasks. They are a system: inputs feeding a model, or capabilities overlapping around a core. A diagram can make that architecture visible at a glance. It fails when the labels stay abstract and the graphic cannot be read without a sales call.",[1442,1454],{"id":1438,"image":1443,"name":1444,"slug":1445,"seo_alt_text":1446,"seo_indexable":784,"website":1447,"categories":1451},"8c1abc39-bbe9-4e5c-8a00-3ad85c3bad9b.png","Technology overview","wisq-section-how-it-works-dej8ko","Wisq technology overview: HRLM diagram with overlapping circles and five capability pills around the logo",{"id":1448,"slug":1449,"title":1450},86141,"wisq","Wisq",[1452],{"category":1453},{"id":498,"name":850,"slug":851},{"id":1439,"image":1455,"name":1456,"slug":1457,"seo_alt_text":1458,"seo_indexable":784,"website":1459,"categories":1463},"eac9fcce-fe73-4508-9a47-66afab827522.png","Attribution methodology diagram","petra-labs-section-how-it-works-fq1mt7","Petra Labs attribution section: four channels flow into a star icon, then a bar labeled 29% AI-influenced revenue",{"id":1460,"slug":1461,"title":1462},85714,"petra-labs","Petra Labs",[1464],{"category":1465},{"id":498,"name":850,"slug":851},{"title":1467,"sectionIds":1468,"description":1472,"sections":1473},"Product evidence walkthroughs",[1469,1470,1471],25720,24564,24188,"Here the process is proven by the interface doing the work. A conversation, a dashboard, or a tabbed product frame replaces a numbered list. That is the right move when the product is the process. It is the wrong one when the chrome is generic and no outcome is readable.",[1474,1486,1497],{"id":1469,"image":1475,"name":1476,"slug":1477,"seo_alt_text":1478,"seo_indexable":784,"website":1479,"categories":1483},"4c37d351-b66a-4ec6-bf88-a9feddd3ed5d.png","Workflow explanation","twin-section-how-it-works-irfwxv","Twin workflow section: three steps at left and a chat card on torn-paper collage showing a goal-setting talk.",{"id":1480,"slug":1481,"title":1482},86027,"twin","Twin",[1484],{"category":1485},{"id":498,"name":850,"slug":851},{"id":1470,"image":1487,"name":1214,"slug":1488,"seo_alt_text":1489,"seo_indexable":784,"website":1490,"categories":1494},"222ad6be-7ade-44ed-aba8-8489147f32fc.png","retool-section-how-it-works-czvigh","Retool how-it-works section with API dashboard collage and cards for data, operations, and eng teams",{"id":1491,"slug":1492,"title":1493},85196,"retool","Retool",[1495],{"category":1496},{"id":498,"name":850,"slug":851},{"id":1471,"image":1498,"name":1214,"slug":1499,"seo_alt_text":1500,"seo_indexable":784,"website":1501,"categories":1505},"90acc24d-cee9-45de-89a3-a9420a9d1241.png","greenboard-section-how-it-works-qpdwch","Greenboard how-it-works section: mint panel with create-group UI left and large efficiency headline right.",{"id":1502,"slug":1503,"title":1504},84854,"greenboard","Greenboard",[1506],{"category":1507},{"id":498,"name":850,"slug":851},{"title":1509,"sectionIds":1510,"description":1513,"sections":1514},"Narrative and unfolding methods",[1511,1512],25143,26101,"A written scene can outperform cards when the experience is social, timed, or emotional. One page walks from a deal email to a closed fund. Another unfolds methods beside a metaphor. This only works if the prose is specific. Vague storytelling is just a long headline.",[1515,1527],{"id":1511,"image":1516,"name":1517,"slug":1518,"seo_alt_text":1519,"seo_indexable":784,"website":1520,"categories":1524},"3879c4f8-c20a-409e-a408-15bdb888e258.png","Process workflow","the-club-section-how-it-works-uuhxni","The Club experience section: italic heading, crossed flags, and brown process copy on cream.",{"id":1521,"slug":1522,"title":1523},84191,"the-club","The Club",[1525],{"category":1526},{"id":498,"name":850,"slug":851},{"id":1512,"image":1528,"name":1529,"slug":1530,"seo_alt_text":1531,"seo_indexable":784,"website":1532,"categories":1536},"c55aad2b-163f-4efe-81d4-06c9de44a657.png","Methodology and Skills","artem-astakhov-section-how-it-works-yv7bm7","Artem Astakhov methodology section with How I move the needle heading, four skill titles, and a metallic numbered dial.",{"id":1533,"slug":1534,"title":1535},85372,"artem-astakhov","Artem Astakhov",[1537],{"category":1538},{"id":498,"name":850,"slug":851},{"title":1540,"sectionIds":1541,"description":1544,"sections":1545},"Service steps with a close",[1542,1543],24679,25698,"Service businesses often treat this section as a soft close: numbered stages or reasons, then one action. The last beat stays operational—order, apply, get intros. The cards still need to answer effort and timing, or the button arrives before the reader feels ready.",[1546,1558],{"id":1542,"image":1547,"name":1548,"slug":1549,"seo_alt_text":1550,"seo_indexable":784,"website":1551,"categories":1555},"da43aa1f-9ca5-4c17-9d33-479a73d59180.png","Catering Information","montys-section-how-it-works-wc8zld","Monty's catering section: red why-order headline, three tilted numbered cards, and an Order Catering button.",{"id":1552,"slug":1553,"title":1554},83650,"montys","Montys",[1556],{"category":1557},{"id":498,"name":850,"slug":851},{"id":1543,"image":1559,"name":1560,"slug":1561,"seo_alt_text":1562,"seo_indexable":784,"website":1563,"categories":1567},"1d854e91-4bd2-4891-945f-bf330400c145.png","How it works process","decimals-section-how-it-works-bzurjm","Decimals how-it-works section with Apply for Access heading, three numbered process cards, and Get Intros button",{"id":1564,"slug":1565,"title":1566},85980,"decimals","Decimals",[1568],{"category":1569},{"id":498,"name":850,"slug":851},[1571,1574,1577],{"answer":1572,"question":1573},"Three is common because it fits a beginning, a middle, and a result without a long row of equals. Four can work when the last beat is support or iteration. Past that, you are often mixing user actions with internal phases. Collapse the internals, or move them to a longer methodology page.","How many steps belong in a How It Works section?",{"answer":1575,"question":1576},"Use a diagram when the reader needs relationships, not order: inputs into a model, overlapping capabilities, many sources becoming one output. Cards imply sequence and agency. If nobody actually does step two, a card layout will feel staged. Keep every label concrete enough that the graphic still makes sense if the illustration vanished.","When is a diagram better than step cards?",{"answer":1578,"question":1579},"Features answer what the product can do. How It Works answers what happens next and who does the work. If every card could live in a features row, rewrite around time, handoffs, and outcomes. After reading, someone should be able to estimate effort, wait, and the first action they must take.","How do you keep How It Works from becoming another features grid?",{"sections":535},{"id":86,"name":87,"slug":88},{"categories":1583},[1584,1586,1588,1591,1593,1596,1598,1600,1602,1604,1606,1608,1610,1612],{"id":12,"name":797,"slug":798,"indexable":784,"_count":1585},{"sections":1008},{"id":10,"name":782,"slug":783,"indexable":784,"_count":1587},{"sections":1003},{"id":134,"name":788,"slug":789,"indexable":784,"_count":1589},{"sections":1590},88,{"id":169,"name":792,"slug":793,"indexable":784,"_count":1592},{"sections":866},{"id":479,"name":802,"slug":803,"indexable":784,"_count":1594},{"sections":1595},56,{"id":39,"name":807,"slug":808,"indexable":784,"_count":1597},{"sections":162},{"id":181,"name":817,"slug":818,"indexable":784,"_count":1599},{"sections":387},{"id":336,"name":826,"slug":827,"indexable":784,"_count":1601},{"sections":100},{"id":459,"name":868,"slug":869,"indexable":784,"_count":1603},{"sections":160},{"id":23,"name":830,"slug":831,"indexable":784,"_count":1605},{"sections":453},{"id":427,"name":840,"slug":841,"indexable":784,"_count":1607},{"sections":250},{"id":296,"name":835,"slug":836,"indexable":784,"_count":1609},{"sections":250},{"id":511,"name":889,"slug":890,"indexable":784,"_count":1611},{"sections":349},{"id":498,"name":850,"slug":851,"indexable":784,"_count":1613},{"sections":169}]