Download Code
<!-- wp:greenshift-blocks/element {"id":"gsbp-d251d6c","tag":"section","type":"inner","localId":"gsbp-d251d6c","align":"full","dynamicAttributes":[{"name":"data-type","value":"section-component"}],"styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dside, min(3vw, 20px))"],"paddingLeft":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dside, min(3vw, 20px))"],"paddingTop":["60px"],"paddingBottom":["60px"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"]},"isVariation":"contentwrapper"} -->
<section class="gsbp-d251d6c alignfull" data-type="section-component"><!-- wp:greenshift-blocks/element {"id":"gsbp-9eb651a","metadata":{"name":"Content Area"},"type":"inner","localId":"gsbp-9eb651a","dynamicAttributes":[{"name":"data-type","value":"content-area-component"}],"styleAttributes":{"maxWidth":["100%"],"width":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px)"],"display":["flex"],"flexDirection":["row"],"flexColumns_Extra":2,"flexWidths_Extra":{"desktop":{"name":"50/50","widths":[50,50]},"tablet":{"name":"100/100","widths":[100,100]},"mobile":{"name":"100/100","widths":[100,100]}},"position":["relative"],"zIndex":["1"],"alignItems":["flex-start"],"columnGap":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d70, 3.38rem)"],"rowGap":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d70, 3.38rem)"]},"isVariation":"nocolumncontent"} -->
<div class="gsbp-9eb651a" data-type="content-area-component"><!-- wp:greenshift-blocks/element {"id":"gsbp-4a48364","type":"inner","localId":"gsbp-4a48364"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-74d9bb6","type":"inner","className":"gs-content-sticky","localId":"gsbp-74d9bb6","styleAttributes":[]} -->
<div class="gs-content-sticky gsbp-74d9bb6"><!-- wp:greenshift-blocks/element {"id":"gsbp-1d58e38","textContent":"Say hello to Greenshift","tag":"span","className":"gs-badge","localId":"gsbp-1d58e38"} -->
<span class="gs-badge">Say hello to Greenshift</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-1d89738","tag":"h2","type":"inner","className":"gs-title","localId":"gsbp-1d89738"} -->
<h2 class="gs-title"><!-- wp:greenshift-blocks/element {"id":"gsbp-98b05b9","textContent":"Get your project","tag":"span","localId":"gsbp-98b05b9"} -->
<span>Get your project</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-31f7c80","textContent":"\u003cbr /\u003e","tag":"span","type":"html","localId":"gsbp-31f7c80"} -->
<span><br></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-793ceaf","textContent":"going in 3 steps","tag":"span","className":"gs-title-gradient","localId":"gsbp-793ceaf"} -->
<span class="gs-title-gradient">going in 3 steps</span>
<!-- /wp:greenshift-blocks/element --></h2>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-b440e4d","textContent":"Clarity gives you the blocks \u0026amp; components you need to create a truly professional website for your SaaS. \u003cbr\u003eStop wrestling with code and start building your legacy.","tag":"p","className":"gs-description","localId":"gsbp-b440e4d"} -->
<p class="gs-description">Clarity gives you the blocks & components you need to create a truly professional website for your SaaS. <br>Stop wrestling with code and start building your legacy.</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-36ce137","textContent":"View Documentation","tag":"a","className":"gs-btn-doc","localId":"gsbp-36ce137","href":"#"} -->
<a class="gs-btn-doc" href="#">View Documentation</a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-f5f2226","type":"inner","localId":"gsbp-f5f2226"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-f7151a8","anchor":"stepsList","type":"inner","className":"gs-steps-list","localId":"gsbp-f7151a8"} -->
<div class="gs-steps-list" id="stepsList"><!-- wp:greenshift-blocks/element {"id":"gsbp-49ed0a9","type":"empty","className":"gs-steps-line","localId":"gsbp-49ed0a9"} -->
<div class="gs-steps-line"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-8b789b4","type":"inner","className":"gs-step-item gs-step-1 active","localId":"gsbp-8b789b4","dynamicAttributes":[{"name":"onmouseenter","value":"activateStep(0)"}]} -->
<div class="gs-step-item gs-step-1 active" onmouseenter="activateStep(0)"><!-- wp:greenshift-blocks/element {"id":"gsbp-27741b4","type":"inner","className":"gs-icon-wrapper","localId":"gsbp-27741b4"} -->
<div class="gs-icon-wrapper"><!-- wp:greenshift-blocks/element {"id":"gsbp-04d78e1","type":"empty","className":"gs-icon-bg","localId":"gsbp-04d78e1"} -->
<div class="gs-icon-bg"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-2b85fa3","tag":"svg","icon":{"icon":{"svg":"\u003csvg class=\u0022gs-icon\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n                                \u003cpath d=\u0022M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022m12 15-3-3a22 22 0 0 1 2-12 9.5 9.5 0 0 1 10 10l-2 1\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022m2 2 11 2.93\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022m2 2 2.93 11\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022M14.31 9.86 12 7.54\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022M20.5 18 17 21\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022m21 17-3 3.5\u0022\u003e\u003c/path\u003e\n                            \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"className":"gs-icon","localId":"gsbp-2b85fa3"} -->
<svg viewBox="0 0 24 24" class="gs-icon">
                                <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
                                <path d="m12 15-3-3a22 22 0 0 1 2-12 9.5 9.5 0 0 1 10 10l-2 1"/>
                                <path d="m2 2 11 2.93"/>
                                <path d="m2 2 2.93 11"/>
                                <path d="M14.31 9.86 12 7.54"/>
                                <path d="M20.5 18 17 21"/>
                                <path d="m21 17-3 3.5"/>
                            </svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-874e7cf","type":"inner","className":"gs-step-content","localId":"gsbp-874e7cf"} -->
