25-05-2025/New Changes

components/HeaderClient.tsx

@@ -45,6 +45,7 @@ const HeaderClient = () => {
   const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
   const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
   const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
+  const [offeringsDropdownOpen, setOfferingsDropdownOpen] = useState(false);
 
   const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
   const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
@@ -55,6 +56,9 @@ const HeaderClient = () => {
   const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
   const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
 
+  const handleOfferingsMouseEnter = () => setOfferingsDropdownOpen(true);
+  const handleOfferingsMouseLeave = () => setOfferingsDropdownOpen(false);
+
   const pathname = usePathname(); // Get current path
 
   // Helper function to check if a path is active (exact match for simple links, startsWith for base paths)
@@ -217,7 +221,7 @@ const HeaderClient = () => {
                     `}
                   >
                     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
-                      <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
                         <Link
                           href="/services/resource-augmentation"
                           className={`${megaMenuItemClasses} ${
@@ -233,7 +237,7 @@ const HeaderClient = () => {
                             </p>
                           </div>
                         </Link>
-                          {/* Add more service links here 
+                        {/* Add more service links here 
                         <Link
                           href="/services/project-management"
                           className={`${megaMenuItemClasses} ${
@@ -394,9 +398,50 @@ const HeaderClient = () => {
                     </div>
                   </div>
                 </div>
+                <div
+                  className={`group ${isActive("/offerings") ? "active" : ""}`}
+                  onMouseEnter={handleOfferingsMouseEnter}
+                  onMouseLeave={handleOfferingsMouseLeave}
+                >
+                  <button
+                    className={`${megaMenuTriggerClasses} ${
+                      isActive("/offerings") ? "after:w-full" : ""
+                    }`}
+                  >
+                    Explore Our Offerings
+                    <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
+                  </button>
+                  <div
+                    className={`
+      absolute left-0 top-full w-full shadow-lg z-1000
+      bg-card border-x border-b border-border rounded-b-lg
+      opacity-0 invisible translate-y-[-10px]
+      ${offeringsDropdownOpen ? "opacity-100 visible translate-y-0" : ""}
+      transition-all duration-300 ease-out transform
+    `}
+                  >
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                      <div className="max-w-md">
+                        <Link
+                          href="/offerings"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/offerings") ? "text-primary" : ""
+                          }`}
+                        >
+                          <FiBox className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                              Our Offerings
+                            </p>
+                          </div>
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </nav>
 
-              {/* ← Here’s the Explore Our Offerings link, back in its original spot */}
+              {/* ← Here’s the Explore Our Offerings link, back in its original spot 
               <Link
                 href="/services" // Assuming this link goes to the main services page
                 className={`flex items-center text-sm font-medium hover:opacity-80 transition-opacity group ${
@@ -408,6 +453,7 @@ const HeaderClient = () => {
                 Explore Our Offerings
                 <FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
               </Link>
+              */}
             </div>{" "}
             {/* Close the new flex container */}
           </div>
@@ -430,6 +476,7 @@ const HeaderClient = () => {
           <DropdownLink href="/about" onClick={handleMobileLinkClick}>
             About Us
           </DropdownLink>
+
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Services
           </span>
@@ -439,24 +486,20 @@ const HeaderClient = () => {
           >
             Resource Augmentation
           </DropdownLink>
-          <DropdownLink
-            href="/services/project-management"
-            onClick={handleMobileLinkClick}
-          >
-            Project Management
-          </DropdownLink>
           <DropdownLink
             href="/services/product-development"
             onClick={handleMobileLinkClick}
           >
             Product Development
           </DropdownLink>
+
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Products
           </span>
           <DropdownLink href="/obse" onClick={handleMobileLinkClick}>
             OBSE
           </DropdownLink>
+
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Join Us
           </span>
@@ -466,9 +509,18 @@ const HeaderClient = () => {
           <DropdownLink href="/portal" onClick={handleMobileLinkClick}>
             Recruitment Portal
           </DropdownLink>
+
           <DropdownLink href="/contact" onClick={handleMobileLinkClick}>
             Contact Us
           </DropdownLink>
+
+          <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
+            Explore Our Offerings
+          </span>
+          <DropdownLink href="/offerings" onClick={handleMobileLinkClick}>
+            Our Offerings
+          </DropdownLink>
+
           <div className="pt-4">
             <Link
               href="/request-demo"
@@ -479,6 +531,7 @@ const HeaderClient = () => {
               <FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
             </Link>
           </div>
+
           <div className="pt-4 border-t border-border mt-4"></div>
         </nav>
       </div>