aminghasempoor/SalonRo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build and format

Browse Source
This commit is contained in:
AminGhasempoor
2026-02-26 10:42:38 +03:30
parent 632304c271
commit aea8fb8b3d
3 changed files with 31 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
messages/fa.json
View File

@@ -22,16 +22,16 @@
},
"Reservation": {
"title": "رزرو خدمات زیبایی، ساده\u200Cتر از همیشه",
"stations" : "مراکز معتبر",
"online_reserve" : "رزرو انلاین سریع",
"start_reserve" : "شروع رزرو",
"customer" : "مشتریان",
"customer_number" : "+100K",
"clinic" : "کلینیک فعال",
"clinic_number" : "+336",
"salon" : "سالن زیبایی",
"salon_number" : "+345",
"score" : "امتیازدهی واقعی کاربران",
"stations": "مراکز معتبر",
"online_reserve": "رزرو انلاین سریع",
"start_reserve": "شروع رزرو",
"customer": "مشتریان",
"customer_number": "+100K",
"clinic": "کلینیک فعال",
"clinic_number": "+336",
"salon": "سالن زیبایی",
"salon_number": "+345",
"score": "امتیازدهی واقعی کاربران",
"description": "ما این پلتفرم را ساختیم تا بتوانید بهترین سالن\u200Cهای زیبایی و کلینیک\u200Cهای معتبر را به راحتی پیدا کنید.\n مقایسه، رزرو آنلاین و تجربه\u200Cای بی\u200Cدردسر."
},
"Application": {

103
src/components/Home/Desktop/Reservation/index.tsx
View File

@@ -9,73 +9,42 @@ export default function Reservation() {
const t = useTranslations("Reservation");
return (
<section className="w-full my-32 lg:my-40">
<section className="my-32 w-full lg:my-40">
<div className="container mx-auto px-6">
<motion.div
initial={{ opacity: 0, y: 80 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="
relative
bg-primary-50
rounded-tr-[60px] md:rounded-tr-[80px]
rounded-bl-[60px] md:rounded-bl-[80px]
p-8 md:px-12
grid
gap-16
grid-cols-2
items-center
"
className="bg-primary-50 relative grid grid-cols-2 items-center gap-16 rounded-tr-[60px] rounded-bl-[60px] p-8 md:rounded-tr-[80px] md:rounded-bl-[80px] md:px-12"
>
{/* ================= TEXT CONTENT ================= */}
<motion.div
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.3, duration: 0.7 }}
className="text-white space-y-8 order-1 w-full lg:px-10"
className="order-1 w-full space-y-8 text-white lg:px-10"
>
<h2 className="text-xl md:text-2xl lg:text-3xl font-bold leading-relaxed">
{t("title")}
</h2>
<h2 className="text-xl leading-relaxed font-bold md:text-2xl lg:text-3xl">{t("title")}</h2>
<p className="text-sm md:text-base text-primary-100 leading-8 max-w-xl">
{t("description")}
</p>
<p className="text-primary-100 max-w-xl text-sm leading-8 md:text-base">{t("description")}</p>
{/* Features */}
<div className="flex flex-wrap items-center gap-x-8 gap-y-4 pt-2 text-sm">
{[t("stations"), t("online_reserve"), t("score")].map(
(item, i) => (
<div key={i} className="flex items-center gap-2">
<span className="w-3 h-3 rounded-full bg-primary-200" />
<span className="text-xs md:text-sm">{item}</span>
</div>
)
)}
{[t("stations"), t("online_reserve"), t("score")].map((item, i) => (
<div key={i} className="flex items-center gap-2">
<span className="bg-primary-200 h-3 w-3 rounded-full" />
<span className="text-xs md:text-sm">{item}</span>
</div>
))}
</div>
{/* Button */}
<motion.button
whileHover={{ scale: 1.07 }}
whileTap={{ scale: 0.95 }}
className="
mt-4
bg-white
flex
items-center
gap-2
text-primary-100
px-6
py-3
rounded-xl
font-medium
shadow-lg
w-fit
"
className="text-primary-100 mt-4 flex w-fit items-center gap-2 rounded-xl bg-white px-6 py-3 font-medium shadow-lg"
>
{t("start_reserve")}
<ArrowTopLeft className="size-5" />
@@ -88,23 +57,10 @@ export default function Reservation() {
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4, duration: 0.9 }}
className="relative flex flex-col items-center order-2"
className="relative order-2 flex flex-col items-center"
>
{/* Image */}
<div
className="
relative
rounded-full
overflow-hidden
border-8
border-white
shadow-2xl
w-[260px] h-[320px]
md:w-[320px] md:h-[420px]
lg:w-[450px] lg:h-[580px]
"
>
<div className="relative h-[320px] w-[260px] overflow-hidden rounded-full border-8 border-white shadow-2xl md:h-[420px] md:w-[320px] lg:h-[580px] lg:w-[450px]">
<Image
src="/images/reservation/reservation.jpg"
alt="reservation"
@@ -118,43 +74,22 @@ export default function Reservation() {
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.6 }}
className="
mt-8
lg:absolute
lg:-bottom-16
bg-card
w-full
max-w-md
rounded-[40px] md:rounded-[60px]
shadow-2xl
px-6
py-6
flex
items-center
justify-between
gap-6
"
className="bg-card mt-8 flex w-full max-w-md items-center justify-between gap-6 rounded-[40px] px-6 py-6 shadow-2xl md:rounded-[60px] lg:absolute lg:-bottom-16"
>
{[
{ number: t("customer_number"), label: t("customer") },
{ number: t("clinic_number"), label: t("clinic") },
{ number: t("salon_number"), label: t("salon") },
].map((item, i) => (
<div key={i} className="text-center flex-1">
<p className="text-lg md:text-xl font-bold text-text-primary">
{item.number}
</p>
<p className="text-xs md:text-sm text-text-muted mt-1">
{item.label}
</p>
<div key={i} className="flex-1 text-center">
<p className="text-text-primary text-lg font-bold md:text-xl">{item.number}</p>
<p className="text-text-muted mt-1 text-xs md:text-sm">{item.label}</p>
</div>
))}
</motion.div>
</motion.div>
</motion.div>
</div>
</section>
);
}
}

4
src/styles/globals.css
View File

@@ -131,7 +131,7 @@ body {
/* =====================
Primary (Purple)
====================== */
--color-primary-50: #140B4E;
--color-primary-50: #140b4e;
--color-primary-100: #7d34b9;
--color-primary-200: #9a5cff;
--color-primary-300: #b38bff;
@@ -192,7 +192,7 @@ body {
--color-text-muted: #9ca3af;
--color-primary-100: #b38bff;
--color-primary-50: #140B4E;
--color-primary-50: #140b4e;
--color-primary-200: #9a5cff;
--color-primary-300: #7d34b9;