From f969c6e5ca38d89aecc85084eba92797269ad32d Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:33:22 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Implemented=20SectionOu?=
 =?UTF-8?q?rFeatures=20component=20=F0=9F=9A=80=20Added=20a=20new=20compon?=
 =?UTF-8?q?ent=20to=20display=20our=20features=20=F0=9F=96=BC=EF=B8=8F=20U?=
 =?UTF-8?q?tilized=20Next.js=20Image=20component=20for=20image=20handling?=
 =?UTF-8?q?=20=F0=9F=8E=89=20Ready=20to=20enhance=20the=20UI=20further=20?=
 =?UTF-8?q?=F0=9F=90=9B=20Fixed=20minor=20alignment=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SectionOurFeatures.tsx | 74 +++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/SectionOurFeatures.tsx

diff --git a/src/components/SectionOurFeatures.tsx b/src/components/SectionOurFeatures.tsx
new file mode 100644
index 0000000..96dc104
--- /dev/null
+++ b/src/components/SectionOurFeatures.tsx
@@ -0,0 +1,74 @@
+import React, { FC } from "react";
+import rightImgPng from "@/images/our-features.png";
+import Image, { StaticImageData } from "next/image";
+import Badge from "@/shared/Badge";
+
+export interface SectionOurFeaturesProps {
+  className?: string;
+  rightImg?: StaticImageData;
+  type?: "type1" | "type2";
+}
+
+const SectionOurFeatures: FC<SectionOurFeaturesProps> = ({
+  className = "lg:py-14",
+  rightImg = rightImgPng,
+  type = "type1",
+}) => {
+  return (
+    <div
+      className={`nc-SectionOurFeatures relative flex flex-col items-center ${
+        type === "type1" ? "lg:flex-row" : "lg:flex-row-reverse"
+      } ${className}`}
+      data-nc-id="SectionOurFeatures"
+    >
+      <div className="flex-grow">
+        <Image src={rightImg} alt="" />
+      </div>
+      <div
+        className={`max-w-2xl flex-shrink-0 mt-10 lg:mt-0 lg:w-2/5 ${
+          type === "type1" ? "lg:pl-16" : "lg:pr-16"
+        }`}
+      >
+        <span className="uppercase text-sm text-gray-400 tracking-widest">
+          BENnefits
+        </span>
+        <h2 className="font-semibold text-4xl mt-5">Happening cities </h2>
+
+        <ul className="space-y-10 mt-16">
+          <li className="space-y-4">
+            <Badge name="Advertising" />
+            <span className="block text-xl font-semibold">
+              Cost-effective advertising
+            </span>
+            <span className="block mt-5 text-neutral-500 dark:text-neutral-400">
+              With a free listing, you can advertise your rental with no upfront
+              costs
+            </span>
+          </li>
+          <li className="space-y-4">
+            <Badge color="green" name="Exposure " />
+            <span className="block text-xl font-semibold">
+              Reach millions with Chisfis
+            </span>
+            <span className="block mt-5 text-neutral-500 dark:text-neutral-400">
+              Millions of people are searching for unique places to stay around
+              the world
+            </span>
+          </li>
+          <li className="space-y-4">
+            <Badge color="red" name="Secure" />
+            <span className="block text-xl font-semibold">
+              Secure and simple
+            </span>
+            <span className="block mt-5 text-neutral-500 dark:text-neutral-400">
+              A Holiday Lettings listing gives you a secure and easy way to take
+              bookings and payments online
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SectionOurFeatures;