[WIP]: Header

pages/_app.tsx

@@ -3,9 +3,14 @@ import { useEffect, useMemo } from 'react';
 import { AppProps } from 'next/app';
 import { ApolloProvider } from '@apollo/client';
 import ThemeProvider from 'libs/material-ui/ThemeProvider';
-import { createClient, getApolloState } from '../src/libs/graphql';
+import { createClient, getApolloState } from 'libs/graphql';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const apolloState = getApolloState(pageProps);
+  const client = useMemo(() => {
+    return createClient({ state: apolloState });
+  }, [apolloState]);
+
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side');
     if (jssStyles && jssStyles.parentElement) {
@@ -13,11 +18,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     }
   }, []);
 
-  const apolloState = getApolloState(pageProps);
-  const client = useMemo(() => {
-    return createClient({ state: apolloState });
-  }, [apolloState]);
-
   return (
     <ThemeProvider>
       <ApolloProvider client={client}>

src/common/Layout/Layout.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import { Toolbar } from '@material-ui/core';
 import TopBar from './TopBar';
@@ -5,15 +6,23 @@ import Footer from './Footer';
 
 export interface LayoutProps {
   children?: React.ReactNode;
+  absoluteTopBar?: boolean;
+  transparentTopBar?: boolean;
+  padding?: boolean;
 }
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = ({
+  children,
+  padding = true,
+  absoluteTopBar,
+  transparentTopBar,
+}: LayoutProps) => {
   const classes = useStyles();
   return (
     <div className={classes.container}>
-      <TopBar />
-      <main className={classes.main}>
-        <Toolbar />
+      <TopBar transparent={transparentTopBar} />
+      <main className={clsx(classes.main, { padding })}>
+        {!absoluteTopBar && <Toolbar />}
         {children}
         <Toolbar />
       </main>
@@ -24,8 +33,10 @@ const Layout = ({ children }: LayoutProps) => {
 
 const useStyles = makeStyles(theme => ({
   main: {
-    padding: theme.spacing(3, 0),
     minHeight: '100vh',
+    '&.padding': {
+      padding: theme.spacing(3, 0),
+    },
   },
   container: {
     position: 'relative',

src/common/Layout/TopBar.tsx

@@ -1,13 +1,23 @@
+import clsx from 'clsx';
 import { Route } from 'config/routing';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { AppBar, Toolbar, Typography, Container } from '@material-ui/core';
 import Link from 'common/Link/Link';
 
-const TopBar = () => {
+export interface TopBarProps {
+  transparent?: boolean;
+}
+
+const TopBar = ({ transparent }: TopBarProps) => {
   const classes = useStyles();
   return (
-    <AppBar position="absolute" component="header" className={classes.navbar}>
+    <AppBar
+      position="absolute"
+      color="primary"
+      component="nav"
+      className={clsx(classes.navbar, { transparent })}
+    >
       <Container>
         <Toolbar disableGutters>
           <div>
@@ -31,6 +41,10 @@ const useStyles = makeStyles(theme => ({
       cursor: 'pointer',
       padding: theme.spacing(0.75, 1),
     },
+    '&.transparent': {
+      boxShadow: 'none',
+      backgroundColor: 'transparent',
+    },
   },
   title: {
     '& a': {

src/features/IndexPage/IndexPage.tsx

@@ -1,7 +1,13 @@
 import Layout from 'common/Layout/Layout';
 
+import Header from './components/Header/Header';
+
 const IndexPage = () => {
-  return <Layout>hello?</Layout>;
+  return (
+    <Layout transparentTopBar absoluteTopBar padding={false}>
+      <Header />
+    </Layout>
+  );
 };
 
 export default IndexPage;

src/features/IndexPage/components/Header/Header.tsx

@@ -0,0 +1,60 @@
+import Image from 'next/image';
+import { makeStyles } from '@material-ui/core/styles';
+import { Container, Toolbar, Grid, Typography } from '@material-ui/core';
+
+const Header = () => {
+  const classes = useStyles();
+  return (
+    <header className={classes.header}>
+      <Container className={classes.container}>
+        <div>
+          <Toolbar />
+          <Grid container spacing={2} alignItems="center" wrap="wrap-reverse">
+            <Grid item md={5} xs={12} className={classes.imageWrapper}>
+              <Image
+                src="/images/checklist.png"
+                alt="zdamegzaminzawodowy.pl - dużo prostsza droga do zdania egzaminu zawodowego"
+                width={500}
+                height={500}
+              />
+            </Grid>
+            <Grid item md={7} xs={12}>
+              <Typography gutterBottom align="center" variant="h1">
+                <strong>Dużo</strong> prostsza droga do zdania egzaminu
+                zawodowego
+              </Typography>
+              <Typography variant="h5">
+                <strong>zdamegzaminzawodowy.pl</strong> to ogromna baza pytań z
+                różnych egzaminów zawodowych. Pytania pochodzą z arkuszy z lat
+                ubiegłych. Wyszukaj poniżej interesującą Cię kwalifikację i
+                zacznij rozwiązywać testy!
+              </Typography>
+            </Grid>
+          </Grid>
+        </div>
+      </Container>
+    </header>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    color: theme.palette.common.white,
+    position: 'relative',
+    backgroundColor: theme.palette.primary.dark,
+    // backgroundImage: `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.dark})`,
+  },
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+    minHeight: '80vh',
+  },
+  imageWrapper: {
+    textAlign: 'center',
+  },
+}));
+
+export default Header;

src/libs/material-ui/createTheme.ts

@@ -8,6 +8,11 @@ import { blue, pink } from '@material-ui/core/colors';
 const createTheme = (): Theme => {
   return responsiveFontSizes(
     createMuiTheme({
+      typography: {
+        h1: {
+          fontSize: '4.5rem',
+        },
+      },
       palette: {
         primary: {
           main: blue['A200'],