{"version":3,"file":"static/chunks/8419-69509b124efe2d60.js","mappings":"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","sources":["webpack://_N_E/./src/common/assets/image/saasModern/banner-acculturation.webp","webpack://_N_E/./src/common/components/NextImage/index.js","webpack://_N_E/./src/containers/SaasModern/Acculturation/Acculturation.style.js"],"sourcesContent":["export default {\"src\":\"/_next/static/media/banner-acculturation.b2321b1f.webp\",\"height\":2448,\"width\":6000,\"blurDataURL\":\"data:image/webp;base64,UklGRi4AAABXRUJQVlA4ICIAAAAwAQCdASoIAAMAAkA4JQAAgAAA/vUtgL+Ay2/uk/U/lAAA\",\"blurWidth\":8,\"blurHeight\":3};","import { PrismicNextImage } from '@prismicio/next';\nconst NextImage = ({ ...props }) => {\n  return (\n    <PrismicNextImage\n      {...props}\n    />\n  );\n};\n\nexport default NextImage;\n","'use client'\nimport styled, { keyframes } from \"styled-components\";\nimport colors from \"common/theme/saasModern/colors\";\nimport { saasModernTheme } from \"common/theme/saasModern\";\nimport bannerImg from \"common/assets/image/saasModern/banner-acculturation.webp\"\nimport Link from \"next/link\";\n\nexport const Main = styled.div`\n  scroll-behavior: smooth\n`\n\nexport const Container = styled.div`\n  width: 60%;\n  margin: 0 auto;\n  position: relative;\n  z-index: 2; /* Above the background image */\n  @media (max-width: 1540px) {\n    width: 80%;\n  }\n  @media (max-width: 1240px) {\n    width: 90%;\n  }\n  @media (max-width: 768px) {\n    width: 80%;\n  }\n  @media (max-width: 450px) {\n    width: 95%;\n  }\n`\n\nexport const GradientText = styled.span`\n  background: linear-gradient(to right, #3b82f6, #ec4899, #f97316);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n`\nexport const HeroContainer = styled.div`\n  padding: 8rem 1rem;\n  text-align: center;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  position: relative;\n  z-index: 1; /* Below the text */\n  @media (max-width: 450px) {\n    background-size: contain;\n  }\n`;\n\nexport const BackgroundHeroContainer = styled.div`\n  background-image: url(${bannerImg.src});\n  background-size: cover;\n  background-position-y: 110%;\n  background-repeat: no-repeat;\n  background-color: lighten(#020934, 0%);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0.2; /* Background image is semi-transparent */\n  z-index: 1; /* Below the text */\n`\n\nexport const Title = styled.h2`\n  font-size: 2.5rem;\n  font-weight: 900;\n  color: black;\n  margin-top: 24px;\n  margin-bottom: 24px ;\n  @media (max-width: 768px) {\n    font-size: 2rem;\n  }\n`;\n\nexport const Subtitle = styled.div`\n  color: black;\n  font-size: 1.125rem;\n  margin: 0 auto 2rem;\n`;\n\nexport const TextCenter = styled.div`\n  text-align: center;\n`;\n\nexport const BoostContainer = styled.section`\n  text-align: center;\n`;\n\nexport const ContentWrapper = styled.div`\n  max-width: 1024px;\n  margin: 0 auto;\n`;\n\nexport const Description = styled.div`\n  color: black;\n  font-size: 1rem;\n  margin: 0 auto;\n`;\n\nexport const WhyContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4rem;\n  margin-bottom: 2rem;\n  margin-top: 4rem;\n  @media (max-width: 968px) {\n    flex-direction: column;\n    gap: 2rem;\n    padding: 2rem 1rem;\n  }\n`;\n\nexport const BackgroundLinearContainer = styled.div`\n  background: linear-gradient(180deg, rgba(16, 152, 247, 0.05) 0%, rgba(255, 110, 114, 0.05) 100%);\n  padding-top:5rem;\n  padding-bottom:5rem;\n  @media (max-width: 450px) {\n    padding-top:2rem;\n    padding-bottom:2rem;\n  }\n`;\n\nexport const SliceContainer = styled.div`\n  padding-top:5rem;\n  padding-bottom:${props => props.paddingBottom ? props.paddingBottom : 5}rem;\n  @media (max-width: 450px) {\n    padding-top:2rem;\n    padding-bottom:2rem;\n  }\n`;\n\nexport const WhyImageWrapper = styled.div`\n  flex: 1;\n  img {\n    width: 100%;\n    height: auto;\n    border-radius: ${saasModernTheme.radius[4]}px;\n    overflow: hidden;\n  }\n`;\n\nexport const WhyContentWrapper = styled.div`\n  flex:1;\n  display: flex;\n  flex-direction: column;\n`;\n\n\nexport const WhyContentTitle = styled.h2`\n  font-size: 2.5rem;\n  font-weight: 900;\n  color: black;\n  margin: 0;\n  @media (max-width: 768px) {\n    font-size: 2rem;\n  }\n`;\n\nexport const BenefitsContainer = styled.section`\n  padding-top: 4rem;\n  padding-bottom: 1rem;\n`;\n\nexport const BenefitsGrid = styled.div`\n    display: flex;\n    align-items: stretch;\n    justify-content: center;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n`;\n\n  export const BenefitCard = styled.div`\n    padding: 2rem;\n    flex: 1 25%;\n    border-radius: ${saasModernTheme.radius[4]}px;\n    max-width: 25%;\n    position: relative;\n    cursor: pointer;\n    background: linear-gradient(180deg, rgba(16, 152, 247, 0.05) 0%, rgba(255, 110, 114, 0.05) 100%);\n    transition: border 0.3s ease-in-out;  // added transition for border\n    text-align: center;\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n    border-radius: ${saasModernTheme.radius[4]}px;\n      padding: 2px;\n      background: linear-gradient(to right, #ec4899, #3b82f6);\n      -webkit-mask: \n        linear-gradient(#fff 0 0) content-box, \n        linear-gradient(#fff 0 0);\n      mask: \n        linear-gradient(#fff 0 0) content-box, \n        linear-gradient(#fff 0 0);\n      -webkit-mask-composite: xor;\n      mask-composite: exclude;\n      opacity: 0;  // start with transparent\n      transition: opacity 0.3s ease-in-out;  // added transition for opacity\n    }\n  \n    &:hover {\n      &::before {\n        background-position: 100% 100%;  // shift the gradient on hover\n        opacity: 1;  // fade in border\n      }\n    }\n\n    @media (max-width: 640px) {\n      max-width: 100%;\n    }\n`;\n\nexport const BenefitCardTitle = styled.h3`\n  color: black;\n  font-size: 1.25rem;\n  font-weight: bold;\n  margin-bottom: 1rem;\n`;\n\nexport const BenefitCardDescription = styled.p`\n  color: #94a3b8;\n  font-size: 0.875rem;\n  line-height: 1.6;\n`;\n\n\nexport const ProgramContainer = styled.section`\npadding-bottom: 4rem;\n`;\n\n\nexport const  ProgramCardsContainer = styled.div`\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 2rem;\n  \n  @media (max-width: 968px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  @media (max-width: 640px) {\n    grid-template-columns: 1fr;\n  }\n`;\n\nexport const  ProgramCard = styled.div`\n    border-radius: ${saasModernTheme.radius[4]}px;\n  padding: 2rem;\n  display: flex;\n  gap: 0.8rem;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content:flex-start;\n  background: linear-gradient(180deg, rgba(16, 152, 247, 0.05) 0%, rgba(255, 110, 114, 0.05) 100%);\n`;\n\nexport const  ProgramIconWrapper = styled.div`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #3b82f6;\n`;\n\nexport const  ProgramCardTitle = styled.h3`\n  color: black;\n  font-size: 1.125rem;\n  font-weight: bold;\n  margin: 0;\n`;\n\nexport const FeaturesList = styled.ul`\n  list-style: none;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n`;\n\nexport const FeatureItem = styled.li`\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n`;\n\nexport const Bullet = styled.span`\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  background: linear-gradient(to right, #3b82f6, #ec4899);\n    border-radius: ${saasModernTheme.radius[4]}px;\n`;\n\nexport const FeatureContent = styled.div`\n  flex: 1;\n  padding: 0;\n  margin: 0;\n  & > p{\n    padding: 0;\n    margin: 0;\n  }\n  color: ${colors.black};\n`;\n \n \nexport const PillarsPillarsContainer = styled.section`\n  position: relative;\n  @media (max-width: 768px) {\n    padding:  0;\n    padding-bottom : 24px;\n  }\n`;\n\nexport const PillarsSlideContainer = styled.div`\n    border-radius: ${saasModernTheme.radius[4]}px;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  align-items: center;\n  @media (max-width: 768px) {\n    height: auto;\n  }\n`;\n \nexport const PillarsSlideContent = styled.div`\n  position: relative;\n  border-radius: ${saasModernTheme.radius[4]}px;\n  background-image: url(${props => props.bgImage});\n  width: 99%;\n  background-size: cover;\n  overflow: hidden;\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: ${saasModernTheme.radius[4]}px;\n    overflow: hidden;\n    padding: 5px;\n    overflow: hidden;\n    background: linear-gradient(to right, #3b82f6, #ec4899, #f97316);\n    -webkit-mask: \n      linear-gradient(#fff 0 0) content-box, \n      linear-gradient(#fff 0 0);\n    mask: \n      linear-gradient(#fff 0 0) content-box, \n      linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    pointer-events: none;\n  }\n  @media (max-width: 768px) {\n    display: block;\n  }\n`;\n\nexport const PillarsTextContent = styled.div`\n  flex-grow: 1;\n  color: white;\n  padding: 1rem;\n  overflow: hidden;\n  background-color: rgba(0, 0, 0, 0.5);\n`;\n\nexport const PillarsSlideTitle = styled.h3`\n  font-size: 1.75rem;\n  font-weight: bold;\n  margin-bottom: 1.5rem;\n`;\n\nexport const PillarsDescription = styled.p`\n  color: ${colors.white};\n  font-size: 1rem;\n  line-height: 1.6;\n  margin-bottom: 1.5rem;\n`;\n\nexport const StartContainer = styled.section`\n  padding: 4rem 1rem;\n  margin: 0 auto;\n`;\n\nexport const StartGridContainer = styled.div`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 4rem;\n  \n  @media (max-width: 968px) {\n    grid-template-columns: 1fr;\n    gap: 2rem;\n  }\n`;\n\nexport const StartColumn = styled.div`\n  background: rgba(255, 255, 255, 0.05);\n    border-radius: ${saasModernTheme.radius[4]}px;\n  padding: 1rem 2rem;\n  position: relative;\n`;\n\nexport const StartColumnTitle = styled.h3`\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin-bottom: 1.5rem;\n  color: black;\n  height: 60px;\n`;\n\nexport const StartDescription = styled.p`\n  color: ${colors.black};\n  font-size: 1rem;\n  line-height: 1.6;\n  margin-bottom: 4rem;\n  a {\n    text-decoration: none;\n    color: white;\n  }\n`;\n\nexport const StartButtonWrapper = styled(Link)`\n  background-color: ${colors.redSecondary};\n  padding: 8px;\n  text-transform: capitalize;\n  border-radius: ${saasModernTheme.radius[3]}px;\n  color: ${colors.white};\n  float: left;\n  text-decoration: none;\n  position: absolute;\n  bottom: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-size: 14px;\n`;\n\nexport const ReferencesContainer = styled.section`\n  padding: 4rem 1rem;\n  margin: 0 auto;\n`;\n\nexport const ReferencesTitle = styled.h2`\n  font-size: 2rem;\n  font-weight: bold;\n  text-align: center;\n  margin-bottom: 2rem;\n  \n  @media (max-width: 768px) {\n    font-size: 1.75rem;\n  }\n`;\n\n \n\nexport const ReferencesGrid = styled.div`\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 2rem;\n  margin-bottom: 3rem;\n  \n  @media (max-width: 968px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  @media (max-width: 640px) {\n    grid-template-columns: 1fr;\n  }\n`;\n\nexport const ReferencesCard = styled.div`\n  background-color: ${props => props.bgColor};\n    border-radius: ${saasModernTheme.radius[4]}px;\n  padding: 2rem;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n`;\n \nexport const CenterElement = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;"],"names":["props","PrismicNextImage","Main","styled","div","Container","GradientText","span","HeroContainer","BackgroundHeroContainer","bannerImg","src","Title","h2","TextCenter","BoostContainer","section","Description","WhyContainer","BackgroundLinearContainer","SliceContainer","paddingBottom","WhyImageWrapper","saasModernTheme","radius","WhyContentWrapper","WhyContentTitle","BenefitsContainer","BenefitsGrid","BenefitCard","BenefitCardTitle","h3","BenefitCardDescription","p","ProgramContainer","ProgramCardsContainer","ProgramCard","ProgramIconWrapper","ProgramCardTitle","FeaturesList","ul","FeatureItem","li","Bullet","FeatureContent","colors","black","PillarsPillarsContainer","PillarsSlideContainer","PillarsSlideContent","bgImage","PillarsTextContent","PillarsSlideTitle","PillarsDescription","white","StartContainer","StartGridContainer","StartColumn","StartColumnTitle","StartDescription","StartButtonWrapper","Link","redSecondary","ReferencesContainer","ReferencesGrid","ReferencesCard","bgColor","CenterElement"],"sourceRoot":""}