add app section

2026-02-27 11:16:28 +03:30
parent eddf95f609
commit 3c1a082df3
11 changed files with 137 additions and 0 deletions
--- a/messages/fa.json
+++ b/messages/fa.json
@@ -24,6 +24,12 @@
        "title": "سالن ها و کلینیک های زیبایی",
        "description": "از بین صدها مرکز، دقیقا همونی که میخای رو پیدا کن."
    },
+    "App" : {
+        "title": "رزرو راحت تر با اپلیکیشن",
+        "description": "با اپلیکیشن، سریع تر و راحت تر نوبت بگیر.",
+        "download_app" : "دانلود مستقیم",
+        "download_google_play" : "دانلود از گوگل پلی"
+    },
    "Reservation": {
        "title": "رزرو خدمات زیبایی، ساده\u200Cتر از همیشه",
        "stations": "مراکز معتبر",
--- a/public/icons/download.svg
+++ b/public/icons/download.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99935 1.04102C10.3445 1.04102 10.6243 1.32084 10.6243 1.66602V10.8098L12.0248 9.17594C12.2495 8.91386 12.644 8.88351 12.9061 9.10815C13.1682 9.33279 13.1985 9.72735 12.9739 9.98943L10.4739 12.9061C10.3551 13.0446 10.1818 13.1243 9.99935 13.1243C9.8169 13.1243 9.64355 13.0446 9.52481 12.9061L7.02481 9.98943C6.80018 9.72735 6.83053 9.33279 7.09261 9.10815C7.35468 8.88351 7.74925 8.91386 7.97389 9.17594L9.37435 10.8098V1.66602C9.37435 1.32084 9.65417 1.04102 9.99935 1.04102ZM5.8292 6.87599C6.17438 6.87407 6.45575 7.15233 6.45767 7.4975C6.4596 7.84267 6.18133 8.12405 5.83616 8.12597C4.92491 8.13104 4.27901 8.1547 3.7888 8.24475C3.31646 8.33151 3.04307 8.47083 2.84019 8.6737C2.60956 8.90434 2.45918 9.22815 2.37697 9.83963C2.29234 10.4691 2.29102 11.3033 2.29102 12.4995V13.3329C2.29102 14.529 2.29234 15.3633 2.37697 15.9928C2.45918 16.6042 2.60956 16.9281 2.84019 17.1587C3.07083 17.3893 3.39464 17.5397 4.00612 17.6219C4.63558 17.7065 5.46984 17.7079 6.66602 17.7079H13.3327C14.5289 17.7079 15.3631 17.7065 15.9926 17.6219C16.6041 17.5397 16.9279 17.3893 17.1585 17.1587C17.3891 16.9281 17.5395 16.6042 17.6217 15.9928C17.7064 15.3633 17.7077 14.529 17.7077 13.3329V12.4995C17.7077 11.3033 17.7064 10.4691 17.6217 9.83963C17.5395 9.22815 17.3891 8.90434 17.1585 8.6737C16.9556 8.47083 16.6822 8.33151 16.2099 8.24475C15.7197 8.15471 15.0738 8.13104 14.1625 8.12597C13.8174 8.12405 13.5391 7.84267 13.541 7.4975C13.5429 7.15233 13.8243 6.87407 14.1695 6.87599C15.0708 6.881 15.8219 6.90257 16.4357 7.01532C17.0674 7.13135 17.605 7.35238 18.0424 7.78982C18.544 8.29142 18.7597 8.92298 18.8606 9.67307C18.9577 10.3955 18.9577 11.3141 18.9577 12.4538V13.3786C18.9577 14.5182 18.9577 15.4368 18.8606 16.1593C18.7597 16.9094 18.544 17.541 18.0424 18.0426C17.5408 18.5442 16.9092 18.7599 16.1591 18.8608C15.4367 18.9579 14.5181 18.9579 13.3784 18.9579H6.62029C5.48063 18.9579 4.56203 18.9579 3.83956 18.8608C3.08947 18.7599 2.4579 18.5442 1.95631 18.0426C1.45471 17.541 1.23897 16.9094 1.13812 16.1593C1.04099 15.4368 1.041 14.5182 1.04102 13.3786V12.4538C1.041 11.3141 1.04099 10.3955 1.13812 9.67307C1.23897 8.92298 1.45471 8.29142 1.95631 7.78982C2.39375 7.35238 2.93131 7.13134 3.56298 7.01532C4.17678 6.90257 4.92793 6.881 5.8292 6.87599Z" fill="currentColor"/>
+</svg>
--- a/public/icons/google-play.svg
+++ b/public/icons/google-play.svg
@@ -0,0 +1,32 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2324_35498)">
+        <path d="M12.823 6.10533L0.755237 0.0771082C0.603595 0.000152232 0.412819 0.00442757 0.266069 0.0813835C0.114426 0.158339 0.0214844 0.29515 0.0214844 0.449062C0.0214844 0.449062 0.0263761 1.00486 0.0312677 1.91978L8.82162 9.60255L12.823 6.10533Z" fill="url(#paint0_linear_2324_35498)"/>
+        <path d="M0.03125 1.91992C0.0459251 5.22048 0.0899502 13.2324 0.109517 17.2213L8.8265 9.60269L0.03125 1.91992Z" fill="url(#paint1_linear_2324_35498)"/>
+        <path d="M19.7298 9.55566L12.8227 6.10547L8.81641 9.60269L13.3363 13.5531L19.7346 10.2953C19.8863 10.2183 19.9792 10.0773 19.9792 9.92761C19.9792 9.7737 19.8814 9.63262 19.7298 9.55566Z" fill="url(#paint2_linear_2324_35498)"/>
+        <path d="M0.103516 17.2218C0.113299 18.6455 0.118191 19.5561 0.118191 19.5561C0.118191 19.71 0.211133 19.8511 0.362775 19.9238C0.514417 20.0008 0.700301 20.0008 0.851943 19.9238L13.3404 13.5578L8.82049 9.60742L0.103516 17.2218Z" fill="url(#paint3_linear_2324_35498)"/>
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_2324_35498" x1="0.0214844" y1="4.81392" x2="12.8253" y2="4.81392" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#63BE6B"/>
+            <stop offset="0.506" stop-color="#5BBC6A"/>
+            <stop offset="1" stop-color="#4AB96A"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_2324_35498" x1="0.028902" y1="9.57247" x2="8.82141" y2="9.57247" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3EC6F2"/>
+            <stop offset="1" stop-color="#45AFE3"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_2324_35498" x1="8.8211" y1="9.83202" x2="19.9781" y2="9.83202" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FAA51A"/>
+            <stop offset="0.387" stop-color="#FAB716"/>
+            <stop offset="0.741" stop-color="#FAC412"/>
+            <stop offset="1" stop-color="#FAC80F"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_2324_35498" x1="0.105668" y1="14.7943" x2="13.3402" y2="14.7943" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#EC3B50"/>
+            <stop offset="1" stop-color="#E7515B"/>
+        </linearGradient>
+        <clipPath id="clip0_2324_35498">
+            <rect width="20" height="20" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/icons/qrcode.svg
+++ b/public/icons/qrcode.svg
--- a/public/images/Qrcode-sample.jpg
+++ b/public/images/Qrcode-sample.jpg
--- a/public/images/app-section/ellipse.jpg
+++ b/public/images/app-section/ellipse.jpg
--- a/public/images/app-section/mobile1.png
+++ b/public/images/app-section/mobile1.png
--- a/public/images/app-section/mobile2.png
+++ b/public/images/app-section/mobile2.png
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -19,3 +19,6 @@ export { default as MarkerIcon } from "&/icons/marker-icon.svg";
 export { default as MarkerPreviewIcon } from "&/icons/marker-preview.svg";
 export { default as ArrowRight } from "&/icons/arrow-right.svg";
 export { default as ArrowLeft } from "&/icons/arrow-left.svg";
