home page status

src/components/Header.js

@@ -1,10 +1,5 @@
-import * as React from "react"
-import { Link } from "gatsby"
+import React from "react"
 
-const Header = ({ siteTitle }) => (
-  <header>
-    <Link to="/">{siteTitle}</Link>
-  </header>
-)
+const Header = ({ siteTitle }) => <header></header>
 
 export default Header

src/components/templates/home/HomeIntro.js

@@ -1,12 +1,53 @@
 import React from "react"
+import styled from "styled-components"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
 const HomeIntro = ({ data }) => {
   console.log("HomeIntro: ", data)
+
+  const image = getImage(
+    data?.homeIntroLogo?.localFile?.childImageSharp?.gatsbyImageData
+  )
+
+  const alt = getImage(data?.homeIntroLogo?.altText)
+
+  const icon = getImage(
+    data?.homeIntroSideIcon?.localFile?.childImageSharp?.gatsbyImageData
+  )
+
+  const iconAlt = getImage(data?.homeIntroSideIcon?.altText)
+
   return (
-    <div>
-      <h1>HomeIntro</h1>
-    </div>
+    <StyledSection>
+      <div className="wrapper">
+        <div className="main-side">
+          <div className="main-side__logo">
+            <GatsbyImage image={image} alt={alt} />
+          </div>
+          <div className="main-side__title">
+            <p>{data.homeIntroTopTitle}</p>
+            <h1>{data.homeIntroTitle}</h1>
+          </div>
+          <div
+            className="main-side__content"
+            dangerouslySetInnerHTML={{ __html: data.homeIntroContent }}
+          />
+        </div>
+
+        <div className="second-side">
+          <div
+            className="second-side__content"
+            dangerouslySetInnerHTML={{ __html: data.homeIntroSideText }}
+          />
+          <div className="second-side__icon">
+            <GatsbyImage image={icon} alt={iconAlt} />
+          </div>
+        </div>
+      </div>
+    </StyledSection>
   )
 }
 
+const StyledSection = styled.section``
+
 export default HomeIntro