From c22b48ec32c48d067ed5295ba4ddea2be0a06413 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 19:33:04 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20SectionHero3=20component?=
 =?UTF-8?q?=20=F0=9F=9A=80=20Implemented=20hero=20section=20=F0=9F=8E=A8?=
 =?UTF-8?q?=20Styled=20hero=20section=20=F0=9F=92=84=20Enhanced=20hero=20d?=
 =?UTF-8?q?esign=20=F0=9F=94=A7=20Refactored=20SectionHero3=20component=20?=
 =?UTF-8?q?=F0=9F=91=A8=E2=80=8D=F0=9F=92=BB=20Improved=20code=20readabili?=
 =?UTF-8?q?ty=20=F0=9F=93=B8=20Added=20hero=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(server-components)/SectionHero3.tsx | 42 ++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/app/(server-components)/SectionHero3.tsx

diff --git a/src/app/(server-components)/SectionHero3.tsx b/src/app/(server-components)/SectionHero3.tsx
new file mode 100644
index 0000000..cf64c8e
--- /dev/null
+++ b/src/app/(server-components)/SectionHero3.tsx
@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+import imagePng from "@/images/travelhero2.png";
+import Image from "next/image";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+
+export interface SectionHero3Props {
+  className?: string;
+}
+
+const SectionHero3: FC<SectionHero3Props> = ({ className = "" }) => {
+  return (
+    <div
+      className={`nc-SectionHero3 relative ${className}`}
+      data-nc-id="SectionHero3"
+    >
+      <div className="absolute z-10 inset-x-0 top-[10%] sm:top-[15%] text-center flex flex-col items-center max-w-2xl mx-auto space-y-4 lg:space-y-5 xl:space-y-8">
+        <span className="sm:text-lg md:text-xl font-semibold text-neutral-900">
+          Booking tax-free from Chis. platform
+        </span>
+        <h2 className="font-bold text-black text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl !leading-[115%] ">
+          New generation <br /> of booking
+        </h2>
+        <ButtonPrimary
+          sizeClass="px-6 py-3 lg:px-8 lg:py-4 rounded-xl"
+          fontSize="text-sm sm:text-base lg:text-lg font-medium"
+        >
+          Keep calm & travel on
+        </ButtonPrimary>
+      </div>
+      <div className="relative aspect-w-1 aspect-h-1 sm:aspect-w-4 sm:aspect-h-3 lg:aspect-w-16 lg:aspect-h-9 xl:aspect-h-8 ">
+        <Image
+          className="absolute inset-0 object-cover rounded-xl"
+          src={imagePng}
+          alt="hero"
+          priority
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SectionHero3;