Side Image Idea Hero

/* Source: Khatab Wedaa (Meraki UI) — https://github.com/merakiui/merakiui/blob/main/components/heros/SideImage.html — MIT. Included under its original licence. */
/* Copyright (c) 2021 Khatab Wedaa. MIT License. Alpine.js converted to React state; hotlinked logo/photo replaced with self-contained markup. */

"use client";

import { useState } from "react";

export default function SrcSideImageIdeaHero() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header className="bg-white dark:bg-gray-900">
      <nav className="px-6 py-4 shadow">
        <div className="lg:flex lg:items-center lg:justify-between">
          <div className="flex items-center justify-between">
            <a href="#" className="text-lg font-bold text-gray-800 dark:text-white">
              FreeCode
            </a>

            <div className="lg:hidden">
              <button
                onClick={() => setIsOpen((v) => !v)}
                type="button"
                aria-label="toggle menu"
                className="text-gray-500 hover:text-gray-600 focus:text-gray-600 focus:outline-none dark:text-gray-200 dark:hover:text-gray-400 dark:focus:text-gray-400"
              >
                {!isOpen ? (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth="2"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4 8h16M4 16h16" />
                  </svg>
                ) : (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth="2"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                )}
              </button>
            </div>
          </div>

          <div
            className={`${
              isOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
            } absolute inset-x-0 z-20 w-full bg-white px-6 py-4 shadow-md transition-all duration-300 ease-in-out lg:relative lg:top-0 lg:mt-0 lg:flex lg:w-auto lg:translate-x-0 lg:items-center lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none dark:bg-gray-900 lg:dark:bg-transparent`}
          >
            <a href="#" className="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-100 lg:mx-2 dark:text-gray-200">
              Home
            </a>
            <a href="#" className="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-100 lg:mx-2 dark:text-gray-200">
              About
            </a>
            <a href="#" className="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-100 lg:mx-2 dark:text-gray-200">
              Contact
            </a>
          </div>
        </div>
      </nav>

      <div className="lg:flex">
        <div className="flex w-full items-center justify-center px-6 py-8 lg:h-[32rem] lg:w-1/2">
          <div className="max-w-xl">
            <h2 className="text-3xl font-semibold text-gray-800 lg:text-4xl dark:text-white">
              Build Your New <span className="text-blue-600 dark:text-blue-400">Idea</span>
            </h2>

            <p className="mt-4 text-sm text-gray-500 lg:text-base dark:text-gray-400">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum
              cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem
              tempora voluptates.
            </p>

            <div className="mt-6 flex flex-col space-y-3 lg:flex-row lg:space-y-0">
              <a
                href="#"
                className="block transform rounded-md bg-gray-900 px-5 py-2 text-center text-sm font-medium tracking-wider text-white transition-colors duration-300 hover:bg-gray-700"
              >
                Get Started
              </a>
              <a
                href="#"
                className="block transform rounded-md bg-gray-200 px-5 py-2 text-center text-sm font-medium tracking-wider text-gray-700 transition-colors duration-300 hover:bg-gray-300 lg:mx-4"
              >
                Learn More
              </a>
            </div>
          </div>
        </div>

        <div className="h-64 w-full lg:h-auto lg:w-1/2">
          <div
            aria-hidden="true"
            className="h-full w-full bg-gradient-to-br from-blue-500 via-indigo-500 to-slate-900"
          >
            <div className="h-full w-full bg-black opacity-25" />
          </div>
        </div>
      </div>
    </header>
  );
}