Merge branch 'main' into ToniGrbic/382-popravit-ponasanje-sponzorskih…

…-logotipova

apps/web/src/components/DuckieSection/DuckieSection.module.scss

@@ -8,8 +8,10 @@
   flex-direction: row;
   position: relative;
   background-color: #f5ede1;
+  z-index: 1;
 
   &:before {
+    z-index: -1;
     content: '';
     background-image: url(../../assets/images/noise.webp);
     opacity: 0.15;

apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionCard.tsx

@@ -43,9 +43,7 @@ const FrequentlyAskedQuestionCard: React.FC<
           )}
         </button>
       </div>
-      {isRulerVisible && (
-        <div className={c.dottedRuler}> </div>
-      )}
+      {isRulerVisible && <div className={c.dottedRuler}> </div>}
     </>
   );
 };

apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionsSection.module.scss

@@ -45,9 +45,9 @@
 .faqCard {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   cursor: pointer;
-  height: 40px;
+  min-height: 40px;
 
   &Left {
     display: flex;

apps/web/src/components/Hero/Hero.module.scss

@@ -48,6 +48,11 @@
       letter-spacing: 1px;
       text-transform: uppercase;
       text-decoration: none;
+      transition: all 200ms;
+
+      &:hover {
+        filter: brightness(75%);
+      }
     }
   }
 

apps/web/src/components/ScheduleSection/ScheduleCard.tsx

@@ -1,8 +1,8 @@
 import { EventWithSpeakerDto } from '@ddays-app/types';
 import MinusSvg from 'assets/icons/minus-black.svg';
+import PlusSvg from 'assets/icons/plus-black.svg';
 import { useEffect, useState } from 'react';
 
-import PlusSvg from '../../assets/Plus.svg';
 import { useScreenSize } from '../../hooks/useScreenSize';
 import c from './ScheduleSection.module.scss';
 import {

apps/web/src/components/ScheduleSection/ScheduleSection.module.scss

@@ -177,6 +177,7 @@
 }
 
 .plusButton {
+  fill: black;
   background-color: transparent;
   border: none;
   cursor: pointer;

apps/web/src/components/SponsorSection/SponsorModal.tsx

@@ -51,7 +51,7 @@ const SponsorModal: React.FC<SponsorModalProps> = ({ sponsor, close }) => {
                 <p className={c.themeBadgeText}>DIZ</p>
               </div>
               <div className={c.themeBadge}>
-                <p className={c.themeBadgeText}>TECH</p>
+                <p className={c.themeBadgeText}>DIV</p>
               </div>
             </div>
           </div>
@@ -72,8 +72,8 @@ const SponsorModal: React.FC<SponsorModalProps> = ({ sponsor, close }) => {
                   </a>
                 </div>
                 {(index === jobs.length - 1 || isMobile) && (
-                  <div className={clsx(c.verticalRuler, c.verticalRulerEnd)}>
-                  </div>
+                  <div
+                    className={clsx(c.verticalRuler, c.verticalRulerEnd)}></div>
                 )}
                 <div className={clsx(c.dottedRuler, c.positionBottom)}></div>
               </div>

apps/web/src/components/TestimonialsSection/TestimonialsSection.module.scss

@@ -7,6 +7,31 @@
   overflow-x: clip;
   position: relative;
 
+
+  .sectionBreaker {
+    z-index: 5;
+    position: absolute;
+    left: 0;
+    bottom: -45px;
+    width: 100%;
+    height: 45px;
+    rotate: -0.7deg;
+
+    mask-image: url('../../assets/images/section-breaker.webp');
+    background: black;
+      &:before {
+        content: '';
+        background-image: url(../../assets/images/noise.webp);
+        opacity: 0.15;
+        top: 0;
+        left: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+  }
+
   @media screen and (min-width: 768px) {
     > div {
       scale: 1.01;

apps/web/src/components/TestimonialsSection/TestimonialsSection.tsx

@@ -81,6 +81,7 @@ const TestimonialsSection = () => {
       <Testimonial color='white' {...testimonials[0]} />
       <Testimonial color='black' {...testimonials[1]} refEl={blackSection} />
       <Testimonial color='beige' {...testimonials[2]} refEl={beigeSection} />
+      <div className={c.sectionBreaker}></div>
     </section>
   );
 };