// ─────────────────────────────────────────────────────────────────────────────
// import
// ─────────────────────────────────────────────────────────────────────────────

import React from 'react';

// ─────────────────────────────────────────────────────────────────────────────
// component
// ─────────────────────────────────────────────────────────────────────────────

export default function HomePage() {
  return (
    <div>
      <h1>Home page</h1>
    </div>
  );
}

@@ -192,16 +192,107 @@
 'react';
+%0Aimport Helmet from 'react-helmet';%0Aimport %7B Main, Section, Heading %7D from '../components';
 %0A%0A// %E2%94%80%E2%94%80%E2%94%80
@@ -498,11 +498,152 @@
 age(
-) %7B
+%7B%0A  data: %7B pagesJson: %7B meta, body: %7B hero %7D %7D %7D,%0A%7D) %7B%0A  const availability = new Date();%0A  availability.setMonth(availability.getMonth() + 1);
 %0A  r
@@ -655,19 +655,20 @@
  (%0A    %3C
-div
+Main
 %3E%0A      
@@ -672,40 +672,690 @@
    %3C
-h1%3EHome page%3C/h1%3E%0A    %3C/div%3E%0A  );%0A%7D
+Helmet%0A        title=%7B%60mrozilla: $%7Bmeta.title%7D%60%7D%0A        meta=%7B%5B%0A          %7B name: 'description', content: meta.description %7D,%0A          %7B name: 'keywords', content: meta.keywords %7D,%0A        %5D%7D%0A      /%3E%0A      %3CSection%3E%0A        %3CHeading%0A          fontSize=%225rem%22%0A          fontWeight=%22400%22%0A          lineHeight=%226rem%22%0A          margin=%22-1rem 0 10vh 0%22%0A        %3E%0A          %7Bhero.title%7D%0A        %3C/Heading%3E%0A      %3C/Section%3E%0A    %3C/Main%3E%0A  );%0A%7D%0A%0Aexport const query = graphql%60%0A  query HomePage %7B%0A    pagesJson(meta: %7B permalink: %7B eq: %22/%22 %7D %7D) %7B%0A      meta %7B%0A        title%0A        description%0A        keywords%0A      %7D%0A      body %7B%0A        hero %7B%0A          title%0A        %7D%0A      %7D%0A    %7D%0A  %7D%0A%60;
 %0A

add home hero