I made a bit of a mess here while trying to implement the wanted design.. I want my bridge img to be placed in the right side of the H1 text content. I want it to be responsive also. (I want it to look similar to Epidemic Sound Hero section)

 

import React from "react";
import Navbar from "../Navbar";
import FeatureSection from "./FeatureSection";
import { HeroSectionFirst } from "@/constants";

const HeroSection = () => {
  return (
    <div className="flex flex-col items-center mt-6 lg:mt-20">
        <div className="flex flex-wrap justify-center lg:flex-row-reverse">
          <div className="p-2 w-full lg:w-1/2">
            <img src={'./public/images/Asset 1@2x.png'} alt="Coding" />
          </div>
          <div className="pt-12 w-full lg:w-1/2">
            {HeroSectionFirst.map((item, index) => (
              <div key={index} className="flex mb-12">
                <div>
                  <h5 className="mt-1 mb-2 text-xl">{item.title}</h5>
                  <p className="text-md text-neutral-500">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

      <h1 className="text-4xl sm:text-6xl lg:text-7xl text-center tracking-wide">
        VirtualR build tools
        <span className="bg-gradient-to-r from-orange-500 to-red-800 text-transparent bg-clip-text">
          {" "}
          for developers
        </span>
      </h1>
      <p className="mt-10 text-lg text-center text-neutral-500 max-w-4xl">
        Empower your creativity and bring your VR app ideas to life with our
        intuitive development tools. Get started today and turn your imagination
        into immersive reality!
      </p>
      <div className="flex justify-center my-10">
        <a
          href="#"
          className="bg-gradient-to-r from-orange-500 to-orange-800 py-3 px-4 mx-3 rounded-md"
        >
          Start for free
        </a>
        <a href="#" className="py-3 px-4 mx-3 rounded-md border">
          Documentation
        </a>
      </div>
      <div className="flex mt-10 justify-center">
        <video
          autoPlay
          loop
          muted
          className="rounded-lg w-1/2 border border-orange-700 shadow-sm shadow-orange-400 mx-2 my-4"
        >
          <source src={'video1'} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <video
          autoPlay
          loop
          muted
          className="rounded-lg w-1/2 border border-orange-700 shadow-sm shadow-orange-400 mx-2 my-4"
        >
          <source src={'video2'} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  );
};