<header class="flex mt-36 mx-4 sm:mx-24">
  <div class="sm:mr-10">
    <h1 class="text-4xl font-bold mb-3">Hi! 👋🏻<br>I'm Arthur.</h1>
    <h2 class="text-2xl font-bold mb-3">Founder</h2>

    <div class="pl-4 mb-3 border-l-8 border-solid border-gray-400">
      <p>I am a young Frenchman with a passion for development, I am a self-taught learner and my creativity knows no
        limits. Every pixel I edit tells a story. Passionate about transforming ideas into visually captivating
        experiences, I create projects that push the boundaries of design innovation.</p>
    </div>

    <p class="italic text-gray-600">"In the middle of every difficulty lies opportunity."</p>
    <p class="italic text-gray-600 mb-10">Albert Einstein</p>

    <ul>
      @!component('components/list_lien', {
      href: 'https://www.instagram.com/arthur.pbty/',
      img: '/logo insta.png',
      title: 'Instagram',
      })
      @!component('components/list_lien', {
      href: 'https://github.com/Tutur33',
      img: '/logo github.png',
      title: 'Github',
      })
      @!component('components/list_lien', {
      href: 'https://discord.gg/HxgaA44CPh',
      img: '/Logo Discord.png',
      title: 'Discord',
      })
      @!component('components/list_lien', {
      href: 'http://tuturp33.000webhostapp.com',
      img: '/other.png',
      title: 'Other...',
      })
    </ul>
  </div>
  
  <div class="ml-10 md:block hidden">
    <img src="/pp.jpg" alt="Profile picture" class="w-full max-w-5xl rounded-full">
  </div>
  </main>
</header>