chore(landingpage): styling of landing page (#1147)

* chore(landingpage): styling of landingpae * chore(ladningpage): added styling and increased size of header logo * chore(landingpage): styling of landingpage * chore(landingpage): css cleanup * chore(landingpage): css cleanup * feat(landing): change css structure * feat(header): add classNames property * chore(landingpage): rename ladningpage pictures --------- Co-authored-by: Ferdinand Løberg <ferdloeb@gmail.com>
entur · Jul 25, 2023 · 77f0fb7 · 77f0fb7
1 parent b11da93
commit 77f0fb7
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 20 deletions.
diff --git a/next-tavla/pages/index.tsx b/next-tavla/pages/index.tsx
@@ -1,14 +1,13 @@
-import { Contrast } from '@entur/layout'
 import { Landing } from '../src/Admin/scenarios/Landing'
 import classes from 'styles/pages/landing.module.css'
 import { Header } from 'components/Header'
 
 function LandingPage() {
     return (
-        <Contrast className={classes.root}>
-            <Header />
+        <div className={classes.root}>
+            <Header className={classes.header} />
             <Landing />
-        </Contrast>
+        </div>
     )
 }
 

diff --git a/next-tavla/src/Admin/scenarios/Landing/index.tsx b/next-tavla/src/Admin/scenarios/Landing/index.tsx
@@ -1,9 +1,14 @@
 import { Button } from '@entur/button'
-import { Heading1, Heading2 } from '@entur/typography'
+import { Heading1, ListItem, Paragraph, UnorderedList } from '@entur/typography'
 import classes from './styles.module.css'
 import { addBoardSettings } from 'utils/firebase'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
+import Image from 'next/image'
+import landingImage from 'assets/illustrations/Tavla-illustration.png'
+import tavla from 'assets/illustrations/Tavla-screenshot.png'
+import { Contrast } from '@entur/layout'
+import classNames from 'classnames'
 
 function Landing() {
     const router = useRouter()
@@ -19,19 +24,74 @@ function Landing() {
 
     return (
         <div className={classes.container}>
-            <Heading1>Entur Tavla</Heading1>
-            <Heading2>Her kan du lage din egen tavle</Heading2>
+            <Contrast className={classes.centeredContainer}>
+                <div className={classes.headingContainer}>
+                    <Heading1>Lag din egen avgangstavle</Heading1>
+                    <Heading1 className={classes.subheading}>
+                        for reisende
+                    </Heading1>
 
-            <Button
-                onClick={handleCreateNewBoard}
-                variant="primary"
-                disabled={loading}
-                loading={loading}
-            >
-                Opprett ny tavle
-            </Button>
+                    <Button
+                        onClick={handleCreateNewBoard}
+                        variant="primary"
+                        disabled={loading}
+                        loading={loading}
+                        width="fluid"
+                        className={classes.button}
+                    >
+                        Opprett ny tavle
+                    </Button>
+                </div>
+                <div className={classNames(classes.content, classes.topImage)}>
+                    <Image
+                        src={landingImage}
+                        alt="illustration"
+                        className={classes.image}
+                    />
+                </div>
+            </Contrast>
+            <div className={classes.bottomContainer}>
+                <div
+                    className={classNames(
+                        classes.centeredContainer,
+                        classes.bottomContent,
+                    )}
+                >
+                    <div className={classes.content}>
+                        <Image
+                            src={tavla}
+                            alt="illustration"
+                            className={classes.image}
+                        />
+                    </div>
+                    <div className={classes.content}>
+                        <Heading1>Hva er Tavla?</Heading1>
+
+                        <Paragraph>
+                            Tavla er en nettside som viser avgangene til all
+                            offentlig transport i Norge. Med Tavla kan du enkelt
+                            sette opp en avgangstavle fra de stoppestedene du
+                            ønsker å se, i sanntid.
+                        </Paragraph>
+                        <Paragraph margin="none">
+                            Du kan f.eks. lage avgangstavler for:
+                        </Paragraph>
+                        <UnorderedList className={classes.list}>
+                            <ListItem>Holdeplasser</ListItem>
+                            <ListItem>Knutepunkter</ListItem>
+                        </UnorderedList>
+                        <Paragraph>
+                            Ved å samle og tydeliggjøre viktig informasjon på
+                            ett sted kan Tavla gjøre det enklere for reisende å
+                            bruke det kollektivtrafikktilbudet som finnes. Hver
+                            avgangstavle er knyttet til en lenke som kan brukes
+                            til å sende eller vise den fram der det passer deg.
+                            Trykk på “Opprett ny tavle” for å teste det ut!
+                        </Paragraph>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }
-
 export { Landing }
diff --git a/next-tavla/src/Admin/scenarios/Landing/styles.module.css b/next-tavla/src/Admin/scenarios/Landing/styles.module.css
@@ -1,6 +1,59 @@
 .container {
     display: flex;
-    align-items: center;
     flex-direction: column;
-    gap: 3em;
+    align-items: center;
+
+    flex: 1;
+}
+
+.content {
+    width: 50%;
+}
+
+.centeredContainer {
+    display: flex;
+    width: 100%;
+    max-width: 90em;
+    justify-content: space-between;
+    padding: 5em 2em;
+}
+
+.image {
+    width: 100%;
+    height: auto;
+}
+
+.topImage {
+    width: 30%;
+}
+
+.bottomContainer {
+    background-color: white;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    flex: 1;
+}
+
+.button {
+    width: 50%;
+}
+
+.list {
+    padding-left: 2em;
+    color: var(--primary-text-color); /* Variabel fra designsystemet */
+}
+
+.subheading {
+    color: var(--highlight-text-color);
+    margin-bottom: 2em;
+}
+
+.headingContainer {
+    flex: 1;
+}
+
+.bottomContent {
+    gap: 4em;
 }
diff --git a/next-tavla/src/Shared/assets/illustrations/Tavla-illustration.png b/next-tavla/src/Shared/assets/illustrations/Tavla-illustration.png
diff --git a/next-tavla/src/Shared/assets/illustrations/Tavla-screenshot.png b/next-tavla/src/Shared/assets/illustrations/Tavla-screenshot.png
diff --git a/next-tavla/src/Shared/components/Header/index.tsx b/next-tavla/src/Shared/components/Header/index.tsx
@@ -4,10 +4,19 @@ import Image from 'next/image'
 import classes from './styles.module.css'
 import { TTheme } from 'types/settings'
 import { Clock } from 'components/Clock'
+import classNames from 'classnames'
 
-function Header({ theme, showClock }: { theme?: TTheme; showClock?: boolean }) {
+function Header({
+    theme,
+    showClock,
+    className,
+}: {
+    theme?: TTheme
+    showClock?: boolean
+    className?: string
+}) {
     return (
-        <div className={classes.headerWrapper}>
+        <div className={classNames(classes.headerWrapper, className)}>
             <div>
                 {theme === 'light' ? (
                     <Image

diff --git a/next-tavla/src/Shared/components/Header/styles.module.css b/next-tavla/src/Shared/components/Header/styles.module.css
@@ -1,6 +1,7 @@
 .logo {
     height: auto;
     width: 7em;
+    min-width: 185px;
 }
 
 .tagText {

diff --git a/next-tavla/src/Shared/styles/pages/landing.module.css b/next-tavla/src/Shared/styles/pages/landing.module.css
@@ -1,3 +1,9 @@
 .root {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
     padding: 1em;
 }
diff --git a/next-tavla/src/Shared/styles/themes/default.css b/next-tavla/src/Shared/styles/themes/default.css
@@ -4,6 +4,8 @@
     --tertiary-background-color: var(--colors-blues-blue30);
     --main-text-color: var(--colors-brand-white);
 
+    --highlight-text-color: var(--colors-brand-coral);
+
     --primary-button-color: var(--colors-data-contrast-lavender);
     --primary-button-hover-color: #b6bee5;