import InlineSvg from '@hashicorp/react-inline-svg' import Image from '@hashicorp/react-image' import Button from '@hashicorp/react-button' import QuoteMarksIcon from './img/quote.svg?include' export default function CaseStudySlide({ caseStudy: { person, quote, company, caseStudyURL }, }) { return ( <blockquote className="g-grid-container case-slide"> <InlineSvg className="quotes" src={QuoteMarksIcon} /> <h4 className="case g-type-display-4">{quote}</h4> <div className="case-content"> <div className="person-container"> <Image className="person-photo" url={person.photo} aspectRatio={[1, 1]} alt={`${person.firstName} ${person.lastName}`} /> <div className="person-name"> <h5 className="g-type-display-5"> {person.firstName} {person.lastName} </h5> <p> {person.title}, {company.name} </p> </div> </div> <Image className="company-logo" url={company.logo} alt={company.name} /> </div> <Button title="Read more" url={caseStudyURL} theme={{ variant: 'tertiary', brand: 'consul', background: 'light', }} linkType="outbound" /> </blockquote> ) }