From 88b2fdbb14c80be7802e9c26b89e1384b98ae5d9 Mon Sep 17 00:00:00 2001 From: parsa aghaei Date: Tue, 21 Jul 2026 14:06:37 +0330 Subject: [PATCH] fix(responsive): resolve header mobile overlap, stat box alignment, quality badge placement, and add back-to-top button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix Header mobile logo/button overflow on 320px-375px screens by making logo text truncate gracefully & action buttons compact - Make 3 hero stat boxes stay side-by-side in a 3-column grid with centered icons/text on mobile screens - Adjust 'کیفیت / استانداردهای فوق‌دارویی' label position so it stays contained within the image boundaries without overflowing the screen - Add interactive Back to Top button (both floating and footer button) for quick navigation --- frontend/application/app/HomeClient.tsx | 24 ++++---- frontend/application/components/Footer.tsx | 42 ++++++++++++-- frontend/application/components/Header.tsx | 67 +++++++++++----------- frontend/application/components/Hero.tsx | 42 +++++++------- 4 files changed, 105 insertions(+), 70 deletions(-) diff --git a/frontend/application/app/HomeClient.tsx b/frontend/application/app/HomeClient.tsx index f21e1fd..5ddf133 100644 --- a/frontend/application/app/HomeClient.tsx +++ b/frontend/application/app/HomeClient.tsx @@ -75,18 +75,18 @@ export default function HomeClient() { {/* About Section Teaser */}
-
-
- آزمایشگاه تخصصی تولید مکمل‌های دارویی کانینا آلمان -
-
{getText('quality', "کیفیت")}
-
{getText('ultra_pharmaceutical', "استانداردهای فوق‌دارویی")}
-
-
+
+
+ آزمایشگاه تخصصی تولید مکمل‌های دارویی کانینا آلمان +
+
{getText('quality', "کیفیت")}
+
{getText('ultra_pharmaceutical', "استانداردهای فوق‌دارویی")}
+
+
{getText('about_label', "میراث ما از آلمان")} diff --git a/frontend/application/components/Footer.tsx b/frontend/application/components/Footer.tsx index 31878ba..e79e10f 100644 --- a/frontend/application/components/Footer.tsx +++ b/frontend/application/components/Footer.tsx @@ -1,6 +1,6 @@ "use client"; -import React from "react"; -import { Phone, Mail, MapPin, Instagram, ShieldCheck, Globe } from "lucide-react"; +import React, { useState, useEffect } from "react"; +import { Phone, Mail, MapPin, Instagram, ShieldCheck, Globe, ArrowUp } from "lucide-react"; import { useSettingsStore } from "../lib/store/settingsStore"; import Link from "next/link"; @@ -10,8 +10,38 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: { onB2BOpen?: () => void }) { const getText = useSettingsStore(state => state.getText); + const [showScroll, setShowScroll] = useState(false); + + useEffect(() => { + const checkScroll = () => { + if (window.scrollY > 300) { + setShowScroll(true); + } else { + setShowScroll(false); + } + }; + window.addEventListener('scroll', checkScroll); + return () => window.removeEventListener('scroll', checkScroll); + }, []); + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + return ( -