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

change style

Browse Source
This commit is contained in:
AminGhasempoor
2026-05-07 10:17:47 +03:30
parent fa8ea8d8a9
commit 84f49a75ae
2 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Home/Desktop/Banner/SearchBar.tsx
View File

@@ -18,7 +18,7 @@ export default function SearchBar() {
<button
type="button"
onClick={() => openModal(<LocationModal />)}
className="w-full text-right text-gray-500"
className="w-full text-right text-text-primary"
>
آدرس
</button>

44
src/components/Home/Desktop/Banner/index.tsx
View File

@@ -18,28 +18,28 @@ export default function BannerComponent() {
initial={{ opacity: 0, y: 60 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.9, ease: "easeOut" }}
className="bg-home-page-banner relative mx-16 mt-16 rounded-tr-[200px] rounded-bl-[200px] px-2 pt-2"
className="bg-home-page-banner relative mx-16 mt-16 md:rounded-tr-[100px] md:rounded-bl-[80px] lg:rounded-tr-[150px] lg:rounded-bl-[150px] px-2 pt-2"
>
{/* ================= Header ================= */}
<header className="flex w-full items-center justify-center pt-8">
<div className="flex w-full items-center justify-center space-x-5">
<header className="flex w-full items-center justify-center pt-8 px-5">
<div className="flex w-full items-center justify-start space-x-5">
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 200 }}
>
<LogoIcon className="size-12" />
<LogoIcon className="size-8 lg:size-10" />
</motion.div>
<ThemeToggle />
{["home", "search", "salons", "about_us", "contact_us"].map((item, index) => (
{["home", "salons", "about_us", "contact_us"].map((item, index) => (
<motion.p
key={item}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 * index }}
className="text-text-primary hover:text-primary-200 cursor-pointer transition"
className="text-text-primary text-center hover:text-primary-200 cursor-pointer transition text-xs lg:text-sm"
>
{t(item)}
</motion.p>
@@ -49,17 +49,17 @@ export default function BannerComponent() {
<div className="flex w-full items-center justify-center">
{isAuth ? (
<motion.div whileHover={{ scale: 1.1 }} className="cursor-pointer">
<AvatarIcon className="h-6 w-6" />
<AvatarIcon className="size-4 lg:size-5" />
</motion.div>
) : (
<span className="flex w-full items-center justify-center gap-x-2">
<span className="flex w-full items-center justify-end gap-x-2">
<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"
>
<MyOrderIcon className="h-6 w-6" />
<p>{t("my_order")}</p>
<MyOrderIcon className="size-5 lg:size-6" />
<p className="text-xs lg:text-base">{t("my_order")}</p>
</motion.button>
<motion.button
@@ -67,8 +67,8 @@ export default function BannerComponent() {
whileTap={{ scale: 0.95 }}
className="bg-primary-200 flex items-center justify-center gap-x-2 rounded-lg p-3"
>
<AvatarIcon className="h-6 w-6" />
<p>{t("auth")}</p>
<AvatarIcon className="size-4 lg:size-5" />
<p className="text-xs lg:text-base">{t("auth")}</p>
</motion.button>
</span>
)}
@@ -80,7 +80,7 @@ export default function BannerComponent() {
{/* ===== Left Content ===== */}
<div className="flex w-full flex-col items-center justify-center space-y-7">
{/* Title */}
<motion.div className="text-4xl font-bold">
<motion.div className="text-2xl lg:text-4xl font-bold">
<motion.span
variants={{
hidden: { opacity: 0, y: 20 },
@@ -124,7 +124,7 @@ export default function BannerComponent() {
hidden: { opacity: 0 },
visible: { opacity: 1 },
}}
className="text-center text-xs"
className="text-center px-10 text-xs"
>
{t("des")}
</motion.p>
@@ -147,10 +147,17 @@ export default function BannerComponent() {
{/* ===== Right Image ===== */}
<motion.div
animate={{ y: [0, -12, 0] }}
transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
className="flex w-full items-center justify-center"
// animate={{ y: [0, -12, 0] }}
// transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
className="flex relative w-full items-center justify-center"
>
<motion.div
className="w-50 sm:w-52 md:w-78 lg:w-90 absolute -bottom-50 left-10"
initial={{ scale: 0.9, opacity: 0 }}
whileInView={{ scale: 1, opacity: 1 }}
transition={{ delay: 0.4, duration: 0.6 }}
viewport={{ once: true }}
>
<Image
src={BannerImage}
alt="main_image"
@@ -159,9 +166,10 @@ export default function BannerComponent() {
height={200}
priority
/>
</motion.div>
</motion.div>
</motion.main>
<div className="absolute -bottom-10 left-24">
<div className="absolute -bottom-10 left-10 lg:left-24">
<SearchBar />
</div>
</motion.div>