homepahe- hero section design updated and optimized for mobile view
All checks were successful
Deploy Canina / deploy (push) Successful in 2m1s
All checks were successful
Deploy Canina / deploy (push) Successful in 2m1s
This commit is contained in:
parent
ee4ee7d842
commit
769192e962
@ -36,6 +36,12 @@ export class MenuController {
|
||||
return this.menuService.findByType(type);
|
||||
}
|
||||
|
||||
@Get('type/:type')
|
||||
@ApiOperation({ summary: 'دریافت منو عمومی با پارامتر مسیر' })
|
||||
findByTypeParam(@Param('type') type: string) {
|
||||
return this.menuService.findByType(type);
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles('Admin')
|
||||
@ApiBearerAuth()
|
||||
|
||||
@ -111,14 +111,14 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white py-12 lg:py-28 border-b border-medical-gray-100">
|
||||
<section className="relative overflow-hidden bg-white py-3 sm:py-6 border-b border-medical-gray-100">
|
||||
{/* Background patterns */}
|
||||
<div className="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none select-none overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-[800px] h-[800px] bg-canina-blue rounded-full blur-[120px] -mr-96 -mt-96" />
|
||||
<div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-medical-gray-500 rounded-full blur-[100px] -ml-40 -mb-40" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 relative flex flex-col lg:flex-row items-center gap-12 mb-16 lg:mb-20">
|
||||
<div className="max-w-7xl mx-auto px-4 relative flex flex-col lg:flex-row gap-4 sm:gap-12 mb-16 lg:mb-20">
|
||||
{/* Content */}
|
||||
<div className="lg:w-1/2 text-center lg:text-right">
|
||||
<motion.div
|
||||
@ -126,26 +126,26 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/5 border border-canina-blue/10 rounded-full mb-6">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/5 border border-canina-blue/10 rounded-full mt-3 mb-3 sm:mb-5">
|
||||
<span className="w-2 h-2 rounded-full bg-canina-blue animate-pulse" />
|
||||
<span className="text-canina-blue text-xs font-bold uppercase tracking-widest leading-none">
|
||||
{mounted && isInitialized ? getText('hero_badge', "از ۱۹۸۴ در خدمت سلامت حیوانات") : "از ۱۹۸۴ در خدمت سلامت حیوانات"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl lg:text-7xl font-black text-medical-gray-900 leading-[1.2] mb-6 font-lalezar tracking-wide">
|
||||
<h1 className="text-4xl lg:text-7xl font-black text-medical-gray-900 leading-[1.2] mb-2 sm:mb-6 font-lalezar tracking-wide">
|
||||
{titleParts[0]} <br />
|
||||
{titleParts[1] && <span className="text-canina-blue">{titleParts[1]}</span>}
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className="text-lg lg:text-xl text-medical-gray-600 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-vazir animate-fade-in"
|
||||
className="text-lg lg:text-xl text-medical-gray-600 mb-3 sm:mb-5 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-vazir animate-fade-in"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: subtitle
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-center lg:justify-start gap-4 sm:gap-6">
|
||||
<div className="whitespace-nowrap flex flex-nowrap justify-center lg:justify-start gap-2 sm:gap-4 sm:gap-6">
|
||||
<button
|
||||
onClick={() => {
|
||||
const element = document.getElementById('canino-advisor');
|
||||
@ -153,7 +153,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
className="bg-canina-blue text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-canina-blue/90 hover:shadow-2xl focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all flex items-center gap-2 group font-vazir min-h-[58px] shadow-lg shadow-canina-blue/20 cursor-pointer"
|
||||
className="bg-canina-blue text-white px-3 sm:px-10 py-2 sm:py-5 rounded-full font-bold text-lg hover:bg-canina-blue/90 hover:shadow-2xl focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all flex items-center gap-2 group font-vazir min-h-[58px] shadow-lg shadow-canina-blue/20 cursor-pointer"
|
||||
>
|
||||
{mounted && isInitialized ? getText('hero_btn_advisor', "دستیار سلامت پت") : "دستیار سلامت پت"}
|
||||
<ChevronLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
||||
@ -166,7 +166,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
|
||||
router.push('/shop');
|
||||
}
|
||||
}}
|
||||
className="bg-white border-2 border-medical-gray-900 text-medical-gray-900 px-10 py-5 rounded-full font-bold text-lg hover:bg-medical-gray-50 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all font-vazir min-h-[58px] shadow-sm cursor-pointer"
|
||||
className="bg-white border-2 border-medical-gray-900 text-medical-gray-900 px-3 sm:px-10 py-2 sm:py-5 rounded-full font-bold text-lg hover:bg-medical-gray-50 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all font-vazir min-h-[58px] shadow-sm cursor-pointer"
|
||||
>
|
||||
{mounted && isInitialized ? getText('hero_btn_products', "مشاهده محصولات") : "مشاهده محصولات"}
|
||||
</button>
|
||||
@ -176,7 +176,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
|
||||
|
||||
{/* Visual Element & Interactive Slider */}
|
||||
<div
|
||||
className="lg:w-1/2 relative w-full max-w-lg lg:max-w-none mx-auto"
|
||||
className="lg:w-[40%] relative w-full max-w-lg lg:max-w-none mx-auto"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user