hero-1

• Vista previa

  

• Código

  import Image from 'next/image';
  import Link from 'next/link';
  
  import { RiSendPlaneFill, RiArrowLeftLine, RiArrowRightLine, RiSearchLine, RiMenu3Line } from 'react-icons/ri';
  
  const Hero1 = () => {
    return (
      <div className="min-h-screen max-h-screen lg:overflow-hidden relative">
        <div className="absolute w-full h-full grid grid-cols-1 lg:grid-cols-2 -z-30">
          <div className="bg-[#161616]" />
          <div className="bg-[#ff9d01] hidden lg:block" />
        </div>
        <section className="grid grid-cols-2 lg:grid-cols-8 gap-4 px-5 sm:px-0 py-8 container mx-auto">
          <div className="lg:col-span-1 flex items-center gap-2">
            <RiSendPlaneFill className="bg-[#ff9d01] p-1 rounded-full text-2xl" />
            <h2 className="text-[#6d5530] uppercase font-bold tracking-[2px]">
              Tu
              <span className="text-[#ff9d01]">Logo</span>
            </h2>
          </div>
          <nav className="hidden lg:col-span-4 text-gray-100 lg:flex items-center justify-center gap-6 uppercase text-sm">
            <Link href="#">Inicio</Link>
            <Link href="#">Nosotros</Link>
            <Link href="#">Servicios</Link>
            <Link href="#">Contacto</Link>
          </nav>
          <form className="hidden lg:col-span-2 lg:block">
            <div className="relative">
              <input
                type="text"
                className="w-full bg-transparent border border-[#161616] rounded-full py-2 outline-none pl-4 pr-12 text-[#161616] placeholder:text-[#161616]"
                placeholder="Buscar...."
              />
              <button type="button" className="absolute right-4 text-[#161616] top-1/2 -translate-y-1/2">
                <RiSearchLine size={20} />
              </button>
            </div>
          </form>
          <div className="lg:col-span-1 flex justify-end">
            <button type="button" className="text-[#161616]">
              <RiMenu3Line size={24} />
            </button>
          </div>
        </section>
        <section className="relative px-5 sm:px-0 container mx-auto">
          <div className="lg:py-20 xl:pt-20 2xl:pt-40">
            <h1 className="text-4xl md:text-8xl uppercase font-extrabold tracking-[15px] lg:tracking-[35px] text-white mb-4 relative z-20">
              Des<span className="border-b border-[#ff9d01]">cubre</span>
            </h1>
            <h1 className="text-8xl uppercase text-white font-extralight tracking-[20px] mb-4 relative z-20">el</h1>
            <h1 className="text-7xl md:text-8xl uppercase text-[#ff9d01] font-extralight tracking-[10px] lg:tracking-[35px] relative z-20">
              mundo
            </h1>
            <p className="text-gray-200 mt-8 lg:max-w-md relative z-20">
              Lorem Ipsum has been the industrys standard dummy text ever since the 1500s
            </p>
          </div>
          <div className="lg:absolute right-0 top-20">
            <div className="relative">
              <div className="hidden lg:block absolute left-0 top-0 w-full h-full bg-[#161616] opacity-[.5]" />
              <div className="relative w-full h-64 sm:h-[450px] 2xl:h-[500px] lg:w-[850px]">
                <Image
                  src="https://res.cloudinary.com/jotredev/image/upload/v1698092626/ElementumUI/equipos/nas-trabajando-plan-negocios-oficina_m3zxkt.webp"
                  blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1698092626/ElementumUI/equipos/nas-trabajando-plan-negocios-oficina_m3zxkt.webp"
                  loading="lazy"
                  className="object-cover shadow-[0_15px_20px_rgba(0,0,0,0.3)]"
                  fill
                  alt="Image"
                />
              </div>
              <div className="-mt-10 lg:mt-0 lg:absolute -left-10 bottom-0">
                <button type="button" className="bg-[#ff9d01] p-2 z-50">
                  <RiArrowLeftLine size={24} />
                </button>
                <button type="button" className="bg-[#161616] p-2 z-50">
                  <RiArrowRightLine size={24} />
                </button>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2">
            <div className="py-20 order-1 lg:-order-none text-center lg:text-left">
              <Link
                href="#"
                className="text-gray-400 uppercase tracking-[4px] py-2 relative before:absolute before:w-10 before:h-1 before:bg-[#ff9d01] before:left-0 before:-bottom-2 hover:before:w-full before:transition-all before:duration-300"
              >
                Leer más
              </Link>
            </div>
            <div className="flex flex-col lg:flex-row items-center justify-between mt-4">
              <p className="p-8 text-gray-500 lg:text-gray-900">
                Lorem Ipsum has been the industrys standard dummy text ever since the 1500s. Lorem Ipsum has been the
                industrys standard dummy text ever since the 1500s.
              </p>
              <div className="relative w-full h-full lg:w-[400px]">
                <Image
                  src="https://res.cloudinary.com/jotredev/image/upload/v1698092742/ElementumUI/mujeres/mujer-angulo-mochila_pc0chc.webp"
                  blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1698092742/ElementumUI/mujeres/mujer-angulo-mochila_pc0chc.webp"
                  loading="lazy"
                  className="w-full lg:w-[400px] object-cover"
                  fill
                  alt="Image"
                />
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  };
  
  export default Hero1;