import React from 'react'
import Image from 'next/image'
import { Page } from '../components'
import profilePic from '../../static/img/photo.jpg'

const Title = () => {
  return (
    <div className="flex flex-col mx-8 py-32 items-start sm:items-center">
      <Image
        src={profilePic}
        alt="Picture of the author"
        width="80"
        height="80"
        placeholder="blur" // Optional blur-up while loading
        className="rounded-full"
      />
      <h1 className="pt-4 text-3xl sm:text-5xl font-semibold tracking-tight">
        Crafting{' '}
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-fog to-steel">
          experiences
        </span>{' '}
        with code.
      </h1>
    </div>
  )
}

const Home = () => {
  return (
    <Title />
  )
}

Home.getLayout = page => (
  <Page title="Home">
    {page}
  </Page>
)

export default Home

@@ -365,69 +365,8 @@
 80%22%0A
-        placeholder=%22blur%22 // Optional blur-up while loading%0A
     
@@ -717,22 +717,16 @@
  return 
-(%0A    
 %3CTitle /
@@ -727,20 +727,16 @@
 itle /%3E%0A
-  )%0A
 %7D%0A%0AHome.
@@ -751,19 +751,17 @@
 t = 
+(
 page
+)
  =%3E
- (%0A 
  %3CPa
@@ -780,31 +780,21 @@
 me%22%3E
-%0A    
 %7Bpage%7D
-%0A  
 %3C/Page%3E
-%0A)
 %0A%0Aex

Remove blur