some creative work for test

package.json

@@ -24,7 +24,8 @@
     "next-seo": "^4.23.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-jsx-plugin-postcss": "^4.0.1"
+    "styled-jsx-plugin-postcss": "^4.0.1",
+    "yarn": "^1.22.17"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^10.1.2",

src/hero/HeroOneButton.tsx

@@ -11,6 +11,10 @@ const HeroOneButton = (props: IHeroOneButtonProps) => (
     <h1 className="text-5xl text-gray-900 font-bold whitespace-pre-line leading-hero">
       {props.title}
     </h1>
+    <img 
+      className="w-3/6 m-auto mt-2"
+      src={`${process.env.baseUrl}/assets/images/yelunderline.png`} 
+    />
     <div className="text-2xl mt-4 mb-16">{props.description}</div>
     {props.button}
   </header>

src/layout/Section.tsx

@@ -4,11 +4,13 @@ type ISectionProps = {
   title?: string;
   description?: string;
   yPadding?: string;
+  background?: string;
   children: ReactNode;
+  maxWidth?: string;
 };
 
 const Section = (props: ISectionProps) => (
-  <div className={`max-w-screen-lg mx-auto px-3 ${props.yPadding ? props.yPadding : 'py-16'}`}>
+  <div className={`${props.maxWidth ? props.maxWidth : ''} mx-auto px-3 ${props.yPadding ? props.yPadding : 'py-16'} ${props.background ? props.background : ''}`}>
     {(props.title || props.description) && (
       <div className="mb-12 text-center">
         {props.title && <h2 className="text-4xl text-gray-900 font-bold">{props.title}</h2>}

src/navigation/NavbarTwoColumns.tsx

@@ -2,37 +2,43 @@ import React, { ReactNode } from 'react';
 
 import Link from 'next/link';
 
+import className from 'classnames';
+
 type INavbarProps = {
   logo: ReactNode;
   children: ReactNode;
 };
 
-const NavbarTwoColumns = (props: INavbarProps) => (
-  <div className="flex flex-wrap justify-between items-center">
-    <div>
-      <Link href="/">
-        <a>{props.logo}</a>
-      </Link>
-    </div>
+const NavbarTwoColumns = (props: INavbarProps) => {
+  const navbarTwoColumnClass = className('flex', 'flex-wrap', 'justify-between', 'items-center');
+
+  return ( 
+    <div className={navbarTwoColumnClass}>
+      <div>
+        <Link href="/">
+          <a>{props.logo}</a>
+        </Link>
+      </div>
+
+      <nav>
+        <ul className="navbar flex items-center font-medium text-xl text-primary-500">
+          {props.children}
+        </ul>
+      </nav>
 
-    <nav>
-      <ul className="navbar flex items-center font-medium text-xl text-gray-800">
-        {props.children}
-      </ul>
-    </nav>
-
-    <style jsx>
-      {`
-        .navbar :global(li:not(:first-child)) {
-          @apply mt-0;
-        }
-
-        .navbar :global(li:not(:last-child)) {
-          @apply mr-5;
-        }
-      `}
-    </style>
-  </div>
-);
+      <style jsx>
+        {`
+          .navbar :global(li:not(:first-child)) {
+            @apply mt-0;
+          }
+
+          .navbar :global(li:not(:last-child)) {
+            @apply mr-5;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
 
 export { NavbarTwoColumns };

src/templates/landing-page/Hero.tsx

@@ -10,8 +10,12 @@ import { NavbarTwoColumns } from '../../navigation/NavbarTwoColumns';
 import { Logo } from '../commons/Logo';
 
 const Hero = () => (
-  <Background color="bg-gray-100">
-    <Section yPadding="py-6">
+  <Background color="bg-primary-100">
+    <Section 
+      yPadding="py-6" 
+      background="bg-primary-700"
+      maxWidth="max-w-screen-lg"
+    >
       <NavbarTwoColumns logo={<Logo xl />}>
         <li>
           <Link href="https://github.com/AxLabs/meme-governance-frontend">
@@ -20,30 +24,37 @@ const Hero = () => (
         </li>
         <li>
           <Link href="/dapp">
-            <a>dApp</a>
+            <a>DApp</a>
           </Link>
         </li>
       </NavbarTwoColumns>
     </Section>
-
-    <Section yPadding="pt-20 pb-32">
-      <HeroOneButton
-        title={
-          <>
-            {'The Best Memes, ever.\n'}
-            Built and Governed on <span className="text-primary-500">Neo N3</span>
-          </>
-        }
-        description="Propose new ones, vote on the best, and dump the shittiest..."
-        button={
-          <Link href="/dapp">
-            <a>
-              <Button xl>Let&lsquo;s do it!</Button>
-            </a>
-          </Link>
-        }
-      />
-    </Section>
+    <div class="container mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 px-3 pt-14 pb-28">
+        <HeroOneButton
+          title={
+            <>
+              {'The Best Memes, ever.\n'}
+              Built and Governed on <span className="text-primary-500">Neo N3</span>
+            </>
+          }
+          description="Propose new ones, vote on the best, and dump the shittiest..."
+          button={
+            <Link href="/dapp">
+              <a>
+                <Button xl>Let&lsquo;s do it!</Button>
+              </a>
+            </Link>
+          }
+        />
+        <div class="flex justify-center align-center">
+          <img 
+            className="w-3/5 m-auto"
+            src={`${process.env.baseUrl}/assets/images/inter1.png`} 
+          />
+        </div>
+      </div>
+    </div>
   </Background>
 );
 

tailwind.config.js

@@ -40,7 +40,7 @@ module.exports = {
         },
       },
       lineHeight: {
-        hero: '4.5rem',
+        hero: '3.5rem',
       },
     },
   },