Staggered animation initial markup

Hero.tsx

import React from "react";

export function Hero() {
  return (
    <div className="bg-gray-950 flex flex-col pb-12">
      <header className="justify-center items-center border-t-[rgba(255,255,255,0.10;border-right:0px)_solid_rgba(255,255,255,0.10;] z-[1;] w-[100%;] px-60 py-8 border-l-[0px)] border-l-[rgba(255,255,255,0.10;] border-t-[0px)] border-b-[rgba(255,255,255,0.10);] border-solid border-b max-md:max-w-full max-md:px-5">
        <div className="flex items-center gap-0 max-md:max-w-full max-md:flex-wrap">
          <span className="items-start flex justify-between gap-5 my-auto max-md:max-w-full max-md:flex-wrap">
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/7d76171d9b0f2f3293471bf60903bca16cabe2dc1b892248c5228aea93a9a680?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[4] object-contain object-center w-[72px] overflow-hidden self-center shrink-0 max-w-full my-auto"
              alt="Logo"
            />
            <span className="justify-between items-stretch self-stretch flex gap-0.5">
              <div className="text-white text-sm font-semibold leading-6 grow whitespace-nowrap">
                Features
              </div>
              <img
                loading="lazy"
                src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5f64ac5a7319458f4e51a1ac180dc506075bb62e0e151bea61f6ad27d99b25e?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
                className="aspect-square object-contain object-center w-3.5 overflow-hidden self-center shrink-0 max-w-full my-auto"
                alt="Icon"
              />
            </span>
            <div className="text-white text-sm font-semibold leading-6 self-stretch">
              Method
            </div>
            <div className="text-white text-sm font-semibold leading-6 self-stretch">
              Customers
            </div>
            <div className="text-white text-sm font-semibold leading-6 self-stretch">
              Changelog
            </div>
            <div className="text-white text-sm font-semibold leading-6 self-stretch">
              Pricing
            </div>
            <span className="justify-between items-stretch self-stretch flex gap-0.5">
              <div className="text-white text-sm font-semibold leading-6 grow whitespace-nowrap">
                Company
              </div>
              <img
                loading="lazy"
                src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5f64ac5a7319458f4e51a1ac180dc506075bb62e0e151bea61f6ad27d99b25e?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
                className="aspect-square object-contain object-center w-3.5 overflow-hidden self-center shrink-0 max-w-full my-auto"
                alt="Icon"
              />
            </span>
            <div className="text-white text-sm font-semibold leading-6 self-stretch grow whitespace-nowrap">
              Contact
            </div>
          </span>
          <span className="justify-between items-center self-stretch flex gap-5 pl-20 max-md:max-w-full max-md:flex-wrap max-md:pl-5">
            <div className="text-white text-sm font-semibold leading-6 grow whitespace-nowrap my-auto">
              Login
            </div>
            <a
              className="text-white text-sm font-medium leading-8 whitespace-nowrap justify-center items-stretch bg-indigo-500 self-stretch aspect-[2.21875] px-2.5 rounded-3xl"
              href="#"
            >
              Sign up
            </a>
          </span>
        </div>
      </header>
      <div className="items-center self-center flex w-[1260px] max-w-full flex-col -mt-1.5 pt-12 px-16 max-md:px-5">
        <div className="flex w-[822px] max-w-full flex-col mt-1.5">
          <div className="justify-center items-stretch border backdrop-blur-[6px] bg-white bg-opacity-10 self-center flex gap-1 px-2.5 rounded-3xl border-solid border-white border-opacity-10">
            <div className="text-stone-50 text-sm font-medium leading-7 grow whitespace-nowrap">
              Introducing Linear Asks
            </div>
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/b1fc2c7947a597ca073fab420e3a014f375e35ceb9709896e0b7952bdcf7eb16?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-square object-contain object-center w-4 overflow-hidden self-center shrink-0 max-w-full my-auto"
              alt="Icon"
            />
          </div>
          <h1 className="text-white text-center text-7xl font-medium leading-[80px] self-stretch mt-4 max-md:max-w-full max-md:text-4xl max-md:leading-10">
            Linear is a better way
            <br />
            to build products
          </h1>
          <p className="text-slate-300 text-center text-2xl leading-7 max-w-[612px] self-center mt-7 max-md:max-w-full">
            Meet the new standard for modern software development.
            <br />
            Streamline issues, sprints, and product roadmaps.
          </p>
          <div className="justify-center items-stretch bg-indigo-500 self-center flex gap-0.5 mt-12 pl-5 pr-3 py-2.5 rounded-3xl max-md:mt-10">
            <div className="text-white text-base font-medium leading-8 grow whitespace-nowrap">
              Get started
            </div>
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/bb4b6ebd2492ccf447648fd994e00d5c552deb38e4b1d3359193e8de49adbe74?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-square object-contain object-center w-[18px] overflow-hidden self-center shrink-0 max-w-full my-auto"
              alt="Arrow icon"
            />
          </div>
        </div>
      </div>
      <img
        loading="lazy"
        srcSet="https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=100 100w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=200 200w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=400 400w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=800 800w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets/TEMP/7e641a08b262ec14a02a56418279ca9d1ddc2de843a6c9653b885703f60302ad?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
        className="aspect-[1.76] object-contain object-center w-[1200px] overflow-hidden self-center max-w-full mt-32 max-md:mt-10"
        alt="Banner image"
      />
      <div className="items-center self-center flex w-[1260px] max-w-full flex-col mt-64 mb-60 px-8 max-md:my-10 max-md:px-5">
        <div className="justify-center text-stone-50 text-center text-2xl leading-7 max-w-[528px] max-md:max-w-full">
          Powering the world’s best product teams.
          <br />
          <span className="text-stone-50">
            From next-gen startups to established enterprises.
          </span>
        </div>
        <div className="items-start content-start flex-wrap self-stretch flex justify-between gap-5 mt-14 pr-5 max-md:max-w-full max-md:mt-10">
          <div className="flex grow basis-[0%] flex-col items-center mt-3.5 self-start">
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/c1bacbf83ffedb4e26d2ba5abad38780b06ba4dd47203c22ef1c1e985f36063c?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.88] object-contain object-center w-[93px] fill-stone-50 overflow-hidden max-w-full"
              alt="Logo"
            />
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/c5c5160e42890b6668932e178acb71395bcbb2f321a8f2351635c0ac21bceb34?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-40 overflow-hidden mt-11 max-md:mt-10"
              alt="Icon"
            />
          </div>
          <div className="flex grow basis-[0%] flex-col items-center mt-3.5 self-start">
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/75ae9979408e7db016122ff6dff8ac6775e6732da6f1217fc763c8d5f61275aa?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[2.63] object-contain object-center w-[63px] fill-stone-50 overflow-hidden max-w-full"
              alt="Logo"
            />
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/d60a720bf14dc5f7a7d799e2862b1101c95211f4e1341c42caad7b56a4c05e20?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-40 overflow-hidden mt-11 max-md:mt-10"
              alt="Icon"
            />
          </div>
          <div className="self-stretch flex grow basis-[0%] flex-col items-center">
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/f6ef456f2a883f8737f4a102d428672eb1801bbe3df929bebb249a05c6679ac8?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.33] object-contain object-center w-40 overflow-hidden"
              alt="Logo"
            />
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/df111688eeda04db841a71cc22e7e6596b0812ee496e63b782cafe1f2c243463?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-40 overflow-hidden mt-8"
              alt="Icon"
            />
          </div>
          <div className="flex grow basis-[0%] flex-col items-center self-start">
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/629e9a4eac75a2bb5391f94f7213a653125033f02c0bcedf1610d09325339df7?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-40 overflow-hidden"
              alt="Logo"
            />
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/068585d97c36403c31f80e06ef6b9dfa36067283a689766ec86e9793129e7560?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-20 fill-stone-50 overflow-hidden max-w-full mt-11 max-md:mt-10"
              alt="Icon"
            />
          </div>
          <div className="flex grow basis-[0%] flex-col items-center mt-3 self-start">
            <div className="flex items-stretch gap-2.5">
              <img
                loading="lazy"
                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e9bb2aa2e628e85c38f67af7d10a2844016c82830418d9d7b78e9fee65e57897?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
                className="aspect-square object-contain object-center w-[25px] fill-stone-50 overflow-hidden shrink-0 max-w-full"
                alt="Icon"
              />
              <img
                loading="lazy"
                src="https://cdn.builder.io/api/v1/image/assets/TEMP/c8387ec796f81a40a73e99f246bd2a13b4f331d05b48319f7c0e0ca2e6c9fd00?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
                className="aspect-[4.88] object-contain object-center w-[78px] fill-stone-50 overflow-hidden self-center shrink-0 max-w-full my-auto"
                alt="Logo"
              />
            </div>
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/419a70dd61ca040ffc06c2416808670a7ddffb5a7b2e55a68f3e552bc1f103cf?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-40 overflow-hidden mt-11 max-md:mt-10"
              alt="Icon"
            />
          </div>
          <div className="flex grow basis-[0%] flex-col items-center mt-2 self-start">
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/977930582dc148ad0bee1e8e2cfec5d46f2b89b963ba9cf867ce0c68345db15e?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[1.19] object-contain object-center w-[43px] fill-stone-50 overflow-hidden max-w-full"
              alt="Logo"
            />
            <img
              loading="lazy"
              src="https://cdn.builder.io/api/v1/image/assets/TEMP/5de20d8b19f731fba39a805fc8c6125c511b8e0b3c524f492e82379ddd643767?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&"
              className="aspect-[3.2] object-contain object-center w-40 overflow-hidden mt-10"
              alt="Icon"
            />
          </div>
        </div>
      </div>
    </div>
  );
}