<div class="gs-step-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-0258b5d","type":"inner","className":"gs-step-header","localId":"gsbp-0258b5d"} -->
<div class="gs-step-header"><!-- wp:greenshift-blocks/element {"id":"gsbp-97b7c86","textContent":"Step-01","tag":"span","className":"gs-step-number","localId":"gsbp-97b7c86"} -->
<span class="gs-step-number">Step-01</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-479efa7","type":"empty","className":"gs-step-line-h","localId":"gsbp-479efa7"} -->
<div class="gs-step-line-h"></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-55c29da","textContent":"Start with a great design","tag":"h3","className":"gs-step-title","localId":"gsbp-55c29da"} -->
<h3 class="gs-step-title">Start with a great design</h3>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-3116fa4","textContent":"Clarity gives you the blocks \u0026 components you need to create a website. We prioritize user experience and aesthetic consistency.","tag":"p","className":"gs-step-desc","localId":"gsbp-3116fa4"} -->
<p class="gs-step-desc">Clarity gives you the blocks & components you need to create a website. We prioritize user experience and aesthetic consistency.</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-c7554a6","tag":"a","type":"inner","className":"gs-learn-more","localId":"gsbp-c7554a6","href":"#"} -->
<a class="gs-learn-more" href="#"><!-- wp:greenshift-blocks/element {"id":"gsbp-782c707","textContent":"Learn more about design","tag":"span","localId":"gsbp-782c707"} -->
<span>Learn more about design</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-6db65c0","tag":"svg","icon":{"icon":{"svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n                                    \u003cpath d=\u0022M5 12h14M12 5l7 7-7 7\u0022\u003e\u003c/path\u003e\n                                \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-6db65c0"} -->
<svg viewBox="0 0 24 24">
                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                </svg>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-8a185b9","type":"inner","className":"gs-step-item gs-step-2","localId":"gsbp-8a185b9","dynamicAttributes":[{"name":"onmouseenter","value":"activateStep(1)"}]} -->
<div class="gs-step-item gs-step-2" onmouseenter="activateStep(1)"><!-- wp:greenshift-blocks/element {"id":"gsbp-9924bf6","type":"inner","className":"gs-icon-wrapper","localId":"gsbp-9924bf6"} -->
<div class="gs-icon-wrapper"><!-- wp:greenshift-blocks/element {"id":"gsbp-1cfeb09","type":"empty","className":"gs-icon-bg","localId":"gsbp-1cfeb09"} -->
<div class="gs-icon-bg"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-62bb65f","tag":"svg","icon":{"icon":{"svg":"\u003csvg class=\u0022gs-icon\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n                                \u003cpath d=\u0022M6 3h12l4 6-10 13L2 9Z\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022M11 3 8 9l4 13 4-13-3-6\u0022\u003e\u003c/path\u003e\n                                \u003cpath d=\u0022M2 9h20\u0022\u003e\u003c/path\u003e\n                            \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"className":"gs-icon","localId":"gsbp-62bb65f"} -->
<svg viewBox="0 0 24 24" class="gs-icon">
                                <path d="M6 3h12l4 6-10 13L2 9Z"/>
                                <path d="M11 3 8 9l4 13 4-13-3-6"/>
                                <path d="M2 9h20"/>
                            </svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-8925184","type":"inner","className":"gs-step-content","localId":"gsbp-8925184"} -->
