Make Every Moment Count

Listen while

Driving

Cooking

Commuting

Exercising

Relaxing

"use client"
const CssSnippet = () => {
  return (
    <div className="py-24">
      <div className="bg-[#272A30] rounded-2xl md:flex justify-between lg:mx-24 mx-5">
        <div className="text-white flex items-center justify-center w-full">
          <h1 className="text-base text-sm md:text-4xl">
            <div className="caption relative text-white p-5">
              <span>Make Every Moment Count</span>
              <div className="relative">
                Listen while
                <div className="text-box absolute inline-block ml-1 md:ml-2">
                  {[
                    "Driving",
                    "Cooking",
                    "Commuting",
                    "Exercising",
                    "Relaxing",
                  ].map((text, index) => (
                    <div
                      key={index}
                      className={`left-0 absolute font-bold inline-block text-brand-500 animate-rollDown${
                        index + 1
                      }`}
                    >
                      {text}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </h1>
        </div>
        <div className="md:w-[530px] w-full md:h-[300px] h-[178px] flex-shrink-0">
          <div className="image-wrapper h-full w-full relative z-40">
            <div className="image-box h-full w-full relative">
              {["d_driving", "landing_cook", "d_commute", "landing_exersice", "d_relax"].map(
                (imgName, index) => (
                  <div key={index} className="h-full w-full relative">
                    <img
                      alt={`Kukufm | ${
                        imgName.charAt(0).toUpperCase() + imgName.slice(1)
                      }`}
                      loading="lazy"
                      decoding="async"
                      className="h-full w-full absolute"
                      sizes="100vw"
                      src={"https://d1l07mcd18xic4.cloudfront.net/static/${imgName}.png"}
                    />
                  </div>
                )
              )}
            </div>
          </div>
        </div>
      </div>
      <style jsx>
        {`
          .text-box div {
            transform: rotateX(-90deg);
            opacity: 0;
            animation-timing-function: ease;
          }

          .text-box div:nth-child(1) {
            animation: rollDown 15s forwards infinite;
          }

          .text-box div:nth-child(2) {
            animation: rollDown2 15s forwards infinite;
          }

          .text-box div:nth-child(3) {
            animation: rollDown3 15s forwards infinite;
          }

          .text-box div:nth-child(4) {
            animation: rollDown4 15s forwards infinite;
          }

          .text-box div:nth-child(5) {
            animation: rollDown5 15s forwards infinite;
          }

          .image-wrapper {
            color: #fff;
            position: relative;
            text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
          }

          .image-box div {
            display: inline-block;
            position: absolute;
            transform: rotateX(-90deg);
            opacity: 0;
            text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
            animation-timing-function: ease;
          }

          .image-box div:nth-child(1) {
            animation: rollDown 15s forwards infinite;
          }

          .image-box div:nth-child(2) {
            animation: rollDown2 15s forwards infinite;
          }

          .image-box div:nth-child(3) {
            animation: rollDown3 15s forwards infinite;
          }

          .image-box div:nth-child(4) {
            animation: rollDown4 15s forwards infinite;
          }

          .image-box div:nth-child(5) {
            animation: rollDown5 15s forwards infinite;
          }

          @keyframes blink {
            50% {
              opacity: 0.3;
            }
          }

          @keyframes rollDown {
            0% {
              top: -100px;
              transform: rotateX(-90deg);
            }

            7% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            14% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            21% {
              top: 50px;
              transform: rotateX(30deg);
              opacity: 0;
            }
          }

          @keyframes rollDown2 {
            21% {
              top: -100px;
              transform: rotateX(-90deg);
            }

            27% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            35% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            42% {
              top: 50px;
              transform: rotateX(30deg);
              opacity: 0;
            }
          }

          @keyframes rollDown3 {
            42% {
              top: -100px;
              transform: rotateX(-90deg);
            }

            49% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            56% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            63% {
              top: 50px;
              transform: rotateX(30deg);
              opacity: 0;
            }
          }

          @keyframes rollDown4 {
            63% {
              top: -100px;
              transform: rotateX(-90deg);
            }

            70% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            77% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            84% {
              top: 50px;
              transform: rotateX(30deg);
              opacity: 0;
            }
          }

          @keyframes rollDown5 {
            84% {
              top: -100px;
              transform: rotateX(-90deg);
            }

            91% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            95% {
              top: 0px;
              transform: rotateX(0deg);
              opacity: 1;
            }

            100% {
              top: 50px;
              transform: rotateX(30deg);
              opacity: 0;
            }
          }
        `}
      </style>
    </div>
  );
};

export default CssSnippet;