Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(landing): add posthog to landing page #1630

Merged
merged 5 commits into from
Sep 5, 2024
Merged

feat(landing): add posthog to landing page #1630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
213d329
feat(landing): added posthog captures to landing page buttons
SelmaBergstrand Sep 2, 2024
1b092e8
feat(navbar): add posthog logging to login-button in nav-bar
SelmaBergstrand Sep 3, 2024
00ae547
chore(landing): rename LandingBanner component
SelmaBergstrand Sep 3, 2024
a26baae
chore(landing): remove unused <> tag
SelmaBergstrand Sep 3, 2024
f613940
chore(landing): separate buttons into individual components to render…
SelmaBergstrand Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion tavla/app/(admin)/components/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,15 @@ function Footer() {
<div className="flex flex-col gap-4">
<Heading3>Informasjon</Heading3>
<div>
<EnturLink href="/demo" as={Link}>
<EnturLink
href="/demo"
as={Link}
onClick={() =>
posthog.capture('DEMO_FROM_FOOTER', {
type: 'footer',
})
}
>
Prøv Tavla
</EnturLink>
</div>
Expand Down
5 changes: 5 additions & 0 deletions tavla/app/(admin)/components/Login/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ import { Start } from './Start'
import { Create } from './Create'
import { usePageParam } from 'app/(admin)/hooks/usePageParam'
import { Reset } from './Reset'
import { usePostHog } from 'posthog-js/react'

type TLoginPage = 'start' | 'email' | 'create' | 'reset'

function Login({ loggedIn }: { loggedIn: boolean }) {
const router = useRouter()
const pathname = usePathname()
const posthog = usePostHog()

const { open, hasPage, pageParam } = usePageParam('login')

Expand All @@ -39,6 +41,9 @@ function Login({ loggedIn }: { loggedIn: boolean }) {
href="?login"
scroll={false}
className="gap-4 p-4"
onClick={() => {
posthog.capture('LOGIN_BTN_NAV_BAR')
}}
>
<UserIcon />
Logg inn
Expand Down
5 changes: 5 additions & 0 deletions tavla/app/(admin)/components/TopNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import { HorizontalNavBar } from './HorizontalNavBar'
import { Login } from './Login'
import { TopNavigationItem } from '@entur/menu'
import { usePathname } from 'next/navigation'
import { usePostHog } from 'posthog-js/react'

function TopNavigation({ loggedIn }: { loggedIn: boolean }) {
const pathname = usePathname()
const posthog = usePostHog()
return (
<nav className="container flex flex-row justify-between items-center py-8">
<Link href="/" aria-label="Tilbake til landingssiden">
Expand All @@ -24,6 +26,9 @@ function TopNavigation({ loggedIn }: { loggedIn: boolean }) {
active={pathname?.includes('/demo')}
as={Link}
href="/demo"
onClick={() => {
posthog.capture('DEMO_FROM_NAV_BAR_BTN')
}}
>
Prøv Tavla
</TopNavigationItem>
Expand Down
22 changes: 22 additions & 0 deletions tavla/app/components/CreateUserButtonLanding/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use client'
import { Button } from '@entur/button'
import Link from 'next/link'
import { usePostHog } from 'posthog-js/react'

function CreateUserButtonLanding() {
const posthog = usePostHog()
return (
<Button
variant="success"
size="medium"
as={Link}
href="?login=create"
onClick={() => {
posthog.capture('CREATE_USER_BTN_FROM_LANDING')
}}
>
Opprett bruker
</Button>
)
}
export { CreateUserButtonLanding }
22 changes: 22 additions & 0 deletions tavla/app/components/DemoButtonLanding/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use client'
import { Button } from '@entur/button'
import Link from 'next/link'
import { usePostHog } from 'posthog-js/react'

function DemoButton() {
const posthog = usePostHog()
return (
<Button
variant="secondary"
size="medium"
as={Link}
href="demo"
onClick={() => {
posthog.capture('DEMO_BTN_FROM_LANDING')
}}
>
Test ut Tavla
</Button>
)
}
export { DemoButton }
259 changes: 115 additions & 144 deletions tavla/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import landingImage from 'assets/illustrations/Landing_illustration.svg'
import { Metadata } from 'next'
import Image from 'next/image'
import {
Heading1,
Heading2,
Expand All @@ -13,11 +11,13 @@ import {
import { Preview } from './(admin)/components/Preview'
import { previewBoards } from '../src/Shared/utils/previewBoards'
import { Welcome } from './components/Welcome'
import { Button } from '@entur/button'
import Link from 'next/link'
import { verifySession } from './(admin)/utils/firebase'
import { cookies } from 'next/headers'
import { Link as EnturLink } from '@entur/typography'
import { CreateUserButtonLanding } from './components/CreateUserButtonLanding'
import { DemoButton } from './components/DemoButtonLanding'
import { cookies } from 'next/headers'
import { verifySession } from './(admin)/utils/firebase'
import landingImage from 'assets/illustrations/Landing_illustration.svg'
import Image from 'next/image'

export const metadata: Metadata = {
title: 'Forside | Entur Tavla',
Expand All @@ -27,153 +27,124 @@ async function Landing() {
const session = cookies().get('session')?.value
const loggedIn = (await verifySession(session)) !== null
return (
<>
<main>
<Welcome />
<div className="flex flex-col justify-center pb-10">
<div className="bg-secondary">
<div className="flex flex-col container py-12 gap-10 xl:flex-row">
<div className="flex flex-col xl:w-1/2 md:pl-20">
<Heading1 margin="none">
Lag en avgangstavle for
</Heading1>
<Heading1
className="italic !text-highlight !font-normal"
margin="bottom"
>
kontoret
</Heading1>
<LeadParagraph className="w-full">
Tavla er en gratis tjeneste som gjør det
enkelt å sette opp avgangstavler for
offentlig transport i hele Norge! Vis
kollektivtilbudet i nærheten og hjelp folk
til å planlegge sin neste kollektivreise.
</LeadParagraph>
<div className="flex md:flex-row flex-col md:items-end w-full gap-4 mt-5">
{!loggedIn && (
<Button
variant="success"
size="medium"
as={Link}
href="?login=create"
>
Opprett bruker
</Button>
)}
<Button
variant="secondary"
size="medium"
as={Link}
href="demo"
>
Test ut Tavla
</Button>
</div>
</div>
<div className="flex flex-row mx-auto xl:w-2/5">
<Image
src={landingImage}
alt="En avgangstavle"
/>
</div>
<main>
<Welcome />
<div className="bg-secondary">
<div className="flex flex-col container py-12 gap-10 xl:flex-row">
<div className="flex flex-col xl:w-1/2 md:pl-20">
<Heading1 margin="none">
Lag en avgangstavle for
</Heading1>
<Heading1
className="italic !text-highlight !font-normal"
margin="bottom"
>
kontoret
</Heading1>
<LeadParagraph className="w-full">
Tavla er en gratis tjeneste som gjør det enkelt å
sette opp avgangstavler for offentlig transport i
hele Norge! Vis kollektivtilbudet i nærheten og
hjelp folk til å planlegge sin neste kollektivreise.
</LeadParagraph>
<div className="flex md:flex-row flex-col md:items-end w-full gap-4 mt-5">
{!loggedIn && <CreateUserButtonLanding />}
<DemoButton />
</div>
</div>
<div className="flex flex-row mx-auto xl:w-2/5">
<Image src={landingImage} alt="En avgangstavle" />
</div>
</div>
</div>
<div className="flex flex-col justify-center pb-10">
<div className="flex flex-col mx-auto items-center justify-start py-4 container overflow-hidden">
<div className="flex flex-col items-center justify-start gap-4 py-4 w-full">
<div
className="xl:w-1/2 h-[40vh] overflow-hidden rounded-2xl py-10 w-full"
data-theme="dark"
>
<Preview boards={previewBoards} />
</div>

<div className="flex flex-col mx-auto items-center justify-start py-4 container overflow-hidden">
<div className="flex flex-col items-center justify-start gap-4 py-4 w-full">
<div
className="xl:w-1/2 h-[40vh] overflow-hidden rounded-2xl py-10 w-full"
data-theme="dark"
>
<Preview boards={previewBoards} />
</div>

<div className="xl:w-1/2">
<Heading2>Kort om Tavla</Heading2>
<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Du kan lage avgangstavler fra alle
stoppesteder, holdeplasser,
knutepunkter, fergekaier mm. i hele
Norge. Dette gjelder for alle typer
offentlig transport, inkludert ferger,
hurtigbåter og fly.
</ListItem>
<ListItem>
Det er helt gratis å implementere og
bruke Tavla.
</ListItem>
<ListItem>
Tavla kan vises på ulike typer skjermer
og er tilpasset flere operativsystem og
oppløsninger.
</ListItem>
</UnorderedList>
<Paragraph className="pt-50 italic">
Tavla sin kildekode er tilgjengelig for alle
på{' '}
<EnturLink href="https://github.com/entur/tavla">
GitHub
</EnturLink>
. Dette gjør at du kan følge utviklingen av
produktet direkte og foreslå forbedringer
selv.
</Paragraph>
<div className="xl:w-1/2">
<Heading2>Kort om Tavla</Heading2>
<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Du kan lage avgangstavler fra alle
stoppesteder, holdeplasser, knutepunkter,
fergekaier mm. i hele Norge. Dette gjelder
for alle typer offentlig transport,
inkludert ferger, hurtigbåter og fly.
</ListItem>
<ListItem>
Det er helt gratis å implementere og bruke
Tavla.
</ListItem>
<ListItem>
Tavla kan vises på ulike typer skjermer og
er tilpasset flere operativsystem og
oppløsninger.
</ListItem>
</UnorderedList>
<Paragraph className="pt-50 italic">
Tavla sin kildekode er tilgjengelig for alle på{' '}
<EnturLink href="https://github.com/entur/tavla">
GitHub
</EnturLink>
. Dette gjør at du kan følge utviklingen av
produktet direkte og foreslå forbedringer selv.
</Paragraph>

<Heading3>
Enkelt å tilpasse og samarbeide
</Heading3>
<Heading3>Enkelt å tilpasse og samarbeide</Heading3>

<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Tilpass tekststørrelse, fargetema, logo
og hvilken informasjon som skal vises,
slik at tavlen(e) passer til dine
omgivelser og dine besøkende sine behov.
</ListItem>
<ListItem>
Velg om du vil vise hele
kollektivtilbudet fra et stoppested,
eller kun vise spesifikke linjer,
stoppesteder eller fremkomstmidler.
</ListItem>
<ListItem>
Opprett organisasjoner (mapper) for å
samle tavler og gi andre tilgang til å
administrere dem. Her kan du også velge
standardinnstillinger som vil gjelde
alle tavler i organisasjonen.
</ListItem>
</UnorderedList>
<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Tilpass tekststørrelse, fargetema, logo og
hvilken informasjon som skal vises, slik at
tavlen(e) passer til dine omgivelser og dine
besøkende sine behov.
</ListItem>
<ListItem>
Velg om du vil vise hele kollektivtilbudet
fra et stoppested, eller kun vise spesifikke
linjer, stoppesteder eller fremkomstmidler.
</ListItem>
<ListItem>
Opprett organisasjoner (mapper) for å samle
tavler og gi andre tilgang til å
administrere dem. Her kan du også velge
standardinnstillinger som vil gjelde alle
tavler i organisasjonen.
</ListItem>
</UnorderedList>

<Heading2 className="pt-8">
Eksempler på bruk
</Heading2>
<Heading3>Hoteller</Heading3>
<Paragraph>
Plasser Tavla i resepsjonsområdet slik at
gjester kan se sanntidsinformasjon om
avganger fra stoppesteder i nærheten.
</Paragraph>
<Heading3>Arbeidsplasser</Heading3>
<Paragraph>
Vis Tavla på informasjonspunkter eller
skjermer ved inngangen slik at besøkende
enkelt kan planlegge hjemreisen.
</Paragraph>
<Heading3>Kjøpesentre</Heading3>
<Paragraph>
Sett opp Tavla på sentrale steder slik at
kunder alltid har oppdatert informasjon om
offentlig transport.
</Paragraph>
</div>
<Heading2 className="pt-8">
Eksempler på bruk
</Heading2>
<Heading3>Hoteller</Heading3>
<Paragraph>
Plasser Tavla i resepsjonsområdet slik at
gjester kan se sanntidsinformasjon om avganger
fra stoppesteder i nærheten.
</Paragraph>
<Heading3>Arbeidsplasser</Heading3>
<Paragraph>
Vis Tavla på informasjonspunkter eller skjermer
ved inngangen slik at besøkende enkelt kan
planlegge hjemreisen.
</Paragraph>
<Heading3>Kjøpesentre</Heading3>
<Paragraph>
Sett opp Tavla på sentrale steder slik at kunder
alltid har oppdatert informasjon om offentlig
transport.
</Paragraph>
</div>
</div>
</div>
</main>
</>
</div>
</main>
)
}

Expand Down