Add Crossroad for root page (#474)

resolve #132: Add Crossroad for root page

next.config.ts

@@ -1,17 +1,6 @@
 import type {NextConfig} from 'next'
 
 const nextConfig: NextConfig = {
-  // docs: https://nextjs.org/docs/api-reference/next.config.js/redirects
-  async redirects() {
-    return [
-      // redirect home stranky na strom podstranku
-      {
-        source: '/',
-        destination: '/strom',
-        permanent: true,
-      },
-    ]
-  },
   // docs: https://nextjs.org/docs/api-reference/next.config.js/rewrites
   async rewrites() {
     return [

src/components/Crossroad/Crossroad.tsx

@@ -0,0 +1,54 @@
+import {Box, Stack, Typography} from '@mui/material'
+import Grid from '@mui/material/Unstable_Grid2'
+import React, {useState} from 'react'
+
+import Strom from '@/svg/strom.svg'
+
+import {Button} from '../Clickable/Button'
+import {Link} from '../Clickable/Link'
+
+export const Crossroad: React.FC = () => {
+  const [isProblem, setIsProblem] = useState(false)
+
+  const crossroadItems = [
+    {label: 'STROM', url: 'strom'},
+    {label: 'Matik', url: 'matik'},
+    {label: 'Malynár', url: 'malynar'},
+    {label: 'Kôš', url: 'https://kos.strom.sk'},
+    {label: 'Máš problém', url: 'https://masproblem.strom.sk'},
+  ]
+  return !isProblem ? (
+    <Stack justifyContent="center" alignItems="center" height="100dvh" sx={{bgcolor: 'black'}}>
+      <Typography variant="crossroadButton" sx={{color: 'white'}}>
+        Máš problém?
+      </Typography>
+      <Stack spacing={2} direction="row">
+        <Link variant="crossroadButton" href="https://r.mtdv.me/articles/mam-problem" invertColors>
+          Áno
+        </Link>
+        <Button variant="crossroadButton" onClick={() => setIsProblem(true)} invertColors>
+          Nie
+        </Button>
+      </Stack>
+    </Stack>
+  ) : (
+    <Stack alignItems="stretch" height="100vh" sx={{bgcolor: 'black'}}>
+      <Grid container disableEqualOverflow columnSpacing={{xs: 2, md: 3, lg: 4}} mt={'30vh'} flexGrow={1}>
+        <Grid xs={0} md={3} display={{xs: 'none', md: 'flex'}} height="70dvh" justifyContent="end">
+          <Box>
+            <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
+          </Box>
+        </Grid>
+        <Grid xs={12} md={9}>
+          <Stack gap={{xs: 1, sm: 2}}>
+            {crossroadItems.map(({label, url}) => (
+              <Link key={label} variant="crossroadButton" href={url} invertColors>
+                {label}
+              </Link>
+            ))}
+          </Stack>
+        </Grid>
+      </Grid>
+    </Stack>
+  )
+}

src/pages/index.tsx

@@ -0,0 +1,7 @@
+import {NextPage} from 'next'
+
+import {Crossroad} from '@/components/Crossroad/Crossroad'
+
+const Page: NextPage = () => <Crossroad />
+
+export default Page

src/theme.ts

@@ -8,6 +8,7 @@ declare module '@mui/material/styles' {
     button1: React.CSSProperties
     button2: React.CSSProperties
     button3: React.CSSProperties
+    crossroadButton: React.CSSProperties
     seminarButton: React.CSSProperties
     postTitle: React.CSSProperties
     postBody: React.CSSProperties
@@ -25,6 +26,7 @@ declare module '@mui/material/styles' {
     button1?: React.CSSProperties
     button2?: React.CSSProperties
     button3?: React.CSSProperties
+    crossroadButton?: React.CSSProperties
     seminarButton?: React.CSSProperties
     postTitle?: React.CSSProperties
     postBody?: React.CSSProperties
@@ -44,6 +46,7 @@ declare module '@mui/material/Typography' {
     button1: true
     button2: true
     button3: true
+    crossroadButton: true
     seminarButton: true
     postTitle: true
     postBody: true
@@ -142,6 +145,12 @@ const _theme = createTheme({
       fontWeight: 800,
       fontStyle: 'italic',
     },
+    crossroadButton: {
+      ...font.style,
+      textTransform: 'uppercase',
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
     seminarButton: {
       ...font.style,
       textTransform: 'uppercase',
@@ -196,6 +205,7 @@ const _theme = createTheme({
           button1: 'span',
           button2: 'span',
           button3: 'span',
+          crossroadButton: 'span',
           seminarButton: 'span',
           postTitle: 'h1',
           postBody: 'span',
@@ -339,6 +349,16 @@ export const theme: Theme = {
       [xl]: {fontSize: pxToRem(14)},
       lineHeight: 1.5,
     },
+    crossroadButton: {
+      ..._theme.typography.button1,
+      // original Figma fontSize: 50px
+      fontSize: pxToRem(20),
+      [sm]: {fontSize: pxToRem(32)},
+      [md]: {fontSize: pxToRem(38)},
+      [lg]: {fontSize: pxToRem(44)},
+      [xl]: {fontSize: pxToRem(50)}, // design
+      lineHeight: 1.5,
+    },
     seminarButton: {
       ..._theme.typography.seminarButton,
       // original Figma fontSize: 30px, mobile non-existent