{"id":1293861,"date":"2026-08-06T13:23:26","date_gmt":"2026-08-06T13:23:26","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=1293861"},"modified":"2026-08-06T13:23:26","modified_gmt":"2026-08-06T13:23:26","slug":"hero-section-30","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/hero-section-30\/","title":{"rendered":"Hero Section"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull developer-hero has-surface-background-color has-background is-layout-constrained wp-container-core-group-is-layout-b17823ee wp-block-group-is-layout-constrained\" style=\"padding-top:12rem;padding-right:var(--wp--preset--spacing--50);padding-bottom:8rem;padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-e7f54917 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:55%\">\n<div class=\"wp-block-group developer-badge has-border-color has-surface-card-background-color has-background is-nowrap is-layout-flex wp-container-core-group-is-layout-a6b0c3b6 wp-block-group-is-layout-flex\" style=\"border-color:#6366f133;border-width:1px;border-radius:9999px;padding-top:0.375rem;padding-right:1rem;padding-bottom:0.375rem;padding-left:1rem\">\n<p class=\"has-brand-300-color has-text-color wp-block-paragraph\" style=\"font-size:0.875rem\">\u2728 Creative Developer &amp; Designer<\/p>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading has-7-xl-font-size\" style=\"margin-top:2rem;font-weight:800;letter-spacing:-0.02em;line-height:1.05\">Crafting <span class=\"developer-text-gradient\">Digital<\/span><br>Experiences<br><span style=\"color:var(--wp--preset--color--text-muted)\">That Matter<\/span><\/h1>\n\n\n\n<p class=\"has-text-secondary-color has-text-color has-lg-font-size wp-block-paragraph\" style=\"margin-top:1.5rem;line-height:1.7\">I design and build beautiful, performant web applications that blend creativity with technical excellence. Welcome to my Gutenberg-inspired creative space.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\" style=\"margin-top:2.5rem\">\n<div class=\"wp-block-button is-style-gradient\"><a class=\"wp-block-button__link has-custom-font-size wp-element-button\" style=\"border-radius:9999px;padding-top:0.875rem;padding-right:1.75rem;padding-bottom:0.875rem;padding-left:1.75rem;font-size:0.875rem;font-weight:600\">View My Work <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline-dark\"><a class=\"wp-block-button__link has-border-color has-custom-font-size wp-element-button\" style=\"border-color:var(--wp--preset--color--border-subtle);border-width:1px;border-radius:9999px;padding-top:0.875rem;padding-right:1.75rem;padding-bottom:0.875rem;padding-left:1.75rem;font-size:0.875rem;font-weight:600\">Read the Blog<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8da774a8 wp-block-columns-is-layout-flex\" style=\"margin-top:3.5rem\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-primary-color has-text-color wp-block-paragraph\" style=\"font-size:1.5rem;font-weight:700\">50+<\/p>\n\n\n\n<p class=\"has-text-muted-color has-text-color wp-block-paragraph\" style=\"font-size:0.75rem\">Projects<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-primary-color has-text-color wp-block-paragraph\" style=\"font-size:1.5rem;font-weight:700\">10+<\/p>\n\n\n\n<p class=\"has-text-muted-color has-text-color wp-block-paragraph\" style=\"font-size:0.75rem\">Years Exp.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-primary-color has-text-color wp-block-paragraph\" style=\"font-size:1.5rem;font-weight:700\">30+<\/p>\n\n\n\n<p class=\"has-text-muted-color has-text-color wp-block-paragraph\" style=\"font-size:0.75rem\">Articles<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45%\">\n<figure class=\"wp-block-image size-full has-custom-border developer-hero-image\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/editor_1024\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4NzIyMjE4LWltYWdlLWt3dnhpdzd6LmpwZw.jpg\" alt=\"\" class=\"has-border-color\" style=\"border-color:var(--wp--preset--color--border-subtle);border-width:1px;border-radius:1.5rem\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":21168942,"parent":0,"template":"","meta":{"wpop_keywords":"","wpop_description":"This pattern is for hero section.","wpop_viewport_width":1200,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/buttons,core\/column,core\/columns,core\/group,core\/heading,core\/image,core\/paragraph","footnotes":""},"pattern-categories":[60,2,42,3],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1293861","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-banner","wporg-pattern-category-buttons","wporg-pattern-category-call-to-action","wporg-pattern-category-columns"],"category_slugs":["banner","buttons","call-to-action","columns"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"metadata\":{\"patternName\":\"gutenberg-developer\/hero\",\"name\":\"Hero Section\",\"description\":\"A full-width hero section with animated gradient background, heading, description, CTA buttons, and floating stat cards.\",\"categories\":[\"developer-hero\",\"featured\"]},\"align\":\"full\",\"className\":\"developer-hero\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"12rem\",\"bottom\":\"8rem\",\"left\":\"var:preset|spacing|50\",\"right\":\"var:preset|spacing|50\"}},\"position\":{\"type\":\"relative\"}},\"backgroundColor\":\"surface\",\"layout\":{\"type\":\"constrained\",\"contentSize\":\"1280px\"}} -->\n<div class=\"wp-block-group alignfull developer-hero has-surface-background-color has-background\" style=\"padding-top:12rem;padding-right:var(--wp--preset--spacing--50);padding-bottom:8rem;padding-left:var(--wp--preset--spacing--50)\"><!-- wp:columns {\"style\":{\"spacing\":{\"blockGap\":{\"left\":\"4rem\"}}}} -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"55%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:55%\"><!-- wp:group {\"className\":\"developer-badge\",\"style\":{\"border\":{\"radius\":\"9999px\",\"color\":\"#6366f133\",\"width\":\"1px\"},\"spacing\":{\"padding\":{\"top\":\"0.375rem\",\"bottom\":\"0.375rem\",\"left\":\"1rem\",\"right\":\"1rem\"}}},\"backgroundColor\":\"surface-card\",\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\"}} -->\n<div class=\"wp-block-group developer-badge has-border-color has-surface-card-background-color has-background\" style=\"border-color:#6366f133;border-width:1px;border-radius:9999px;padding-top:0.375rem;padding-right:1rem;padding-bottom:0.375rem;padding-left:1rem\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"0.875rem\"}},\"textColor\":\"brand-300\"} -->\n<p class=\"has-brand-300-color has-text-color\" style=\"font-size:0.875rem\">\u2728 Creative Developer &amp; Designer<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":1,\"style\":{\"typography\":{\"fontWeight\":\"800\",\"lineHeight\":\"1.05\",\"letterSpacing\":\"-0.02em\"},\"spacing\":{\"margin\":{\"top\":\"2rem\"}}},\"fontSize\":\"7xl\"} -->\n<h1 class=\"wp-block-heading has-7-xl-font-size\" style=\"margin-top:2rem;font-weight:800;letter-spacing:-0.02em;line-height:1.05\">Crafting <span class=\"developer-text-gradient\">Digital<\/span><br>Experiences<br><span style=\"color:var(--wp--preset--color--text-muted)\">That Matter<\/span><\/h1>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"spacing\":{\"margin\":{\"top\":\"1.5rem\"}},\"typography\":{\"lineHeight\":\"1.7\"}},\"textColor\":\"text-secondary\",\"fontSize\":\"lg\"} -->\n<p class=\"has-text-secondary-color has-text-color has-lg-font-size\" style=\"margin-top:1.5rem;line-height:1.7\">I design and build beautiful, performant web applications that blend creativity with technical excellence. Welcome to my Gutenberg-inspired creative space.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons {\"style\":{\"spacing\":{\"margin\":{\"top\":\"2.5rem\"}}},\"layout\":{\"type\":\"flex\"}} -->\n<div class=\"wp-block-buttons\" style=\"margin-top:2.5rem\"><!-- wp:button {\"className\":\"is-style-gradient\",\"style\":{\"border\":{\"radius\":\"9999px\"},\"spacing\":{\"padding\":{\"top\":\"0.875rem\",\"bottom\":\"0.875rem\",\"left\":\"1.75rem\",\"right\":\"1.75rem\"}},\"typography\":{\"fontSize\":\"0.875rem\",\"fontWeight\":\"600\"}}} -->\n<div class=\"wp-block-button is-style-gradient\"><a class=\"wp-block-button__link has-custom-font-size wp-element-button\" style=\"border-radius:9999px;padding-top:0.875rem;padding-right:1.75rem;padding-bottom:0.875rem;padding-left:1.75rem;font-size:0.875rem;font-weight:600\">View My Work \u2192<\/a><\/div>\n<!-- \/wp:button -->\n\n<!-- wp:button {\"className\":\"is-style-outline-dark\",\"style\":{\"border\":{\"radius\":\"9999px\",\"color\":\"var:preset|color|border-subtle\",\"width\":\"1px\"},\"spacing\":{\"padding\":{\"top\":\"0.875rem\",\"bottom\":\"0.875rem\",\"left\":\"1.75rem\",\"right\":\"1.75rem\"}},\"typography\":{\"fontSize\":\"0.875rem\",\"fontWeight\":\"600\"}}} -->\n<div class=\"wp-block-button is-style-outline-dark\"><a class=\"wp-block-button__link has-border-color has-custom-font-size wp-element-button\" style=\"border-color:var(--wp--preset--color--border-subtle);border-width:1px;border-radius:9999px;padding-top:0.875rem;padding-right:1.75rem;padding-bottom:0.875rem;padding-left:1.75rem;font-size:0.875rem;font-weight:600\">Read the Blog<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons -->\n\n<!-- wp:columns {\"style\":{\"spacing\":{\"margin\":{\"top\":\"3.5rem\"},\"blockGap\":{\"left\":\"2.5rem\"}}}} -->\n<div class=\"wp-block-columns\" style=\"margin-top:3.5rem\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"1.5rem\",\"fontWeight\":\"700\"}},\"textColor\":\"text-primary\"} -->\n<p class=\"has-text-primary-color has-text-color\" style=\"font-size:1.5rem;font-weight:700\">50+<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"0.75rem\"}},\"textColor\":\"text-muted\"} -->\n<p class=\"has-text-muted-color has-text-color\" style=\"font-size:0.75rem\">Projects<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"1.5rem\",\"fontWeight\":\"700\"}},\"textColor\":\"text-primary\"} -->\n<p class=\"has-text-primary-color has-text-color\" style=\"font-size:1.5rem;font-weight:700\">10+<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"0.75rem\"}},\"textColor\":\"text-muted\"} -->\n<p class=\"has-text-muted-color has-text-color\" style=\"font-size:0.75rem\">Years Exp.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"1.5rem\",\"fontWeight\":\"700\"}},\"textColor\":\"text-primary\"} -->\n<p class=\"has-text-primary-color has-text-color\" style=\"font-size:1.5rem;font-weight:700\">30+<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"0.75rem\"}},\"textColor\":\"text-muted\"} -->\n<p class=\"has-text-muted-color has-text-color\" style=\"font-size:0.75rem\">Articles<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"45%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:45%\"><!-- wp:image {\"id\":null,\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"className\":\"developer-hero-image has-custom-border\",\"style\":{\"border\":{\"radius\":\"1.5rem\",\"color\":\"var:preset|color|border-subtle\",\"width\":\"1px\"}}} -->\n<figure class=\"wp-block-image size-full has-custom-border developer-hero-image\"><img src=\"https:\/\/images.rawpixel.com\/editor_1024\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4NzIyMjE4LWltYWdlLWt3dnhpdzd6LmpwZw.jpg\" alt=\"\" class=\"has-border-color\" style=\"border-color:var(--wp--preset--color--border-subtle);border-width:1px;border-radius:1.5rem\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":0,"author_meta":{"name":"Rashed Hossain","url":"https:\/\/wordpress.org\/patterns\/author\/wprashed","avatar":"https:\/\/secure.gravatar.com\/avatar\/299f355d9b85956afc004b43fcd052c71ed3a462e45cbd471877ba0a0f8f04cc?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1293861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1293861\/revisions"}],"predecessor-version":[{"id":1293868,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1293861\/revisions\/1293868"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/wprashed"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1293861"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1293861"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1293861"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1293861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}