Transaction: 3D3ie6b...x6mC

{ "data": { "adnansiddiqui.near": { "widget": { "template-5.SecondaryCTA": { "": "const style = props.style || {\n accent: \"#b9ff81\",\n};\nconst props = props.props || {\n headerText: \"Join enginzyme and impact tomorrow today\",\n subHeaderText:\n \"Could your company benefit from a cleaner, less energy-intensive manufacturing process? Let's talk about it.\",\n primaryButtonText: \"Join Us\",\n};\n\nconst bp = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n};\n\nconst SecondaryCTAWrapper = 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: ${({ style }) => `${style?.accent || \"#b9ff81\"}`};\n width: 100%;\n height: 100dvh;\n max-height: 100%;\n `;\nconst SecondaryCTAContent = styled.div`\n position: relative;\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n padding: 1rem;\n gap: 5rem;\n height: 100%;\n\n @media (min-width: ${bp.md}) {\n grid-template-columns: repeat(2, 1fr);\n padding-left: 3rem;\n padding-right: 3rem;\n }\n `;\nconst SecondaryCTAData = styled.div`\n grid-column: span 1;\n z-index: 20;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media (min-width: ${bp.md}) {\n grid-column-start: 2;\n }\n `;\nconst SecondaryCTAHeader = styled.h2`\n font-size: 2.5rem;\n line-height: 1;\n max-width: 36rem;\n\n @media (min-width: ${bp.sm}) {\n font-size: 3rem;\n }\n\n @media (min-width: ${bp.lg}) {\n font-size: 4.5rem;\n }\n `;\nconst SecondaryCTASubHeader = styled.p``;\nconst SecondaryCTADesign = styled.div`\n position: absolute;\n opacity: 0.5;\n display: grid;\n grid-template-columns: repeat(10, minmax(10%, 1fr));\n grid-template-rows: repeat(10, minmax(10%, 1fr));\n width: 100%;\n height: 100%;\n place-items: center;\n\n @media (min-width: ${bp.md}) {\n position: relative;\n opacity: 1;\n }\n `;\n\nreturn (\n <SecondaryCTAWrapper id={id} style={style} props={props}>\n <SecondaryCTAContent>\n <SecondaryCTADesign>\n {[...new Array(100)].map((_, index) => (\n <div style={{ fontSize: \"0.75rem\" }}>+</div>\n ))}\n </SecondaryCTADesign>\n <SecondaryCTAData>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"2.5rem\",\n }}\n >\n <SecondaryCTAHeader>{props?.headerText}</SecondaryCTAHeader>\n <SecondaryCTASubHeader className=\"text-sm sm:text-base lg:text-lg max-w-lg\">\n {props?.subHeaderText}\n </SecondaryCTASubHeader>\n <button\n style={{\n backgroundColor: \"#28282c\",\n color: \"white\",\n borderRadius: \"9999px\",\n padding: \"0.75rem 1.5rem\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"1rem\",\n fontWeight: \"600\",\n width: \"fit-content\",\n height: \"fit-content\",\n border: \"none\",\n }}\n >\n {props?.primaryButtonText}\n <div\n style={{\n backgroundColor: style?.accent || \"#b9ff81\",\n height: \"2rem\",\n width: \"2rem\",\n borderRadius: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#28282c\",\n }}\n >\n <svg\n style={{\n width: \"0.7rem\",\n transform: \"rotate(-0.25turn)\",\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 384 512\"\n >\n <path d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\" />\n </svg>\n </div>\n </button>\n </div>\n </SecondaryCTAData>\n </SecondaryCTAContent>\n </SecondaryCTAWrapper>\n);\n" } } } } }