Transaction: FN6aPVi...56fT

{ "data": { "adnansiddiqui.near": { "widget": { "template-5.About": { "": "const style = props.style || {};\nconst props = props.props || {\n headerText:\n \"The global, $5 trillion chemical industry faces a reckoning. Chemical production is expected to quadruple by 2050 to meet ever-increasing demand. But the industry must cut greenhouse gas emissions by more than half to meet sustainability goals.\",\n aboutInfo: [\n {\n titleText: \"Revolutionizing Chemistry\",\n descriptionTextarea:\n \"At EnginZyme, we're transforming the chemical industry by harnessing the power of enzymes. Our technology enables cleaner, more efficient production processes, significantly reducing the sector's carbon footprint.\",\n },\n {\n titleText: \"Sustainable Solutions\",\n descriptionTextarea:\n \"Our enzyme-based catalysts are designed to be both eco-friendly and economically viable. By mimicking nature's methods, we provide an alternative to harsh chemical processes that are sustainable and scalable.\",\n },\n {\n titleText: \"Precision Manufacturing\",\n descriptionTextarea:\n \"Leveraging biotechnology, EnginZyme delivers unprecedented precision in chemical manufacturing. Our tailored enzyme solutions optimize reactions for maximum yield and purity, ensuring high-quality output with minimal waste.\",\n },\n ],\n buttonText: \"Get started\",\n};\n\nconst bp = {\n sm: \"40rem\",\n md: \"48rem\",\n lg: \"64rem\",\n xl: \"80rem\",\n};\n\nconst AboutWrapper = 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 background-color: white;\n\n &:not(.light *) {\n background-color: #080a11;\n }\n`;\n\nconst AboutContent = styled.div`\n display: flex;\n flex-direction: column;\n padding: 6rem 1rem;\n gap: 1.5rem;\n width: 100%;\n\n @media (min-width: ${bp.md}) {\n padding-inline: 3rem;\n }\n`;\n\nconst AboutLeft = styled.div`\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n\n @media (min-width: ${bp.lg}) {\n grid-template-columns: repeat(2, 1fr);\n }\n`;\n\nconst AboutHeader = styled.h2`\n font-size: 1.25rem;\n line-height: 1.5;\n color: black;\n grid-column: span 1;\n\n &:not(.light *) {\n color: white;\n }\n\n @media (min-width: ${bp.md}) {\n font-size: 2.5rem;\n line-height: 1.5;\n }\n`;\n\nconst AboutRight = styled.div`\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n\n @media (min-width: ${bp.lg}) {\n grid-template-columns: repeat(2, 1fr);\n }\n`;\n\nconst AboutRightContainer = styled.div`\n grid-column-start: 2;\n`;\n\nconst MoreInfoWrapper = styled.div`\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 1.5rem;\n padding-block: 3.5rem;\n border-top: 1px solid;\n\n @media (min-width: ${bp.md}) {\n grid-template-columns: repeat(6, 1fr);\n }\n`;\n\nconst MoreInfoHeader = styled.h3`\n grid-column: span 2;\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 500; /* font-medium */\n color: black;\n\n &:not(.light *) {\n color: white;\n }\n\n @media (min-width: ${bp.md}) {\n font-size: 1.5rem;\n line-height: 2rem;\n width: min-content;\n }\n`;\n\nconst MoreInfoDescription = styled.p`\n grid-column: span 4;\n font-size: 0.875rem;\n line-height: 1.25rem /* 20px */;\n color: rgba(0, 0, 0, 0.8);\n\n &:not(.light *) {\n color: rgba(255, 255, 255, 0.8);\n }\n\n @media (min-width: ${bp.md}) {\n font-size: 1.125rem; /* text-lg */\n line-height: 1.75rem /* 28px */;\n }\n`;\n\nconst Button = styled.button`\n border: 2px solid;\n border-radius: 4rem;\n color: black;\n background-color: transparent;\n padding: 0.75rem 1.5rem;\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n font-weight: 600;\n\n &:not(.light *) {\n color: white;\n }\n`;\n\n return (\n <AboutWrapper id={id}>\n <AboutContent>\n <AboutLeft>\n <AboutHeader>{props?.headerText}</AboutHeader>\n </AboutLeft>\n <AboutRight>\n <AboutRightContainer>\n {props?.aboutInfo?.map((item, index) => (\n <MoreInfoWrapper key={index}>\n <MoreInfoHeader>{item?.titleText}</MoreInfoHeader>\n <MoreInfoDescription>\n {item?.descriptionTextarea}\n </MoreInfoDescription>\n </MoreInfoWrapper>\n ))}\n <Button>\n {props?.buttonText}\n <div\n style={{\n color: style?.accent || \"#b9ff81\",\n height: 24,\n width: 24,\n backgroundColor: \"rgb(31 41 55)\",\n borderRadius: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n }}\n >\n <svg\n style={{\n width: \"0.7rem\",\n transform: \"rotate(-0.25turn)\",\n fill: style.accent || \"#b9ff81\",\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 </AboutRightContainer>\n </AboutRight>\n </AboutContent>\n </AboutWrapper>\n );\n\n" } } } } }