[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fhero-section":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":324,"links":325,"dates":368},"\u002Fexamples\u002Fcomponents\u002Fhero-section","collection","components",true,{"example_count":9,"app_count":10},218,205,{"id":12,"title":13,"description":14},197,"Hero section","See how websites introduce their main message at the start of a page. Explore how headlines, supporting copy, product visuals, and calls to action are arranged within the hero.",{"title":16,"description":17,"og_image":18},"Hero section UI examples - Nicelydone","Hero section UI design examples from SaaS apps. See how websites introduce their main message at the start of a page. Explore how headlines, supporting…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe30cfefd-21e5-4c44-861e-ee04cea0f7a1.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Hero section UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Hero section UI design examples from SaaS apps. See how websites introduce their main message at the start of a page. Explore how headlines, supporting copy, product visuals, and calls to action are…",[32],{"title":33,"description":14,"links":34},"About Hero section",[],[36],"218 UI components",[38,68,101,126,149,166,192,215,238,255,276,305],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"aecf9abe-7ce3-496d-a66b-cf15a9ee1851","Flask UI component","A web application for video feedback and collaboration with drawing tools and timestamped comments.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents",3012,1751,"UI component from Flask","component",[48],{"id":12,"title":13,"slug":49},"hero-section",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[56,60,64],{"id":57,"title":58,"slug":59},100,"Video","video",{"id":61,"title":62,"slug":63},23,"Collaboration","collaboration",{"id":65,"title":66,"slug":67},35,"Feedback","feedback",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"a019aea6-4fac-40e2-b648-e467339308f8","Inference UI component","A clean and modern landing page for an AI infrastructure company, featuring a hero section with a prominent headline, descriptive text, call-to-action buttons, a navigation bar, and a showcase of partner logos.","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe20f2d8a-da74-4844-a9ff-5eb94eafbc86.png",3024,1841,"UI component from Inference",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[85,89,93,97],{"id":86,"title":87,"slug":88},48,"Developer Tools","developer-tools",{"id":90,"title":91,"slug":92},16,"Monitoring","monitoring",{"id":94,"title":95,"slug":96},37,"Developer APIs","developer-apis",{"id":98,"title":99,"slug":100},80,"Artificial Intelligence","artificial-intelligence",{"uuid":102,"title":103,"description":104,"canonical_path":105,"image":106,"width":74,"height":107,"image_alt":108,"kind":46,"categories":109,"app":111},"6b616790-5f8f-4393-a6d9-a82370c6658b","Origin Financial UI component","A landing page for an AI financial advisor service with a hero section and navigation.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F09701a60-dbcb-4bee-b868-75ae8e376393.png",1760,"UI component from Origin Financial",[110],{"id":12,"title":13,"slug":49},{"slug":112,"title":113,"logo":114,"baseline":115,"categories":116},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[117,121,125],{"id":118,"title":119,"slug":120},36,"Finance","finance",{"id":122,"title":123,"slug":124},56,"Accounting","accounting",{"id":98,"title":99,"slug":100},{"uuid":127,"title":128,"description":129,"canonical_path":130,"image":131,"width":43,"height":132,"image_alt":133,"kind":46,"categories":134,"app":136},"0b8eb8ad-58db-4e9e-a9aa-897f6d1b3060","Steel UI component","A landing page for a browser infrastructure API for AI agents, featuring a hero section, code examples, and performance statistics.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb862a37a-ae90-47bb-ac39-9601d2d6a9ce.png",1733,"UI component from Steel",[135],{"id":12,"title":13,"slug":49},{"slug":137,"title":138,"logo":139,"baseline":140,"categories":141},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[142,143,144,145],{"id":86,"title":87,"slug":88},{"id":98,"title":99,"slug":100},{"id":94,"title":95,"slug":96},{"id":146,"title":147,"slug":148},45,"Open Source","open-source",{"uuid":150,"title":151,"description":152,"canonical_path":153,"image":154,"width":43,"height":155,"image_alt":156,"kind":46,"categories":157,"app":159},"a36ead31-60c5-4d99-8146-c6c5a570145d","Riverside UI component","A landing page for an AI-powered content creation platform, featuring a hero section with a call to action and social proof.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F19308518-b559-48a2-93c2-fa20914e5b53.png",1715,"UI component from Riverside",[158],{"id":12,"title":13,"slug":49},{"slug":160,"title":161,"logo":162,"baseline":163,"categories":164},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[165],{"id":57,"title":58,"slug":59},{"uuid":167,"title":168,"description":169,"canonical_path":170,"image":171,"width":74,"height":172,"image_alt":173,"kind":46,"categories":174,"app":176},"c8abd399-4787-4ab2-b2a3-7af7d3ceccbe","Axiom UI component","A landing page for a machine data platform featuring a query editor, navigation, and calls to action.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe226d4b6-fe04-4429-9b82-0071ac5e8159.png",1467,"UI component from Axiom",[175],{"id":12,"title":13,"slug":49},{"slug":177,"title":178,"logo":179,"baseline":180,"categories":181},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[182,186,190,191],{"id":183,"title":184,"slug":185},46,"Analytics","analytics",{"id":187,"title":188,"slug":189},57,"Big data","big-data",{"id":90,"title":91,"slug":92},{"id":86,"title":87,"slug":88},{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":74,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"be2e478f-6dee-4c9e-99eb-68daf9e6889b","Extend UI component","A landing page for a document processing service featuring a hero section with a call to action, a code snippet, and a client logo showcase.","\u002Fexamples\u002Fapps\u002Fextend\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F50b60ab8-dc11-47fa-86d2-26e97975739b.png",2012,"UI component from Extend",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"extend","Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[208,212,213,214],{"id":209,"title":210,"slug":211},77,"Machine learning","machine-learning",{"id":98,"title":99,"slug":100},{"id":94,"title":95,"slug":96},{"id":86,"title":87,"slug":88},{"uuid":216,"title":217,"description":218,"canonical_path":219,"image":220,"width":221,"height":222,"image_alt":223,"kind":46,"categories":224,"app":226},"4e385e66-93bf-421d-87b0-a016967780bf","Lithic UI component","A website hero section promoting a programmable card issuing and money movement platform.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F989f232f-5d06-44d7-87b6-74f7b10cb598.png",3184,2049,"UI component from Lithic",[225],{"id":12,"title":13,"slug":49},{"slug":227,"title":228,"logo":229,"baseline":230,"categories":231},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[232,233,237],{"id":118,"title":119,"slug":120},{"id":234,"title":235,"slug":236},39,"Payments","payments",{"id":94,"title":95,"slug":96},{"uuid":239,"title":240,"description":241,"canonical_path":242,"image":243,"width":74,"height":244,"image_alt":245,"kind":46,"categories":246,"app":248},"118f4f2a-db92-424f-a931-224864e77410","Visitors UI component","A landing page for a web analytics platform featuring real-time data and key performance metrics.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcb29a901-ef8f-4eb5-b98b-98c5e5200030.png",1853,"UI component from Visitors",[247],{"id":12,"title":13,"slug":49},{"slug":249,"title":250,"logo":251,"baseline":252,"categories":253},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[254],{"id":183,"title":184,"slug":185},{"uuid":256,"title":257,"description":258,"canonical_path":259,"image":260,"width":74,"height":261,"image_alt":262,"kind":46,"categories":263,"app":265},"eee7b1e7-c6d8-4719-9364-7afbdaf0d63e","Dock UI component","A landing page for an AI revenue enablement platform featuring a navigation bar, hero section with a headline and call-to-action buttons, and a content library section with a search bar and category tabs.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F84dd1b48-0533-4cdb-8bc8-6b6424a657f6.png",1885,"UI component from Dock",[264],{"id":12,"title":13,"slug":49},{"slug":266,"title":267,"logo":268,"baseline":269,"categories":270},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[271,272],{"id":61,"title":62,"slug":63},{"id":273,"title":274,"slug":275},29,"Task Management","task-management",{"uuid":277,"title":278,"description":279,"canonical_path":280,"image":281,"width":74,"height":282,"image_alt":283,"kind":46,"categories":284,"app":286},"5d251b6e-45fd-4c46-85b4-eadf41299a22","Bloom UI component","A landing page for an AI-powered webshop builder, featuring a prominent call to action and navigation.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6fa6f6f2-aedf-4973-bac3-6fa67f6a9930.png",1891,"UI component from Bloom",[285],{"id":12,"title":13,"slug":49},{"slug":287,"title":288,"logo":289,"baseline":290,"categories":291},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[292,293,297,301],{"id":98,"title":99,"slug":100},{"id":294,"title":295,"slug":296},3,"Shopping","shopping",{"id":298,"title":299,"slug":300},7,"Web Development","web-development",{"id":302,"title":303,"slug":304},96,"No code","no-code",{"uuid":306,"title":307,"description":308,"canonical_path":309,"image":310,"width":74,"height":311,"image_alt":312,"kind":46,"categories":313,"app":315},"37411bfd-71fc-4177-9a49-726f5d651410","Appwrite UI component","A landing page for an open-source platform featuring a hero section with a call to action and a preview of a project dashboard with data visualizations.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1ac6f542-704e-4390-9c7e-608fdb801550.png",1985,"UI component from Appwrite",[314],{"id":12,"title":13,"slug":49},{"slug":316,"title":317,"logo":318,"baseline":319,"categories":320},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[321,322,323],{"id":86,"title":87,"slug":88},{"id":94,"title":95,"slug":96},{"id":146,"title":147,"slug":148},[],[326,329,332,335,338,341,344,347,350,353,356,359,362,365],{"label":327,"to":328},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":330,"to":331},"Developer Portal","\u002Fexamples\u002Fpages\u002Fdeveloper-portal",{"label":333,"to":334},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":336,"to":337},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":339,"to":340},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":342,"to":343},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":345,"to":346},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":348,"to":349},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":351,"to":352},"Extend design examples","\u002Fexamples\u002Fapps\u002Fextend",{"label":354,"to":355},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":357,"to":358},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":360,"to":361},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":363,"to":364},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":366,"to":367},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"published_at":369,"updated_at":370},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]