
Akshay Joshi
App How It Works Section
How it works” section with step-by-step content presented in clear, easy-to-follow cards
Copy component
Download JSON

{"id":6878,"name":"app-how-it-works-section","title":"App How It Works Section","date":"2026-03-19 07:29:05","date_formatted":"March 19, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/app-how-it-works-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"161097","name":"section","parent":0,"children":["76738f","78a67c"],"settings":{"_cssGlobalClasses":["app_hiw__section"]},"label":"How It Works Section"},{"id":"76738f","name":"container","parent":"161097","children":["33113e","a5a925"],"settings":{"_cssGlobalClasses":["app_hiw__header"]},"label":"Header"},{"id":"33113e","name":"text-basic","parent":"76738f","children":[],"settings":{"text":"HOW IT WORKS","tag":"span","_cssGlobalClasses":["app_hiw__badge"]},"label":"Badge"},{"id":"a5a925","name":"heading","parent":"76738f","children":[],"settings":{"text":"Schema to productionin four steps","tag":"h2","_cssGlobalClasses":["app_hiw__heading"]},"label":"Main Heading"},{"id":"78a67c","name":"container","parent":"161097","children":["35df06","221021","01fa1b","543d93"],"settings":{"_cssGlobalClasses":["app_hiw__steps-row"]},"label":"Steps Icons Row"},{"id":"35df06","name":"block","parent":"78a67c","children":["24f49c","e0e011"],"settings":{"_cssGlobalClasses":["yfncel"]}},{"id":"24f49c","name":"block","parent":"35df06","children":["4f3dfe","af7bc2"],"settings":{"_cssGlobalClasses":["app_hiw__step-icon-wrap"]},"label":"Step 1 Icon Area"},{"id":"4f3dfe","name":"block","parent":"24f49c","children":["0a1dd1"],"settings":{"_cssGlobalClasses":["app_hiw__icon-box"]},"label":"Icon Box 1"},{"id":"0a1dd1","name":"icon","parent":"4f3dfe","children":[],"settings":{"icon":{"library":"themify","icon":"ti-save"},"_cssGlobalClasses":["app_hiw__icon"]},"label":"Icon Schema","themeStyles":[]},{"id":"af7bc2","name":"text-basic","parent":"24f49c","children":[],"settings":{"text":"1","tag":"span","_cssGlobalClasses":["app_hiw__step-number"]},"label":"Step Number 1"},{"id":"e0e011","name":"block","parent":"35df06","children":["91e69e","770707"],"settings":{"_cssGlobalClasses":["app_hiw__step-content"]},"label":"Step 1 Content"},{"id":"91e69e","name":"heading","parent":"e0e011","children":[],"settings":{"text":"Define Your Schema","tag":"h3","_cssGlobalClasses":["app_hiw__step-title"]},"label":"Step 1 Title"},{"id":"770707","name":"text-basic","parent":"e0e011","children":[],"settings":{"text":"Write your API spec in OpenAPI, GraphQL, or just describe it in plain English. Our AI builds the rest.","tag":"p","_cssGlobalClasses":["app_hiw__step-text"]},"label":"Step 1 Text"},{"id":"221021","name":"block","parent":"78a67c","children":["dded95","4edbf1"],"settings":{"_cssGlobalClasses":["yfncel"]}},{"id":"dded95","name":"block","parent":"221021","children":["6c4fea","cebbb7"],"settings":{"_cssGlobalClasses":["app_hiw__step-icon-wrap"]},"label":"Step 2 Icon Area"},{"id":"6c4fea","name":"block","parent":"dded95","children":["ffc88d"],"settings":{"_cssGlobalClasses":["app_hiw__icon-box"]},"label":"Icon Box 2"},{"id":"ffc88d","name":"icon","parent":"6c4fea","children":[],"settings":{"icon":{"library":"themify","icon":"ti-ruler-pencil"},"_cssGlobalClasses":["app_hiw__icon"]},"label":"Icon Configure","themeStyles":[]},{"id":"cebbb7","name":"text-basic","parent":"dded95","children":[],"settings":{"text":"2","tag":"span","_cssGlobalClasses":["app_hiw__step-number"]},"label":"Step Number 2"},{"id":"4edbf1","name":"block","parent":"221021","children":["e005e1","79e712"],"settings":{"_cssGlobalClasses":["app_hiw__step-content"]},"label":"Step 1 Content"},{"id":"e005e1","name":"heading","parent":"4edbf1","children":[],"settings":{"text":"Configure & Customize","tag":"h3","_cssGlobalClasses":["app_hiw__step-title"]},"label":"Step 1 Title"},{"id":"79e712","name":"text-basic","parent":"4edbf1","children":[],"settings":{"text":"Set auth rules, rate limits, caching, and CORS. Point-and-click or code \u2014 your choice.","tag":"p","_cssGlobalClasses":["app_hiw__step-text"]},"label":"Step 1 Text"},{"id":"01fa1b","name":"block","parent":"78a67c","children":["d0a6d0","3cfe4a"],"settings":{"_cssGlobalClasses":["yfncel"]}},{"id":"d0a6d0","name":"block","parent":"01fa1b","children":["1701ba","f2c932"],"settings":{"_cssGlobalClasses":["app_hiw__step-icon-wrap"]},"label":"Step 3 Icon Area"},{"id":"1701ba","name":"block","parent":"d0a6d0","children":["3b1161"],"settings":{"_cssGlobalClasses":["app_hiw__icon-box"]},"label":"Icon Box 3"},{"id":"3b1161","name":"icon","parent":"1701ba","children":[],"settings":{"icon":{"library":"themify","icon":"ti-paint-roller"},"_cssGlobalClasses":["app_hiw__icon"]},"label":"Icon Deploy","themeStyles":[]},{"id":"f2c932","name":"text-basic","parent":"d0a6d0","children":[],"settings":{"text":"3","tag":"span","_cssGlobalClasses":["app_hiw__step-number"]},"label":"Step Number 3"},{"id":"3cfe4a","name":"block","parent":"01fa1b","children":["a46f11","44138b"],"settings":{"_cssGlobalClasses":["app_hiw__step-content"]},"label":"Step 1 Content"},{"id":"a46f11","name":"heading","parent":"3cfe4a","children":[],"settings":{"text":"Deploy Globally","tag":"h3","_cssGlobalClasses":["app_hiw__step-title"]},"label":"Step 1 Title"},{"id":"44138b","name":"text-basic","parent":"3cfe4a","children":[],"settings":{"text":"One click deploys to 200+ edge locations. Your API is fast everywhere, automatically.","tag":"p","_cssGlobalClasses":["app_hiw__step-text"]},"label":"Step 1 Text"},{"id":"543d93","name":"block","parent":"78a67c","children":["90a6ef","3b06af"],"settings":{"_cssGlobalClasses":["yfncel"]}},{"id":"90a6ef","name":"block","parent":"543d93","children":["dd97e1","d05909"],"settings":{"_cssGlobalClasses":["app_hiw__step-icon-wrap"]},"label":"Step 4 Icon Area"},{"id":"dd97e1","name":"block","parent":"90a6ef","children":["3bfea3"],"settings":{"_cssGlobalClasses":["app_hiw__icon-box"]},"label":"Icon Box 4"},{"id":"3bfea3","name":"icon","parent":"dd97e1","children":[],"settings":{"icon":{"library":"themify","icon":"ti-medall"},"_cssGlobalClasses":["app_hiw__icon"]},"label":"Icon Monitor","themeStyles":[]},{"id":"d05909","name":"text-basic","parent":"90a6ef","children":[],"settings":{"text":"4","tag":"span","_cssGlobalClasses":["app_hiw__step-number"]},"label":"Step Number 4"},{"id":"3b06af","name":"block","parent":"543d93","children":["52eaaa","dce12b"],"settings":{"_cssGlobalClasses":["app_hiw__step-content"]},"label":"Step 1 Content"},{"id":"52eaaa","name":"heading","parent":"3b06af","children":[],"settings":{"text":"Monitor & Scale","tag":"h3","_cssGlobalClasses":["app_hiw__step-title"]},"label":"Step 1 Title"},{"id":"dce12b","name":"text-basic","parent":"3b06af","children":[],"settings":{"text":"Watch real-time dashboards, set alerts, and scale from 0 to millions of requests without config changes.","tag":"p","_cssGlobalClasses":["app_hiw__step-text"]},"label":"Step 1 Text"}],"templateType":"section","global_classes":[{"id":"app_hiw__section","name":"app_hiw__section","settings":{"_background":{"color":{"hex":"#f8faf9"}},"_padding":{"top":"8%","bottom":"8%","left":"5%","right":"5%"},"_rowGap":"60"}},{"id":"app_hiw__header","name":"app_hiw__header","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"20","_widthMax":"100%","_width":"1240","_textAlign":"center"}},{"id":"app_hiw__badge","name":"app_hiw__badge","settings":{"_typography":{"font-size":"12","font-weight":"700","letter-spacing":"0.1em","text-transform":"uppercase","color":{"hex":"#2dc88c"}},"_background":{"color":{"hex":"#d4f0e5"}},"_padding":{"top":"7","bottom":"7","left":"18","right":"18"},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"}},"_display":"inline-block"}},{"id":"app_hiw__heading","name":"app_hiw__heading","settings":{"_typography":{"font-family":"Inter","font-size":"64","font-weight":"900","line-height":"1.1","text-align":"center","color":{"hex":"#0f1c18"}},"_typography:tablet_portrait":{"font-size":"48"},"_typography:mobile_landscape":{"font-size":"36"},"_typography:mobile_portrait":{"font-size":"30"}}},{"id":"app_hiw__steps-row","name":"app_hiw__steps-row","settings":{"_display":"flex","_direction":"row","_alignItems":"flex-start","_justifyContent":"center","_columnGap":"0","_widthMax":"100%","_width":"1240","_direction:tablet_portrait":"column","_display:tablet_portrait":"grid","_gridGap:tablet_portrait":"20","_gridTemplateColumns:tablet_portrait":"repeat(2,1fr)","_gridTemplateColumns:mobile_landscape":"repeat(1,1fr)"}},{"id":"app_hiw__step-icon-wrap","name":"app_hiw__step-icon-wrap","settings":{"_display":"flex","_alignItems":"center","_justifyContent":"flex-start","_position":"relative"}},{"id":"app_hiw__icon-box","name":"app_hiw__icon-box","settings":{"_background":{"color":{"hex":"#f0f4f2"}},"_border":{"radius":{"top":"20","right":"20","bottom":"20","left":"20"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#e2ebe7"}},"_width":"110","_height":"110","_display":"flex","_alignItems":"center","_justifyContent":"center","_cssCustom":".app_hiw__icon-box { transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .app_hiw__step-icon-wrap:hover .app_hiw__icon-box { background: #2dc88c; border-color: #2dc88c; box-shadow: 0 8px 28px rgba(45, 200, 140, 0.35); } .app_hiw__step-icon-wrap:hover .app_hiw__icon { color: #ffffff; transform: scale(1.15); }"}},{"id":"app_hiw__icon","name":"app_hiw__icon","settings":{"_typography":{"font-size":"32","color":{"hex":"#8aA49c"}},"_cssCustom":".app_hiw__icon { transition: color 0.3s ease, transform 0.3s ease; }"}},{"id":"app_hiw__step-number","name":"app_hiw__step-number","settings":{"_typography":{"font-family":"Inter","font-size":"13","font-weight":"700","color":{"hex":"#ffffff"}},"_background":{"color":{"hex":"#2dc88c"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"}},"_width":"26","_height":"26","_display":"flex","_alignItems":"center","_justifyContent":"center","_position":"absolute","_top":"-10","_right":"0","_zIndex":"2","_cssCustom":".app_hiw__step-number { line-height: 1; text-align: center; }"},"modified":1772825822,"user_id":1},{"id":"app_hiw__step-content","name":"app_hiw__step-content","settings":{"_display":"flex","_direction":"column","_rowGap":"12","_alignItems":"center","_textAlign":"center"}},{"id":"app_hiw__step-title","name":"app_hiw__step-title","settings":{"_typography":{"font-family":"Inter","font-size":"20","font-weight":"700","line-height":"1.3","text-align":"center","color":{"hex":"#0f1c18"}}}},{"id":"app_hiw__step-text","name":"app_hiw__step-text","settings":{"_typography":{"font-family":"Inter","font-size":"15","font-weight":"400","line-height":"1.7","text-align":"center","color":{"hex":"#6b7f78"}}}},{"id":"yfncel","name":"app_hiw__step-block","settings":{"_columnGap":"20","_rowGap":"20"},"modified":1773496003,"user_id":1}]}
Similar components


Akshay Joshi
App Proof Section
Two-column layout section featuring a strong heading, card elements, and a clear call-to-action


Akshay Joshi
App Feature Section API
Feature-focused section with visually rich cards highlighting key functionalities, benefits, and use cases in a clean, organized layout
