New pricing page

package.json

@@ -20,6 +20,8 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "dotenv": "^16.0.3",
+    "embla-carousel": "^8.2.0",
+    "embla-carousel-react": "^8.2.0",
     "gatsby": "^5.13.3",
     "gatsby-background-image": "^1.6.0",
     "gatsby-image": "^3.11.0",

shared.ts

@@ -1,6 +1,8 @@
 export const webinarsUrl =
     'https://try.estuary.dev/webinar-estuary101-ondemand';
 
+export const dashboardRegisterUrl = 'https://dashboard.estuary.dev/register';
+
 export const estuaryProductFlowVideoUrl =
     'https://www.youtube.com/embed/hlCh81ZbBik';
 

src/components/Advantages/styles.ts

@@ -15,7 +15,7 @@ export const Container = styled.section<{ $isImageOnTheLeft: boolean }>`
     flex-direction: ${(props) =>
         props.$isImageOnTheLeft ? 'row-reverse' : 'row'};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1024px) {
         flex-direction: column-reverse;
         gap: 40px;
     }
@@ -45,7 +45,11 @@ export const LeftColumn = styled.div`
     display: flex;
     flex-direction: column;
     gap: 24px;
-    max-width: 620px;
+    max-width: 45%;
+
+    @media (max-width: 1024px) {
+        max-width: 100%;
+    }
 `;
 
 export const Title = styled.h2<Theme>`

src/components/Carousel/hooks/useDotButton.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
+
+type UseDotButtonType = {
+    selectedIndex: number;
+    scrollSnaps: number[];
+    onDotButtonClick: (index: number) => void;
+};
+
+export const useDotButton = (
+    emblaApi: EmblaCarouselType | undefined
+): UseDotButtonType => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+    const onDotButtonClick = useCallback(
+        (index: number) => {
+            if (!emblaApi) return;
+            emblaApi.scrollTo(index);
+        },
+        [emblaApi]
+    );
+
+    const onInit = useCallback((emblaApiValue: EmblaCarouselType) => {
+        setScrollSnaps(emblaApiValue.scrollSnapList());
+    }, []);
+
+    const onSelect = useCallback((emblaApiValue: EmblaCarouselType) => {
+        setSelectedIndex(emblaApiValue.selectedScrollSnap());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onInit(emblaApi);
+        onSelect(emblaApi);
+        emblaApi
+            .on('reInit', onInit)
+            .on('reInit', onSelect)
+            .on('select', onSelect);
+    }, [emblaApi, onInit, onSelect]);
+
+    return {
+        selectedIndex,
+        scrollSnaps,
+        onDotButtonClick,
+    };
+};

