feat(landing): add landing page image carousel

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">