Transaction: EZtD5bF...ikmn

{ "data": { "adnansiddiqui.near": { "widget": { "template-4.CTA": { "": "const style = props.style || {\n paddingTop: 0,\n paddingLeft: 0,\n paddingBottom: 0,\n paddingRight: 0,\n marginTop: 0,\n marginLeft: 0,\n marginBottom: 0,\n marginRight: 0,\n accent: \"#412dff\",\n};\nconst props = props.props || {\n headerText: \"Discover How Design Can Help Your Business\",\n primaryButtonText: \"LETS TALK\",\n};\n\n\nconst bp = {\n sm: \"40rem\",\n md: \"48rem\",\n lg: \"64rem\",\n xl: \"80rem\",\n};\n\nconst CTAWrapper = styled.div`\n padding: ${({ style }) =>\n `${style?.paddingTop}px ${style?.paddingRight}px ${style?.paddingBottom}px ${style?.paddingLeft}px`};\n margin: ${({ style }) =>\n `${style?.marginTop}px ${style?.marginRight}px ${style?.marginBottom}px ${style?.marginLeft}px`};\n\n background-color: white;\n min-height: 400px;\n max-height: 100%;\n\n &:not(.light *) {\n background-color: #121212;\n }\n`;\nconst CTAContainer = styled.div`\n position: relative;\n background-color: ${({ accent }) => accent || \"#412dff\"};\n padding: 2.5rem; // p-10\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2rem; // gap-8\n text-align: center;\n width: 100%;\n border-radius: 0.75rem; // rounded-xl\n margin-inline: auto; // mx-auto\n\n @media (min-width: ${bp.sm}) {\n padding: 6rem; // sm:p-24\n gap: 3rem; // sm:gap-12\n }\n`;\nconst CTAHeader = styled.h1`\n font-size: 1.875rem; // text-3xl\n font-weight: 600; // font-semibold\n color: white;\n line-height: 1.5;\n\n @media (min-width: ${bp.sm}) {\n font-size: 3.75rem; // sm:text-6xl\n }\n`;\n\n\n return (\n <CTAWrapper style={style} id={id}>\n <div\n style={{\n maxWidth: \"96rem\",\n margin: \"0 auto\",\n padding: \"5rem 1rem\",\n }}\n >\n <CTAContainer accent={style?.accent}>\n <CTAHeader>{props?.headerText}</CTAHeader>\n <button\n style={{\n zIndex: 20,\n border: \"none\",\n color: style?.accent || \"#412dff\",\n display: \"flex\",\n gap: \"0.5rem\",\n alignItems: \"center\",\n backgroundColor: \"white\",\n padding: \"1rem 2rem\",\n fontWeight: 500,\n borderRadius: \"0.5rem\",\n }}\n >\n {props?.primaryButtonText}\n <svg\n style={{\n fill: style?.accent || \"#412dff\",\n width: \"1rem\",\n height: \"1rem\",\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 448 512\"\n >\n <path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" />\n </svg>\n </button>\n <svg\n style={{\n position: \"absolute\",\n zIndex: 0,\n width: \"100%\",\n height: \"100%\",\n }}\n width=\"1162\"\n height=\"205\"\n viewBox=\"0 0 1162 205\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g opacity=\"0.15\">\n <path\n d=\"M1 70.1793C46.9404 105.123 185.326 158.433 371.346 92.1293C603.872 9.24921 638.519 -10.8085 740.538 6.97852C842.556 24.7656 1056.22 153.816 1159.39 107.267\"\n stroke=\"white\"\n />\n <path\n d=\"M1.80444 110.325C47.7448 145.268 186.131 198.579 372.151 132.275C604.676 49.3947 639.324 29.337 741.342 47.124C843.361 64.9111 1057.02 193.962 1160.2 147.413\"\n stroke=\"white\"\n />\n <path\n d=\"M2.60889 150.47C48.5493 185.414 186.935 238.724 372.955 172.42C605.48 89.5402 640.128 69.4825 742.147 87.2695C844.165 105.057 1057.83 234.107 1161 187.558\"\n stroke=\"white\"\n />\n </g>\n </svg>\n <svg\n style={{\n position: \"absolute\",\n bottom: \"10%\",\n left: \"20%\",\n }}\n width=\"74\"\n height=\"74\"\n viewBox=\"0 0 74 74\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M36.5077 0H36.5084C36.6037 20.12 52.8959 36.4121 73.0159 36.5073V36.5082C52.8957 36.6034 36.6034 52.8957 36.5084 73.0159H36.5077C36.4126 52.8957 20.1202 36.6033 0 36.5082V36.5073C20.1201 36.4122 36.4123 20.12 36.5077 0Z\"\n fill=\"#6FFF93\"\n />\n </svg>\n <svg\n style={{\n position: \"absolute\",\n top: \"10%\",\n right: \"20%\",\n }}\n width=\"39\"\n height=\"39\"\n viewBox=\"0 0 39 39\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.3495 0C19.3999 10.6636 28.0348 19.2984 38.6984 19.3489V19.3493C28.0348 19.3998 19.3999 28.0347 19.3495 38.6984H19.3491C19.2987 28.0347 10.6637 19.3997 0 19.3493V19.3489C10.6636 19.2984 19.2985 10.6636 19.3491 0H19.3495Z\"\n fill=\"white\"\n />\n </svg>\n </CTAContainer>\n </div>\n </CTAWrapper>\n );\n\n", "metadata": { "platform": "jutsu.ai" }, "branch": { "draft": null } } } } } }