Как сделать мягкий переход между двумя html блоками

знает ли кто-нибудь как сделать переход между двумя html блоками адекватным? enter image description here Тут bg задан картинкой, т.к. enter image description here

Я пробовал по разному стилизовывать свои css файлы, и по разному отображать html разметку, использую tailwindcss, react Вот код

import { Button } from "@/components/ui/button";
import Link from "next/link";

export const Hero = () => {
  return (
    <section
      className="relative bg-[url('/hero.png')] bg-top bg-no-repeat bg-cover
      flex items-center justify-center h-[100vh] w-screen"
      style={{ minHeight: "calc(100vh - 4rem)" }}
    >
      <div className="gradient-overlay" />
      <div
        className="isolates rounded-xl bg-white/20 shadow-lg
        ring-1 ring-black/5"
      >
        <div className="text-center">
          <div className="p-8 max-w-[500px] rounded-xl">
            <h1 className="text-5xl font-bold">Hi everyone</h1>
            <p className="mt-4 text-xl">
              CollaboraHub is a collaborative platform that allows you to
              collaborate with others in real-time.
            </p>
            <Link href="/dashboard">
              <Button
                size={"lg"}
                className="p-4 mt-4 bg-inherit text-black border border-black
              hover:text-white hover:bg-black transition text-[18px]"
              >
                Go collaborate
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export const Features = () => {
  return (
    <section
      className="bg-[url('/Boards.png')] bg-right backdrop-blur-[600px] bg-no-repeat bg-cover
      dark:bg-gray-900 mx-auto flex justify-center w-[100vw] h-full"
    >
      <div className="w-[90%] px-6 py-10 max-w-screen-3xl justify-center items-center">
        <h1
          className="text-2xl font-semibold text-gray-800 capitalize 
          lg:text-3xl dark:text-white"
        >
          Our Features
        </h1>

        <p className="mt-2 text-gray-500 xl:mt-2 dark:text-gray-300">
          Advantages of our service
        </p>

        <div className="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
          <div className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
            <h1 className="text-xl font-semibold text-gray-700 capitalize dark:text-white">
              Boards
            </h1>

            <p className="text-gray-500 dark:text-gray-300">
              There is a Boards service on our website where you can create
              joint boards with your team members and plan work on the project
            </p>
          </div>

          <div className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
            <h1 className="text-xl font-semibold text-gray-700 capitalize dark:text-white">
              Live interaction
            </h1>

            <p className="text-gray-500 dark:text-gray-300">
              You will be able to see the work of your team members in real time
            </p>
          </div>

          <div className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
            <h1 className="text-xl font-semibold text-gray-700 capitalize dark:text-white">
              Absolute free
            </h1>

            <p className="text-gray-500 dark:text-gray-300">
              Our service is completely free, but there are some limitations
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};