<div class="gs-step-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-25dd508","type":"inner","className":"gs-step-header","localId":"gsbp-25dd508"} -->
<div class="gs-step-header"><!-- wp:greenshift-blocks/element {"id":"gsbp-7adcc86","textContent":"Step-02","tag":"span","className":"gs-step-number","localId":"gsbp-7adcc86"} -->
<span class="gs-step-number">Step-02</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-ff950d9","type":"empty","className":"gs-step-line-h","localId":"gsbp-ff950d9"} -->
<div class="gs-step-line-h"></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-ff11fb7","textContent":"Add clever content areas","tag":"h3","className":"gs-step-title","localId":"gsbp-ff11fb7"} -->
<h3 class="gs-step-title">Add clever content areas</h3>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-2b9d72a","textContent":"Structure your data with meaningful layouts. Our flexible grid system adapts to your content needs seamlessly.","tag":"p","className":"gs-step-desc","localId":"gsbp-2b9d72a"} -->
<p class="gs-step-desc">Structure your data with meaningful layouts. Our flexible grid system adapts to your content needs seamlessly.</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-728605d","tag":"a","type":"inner","className":"gs-learn-more","localId":"gsbp-728605d","href":"#"} -->
<a class="gs-learn-more" href="#"><!-- wp:greenshift-blocks/element {"id":"gsbp-1d369c0","textContent":"Learn more about content","tag":"span","localId":"gsbp-1d369c0"} -->
<span>Learn more about content</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-b622712","tag":"svg","icon":{"icon":{"svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n                                    \u003cpath d=\u0022M5 12h14M12 5l7 7-7 7\u0022\u003e\u003c/path\u003e\n                                \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-b622712"} -->
<svg viewBox="0 0 24 24">
                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                </svg>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d2ab17f","type":"inner","className":"gs-step-item gs-step-3","localId":"gsbp-d2ab17f","dynamicAttributes":[{"name":"onmouseenter","value":"activateStep(2)"}]} -->
<div class="gs-step-item gs-step-3" onmouseenter="activateStep(2)"><!-- wp:greenshift-blocks/element {"id":"gsbp-da8d8c0","type":"inner","className":"gs-icon-wrapper","localId":"gsbp-da8d8c0"} -->
<div class="gs-icon-wrapper"><!-- wp:greenshift-blocks/element {"id":"gsbp-fa5e81b","type":"empty","className":"gs-icon-bg","localId":"gsbp-fa5e81b"} -->
<div class="gs-icon-bg"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-b091519","tag":"svg","icon":{"icon":{"svg":"\u003csvg class=\u0022gs-icon\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n                                \u003cpolygon points=\u002212 2 2 7 12 12 22 7 12 2\u0022\u003e\u003c/polygon\u003e\n                                \u003cpolyline points=\u00222 17 12 22 22 17\u0022\u003e\u003c/polyline\u003e\n                                \u003cpolyline points=\u00222 12 12 17 22 12\u0022\u003e\u003c/polyline\u003e\n                            \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"className":"gs-icon","localId":"gsbp-b091519"} -->
<svg viewBox="0 0 24 24" class="gs-icon">
                                <polygon points="12 2 2 7 12 12 22 7 12 2"/>
                                <polyline points="2 17 12 22 22 17"/>
                                <polyline points="2 12 12 17 22 12"/>
                            </svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-7abb703","type":"inner","className":"gs-step-content","localId":"gsbp-7abb703"} -->
