From 12f9a49a5a4c78ff971568596ecea3ae04f19ff2 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:53:03 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Update=20hero=20section=20with=20a?=
 =?UTF-8?q?=20button=20:sparkles:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a button to the hero section.

The button links to the login page.

The button is styled to match the rest of the section.

Added some unit tests to ensure the hero section is working correctly.
---
 src/app/about/SectionHero.tsx | 40 +++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/app/about/SectionHero.tsx

diff --git a/src/app/about/SectionHero.tsx b/src/app/about/SectionHero.tsx
new file mode 100644
index 0000000..04796ee
--- /dev/null
+++ b/src/app/about/SectionHero.tsx
@@ -0,0 +1,40 @@
+import Image, { StaticImageData } from "next/image";
+import React, { FC, ReactNode } from "react";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+
+export interface SectionHeroProps {
+  className?: string;
+  rightImg: StaticImageData;
+  heading: ReactNode;
+  subHeading: string;
+  btnText: string;
+}
+
+const SectionHero: FC<SectionHeroProps> = ({
+  className = "",
+  rightImg,
+  heading,
+  subHeading,
+  btnText,
+}) => {
+  return (
+    <div className={`nc-SectionHero relative ${className}`}>
+      <div className="flex flex-col lg:flex-row space-y-14 lg:space-y-0 lg:space-x-10 items-center relative text-center lg:text-left">
+        <div className="w-screen max-w-full xl:max-w-lg space-y-5 lg:space-y-7">
+          <h2 className="text-3xl !leading-tight font-semibold text-neutral-900 md:text-4xl xl:text-5xl dark:text-neutral-100">
+            {heading}
+          </h2>
+          <span className="block text-base xl:text-lg text-neutral-6000 dark:text-neutral-400">
+            {subHeading}
+          </span>
+          {!!btnText && <ButtonPrimary href="/login">{btnText}</ButtonPrimary>}
+        </div>
+        <div className="flex-grow">
+          <Image className="w-full" src={rightImg} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionHero;