Merge branch 'main' of https://github.com/todd-carlsson/eltezza-websi…

…te-v2

src/features/layout/reviews/review.tsx

@@ -48,7 +48,7 @@ export function Review({ review, index, page, length }: ReviewProps) {
  opacity: getIndex() === index ? 1 : 0.5,
  }}
  className={styles.reviewContainer}
- onClick={slide}
+ onClick={windowSize > 1000 ? slide : () => {}}
  >
  <p className={styles.reviewText}>{review.review}</p>
  <h3 className={styles.reviewName}>{review.name}</h3>

src/features/layout/reviews/reviews.module.scss

@@ -55,6 +55,7 @@
  display: flex;
  justify-content: center;
  margin-top: 3rem;
+ scroll-margin-top: 50vh;
 
  @media screen and (width > 1050px) {
  display: none;

src/features/layout/reviews/reviews.tsx

@@ -39,7 +39,9 @@ export const Reviews = memo(function Reviews({ content, page }: ReviewsProps) {
  } else if (paginationCount === content.length) {
  setPaginationCount(3);
  setIsPaginated(false);
- scrollDiv.current?.scrollIntoView({ behavior: "smooth" });
+ setTimeout(() => {
+ scrollDiv.current?.scrollIntoView({ behavior: "smooth" });
+ }, 10);
  }
  }
 
@@ -49,7 +51,7 @@ export const Reviews = memo(function Reviews({ content, page }: ReviewsProps) {
 
  if (windowWidth > 1000) {
  return (
- <section id="reviews" className={styles.reviews} ref={scrollDiv}>
+ <section id="reviews" className={styles.reviews}>
  <h1 className="largeText">
  Hear it from our <span className="textGradient">partners</span>
  </h1>
@@ -95,7 +97,7 @@ export const Reviews = memo(function Reviews({ content, page }: ReviewsProps) {
  );
  } else
  return (
- <section className={styles.reviews} ref={scrollDiv}>
+ <section className={styles.reviews}>
  <h1 className="largeText">
  Hear it from our <span className="textGradient">partners</span>
  </h1>
@@ -104,7 +106,7 @@ export const Reviews = memo(function Reviews({ content, page }: ReviewsProps) {
  <Review key={item.id} review={item} index={i} page={page} />
  ))}
  </div>
- <div className={styles.buttonContainer}>
+ <div className={styles.buttonContainer} ref={scrollDiv}>
  <Button
  onClick={paginateData}
  className={styles.paginateButton}

src/features/layout/team/team.module.scss

@@ -78,6 +78,7 @@
  display: flex;
  justify-content: center;
  margin-top: 3rem;
+ scroll-margin-top: 50vh;
 
  @media screen and (width > 1050px) {
  display: none;

src/features/layout/team/team.tsx

@@ -44,7 +44,9 @@ export const Team = memo(function Team({
  if (windowWidth <= 1050) {
  setPaginationCount(4);
  setIsPaginated(false);
- scrollDiv.current?.scrollIntoView({ behavior: "smooth" });
+ setTimeout(() => {
+ scrollDiv.current?.scrollIntoView({ behavior: "smooth" });
+ }, 10);
  }
  if (windowWidth <= 500) {
  setPaginationCount(3);
@@ -54,7 +56,7 @@ export const Team = memo(function Team({
  }
 
  return (
- <section id="about" className={styles.teamSection} ref={scrollDiv}>
+ <section id="about" className={styles.teamSection}>
  <div className={styles.textContainer}>
  <h1
  className="largeText"
@@ -71,7 +73,7 @@ export const Team = memo(function Team({
  <TeamMember key={item.id} member={item} index={i} color={color} />
  ))}
  </div>
- <div className={styles.buttonContainer}>
+ <div className={styles.buttonContainer} ref={scrollDiv}>
  <Button
  onClick={paginateData}
  variant={ButtonVariant.gradient}

src/features/layout/work/work.module.scss

@@ -206,6 +206,10 @@
  position: relative;
  z-index: 850;
 
+ @media screen and (width <=800px) {
+ margin-top: 120px;
+ }
+
  .carouselContainer {
  height: 400px;
  }
@@ -221,7 +225,8 @@
  left: var(--content-padding);
 
  @media screen and (width <=800px) {
- position: relative;
+ top: -50px;
+ left: calc(50% - 87px);
  }
 
  .wheelBlur {
@@ -244,12 +249,6 @@
  animation: none;
  }
 
- @media screen and (width <=800px) {
- position: relative;
- top: 0;
- left: 0;
- }
-
  @keyframes rotate {
  0% {
  transform: rotate(0deg);