design: redesign dual landing cards with rich thematic background gradients and fix footer contrast accessibility issues
This commit is contained in:
parsa aghaei
parent
452e3d49ee
commit
2402efac15
@ -34,34 +34,39 @@ export default function Home() {
|
||||
{/* Navigation to Sections */}
|
||||
<section className="py-12 bg-medical-gray-50 border-y border-medical-gray-100 font-sans">
|
||||
<div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-8">
|
||||
{/* Specialty Shop Card */}
|
||||
<Link
|
||||
href="/shop"
|
||||
className="bg-white p-12 rounded-[2.5rem] border border-medical-gray-250 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block"
|
||||
className="bg-gradient-to-br from-blue-50/60 to-canina-blue/5 p-12 rounded-[2.5rem] border border-blue-100/60 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute -top-12 -left-12 w-32 h-32 bg-canina-blue/5 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700" />
|
||||
<h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors font-lalezar tracking-wide">
|
||||
{getText('nav_card_shop_title', "فروشگاه تخصصی")}
|
||||
</h3>
|
||||
<p className="text-medical-gray-500 mb-8 leading-relaxed font-shabnam">
|
||||
<p className="text-medical-gray-600 mb-8 leading-relaxed font-shabnam">
|
||||
{getText('nav_card_shop_desc', "دسترسی به تمامی محصولات بر اساس علائم بالینی و نیازهای پت شما.")}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs font-vazir">
|
||||
{getText('nav_card_shop_cta', "کاتالوگ کامل محصولات")}
|
||||
<span className="text-lg">←</span>
|
||||
<span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Scientific Wiki Card */}
|
||||
<Link
|
||||
href="/wiki"
|
||||
className="bg-white p-12 rounded-[2.5rem] border border-medical-gray-250 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block"
|
||||
className="bg-gradient-to-br from-emerald-50/60 to-green-50/20 p-12 rounded-[2.5rem] border border-emerald-100/60 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block relative overflow-hidden"
|
||||
>
|
||||
<h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors font-lalezar tracking-wide">
|
||||
<div className="absolute -top-12 -left-12 w-32 h-32 bg-emerald-500/5 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700" />
|
||||
<h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-emerald-700 transition-colors font-lalezar tracking-wide">
|
||||
{getText('nav_card_wiki_title', "دانشنامه علمی")}
|
||||
</h3>
|
||||
<p className="text-medical-gray-500 mb-8 leading-relaxed font-shabnam">
|
||||
<p className="text-medical-gray-600 mb-8 leading-relaxed font-shabnam">
|
||||
{getText('nav_card_wiki_desc', "آشنایی با ترکیبات نایاب و استانداردهای دارویی محصولات آلمانی کانینا.")}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs font-vazir">
|
||||
<div className="flex items-center gap-2 text-emerald-700 font-black tracking-widest uppercase text-xs font-vazir">
|
||||
{getText('nav_card_wiki_cta', "مطالعه مقالات تخصصی")}
|
||||
<span className="text-lg">←</span>
|
||||
<span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -23,12 +23,12 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
|
||||
<span className="text-[10px] text-white/40 font-bold uppercase tracking-widest leading-none mt-1.5 font-vazir">{getText('brand_subtitle', "نماینده رسمی Canina Pharma GmbH آلمان")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-white/60 leading-relaxed font-medium">
|
||||
<p className="text-sm text-slate-300 leading-relaxed font-medium">
|
||||
{getText('footer_brand_desc', "تدارک هوشمندانه سلامت برای همراهان وفادار شما. واردکننده انحصاری مکملهای درمانی با گرید دارویی اختصاصی از آلمان با سابقه ۴۰ سال نوآوری.")}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{[Instagram, Globe].map((Icon, i) => (
|
||||
<a key={i} href="#" className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-white/40">
|
||||
<a key={i} href="#" className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
|
||||
<Icon className="w-5 h-5" />
|
||||
</a>
|
||||
))}
|
||||
@ -37,7 +37,7 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="space-y-8">
|
||||
<h4 className="text-lg font-black text-canina-blue italic underline decoration-white/20 underline-offset-8">{getText('footer_links_title', "دسترسی سریع")}</h4>
|
||||
<h4 className="text-lg font-black text-white italic border-b-2 border-canina-blue pb-2 max-w-max">{getText('footer_links_title', "دسترسی سریع")}</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-slate-300">
|
||||
<li onClick={() => onShopNavigate()} className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
|
||||
@ -64,36 +64,36 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
|
||||
|
||||
{/* Location & Contact */}
|
||||
<div className="space-y-8 lg:col-span-2">
|
||||
<h4 className="text-lg font-black text-canina-blue italic underline decoration-white/20 underline-offset-8">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h4>
|
||||
<h4 className="text-lg font-black text-white italic border-b-2 border-canina-blue pb-2 max-w-max">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h4>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-4 group">
|
||||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-canina-blue group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
<Phone className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] text-white/40 font-black uppercase mb-1">{getText('footer_phone_label', "خط ویژه فروش")}</p>
|
||||
<p className="text-lg font-black tracking-widest text-left" dir="ltr">{getText('footer_phone', "۰۲۱-۸۸۸۸ ۴۴۴۴")}</p>
|
||||
<p className="text-lg font-black tracking-widest text-left text-slate-200" dir="ltr">{getText('footer_phone', "۰۲۱-۸۸۸۸ ۴۴۴۴")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 group">
|
||||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-canina-blue group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
<Mail className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] text-white/40 font-black uppercase mb-1">{getText('footer_email_label', "مکاتبات رسمی")}</p>
|
||||
<p className="text-sm font-bold">{getText('footer_email', "info@canino-iran.com")}</p>
|
||||
<p className="text-sm font-bold text-slate-300">{getText('footer_email', "info@canino-iran.com")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 group">
|
||||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-canina-blue group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
<MapPin className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] text-white/40 font-black uppercase mb-1">{getText('footer_address_label', "دفتر مرکزی")}</p>
|
||||
<p className="text-sm font-bold leading-relaxed">{getText('footer_address', "تهران، جردن، خیابان سعیدی، ساختمان کانینا، طبقه ۵، واحد ۱۹")}</p>
|
||||
<p className="text-sm font-bold leading-relaxed text-slate-300">{getText('footer_address', "تهران، جردن، خیابان سعیدی، ساختمان کانینا، طبقه ۵، واحد ۱۹")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -104,8 +104,8 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
|
||||
<ShieldCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-black">{getText('footer_auth_title', "اصالت کالا تضمین میشود")}</h5>
|
||||
<p className="text-[10px] text-white/40 font-bold">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت وزارت بهداشت و QR Code اختصاصی هستند.")}</p>
|
||||
<h5 className="text-sm font-black text-white">{getText('footer_auth_title', "اصالت کالا تضمین میشود")}</h5>
|
||||
<p className="text-[10px] text-white/50 font-bold">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت وزارت بهداشت و QR Code اختصاصی هستند.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs font-black italic text-white/20">{getText('footer_auth_badge', "اصالت آلمانی کانینا")}</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user