{"version":3,"file":"static/chunks/8786.dd492d78bfe0a783.js","mappings":"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","sources":["webpack://_N_E/./src/common/components/Card/CardInfo/Card.info.js","webpack://_N_E/./src/common/components/Card/CardInfo/index.js","webpack://_N_E/./src/common/components/Container/container.style.js","webpack://_N_E/./src/common/components/Container/index.js","webpack://_N_E/./src/common/components/Heading/index.js","webpack://_N_E/./src/common/components/NextImage/index.js","webpack://_N_E/./src/common/components/PrismicRichText/PrismicRichText.js","webpack://_N_E/./src/common/components/base.js","webpack://_N_E/./src/containers/SaasModern/CustomerUseCases/CustomerUseCase.style.js","webpack://_N_E/./src/containers/SaasModern/ListGrouped1/ListGrouped1.style.js","webpack://_N_E/./src/containers/SaasModern/ListGrouped1/index.js","webpack://_N_E/./src/slices/ListGrouped1/index.js"],"sourcesContent":["import styled from 'styled-components';\nimport colors from 'common/theme/saasModern/colors';\n\nexport const Card = styled.div`\n  background-color: #ffffff;\n  border-radius: 8px;\n  padding: 24px;\n  display: ${({ isFlex }) => (isFlex ? 'flex' : 'block')};\n  gap: 16px;\n`;\n \nexport const IconWrapper = styled.div`\n  background-color: #f0f0f0;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 16px;\n`;\n\nexport const Title = styled.h2`\n  font-size: 20px;\n  font-weight: 600;\n  margin: 0 0 8px 0;\n\n  color: #333333;\n`;\n\nexport const Description = styled.div`\n    marginTop: 8px;\n    color: ${colors.gray};\n`\n ","import React from 'react';\nimport {\n    Card,\n    IconWrapper,\n    Description,\n    Title\n} from './Card.info'\nimport { PrismicRichText } from 'common/components/PrismicRichText/PrismicRichText';\nimport NextImage from 'common/components/NextImage';\n\nconst CardInfo = ({\n    icon,\n    title,\n    description,\n    type\n}) => {\n\n  return (\n    <Card isFlex={type === 'Card 2 (Icon Text Same Line)'} data-aos=\"zoom-in\">\n      <IconWrapper>\n            <NextImage\n                field={icon}\n                objectFit=\"cover\"\n                priority={true}\n            />\n      </IconWrapper>\n      <div>\n        <Title>{title}</Title>\n        <Description>\n          <PrismicRichText \n          field={description} \n          />\n        </Description>\n      </div>\n    </Card>\n  );\n};\n\nexport default CardInfo;","import styled from 'styled-components';\n\nconst StyledContainer = styled.div`\n  width: 75%;\n  margin: 16px auto;\n  margin-top: 64px;\n  margin-bottom: 64px;\n  position: relative;\n  @media (max-width: 1024px) {\n    width: 95%;\n  }\n  @media (max-width: 450px) {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n`;\n\nexport default StyledContainer;\n","import React from 'react';\nimport StyledContainer from './container.style';\n\nconst Container = ({ children }) => {\n  return <StyledContainer>{children}</StyledContainer>;\n};\n\nexport default Container;\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport {\n  fontFamily,\n  fontWeight,\n  textAlign,\n  lineHeight,\n  letterSpacing,\n} from 'styled-system'\nimport { base, themed } from '../base'\n\nconst HeadingWrapper = styled('p')(\n  base,\n  fontFamily,\n  fontWeight,\n  textAlign,\n  lineHeight,\n  letterSpacing,\n  themed('Heading')\n)\n\nconst Heading = ({ content, ...props }) => (\n  <HeadingWrapper {...props}>{content}</HeadingWrapper>\n)\n\nexport default Heading\n\nHeading.propTypes = {\n  content: PropTypes.string,\n  as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),\n  mt: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  mb: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  fontFamily: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  fontWeight: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  textAlign: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  lineHeight: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  letterSpacing: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    ),\n  ]),\n  ...base.propTypes,\n}\n\nHeading.defaultProps = {\n  as: 'h2',\n  // mt: 0,\n  // mb: '1rem',\n  fontWeight: 'bold',\n}\n","import { PrismicNextImage } from '@prismicio/next';\nconst NextImage = ({ ...props }) => {\n  return (\n    <PrismicNextImage\n      {...props}\n    />\n  );\n};\n\nexport default NextImage;\n","import { PrismicNextLink } from '@prismicio/next';\nimport { PrismicRichText as BasePrismicRichText } from '@prismicio/react';\n\nimport Heading from '../Heading';\n\n/** @type {import(\"@prismicio/react\").JSXMapSerializer} */\nconst defaultComponents = {\n  heading1: ({ children }) => <p>{children}</p>,\n  heading2: ({ children }) => (\n    <Heading as=\"h3\" size=\"2xl\" className=\"mb-7 last:mb-0\">\n      {children}\n    </Heading>\n  ),\n  heading3: ({ children }) => (\n    <Heading as=\"h4\" size=\"xl\" className=\"mb-7 last:mb-0\">\n      {children}\n    </Heading>\n  ),\n  paragraph: ({ children }) => <p className=\"mb-7 last:mb-0\">{children}</p>,\n  oList: ({ children }) => (\n    <ol className=\"mb-7 pl-4 last:mb-0 md:pl-6\">{children}</ol>\n  ),\n  oListItem: ({ children }) => (\n    <li className=\"mb-1 list-decimal pl-1 last:mb-0 md:pl-2\">{children}</li>\n  ),\n  list: ({ children }) => (\n    <ul className=\"mb-7 pl-4 last:mb-0 md:pl-6\">{children}</ul>\n  ),\n  listItem: ({ children }) => (\n    <li className=\"mb-1 list-disc pl-1 last:mb-0 md:pl-2\">{children}</li>\n  ),\n  preformatted: ({ children }) => (\n    <pre className=\"mb-7 rounded bg-slate-100 p-4 text-sm last:mb-0 md:p-8 md:text-lg\">\n      <code>{children}</code>\n    </pre>\n  ),\n  strong: ({ children }) => (\n    <strong className=\"font-semibold\">{children}</strong>\n  ),\n  hyperlink: ({ children, node }) => (\n    <PrismicNextLink\n      field={node.data}\n      className=\"underline decoration-1 underline-offset-2\"\n    >\n      {children}\n    </PrismicNextLink>\n  ),\n};\n\nexport function PrismicRichText({ components, ...props }) {\n  return (\n    <BasePrismicRichText\n      components={{ ...defaultComponents, ...components }}\n      {...props}\n    />\n  );\n}\n","/** this is our Base Component every components must be Extend it */\nimport {\n  space,\n  borders,\n  borderColor,\n  width,\n  minWidth,\n  maxWidth,\n  height,\n  minHeight,\n  maxHeight,\n  display,\n  fontSize,\n  flex,\n  order,\n  alignSelf,\n  color,\n  compose,\n} from 'styled-system';\n\nexport const themed = (key) => (props) => props.theme[key];\n\nexport const base = compose(\n  () => ({ boxSizing: 'border-box' }),\n  space,\n  width,\n  minWidth,\n  maxWidth,\n  height,\n  minHeight,\n  maxHeight,\n  fontSize,\n  color,\n  flex,\n  order,\n  alignSelf,\n  borders,\n  borderColor,\n  display\n);\n\nbase.propTypes = {\n  ...display.propTypes,\n  ...space.propTypes,\n  ...borders.propTypes,\n  ...borderColor.propTypes,\n  ...width.propTypes,\n  ...height.propTypes,\n  ...fontSize.propTypes,\n  ...color.propTypes,\n  ...flex.propTypes,\n  ...order.propTypes,\n  ...alignSelf.propTypes,\n};\n","import styled from 'styled-components';\nimport { saasModernTheme } from 'common/theme/saasModern';\nimport { Box, Typography } from '@mui/material';\n\nexport const UseCaseWrapper = styled.div`\n  padding: ${saasModernTheme.space[4]}px;\n  background-color: ${saasModernTheme.colors.background};\n`;\n\nexport const UseCaseHeader = styled.header`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 100%;\n  margin-bottom: ${saasModernTheme.space[5]}px;\n`;\nexport const HeadlineStyle = styled(Typography)`\n  text-align: center;\n  margin-top: 80px;\n  font-size: 48px;\n  font-family: ${saasModernTheme.fontFamily};\n  font-weight: 900;\n  color: var(--Text-Primary, #111927);\n\n  strong {\n    background: ${saasModernTheme.customColor.backgroundTextGradient};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  @media screen and(max-width: 950px) {\n    font-size: 38px;\n  }\n  @media screen and (max-width: 600px) {\n    font-size: 30px;\n  }\n`;\n\nexport const Subtitle = styled.p`\n  color: var(--Text-Secondary, #636f81);\n  font-family: 'Roboto', sans-serif;\n  font-size: 1.25rem;\n  font-weight: 400;\n  line-height: 1.5;\n`;\n\nexport const CategoriesWrapper = styled.div`\n  display: flex;\n  gap: 18px;\n  align-items: center;\n  flex-wrap: nowrap;\n  justify-content: center;\n  margin-bottom: ${saasModernTheme.space[4]}px;\n  width: 100%;\n\n  @media screen and (max-width: 1400px) {\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 16px;\n  }\n\n  @media screen and (max-width: 600px) {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n`;\n\nexport const CategoryButton = styled.button`\n  padding: 8px 12px;\n  border-radius: 20px;\n  min-width: 120px;\n  border: none;\n  font-family: 'Roboto', sans-serif;\n  cursor: pointer;\n  background-color: ${(props) =>\n    props.active\n      ? 'var(--Background-Default, #111927)'\n      : 'var(--Action-Selected, rgba(145, 155, 171, 0.16))'};\n  color: ${(props) => (props.active ? '#FFF' : '#000')};\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: ${saasModernTheme.gradiantShadow};\n    border: 2px solid ${saasModernTheme.customColor.gradiantColor};\n    background-color: var(--Action-Selected, rgba(145, 155, 171, 0.16));\n    color: #000;\n  }\n`;\n\nexport const ContainerUseCase = styled(Box)`\n  display: flex;\n  margin: 0 auto;\n  gap: 180px;\n  width: 100%;\n`;\n\nexport const StyledContainer = styled(Box)`\n  width: 90%;\n  background-color: #ffffff;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  margin: 0 auto;\n  border-radius: 16px;\n  padding: 50px;\n  box-shadow: ${saasModernTheme.gradiantShadow};\n  display: flex;\n  @media screen and (max-width: 600px) {\n    padding: 20px;\n  }\n`;\n\nexport const ContentWrapper = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 50px;\n  gap: 50px;\n`;\n\nexport const ContentLeft = styled.div`\n  display: flex;\n  align-items: center;\n  width: 50%;\n  justify-content: center;\n  @media screen and (max-width: 950px) {\n    width: 100%;\n  }\n`;\n\nexport const ImageWrapper = styled.div`\n  width: 400px;\n  height: 400px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 10px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  @media screen and (max-width: 950px) {\n    width: 90%;\n    height: auto;\n  }\n`;\n\nexport const ContentRight = styled.div`\n  flex: 1;\n  width: 50%;\n`;\n\nexport const SectionTitle = styled.h3`\n  font-weight: bold;\n  margin-bottom: ${saasModernTheme.space[2]}px;\n  color: var(--Text-Primary, #111927);\n  font-family: ${saasModernTheme.fontFamily};\n  font-size: 1.5rem;\n\n  strong {\n    background: ${saasModernTheme.customColor.gradiantColor};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    display: inline;=\n  }\n`;\n\nexport const Description = styled.div`\n  margin-bottom: ${saasModernTheme.space[2]}px;\n  font-family: ${saasModernTheme.fontFamily};\n  color: var(--Text-Secondary, #636f81);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 140%;\n  letter-spacing: -0.32px;\n\n  ul {\n    list-style-type: none;\n    padding-left: 0;\n  }\n\n  li {\n    position: relative;\n    padding-left: 30px;\n    margin-bottom: 12px;\n\n    &:before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 20px;\n      height: 20px;\n      background-color: #ff4d4d;\n      border-radius: 50%;\n      background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>');\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: 12px;\n    }\n  }\n`;\n\nexport const BenefitsList = styled.ul`\n  list-style-type: none;\n  padding: 0;\n  margin-bottom: ${saasModernTheme.space[3]}px;\n\n  li {\n    margin-bottom: ${saasModernTheme.space[1]}px;\n    &::before {\n      content: '✓';\n      color: ${saasModernTheme.colors.success};\n      margin-right: ${saasModernTheme.space[1]}px;\n    }\n  }\n`;\n\nexport const Button = styled.button`\n  background-color: ${saasModernTheme.defaultBackgroundColor};\n  color: ${saasModernTheme.colors.white};\n  padding: ${saasModernTheme.space[2]}px ${saasModernTheme.space[3]}px;\n  border: none;\n  border-radius: 12px;\n  cursor: pointer;\n  font-weight: bold;\n\n  &:hover {\n    background-color: ${saasModernTheme.customColor.gradiantColor};\n  }\n`;\n\nexport const BtnCTA = styled.button`\n  border-radius: 12px;\n  border: none;\n  background: ${saasModernTheme.defaultBackgroundColor};\n  color: white;\n  padding: 12px 16px;\n  font-family: ${saasModernTheme.fontFamily};\n  font-style: normal;\n  font-weight: 600;\n  font-size: 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  &:hover {\n    background: ${saasModernTheme.customColor.gradiantColor};\n  }\n`;\n\nexport const StyledLink = styled.a`\n  text-decoration: none !important;\n  color: inherit;\n  display: inline-block;\n`;\n"," import styled from 'styled-components';\n \n\nexport const SectionGridContainer = styled.div`\n  width: 90%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  margin:0 auto;\n  margin-top:24px;\n  margin-bottom:24px;\n  @media screen and (max-width: 950px) {\n    width: 100%;\n  }\n`;\n\nexport  const GridContainer = styled.div`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  gap: 16px; /* Adjust the gap as needed */\n  /* Responsive styles */\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr; /* On mobile, make each card 100% width */\n  }\n`;\n\nexport const Card = styled.div`\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 20px;\n`;","import React, { useEffect,useState } from 'react'\nimport {\n  SectionGridContainer,\n  GridContainer,\n} from './ListGrouped1.style'\nimport CardInfo from 'common/components/Card/CardInfo'\nimport Box from '@mui/material/Box'\nimport Container from 'common/components/Container';\nimport { CategoriesWrapper, CategoryButton, ContainerUseCase,StyledContainer } from '../CustomerUseCases/CustomerUseCase.style';\n\nconst ListGrouped1Component = ({ slice }) => {\n  const [selectedItem, setSelectedItem] = useState(null)\n    const listLabel = slice.items.filter((obj, index, self) =>\n      index === self.findIndex((t) => (\n          t.groupedby === obj.groupedby\n      ))\n  )\n\n  const handleCategoryClick = (selectedItem) => {\n    setSelectedItem(selectedItem);\n  };\n\n  useEffect(() => {\n    setSelectedItem(listLabel[0].groupedby)\n  },[])\n\n  return (\n    <Container>\n    \n      <StyledContainer>\n      <ContainerUseCase>\n        <CategoriesWrapper>\n            {listLabel.map((item, index) => (\n              <CategoryButton\n                key={index}\n                active={item.groupedby === selectedItem}\n                onClick={() => handleCategoryClick(item.groupedby)}\n              >\n                {item.groupedby}\n              </CategoryButton>\n          ))}\n        </CategoriesWrapper>\n      </ContainerUseCase>\n        <Box>\n          <GridContainer columns={4}>\n            {slice.items\n            .filter((item)=> item.groupedby === selectedItem)\n            .map((item, index) => (\n              <CardInfo  key={index} title={item.title} description={item.description} icon={item.icon} />\n            ))}\n          </GridContainer>\n        </Box>\n        </StyledContainer>\n    </Container>\n  )\n}\n\nexport default ListGrouped1Component \n","/**\n * @typedef {import(\"@prismicio/client\").Content.ListGrouped1Slice} ListGrouped1Slice\n * @typedef {import(\"@prismicio/react\").SliceComponentProps<ListGrouped1Slice>} ListGrouped1Props\n * @param {ListGrouped1Props}\n */\nimport ListGrouped1Component from 'containers/SaasModern/ListGrouped1';\n\nconst ListGrouped1 = ({ slice }) => {\n  return (\n    <section\n      data-slice-type={slice.slice_type}\n      data-slice-variation={slice.variation}\n    >\n      <ListGrouped1Component slice={slice} />\n    </section>\n  );\n};\n\nexport default ListGrouped1;\n"],"names":["Card","styled","div","isFlex","IconWrapper","Title","h2","Description","colors","gray","icon","title","description","type","data-aos","NextImage","field","objectFit","priority","PrismicRichText","children","StyledContainer","HeadingWrapper","base","fontFamily","fontWeight","textAlign","lineHeight","letterSpacing","themed","Heading","content","props","propTypes","PropTypes","as","mt","mb","defaultProps","PrismicNextImage","defaultComponents","heading1","p","heading2","size","className","heading3","paragraph","oList","ol","oListItem","li","list","ul","listItem","preformatted","pre","code","strong","hyperlink","node","PrismicNextLink","data","components","BasePrismicRichText","key","theme","compose","boxSizing","space","width","minWidth","maxWidth","height","minHeight","maxHeight","fontSize","color","flex","order","alignSelf","borders","borderColor","display","UseCaseWrapper","saasModernTheme","background","UseCaseHeader","header","HeadlineStyle","Typography","customColor","backgroundTextGradient","Subtitle","CategoriesWrapper","CategoryButton","button","active","gradiantShadow","gradiantColor","ContainerUseCase","Box","ContentWrapper","ContentLeft","ImageWrapper","ContentRight","SectionTitle","h3","BtnCTA","success","defaultBackgroundColor","white","StyledLink","a","GridContainer","columns","slice","selectedItem","setSelectedItem","useState","listLabel","items","filter","obj","index","self","findIndex","t","groupedby","useEffect","Container","map","item","onClick","handleCategoryClick","CardInfo","section","data-slice-type","slice_type","data-slice-variation","variation","ListGrouped1Component"],"sourceRoot":""}