Ebube
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import styles from "./hero.module.css";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface PersonalHeroProps {
|
|
heading?: string;
|
|
body?: string;
|
|
buttonLink?: string;
|
|
buttonText?: string;
|
|
}
|
|
const PersonalHero: React.FC<PersonalHeroProps> = ({
|
|
heading,
|
|
body,
|
|
buttonLink = "#",
|
|
buttonText,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`w-full max-[28.125rem] relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.personalHeroBg}`}
|
|
>
|
|
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
|
|
<h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
|
|
{heading}
|
|
</h1>
|
|
<p className="p-[.3125rem] pr-5 font-medium table w-[25.375rem]">{body}</p>
|
|
<Link to={buttonLink}>
|
|
<button className="bg-[#A6368C] text-white text-[.9375rem] w-[10.9375rem] py-[.4375rem] px-[.625rem]">
|
|
{buttonText}
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PersonalHero;
|