CTA section with socialproof
Category: CTA
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div style="display: block; position: static; width: 1496.18px; height: 491.862px; padding: 0px 59.468px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: grid; position: static; width: 1377.25px; height: 491.862px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; align-items: center; grid-template-columns: 688.625px 688.625px; grid-template-rows: 491.862px; opacity: 1; overflow: visible;"><div style="cursor: crosshair; display: flex; position: static; width: 531.35px; height: 491.862px; padding: 65.7105px 0px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 1 1 0%; flex-flow: column; justify-content: center; align-items: flex-start; gap: 32.8552px; opacity: 1; overflow: visible;"><div style="cursor: crosshair; display: flex; position: static; width: 531.35px; height: 360.462px; max-width: 657.105px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: left; flex: 1 1 0%; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 24.6414px; opacity: 1; overflow: visible;"><div data-w-id="274f0050-0562-d729-c2b2-9db3cd1dfac5" style="opacity: 1; transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; position: static; width: 492.825px; height: 118.125px; max-width: 492.828px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: left; flex: 0 1 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><h2 data-w-id="274f0050-0562-d729-c2b2-9db3cd1dfac6" style="opacity: 1; transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; cursor: crosshair; display: block; position: static; width: 492.825px; height: 118.125px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 49.2828px; font-weight: 500; line-height: 57.1681px; text-align: left; letter-spacing: -2.95697px; flex: 0 1 auto; flex-flow: row; overflow: visible;">Ready to Join the <span style="cursor: crosshair; display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Gambetta, Arial, sans-serif; font-size: 52.5684px; font-weight: 500; line-height: 60.9793px; text-align: left; letter-spacing: -2.10274px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Financial Revolution?</span></h2></div><div data-w-id="274f0050-0562-d729-c2b2-9db3cd1dfaca" style="opacity: 1; transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; position: static; width: 498.987px; height: 85.875px; max-width: 498.989px; border: 0px none rgba(255, 255, 255, 0.8); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgba(255, 255, 255, 0.8); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: left; flex: 0 1 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: block; position: static; width: 498.987px; height: 85.875px; border: 0px none rgba(255, 255, 255, 0.8); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgba(255, 255, 255, 0.8); font-family: Inter, sans-serif; font-size: 18.4811px; font-weight: 400; line-height: 28.6457px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">While others play by old rules, Parker members are rewriting them. We're building a movement of founders who refuse artificial constraints.</div></div><div style="cursor: crosshair; display: block; position: static; width: 531.35px; height: 29.1625px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 20.5345px; font-weight: 400; line-height: 29.159px; text-align: left; letter-spacing: -0.41069px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">The old financial system wasn't built for you. <span style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 20.5345px; font-weight: 600; line-height: 29.159px; text-align: left; letter-spacing: -0.41069px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Parker was</span>.<br style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 20.5345px; font-weight: 400; line-height: 29.159px; text-align: left; letter-spacing: -0.41069px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></div><a data-w-id="0f032db8-a352-99e1-89aa-36c19ff7a25f" href="https://app.getparker.com/signup" target="_blank" style="cursor: crosshair; display: flex; position: static; width: 170.012px; height: 53.3875px; min-height: 53.3898px; max-width: 100%; padding: 8.21381px 24.6414px; border: 0px none rgb(27, 29, 32); border-radius: 1626.33px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 16.4276px; opacity: 1; overflow: visible;"><div style="display: block; position: static; width: 87.8875px; height: 24.6375px; border: 0px none rgb(27, 29, 32); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><strong style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(27, 29, 32); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Apply Now</strong></div><div style="transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; position: static; width: 16.425px; height: 16.425px; border: 0px none rgb(27, 29, 32); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg aria-hidden="true" fill="currentColor" role="img" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" style="display: inline; position: static; width: 16.4125px; height: 17.2375px; border: 0px none rgb(27, 29, 32); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><title style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(27, 29, 32); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Arrow Right</title><polygon points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707 11.515 18.485 10.101 17.071 16.172 11 0 11 0 9" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(27, 29, 32); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(27, 29, 32); font-family: Inter, sans-serif; font-size: 16.4276px; font-weight: 600; line-height: 24.6414px; text-align: center; letter-spacing: 0.131421px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></polygon></svg></div></a></div></div><div data-w-id="274f0050-0562-d729-c2b2-9db3cd1dfad3" style="cursor: crosshair; display: block; position: relative; width: 688.625px; height: 491.862px; padding: 488.913px 0px 0px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"><div data-w-id="274f0050-0562-d729-c2b2-9db3cd1dfad4" style="transform: translate3d(0%, -2.26702%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-17deg) skew(0deg, 0deg); transform-style: preserve-3d; will-change: transform; display: block; position: absolute; inset: 103.287px 230.688px -180.913px 98.4875px; width: 359.45px; height: 569.487px; padding: 569.487px 0px 0px; border: 0px none rgb(255, 255, 255); border-radius: 21.3559px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;"><img sizes="239.8125px" srcset="https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f952efeb66c57a5c728ed_Credit%20Card%20-%20Mastercard%202-p-500.webp 500w, https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f952efeb66c57a5c728ed_Credit%20Card%20-%20Mastercard%202-p-800.webp 800w, https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f952efeb66c57a5c728ed_Credit%20Card%20-%20Mastercard%202.webp 1000w" alt="" src="https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f952efeb66c57a5c728ed_Credit%20Card%20-%20Mastercard%202.webp" loading="lazy" style="display: block; position: absolute; width: 359.45px; height: 569.487px; max-width: 100%; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;"></div><div data-w-id="274f0050-0562-d729-c2b2-9db3cd1dfad6" style="transform: translate3d(5px, -2.00494%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(5deg) skew(0deg, 0deg); transform-style: preserve-3d; will-change: transform; display: block; position: absolute; inset: 49.175px 27.5375px -180.512px 266.513px; width: 394.575px; height: 623.2px; padding: 623.2px 0px 0px; border: 0px none rgb(255, 255, 255); border-radius: 24.6414px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; box-shadow: rgba(0, 0, 0, 0.1) -31px 0px 36px 0px; opacity: 1; overflow: clip; cursor: crosshair;"><img sizes="239.8125px" srcset="https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f9511887912fd59256695_Credit%20Card%20-%20MasterCard-p-500.webp 500w, https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f9511887912fd59256695_Credit%20Card%20-%20MasterCard-p-800.webp 800w, https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f9511887912fd59256695_Credit%20Card%20-%20MasterCard.webp 1000w" alt="" src="https://cdn.prod.website-files.com/681cdb4ca097489d83fc53e3/682f9511887912fd59256695_Credit%20Card%20-%20MasterCard.webp" loading="lazy" style="display: block; position: absolute; width: 394.575px; height: 623.2px; max-width: 100%; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 14.3742px; font-weight: 400; line-height: 20.4113px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;"></div></div></div></div>
create a canvas to display a cta component. we want the cta component to be centered and the space around it to be flexible empty.
reproduce this cta component
Created by: LandingHero