<div class="gs-step-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-ac0f9a2","type":"inner","className":"gs-step-header","localId":"gsbp-ac0f9a2"} -->
<div class="gs-step-header"><!-- wp:greenshift-blocks/element {"id":"gsbp-b496dae","textContent":"Step-03","tag":"span","className":"gs-step-number","localId":"gsbp-b496dae"} -->
<span class="gs-step-number">Step-03</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d442a56","type":"empty","className":"gs-step-line-h","localId":"gsbp-d442a56"} -->
<div class="gs-step-line-h"></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-543c7dc","textContent":"Easily update your site","tag":"h3","className":"gs-step-title","localId":"gsbp-543c7dc"} -->
<h3 class="gs-step-title">Easily update your site</h3>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-9eebef4","textContent":"Maintenance should not be a chore. Update your content in real-time with our intuitive dashboard tools.","tag":"p","className":"gs-step-desc","localId":"gsbp-9eebef4"} -->
<p class="gs-step-desc">Maintenance should not be a chore. Update your content in real-time with our intuitive dashboard tools.</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-43c32bf","tag":"a","type":"inner","className":"gs-learn-more","localId":"gsbp-43c32bf","href":"#"} -->
<a class="gs-learn-more" href="#"><!-- wp:greenshift-blocks/element {"id":"gsbp-595cf7a","textContent":"Learn more about updates","tag":"span","localId":"gsbp-595cf7a"} -->
<span>Learn more about updates</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-2bfa7f2","tag":"svg","icon":{"icon":{"svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n                                    \u003cpath d=\u0022M5 12h14M12 5l7 7-7 7\u0022\u003e\u003c/path\u003e\n                                \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-2bfa7f2"} -->
<svg viewBox="0 0 24 24">
                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                </svg>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-10b569b","metadata":{"name":"Blobs"},"type":"inner","localId":"gsbp-10b569b","styleAttributes":{"position":["absolute"],"zIndex":["0"],"top":["0px"],"left":["0px"],"right":["0px"],"bottom":["0px"],"overflow":["clip"]}} -->
