Right Scroll

right-scroll.tsx

import React from "react";


const RightScroll = (): JSX.Element => {
  return (
    <div className="relative border-t border-gray-200 flex flex-col sm:flex-row gap-12 sm:gap-0 w-full h-full justify-between px-4 sm:px-20 py-8 sm:py-12 overflow-visible">
      <div className="relative sm:sticky top-0 sm:top-8 flex flex-col gap-1 w-full sm:w-5/12 h-full">
        <h3 className="text-6xl font-main font-semibold">Services</h3>
        <p className="w-full sm:w-[80%]">We elevate your business digital presence to capture your next online customers.</p>
      </div>
      <div className="flex flex-col gap-4 w-full sm:w-6/12">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="flex flex-col gap-2 py-8 border-b border-gray-200">
            <h3 className="text-5xl font-bold font-main">Hello World</h3>
            <p className="text-md font-semibold text-gray-500 w-full sm:w-[88%]">
              Seamless interactions, intuitive interfaces.
              Our UI/UX design merges user insight,
              creative vision and technical expertise to craft digital experiences that engage,
              convert and retain audiences.
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};


export default RightScroll;