Fasih: optimised carousel and auto typing (#5274)

* chore: optimized carousel and auto typing * fix: fix images issues * fix: updated formate and removed one breakpoint * chore: removed breakpoint prop * chore: updated state name * chore: replaced auto with png --------- Co-authored-by: Fasih Ali <[email protected]> Co-authored-by: Fasih Ali <[email protected]>
binary-com · Oct 20, 2023 · edc4848 · edc4848 · vercel · Oct 20, 2023
1 parent 10ef6f0
commit edc4848
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 104 deletions.
diff --git a/package.json b/package.json
@@ -70,7 +70,6 @@
         "rxjs": "^7.8.0",
         "sass": "^1.58.3",
         "swiper": "^9.1.1",
-        "typewriter-effect": "^2.19.0",
         "use-query-params": "^1.2.3",
         "usehooks-ts": "^2.9.1",
         "webpack": "^5.65.0",

diff --git a/src/features/components/molecules/slide-show/index.tsx b/src/features/components/molecules/slide-show/index.tsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect, ReactElement } from 'react'
+import * as styles from './slide-show.module.scss'
+import dclsx from 'features/utils/dclsx'
+
+type SlideshowItemProps = {
+    key: string
+    image: ReactElement
+}
+type SlideshowItemArrayProps = {
+    items: SlideshowItemProps[]
+}
+
+const Slideshow = ({ items }: SlideshowItemArrayProps) => {
+    const [current_image_index, setCurrentImageIndex] = useState(0)
+
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            setCurrentImageIndex((prevIndex) => (prevIndex + 1) % items.length)
+        }, 2500) // Adjust the interval between slides here (in milliseconds)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [items.length])
+
+    return (
+        <div className={dclsx(styles.slideshow)}>
+            {items.map((item, index) => (
+                <div
+                    className={dclsx(
+                        styles.slide,
+                        ` ${index === current_image_index ? styles.fadeIn : styles.fadeOut}`,
+                    )}
+                    key={item.key}
+                >
+                    {item.image}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default Slideshow
diff --git a/src/features/components/molecules/slide-show/slide-show.module.scss b/src/features/components/molecules/slide-show/slide-show.module.scss
@@ -0,0 +1,23 @@
+.slideshow {
+    position: relative;
+    width: 100vh;
+    height: 100vw;
+    overflow: hidden;
+}
+
+.slide {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+
+    &.fadeIn {
+        opacity: 1;
+    }
+
+    &.fadeOut {
+        opacity: 0;
+    }
+}
diff --git a/src/features/pages/home/hero/content/hero-content.module.scss b/src/features/pages/home/hero/content/hero-content.module.scss
@@ -21,3 +21,34 @@ html:not([lang='en']) .hero_content_title {
         max-inline-size: 75%;
     }
 }
+.text {
+    block-size: 6rem;
+    overflow: hidden;
+}
+
+.wrapper {
+    animation: slide-text 25s steps(1, end)  infinite;
+}
+
+.wrapper p {
+    block-size: 6rem;
+    line-height: 5.2rem;
+    margin: 1rem 0;
+    overflow: hidden;
+    white-space: nowrap;
+    animation: typing-erase 5s steps(80, end) infinite;
+}
+
+@keyframes typing-erase {
+    0% { width: 0 }
+    50%, 70% { width: 100% }
+    90%, 100% { width: 0 }
+}
+
+@keyframes slide-text {
+    0%, 20% { transform: translateY(-1rem) }
+    20%, 40% { transform: translateY(-8rem) }
+    40%, 60% { transform: translateY(-15rem) }
+    60%, 80% { transform: translateY(-22rem) }
+    80%, 100% { transform: translateY(-29rem) }
+}
diff --git a/src/features/pages/home/hero/content/hero-features.carousel.tsx b/src/features/pages/home/hero/content/hero-features.carousel.tsx
@@ -1,32 +1,30 @@
 import React from 'react'
-import Typewriter from 'typewriter-effect'
-import { hero_typewriter } from './hero-content.module.scss'
+import { hero_typewriter, wrapper, text } from './hero-content.module.scss'
+import { Localize } from 'components/localization'
+import Typography from 'features/components/atoms/typography'
+import { TString } from 'types/generics'
 import dclsx from 'features/utils/dclsx'
-import { localize } from 'components/localization'
+
+const strings: TString[] = [
+    '_t_Forex_t_',
+    '_t_Cryptocurrencies_t_',
+    '_t_Stocks & indices_t_',
+    '_t_Commodities_t_',
+    '_t_Derived Indices_t_',
+]
 
 const HeroFeaturesCarousel = () => {
     return (
         <div className={hero_typewriter}>
-            <Typewriter
-                options={{
-                    strings: [
-                        localize('_t_Forex_t_'),
-                        localize('_t_Cryptocurrencies_t_'),
-                        localize('_t_Stocks & indices_t_'),
-                        localize('_t_Commodities_t_'),
-                        localize('_t_Derived Indices_t_'),
-                    ],
-                    autoStart: true,
-                    loop: true,
-                    wrapperClassName: dclsx(
-                        'heading',
-                        'heading-large',
-                        'typography-weight-bold',
-                        'typography-color-primary',
-                    ),
-                    cursorClassName: dclsx('heading', 'heading-large', 'typography-color-primary'),
-                }}
-            />
+            <Typography.Heading className={text} as="h3" size="large" weight="bold" color="primary">
+                <div className={wrapper}>
+                    {strings.map((string) => (
+                        <p key={string} className={dclsx('typography-font-UBUNTU')}>
+                            <Localize translate_text={string} />
+                        </p>
+                    ))}
+                </div>
+            </Typography.Heading>
         </div>
     )
 }

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
@@ -1,47 +1,10 @@
 import React from 'react'
-import loadable from '@loadable/component'
-import { StaticImage } from 'gatsby-plugin-image'
-import pMinDelay from 'p-min-delay'
 import HomeHeroContent from './content'
-import SliderWrapper from './slider/slider-wrapper'
+import HomeHeroSlider from './slider'
 import Flex from 'features/components/atoms/flex-box'
 import ProductHeroContainer from 'features/components/templates/hero-banners/product'
-import useRegion from 'components/hooks/use-region'
-
-const HomeHeroSlider = loadable(() => pMinDelay(import('./slider'), 4000), {
-    fallback: (
-        <SliderWrapper>
-            <StaticImage
-                objectFit="fill"
-                src="../../../../images/common/home/hero_1.png"
-                alt="person-hero-1"
-                formats={['avif', 'webp', 'auto']}
-                loading="eager"
-                quality={50}
-                placeholder="blurred"
-            />
-        </SliderWrapper>
-    ),
-})
-
-const HomeHeroSliderEu = loadable(() => pMinDelay(import('./slider'), 4000), {
-    fallback: (
-        <SliderWrapper>
-            <StaticImage
-                objectFit="fill"
-                src="../../../../images/common/home/eu_hero_person_5.png"
-                alt="person-hero-1"
-                formats={['avif', 'webp', 'auto']}
-                loading="eager"
-                quality={50}
-                placeholder="blurred"
-            />
-        </SliderWrapper>
-    ),
-})
 
 const HomeHero = () => {
-    const { is_eu } = useRegion()
     return (
         <ProductHeroContainer
             container="fixed"
@@ -64,7 +27,7 @@ const HomeHero = () => {
                 }}
             >
                 <HomeHeroContent />
-                {is_eu ? <HomeHeroSliderEu /> : <HomeHeroSlider />}
+                <HomeHeroSlider />
             </Flex.Box>
         </ProductHeroContainer>
     )

diff --git a/src/features/pages/home/hero/slider/index.tsx b/src/features/pages/home/hero/slider/index.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react'
 import { StaticImage } from 'gatsby-plugin-image'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Autoplay, EffectFade } from 'swiper'
 import SliderWrapper from './slider-wrapper'
 import useRegion from 'components/hooks/use-region'
+import Slideshow from 'features/components/molecules/slide-show'
 
 const HomeHeroSlider = () => {
     const { is_eu } = useRegion()
@@ -17,8 +16,8 @@ const HomeHeroSlider = () => {
                         objectFit="fill"
                         src="../../../../../images/common/home/hero_3.png"
                         alt="person-hero-3"
-                        formats={['avif', 'webp', 'auto']}
-                        placeholder="none"
+                        formats={['avif', 'auto']}
+                        placeholder="blurred"
                         quality={75}
                     />
                 ),
@@ -30,24 +29,24 @@ const HomeHeroSlider = () => {
                         objectFit="fill"
                         src="../../../../../images/common/home/hero_4.png"
                         alt="person-hero-4"
-                        formats={['avif', 'webp', 'auto']}
-                        placeholder="none"
+                        formats={['avif', 'auto']}
+                        placeholder="blurred"
                     />
                 ),
             },
         ]
         if (!is_eu) {
-            slide_images.push(
+            slide_images.unshift(
                 {
                     key: 'hero2',
                     image: (
                         <StaticImage
                             objectFit="fill"
                             src="../../../../../images/common/home/hero_2.png"
                             alt="person-hero-2"
-                            formats={['avif', 'webp', 'auto']}
+                            formats={['avif', 'auto']}
                             loading="eager"
-                            placeholder="none"
+                            placeholder="blurred"
                         />
                     ),
                 },
@@ -58,24 +57,24 @@ const HomeHeroSlider = () => {
                             objectFit="fill"
                             src="../../../../../images/common/home/hero_1.png"
                             alt="person-hero-1"
-                            formats={['avif', 'webp', 'auto']}
+                            formats={['avif', 'auto']}
                             quality={50}
-                            placeholder="none"
+                            placeholder="blurred"
                         />
                     ),
                 },
             )
         } else {
-            slide_images.push({
+            slide_images.unshift({
                 key: 'hero_eu_1',
                 image: (
                     <StaticImage
                         objectFit="fill"
                         src="../../../../../images/common/home/eu_hero_person_5.png"
                         alt="person-hero-1"
-                        formats={['avif', 'webp', 'auto']}
+                        formats={['avif', 'auto']}
                         quality={50}
-                        placeholder="none"
+                        placeholder="blurred"
                     />
                 ),
             })
@@ -85,23 +84,7 @@ const HomeHeroSlider = () => {
 
     return (
         <SliderWrapper>
-            <Swiper
-                speed={1500}
-                effect={'fade'}
-                slidesPerView={1}
-                fadeEffect={{
-                    crossFade: true,
-                }}
-                direction="horizontal"
-                modules={[EffectFade, Autoplay]}
-                autoplay={{
-                    delay: 2000,
-                }}
-            >
-                {items.map((slide) => (
-                    <SwiperSlide key={slide.key}>{slide.image}</SwiperSlide>
-                ))}
-            </Swiper>
+            <Slideshow items={items} />
         </SliderWrapper>
     )
 }