src/components/Carousel/hooks/usePrevNextButtons.tsx

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
+
+type UsePrevNextButtonsType = {
+    prevBtnDisabled: boolean;
+    nextBtnDisabled: boolean;
+    onPrevButtonClick: () => void;
+    onNextButtonClick: () => void;
+};
+
+export const usePrevNextButtons = (
+    emblaApi: EmblaCarouselType | undefined
+): UsePrevNextButtonsType => {
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+    const onPrevButtonClick = useCallback(() => {
+        if (!emblaApi) return;
+        emblaApi.scrollPrev();
+    }, [emblaApi]);
+
+    const onNextButtonClick = useCallback(() => {
+        if (!emblaApi) return;
+        emblaApi.scrollNext();
+    }, [emblaApi]);
+
+    const onSelect = useCallback((emblaApiValue: EmblaCarouselType) => {
+        setPrevBtnDisabled(!emblaApiValue.canScrollPrev());
+        setNextBtnDisabled(!emblaApiValue.canScrollNext());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+
+    return {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    };
+};

src/components/Carousel/index.tsx

@@ -1,168 +1,125 @@
-import * as React from 'react';
+import React from 'react';
+import { EmblaOptionsType } from 'embla-carousel';
+import useEmblaCarousel from 'embla-carousel-react';
+import CircleIcon from '@mui/icons-material/Circle';
+import clsx from 'clsx';
 import ChevronLeftIcon from '../../svgs/chevron-left.svg';
 import ChevronRightIcon from '../../svgs/chevron-right.svg';
+import { useDotButton } from './hooks/useDotButton';
+import { usePrevNextButtons } from './hooks/usePrevNextButtons';
 import {
-    Arrow,
-    Container,
-    Dot,
-    DotWrapper,
-    Dots,
-    Navigation,
-    Slide,
-    Viewport,
-} from './styles';
+    container,
+    threeItemsSlide,
+    viewport,
+    slideWrapper,
+    slide,
+    arrow,
+    dots,
+    dotWrapper,
+    dot,
+    oneContentSlide,
+    navigation,
+    dotSelected,
+} from './styles.module.less';
 
 type CarouselProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
+    options?: EmblaOptionsType;
     hasArrow?: boolean;
     dotColor?: string;
     activeDotColor?: string;
     arrowColor?: string;
+    hasFullWidthSlide?: boolean;
+    hasMultipleItemsSlide?: boolean;
 };
 
 const Carousel = ({
     children,
+    options,
     hasArrow = false,
     dotColor,
     activeDotColor,
     arrowColor = '#FFFFFF',
+    hasFullWidthSlide = false,
+    hasMultipleItemsSlide,
     ...rest
 }: CarouselProps) => {
-    const [currentSlide, setCurrentSlide] = React.useState(0);
-    const [isTransitioning, setIsTransitioning] = React.useState(false);
-    const hasMounted = React.useRef(false);
-    const slideRefs = React.useRef<(HTMLLIElement | null)[]>([]);
-    const isDotClick = React.useRef(false);
+    const [emblaRef, emblaApi] = useEmblaCarousel(options);
 
-    const isLeftArrowDisabled = currentSlide === 0;
-    const isRightArrowDisabled = currentSlide === slideRefs.current.length - 1;
+    const { selectedIndex, scrollSnaps, onDotButtonClick } =
+        useDotButton(emblaApi);
 
-    const observeSlides = React.useCallback(
-        (observer: IntersectionObserver) => {
-            slideRefs.current.forEach((slide) => {
-                if (slide) {
-                    observer.observe(slide);
-                }
-            });
-        },
-        []
-    );
-
-    const createIntersectionObserver = React.useCallback(() => {
-        const observerCallback = (entries: IntersectionObserverEntry[]) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-                    const index = slideRefs.current.indexOf(
-                        entry.target as HTMLLIElement
-                    );
-                    if (index !== -1) {
-                        setCurrentSlide(index);
-                    }
-                }
-            });
-        };
-
-        return new IntersectionObserver(observerCallback, { threshold: 0.5 });
-    }, []);
-
-    React.useEffect(() => {
-        if (hasMounted.current && slideRefs.current[currentSlide]) {
-            slideRefs.current[currentSlide]?.scrollIntoView({
-                behavior: isDotClick.current ? 'instant' : 'smooth',
-                block: 'nearest',
-                inline: 'center',
-            });
-            isDotClick.current = false;
-        }
-    }, [currentSlide]);
-
-    React.useEffect(() => {
-        const observer = createIntersectionObserver();
-        observeSlides(observer);
-
-        hasMounted.current = true;
-
-        return () => {
-            observer.disconnect();
-        };
-    }, [createIntersectionObserver, observeSlides]);
-
-    const onArrowClick = React.useCallback(
-        (direction: 'left' | 'right') => () => {
-            if (!isTransitioning) {
-                setIsTransitioning(true);
-                const nextSlide =
-                    direction === 'left' ? currentSlide - 1 : currentSlide + 1;
-                setCurrentSlide(nextSlide);
-                setTimeout(() => {
-                    setIsTransitioning(false);
-                }, 500);
-            }
-        },
-        [currentSlide, isTransitioning]
-    );
-
-    const handleDotClick = React.useCallback(
-        (index: number) => {
-            setCurrentSlide(index);
-            isDotClick.current = true;
-        },
-        [isDotClick]
-    );
+    const {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    } = usePrevNextButtons(emblaApi);
 
     return (
-        <Container aria-label={rest['aria-label']} {...rest}>
-            <Viewport>
-                {React.Children.map(children, (child, index) => (
-                    <Slide
-                        key={`${rest['aria-label']}-${index}}`}
-                        ref={(el) => {
-                            slideRefs.current[index] = el;
-                        }}
-                    >
-                        {child}
-                    </Slide>
-                ))}
-            </Viewport>
-            <Navigation>
+        <div
+            className={clsx(
+                container,
+                hasMultipleItemsSlide ? threeItemsSlide : null
+            )}
+        >
+            <div className={viewport} ref={emblaRef}>
+                <div className={slideWrapper}>
+                    {React.Children.map(children, (child, index) => (
+                        <div
+                            className={clsx(
+                                slide,
+                                hasFullWidthSlide ? oneContentSlide : null
+                            )}
+                            key={index}
+                        >
+                            {child}
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <div className={navigation}>
                 {hasArrow ? (
-                    <Arrow
-                        onClick={onArrowClick('left')}
-                        disabled={isLeftArrowDisabled}
+                    <button
+                        onClick={onPrevButtonClick}
+                        disabled={prevBtnDisabled}
                         aria-label="previous slide"
+                        className={arrow}
                     >
-                        <ChevronLeftIcon
-                            className="carousel-chevron-icon"
-                            color={arrowColor}
-                        />
-                    </Arrow>
+                        <ChevronLeftIcon color={arrowColor} />
+                    </button>
                 ) : null}
                 {React.Children.count(children) > 1 ? (
-                    <Dots>
-                        {React.Children.map(children, (_, index) => (
-                            <DotWrapper
-                                $isActive={currentSlide === index}
+                    <ul className={dots}>
+                        {scrollSnaps.map((_, index) => (
+                            <li
+                                className={clsx(
+                                    dotWrapper,
+                                    selectedIndex === index ? dotSelected : null
+                                )}
                                 key={`${rest['aria-label']}-dot-${index}}`}
                             >
-                                <Dot onClick={() => handleDotClick(index)} />
-                            </DotWrapper>
+                                <CircleIcon
+                                    className={dot}
+                                    onClick={() => onDotButtonClick(index)}
+                                />
+                            </li>
                         ))}
-                    </Dots>
+                    </ul>
                 ) : null}
                 {hasArrow ? (
-                    <Arrow
-                        onClick={onArrowClick('right')}
-                        disabled={isRightArrowDisabled}
+                    <button
+                        onClick={onNextButtonClick}
+                        disabled={nextBtnDisabled}
                         aria-label="next slide"
+                        className={arrow}
                     >
-                        <ChevronRightIcon
-                            className="carousel-chevron-icon"
-                            color={arrowColor}
-                        />
-                    </Arrow>
+                        <ChevronRightIcon color={arrowColor} />
+                    </button>
                 ) : null}
-            </Navigation>
-        </Container>
+            </div>
+        </div>
     );
 };