upheader complated

components/layout/navbar.tsx

@@ -35,7 +35,16 @@ export function Navbar() {
       <nav
         className={`fixed top-0 left-0 right-0 z-50 border-b border-gray-400/50 ${scrolled && "bg-black"} transition`}
       >
-        {!scrolled && <UpHeader />}
+        <div
+          className={`overflow-hidden transition-all duration-500 ease-in-out ${
+            scrolled
+              ? "max-h-0 opacity-0 -translate-y-2"
+              : "max-h-20 opacity-100 translate-y-0"
+          }`}
+          style={{ transform: scrolled ? "translateY(-8px)" : "translateY(0)" }}
+        >
+          <UpHeader />
+        </div>
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-20">
             {/* Logo */}

components/layout/upHeader.tsx

@@ -1,4 +1,5 @@
-import { Mail, Phone, Send } from "lucide-react";
+import { Download, Mail, Phone, Send } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 const downloadCatalog = () => {
   const link = document.createElement("a");
@@ -10,25 +11,39 @@ const downloadCatalog = () => {
 };
 
 export default function UpHeader() {
+  const t = useTranslations();
   return (
     <div className="w-full border-b border-gray-400/50">
       <div className="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
-        <div className="flex items-center gap-4">
-          <a>
-            <Mail />
-          </a>
-          <a>
-            <Phone />
-          </a>
-          <a>
-            <Send />
-          </a>
+        <div className="flex items-center gap-2">
+          <p className="text-white font-medium">{t("navbar.connect")}:</p>
+          <div className="flex items-center gap-3">
+            <a
+              href="mailto:support@fireforce.com"
+              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
+            >
+              <Mail size={20} />
+            </a>
+            <a
+              href="tel:+998773722121"
+              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
+            >
+              <Phone size={20} />
+            </a>
+            <a
+              href="https://t.me/ignum_tech"
+              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
+            >
+              <Send size={20} />
+            </a>
+          </div>
         </div>
         <button
           onClick={downloadCatalog}
-          className="py-1 px-4 hover:bg-red-700 hover:cursor-pointer hover:border-red-700 text-white font-medium border border-white rounded-md transition"
+          className="py-1 px-4 flex items-center gap-2 hover:bg-red-700 hover:cursor-pointer hover:border-red-700 text-white font-medium border border-white rounded-md transition"
         >
-          Download Catalog
+          <Download size={18} />
+          {t("navbar.catalog")}
         </button>
       </div>
     </div>

components/pages/products/slug/rightSide.tsx

@@ -113,14 +113,6 @@ export function RightSide({
 
       {/* Price Section */}
       <div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
-        {/* Price */}
-        {/* <div>
-          <p className="text-gray-400 text-sm mb-2">{t("products.price")}:</p>
-          <h2 className="text-3xl md:text-4xl font-bold text-red-700">
-            ${price}
-          </h2>
-        </div> */}
-
         {/* Action Button */}
         <button
           onClick={handleGetPrice}
@@ -131,7 +123,7 @@ export function RightSide({
 
         {/* Social Share */}
         <div className="pt-4 border-t border-gray-800 flex items-center gap-5">
-           <button 
+          <button
             onClick={handleShare}
             className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
           >
@@ -149,9 +141,6 @@ export function RightSide({
               </>
             )}
           </button>
-          {/* <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
-                  <Instagram />
-                </a> */}
           <a
             href="https://t.me/ignum_tech"
             className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500"

messages/en.json

@@ -215,7 +215,9 @@
     "faq": "FAQ",
     "products": "PRODUCTS",
     "contact": "CONTACT",
-    "emergency": "Emergency Call!"
+    "emergency": "Emergency Call!",
+    "catalog": "Catalog",
+    "connect": "Connect with us"
   },
   "footer": {
     "description": "We provide professional services for the installation of fire safety systems and the sale of certified protective equipment.",

messages/ru.json

@@ -215,7 +215,9 @@
     "faq": "ЧЗВ",
     "products": "ПРОДУКТЫ",
     "contact": "КОНТАКТЫ",
-    "emergency": "Экстренный Вызов!"
+    "emergency": "Экстренный Вызов!",
+    "catalog": "Каталог",
+    "connect": "Связаться с Нами"
   },
   "footer": {
     "description": "Мы предоставляем профессиональные услуги по установке систем пожарной безопасности и продаже сертифицированных средств защиты.",

messages/uz.json

@@ -215,7 +215,9 @@
     "faq": "FAQ",
     "products": "MAHSULOTLAR",
     "contact": "ALOQA",
-    "emergency": "Favqulodda Qo'ng'iroq!"
+    "emergency": "Favqulodda Qo'ng'iroq!",
+    "catalog": "Katalog",
+    "connect": "Biz bilan bog'laning"
   },
   "footer": {
     "description": "Biz yong‘in xavfsizligi tizimlarini o‘rnatish va sertifikatlangan himoya vositalari savdosi bo‘yicha professional xizmatlar ko‘rsatamiz.",