perf(mobile): eliminate 0.6 CLS by removing initial motion transforms from above-the-fold Hero, and fix footer h3 hierarchy

frontend/application/components/Footer.tsx

@@ -86,7 +86,7 @@ export default function Footer({
 
           {/* Quick Links / Menu Column 1 */}
           <div className="space-y-8">
-            <h4 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_links_title', "دسترسی سریع")}</h4>
+            <h3 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_links_title', "دسترسی سریع")}</h3>
             <ul className="space-y-4 text-sm font-bold text-slate-300">
               {footerCol1.length > 0 ? (
                 footerCol1.map((item) => (
@@ -156,7 +156,7 @@ export default function Footer({
 
           {/* Location & Contact */}
           <div className="space-y-8 lg:col-span-2">
-            <h4 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h4>
+            <h3 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h3>
             <div className="grid md:grid-cols-2 gap-8">
                <div className="space-y-6">
                   <a href={getText('contact_phone_link', `tel:${getText('contact_phone', '02188884444').replace(/[^0-9+]/g, '')}`)} className="flex gap-4 group hover:opacity-90 transition-opacity">
@@ -196,7 +196,7 @@ export default function Footer({
                     <ShieldCheck className="w-6 h-6" />
                   </div>
                   <div>
-                    <h4 className="text-sm font-bold text-white">{getText('footer_auth_title', "اصالت کالا تضمین می‌شود")}</h4>
+                    <h3 className="text-sm font-bold text-white">{getText('footer_auth_title', "اصالت کالا تضمین می‌شود")}</h3>
                     <p className="text-[10px] text-slate-400 font-bold">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت سازمان دامپزشکی و نماد اعتماد الکترونیکی هستند.")}</p>
                   </div>
                 </div>

frontend/application/components/Hero.tsx

@@ -117,11 +117,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
       <div className="max-w-7xl mx-auto px-4 relative flex flex-col lg:flex-row gap-4 sm:gap-12 mb-8 sm:mb-16 lg:mb-20">
         {/* Content */}
         <div className="lg:w-1/2 text-center lg:text-right">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
+          <div>
             <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">
@@ -167,7 +163,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
                 {mounted && isInitialized ? getText('hero_btn_products', "مشاهده محصولات") : "مشاهده محصولات"}
               </button>
             </div>
-          </motion.div>
+          </div>
         </div>
 
         {/* Visual Element & Interactive Slider */}
@@ -176,12 +172,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
           onMouseEnter={() => setIsPaused(true)}
           onMouseLeave={() => setIsPaused(false)}
         >
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9, rotate: -3 }}
-            animate={{ opacity: 1, scale: 1, rotate: 0 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
-            className="relative z-10"
-          >
+          <div className="relative z-10">
             <div
               className="aspect-square bg-gradient-to-br from-slate-200 to-slate-300 rounded-[2.5rem] overflow-hidden border-4 border-white shadow-2xl relative group touch-pan-y"
               onTouchStart={onTouchStart}
@@ -299,12 +290,12 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
               </motion.div>
 
               {/* 3D Action Badge */}
-              <div className="absolute bottom-24 right-6 bg-canina-gold text-medical-gray-900 px-3.5 py-1.5 rounded-2xl text-xs font-black shadow-2xl z-20 flex items-center gap-1.5 font-vazir border border-white/20 select-none animate-bounce">
+              <div className="absolute bottom-24 right-6 bg-canina-gold text-medical-gray-900 px-3.5 py-1.5 rounded-2xl text-xs font-black shadow-2xl z-20 flex items-center gap-1.5 font-vazir border border-white/20 select-none">
                 <span className="text-sm">✨</span>
                 <span>فرمول ۳کاره</span>
               </div>
             </div>
-          </motion.div>
+          </div>
         </div>
       </div>