diff --git a/tavla/app/components/ImageCarousel/ImageCarousel.tsx b/tavla/app/components/ImageCarousel/ImageCarousel.tsx new file mode 100644 index 000000000..41e6d45f6 --- /dev/null +++ b/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 ( +
+ Et bilde av en avgangstavle +
+ ) +} + +export { ImageCarousel } diff --git a/tavla/app/(admin)/components/PreviewCarousel/index.tsx b/tavla/app/components/PreviewCarousel/index.tsx similarity index 84% rename from tavla/app/(admin)/components/PreviewCarousel/index.tsx rename to tavla/app/components/PreviewCarousel/index.tsx index c47422368..18dc488ce 100644 --- a/tavla/app/(admin)/components/PreviewCarousel/index.tsx +++ b/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 ( -
+ <>
-
+ ) } export { PreviewCarousel } diff --git a/tavla/app/components/WordCarousel.tsx b/tavla/app/components/WordCarousel/WordCarousel.tsx similarity index 92% rename from tavla/app/components/WordCarousel.tsx rename to tavla/app/components/WordCarousel/WordCarousel.tsx index 98442f4b7..1ebe876ce 100644 --- a/tavla/app/components/WordCarousel.tsx +++ b/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) diff --git a/tavla/app/page.tsx b/tavla/app/page.tsx index bac337bdd..ca8e6ff98 100644 --- a/tavla/app/page.tsx +++ b/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() {
-
- En avgangstavle -
+
-
+
diff --git a/tavla/src/Shared/assets/illustrations/Gym_illustration.svg b/tavla/src/Shared/assets/illustrations/Gym_illustration.svg new file mode 100644 index 000000000..9418074e6 --- /dev/null +++ b/tavla/src/Shared/assets/illustrations/Gym_illustration.svg @@ -0,0 +1,272 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tavla/src/Shared/assets/illustrations/Library_illustration.svg b/tavla/src/Shared/assets/illustrations/Library_illustration.svg new file mode 100644 index 000000000..4ca179d63 --- /dev/null +++ b/tavla/src/Shared/assets/illustrations/Library_illustration.svg @@ -0,0 +1,282 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tavla/src/Shared/assets/illustrations/Landing_illustration.svg b/tavla/src/Shared/assets/illustrations/Reception_illustration.svg similarity index 100% rename from tavla/src/Shared/assets/illustrations/Landing_illustration.svg rename to tavla/src/Shared/assets/illustrations/Reception_illustration.svg diff --git a/tavla/src/Shared/assets/illustrations/School_illustration.svg b/tavla/src/Shared/assets/illustrations/School_illustration.svg new file mode 100644 index 000000000..ae9afc930 --- /dev/null +++ b/tavla/src/Shared/assets/illustrations/School_illustration.svg @@ -0,0 +1,362 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +