From 07c861a8c2924e51ea66638cde4825eef51a176b Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 19:33:58 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20a=20new=20component=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactored=20code=20for=20better=20read?=
 =?UTF-8?q?ability=20=F0=9F=93=B7=20Updated=20image=20handling=20?=
 =?UTF-8?q?=F0=9F=9A=A7=20Work=20in=20progress:=20SectionHeroArchivePage?=
 =?UTF-8?q?=20=F0=9F=90=9B=20Fixed=20a=20bug=20in=20SectionHeroArchivePage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(server-components)/SectionHeroArchivePage.tsx b/src/app/(server-components)/SectionHeroArchivePage.tsx
new file mode 100644
index 0000000..deff98b
--- /dev/null
+++ b/src/app/(server-components)/SectionHeroArchivePage.tsx
@@ -0,0 +1,67 @@
+import React, { FC, ReactNode } from "react";
+import imagePng from "@/images/hero-right2.png";
+import HeroSearchForm, {
+  SearchTab,
+} from "../(client-components)/(HeroSearchForm)/HeroSearchForm";
+import Image, { StaticImageData } from "next/image";
+
+export interface SectionHeroArchivePageProps {
+  className?: string;
+  listingType?: ReactNode;
+  currentPage: "Stays" | "Experiences" | "Cars" | "Flights";
+  currentTab: SearchTab;
+  rightImage?: StaticImageData;
+}
+
+const SectionHeroArchivePage: FC<SectionHeroArchivePageProps> = ({
+  className = "",
+  listingType,
+  currentPage,
+  currentTab,
+  rightImage = imagePng,
+}) => {
+  return (
+    <div
+      className={`nc-SectionHeroArchivePage flex flex-col relative ${className}`}
+      data-nc-id="SectionHeroArchivePage"
+    >
+      <div className="flex flex-col lg:flex-row lg:items-center">
+        <div className="flex-shrink-0 lg:w-1/2 flex flex-col items-start space-y-6 lg:space-y-10 pb-14 lg:pb-64 xl:pb-80 xl:pr-14 lg:mr-10 xl:mr-0">
+          <h2 className="font-medium text-4xl md:text-5xl xl:text-7xl leading-[110%]">
+            Tokyo, Jappan
+          </h2>
+          <div className="flex items-center text-base md:text-lg text-neutral-500 dark:text-neutral-400">
+            <i className="text-2xl las la-map-marked"></i>
+            <span className="ml-2.5">Jappan </span>
+            <span className="mx-5"></span>
+            {listingType ? (
+              listingType
+            ) : (
+              <>
+                <i className="text-2xl las la-home"></i>
+                <span className="ml-2.5">112 properties</span>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="flex-grow">
+          <Image
+            className="w-full"
+            src={rightImage}
+            alt="hero"
+            priority
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw"
+          />
+        </div>
+      </div>
+
+      <div className="hidden lg:flow-root w-full">
+        <div className="z-10 lg:-mt-40 xl:-mt-56 w-full">
+          <HeroSearchForm currentPage={currentPage} currentTab={currentTab} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionHeroArchivePage;