Added personal image to the pages

src/components/Home/Hero/PersonalHero.tsx

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

src/components/Home/Hero/hero.module.css

@@ -6,4 +6,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.personalHeroBg{
+    background: url(../../../assets/images/personal-page.jpg) no-repeat;
+    background-size: cover;
+    background-position: center;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/components/Home/Hero/index.ts

@@ -1,3 +1,4 @@
 import Hero from "./Hero";
+import PersonalHero from "./PersonalHero";
 
-export { Hero };
+export { Hero, PersonalHero };

src/components/Home/index.ts

@@ -1,4 +1,4 @@
-import { Hero } from "./Hero";
+import { Hero, PersonalHero } from "./Hero";
 import { Requirements } from "./Requirements";
 
-export {Hero, Requirements}
+export {Hero, Requirements, PersonalHero}