Added personal image to the pages

2024-03-20 01:37:31 +01:00
parent 2890677472
commit 86c0a236fe
10 changed files with 70 additions and 7 deletions
@@ -0,0 +1,34 @@
+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 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">
+        <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>{body}</p>
+        <Link to={buttonLink}>
+          <button>{buttonText}</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalHero;