@digital-b2c/coreui-kit 0.1.0 → 0.2.0

package/dist/index.css

@@ -1,3 +1,21 @@
+/* src/components/Picture/Picture.module.scss */
+.image-desktop {
+  display: block;
+}
+@media (max-width: 768px) {
+  .image-desktop {
+    display: none;
+  }
+}
+.image-mobile {
+  display: none;
+}
+@media (max-width: 768px) {
+  .image-mobile {
+    display: block;
+  }
+}
+
 /* src/components/Button/Button.module.scss */
 .button {
   width: fit-content;
@@ -17,10 +35,11 @@
   background: rgba(255, 255, 255, 0);
   font-family: var(--font-family-primary);
   font-size: var(--font-size-md);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height-normal);
   letter-spacing: -0.5%;
   position: relative;
+  transition: all 0.2s ease-in-out;
 }
 .button:hover {
   text-decoration: none;
@@ -158,7 +177,7 @@
       #ffffff,
       rgba(153, 153, 153, 0.39));
   border-radius: inherit;
-  animation: rotateGradient 2s linear infinite;
+  animation: rotateGradient 2s ease-in infinite;
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
@@ -171,6 +190,12 @@
   background: transparent;
   outline: 4px solid var(--color-link);
 }
+.button .icon,
+.button .logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
 @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
 @keyframes rotateGradient {
   from {
@@ -181,6 +206,117 @@
   }
 }
 
+/* src/components/BrandsStrip/BrandsStrip.module.scss */
+.brandsStrip {
+  display: flex;
+  height: 116px;
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+}
+.brandsStrip.light {
+  background:
+    linear-gradient(
+      89.48deg,
+      rgba(255, 255, 255, 0.25) -2.75%,
+      rgba(153, 153, 153, 0) 187.82%);
+  backdrop-filter: blur(7.45513px);
+}
+.brandsStrip.light::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 0.75px;
+  border: 0.75px solid;
+  background:
+    linear-gradient(
+      89.06deg,
+      rgba(153, 153, 153, 0.39) -2.28%,
+      rgba(255, 255, 255, 0.39) 101.91%);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+.brandsStrip.dark {
+  background-color: var(--color-black);
+}
+.brandsStrip.small {
+  height: 80px;
+}
+.brandsStrip.small .logoWrapper {
+  height: 49px;
+  width: 183px;
+}
+.brandsStrip .container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+  transition: filter 0.3s ease;
+}
+.brandsStrip .container .title {
+  color: var(--color-white);
+}
+.brandsStrip .container.blurred {
+  filter: blur(15px);
+  cursor: pointer;
+}
+.brandsStrip .logos {
+  display: flex;
+  gap: 120px;
+}
+.brandsStrip .logos.marquee {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.brandsStrip .logos.marquee .logoWrapper {
+  --marquee-duration: 8s;
+  --marquee-item-width: 258px;
+  --marquee-gap: 120px;
+  --total-distance: calc( (var(--marquee-item-width) + var(--marquee-gap)) * var(--total-items) );
+  position: absolute;
+  inset-inline-start: 100%;
+  width: var(--marquee-item-width);
+  animation: scrollIndividual var(--marquee-duration) linear infinite;
+  animation-delay: calc(var(--marquee-duration) / var(--total-items) * var(--item-index) * -1);
+}
+.brandsStrip .logos.marquee .logoWrapper.paused {
+  animation-play-state: paused;
+}
+.brandsStrip .logoWrapper {
+  flex-shrink: 0;
+  height: 69px;
+  width: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.brandsStrip .logoWrapper .logo {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+.brandsStrip .cta {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  max-width: 295px;
+}
+@keyframes scrollIndividual {
+  to {
+    transform: translateX(calc(var(--total-distance) * -1));
+  }
+}
+
 /* src/components/Card/Card.module.scss */
 .card {
   display: flex;
@@ -198,24 +334,6 @@
   color: #cecece;
 }
 
-/* src/components/Picture/Picture.module.scss */
-.image-desktop {
-  display: block;
-}
-@media (max-width: 768px) {
-  .image-desktop {
-    display: none;
-  }
-}
-.image-mobile {
-  display: none;
-}
-@media (max-width: 768px) {
-  .image-mobile {
-    display: block;
-  }
-}
-
 /* src/components/CountingCard/CountingCard.module.scss */
 .counting-card {
   display: flex;
@@ -316,9 +434,93 @@
 /* src/components/primitives/Container/Container.module.scss */
 .container {
   width: 100%;
-  max-width: 1440px;
+  max-width: 1280px;
   overflow: visible;
   margin: 0 auto;
+  position: relative;
+}
+
+/* src/components/PracticeCard/PracticeCard.module.scss */
+.practice-card {
+  color: var(--color-white);
+  position: relative;
+  max-width: 426px;
+  height: 521px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.practice-card .wrapper {
+  color: inherit;
+  text-decoration: none;
+}
+.practice-card .background {
+  object-fit: cover;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.2s ease;
+}
+.practice-card .container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-lg);
+}
+@media (max-width: 768px) {
+  .practice-card .container {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-md);
+  }
+}
+.practice-card .title {
+  max-width: 196px;
+}
+@media (max-width: 768px) {
+  .practice-card .title {
+    max-width: 146px;
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-tight-4);
+  }
+}
+.practice-card .cta {
+  display: flex;
+  justify-content: flex-end;
+}
+.practice-card .ctaRest {
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.practice-card .ctaHover {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.practice-card:hover .background {
+  transform: scale(1.08);
+}
+.practice-card:hover .ctaRest {
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+.practice-card:hover .ctaHover {
+  opacity: 1;
+  transition-delay: 0.1s;
+}
+@media (max-width: 768px) {
+  .practice-card {
+    width: 100%;
+    max-width: unset;
+    height: 140px;
+  }
 }
 
 /* src/widgets/CardCollection/CardCollection.module.scss */
@@ -357,6 +559,248 @@
   }
 }
 
+/* src/widgets/ContactModule/ContactModule.module.scss */
+.contact-module {
+  width: 100%;
+  display: block;
+  padding-top: 96px;
+}
+.contact-module .container,
+.contact-module .wrapper,
+.contact-module .content,
+.contact-module .cta-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.contact-module .cta-wrapper {
+  flex-direction: row;
+  justify-content: center;
+  gap: var(--spacing-sm);
+}
+@media (max-width: 768px) {
+  .contact-module .cta-wrapper {
+    flex-direction: column-reverse;
+  }
+  .contact-module .cta-wrapper .cta {
+    width: 100%;
+  }
+}
+.contact-module .wrapper {
+  gap: var(--spacing-lg);
+  padding: 0 var(--spacing-md);
+}
+.contact-module .content {
+  gap: var(--spacing-sm);
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .contact-module .content {
+    max-width: 80%;
+  }
+}
+.contact-module .title {
+  color: var(--color-black);
+}
+@media (max-width: 768px) {
+  .contact-module .title {
+    max-width: 75%;
+  }
+}
+@media (max-width: 768px) {
+  .contact-module .image {
+    max-width: 80%;
+    margin-top: -14px;
+  }
+}
+
+/* src/widgets/HeroBanner/HeroBanner.module.scss */
+.heroBanner {
+  width: 100%;
+  position: relative;
+}
+.heroBanner.mainHeroBanner {
+  background-color: #f3f3f3;
+  padding: 48px 80px 0 80px;
+}
+.heroBanner.mainHeroBanner .container {
+  max-width: 1280px;
+  height: calc(100dvh - 112px);
+  margin: 0 auto;
+  border-radius: 16px;
+  overflow: hidden;
+}
+.heroBanner.bannerPodcast .container {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: var(--spacing-7xl);
+  gap: 64px;
+}
+.heroBanner.bannerPodcast .container .banner {
+  padding: 0;
+  justify-content: center;
+}
+.heroBanner.bannerPodcast .container .banner .text .title {
+  color: var(--color-black);
+}
+.heroBanner.bannerPodcast .container .banner .text .subtitle {
+  color: var(--color-gray);
+}
+.heroBanner.bannerPodcast .container .logoWrapper {
+  z-index: 2;
+}
+.heroBanner.bannerPodcast .container .logoWrapper .logo {
+  object-fit: contain;
+  max-width: 466px;
+}
+.heroBanner.bannerPodcast .container .horizontalGradient {
+  display: flex;
+  height: 8px;
+}
+.heroBanner.bannerPodcast .container .horizontalGradient .lensCrafters {
+  background-color: var(--color-lenscrafter-blue);
+}
+.heroBanner.bannerPodcast .container .horizontalGradient .forEyes {
+  background-color: var(--color-foreyes-brown);
+}
+.heroBanner.bannerPodcast .container .horizontalGradient .optical {
+  background-color: var(--color-targetoptical-red);
+}
+.heroBanner.bannerPodcast .container .horizontalGradient .pearleVision {
+  background-color: var(--color-pearlevision-green);
+}
+.heroBanner .container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  height: calc(100dvh - 64px);
+}
+.heroBanner .container .banner {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  width: 100%;
+  max-width: 661px;
+  height: 100%;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-7xl);
+  z-index: 2;
+}
+.heroBanner .container .banner .text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  color: var(--color-white);
+}
+.heroBanner .container .banner .ctaContainer {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+.heroBanner .container .brandsStrip {
+  z-index: 3;
+}
+.heroBanner .container .backgroundImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+.heroBanner .scrollDown {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 64px;
+}
+.heroBanner .scrollDown .arrow {
+  width: 32px;
+  height: 32px;
+}
+@media (max-width: 768px) {
+  .heroBanner.mainHeroBanner {
+    padding: 24px 16px;
+  }
+  .heroBanner.mainHeroBanner .container {
+    height: calc(100dvh - 88px);
+  }
+  .heroBanner.bannerPodcast .container {
+    flex-direction: column;
+    padding: 24px 16px;
+    gap: 32px;
+  }
+  .heroBanner.bannerPodcast .container .banner {
+    order: 2;
+    height: unset;
+  }
+  .heroBanner.bannerPodcast .container .logoWrapper {
+    order: 1;
+  }
+  .heroBanner.bannerPodcast .container .logoWrapper .logo {
+    width: 100%;
+  }
+  .heroBanner .container .banner {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
+  .heroBanner .container .banner .ctaContainer {
+    flex-direction: column;
+  }
+}
+
+/* src/widgets/MiniBanner/MiniBanner.module.scss */
+.minibanner {
+  width: 100%;
+  background-color: #f3f3f3;
+  min-height: 192px;
+  position: relative;
+  color: var(--color-white);
+  text-align: center;
+}
+.minibanner :global(.h1) {
+  font-weight: 400;
+}
+.minibanner .background {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+.minibanner .container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-3xl) 0;
+  z-index: 2;
+}
+@media (max-width: 768px) {
+  .minibanner .container {
+    padding: var(--spacing-3xl) var(--spacing-md);
+  }
+}
+.minibanner.miniBannerNoBG {
+  color: var(--color-black);
+}
+.minibanner.miniBannerNoBG .container {
+  gap: var(--spacing-lg);
+  padding: var(--spacing-5xl) 0;
+}
+@media (max-width: 768px) {
+  .minibanner.miniBannerNoBG .container {
+    padding: var(--spacing-5xl) var(--spacing-md);
+  }
+}
+
 /* src/widgets/MiniSectionCta/MiniSectionCta.module.scss */
 .miniSectionCta {
   width: 100%;
@@ -419,7 +863,7 @@
   }
   .miniSectionCta.infoCallout .subtitle {
     font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-regular);
+    font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight-1);
   }
   .miniSectionCta.miniTextCenterCta .col {
@@ -427,6 +871,69 @@
   }
 }
 
