<body id="iruy">
  <nav x-data="{ isOpen: false }" class="fixed w-full z-50 p-6">
    <div
      class="p-2 w-full mx-auto rounded-lg flex flex-col lg:flex-row bg-gray-100 container shadow-neumorphic"
    >
      <div class="h-12 flex justify-between">
        <a href="#"
          ><img
            src="https://cdn.glitch.global/16c1060a-84ef-4364-baee-52e9c6da00a5/2843136f-e299-447d-a8a4-9e3f17746926.image.png?v=1668040849154"
            class="h-full"
        /></a>
        <div
          x-on:click="isOpen = !isOpen"
          x-on:click.outside="isOpen = false"
          class="w-12 flex items-center justify-center lg:hidden cursor-pointer"
        >
          <span
            id="mobile_nav_icon_close"
            :class="!isOpen ? '' : 'hidden'"
            class=""
            ><i class="fas fa-bars"></i></span
          ><span
            id="mobile_nav_icon_open"
            :class="isOpen ? '' : 'hidden'"
            class="hidden"
            ><i class="fas fa-times"></i
          ></span>
        </div>
      </div>
      <div
        :class="isOpen ? '' : 'hidden'"
        class="flex-grow justify-end flex-col lg:flex lg:flex-row pt-4 lg:pt-0 hidden"
      >
        <a
          href="#snippet"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500"
          >Snippet</a
        ><a
          href="#expertises"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500"
          >Expertise</a
        ><a
          href="#works"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500"
          >Works</a
        ><a
          href="#experiences"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500"
          >Experiences</a
        ><a
          href="#connect"
          class="bg-neutral-800 text-white rounded-lg font-semibold px-6 flex items-center justify-center hover:opacity-80 mx-4 mb-4 lg:mb-0 lg:mr-0 lg:ml-4 h-12 mt-4 lg:mt-0"
          >Connect</a
        >
      </div>
    </div>
  </nav>
  <section class="relative container mx-auto mb-16 lg:pt-28">
    <div
      class="grid lg:grid-cols-2 w-full rounded lg:rounded-lg overflow-hidden shadow-neumorphic"
    >
      <div
        class="bg-gray-100 flex items-center relative min-h-screen lg:min-h-min"
      >
        <img
          src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/PiNwfZDwL5lpuApjDFCTd6RgwLCekmTLgt0LgHHO.jpg"
          class="w-full h-full top-0 left-0 absolute object-cover"
        />
        <div class="pt-40 pb-16 lg:py-40 px-6 lg:px-16 z-10">
          <div
            class="flex flex-col lg:-mr-80 bg-white bg-opacity-50 backdrop-blur-md p-6 rounded-xl items-center lg:items-start"
          >
            <img
              src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/zkbIoeelf1HovrdmLImnzFMaHyyutzGsuJbZ84ZB.jpg"
              class="w-48 rounded-full mb-4 lg:hidden shadow-lg"
            />
            <p class="lg:text-lg font-semibold mb-2 text-left text-gray-800">
              Hello &amp; Welcome!
            </p>
            <h1 class="text-4xl lg:text-7xl font-bold text-left mb-4">
              A.Hakim Noor
            </h1>
            <p
              class="text-2xl lg:text-4xl mb-6 lg:mb-8 text-left font-semibold"
            >
              A mechanical engineer by training, software engineer by trade.
            </p>
            <div class="w-full flex flex-col lg:flex-row">
              <a
                href="#works"
                class="bg-emerald-500 text-white rounded-lg text-lg font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80"
                >My Works</a
              >
              <div class="w-full lg:w-4 h-4"></div>
              <a
                href="#experiences"
                class="border-neutral-800 border-2 text-neutral-800 rounded-lg text-lg font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80"
                >Experiences</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-200 pt-80 lg:p-0 hidden lg:block relative">
        <img
          src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/zkbIoeelf1HovrdmLImnzFMaHyyutzGsuJbZ84ZB.jpg"
          class="w-full h-full top-0 left-0 absolute object-cover"
        />
      </div>
    </div>
  </section>
  <section id="snippet" class="h-20"></section>
  <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="p-0 lg:px-24 mb-8 lg:mb-16">
      <h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-6">
        My
        <span class="text-emerald-500"><i class="fas fa-code"></i></span>
        Snippet
      </h1>
      <div class="text-xl lg:text-2xl">
        <p>
          A fusion of mechanical engineering expertise and a self-taught
          immersion into the world of software engineering. Driven by an
          unwavering passion for sciences and technologies since my formative
          years, I have charted a course that currently centres around
          advocating for the transformative potential of web-based VR, AR, and
          Spatial Computing technologies.
        </p>
      </div>
    </div>
    <div class="grid grid-cols-1 gap-4">
      <div
        class="rounded-lg bg-gray-200 grid grid-cols-1 lg:grid-cols-2 p-4 lg:px-16 lg:py-8 relative shadow-neumorphic"
      >
        <img
          src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/cuiLCX5bAh6HVyqBZuwRZP5Jsm72EcQV4vTLJHhJ.jpg"
          class="w-full h-full top-0 left-0 absolute object-cover rounded-lg blur-md lg:blur-none"
        />
        <div class="relative lg:col-start-2 aspect-square">
          <div
            class="absolute top-0 left-0 w-full h-full flex lg:justify-center flex-col"
          >
            <div
              class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4"
            >
              Engagement
            </div>
            <p class="text-xl lg:text-2xl font-semibold">
              Passionate about education, I thrive on sharing insights with
              students in diverse institutes. Actively collaborating with local
              and international universities, I contribute to impactful projects
              and research, pushing the boundaries of technological innovation.
            </p>
          </div>
        </div>
      </div>
      <div
        class="rounded-lg bg-gray-200 grid grid-cols-1 lg:grid-cols-2 p-4 lg:px-16 lg:py-8 relative shadow-neumorphic"
      >
        <img
          src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/vLYxqpPceiTBUK1dgrDvnbz3EL0fAuOC3SjMCz2G.jpg"
          class="w-full h-full top-0 left-0 absolute object-cover rounded-lg blur-md lg:blur-none"
        />
        <div class="relative lg:col-start-1 aspect-square">
          <div
            class="absolute top-0 left-0 w-full h-full flex lg:justify-center flex-col"
          >
            <div
              class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4"
            >
              Philosophy
            </div>
            <p class="text-xl lg:text-2xl font-semibold">
              Commitment to the relentless pursuit of excellence and testament
              to the exciting intersection of engineering, technology, and
              education.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="expertises" class="h-20"></section>
  <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
      <div class="col-span-1">
        <div
          class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4"
        >
          Expertise
        </div>
      </div>
      <div>
        <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
          The mastery that I possess
        </h1>
      </div>
      <div class="flex items-center">
        <p class="text-base lg:text-2xl font-semibold w-full">
          And what you can expect...
        </p>
      </div>
    </div>
    <div class="grid lg:grid-cols-3 gap-4">
      <div class="rounded-lg p-4 flex flex-col shadow-neumorphic">
        <div
          class="bg-gradient-to-br from-emerald-500 to-teal-500 text-white w-16 h-16 rounded mb-4 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-globe-asia"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">Web Development</h4>
        <p class="mb-2 text-lg">
          Built countless number of product with Laravel framework ever since
          Laravel 5. From marketplace to drag &amp; drop website builder.
        </p>
        <div class="flex gap-2 mt-auto">
          <div
            class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2"
          >
            <p>Laravel</p>
          </div>
          <div
            class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2"
          >
            <p>PHP</p>
          </div>
        </div>
      </div>
      <div class="rounded-lg p-4 flex flex-col shadow-neumorphic">
        <div
          class="bg-gradient-to-br from-emerald-500 to-teal-500 text-white w-16 h-16 rounded mb-4 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-vr-cardboard"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">VR/AR/Spatial Computing</h4>
        <p class="mb-2 text-lg">
          Advocate for AR &amp; VR technologies. Specifically web-based approach
          such as A-Frame framework which allow greater accessibility than
          platform specific solution.
        </p>
        <div class="flex gap-2 mt-auto">
          <div
            class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2"
          >
            <p>A-Frame</p>
          </div>
          <div
            class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2"
          >
            <p>AR.js</p>
          </div>
        </div>
      </div>
      <div class="rounded-lg p-4 flex flex-col shadow-neumorphic">
        <div
          class="bg-gradient-to-br from-emerald-500 to-teal-500 text-white w-16 h-16 rounded mb-4 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-laptop-code"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">No-code Solution</h4>
        <p class="mb-2 text-lg">
          Helping out educational institution to equip their student with
          no-code solution skills. Building mobile app using GlideApps.
        </p>
        <div class="flex gap-2 mt-auto">
          <div
            class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2"
          >
            <p>SenangWebs</p>
          </div>
          <div
            class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2"
          >
            <p>GlideApps</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="works" class="h-20"></section>
  <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
      <div class="col-span-1">
        <div
          class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4"
        >
          Works
        </div>
      </div>
      <div>
        <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
          The Fruit Of My Labor
        </h1>
      </div>
      <div class="flex items-center">
        <p class="text-base lg:text-2xl font-semibold w-full">
          Check out what I have built so far
        </p>
      </div>
    </div>
    <div class="grid lg:grid-cols-2 gap-4">
      <div
        class="rounded-lg lg:rounded-2xl overflow-hidden flex flex-col justify-between group shadow-neumorphic"
      >
        <div
          class="p-4 lg:p-8 text-center flex flex-col justify-between h-full"
        >
          <div>
            <div class="text-xl lg:text-2xl mb-2 lg:mb-4 font-bold">
              Kad Kahwin Digital
            </div>
            <div class="text-base lg:text-lg mb-4 lg:mb-8">
              Electronic invitation card for wedding specialized for Malay
              community in Malaysia
            </div>
          </div>
          <div class="flex justify-center">
            <a
              href="#"
              class="font-semibold text-emerald-500 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80"
              >Learn More <i class="fas fa-arrow-right"></i
            ></a>
          </div>
        </div>
        <div>
          <img
            src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/preview_kkd.png?v=1704837781552"
            alt=""
            class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"
          />
        </div>
      </div>
      <div
        class="rounded-lg lg:rounded-2xl overflow-hidden flex flex-col justify-between group shadow-neumorphic"
      >
        <div
          class="p-4 lg:p-8 text-center flex flex-col justify-between h-full"
        >
          <div>
            <div class="text-xl lg:text-2xl mb-2 lg:mb-4 font-bold">
              SenangWebs
            </div>
            <div class="text-base lg:text-lg mb-4 lg:mb-8">
              Your Intuitive Drag &amp; Drop Website Builder for Effortless
              Online Presence!
            </div>
          </div>
          <div class="flex justify-center">
            <a
              href="#"
              class="font-semibold text-emerald-500 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80"
              >Learn More <i class="fas fa-arrow-right"></i
            ></a>
          </div>
        </div>
        <div>
          <img
            src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/preview_sw.png?v=1704837782571"
            alt=""
            class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"
          />
        </div>
      </div>
    </div>
  </section>
  <section id="experiences" class="h-20"></section>
  <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
      <div class="col-span-1">
        <div
          class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4"
        >
          Experiences
        </div>
      </div>
      <div>
        <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
          The Path I Walked On
        </h1>
      </div>
      <div class="flex items-center">
        <p class="text-base lg:text-2xl font-semibold w-full">
          What makes me to me of today
        </p>
      </div>
    </div>
    <div class="flex flex-col relative">
      <div class="grid grid-cols-11">
        <div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1"></div>
        <div
          class="col-span-1 flex justify-center items-top relative order-1 lg:order-2"
        >
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 absolute flex items-center justify-center -mt-1 text-neutral-600"
          >
            <i class="fas fa-chevron-up"></i>
          </div>
        </div>
        <div class="col-span-5 hidden lg:block order-3"></div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
          <div
            class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-neumorphic"
          >
            <div class="w-16 h-16 rounded aspect-square overflow-hidden">
              <img
                src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex flex-col">
              <p class="text-lg lg:text-xl font-semibold">Back End Developer</p>
              <p class="lg:text-lg">TalentCloud.ai · Full-time</p>
              <p class="opacity-80">Dec 2022 - Present · 1 yr 2 mos</p>
            </div>
          </div>
        </div>
        <div
          class="col-span-1 flex justify-center items-center relative order-1 lg:order-2"
        >
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center"
          ></div>
        </div>
        <div class="col-span-5 hidden lg:block order-3"></div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-5 hidden lg:block"></div>
        <div class="col-span-1 flex justify-center items-center relative">
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center"
          ></div>
        </div>
        <div class="col-span-10 lg:col-span-5 py-2">
          <div
            class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-neumorphic"
          >
            <div class="w-16 h-16 rounded aspect-square overflow-hidden">
              <img
                src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex flex-col">
              <p class="text-lg lg:text-xl font-semibold">
                Founder &amp; Technology Officer
              </p>
              <p class="lg:text-lg">Bookklik Technologies · Self-employed</p>
              <p class="opacity-80">Apr 2018 - Present · 5 yrs 10 mos</p>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
          <div
            class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-neumorphic"
          >
            <div class="w-16 h-16 rounded aspect-square overflow-hidden">
              <img
                src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex flex-col">
              <p class="text-lg lg:text-xl font-semibold">
                Chief Technology Officer
              </p>
              <p class="lg:text-lg">FixColab Sdn. Bhd. · Full-time</p>
              <p class="opacity-80">Mar 2021 - Nov 2022 · 1 yr 9 mos</p>
            </div>
          </div>
        </div>
        <div
          class="col-span-1 flex justify-center items-center relative order-1 lg:order-2"
        >
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center"
          ></div>
        </div>
        <div class="col-span-5 hidden lg:block order-3"></div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-5 hidden lg:block"></div>
        <div class="col-span-1 flex justify-center items-center relative">
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center"
          ></div>
        </div>
        <div class="col-span-10 lg:col-span-5 py-2">
          <div
            class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-neumorphic"
          >
            <div class="w-16 h-16 rounded aspect-square overflow-hidden">
              <img
                src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex flex-col">
              <p class="text-lg lg:text-xl font-semibold">Product Manager</p>
              <p class="lg:text-lg">SenangHost · Part-time</p>
              <p class="opacity-80">Mar 2020 - Feb 2021 · 1 yr</p>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
          <div
            class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-neumorphic"
          >
            <div class="w-16 h-16 rounded aspect-square overflow-hidden">
              <img
                src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex flex-col">
              <p class="text-lg lg:text-xl font-semibold">
                Producer, Workshops &amp; Classes
              </p>
              <p class="lg:text-lg">Forward School · Full-time</p>
              <p class="opacity-80">Aug 2019 - Feb 2021 · 1 yr 7 mos</p>
            </div>
          </div>
        </div>
        <div
          class="col-span-1 flex justify-center items-center relative order-1 lg:order-2"
        >
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center"
          ></div>
        </div>
        <div class="col-span-5 hidden lg:block order-3"></div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-5 hidden lg:block"></div>
        <div class="col-span-1 flex justify-center items-center relative">
          <div class="border border-neutral-600 h-full"></div>
          <div
            class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center"
          ></div>
        </div>
        <div class="col-span-10 lg:col-span-5 py-2">
          <div
            class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-neumorphic"
          >
            <div class="w-16 h-16 rounded aspect-square overflow-hidden">
              <img
                src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex flex-col">
              <p class="text-lg lg:text-xl font-semibold">Software Engineer</p>
              <p class="lg:text-lg">Website Artisan PLT · Part-time</p>
              <p class="opacity-80">Nov 2019 - Jul 2020 · 9 mos</p>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-11">
        <div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1"></div>
        <div
          class="col-span-1 flex justify-center items-bottom relative order-1 lg:order-2"
        >
          <div class="border border-neutral-600 w-4 absolute"></div>
        </div>
        <div class="col-span-5 hidden lg:block order-3"></div>
      </div>
    </div>
  </section>
  <section id="connect" class="h-20"></section>
  <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
      <div class="col-span-1">
        <div
          class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4"
        >
          Connect
        </div>
      </div>
      <div>
        <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
          Feel Free to Reach Out
        </h1>
      </div>
      <div class="flex items-center">
        <p class="text-base lg:text-2xl font-semibold w-full">
          Great minds think alike
        </p>
      </div>
    </div>
    <div
      class="rounded-lg bg-gradient-to-br from-emerald-400 to-teal-400 shadow-neumorphic"
    >
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div
          class="lg:col-span-2 py-4 lg:py-16 pl-4 lg:pl-16 pr-4 lg:pr-10 justify-between flex flex-col"
        >
          <div>
            <div class="text-3xl lg:text-6xl font-bold text-white mb-2 lg:mb-4">
              Connect<br />&amp; Let's Talk
            </div>
            <div class="text-base mb-4 lg:mb-8 text-white">
              Do you think we can get along? <br />Get in touch with me through
              these platform below:
            </div>
          </div>
          <div class="flex justify-center lg:justify-start gap-4">
            <a
              href="#"
              class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"
              ><i class="fab fa-google"></i></a
            ><a
              href="#"
              class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"
              ><i class="fab fa-linkedin"></i></a
            ><a
              href="#"
              class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"
              ><i class="fab fa-twitter"></i></a
            ><a
              href="#"
              class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"
              ><i class="fab fa-facebook"></i
            ></a>
          </div>
        </div>
        <div class="hidden xl:flex items-end pr-0 lg:pr-16 pt-11">
          <div class="mr-4">
            <img
              src="https://app.senangstart.com/storage/themes/July2021/Sn2g0Gu97czn5iqmnT72.png"
              alt=""
              class="h-full lg:ml-auto"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer
    class="flex flex-col lg:flex-row container mx-auto pt-4 px-6 lg:px-16 mb-16"
  >
    <div class="flex justify-center">
      <a
        href="#"
        class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"
        ><i class="fab fa-google"></i></a
      ><a
        href="#"
        class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"
        ><i class="fab fa-linkedin"></i></a
      ><a
        href="#"
        class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"
        ><i class="fab fa-twitter"></i></a
      ><a
        href="#"
        class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"
        ><i class="fab fa-facebook"></i
      ></a>
    </div>
    <div
      class="flex-grow h-8 flex items-center justify-center lg:justify-end font-semibold"
    >
      © A.Hakim Noor
    </div>
    <div class="flex justify-center">
      <a
        href="#"
        class="flex items-center justify-center w-8 h-8 text-sm lg:ml-4"
        ><i class="fas fa-arrow-up"></i
      ></a>
    </div>
  </footer>
</body>

Welcome to SenangStart Template Preview! 🎉 Visit our homepage for a deeper dive into our offerings, or you can edit this template with drag-n-drop website builder.

Edit Template