<div class="gsbp-10b569b"><!-- wp:greenshift-blocks/element {"id":"gsbp-71e6e65","type":"empty","className":"gs-blob gs-blob-1","localId":"gsbp-71e6e65"} -->
<div class="gs-blob gs-blob-1"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-5091312","type":"empty","className":"gs-blob gs-blob-2","localId":"gsbp-5091312"} -->
<div class="gs-blob gs-blob-2"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-89d73dd","type":"empty","className":"gs-blob gs-blob-3","localId":"gsbp-89d73dd"} -->
<div class="gs-blob gs-blob-3"></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-1d92cb0","dynamicGClasses":[{"value":"gs-container","type":"local","label":"gs-container","localed":false,"css":".gs-container{padding:60px 24px;margin:0 auto;}","attributes":{"styleAttributes":{"padding":["60px 24px"],"margin":["0 auto"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-content-sticky","type":"local","label":"gs-content-sticky","localed":false,"css":".gs-content-sticky{position: relative;}@media (min-width: 1024px){.gs-content-sticky{position: sticky;\n                top: 60px;}}","attributes":{"styleAttributes":{"position":["relative"],"customCSS_Extra":"@media (min-width: 1024px){.gs-content-sticky{position: sticky;\n                top: 60px;}}"}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-badge","type":"local","label":"gs-badge","localed":false,"css":".gs-badge{display: inline-block;\n            padding: 6px 12px;\n            background-color: #eff6ff; \n            color: #2563eb; \n            font-size: 12px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            border-radius: 9999px;\n            margin-bottom: 24px;}","attributes":{"styleAttributes":{"display":["inline-block"],"padding":["6px 12px"],"backgroundColor":["#eff6ff"],"color":["#2563eb"],"fontSize":["12px"],"fontWeight":["600"],"textTransform":["uppercase"],"letterSpacing":["0.05em"],"borderRadius":["9999px"],"marginBottom":["24px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-title","type":"local","label":"gs-title","localed":false,"css":".gs-title{font-size:clamp(2.8rem, 4.5vw, 3.2rem);line-height:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dgrand, clamp(2.75rem, 4.7vw, 3.5rem));font-weight:800;color:#111827;margin-bottom:24px;margin-top:0px;}","attributes":{"styleAttributes":{"fontSize":["clamp(2.8rem, 4.5vw, 3.2rem)"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dgrand, clamp(2.75rem, 4.7vw, 3.5rem))"],"fontWeight":["800"],"color":["#111827"],"marginBottom":["24px"],"marginTop":["0px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-title-gradient","type":"local","label":"gs-title-gradient","localed":false,"css":".gs-title-gradient{background: linear-gradient(to right, #2563eb, #4f46e5); \n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            color: transparent;}","attributes":{"styleAttributes":{"background":["linear-gradient(to right, #2563eb, #4f46e5)"],"backgroundClip":["text"],"color":["transparent"],"customCSS_Extra":"{CURRENT}{-webkit-background-clip:text;-webkit-text-fill-color:transparent}"}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-description","type":"local","label":"gs-description","localed":false,"css":".gs-description{font-size: 18px;\n            line-height: 1.6;\n            color: #4b5563; \n            margin-bottom: 32px;\n            max-width: 500px;}","attributes":{"styleAttributes":{"fontSize":["18px"],"lineHeight":["1.6"],"color":["#4b5563"],"marginBottom":["32px"],"maxWidth":["500px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-btn-doc","type":"local","label":"gs-btn-doc","localed":false,"css":".gs-btn-doc{display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 12px 24px;\n            font-size: 16px;\n            font-weight: 600;\n            color: #374151; \n            background-color: #ffffff;\n            border: 1px solid #e5e7eb; \n            border-radius: 8px;\n            text-decoration: none;\n            transition: all 0.2s ease;}.gs-btn-doc:hover{background-color: #f9fafb;\n            color: #111827;\n            border-color: #d1d5db;}","attributes":{"styleAttributes":{"display":["inline-flex"],"alignItems":["center"],"justifyContent":["center"],"padding":["12px 24px"],"fontSize":["16px"],"fontWeight":["600"],"color":["#374151"],"backgroundColor":["#ffffff"],"border":["1px solid #e5e7eb"],"borderRadius":["8px"],"textDecoration":["none"],"transition":["all 0.2s ease"],"backgroundColor_hover":["#f9fafb"],"color_hover":["#111827"],"borderColor_hover":["#d1d5db"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-steps-list","type":"local","label":"gs-steps-list","localed":false,"css":".gs-steps-list{position: relative;\n            display: flex;\n            flex-direction: column;\n            gap: 24px;}","attributes":{"styleAttributes":{"position":["relative"],"display":["flex"],"flexDirection":["column"],"gap":["24px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-steps-line","type":"local","label":"gs-steps-line","localed":false,"css":".gs-steps-line{position:absolute;left:75px;top:40px;bottom:40px;width:2px;background:linear-gradient(to bottom, #dbeafe 0%, #e0e7ff 50%, transparent 100%);z-index:0;}@media (max-width: 575.98px){.gs-steps-line{left:53px;}}","attributes":{"styleAttributes":{"position":["absolute"],"left":["75px",null,null,"53px"],"top":["40px"],"bottom":["40px"],"width":["2px"],"background":["linear-gradient(to bottom, #dbeafe 0%, #e0e7ff 50%, transparent 100%)"],"zIndex":["0"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-item","type":"local","label":"gs-step-item","localed":false,"css":".gs-step-item{position:relative;display:flex;gap:24px;z-index:1;padding:24px;border-radius:20px;transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;border:1px solid transparent;column-gap:32px;row-gap:32px;padding-top:32px;padding-bottom:58px;padding-left:32px;padding-right:32px;}@media (max-width: 575.98px){.gs-step-item{padding-top:24px;padding-bottom:58px;padding-left:24px;padding-right:24px;}}","attributes":{"styleAttributes":{"position":["relative"],"display":["flex"],"gap":["24px"],"zIndex":["1"],"padding":["24px"],"borderRadius":["20px"],"transition":["all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"],"backgroundColor":["transparent"],"border":["1px solid transparent"],"columnGap":["32px"],"rowGap":["32px"],"paddingTop":["32px",null,null,"24px"],"paddingBottom":["58px",null,null,"58px"],"paddingLeft":["32px",null,null,"24px"],"paddingRight":["32px",null,null,"24px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[{"value":".active","attributes":{"styleAttributes":{"backgroundColor":["#ffffff"],"borderColor":["#f3f4f6"],"boxShadow":["0 25px 50px -12px rgba(0, 0, 0, 0.08)"],"transform":["translateY(-4px)"]}},"css":".gs-step-item.active{background-color: #ffffff;\n            border-color: #f3f4f6;\n            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);\n            transform: translateY(-4px);}"},{"value":".active .gs-icon-wrapper","attributes":{"styleAttributes":{"borderColor":["transparent"],"transform":["scale(1.1)"],"boxShadow":["0 10px 15px -3px rgba(37, 99, 235, 0.2)"]}},"css":".gs-step-item.active .gs-icon-wrapper{border-color: transparent;\n            transform: scale(1.1);\n            box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);}"},{"value":".active .gs-step-number","attributes":{"styleAttributes":{"color":["#2563eb"]}},"css":".gs-step-item.active .gs-step-number{color: #2563eb;}"},{"value":".active .gs-step-line-h","attributes":{"styleAttributes":{"backgroundColor":["#dbeafe"],"maxWidth":["60px"]}},"css":".gs-step-item.active .gs-step-line-h{background-color: #dbeafe;\n            max-width: 60px;}"},{"value":".active .gs-step-title","attributes":{"styleAttributes":{"color":["#111827"]}},"css":".gs-step-item.active .gs-step-title{color: #111827;}"},{"value":".active .gs-learn-more","attributes":{"styleAttributes":{"opacity":["1"],"maxHeight":["40px"],"marginTop":["16px"]}},"css":".gs-step-item.active .gs-learn-more{opacity: 1;\n            max-height: 40px;\n            margin-top: 16px;}"}]},{"value":"gs-icon-wrapper","type":"local","label":"gs-icon-wrapper","localed":false,"css":".gs-icon-wrapper{position: relative;\n            flex-shrink: 0;\n            width: 56px;\n            height: 56px;\n            background-color: #ffffff;\n            border: 1px solid #f3f4f6;\n            border-radius: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            z-index: 2;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);}@media (min-width: 768px){.gs-icon-wrapper{width: 80px;\n                height: 80px;\n                border-radius: 20px;}}","attributes":{"styleAttributes":{"position":["relative"],"flexShrink":["0"],"width":["56px"],"height":["56px"],"backgroundColor":["#ffffff"],"border":["1px solid #f3f4f6"],"borderRadius":["16px"],"display":["flex"],"alignItems":["center"],"justifyContent":["center"],"transition":["all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"],"zIndex":["2"],"boxShadow":["0 4px 6px -1px rgba(0, 0, 0, 0.05)"],"customCSS_Extra":"@media (min-width: 768px){.gs-icon-wrapper{width: 80px;\n                height: 80px;\n                border-radius: 20px;}}"}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-icon","type":"local","label":"gs-icon","localed":false,"css":".gs-icon{width: 24px;\n            height: 24px;\n            transition: all 0.3s ease;\n            color: #9ca3af;}@media (min-width: 768px){.gs-icon{width: 32px;\n                height: 32px;}}","attributes":{"styleAttributes":{"width":["24px"],"height":["24px"],"transition":["all 0.3s ease"],"color":["#9ca3af"],"customCSS_Extra":"@media (min-width: 768px){.gs-icon{width: 32px;\n                height: 32px;}}"}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-1","type":"local","label":"gs-step-1","localed":false,"css":"","attributes":{"styleAttributes":[]},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[{"value":".active .gs-icon","attributes":{"styleAttributes":{"color":["#2563eb"]}},"css":".gs-step-1.active .gs-icon{color: #2563eb;}"},{"value":".active .gs-icon-bg","attributes":{"styleAttributes":{"backgroundColor":["#eff6ff"]}},"css":".gs-step-1.active .gs-icon-bg{background-color: #eff6ff;}"}]},{"value":"gs-step-2","type":"local","label":"gs-step-2","localed":false,"css":"","attributes":{"styleAttributes":[]},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[{"value":".active .gs-icon","attributes":{"styleAttributes":{"color":["#4f46e5"]}},"css":".gs-step-2.active .gs-icon{color: #4f46e5;}"},{"value":".active .gs-icon-bg","attributes":{"styleAttributes":{"backgroundColor":["#eef2ff"]}},"css":".gs-step-2.active .gs-icon-bg{background-color: #eef2ff;}"}]},{"value":"gs-step-3","type":"local","label":"gs-step-3","localed":false,"css":"","attributes":{"styleAttributes":[]},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[{"value":".active .gs-icon","attributes":{"styleAttributes":{"color":["#0ea5e9"]}},"css":".gs-step-3.active .gs-icon{color: #0ea5e9;}"},{"value":".active .gs-icon-bg","attributes":{"styleAttributes":{"backgroundColor":["#f0f9ff"]}},"css":".gs-step-3.active .gs-icon-bg{background-color: #f0f9ff;}"}]},{"value":"gs-icon-bg","type":"local","label":"gs-icon-bg","localed":false,"css":".gs-icon-bg{position: absolute;\n            inset: 0;\n            border-radius: inherit;\n            background-color: #ffffff;\n            transition: background-color 0.3s ease;\n            z-index: -1;}","attributes":{"styleAttributes":{"position":["absolute"],"inset":["0"],"borderRadius":["inherit"],"backgroundColor":["#ffffff"],"transition":["background-color 0.3s ease"],"zIndex":["-1"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-content","type":"local","label":"gs-step-content","localed":false,"css":".gs-step-content{flex: 1;\n            padding-top: 4px;}","attributes":{"styleAttributes":{"paddingTop":["4px"],"customCSS_Extra":"{CURRENT}{flex:1}"}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-header","type":"local","label":"gs-step-header","localed":false,"css":".gs-step-header{display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 8px;}","attributes":{"styleAttributes":{"display":["flex"],"alignItems":["center"],"gap":["12px"],"marginBottom":["8px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-number","type":"local","label":"gs-step-number","localed":false,"css":".gs-step-number{font-size: 13px;\n            font-weight: 700;\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n            color: #9ca3af;\n            transition: color 0.3s ease;}","attributes":{"styleAttributes":{"fontSize":["13px"],"fontWeight":["700"],"letterSpacing":["0.1em"],"textTransform":["uppercase"],"color":["#9ca3af"],"transition":["color 0.3s ease"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-line-h","type":"local","label":"gs-step-line-h","localed":false,"css":".gs-step-line-h{flex: 1;\n            height: 1px;\n            background-color: transparent;\n            max-width: 0;\n            transition: all 0.5s ease;}","attributes":{"styleAttributes":{"height":["1px"],"backgroundColor":["transparent"],"maxWidth":["0"],"transition":["all 0.5s ease"],"customCSS_Extra":"{CURRENT}{flex:1}"}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-title","type":"local","label":"gs-step-title","localed":false,"css":".gs-step-title{margin-bottom:8px;transition:color 0.3s ease;font-size:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dl, 1.55rem);line-height:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dl, 2.37rem);margin-top:16px;}","attributes":{"styleAttributes":{"marginBottom":["8px"],"transition":["color 0.3s ease"],"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dl, 1.55rem)"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dl, 2.37rem)"],"marginTop":["16px"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-step-desc","type":"local","label":"gs-step-desc","localed":false,"css":".gs-step-desc{font-size: 16px;\n            line-height: 1.6;\n            color: #6b7280; \n            margin-bottom: 0;}","attributes":{"styleAttributes":{"fontSize":["16px"],"lineHeight":["1.6"],"color":["#6b7280"],"marginBottom":["0"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-learn-more","type":"local","label":"gs-learn-more","localed":false,"css":".gs-learn-more{margin-top:0;font-size:14px;font-weight:600;color:#2563eb;display:inline-flex;align-items:center;opacity:0;max-height:0;overflow:hidden;transition:all 0.4s ease;text-decoration:none;position:absolute;}","attributes":{"styleAttributes":{"marginTop":["0"],"fontSize":["14px"],"fontWeight":["600"],"color":["#2563eb"],"display":["inline-flex"],"alignItems":["center"],"opacity":["0"],"maxHeight":["0"],"overflow":["hidden"],"transition":["all 0.4s ease"],"textDecoration":["none"],"position":["absolute"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[{"value":" svg","attributes":{"styleAttributes":{"width":["16px"],"height":["16px"],"marginLeft":["6px"],"transition":["transform 0.2s ease"]}},"css":".gs-learn-more svg{width: 16px;\n            height: 16px;\n            margin-left: 6px;\n            transition: transform 0.2s ease;}"},{"value":":hover svg","attributes":{"styleAttributes":{"transform":["translateX(4px)"]}},"css":".gs-learn-more:hover svg{transform: translateX(4px);}"}]},{"value":"gs-blob","type":"local","label":"gs-blob","localed":false,"css":".gs-blob{position: absolute;\n            border-radius: 50%;\n            filter: blur(80px);\n            opacity: 0.5;\n            z-index: 0;\n            pointer-events: none;}","attributes":{"styleAttributes":{"position":["absolute"],"borderRadius":["50%"],"filter":["blur(80px)"],"opacity":["0.5"],"zIndex":["0"],"pointerEvents":["none"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-blob-1","type":"local","label":"gs-blob-1","localed":false,"css":".gs-blob-1{top: -10%;\n            left: -10%;\n            width: 40vw;\n            height: 40vw;\n            background-color: #dbeafe;}","attributes":{"styleAttributes":{"top":["-10%"],"left":["-10%"],"width":["40vw"],"height":["40vw"],"backgroundColor":["#dbeafe"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-blob-2","type":"local","label":"gs-blob-2","localed":false,"css":".gs-blob-2{bottom: -10%;\n            right: -10%;\n            width: 35vw;\n            height: 35vw;\n            background-color: #e0e7ff;}","attributes":{"styleAttributes":{"bottom":["-10%"],"right":["-10%"],"width":["35vw"],"height":["35vw"],"backgroundColor":["#e0e7ff"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs-blob-3","type":"local","label":"gs-blob-3","localed":false,"css":".gs-blob-3{top: 40%;\n            right: 20%;\n            width: 20vw;\n            height: 20vw;\n            background-color: #e0f2fe; \n            opacity: 0.3;}","attributes":{"styleAttributes":{"top":["40%"],"right":["20%"],"width":["20vw"],"height":["20vw"],"backgroundColor":["#e0f2fe"],"opacity":["0.3"]}},"originalID":"gsbp-1d92cb0","originalBlock":"greenshift-blocks/element","selectors":[]}],"type":"no","className":"gs-container gs-content-sticky gs-badge gs-title gs-title-gradient gs-description gs-btn-doc gs-steps-list gs-steps-line gs-step-item gs-icon-wrapper gs-icon gs-step-1 gs-step-2 gs-step-3 gs-icon-bg gs-step-content gs-step-header gs-step-number gs-step-line-h gs-step-title gs-step-desc gs-learn-more gs-blob gs-blob-1 gs-blob-2 gs-blob-3","localId":"gsbp-1d92cb0","isVariation":"stylemanager","customCss":"","customJs":"function activateStep(index) {\n            const steps = document.querySelectorAll('.gs-step-item');\n            steps.forEach((step, i) =\u003e {\n                if (i === index) {\n                    step.classList.add('active');\n                } else {\n                    step.classList.remove('active');\n                }\n            });\n        }","customJsEnabled":true} -->
<div class="gs-container gs-content-sticky gs-badge gs-title gs-title-gradient gs-description gs-btn-doc gs-steps-list gs-steps-line gs-step-item gs-icon-wrapper gs-icon gs-step-1 gs-step-2 gs-step-3 gs-icon-bg gs-step-content gs-step-header gs-step-number gs-step-line-h gs-step-title gs-step-desc gs-learn-more gs-blob gs-blob-1 gs-blob-2 gs-blob-3"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

How it works Steps Section

Say hello to Greenshift

Get your project
going in 3 steps

Clarity gives you the blocks & components you need to create a truly professional website for your SaaS.
Stop wrestling with code and start building your legacy.

View Documentation
Step-01

Start with a great design

Clarity gives you the blocks & components you need to create a website. We prioritize user experience and aesthetic consistency.

Learn more about design
Step-02

Add clever content areas

Structure your data with meaningful layouts. Our flexible grid system adapts to your content needs seamlessly.

Learn more about content
Step-03

Easily update your site

Maintenance should not be a chore. Update your content in real-time with our intuitive dashboard tools.

Learn more about updates