diff --git a/src/App.tsx b/src/App.tsx index ad4cee2..fdd8be8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,19 +1,13 @@ import React from 'react' -import { useTranslation } from 'react-i18next' import { Switch, Route, Redirect } from 'react-router-dom' -import { Example } from './pages/Example/Example' -import { ExampleNL } from './pages/Example/ExampleNL' +import { Example } from './pages/Example' import { Home } from './pages/Home' export function App() { - const { i18n } = useTranslation() - return ( - - {i18n.language === 'en' ? : } - + ) diff --git a/src/components/page/Menu.tsx b/src/components/page/Menu.tsx index 259dd72..dbc8ca3 100644 --- a/src/components/page/Menu.tsx +++ b/src/components/page/Menu.tsx @@ -29,13 +29,13 @@ export function Menu() { - + - + - + diff --git a/src/constants/example.ts b/src/constants/example.ts deleted file mode 100644 index 41035bc..0000000 --- a/src/constants/example.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { Link } from 'react-router-dom' -import styled from 'styled-components' -import { Colors } from '../constants/styles' -import arrowRight from '../assets/arrow-right.svg' - -export const HeadingWrapper = styled.div` - border-top: 5px solid ${Colors.Black}; - border-bottom: 5px solid ${Colors.Black}; - padding: 24px; - - @media (max-width: 1024px) { - padding: 2vw; - } - - @media (max-width: 769px) { - border-top: 3px solid ${Colors.Black}; - border-bottom: 3px solid ${Colors.Black}; - } -` - -export const Heading = styled.h1` - color: ${Colors.Black}; - font-size: calc(24px + (72 - 24) * ((100vw - 320px) / (1440 - 320))); - font-weight: normal; - text-transform: uppercase; - max-width: 1072px; - margin: 0 auto; - - @media (min-width: 1440px) { - font-size: 72px; - } -` - -export const Navigation = styled.nav` - width: 100%; - display: flex; - margin-bottom: 48px; - - @media (max-width: 769px) { - margin-bottom: 24px; - } -` - -export const HomeLink = styled(Link)` - color: ${Colors.Black}; - font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1440 - 320))); - text-transform: uppercase; - - &:hover { - text-decoration: underline; - opacity: 0.7; - } - - @media (min-width: 1440px) { - font-size: 36px; - } -` - -export const StyledPageLink = styled(Link)` - color: ${Colors.Black}; - font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1440 - 320))); - text-transform: uppercase; - position: relative; - padding-left: 32px; - - @media (max-width: 769px) { - padding-left: 24px; - } - - &:before { - content: ''; - position: absolute; - width: 30px; - height: 30px; - left: 0; - top: 50%; - transform: translateY(-50%); - background: url(${arrowRight}); - background-position: contain; - - @media (max-width: 769px) { - width: 24px; - height: 24px; - } - } - - &:hover { - text-decoration: underline; - opacity: 0.7; - } - - @media (min-width: 1440px) { - font-size: 36px; - } -` - -export const Text = styled.p` - font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1440 - 320))); - margin-bottom: 32px; - - @media (min-width: 1440px) { - font-size: 24px; - } -` diff --git a/src/constants/styles.ts b/src/constants/styles.ts index cd7d472..4fd306c 100644 --- a/src/constants/styles.ts +++ b/src/constants/styles.ts @@ -1,3 +1,7 @@ +import { Link } from 'react-router-dom' +import styled from 'styled-components' +import arrowRight from '../assets/arrow-right.svg' + export const Colors = { White: '#FFFFFF', Black: '#000000', @@ -7,3 +11,103 @@ export const Colors = { export const Fonts = { Body: 'IBM Plex Sans, Helvetica, sans-serif', } + +export const HeadingWrapper = styled.div` + border-top: 5px solid ${Colors.Black}; + border-bottom: 5px solid ${Colors.Black}; + + @media (max-width: 769px) { + border-top: 3px solid ${Colors.Black}; + border-bottom: 3px solid ${Colors.Black}; + } +` + +export const Heading = styled.h1` + color: ${Colors.Black}; + font-size: calc(24px + (72 - 24) * ((100vw - 320px) / (1440 - 320))); + font-weight: normal; + text-transform: uppercase; + max-width: 1072px; + padding: 24px; + margin: 0 auto; + + @media (min-width: 1440px) { + font-size: 72px; + } + + @media (max-width: 769px) { + padding: 24px 16px; + } +` + +export const Navigation = styled.nav` + width: 100%; + display: flex; + margin-bottom: 48px; + + @media (max-width: 769px) { + margin-bottom: 24px; + } +` + +export const HomeLink = styled(Link)` + color: ${Colors.Black}; + font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1440 - 320))); + text-transform: uppercase; + + &:hover { + text-decoration: underline; + opacity: 0.7; + } + + @media (min-width: 1440px) { + font-size: 36px; + } +` + +export const StyledPageLink = styled(Link)` + color: ${Colors.Black}; + font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1440 - 320))); + text-transform: uppercase; + position: relative; + padding-left: 32px; + + @media (max-width: 769px) { + padding-left: 24px; + } + + &:before { + content: ''; + position: absolute; + width: 30px; + height: 30px; + left: 0; + top: 50%; + transform: translateY(-50%); + background: url(${arrowRight}); + background-position: contain; + + @media (max-width: 769px) { + width: 24px; + height: 24px; + } + } + + &:hover { + text-decoration: underline; + opacity: 0.7; + } + + @media (min-width: 1440px) { + font-size: 36px; + } +` + +export const Text = styled.p` + font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1440 - 320))); + margin-bottom: 32px; + + @media (min-width: 1440px) { + font-size: 24px; + } +` diff --git a/src/pages/Example.tsx b/src/pages/Example.tsx new file mode 100644 index 0000000..28c6746 --- /dev/null +++ b/src/pages/Example.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import { Page, PageContent } from '../components' +import { Heading, HeadingWrapper, HomeLink, Navigation, StyledPageLink, Text } from '../constants/styles' + +export function Example() { + const { t } = useTranslation() + + return ( + + + {t('example_heading')} + + + + {t('home')} + {t('about')} + +
+
+ {t('example_text_1')} + {t('example_text_2')} + {t('example_text_3')} + {t('example_text_4')} +
+
+
+
+ ) +} diff --git a/src/pages/Example/Example.tsx b/src/pages/Example/Example.tsx deleted file mode 100644 index 0b70634..0000000 --- a/src/pages/Example/Example.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react' -import { Page, PageContent } from '../../components' -import { Heading, HeadingWrapper, HomeLink, Navigation, StyledPageLink, Text } from '../../constants/example' - -export function Example() { - return ( - - - People’s Culture Party - - - - Home - About - -
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci erat, eget viverra justo - egestas id. Vestibulum semper odio vitae dictum aliquam. Maecenas eget purus at ipsum viverra molestie. - Sed egestas leo in massa volutpat maximus at vel nulla. Sed vehicula accumsan mattis. Pellentesque - hendrerit consectetur arcu a condimentum. Integer tortor mauris, laoreet ut ipsum id, scelerisque - dignissim nisl. Etiam nec metus sit amet dolor vestibulum sollicitudin. Curabitur a varius mauris, quis - vestibulum dolor. Etiam vulputate nulla in velit convallis, at tincidunt lacus tincidunt. Cras sit amet - libero egestas, porttitor lacus nec, vulputate lorem. Suspendisse semper tellus sit amet cursus fermentum. - Duis sed risus in sapien fermentum feugiat. Donec nec sodales lorem.{' '} - - - - Curabitur laoreet et lorem non ultricies. Vivamus cursus neque nulla, et dignissim eros hendrerit et. - Nulla facilisi. Sed in nisi id lectus porttitor gravida. Sed lectus ante, vulputate ut odio sed, blandit - pharetra lectus. Sed porta, mauris vitae aliquet accumsan, quam metus scelerisque purus, quis vestibulum - diam ex a tortor. Mauris eu felis eu turpis placerat dapibus. Donec mauris nunc, laoreet eget est quis, - tincidunt iaculis quam. Vivamus pulvinar viverra lacus, ac pellentesque mi dictum vel. Praesent sit amet - vulputate magna. Integer semper neque lectus, eget volutpat odio auctor sit amet. Maecenas id neque - dignissim, cursus quam et, iaculis orci. Integer congue euismod velit at elementum.{' '} - - - - Aliquam sollicitudin, augue non gravida interdum, nibh eros dignissim lacus, vel vulputate dolor metus vel - dolor. Nunc id suscipit est. Proin id ligula fringilla, fringilla lectus at, scelerisque odio. Morbi - aliquam finibus nunc vehicula viverra. Nullam nec ipsum ipsum. Cras at ullamcorper arcu, in ultrices nisi. - Integer cursus tincidunt urna, eu lobortis augue volutpat ac. Phasellus posuere sollicitudin est, sit amet - accumsan ex sagittis eu. Quisque ut lectus at tellus efficitur semper a sit amet ante. Pellentesque ornare - libero ex, quis mollis dui sodales vel. Curabitur pretium quam eget odio dignissim, et sagittis tellus - tincidunt. Maecenas dictum venenatis tellus vel malesuada. Sed non varius urna. Phasellus molestie dui - lacus, eu sagittis metus pulvinar id. Sed facilisis urna lacus, ut rutrum nisl blandit id. Integer id nisl - porta, accumsan velit quis, tempus urna. Phasellus non egestas tellus. Quisque viverra, tellus quis luctus - tempus, lacus massa varius est, a luctus ante quam vitae elit. Orci varius natoque penatibus et magnis dis - parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - - {' '} - In fermentum est eget laoreet accumsan. Duis nec enim maximus, varius est quis, tincidunt ligula. Fusce - non accumsan quam, sit amet pulvinar urna. Nunc efficitur, arcu vitae molestie placerat, turpis arcu - interdum turpis, eget condimentum sem turpis vel libero. Phasellus auctor turpis leo, quis gravida diam - pharetra et. Maecenas tempus, mi et pharetra pharetra, eros neque ullamcorper nunc, vitae volutpat massa - mi sit amet ipsum. Donec vitae posuere purus. Praesent porta malesuada odio. Nunc fringilla vel purus at - auctor. Ut mollis porttitor tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices - posuere cubilia curae; Aenean id luctus felis. Mauris porttitor pharetra tortor, vitae fringilla augue - imperdiet et. In a libero facilisis, dignissim velit vitae, sagittis eros. Mauris in tristique nibh.{' '} - -
-
-
-
- ) -} diff --git a/src/pages/Example/ExampleNL.tsx b/src/pages/Example/ExampleNL.tsx deleted file mode 100644 index 2bea33f..0000000 --- a/src/pages/Example/ExampleNL.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react' -import { Page, PageContent } from '../../components' -import { Heading, HeadingWrapper, HomeLink, Navigation, StyledPageLink, Text } from '../../constants/example' - -export function ExampleNL() { - return ( - - - Volkscultuurfeest - - - - Huis - Wat betreft - -
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci erat, eget viverra justo - egestas id. Vestibulum semper odio vitae dictum aliquam. Maecenas eget purus at ipsum viverra molestie. - Sed egestas leo in massa volutpat maximus at vel nulla. Sed vehicula accumsan mattis. Pellentesque - hendrerit consectetur arcu a condimentum. Integer tortor mauris, laoreet ut ipsum id, scelerisque - dignissim nisl. Etiam nec metus sit amet dolor vestibulum sollicitudin. Curabitur a varius mauris, quis - vestibulum dolor. Etiam vulputate nulla in velit convallis, at tincidunt lacus tincidunt. Cras sit amet - libero egestas, porttitor lacus nec, vulputate lorem. Suspendisse semper tellus sit amet cursus fermentum. - Duis sed risus in sapien fermentum feugiat. Donec nec sodales lorem.{' '} - - - - Curabitur laoreet et lorem non ultricies. Vivamus cursus neque nulla, et dignissim eros hendrerit et. - Nulla facilisi. Sed in nisi id lectus porttitor gravida. Sed lectus ante, vulputate ut odio sed, blandit - pharetra lectus. Sed porta, mauris vitae aliquet accumsan, quam metus scelerisque purus, quis vestibulum - diam ex a tortor. Mauris eu felis eu turpis placerat dapibus. Donec mauris nunc, laoreet eget est quis, - tincidunt iaculis quam. Vivamus pulvinar viverra lacus, ac pellentesque mi dictum vel. Praesent sit amet - vulputate magna. Integer semper neque lectus, eget volutpat odio auctor sit amet. Maecenas id neque - dignissim, cursus quam et, iaculis orci. Integer congue euismod velit at elementum.{' '} - - - - Aliquam sollicitudin, augue non gravida interdum, nibh eros dignissim lacus, vel vulputate dolor metus vel - dolor. Nunc id suscipit est. Proin id ligula fringilla, fringilla lectus at, scelerisque odio. Morbi - aliquam finibus nunc vehicula viverra. Nullam nec ipsum ipsum. Cras at ullamcorper arcu, in ultrices nisi. - Integer cursus tincidunt urna, eu lobortis augue volutpat ac. Phasellus posuere sollicitudin est, sit amet - accumsan ex sagittis eu. Quisque ut lectus at tellus efficitur semper a sit amet ante. Pellentesque ornare - libero ex, quis mollis dui sodales vel. Curabitur pretium quam eget odio dignissim, et sagittis tellus - tincidunt. Maecenas dictum venenatis tellus vel malesuada. Sed non varius urna. Phasellus molestie dui - lacus, eu sagittis metus pulvinar id. Sed facilisis urna lacus, ut rutrum nisl blandit id. Integer id nisl - porta, accumsan velit quis, tempus urna. Phasellus non egestas tellus. Quisque viverra, tellus quis luctus - tempus, lacus massa varius est, a luctus ante quam vitae elit. Orci varius natoque penatibus et magnis dis - parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - - {' '} - In fermentum est eget laoreet accumsan. Duis nec enim maximus, varius est quis, tincidunt ligula. Fusce - non accumsan quam, sit amet pulvinar urna. Nunc efficitur, arcu vitae molestie placerat, turpis arcu - interdum turpis, eget condimentum sem turpis vel libero. Phasellus auctor turpis leo, quis gravida diam - pharetra et. Maecenas tempus, mi et pharetra pharetra, eros neque ullamcorper nunc, vitae volutpat massa - mi sit amet ipsum. Donec vitae posuere purus. Praesent porta malesuada odio. Nunc fringilla vel purus at - auctor. Ut mollis porttitor tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices - posuere cubilia curae; Aenean id luctus felis. Mauris porttitor pharetra tortor, vitae fringilla augue - imperdiet et. In a libero facilisis, dignissim velit vitae, sagittis eros. Mauris in tristique nibh.{' '} - -
-
-
-
- ) -} diff --git a/src/translations/en.json b/src/translations/en.json index b1b3889..d91e197 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1,6 +1,7 @@ { "language_name": "EN", "home": "Home", + "about": "About", "support": "Support us", "whats_on": "WHAT’s ON", "news": "NEWS & PRESS", @@ -20,5 +21,10 @@ "network": "WHAT IS THE NETWORK STATE?", "forum": "DISCUSS FORUM", "shop": "THE PEOPLE’S SHOP", - "calendar": "CALENDAR & EVENTS" + "calendar": "CALENDAR & EVENTS", + "example_heading": "People’s Culture Party", + "example_text_1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci erat, eget viverra justo egestas id. Vestibulum semper odio vitae dictum aliquam. Maecenas eget purus at ipsum viverra molestie. Sed egestas leo in massa volutpat maximus at vel nulla. Sed vehicula accumsan mattis. Pellentesque hendrerit consectetur arcu a condimentum. Integer tortor mauris, laoreet ut ipsum id, scelerisque dignissim nisl. Etiam nec metus sit amet dolor vestibulum sollicitudin. Curabitur a varius mauris, quis vestibulum dolor. Etiam vulputate nulla in velit convallis, at tincidunt lacus tincidunt. Cras sit amet libero egestas, porttitor lacus nec, vulputate lorem. Suspendisse semper tellus sit amet cursus fermentum. Duis sed risus in sapien fermentum feugiat. Donec nec sodales lorem.", + "example_text_2": "Curabitur laoreet et lorem non ultricies. Vivamus cursus neque nulla, et dignissim eros hendrerit et. Nulla facilisi. Sed in nisi id lectus porttitor gravida. Sed lectus ante, vulputate ut odio sed, blandit pharetra lectus. Sed porta, mauris vitae aliquet accumsan, quam metus scelerisque purus, quis vestibulum diam ex a tortor. Mauris eu felis eu turpis placerat dapibus. Donec mauris nunc, laoreet eget est quis, tincidunt iaculis quam. Vivamus pulvinar viverra lacus, ac pellentesque mi dictum vel. Praesent sit amet vulputate magna.", + "example_text_3": "Integer semper neque lectus, eget volutpat odio auctor sit amet. Maecenas id neque dignissim, cursus quam et, iaculis orci. Integer congue euismod velit at elementum. Aliquam sollicitudin, augue non gravida interdum, nibh eros dignissim lacus, vel vulputate dolor metus vel dolor. Nunc id suscipit est. Proin id ligula fringilla, fringilla lectus at, scelerisque odio. Morbi aliquam finibus nunc vehicula viverra. Nullam nec ipsum ipsum. Cras at ullamcorper arcu, in ultrices nisi. Integer cursus tincidunt urna, eu lobortis augue volutpat ac. Phasellus posuere sollicitudin est, sit amet accumsan ex sagittis eu. Quisque ut lectus at tellus efficitur semper a sit amet ante. Pellentesque ornare libero ex, quis mollis dui sodales vel.", + "example_text_4":"Fusce non accumsan quam, sit amet pulvinar urna. Nunc efficitur, arcu vitae molestie placerat, turpis arcu interdum turpis, eget condimentum sem turpis vel libero. Phasellus auctor turpis leo, quis gravida diam pharetra et. Maecenas tempus, mi et pharetra pharetra, eros neque ullamcorper nunc, vitae volutpat massa mi sit amet ipsum. Donec vitae posuere purus. Praesent porta malesuada odio. Nunc fringilla vel purus at auctor. Ut mollis porttitor tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean id luctus felis. Mauris porttitor pharetra tortor, vitae fringilla augue imperdiet et. In a libero facilisis, dignissim velit vitae, sagittis eros. Mauris in tristique nibh." } \ No newline at end of file diff --git a/src/translations/nl.json b/src/translations/nl.json index 9ddf4c2..4f055fb 100644 --- a/src/translations/nl.json +++ b/src/translations/nl.json @@ -1,6 +1,7 @@ { "language_name": "NL", "home": "Huis", + "about": "Wat betreft", "support": "Steun ons", "whats_on": "Wat is er op", "news": "NIEUWS & PERS", @@ -20,5 +21,10 @@ "network": "WAT IS DE NETWERKSTAAT?", "forum": "BESPREEK FORUM", "shop": "DE MENSEN WINKEL", - "calendar": "KALENDER & EVENEMENTEN" + "calendar": "KALENDER & EVENEMENTEN", + "example_heading": "Volkscultuurfeest", + "example_text_1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci erat, eget viverra justo egestas id. Vestibulum semper odio vitae dictum aliquam. Maecenas eget purus at ipsum viverra molestie. Sed egestas leo in massa volutpat maximus at vel nulla. Sed vehicula accumsan mattis. Pellentesque hendrerit consectetur arcu a condimentum. Integer tortor mauris, laoreet ut ipsum id, scelerisque dignissim nisl. Etiam nec metus sit amet dolor vestibulum sollicitudin. Curabitur a varius mauris, quis vestibulum dolor. Etiam vulputate nulla in velit convallis, at tincidunt lacus tincidunt. Cras sit amet libero egestas, porttitor lacus nec, vulputate lorem. Suspendisse semper tellus sit amet cursus fermentum. Duis sed risus in sapien fermentum feugiat. Donec nec sodales lorem.", + "example_text_2": "Curabitur laoreet et lorem non ultricies. Vivamus cursus neque nulla, et dignissim eros hendrerit et. Nulla facilisi. Sed in nisi id lectus porttitor gravida. Sed lectus ante, vulputate ut odio sed, blandit pharetra lectus. Sed porta, mauris vitae aliquet accumsan, quam metus scelerisque purus, quis vestibulum diam ex a tortor. Mauris eu felis eu turpis placerat dapibus. Donec mauris nunc, laoreet eget est quis, tincidunt iaculis quam. Vivamus pulvinar viverra lacus, ac pellentesque mi dictum vel. Praesent sit amet vulputate magna.", + "example_text_3": "Integer semper neque lectus, eget volutpat odio auctor sit amet. Maecenas id neque dignissim, cursus quam et, iaculis orci. Integer congue euismod velit at elementum. Aliquam sollicitudin, augue non gravida interdum, nibh eros dignissim lacus, vel vulputate dolor metus vel dolor. Nunc id suscipit est. Proin id ligula fringilla, fringilla lectus at, scelerisque odio. Morbi aliquam finibus nunc vehicula viverra. Nullam nec ipsum ipsum. Cras at ullamcorper arcu, in ultrices nisi. Integer cursus tincidunt urna, eu lobortis augue volutpat ac. Phasellus posuere sollicitudin est, sit amet accumsan ex sagittis eu. Quisque ut lectus at tellus efficitur semper a sit amet ante. Pellentesque ornare libero ex, quis mollis dui sodales vel.", + "example_text_4":"Fusce non accumsan quam, sit amet pulvinar urna. Nunc efficitur, arcu vitae molestie placerat, turpis arcu interdum turpis, eget condimentum sem turpis vel libero. Phasellus auctor turpis leo, quis gravida diam pharetra et. Maecenas tempus, mi et pharetra pharetra, eros neque ullamcorper nunc, vitae volutpat massa mi sit amet ipsum. Donec vitae posuere purus. Praesent porta malesuada odio. Nunc fringilla vel purus at auctor. Ut mollis porttitor tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean id luctus felis. Mauris porttitor pharetra tortor, vitae fringilla augue imperdiet et. In a libero facilisis, dignissim velit vitae, sagittis eros. Mauris in tristique nibh." } \ No newline at end of file