{"version":3,"file":"components-ui-builder-product-features-2503fb8217c1d5ffa077.js","mappings":"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","sources":["webpack://www-differentdog-com/./src/components/ui-builder/product-features/index.tsx"],"sourcesContent":["import CdnImage from 'components/util/CdnImage'\n// import CloudinaryImage from 'components/util/CloudinaryImage'\nimport React from 'react'\nimport LinkButton, { LinkButtonProp } from '../common/button'\nimport './index.css'\nimport bulletPointFallbackImage from '../../../images/BulletPoint.svg'\n\ninterface Props {\n  cloudinaryMainImage: any\n  builderMainImage: any\n  mainImageAltText: string\n  cloudinarySecondaryImage: any\n  builderSecondaryImage: any\n  secondaryImageAltText: string\n  cloudinaryThirdImage: any\n  builderThirdImage: any\n  thirdImageAltText: string\n  squareBackgroundColor: string\n  headingText: string\n  headingTextColor: string\n  subHeadingText: string\n  subHeadingTextColor: string\n  paragraph: string\n  paragraphColor: string\n  imagesPosition: string\n  buttonEnabled: boolean\n  buttonProp: LinkButtonProp\n  bulletPoint: string\n  bulletAltText: string\n  points: [{ text: string }]\n}\n\nconst ProductFeatures = ({\n  cloudinaryMainImage,\n  builderMainImage,\n  mainImageAltText = '',\n  cloudinarySecondaryImage,\n  builderSecondaryImage,\n  secondaryImageAltText = '',\n  cloudinaryThirdImage,\n  builderThirdImage,\n  thirdImageAltText = '',\n  squareBackgroundColor,\n  headingText,\n  headingTextColor,\n  subHeadingText,\n  subHeadingTextColor,\n  paragraph,\n  paragraphColor,\n  imagesPosition,\n  buttonEnabled,\n  buttonProp,\n  bulletPoint,\n  bulletAltText = '',\n  points\n}: Props) => {\n  return (\n    <div id={subHeadingText?.toLowerCase().replace(/\\s+/g, '-')} className=\"bg-white\">\n      <div className=\"mx-auto max-w-2xl py-24 px-4 sm:py-32 sm:px-6 lg:max-w-7xl lg:px-8\">\n        <div className=\"grid grid-cols-1 items-center gap-y-16 gap-x-8 lg:grid-cols-2\">\n          <div className={imagesPosition === 'left' ? 'order-last' : ''}>\n            <div className=\"border-b border-gray-200 pb-10\">\n              <h2 className=\"font-serif font-medium text-gray-500\" style={{ color: headingTextColor }}>\n                {headingText}\n              </h2>\n              <p\n                className=\"mt-2 font-serif text-3xl font-medium tracking-tight text-gray-900 sm:text-4xl\"\n                style={{ color: subHeadingTextColor }}\n              >\n                {subHeadingText}\n              </p>\n            </div>\n\n            <dl className=\"mt-10 space-y-10\" style={{ color: paragraphColor }}>\n              <div dangerouslySetInnerHTML={{ __html: paragraph }}></div>\n              {points?.length > 0 && (\n                <div>\n                  {points?.map(point => (\n                    <div className=\"flex items-center\">\n                      <img src={bulletPoint || bulletPointFallbackImage} className=\"mr-2 h-8 w-8\" alt={bulletAltText} />\n                      <p className=\"font-normal text-black\">{point.text}</p>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </dl>\n          </div>\n\n          <div>\n            <div className=\"aspect-w-1 aspect-h-1 relative\">\n              <div\n                style={{ backgroundColor: squareBackgroundColor }}\n                className=\"absolute -left-[3%] h-full w-full -rotate-3 transform\"\n              >\n                <CdnImage\n                  className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                  url={builderMainImage}\n                  alt={mainImageAltText}\n                  steps={[625]}\n                />\n\n                {/* {builderMainImage ? (\n                  <CdnImage\n                    className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                    url={builderMainImage}\n                    alt={mainImageAltText}\n                    steps={[625]}\n                  />\n                ) : (\n                  <CloudinaryImage\n                    className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                    publicId={cloudinaryMainImage?.public_id}\n                    alt={mainImageAltText}\n                    steps={[625]}\n                  />\n                )} */}\n              </div>\n            </div>\n            {(builderSecondaryImage || builderThirdImage) && (\n              <div className=\"mt-4 grid grid-cols-2 gap-4 sm:mt-6 sm:gap-6 lg:mt-8 lg:gap-8\">\n                {builderSecondaryImage && (\n                  <div className=\"aspect-w-1 aspect-h-1 relative\">\n                    <div\n                      style={{ backgroundColor: squareBackgroundColor }}\n                      className=\"absolute -left-[3%] h-full w-full -rotate-3 transform\"\n                    >\n                      <CdnImage\n                        className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                        url={builderSecondaryImage}\n                        alt={secondaryImageAltText}\n                        steps={[300]}\n                      />\n\n                      {/* {builderSecondaryImage ? (\n                        <CdnImage\n                          className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                          url={builderSecondaryImage}\n                          alt={secondaryImageAltText}\n                          steps={[300]}\n                        />\n                      ) : (\n                        <CloudinaryImage\n                          className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                          publicId={cloudinarySecondaryImage?.public_id}\n                          alt={secondaryImageAltText}\n                          steps={[300]}\n                        />\n                      )} */}\n                    </div>\n                  </div>\n                )}\n                {/* {cloudinaryThirdImage?.public_id && ( */}\n                <div className=\"aspect-w-1 aspect-h-1 relative\">\n                  <div\n                    style={{ backgroundColor: squareBackgroundColor }}\n                    className=\"absolute -left-[3%] h-full w-full -rotate-3 transform\"\n                  >\n                    {builderThirdImage && (\n                      <CdnImage\n                        className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                        url={builderThirdImage}\n                        alt={thirdImageAltText}\n                        steps={[300]}\n                      />\n                      // ) : (\n                      //   <CloudinaryImage\n                      //     className=\"relative h-full w-full rotate-3 transform object-cover object-center\"\n                      //     publicId={cloudinaryThirdImage?.public_id}\n                      //     alt={thirdImageAltText}\n                      //     steps={[300]}\n                      //   />\n                    )}\n                  </div>\n                </div>\n                {/* // )} */}\n              </div>\n            )}\n          </div>\n        </div>\n        {buttonEnabled && (\n          <div className=\"mx-auto mt-10\">\n            <LinkButton\n              buttonColor={buttonProp?.buttonColor}\n              buttonText={buttonProp?.buttonText}\n              loggedInButtonText={buttonProp?.loggedInButtonText}\n              buttonTextColor={buttonProp?.buttonTextColor}\n              buttonUrl={buttonProp?.buttonUrl}\n              isLink={buttonProp.isLink}\n              classList={\n                'mx-auto w-full md:w-fit flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-full text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:text-lg'\n              }\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductFeatures\n"],"names":["_ref","cloudinaryMainImage","builderMainImage","_ref$mainImageAltText","mainImageAltText","builderSecondaryImage","cloudinarySecondaryImage","_ref$secondaryImageAl","secondaryImageAltText","builderThirdImage","cloudinaryThirdImage","_ref$thirdImageAltTex","thirdImageAltText","squareBackgroundColor","headingText","headingTextColor","subHeadingText","subHeadingTextColor","paragraph","paragraphColor","imagesPosition","buttonEnabled","buttonProp","bulletPoint","_ref$bulletAltText","bulletAltText","points","React","id","toLowerCase","replace","className","style","color","dangerouslySetInnerHTML","__html","length","map","point","src","bulletPointFallbackImage","alt","text","backgroundColor","CdnImage","url","steps","LinkButton","buttonColor","buttonText","loggedInButtonText","buttonTextColor","buttonUrl","isLink","classList"],"sourceRoot":""}