From d5987b5dd1d09d0ee9b0fb37f01073f2c54e0321 Mon Sep 17 00:00:00 2001
From: Aravind R <aravind@tenext.in>
Date: Thu, 4 Jun 2026 15:49:51 +0530
Subject: [PATCH] update contect page

---
 next.config.ts                           |   2 +
 src/components/layout/Header.tsx         |   4 +-
 src/components/sections/ContactsHero.tsx | 236 +++++++++++++++++++++--
 3 files changed, 221 insertions(+), 21 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 42f9bab..c7b6f19 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,9 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  output: "export",
   images: {
+    unoptimized: true,
     formats: ["image/avif", "image/webp"],
   },
 };
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 28ef525..0a3cba2 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -449,7 +449,7 @@ export default function Header() {
                           </ul>
                         </div>
                         <div className="header-mobile-button">
-                          <Link className="logico-alter-button" href="/contact" target="_blank">Get in Touch</Link>
+                          <Link className="logico-alter-button" href="/contact">Get in Touch</Link>
                         </div>
                       </div>
                     </div>
@@ -470,7 +470,7 @@ export default function Header() {
               >
                 <div className="elementor-widget-container">
                   <div className="header-button-container">
-                    <Link href="/contact" target="_blank" className="header-button header-button-animation-fade">
+                    <Link href="/contact" className="header-button header-button-animation-fade">
                       Contact Us
                     </Link>
                   </div>
diff --git a/src/components/sections/ContactsHero.tsx b/src/components/sections/ContactsHero.tsx
index 8fa5f69..3f39b46 100644
--- a/src/components/sections/ContactsHero.tsx
+++ b/src/components/sections/ContactsHero.tsx
@@ -6,32 +6,229 @@ export default function ContactsHero() {
     <>
       <style dangerouslySetInnerHTML={{ __html: `
         .contacts-hero-custom {
-          background-color: #1f1f1f !important;
-          background-image: linear-gradient(rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.95) 100%), url('/images/home2-slide-1.jpg') !important;
+          background-color: #0b0b0b !important;
+          background-image: url('/images/home2-slide-1.jpg') !important;
           background-size: cover !important;
           background-position: center !important;
         }
+
+        .contacts-hero-card-custom {
+          position: relative !important;
+          width: 100% !important;
+          height: 100% !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          flex-direction: column !important;
+          box-sizing: border-box !important;
+          overflow: hidden !important;
+        }
+
+        .contacts-hero-bg-overlay {
+          position: absolute !important;
+          inset: 0 !important;
+          background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%) !important;
+          z-index: 1 !important;
+        }
+
+        /* Ambient Glowing Orbs */
+        .contacts-hero-glow-red {
+          position: absolute !important;
+          bottom: -15% !important;
+          right: -10% !important;
+          width: min(500px, 75vw) !important;
+          height: min(500px, 75vw) !important;
+          background: radial-gradient(circle, rgba(192, 18, 39, 0.24) 0%, rgba(192, 18, 39, 0) 70%) !important;
+          filter: blur(70px) !important;
+          pointer-events: none !important;
+          z-index: 1 !important;
+          animation: float-glow 10s ease-in-out infinite alternate !important;
+        }
+
+        .contacts-hero-glow-blue {
+          position: absolute !important;
+          top: -15% !important;
+          left: -10% !important;
+          width: min(450px, 60vw) !important;
+          height: min(450px, 60vw) !important;
+          background: radial-gradient(circle, rgba(0, 150, 255, 0.06) 0%, rgba(0, 150, 255, 0) 70%) !important;
+          filter: blur(75px) !important;
+          pointer-events: none !important;
+          z-index: 1 !important;
+        }
+
+        /* Abstract Tech Grid */
+        .contacts-hero-grid {
+          position: absolute !important;
+          inset: 0 !important;
+          background-image: 
+            linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), 
+            linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
+          background-size: 50px 50px !important;
+          opacity: 0.8 !important;
+          pointer-events: none !important;
+          z-index: 2 !important;
+        }
+
+        /* Glassmorphic Center Card */
+        .contacts-hero-glass-card {
+          position: relative !important;
+          z-index: 3 !important;
+          background: rgba(10, 10, 10, 0.55) !important;
+          backdrop-filter: blur(24px) saturate(180%) !important;
+          -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
+          border: 1px solid rgba(255, 255, 255, 0.08) !important;
+          border-radius: 30px !important;
+          padding: 60px 50px !important;
+          max-width: 820px !important;
+          width: 90% !important;
+          box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+          text-align: center !important;
+          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease !important;
+        }
+
+        .contacts-hero-glass-card:hover {
+          transform: translateY(-5px) scale(1.005) !important;
+          box-shadow: 0 45px 90px rgba(192, 18, 39, 0.14), 0 30px 60px rgba(0, 0, 0, 0.6) !important;
+          border-color: rgba(192, 18, 39, 0.3) !important;
+        }
+
+        /* Spaced kicker */
+        .contacts-hero-kicker {
+          display: inline-flex !important;
+          align-items: center !important;
+          gap: 12px !important;
+          margin-bottom: 24px !important;
+        }
+
+        .contacts-hero-kicker-line {
+          display: block !important;
+          width: 24px !important;
+          height: 1.5px !important;
+          background: #C01227 !important;
+          border-radius: 1px !important;
+        }
+
+        .contacts-hero-kicker-text {
+          font-size: 13px !important;
+          font-weight: 850 !important;
+          letter-spacing: 4px !important;
+          color: #C01227 !important;
+          text-transform: uppercase !important;
+          font-family: var(--font-manrope), "Manrope", sans-serif !important;
+        }
+
+        /* Bold modern typography */
+        .contacts-hero-title {
+          font-size: clamp(34px, 5.2vw, 62px) !important;
+          font-weight: 850 !important;
+          line-height: 1.15 !important;
+          color: #ffffff !important;
+          text-transform: uppercase !important;
+          letter-spacing: -1.8px !important;
+          margin: 0 0 20px 0 !important;
+          font-family: var(--font-manrope), "Manrope", sans-serif !important;
+        }
+
+        .contacts-hero-title-highlight {
+          background: linear-gradient(135deg, #ffffff 40%, #c01227 100%) !important;
+          -webkit-background-clip: text !important;
+          -webkit-text-fill-color: transparent !important;
+        }
+
+        /* Description text */
+        .contacts-hero-desc {
+          font-size: clamp(15px, 1.22vw, 18px) !important;
+          line-height: 1.6 !important;
+          color: rgba(255, 255, 255, 0.75) !important;
+          max-width: 600px !important;
+          margin: 0 auto 36px auto !important;
+          font-weight: 500 !important;
+          font-family: var(--font-manrope), "Manrope", sans-serif !important;
+        }
+
+        /* Breadcrumb capsule */
+        .contacts-hero-breadcrumbs {
+          display: inline-flex !important;
+          align-items: center !important;
+          gap: 10px !important;
+          background: rgba(255, 255, 255, 0.04) !important;
+          border: 1px solid rgba(255, 255, 255, 0.08) !important;
+          padding: 8px 22px !important;
+          border-radius: 30px !important;
+          transition: background 0.3s, border-color 0.3s !important;
+        }
+
+        .contacts-hero-breadcrumbs:hover {
+          background: rgba(255, 255, 255, 0.08) !important;
+          border-color: rgba(255, 255, 255, 0.15) !important;
+        }
+
+        .contacts-breadcrumb-link {
+          color: rgba(255, 255, 255, 0.65) !important;
+          text-decoration: none !important;
+          font-size: 13px !important;
+          font-weight: 600 !important;
+          transition: color 0.2s !important;
+          font-family: var(--font-manrope), "Manrope", sans-serif !important;
+        }
+
+        .contacts-breadcrumb-link:hover {
+          color: #ffffff !important;
+        }
+
+        .contacts-breadcrumb-del {
+          color: rgba(255, 255, 255, 0.3) !important;
+          font-size: 11px !important;
+        }
+
+        .contacts-breadcrumb-cur {
+          color: #C01227 !important;
+          font-size: 13px !important;
+          font-weight: 700 !important;
+          font-family: var(--font-manrope), "Manrope", sans-serif !important;
+        }
+
+        @keyframes float-glow {
+          0% { transform: translate(0, 0) scale(1); }
+          100% { transform: translate(-15px, -25px) scale(1.08); }
+        }
+
+        @media (max-width: 768px) {
+          .contacts-hero-glass-card {
+            padding: 40px 24px !important;
+            width: 95% !important;
+          }
+        }
       `}} />
       <div className="custom-standard-hero-container">
         <div className="custom-standard-hero-card contacts-hero-custom">
-          <div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
-            <div className="elementor-element elementor-element-ea205b5 elementor-widget elementor-widget-logico_page_title_line" style={{ textAlign: "center", zIndex: 5 }}>
-              <div className="elementor-widget-container">
-                <h1 className="page-title logico-title-h2" style={{ color: "#fff", fontSize: "clamp(34px, 5.5vw, 68px)", fontWeight: 850, textTransform: "uppercase", letterSpacing: "-1.5px", margin: 0 }}>
-                  Contacts
-                </h1>
-              </div>
-            </div>
+          <div className="contacts-hero-card-custom">
+            <div className="contacts-hero-bg-overlay"></div>
+            <div className="contacts-hero-grid"></div>
+            <div className="contacts-hero-glow-red"></div>
+            <div className="contacts-hero-glow-blue"></div>
             
-            <div 
-              className="elementor-element elementor-element-3d13f28 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs" 
-              style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
-            >
-              <div className="elementor-widget-container">
-                <nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
-                  <Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
-                  <span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
-                  <span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Contacts</span>
+            <div className="contacts-hero-glass-card">
+              <div className="contacts-hero-kicker">
+                <span className="contacts-hero-kicker-line"></span>
+                <span className="contacts-hero-kicker-text">24/7 support & sales</span>
+                <span className="contacts-hero-kicker-line"></span>
+              </div>
+
+              <h1 className="contacts-hero-title">
+                Get In <span className="contacts-hero-title-highlight">Touch</span>
+              </h1>
+              
+              <p className="contacts-hero-desc">
+                Have questions about our smart delivery network, pricing plans, or partner ecosystem? Let&apos;s build the future of logistics together.
+              </p>
+
+              <div>
+                <nav className="contacts-hero-breadcrumbs">
+                  <Link href="/" className="contacts-breadcrumb-link">Home</Link>
+                  <span className="contacts-breadcrumb-del">/</span>
+                  <span className="contacts-breadcrumb-cur">Contacts</span>
                 </nav>
               </div>
             </div>
@@ -42,3 +239,4 @@ export default function ContactsHero() {
   );
 }
 
+