From 2402efac15a007cd27092d1d7fa1f474fb0a3268 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 14 Jul 2026 20:31:33 +0330
Subject: [PATCH] design: redesign dual landing cards with rich thematic
 background gradients and fix footer contrast accessibility issues

---
 frontend/application/app/page.tsx          | 21 +++++++++++--------
 frontend/application/components/Footer.tsx | 24 +++++++++++-----------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/application/app/page.tsx b/frontend/application/app/page.tsx
index 2be7937..347500a 100644
--- a/frontend/application/app/page.tsx
+++ b/frontend/application/app/page.tsx
@@ -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>
diff --git a/frontend/application/components/Footer.tsx b/frontend/application/components/Footer.tsx
index c4d7574..fcb2c92 100644
--- a/frontend/application/components/Footer.tsx
+++ b/frontend/application/components/Footer.tsx
@@ -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>