feat: create header and creating hero banner

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['media.graphcms.com'],
+  }
 }
 
 module.exports = nextConfig

package.json

@@ -9,9 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^6",
+    "graphql": "^16.3.0",
+    "graphql-request": "^4.2.0",
     "next": "12.1.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.3.1"
   },
   "devDependencies": {
     "@types/node": "17.0.23",

src/components/Header.tsx

@@ -0,0 +1,17 @@
+import { Flex } from "@chakra-ui/react"
+import { Logo } from "./Logo"
+import { Navbar } from "./Navbar"
+
+export const Header = () => {
+  return (
+    <Flex as="header"
+      bg="brand.primary"
+      align="center"
+      justify="space-around"
+      py="4"
+    >
+      <Logo />
+      <Navbar />
+    </Flex>
+  )
+}

src/components/HeroBanner.tsx

@@ -0,0 +1,21 @@
+import { Flex } from "@chakra-ui/react";
+
+export type HeroBannerProps = {
+  title: string,
+  background: {
+    url: string
+  },
+  description: string,
+}
+
+export const HeroBanner = ({ title, background, description}: HeroBannerProps) => {
+  return (
+    <Flex
+      bgImage={`url(${background.url})`}
+      height="20vh"
+    >
+      { title }
+      { description }
+    </Flex>
+  )
+}

src/components/Logo.tsx

@@ -0,0 +1,7 @@
+import Image from "next/image"
+
+export const Logo = () => {
+  return (
+    <Image src="https://media.graphcms.com/OdWKElwPSEia9nfabuxw?_ga=2.34469153.1858804931.1648141850-710560506.1647625745" width={120} height={40} />
+  )
+}

src/components/Navbar/NavItem.tsx

@@ -0,0 +1,15 @@
+import { Link as ChakraLink } from '@chakra-ui/react'
+import Link from "next/link"
+
+type NavItemProps = {
+  href: string
+  label: string
+}
+
+export const NavItem = ({ href, label }: NavItemProps) => {
+  return (
+    <Link href={href} passHref>
+      <ChakraLink>{label}</ChakraLink>
+    </Link>
+  )
+}

src/components/Navbar/index.tsx

@@ -0,0 +1,12 @@
+import { Flex } from "@chakra-ui/react"
+import { NavItem } from "./NavItem"
+
+export const Navbar = () => {
+  return (
+    <Flex as="nav" gap="1.5rem">
+      <NavItem href="/" label="Home" />
+      <NavItem href="/about" label="About" />
+      <NavItem href="/blog" label="Blog" />
+    </Flex>
+  )
+}

src/pages/_app.tsx

@@ -0,0 +1,15 @@
+import { ChakraProvider } from '@chakra-ui/react'
+import type { AppProps } from 'next/app'
+import { Header } from '../components/Header'
+import { theme } from '../styles/theme'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ChakraProvider resetCSS theme={theme}>
+      <Header />
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
+}
+
+export default MyApp

src/pages/index.tsx

@@ -0,0 +1,34 @@
+import { gql } from 'graphql-request';
+import type { GetStaticProps } from 'next';
+import { HeroBanner, HeroBannerProps } from '../components/HeroBanner';
+import { graphcms } from '../services/graphcms';
+
+const Home = ({title, background, description}: HeroBannerProps) => {
+  return (
+    <HeroBanner 
+      title={title}
+      background={background}
+      description={description}
+    />
+  )
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  const query = gql`
+    {
+      heroBanner(where: {slug: "hero-principal"}) {
+        title,
+        background {
+          url
+        },
+        description
+      }
+    }
+  `
+  const { heroBanner } = await graphcms.request(query)
+  return {
+    props: {...heroBanner},
+  }
+}
+
+export default Home

src/services/graphcms.ts

@@ -0,0 +1,4 @@
+import { GraphQLClient } from 'graphql-request';
+export const graphcms = new GraphQLClient(
+  'https://api-sa-east-1.graphcms.com/v2/cl176t5goieg801ywh05mbs03/master'
+);

src/styles/theme.ts

@@ -0,0 +1,11 @@
+import { extendTheme } from '@chakra-ui/react'
+
+const colors = {
+  brand: {
+    primary: '#FDC906',
+    secondary: '#414141',
+    tertiary: '#242121',
+  },
+}
+
+export const theme = extendTheme({ colors })