Current design
Desired Design

The arrows outside the buttons should always be centered on the right border, even if the button text becomes double-lined. Currently, the first three arrows might look fine, but if the text wraps to two lines, it will ruin the design. The last two buttons already look misaligned and need adjustment. Ensure that the arrows are dynamically centred based on the button text length, so the alignment remains perfect regardless of the text length.

// DiscoveryResponse.jsx (Parent Component)

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;

// RightSection.jsx which includes the navigation arrows
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 pl-2 relative">
        {responses.map((response, index) => (
          <div key={index} className="relative w-full flex items-center">
            {/* Vertical Line */}
            <div className="w-full h-full bg-gray-200" />

            {/* Arrow Head */}
            <svg
              className="absolute right-0 transform -translate-y-1/2"
              width="16.8"
              height="24"
              viewBox="0 0 16.8 24"
              fill="none"
              style={{ top: '50%' }}
            >
              <path
                d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z"
                fill="currentColor"
              />
            </svg>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RightSection;

// 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;

Please resolve the issue of the arrow head alignment