website-new/frontend/src/components/CareerCardsTemplates/CareerCard.jsx

import React from 'react';
import PropTypes from 'prop-types';
import net from './../../assets/icons/net.svg';

const _card = {
  role: '.Net Developer',
  shortDetails: 'All levels of experience',
};

const CareerCard = ({ card, setExpanded, setExpandedCard }) => {
  return (
    <div
      onClick={() => {
        setExpanded(true);
        setExpandedCard(card);
      }}
      className={'card max-w-[360px]'}
    >
      <img
        src={net}
        alt=".NET"
        className={'ml-auto mr-auto block w-[70px] bg-baby-blue text-dark-gray'}
      />
      <h3 className={'mt-6 font-semibold text-2xl'}>{card.role}</h3>
      <p className={'mt-6 text-sm'}>{_card.shortDetails}</p>
      <a
        href={'#'}
        className={
          'min-w-max btn btn_primary mt-8 opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all'
        }
      >
        Read More
      </a>
    </div>
  );
};

CareerCard.propTypes = {
  card: PropTypes.object,
};

export default CareerCard;