Julian Galluzzo
Hero Section With Image Background
A clean hero section featuring a subheading, heading, paragraph, and 2 buttons with hover effects.
Copy component
Download JSON
{"content":[{"id":"papghh","name":"block","parent":0,"children":["okpzer"],"settings":{"_background":{"image":{"id":465,"filename":"pexels-bogdankrupin-18527375.jpg","size":"full","full":"https://postpilot.local/wp-content/uploads/2025/03/pexels-bogdankrupin-18527375.jpg","url":"https://postpilot.local/wp-content/uploads/2025/03/pexels-bogdankrupin-18527375.jpg"},"position":"center center"},"_cssGlobalClasses":["esbfjm"]},"label":"Hero Wrapper"},{"id":"okpzer","name":"section","parent":"papghh","children":["lczcee"],"settings":{"_cssGlobalClasses":["ghfqgs"]},"label":"Hero"},{"id":"lczcee","name":"container","parent":"okpzer","children":["akxsbv"],"settings":{"_cssGlobalClasses":["lntrvj"]}},{"id":"akxsbv","name":"block","parent":"lczcee","children":["pppsei","zizbzx","bcaaze","akmajj"],"settings":{}},{"id":"pppsei","name":"text-basic","parent":"akxsbv","children":[],"settings":{"text":"PEI LIGHTHOUSE TOURS","_cssGlobalClasses":["cvfbfn"]},"label":"Subheading"},{"id":"zizbzx","name":"heading","parent":"akxsbv","children":[],"settings":{"text":"Explore the world's most beautiful lighthouses","_cssGlobalClasses":["tzbixg"],"tag":"h1"}},{"id":"bcaaze","name":"text-basic","parent":"akxsbv","children":[],"settings":{"text":"Book a retreat with us and see all of the world's most beautiful lighthouses in less than 3 days.","_cssGlobalClasses":["istdij"]},"label":"Paragraph"},{"id":"akmajj","name":"div","parent":"akxsbv","children":["xtetzx","vgsoic"],"settings":{"_cssGlobalClasses":["rpgcuf"]},"label":"Button Group"},{"id":"xtetzx","name":"button","parent":"akmajj","children":[],"settings":{"text":"Book your retreat","style":"primary","_cssGlobalClasses":["fdkltc"]}},{"id":"vgsoic","name":"button","parent":"akmajj","children":[],"settings":{"text":"Contact us","style":"primary","_cssGlobalClasses":["xqunyp"]}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[{"id":"esbfjm","name":"hero2__wrapper","settings":{"_typography":{"font-family":"Be Vietnam Pro"}}},{"id":"ghfqgs","name":"hero2","settings":{"_gradient":{"applyTo":"background","gradientType":"linear","conicAngle":"7"},"_background":{"color":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0.75)","hsl":"hsla(0, 0%, 100%, 0.75)"}},"_padding":{"left":"5%","right":"5%","bottom":"150","top":"150"}}},{"id":"lntrvj","name":"hero2__container","settings":{"_display":"grid","_gridTemplateColumns":"1.5fr 1fr","_gridGap":"3rem"}},{"id":"cvfbfn","name":"hero2__subheading","settings":{"_typography":{"text-transform":"uppercase","font-weight":"700","letter-spacing":"2","font-size":"14","color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_margin":{"bottom":"20"}}},{"id":"tzbixg","name":"hero2__h1","settings":{"_typography":{"font-size":"45","color":{"hex":"#000000","id":"hcqvca","name":"Color #3"},"line-height":"1.2"},"_margin":{"bottom":"10"}}},{"id":"istdij","name":"hero2__paragraph","settings":{"_typography":{"font-size":"19","color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}},"_margin":{"bottom":"25"}}},{"id":"rpgcuf","name":"hero2__button-group","settings":{"_display":"flex","_columnGap":"16px"}},{"id":"fdkltc","name":"hero2__button","settings":{"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-weight":"600"},"_background":{"color":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"}},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"_padding":{"top":"10","bottom":"10","left":"20","right":"20"},"_boxShadow":{"values":{"offsetY":"2","blur":"5","spread":"5"},"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.09)","hsl":"hsla(0, 0%, 0%, 0.09)"}},"_background:hover":{"color":{"hex":"#d0f582","id":"zfgdvh","name":"Color #8"}},"_typography:hover":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_cssTransition":"0.3s"}},{"id":"xqunyp","name":"hero2__button-secondary","settings":{"_typography":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"},"font-weight":"600"},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_padding":{"top":"10","bottom":"10","left":"20","right":"20"},"_background":{"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0)","hsl":"hsla(0, 0%, 0%, 0)"}},"_boxShadow":{"values":{"offsetY":"2","blur":"5","spread":"5"},"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.1)","hsl":"hsla(0, 0%, 0%, 0.1)"}},"_background:hover":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_typography:hover":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_cssTransition":"0.3s"}}],"globalElements":[]}
Similar components
Akshay Joshi
App Hero Section
App-focused hero section — gradient headline, clear CTA, and side-by-side code showcase. Note: use SPAN tag for the gradient color
View now
Copy now
{"id":6874,"name":"app-hero-section","title":"App Hero Section","date":"2026-03-19 07:27:49","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-hero-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"aa4d2b","name":"section","parent":0,"children":["46e6ad"],"settings":{"_cssGlobalClasses":["app_hero__section"]},"label":"Hero Section"},{"id":"46e6ad","name":"container","parent":"aa4d2b","children":["03e06b","7c0c70"],"settings":{"_cssGlobalClasses":["app_hero__container"]},"label":"Two Column Container"},{"id":"03e06b","name":"block","parent":"46e6ad","children":["8c2a9a","ea46a7","5a69c7","1eee37","73d697"],"settings":{"_cssGlobalClasses":["app_hero__left"]},"label":"Left Column"},{"id":"8c2a9a","name":"block","parent":"03e06b","children":["99ff56","09eaa0"],"settings":{"_cssGlobalClasses":["app_hero__badge"]},"label":"Badge"},{"id":"99ff56","name":"text-basic","parent":"8c2a9a","children":[],"settings":{"text":">_","tag":"span","_cssGlobalClasses":["app_hero__badge-prefix"]},"label":"Badge Prefix"},{"id":"09eaa0","name":"text-basic","parent":"8c2a9a","children":[],"settings":{"text":"v2.4 \u2014 Now with AI schema generation","tag":"span","_cssGlobalClasses":["app_hero__badge-text"]},"label":"Badge Text"},{"id":"ea46a7","name":"block","parent":"03e06b","children":["ccfcce"],"settings":{"_cssGlobalClasses":["app_hero__heading-wrap"]},"label":"Heading Block"},{"id":"ccfcce","name":"heading","parent":"ea46a7","children":[],"settings":{"text":"APIs that just work","tag":"h1","_cssGlobalClasses":["app_hero__h1","app_hero__h1--dark","app_hero__h1--gradient"]},"label":"H1 Line 1"},{"id":"5a69c7","name":"text-basic","parent":"03e06b","children":[],"settings":{"text":"Ship production-ready APIs in minutes, not months. Beautiful docs, instant SDKs, and monitoring that actually helps.","tag":"p","_cssGlobalClasses":["app_hero__body"]},"label":"Body Text"},{"id":"1eee37","name":"block","parent":"03e06b","children":["e3f7b2","406a0f"],"settings":{"_cssGlobalClasses":["app_hero__buttons"]},"label":"Buttons Row"},{"id":"e3f7b2","name":"button","parent":"1eee37","children":[],"settings":{"text":"\u2192 Start Building \u2014 Free","style":"primary","link":{"type":"external","url":"#"},"_cssGlobalClasses":["app_hero__btn","fsebdo"]},"label":"Primary Button"},{"id":"406a0f","name":"button","parent":"1eee37","children":[],"settings":{"text":"See how it works","style":"secondary","link":{"type":"external","url":"#"},"_cssGlobalClasses":["app_hero__btn","app_hero__btn--ghost"]},"label":"Ghost Button"},{"id":"73d697","name":"block","parent":"03e06b","children":["385e85","dc7e34","943457"],"settings":{"_cssGlobalClasses":["app_hero__trust-bar"]},"label":"Trust Bar"},{"id":"385e85","name":"block","parent":"73d697","children":["7fbf7f","dca7e0"],"settings":{"_cssGlobalClasses":["app_hero__trust-item"]},"label":"Trust 1"},{"id":"7fbf7f","name":"icon","parent":"385e85","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["yjdfmy"]},"themeStyles":[]},{"id":"dca7e0","name":"text-basic","parent":"385e85","children":[],"settings":{"text":"No credit card","tag":"span","_cssGlobalClasses":["app_hero__trust-text"]},"label":"Text"},{"id":"dc7e34","name":"block","parent":"73d697","children":["b7379b","6871e2"],"settings":{"_cssGlobalClasses":["app_hero__trust-item"]},"label":"Trust 2"},{"id":"b7379b","name":"icon","parent":"dc7e34","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["yjdfmy"]},"themeStyles":[]},{"id":"6871e2","name":"text-basic","parent":"dc7e34","children":[],"settings":{"text":"1,000 free requests\/day","tag":"span","_cssGlobalClasses":["app_hero__trust-text"]}},{"id":"943457","name":"block","parent":"73d697","children":["8c428d","2a7667"],"settings":{"_cssGlobalClasses":["app_hero__trust-item"]},"label":"Trust 3"},{"id":"8c428d","name":"icon","parent":"943457","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["yjdfmy"]},"themeStyles":[]},{"id":"2a7667","name":"text-basic","parent":"943457","children":[],"settings":{"text":"Deploy in seconds","tag":"span","_cssGlobalClasses":["app_hero__trust-text"]}},{"id":"7c0c70","name":"block","parent":"46e6ad","children":["058058","dce1d4"],"settings":{"_cssGlobalClasses":["app_hero__right"]},"label":"Right Column"},{"id":"058058","name":"block","parent":"7c0c70","children":["6498a9","b0883d"],"settings":{"_cssGlobalClasses":["app_hero__code-window"]},"label":"Code Window"},{"id":"6498a9","name":"block","parent":"058058","children":["e004e4","852ccd"],"settings":{"_cssGlobalClasses":["app_hero__code-titlebar"]},"label":"Title Bar"},{"id":"e004e4","name":"block","parent":"6498a9","children":["1f88f3","1accee","cb0a92","8944d9"],"settings":{"_cssGlobalClasses":["app_hero__code-titlebar-left"]},"label":"Titlebar Left"},{"id":"1f88f3","name":"icon","parent":"e004e4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["lanrmm"]},"themeStyles":[]},{"id":"1accee","name":"icon","parent":"e004e4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["zzysqo"]},"themeStyles":[]},{"id":"cb0a92","name":"icon","parent":"e004e4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["sszzsi"]},"themeStyles":[]},{"id":"8944d9","name":"text-basic","parent":"e004e4","children":[],"settings":{"text":"index.js","tag":"span","_cssGlobalClasses":["app_hero__code-filename"]},"label":"Filename"},{"id":"852ccd","name":"text-basic","parent":"6498a9","children":[],"settings":{"text":"JAVASCRIPT","tag":"span","_cssGlobalClasses":["app_hero__code-lang"]},"label":"Language Label"},{"id":"b0883d","name":"block","parent":"058058","children":["456350"],"settings":{"_cssGlobalClasses":["app_hero__code-body"]},"label":"Code Body"},{"id":"456350","name":"code","parent":"b0883d","children":[],"settings":{"code":"const forge = require('@apiforge\/sdk');\n\nconst api = forge.create({\n name: 'my-api',\n version: '1.0.0',\n auth: 'api-key',\n});\n","_cssGlobalClasses":["app_hero__code-element"],"prettify":"tomorrow-night"},"label":"Code Content","themeStyles":[]},{"id":"dce1d4","name":"block","parent":"7c0c70","children":["635265","caf41c"],"settings":{"_cssGlobalClasses":["app_hero__deploy-badge"]},"label":"Deploy Badge"},{"id":"635265","name":"icon","parent":"dce1d4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["sszzsi"]},"themeStyles":[]},{"id":"caf41c","name":"text-basic","parent":"dce1d4","children":[],"settings":{"text":"Deployed to 200+ edge locations","tag":"span","_cssGlobalClasses":["app_hero__deploy-text"]},"label":"Deploy Text"}],"templateType":"section","global_classes":[{"id":"app_hero__section","name":"app_hero__section","settings":{"_background":{"color":{"hex":"#f4f8f6"}},"_padding":{"top":"7%","bottom":"7%","left":"5%","right":"5%"},"_cssCustom":".app_hero__section { overflow: hidden; }"}},{"id":"app_hero__container","name":"app_hero__container","settings":{"_display":"grid","_gridTemplateColumns":"1fr 1fr","_gridGap":"60","_alignItemsGrid":"center","_widthMax":"100%","_width":"1240","_gridTemplateColumns:tablet_portrait":"repeat(1, 1fr)","_gridTemplateColumns:mobile_landscape":"repeat(1, 1fr)"}},{"id":"app_hero__left","name":"app_hero__left","settings":{"_display":"flex","_direction":"column","_rowGap":"28","_alignItems":"flex-start"}},{"id":"app_hero__badge","name":"app_hero__badge","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"8","_background":{"color":{"hex":"#ffffff"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#2dc88c"}},"_padding":{"top":"8","bottom":"8","left":"16","right":"16"},"_width":"max-content"},"modified":1773390761,"user_id":1},{"id":"app_hero__badge-prefix","name":"app_hero__badge-prefix","settings":{"_typography":{"font-family":"monospace","font-size":"13","font-weight":"700","color":{"hex":"#2dc88c"}}}},{"id":"app_hero__badge-text","name":"app_hero__badge-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"500","color":{"hex":"#3d5a52"}}}},{"id":"app_hero__heading-wrap","name":"app_hero__heading-wrap","settings":{"_display":"flex","_direction":"column","_rowGap":"0"}},{"id":"app_hero__h1","name":"app_hero__h1","settings":{"_typography":{"font-family":"Inter","font-size":"82","font-weight":"900","line-height":"1.0"},"_typography:tablet_portrait":{"font-size":"60"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"38"}}},{"id":"app_hero__h1--dark","name":"app_hero__h1--dark","settings":{"_typography":{"color":{"hex":"#0f1c18"}}}},{"id":"app_hero__h1--gradient","name":"app_hero__h1--gradient","settings":{"_cssCustom":".app_hero__h1--gradient span { background: linear-gradient(90deg, #2dc88c 0%, #1ab8d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; position: relative; } .app_hero__h1--gradient::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #2dc88c 0%, #1ab8d4 100%); border-radius: 2px; opacity: 0.5; }"},"modified":1773390761,"user_id":1},{"id":"app_hero__body","name":"app_hero__body","settings":{"_typography":{"font-family":"Inter","font-size":"18","font-weight":"400","line-height":"1.7","color":{"hex":"#4b6058"}},"_typography:mobile_landscape":{"font-size":"16"}}},{"id":"app_hero__buttons","name":"app_hero__buttons","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"20","_direction:mobile_portrait":"column","_rowGap":"12","_alignItems:mobile_portrait":"flex-start"}},{"id":"app_hero__btn","name":"app_global__btn","settings":{"_padding":{"top":"18","bottom":"18","left":"32","right":"32"},"_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"}},"_typography":{"font-family":"Inter","font-size":"16","font-weight":"700"},"_boxShadow:hover":{"values":{"offsetX":"0","offsetY":"8","blur":"28"}}},"modified":1773483218,"user_id":1},{"id":"app_hero__btn--ghost","name":"app_hero__btn--ghost","settings":{"_background":{"color":{"hex":"transparent"}},"_padding":{"top":"18","bottom":"18","left":"4","right":"4"},"_typography":{"font-family":"Inter","font-size":"16","font-weight":"600","color":{"hex":"#0f1c18"}},"_typography:hover":{"color":{"raw":"#2dc88c"}}}},{"id":"app_hero__trust-bar","name":"app_hero__trust-bar","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"24","_flexWrap":"wrap","_rowGap":"8"}},{"id":"app_hero__trust-item","name":"app_hero__trust-item","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"7"}},{"id":"app_hero__trust-text","name":"app_hero__trust-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"400","color":{"hex":"#6b8078"}}}},{"id":"app_hero__right","name":"app_hero__right","settings":{"_position":"relative","_display":"flex","_direction":"column","_rowGap":"0"}},{"id":"app_hero__code-window","name":"app_hero__code-window","settings":{"_background":{"color":{"hex":"#161e1b"}},"_border":{"radius":{"top":"16","right":"16","bottom":"16","left":"16"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#ffffff","rgb":"rgba(255,255,255,0.08)"}},"_boxShadow":{"values":{"offsetX":"0","offsetY":"24","blur":"64","spread":"0"},"color":{"hex":"#000000","rgb":"rgba(0,0,0,0.28)"}},"_overflow":"hidden","_cssCustom":".app_hero__code-window { animation: app-hero-float 4s ease-in-out infinite; } @keyframes app-hero-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }"}},{"id":"app_hero__code-titlebar","name":"app_hero__code-titlebar","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_justifyContent":"space-between","_padding":{"top":"14","bottom":"14","left":"18","right":"18"},"_background":{"color":{"hex":"#1a2420"}},"_border":{"width":{"bottom":"1"},"style":"solid","color":{"hex":"#ffffff","rgb":"rgba(255,255,255,0.07)"}}}},{"id":"app_hero__code-titlebar-left","name":"app_hero__code-titlebar-left","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"8"}},{"id":"app_hero__code-filename","name":"app_hero__code-filename","settings":{"_typography":{"font-family":"monospace","font-size":"13","font-weight":"500","color":{"hex":"#9ab4ac"}},"_margin":{"left":"8"}}},{"id":"app_hero__code-lang","name":"app_hero__code-lang","settings":{"_typography":{"font-family":"monospace","font-size":"11","font-weight":"600","letter-spacing":"0.08em","color":{"hex":"#5a7570"}}}},{"id":"app_hero__code-body","name":"app_hero__code-body","settings":{"_padding":{"top":"24","bottom":"24","left":"24","right":"24"}}},{"id":"app_hero__code-element","name":"app_hero__code-element","settings":{"_cssCustom":".app_hero__code-pre { margin: 0; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 14px; line-height: 1.8; color: #c8d8d2; white-space: pre; overflow-x: auto; } .app_hero__code--keyword { color: #2dc88c; font-weight: 600; } .app_hero__code--var { color: #82d9ff; } .app_hero__code--fn { color: #ffd97d; } .app_hero__code--str { color: #ff9e7a; } .app_hero__code--comment { color: #4d6e65; font-style: italic; }"}},{"id":"app_hero__deploy-badge","name":"app_hero__deploy-badge","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"10","_background":{"color":{"hex":"#ffffff"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#e2ebe7"}},"_padding":{"top":"10","bottom":"10","left":"18","right":"18"},"_boxShadow":{"values":{"offsetX":"0","offsetY":"4","blur":"20","spread":"0"},"color":{"hex":"#000000","rgb":"rgba(0,0,0,0.10)"}},"_position":"absolute","_bottom":"-16","_right":"0","_zIndex":"10","_cssCustom":".app_hero__deploy-badge { animation: app-hero-badge-in 0.7s ease 0.4s both; } @keyframes app-hero-badge-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }"}},{"id":"app_hero__deploy-text","name":"app_hero__deploy-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"700","color":{"hex":"#0f1c18"}}}},{"id":"lanrmm","name":"app_hero__traffic-dot--red-icon","settings":{"iconColor":{"raw":"#EE5C55"},"iconSize":"13"}},{"id":"zzysqo","name":"app_hero__traffic-dot--yellow-icon","settings":{"iconSize":"13","iconColor":{"raw":"#F8BD45"}}},{"id":"sszzsi","name":"app_hero__traffic-dot--green-icon","settings":{"iconSize":"13","iconColor":{"raw":"#5dc942"}}},{"id":"yjdfmy","name":"app_hero__trust-dot_icon","settings":{"iconSize":"8","iconColor":{"raw":"#2dc88c"}},"modified":1773394305,"user_id":1},{"id":"fsebdo","name":"app_btn--green","settings":{"_boxShadow:hover":{"values":{"offsetY":"8","blur":"28","offsetX":"0"},"color":{"raw":"#25b07c"}},"_background":{"color":{"raw":"#2dc88c"}},"_typography":{"color":{"raw":"#ffffff"}},"_transform:hover":{"translateY":"-2px"},"_transformOrigin:hover":"transform 0.25s ease"},"modified":1773483218,"user_id":1}]}
Akshay Joshi
Product Hunt – Hero section
Section containing a centered layout with a headline, CTA, and email signup form.
View now
Copy now
{"id":6852,"name":"ph-hero-section-2","title":"PH Hero Section","date":"2026-03-14 17:20:13","date_formatted":"March 14, 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\/ph-hero-section-2\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"9e2e93","name":"section","parent":0,"children":["5f249a"],"settings":{"_cssGlobalClasses":["hunt__section"]},"label":"PH Hero Section"},{"id":"5f249a","name":"container","parent":"9e2e93","children":["ff8e6f","bab1bf","d9f8dd","98f1b0","5859d8"],"settings":{"_cssGlobalClasses":["hunt__inner"]},"label":"Inner Container"},{"id":"ff8e6f","name":"block","parent":"5f249a","children":["2a53f3","39a389","e844c7"],"settings":{"_cssGlobalClasses":["hunt__badge","hunt__anim-fadein-down","hunt__anim-delay-0"],"_cssTransition":"ease .3s"},"label":"Announcement Badge"},{"id":"2a53f3","name":"icon","parent":"ff8e6f","children":[],"settings":{"icon":{"library":"fontawesomeRegular","icon":"far fa-star"},"_cssGlobalClasses":["hunt__badge-icon"]},"label":"Star Icon","themeStyles":[]},{"id":"39a389","name":"text-basic","parent":"ff8e6f","children":[],"settings":{"text":"We're live on Product Hunt \u2014 Vote for us!","tag":"span","_cssGlobalClasses":["hunt__badge-text"]},"label":"Badge Text"},{"id":"e844c7","name":"icon","parent":"ff8e6f","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-arrow-right"},"_cssGlobalClasses":["hunt__badge-arrow"]},"label":"Badge Arrow","themeStyles":[]},{"id":"bab1bf","name":"heading","parent":"5f249a","children":[],"settings":{"text":"The launch page that gets you to #1 on Product Hunt","tag":"h1","_cssGlobalClasses":["hunt__heading","hunt__anim-fadein-up","hunt__anim-delay-150"]},"label":"Main Heading"},{"id":"d9f8dd","name":"text-basic","parent":"5f249a","children":[],"settings":{"_cssGlobalClasses":["hunt__subtext","hunt__anim-fadein-up","hunt__anim-delay-250"],"text":"Referral waitlist, countdown timer, demo embed, and auto-switching voting CTA. Everything founders need in one page.","tag":"p"},"label":"Subtext"},{"id":"98f1b0","name":"form","parent":"5f249a","children":[],"settings":{"_cssGlobalClasses":["hunt__form-row","hunt__anim-fadein-up","hunt__anim-delay-350"],"_cssTransition":"ease .3s","fields":[{"id":"673c40","type":"email","label":"","placeholder":"Enter your email","required":"1","width":"80"}],"submitButton":{"text":"Join the Waitlist","style":"primary"},"actions":["email"]},"label":"Email Form","themeStyles":[]},{"id":"5859d8","name":"block","parent":"5f249a","children":["9eaee8","444f23"],"settings":{"_cssGlobalClasses":["hunt__proof-row","hunt__anim-fadein-up","hunt__anim-delay-450"]},"label":"Social Proof"},{"id":"9eaee8","name":"block","parent":"5859d8","children":["251475","fdcdd7","77ae4a","9ed64c"],"settings":{"_cssGlobalClasses":["hunt__avatars"]},"label":"Avatars"},{"id":"251475","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"A","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#a78bfa"}}},"label":"Avatar A"},{"id":"fdcdd7","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"B","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#FF6154"}}},"label":"Avatar B"},{"id":"77ae4a","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"C","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#34d399"}}},"label":"Avatar C"},{"id":"9ed64c","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"D","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#818cf8"}}},"label":"Avatar D"},{"id":"444f23","name":"text-basic","parent":"5859d8","children":[],"settings":{"text":"2,400+ founders already joined","tag":"span","_cssGlobalClasses":["hunt__proof-text"]},"label":"Proof Text"}],"templateType":"section","global_classes":[{"id":"hunt__section","name":"hunt__section","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"100","bottom":"100","left":"24","right":"24"},"_padding:mobile_landscape":{"top":"60","bottom":"60"}},"modified":1773493462,"user_id":1},{"id":"hunt__inner","name":"hunt__inner","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"28","_widthMax":"100%","_width":"1280","_textAlign":"center"},"modified":1773479545,"user_id":1},{"id":"hunt__badge","name":"hunt__badge","settings":{"_display":"inline-flex","_direction":"row","_alignItems":"center","_columnGap":"8","_background":{"color":{"hex":"#FF6154"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"}},"_padding":{"top":"12","bottom":"12","left":"22","right":"22"},"_transition":"all 0.2s ease","_background:hover":{"color":{"hex":"#e84f42"}},"_transform:hover":"translateY(-2px)","_boxShadow:hover":{"values":{"offsetX":"0","offsetY":"8","blur":"20","spread":"0"},"color":{"hex":"#FF6154","rgb":"rgba(255,97,84,0.35)"}},"_width":"max-content"},"modified":1773429916,"user_id":1},{"id":"hunt__badge-icon","name":"hunt__badge-icon","settings":{"_typography":{"font-size":"14","color":{"hex":"#ffffff"}}}},{"id":"hunt__badge-text","name":"hunt__badge-text","settings":{"_typography":{"font-family":"Inter","font-size":"15","font-weight":"600","color":{"hex":"#ffffff"}}}},{"id":"hunt__badge-arrow","name":"hunt__badge-arrow","settings":{"_typography":{"font-size":"12","color":{"hex":"#ffffff"}}}},{"id":"hunt__heading","name":"hunt__h1","settings":{"_typography":{"font-family":"Inter","font-size":"72","font-weight":"900","line-height":"1.1","text-align":"center","color":{"hex":"#1a1a2e"}},"_typography:tablet_portrait":{"font-size":"52"},"_typography:mobile_landscape":{"font-size":"38"},"_typography:mobile_portrait":{"font-size":"30"},"_width":"800","_widthMax":"100%","_cssCustom":".hunt__h1 .hunt-rank {\n color: #5B4FE8;\n font-weight: 900;\n}\n\n.hunt__h1 .hunt-brand {\n background: linear-gradient(135deg, #FF6154 0%, #ff9a3c 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: inline-block;\n font-weight: 900;\n}"},"modified":1773508629,"user_id":1},{"id":"hunt__subtext","name":"hunt__subtext","settings":{"_typography":{"font-family":"Inter","font-size":"18","font-weight":"400","line-height":"1.75","text-align":"center","color":{"hex":"#6b7280"}},"_widthMax":"580","_typography:mobile_landscape":{"font-size":"16"}}},{"id":"hunt__form-row","name":"hunt__form-row","settings":{"_display":"flex","_direction":"row","_alignItems":"stretch","_transition":"border-color 0.2s ease","_direction:mobile_portrait":"column","_width":"600","_widthMax":"100%","submitButtonWidth":"20","submitButtonBackgroundColor":{"raw":"#5B4FE8"},"submitButtonTypography":{"color":{"raw":"#fff"},"line-height":"1.8"},"submitButtonBorder":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"}},"fieldMargin":{"right":"20","bottom":"0"},"fieldBorder":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"},"width":{"top":"1","bottom":"1","right":"1","left":"1"},"style":"solid"},"_overflow":"hidden"},"modified":1773486337,"user_id":1},{"id":"hunt__proof-row","name":"hunt__proof-row","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"12","_justifyContent":"center"}},{"id":"hunt__avatars","name":"hunt__avatars","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_cssCustom":".hunt__avatars .hunt__avatar + .hunt__avatar { margin-left: -10px; }","_width":"max-content"}},{"id":"hunt__avatar","name":"hunt__avatar","settings":{"_width":"36","_height":"36","_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"2","right":"2","bottom":"2","left":"2"},"style":"solid","color":{"hex":"#ffffff"}},"_display":"flex","_alignItems":"center","_justifyContent":"center","_typography":{"font-family":"Inter","font-size":"12","font-weight":"800","color":{"hex":"#ffffff"}}}},{"id":"hunt__proof-text","name":"hunt__proof-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"400","color":{"hex":"#6b7280"}}}},{"id":"hunt__anim-fadein-down","name":"hunt__anim-fadein-down","settings":{"_interactions":[{"id":"6bb309","trigger":"enterView","action":"startAnimation","animationType":"fadeInDown","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__anim-fadein-up","name":"hunt__anim-fadein-up","settings":{"_interactions":[{"id":"192518","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__anim-delay-0","name":"hunt__anim-delay-0","settings":{"_cssCustom":".hunt__anim-delay-0 { animation-delay: 0s !important; }"}},{"id":"hunt__anim-delay-150","name":"hunt__anim-delay-150","settings":{"_cssCustom":".hunt__anim-delay-150 { animation-delay: 0.15s !important; }"}},{"id":"hunt__anim-delay-250","name":"hunt__anim-delay-250","settings":{"_cssCustom":".hunt__anim-delay-250 { animation-delay: 0.25s !important; }"}},{"id":"hunt__anim-delay-350","name":"hunt__anim-delay-350","settings":{"_cssCustom":".hunt__anim-delay-350 { animation-delay: 0.35s !important; }"}},{"id":"hunt__anim-delay-450","name":"hunt__anim-delay-450","settings":{"_cssCustom":".hunt__anim-delay-450 { animation-delay: 0.45s !important; }"}}]}
Akshay Joshi
Horizontal Scroll Section
Horizontal Scroll Section with Large Typography
View now
Copy now
{"id":6639,"name":"horizontal-scroll-section","title":"Horizontal Scroll Section","date":"2026-02-27 16:29:55","date_formatted":"February 27, 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\/horizontal-scroll-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"28d958","name":"section","parent":0,"children":["8cebab","78819a"],"settings":{"_cssGlobalClasses":["bjujmn","gpxpfl"]},"label":"Horizontal Scroll Section"},{"id":"8cebab","name":"container","parent":"28d958","children":["61c168"],"settings":{"_cssGlobalClasses":["iqzvlt","rdhsix"]}},{"id":"61c168","name":"slider-nested","parent":"8cebab","children":["b770ab","48f144","a667af"],"settings":{"_cssGlobalClasses":["zubgon","xjrggh"],"height":"100vh","type":"fade","speed":"400"}},{"id":"b770ab","name":"block","parent":"61c168","children":["786fac","47444c"],"settings":{"_background":{"image":{"id":6421,"filename":"64e31f2ece4592ec1e01d62d_1665158307-studio-rhe-hero.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/64e31f2ece4592ec1e01d62d_1665158307-studio-rhe-hero.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/64e31f2ece4592ec1e01d62d_1665158307-studio-rhe-hero-1024x608.webp"},"position":"center center","size":"cover","repeat":"no-repeat"},"_cssGlobalClasses":["vgtbro","cnodjs"]},"label":"Slide 1"},{"id":"786fac","name":"text-basic","parent":"b770ab","children":[],"settings":{"text":"Orange fruit beer combines the freshness of oranges with the smoothness of beer, making it a flavorful and refreshing beverage choice, especially in warm weather.","_cssGlobalClasses":["whmvzp","kggfcm","ukckli"],"_typography":{"color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"}}}},{"id":"47444c","name":"heading","parent":"b770ab","children":[],"settings":{"text":"Popular in wheat beers","_cssGlobalClasses":["xxlgvw","toegdg"],"tag":"h2"}},{"id":"48f144","name":"block","parent":"61c168","children":["1241bb","57435b"],"settings":{"_background":{"image":{"id":5998,"filename":"2151059680.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/2151059680.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/2151059680-683x1024.webp"}},"_cssGlobalClasses":["vgtbro","cnodjs"]},"label":"Slide 2"},{"id":"1241bb","name":"text-basic","parent":"48f144","children":[],"settings":{"text":"Enjoyed for its smooth and refreshing flavor Often paired with light foods like salads, seafood, and snacks","_cssGlobalClasses":["whmvzp","kggfcm","ukckli"],"_typography":{"color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"}}}},{"id":"57435b","name":"heading","parent":"48f144","children":[],"settings":{"text":"Alcohol content: Usually low to moderate","_cssGlobalClasses":["xxlgvw","toegdg"],"tag":"h2"}},{"id":"a667af","name":"block","parent":"61c168","children":["c215c5","2f8e2e"],"settings":{"_cssGlobalClasses":["vgtbro","cnodjs"],"_direction":"row","_alignItems":"center"},"label":"Slide 3"},{"id":"c215c5","name":"block","parent":"a667af","children":["cb9914","6d4b9d"],"settings":{"_columnGap":"20","_rowGap":"20"}},{"id":"cb9914","name":"text-basic","parent":"c215c5","children":[],"settings":{"text":"Orange adds a citrus flavor that makes the beer refreshing. It balances bitterness from hops with natural sweetness and acidity.","_cssGlobalClasses":["whmvzp","kggfcm","ukckli"],"_typography":{"color":{"hex":"#000000","id":"ymdprl","name":"Color #2"}}}},{"id":"6d4b9d","name":"heading","parent":"c215c5","children":[],"settings":{"text":"Enjoyed for its refreshing flavor","_cssGlobalClasses":["xxlgvw","toegdg"],"tag":"h2","_typography":{"color":{"hex":"#000000","id":"ymdprl","name":"Color #2"}}}},{"id":"2f8e2e","name":"block","parent":"a667af","children":["12f3f7"],"settings":{"_cssGlobalClasses":["dkdmcr"]}},{"id":"12f3f7","name":"block","parent":"2f8e2e","children":["414717","e8e894"],"settings":{"_cssGlobalClasses":["smvlsp"]}},{"id":"414717","name":"image","parent":"12f3f7","children":[],"settings":{"image":{"id":5995,"filename":"324.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/324.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/324.webp"},"_cssGlobalClasses":["crquae"]}},{"id":"e8e894","name":"image","parent":"12f3f7","children":[],"settings":{"image":{"id":6019,"filename":"maximalist-interior-design-scaled.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/maximalist-interior-design-scaled.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/maximalist-interior-design-740x1024.webp"},"_cssGlobalClasses":["crquae"]}},{"id":"78819a","name":"code","parent":"28d958","children":[],"settings":{"executeCode":true,"cssCode":"\/* 1. Force the slides into a horizontal line *\/\n.animated_horizontal-scroll-slider .splide__list {\n display: flex !important;\n flex-direction: row !important;\n flex-wrap: nowrap !important;\n \/* We remove max-content and use a calculation for safety *\/\n width: auto !important; \n \/* Critical: Stop Splide from trying to 'fade' or stack slides *\/\n transform-style: flat !important;\n}\n\n\/* 2. Force every slide to be visible and positioned correctly *\/\n.animated_horizontal-scroll-slide {\n width: 100vw !important;\n flex: 0 0 100vw !important; \n max-width: 100vw !important;\n \/* FIX: Override Splide Fade transform *\/\n transform: none !important; \n opacity: 1 !important;\n visibility: visible !important;\n position: relative !important;\n left: auto !important;\n top: auto !important;\n}\n\n\/* 3. Layout Setup *\/\n.animated_horizontal-scroll-section {\n height: 400vh !important;\n overflow: visible !important;\n}\n\n.animated_horizontal-scroll-container {\n position: sticky;\n top: 0;\n height: 100vh;\n width: 100%;\n overflow: hidden !important;\n}","javascriptCode":"document.addEventListener(\"DOMContentLoaded\", function () {\n const section = document.querySelector(\".animated_horizontal-scroll-section\");\n const list = document.querySelector(\".animated_horizontal-scroll-slider .splide__list\");\n const slides = document.querySelectorAll(\".animated_horizontal-scroll-slide\");\n\n if (!section || !list || slides.length === 0) return;\n\n function sync() {\n const rect = section.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n\n \/\/ Exit if not visible\n if (rect.bottom windowHeight) return;\n\n const totalScrollable = rect.height - windowHeight;\n if (totalScrollable {\n sync();\n ticking = false;\n });\n ticking = true;\n }\n }\n\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n window.addEventListener(\"resize\", sync);\n window.addEventListener(\"load\", sync);\n\n sync();\n});"}}],"templateType":"section","global_classes":[{"id":"gpxpfl","name":"animated_horizontal-scroll-section","settings":{"_width":"100%","_position":"relative"}},{"id":"rdhsix","name":"animated_horizontal-scroll-container","settings":{"_width":"100%","_position":"sticky","_top":"0"}},{"id":"xjrggh","name":"animated_horizontal-scroll-slider","settings":{"_width":"100%","_widthMax":"100%"},"modified":1771599000,"user_id":1},{"id":"cnodjs","name":"animated_horizontal-scroll-slide","settings":{"_alignItems":"flex-start","_justifyContent":"space-around","_padding":{"top":"7%","bottom":"7%","right":"7%","left":"7%"},"_columnGap:tablet_portrait":"20","_rowGap:tablet_portrait":"20"}},{"id":"kggfcm","name":"animated2__text--big","settings":{"_typography":{"font-size":"28","text-align":"left","line-height":"1.3"},"_typography:tablet_portrait":{"font-size":"26"},"_typography:mobile_landscape":{"font-size":"24"},"_typography:mobile_portrait":{"font-size":"23"}}},{"id":"toegdg","name":"animated2__h2--big","settings":{"_typography":{"font-size":"100","font-family":"Autour One","color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"}},"_typography:tablet_portrait":{"font-size":"65"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"36"}},"modified":1772209646,"user_id":1},{"id":"dkdmcr","name":"animated_horizontal-scroll-slide-content","settings":{"_direction":"column","_columnGap":"20","_rowGap":"20"},"modified":1772010300,"user_id":1},{"id":"smvlsp","name":"animated_horizontal-scroll-slide-img--block","settings":{"_direction":"row","_columnGap":"20","_rowGap":"20","_padding":{"left":"40"}},"modified":1772205129,"user_id":1},{"id":"crquae","name":"animated_horizontal-scroll-slide--content-img","settings":{"_widthMax":"250px","_width":"100%","_objectFit":"cover"}},{"id":"ukckli","name":"animated2__width--m","settings":{"_widthMax":"50%","_widthMax:mobile_landscape":"70%","_widthMax:mobile_portrait":"100%"}}]}