+/* src/widgets/PracticePathCards/PracticePathCards.module.scss */
+.practice-path-cards {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-3xl) 0;
+}
+@media (max-width: 768px) {
+  .practice-path-cards {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
+}
+.practice-path-cards h2 {
+  color: var(--color-black);
+}
+.practice-path-cards .container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+}
+.practice-path-cards .wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xl);
+}
+@media (max-width: 768px) {
+  .practice-path-cards .wrapper {
+    flex-direction: column;
+  }
+  .practice-path-cards .wrapper .ctaWrapper {
+    width: 100%;
+    padding: 0 var(--spacing-lg);
+  }
+  .practice-path-cards .wrapper .ctaWrapper .cta {
+    width: 100%;
+  }
+}
+.practice-path-cards .content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.practice-path-cards .cards {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  border-radius: 16px;
+  justify-content: center;
+}
+@media (max-width: 768px) {
+  .practice-path-cards .cards {
+    flex-direction: column;
+  }
+}
+.practice-path-cards .card {
+  width: 33.333%;
+}
+@media (max-width: 768px) {
+  .practice-path-cards .card {
+    width: 100%;
+  }
+}
+
 /* src/widgets/Teaser5050With3Text/Teaser5050With3Text.module.scss */
 .teaser5050-3text {
   width: 100%;