+export { default as DownloadIcon } from "&/icons/download.svg";
+export { default as GooglePlayDownloadIcon } from "&/icons/google-play.svg";
+export { default as QrcodeIcon } from "&/icons/qrcode.svg";
--- a/src/components/Home/Desktop/app/index.tsx
+++ b/src/components/Home/Desktop/app/index.tsx
@@ -0,0 +1,79 @@
+import {useTranslations} from "next-intl";
+import {motion} from "framer-motion";
+import {DownloadIcon, GooglePlayDownloadIcon} from "@/assets";
+import Image from "next/image";
+
+export default function App() {
+    const t = useTranslations("App")
+    return (
+        <div className="relative container mx-auto bg-primary-500 rounded-tl-[100px] rounded-br-[100px] w-full mt-32 mb-16 p-8">
+            <section className="grid grid-cols-2 gap-5">
+                <div className="flex items-center justify-center gap-2 w-full">
+                    <section className="flex flex-col items-center justify-center gap-2 w-full">
+                        <p className="text-text-primary text-lg lg:text-2xl font-semibold">{t("title")}</p>
+                        <p className="text-text-muted text-xs lg:text-sm">{t("description")}</p>
+                        <span className="flex w-full items-center justify-center gap-x-2 mt-4">
+                            <motion.button
+                            whileHover={{scale: 1.05}}
+                            whileTap={{scale: 0.95}}
+                            className="bg-primary-200 flex items-center justify-center gap-x-2 rounded-lg p-3"
+                            >
+                                <DownloadIcon className="size-4 lg:size-6 text-white"/>
+                                <p className="text-white text-xs lg:text-base">{t("download_app")}</p>
+                            </motion.button>
+                            <motion.button
+                                whileHover={{scale: 1.05}}
+                                whileTap={{scale: 0.95}}
+                                className="bg-bg flex items-center justify-center gap-x-2 rounded-lg p-3"
+                            >
+                                <GooglePlayDownloadIcon className="size-4 lg:size-6"/>
+                                <p className="text-text-primary text-xs lg:text-base">{t("download_google_play")}</p>
+                            </motion.button>
+                        </span>
+                    </section>
+                    <div className="md:hidden lg:block">
+                        <Image src={"/images/Qrcode-sample.jpg"} alt={"Qrcode sample..."} width={200} height={200}
+                               className="rounded-3xl"/>
+                    </div>
+                </div>
+                <div className="w-fit absolute bottom-0 left-10 lg:left-20">
+                    <motion.div
+                        className="w-50 sm:w-52 md:w-80 lg:w-90"
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        whileInView={{ scale: 1, opacity: 1 }}
+                        transition={{ delay: 0.4, duration: 0.6 }}
+                        viewport={{ once: true }}
+                    >
+                    <Image src={"/images/app-section/ellipse.jpg"} alt={"app ellipse..."} width={500} height={200} className="object-cover rounded-t-full"/>
+                    </motion.div>
+                    <motion.div
+                        className="absolute left-20 -top-40 flex"
+                        initial={{ opacity: 0, x: -100 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.2, duration: 0.8, ease: "easeOut" }}
+                        viewport={{ once: true }}
+                    >
+                        <motion.div
+                            className="w-50 sm:w-52 md:w-60 lg:w-80"
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            whileInView={{ scale: 1, opacity: 1 }}
+                            transition={{ delay: 0.4, duration: 0.6 }}
+                            viewport={{ once: true }}
+                        >
+                            <Image src={"/images/app-section/mobile1.png"} alt="گوشی سفید" width={500} height={500} className="w-full h-auto" />
+                        </motion.div>
+                        <motion.div
+                            className="w-50 sm:w-52 md:w-90 lg:w-110 z-10 absolute -left-30 top-5"
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            whileInView={{ scale: 1, opacity: 1 }}
+                            transition={{ delay: 0.4, duration: 0.6 }}
+                            viewport={{ once: true }}
+                        >
+                            <Image src={"/images/app-section/mobile2.png"} alt="گوشی مشکی" width={500} height={500} className="w-full h-auto" />
+                        </motion.div>
+                    </motion.div>
+                </div>
+            </section>
+        </div>
+    )
+}
--- a/src/components/Home/Desktop/index.tsx
+++ b/src/components/Home/Desktop/index.tsx
@@ -2,6 +2,7 @@ import BannerComponent from "./Banner";
 import Categories from "./Categories";
 import Reservation from "./Reservation";
 import Salons from "./Salons";
+import App from "@/components/Home/Desktop/app";

 export default function DesktopHome() {
    return (
@@ -10,6 +11,7 @@ export default function DesktopHome() {
            <Categories />
            <Reservation />
            <Salons />
+            <App />
        </div>
    );
 }