feat(landing): add landing page image carousel (#1662)

* feat(landing): add image carousel with illustrations to match word carousel

* fix(landing): remove automatic transition of previewCarousel

* chore(landing): update gym illustration to correct version

tavla/app/components/ImageCarousel/ImageCarousel.tsx

@@ -0,0 +1,41 @@
+'use client'
+import { useState, useEffect } from 'react'
+import receptionImage from 'assets/illustrations/Reception_illustration.svg'
+import gymImage from 'assets/illustrations/Gym_illustration.svg'
+import libraryImage from 'assets/illustrations/Library_illustration.svg'
+import schoolImage from 'assets/illustrations/School_illustration.svg'
+import Image from 'next/image'
+
+function ImageCarousel() {
+    const images = [receptionImage, schoolImage, libraryImage, gymImage]
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [fade, setFade] = useState(true)
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFade(false)
+
+            setTimeout(() => {
+                setCurrentImageIndex((currentImageIndex + 1) % images.length)
+                setFade(true)
+            }, 1000)
+        }, 4000)
+
+        return () => clearInterval(interval)
+    }, [currentImageIndex, images.length])
+
+    return (
+        <div
+            className={`flex flex-row self-center md:scale-90 overflow-hidden transform transition-all duration-1000 ease-in-out ${
+                fade ? 'opacity-100' : 'opacity-0'
+            }`}
+        >
+            <Image
+                src={images[currentImageIndex]}
+                alt="Et bilde av en avgangstavle"
+            />
+        </div>
+    )
+}
+
+export { ImageCarousel }

tavla/app/(admin)/components/PreviewCarousel/index.tsx → tavla/app/components/PreviewCarousel/index.tsx

@@ -6,7 +6,7 @@ import { Board } from 'Board/scenarios/Board'
 import { Footer } from 'components/Footer'
 import { Header } from 'components/Header'
 import { usePostHog } from 'posthog-js/react'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { TBoard } from 'types/settings'
 
 const CarouselIndicators = ({
@@ -38,20 +38,8 @@ const CarouselIndicators = ({
 
 function PreviewCarousel({ boards }: { boards: TBoard[] }) {
     const [boardIndex, setBoardIndex] = useState(0)
-    const [fade, setFade] = useState(true)
     const posthog = usePostHog()
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setFade(false)
-            setTimeout(() => {
-                setBoardIndex((boardIndex + 1) % boards.length)
-                setFade(true)
-            }, 500)
-        }, 4500)
-        return () => clearInterval(interval)
-    }, [boardIndex, boards])
-
     const nextSlide = () => {
         posthog.capture('CAROUSEL_ARROW_BTN')
         setBoardIndex((prevIndex) =>
@@ -73,7 +61,7 @@ function PreviewCarousel({ boards }: { boards: TBoard[] }) {
     const currentBoard = boards[boardIndex] ?? undefined
     if (!currentBoard) return null
     return (
-        <div className="py-10">
+        <>
             <div className="flex flex-row">
                 <div className="my-auto hidden md:block ml-2">
                     <IconButton
@@ -88,11 +76,8 @@ function PreviewCarousel({ boards }: { boards: TBoard[] }) {
                     data-theme={currentBoard.theme ?? 'dark'}
                 >
                     <div
-                        aria-label="Eksempel på avgangstavler"
-                        className={`transform transition-all duration-500 ease-in-out ${
-                            fade ? 'opacity-100' : 'opacity-0'
-                        }`}
                         style={{ display: 'flex' }}
+                        aria-label="Eksempel på avgangstavler"
                     >
                         <div
                             className="previewContainer text-xs"
@@ -121,7 +106,7 @@ function PreviewCarousel({ boards }: { boards: TBoard[] }) {
                 activeIndex={boardIndex}
                 onClick={goToSlide}
             />
-        </div>
+        </>
     )
 }
 export { PreviewCarousel }

tavla/app/components/WordCarousel.tsx → tavla/app/components/WordCarousel/WordCarousel.tsx

@@ -3,7 +3,7 @@ import { Heading1 } from '@entur/typography'
 import { useState, useEffect } from 'react'
 
 function WordCarousel() {
-    const words = ['kontoret', 'biblioteket', 'skolen', 'treningssenteret']
+    const words = ['resepsjonen', 'biblioteket', 'skolen', 'treningssenteret']
     const [currentWordIndex, setCurrentWordIndex] = useState(0)
     const [fade, setFade] = useState(true)
 

tavla/app/page.tsx

@@ -8,17 +8,16 @@ import {
     Paragraph,
     UnorderedList,
 } from '@entur/typography'
-import { PreviewCarousel } from './(admin)/components/PreviewCarousel'
+import { PreviewCarousel } from './components/PreviewCarousel'
 import { previewBoards } from '../src/Shared/utils/previewBoards'
 import { Welcome } from './components/Welcome'
 import { Link as EnturLink } from '@entur/typography'
 import { CreateUserButtonLanding } from './components/CreateUserButtonLanding'
 import { DemoButton } from './components/DemoButtonLanding'
 import { cookies } from 'next/headers'
-import { WordCarousel } from './components/WordCarousel'
+import { WordCarousel } from './components/WordCarousel/WordCarousel'
 import { verifySession } from './(admin)/utils/firebase'
-import landingImage from 'assets/illustrations/Landing_illustration.svg'
-import Image from 'next/image'
+import { ImageCarousel } from './components/ImageCarousel/ImageCarousel'
 
 export const metadata: Metadata = {
     title: 'Forside | Entur Tavla',
@@ -46,14 +45,12 @@ async function Landing() {
                             <DemoButton />
                         </div>
                     </div>
-                    <div className="flex flex-row self-center scale-[0.8] lg:scale-90">
-                        <Image src={landingImage} alt="En avgangstavle" />
-                    </div>
+                    <ImageCarousel />
                 </div>
             </div>
 
             <div className="flex flex-col mx-auto items-center justify-start py-4 container overflow-hidden pb-10">
-                <div className="flex flex-col items-center justify-start gap-4 py-4 w-full">
+                <div className="flex flex-col items-center justify-start gap-4 py-14 w-full">
                     <PreviewCarousel boards={previewBoards} />
 
                     <div className="xl:w-1/2">