From 6a13d1c0d691916165b8f6245c45ee73349fbcab Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:05:06 +0300
Subject: [PATCH] Update SectionDowloadApp component

* Add a responsive background image
* Add two images to the right side of the section
* Add a description text
---
 src/app/(home)/SectionDowloadApp.tsx | 64 ++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/app/(home)/SectionDowloadApp.tsx

diff --git a/src/app/(home)/SectionDowloadApp.tsx b/src/app/(home)/SectionDowloadApp.tsx
new file mode 100644
index 0000000..060e80e
--- /dev/null
+++ b/src/app/(home)/SectionDowloadApp.tsx
@@ -0,0 +1,64 @@
+import BackgroundSection from "@/components/BackgroundSection";
+import React from "react";
+import appSvg1 from "@/images/appSvg1.png";
+import appSvg2 from "@/images/appSvg2.png";
+import appRightImgTree from "@/images/appRightImgTree.png";
+import dowloadAppBGPng from "@/images/dowloadAppBG.png";
+import appRightImg from "@/images/appRightImg.png";
+import btnIosPng from "@/images/btn-ios.png";
+import btnAndroidPng from "@/images/btn-android.png";
+import Image from "next/image";
+
+const SectionDowloadApp = () => {
+  return (
+    <div className="relative pb-0 pt-24 lg:py-32 xl:py-40 2xl:py-48">
+      <BackgroundSection className="bg-neutral-100 bg-opacity-80 dark:bg-opacity-100 ">
+        <Image
+          className="absolute inset-0 w-full h-full object-cover rounded-3xl object-right"
+          src={dowloadAppBGPng}
+          alt="dowloadAppPng"
+        />
+
+        <div className="hidden lg:block absolute right-0 bottom-0 max-w-xl xl:max-w-2xl rounded-3xl overflow-hidden">
+          <Image src={appRightImg} alt="" />
+        </div>
+        <div className="absolute right-0 top-0 max-w-2xl">
+          <Image src={appRightImgTree} alt="" />
+        </div>
+        <div className="absolute left-0 bottom-10 max-w-2xl">
+          <Image src={appSvg1} alt="" />
+        </div>
+      </BackgroundSection>
+
+      <div className="relative inline-block ">
+        <h2 className="text-5xl md:text-6xl xl:text-7xl font-bold text-neutral-800">
+          Mobile Apps
+        </h2>
+        <span className="block mt-7 max-w-md text-neutral-6000">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus
+          porttitor nisl, sit amet finibus libero.
+        </span>
+        <div className="flex space-x-3 mt-10 sm:mt-14">
+          <a href="##" target="_blank" rel="noopener noreferrer">
+            <Image src={btnIosPng} alt="" />
+          </a>
+          <a href="##" target="_blank" rel="noopener noreferrer">
+            <Image src={btnAndroidPng} alt="" />
+          </a>
+        </div>
+
+        <Image
+          className="hidden lg:block absolute lg:left-full lg:top-0 xl:top-1/2 z-10  lg:max-w-sm 2xl:max-w-none"
+          src={appSvg2}
+          alt=""
+        />
+
+        <div className="block lg:hidden mt-10 max-w-2xl rounded-3xl overflow-hidden">
+          <Image src={appRightImg} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionDowloadApp;