Hero Component

components/icon/DoubleChevron.tsx

@@ -10,7 +10,7 @@ const DoubleChevron = ({ ...props }) => {
     >
       <path
         d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
-        stroke="white"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"

components/icon/RightArrow.tsx

@@ -0,0 +1,29 @@
+const RightArrow = ({ ...props }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5 12H19"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 5L19 12L12 19"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default RightArrow

components/icon/index.ts

@@ -10,3 +10,4 @@ export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
 export { default as Github } from './Github'
 export { default as DoubleChevron } from './DoubleChevron'
+export { default as RightArrow } from './RightArrow'

components/ui/Hero/Hero.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames'
 import React, { FC } from 'react'
 import s from './Hero.module.css'
 import { Container } from '@components/ui'
+import { RightArrow } from '@components/icon'
 interface Props {
   className?: string
   headline: string
@@ -9,15 +10,23 @@ interface Props {
 }
 
 const Hero: FC<Props> = ({ headline, description, className }) => {
-  const rootClassName = cn('bg-black py-12', className)
+  const rootClassName = cn('bg-black py-24', className)
   return (
     <div className={rootClassName}>
       <Container>
-        <div className="max-w-xl">
+        <div className="mx-auto grid lg:grid-cols-2">
           <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
             {headline}
           </h2>
-          <p className="mt-5 text-xl leading-7 text-gray-400">{description}</p>
+          <div>
+            <p className="mt-5 text-xl leading-7 text-accent-2">
+              {description}
+            </p>
+            <a className="block text-white py-3 font-bold hover:underline flex flex-row cursor-pointer">
+              <span>Read it here</span>
+              <RightArrow width="20" heigh="20" className="ml-1" />
+            </a>
+          </div>
         </div>
       </Container>
     </div>