I have few small problems in my current design:

1. The arrows outside the buttons, should always be pointed to the centre of the right border outside, here in my design first 3 arrows may look fine for now, but if the button text becomes double lined it will ruin the design, as of now for the last 2 buttons it look extremely bad but set it dynamically so it adjusts to the length of button text accordingly. Alignment of the arrows outside should always be the centre of the button.

2. The buttons look more like div here, I want the button text to be right aligned as it is now but it’s leaving extra space on the left, adjust the code so extra space is not left. (it has an equivalent padding on the left as it has on the right (so it looks a button not a div)

3)The overall container having the three section doesn’t looks centred, the padding on the left is a lot more then the right. make it equivalent and visually centred.

Here is the code:

import { useState } from 'react';
import Heading from '../Heading/Heading';
import LeftSection from './sections/LeftSection';
import CenterSection from './sections/CenterSection';
import RightSection from './sections/RightSection';
import { responses } from './discoveryResponses'; // Adjust path as necessary
import { buttonNames } from './DiscoveryButton/buttonNames';

const DiscoveryResponse = () => {
  const [activeResponse, setActiveResponse] = useState(0);

  const handleButtonClick = (index) => {
    setActiveResponse(index);
  };

  return (
    <section className="py-12 px-4 md:px-40">
      <div className="text-center pt-4 pb-8">
        <Heading
          title="Discovery Response Generator (Discovery Workflow)"
          titleFirst={true}
        />
      </div>

      {/* Parent Grid Container */}
      <div className="grid grid-cols-1 md:grid-cols-[30%_35%_35%] py-10 gap-10">

        {/* Left Section (Image Display) */}
        <LeftSection imageSrc={responses[activeResponse].image} />

        {/* Center Section (Text Display) */}
        <CenterSection
          buttonName={buttonNames[activeResponse]}
          responseText={responses[activeResponse].text}
        />

        {/* Right Section (Button Grid and Navigation Arrows) */}
        <RightSection
          responses={responses}
          activeResponse={activeResponse}
          handleButtonClick={handleButtonClick}
        />
      </div>
    </section>
  );
};

export default DiscoveryResponse;


// DiscoveryButton.jsx

import React from 'react';
import { buttonNames } from './buttonNames';

const DiscoveryButton = ({ index, active, onClick }) => {
  return (
    <button
      onClick={() => onClick(index)}
      className={`px-4 py-2.5 text-lg  text-right ${active ? 'bg-theme-blue text-white rounded-lg ' : 'bg-transparent text-black'}`}
    >
      {buttonNames[index]}
    </button>
  );
};

export default DiscoveryButton;


import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';

const RightSection = ({ responses, activeResponse, handleButtonClick }) => {
  return (
    <div className="grid grid-cols-[80%_20%] relative">
    {/* Button Grid */}
    <div className="grid grid-cols-1 items-start  space-y-4">
      {responses.map((response, index) => (
        <DiscoveryButton
          key={index}
          index={index}
          active={activeResponse === index}
          onClick={handleButtonClick}
        />
      ))}
    </div>

    {/* Navigation Arrows */}
    <div className="grid grid-cols-1 mt-2 pl-2  justify-center relative">
      {responses.map((response, index) => (
        // VERTICAL LINE HERE
        <div
          key={index}
          className="relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]"
        >
          {/* Poistioning of Arrow head */}
          <svg
            className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]"
            width="16.8"
            height="24"
            viewBox="0 0 16.8 24"
            fill="none"
          >
            {/* ARROW HEAD HERE */}
            <path
              d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z"
              fill="currentColor"
            />
          </svg>
          {index === 2 && (
            <div class="absolute left-full top-[--pt] h-[2px] bg-black w-5 mt-[11px]" />
          )}
        </div>
      ))}
    </div>
    </div>
  );
};

export default RightSection;

The problems have been defined above the code, Please help me out.