{"id":1031448,"date":"2025-09-22T01:08:21","date_gmt":"2025-09-22T01:08:21","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=1031448"},"modified":"2025-09-22T01:08:21","modified_gmt":"2025-09-22T01:08:21","slug":"futuristic-glass-hero-section","status":"publish","type":"wporg-pattern","link":"https:\/\/it.wordpress.org\/patterns\/pattern\/futuristic-glass-hero-section\/","title":{"rendered":"Futuristic Glass Hero Section"},"content":{"rendered":"\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-0e47273b wp-block-group-is-layout-flex\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:48px;padding-bottom:48px\">\n\n  <!-- Glass card -->\n  \n  <div class=\"wp-block-group futuristic-glass is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:16px;padding:36px\">\n\n    \n    <div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n\n      \n      <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n        \n        <h1 class=\"has-huge-font-size wp-block-heading\" style=\"margin-bottom:12px;line-height:1.05\">Launch fast \u2014 design futuristic<\/h1>\n        \n\n        \n        <p class=\"wp-block-paragraph\" style=\"margin-bottom:18px;line-height:1.6\">A flexible hero block with glass effect, gradient backdrop and two-tone CTAs. Works on dark and light themes, responsive and accessibility-minded.<\/p>\n        \n\n        \n        <div class=\"wp-block-buttons is-layout-flex is-content-justification-left wp-container-core-buttons-is-layout-a90dccff wp-block-buttons-is-layout-flex\" style=\"flex-wrap:nowrap;gap:8px\">\n\n          \n          <div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button has-small-font-size\">Get started<\/a><\/div>\n          \n\n          \n          <div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button has-small-font-size\">See demo<\/a><\/div>\n          \n\n        <\/div>\n        \n      <\/div>\n      \n\n      \n      <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n        \n        <div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-02e95266 wp-block-group-is-layout-flow\">\n\n          \n          <div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:10px;padding:12px\">\n            \n            <h4 class=\"wp-block-heading\">Adaptive layouts<\/h4>\n            \n            \n            <p class=\"wp-block-paragraph\" style=\"font-size:14px;margin:0\">Two columns on desktop collapse gracefully on mobile.<\/p>\n            \n          <\/div>\n          \n\n          \n          <div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:10px;padding:12px\">\n            \n            <h4 class=\"wp-block-heading\">Accessible by design<\/h4>\n            \n            \n            <p class=\"wp-block-paragraph\" style=\"font-size:14px;margin:0\">High contrast text, semantic headings, and keyboard-focusable buttons.<\/p>\n            \n          <\/div>\n          \n\n        <\/div>\n        \n      <\/div>\n      \n\n    <\/div>\n    \n  <\/div>\n  \n<\/div>\n\n\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":23146820,"parent":0,"template":"","meta":{"wpop_keywords":"hero, glassmorphism, gradient, landing page, futuristic, modern, cta","wpop_description":"A modern, futuristic hero section featuring a glass-effect container, gradient background, two-column responsive layout, and rounded call-to-action buttons. Perfect for landing pages or startup sites. Built with accessibility, responsiveness, and WordPress block best practices in mind.","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\/html,core\/paragraph","footnotes":""},"pattern-categories":[60,42,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1031448","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-banner","wporg-pattern-category-call-to-action","wporg-pattern-category-text"],"category_slugs":["banner","call-to-action","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\"}} -->\n<div class=\"wp-block-group\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:html -->\n<!-- wp:group {\"align\":\"full\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"48px\",\"bottom\":\"48px\"}},\"color\":{\"background\":\"linear-gradient(135deg,rgba(12,10,55,0.95) 0%, rgba(26,13,84,0.95) 45%, rgba(4,132,255,0.95) 100%)\"}}} -->\n<div class=\"wp-block-group alignfull\" style=\"padding-top:48px;padding-bottom:48px\">\n\n  <!-- Glass card -->\n  <!-- wp:group {\"style\":{\"border\":{\"radius\":\"16px\"},\"spacing\":{\"padding\":{\"top\":\"36px\",\"right\":\"36px\",\"bottom\":\"36px\",\"left\":\"36px\"}},\"color\":{\"background\":\"rgba(255,255,255,0.06)\"}},\"className\":\"futuristic-glass\"} -->\n  <div class=\"wp-block-group futuristic-glass\" style=\"border-radius:16px;padding:36px\">\n\n    <!-- wp:columns -->\n    <div class=\"wp-block-columns\">\n\n      <!-- wp:column {\"width\":\"60%\"} -->\n      <div class=\"wp-block-column\" style=\"flex-basis:60%\">\n        <!-- wp:heading {\"level\":1,\"fontSize\":\"huge\",\"style\":{\"spacing\":{\"margin\":{\"bottom\":\"12px\"}},\"typography\":{\"lineHeight\":\"1.05\"}}} -->\n        <h1 class=\"has-huge-font-size\" style=\"margin-bottom:12px;line-height:1.05\">Launch fast \u2014 design futuristic<\/h1>\n        <!-- \/wp:heading -->\n\n        <!-- wp:paragraph {\"style\":{\"spacing\":{\"margin\":{\"bottom\":\"18px\"}},\"typography\":{\"lineHeight\":\"1.6\"}}} -->\n        <p style=\"margin-bottom:18px;line-height:1.6\">A flexible hero block with glass effect, gradient backdrop and two-tone CTAs. Works on dark and light themes, responsive and accessibility-minded.<\/p>\n        <!-- \/wp:paragraph -->\n\n        <!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"left\"}} -->\n        <div class=\"wp-block-buttons is-layout-flex\" style=\"flex-wrap:nowrap;gap:8px\">\n\n          <!-- wp:button {\"style\":{\"border\":{\"radius\":\"999px\"},\"spacing\":{\"padding\":{\"top\":\"8px\",\"bottom\":\"8px\",\"left\":\"16px\",\"right\":\"16px\"}}},\"fontSize\":\"small\"} -->\n          <div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button has-small-font-size\">Get started<\/a><\/div>\n          <!-- \/wp:button -->\n\n          <!-- wp:button {\"style\":{\"border\":{\"radius\":\"999px\"},\"spacing\":{\"padding\":{\"top\":\"8px\",\"bottom\":\"8px\",\"left\":\"14px\",\"right\":\"14px\"}}},\"fontSize\":\"small\"} -->\n          <div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button has-small-font-size\">See demo<\/a><\/div>\n          <!-- \/wp:button -->\n\n        <\/div>\n        <!-- \/wp:buttons -->\n      <\/div>\n      <!-- \/wp:column -->\n\n      <!-- wp:column {\"width\":\"40%\"} -->\n      <div class=\"wp-block-column\" style=\"flex-basis:40%\">\n        <!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"10px\"}}} -->\n        <div class=\"wp-block-group\">\n\n          <!-- wp:group {\"style\":{\"border\":{\"radius\":\"10px\"},\"spacing\":{\"padding\":{\"top\":\"12px\",\"right\":\"12px\",\"bottom\":\"12px\",\"left\":\"12px\"}},\"color\":{\"background\":\"rgba(255,255,255,0.03)\"}}} -->\n          <div class=\"wp-block-group\" style=\"border-radius:10px;padding:12px\">\n            <!-- wp:heading {\"level\":4} -->\n            <h4>Adaptive layouts<\/h4>\n            <!-- \/wp:heading -->\n            <!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"14px\"}}} -->\n            <p style=\"font-size:14px;margin:0\">Two columns on desktop collapse gracefully on mobile.<\/p>\n            <!-- \/wp:paragraph -->\n          <\/div>\n          <!-- \/wp:group -->\n\n          <!-- wp:group {\"style\":{\"border\":{\"radius\":\"10px\"},\"spacing\":{\"padding\":{\"top\":\"12px\",\"right\":\"12px\",\"bottom\":\"12px\",\"left\":\"12px\"}},\"color\":{\"background\":\"rgba(255,255,255,0.03)\"}}} -->\n          <div class=\"wp-block-group\" style=\"border-radius:10px;padding:12px\">\n            <!-- wp:heading {\"level\":4} -->\n            <h4>Accessible by design<\/h4>\n            <!-- \/wp:heading -->\n            <!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"14px\"}}} -->\n            <p style=\"font-size:14px;margin:0\">High contrast text, semantic headings, and keyboard-focusable buttons.<\/p>\n            <!-- \/wp:paragraph -->\n          <\/div>\n          <!-- \/wp:group -->\n\n        <\/div>\n        <!-- \/wp:group -->\n      <\/div>\n      <!-- \/wp:column -->\n\n    <\/div>\n    <!-- \/wp:columns -->\n  <\/div>\n  <!-- \/wp:group -->\n<\/div>\n<!-- \/wp:group -->\n\n<!-- \/wp:html --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":5,"author_meta":{"name":"Jaydip Ahir","url":"https:\/\/it.wordpress.org\/patterns\/author\/jdahir0789","avatar":"https:\/\/secure.gravatar.com\/avatar\/a32cf44b4def01baf9b9eda3ac22c7d39fcd52e71c22e55209c2f9a8193b94a8?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1031448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1031448\/revisions"}],"predecessor-version":[{"id":1032976,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1031448\/revisions\/1032976"}],"author":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/jdahir0789"}],"wp:attachment":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1031448"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1031448"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1031448"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1031448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}