updates

src/components/BannerSlider.tsx

@@ -141,7 +141,10 @@ export default function BannerSlider() {
       {/* Premium Shop Now Button */}
       {currentIndex === 0 && (
         <div className="absolute bottom-16 md:bottom-20 left-1/2 transform -translate-x-1/2 z-10">
-          <motion.button
+          <motion.a
+            href="https://shop.mozimo.in/"
+            target="_blank"
+            rel="noopener noreferrer"
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.3 }}
@@ -151,7 +154,7 @@ export default function BannerSlider() {
               transition: { duration: 0.3 },
             }}
             whileTap={{ scale: 0.95 }}
-            className="bg-white text-[#3C2A21] px-8 md:px-12 py-4 md:py-5 rounded-full font-semibold text-base md:text-lg shadow-premium hover:shadow-premium-hover transition-all duration-300 font-renner border border-white/20 hover:border-white/40"
+            className="bg-white text-[#3C2A21] px-8 md:px-12 py-4 md:py-5 rounded-full font-semibold text-base md:text-lg shadow-premium hover:shadow-premium-hover transition-all duration-300 font-renner border border-white/20 hover:border-white/40 inline-block"
             style={{
               fontWeight: 300,
               fontFamily: "Renner*",
@@ -161,7 +164,7 @@ export default function BannerSlider() {
             }}
           >
             <span className="relative z-10">Shop Now</span>
-          </motion.button>
+          </motion.a>
         </div>
       )}
 

src/components/Header.tsx

@@ -3,10 +3,12 @@
 import { motion, AnimatePresence } from "framer-motion";
 import Image from "next/image";
 import { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
 
 export default function Header() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -240,7 +242,7 @@ export default function Header() {
             {/* Left Navigation */}
             <div className="flex items-center space-x-16">
               <motion.a
-                href="#about"
+                href={pathname === "/about" ? "/" : "/about"}
                 className="text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group"
                 style={{
                   fontWeight: 300,
@@ -251,11 +253,13 @@ export default function Header() {
                 }}
                 whileHover={{ scale: 1.02 }}
               >
-                About us
+                {pathname === "/about" ? "Home" : "About us"}
                 <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#8B4513] to-[#DAA520] transition-all duration-300 group-hover:w-full"></span>
               </motion.a>
               <motion.a
-                href="#shop"
+                href="https://shop.mozimo.in/"
+                target="_blank"
+                rel="noopener noreferrer"
                 className="text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group"
                 style={{
                   fontWeight: 300,
@@ -417,7 +421,7 @@ export default function Header() {
                 {/* Mobile Navigation Links */}
                 <div className="space-y-4">
                   <motion.a
-                    href="#about"
+                    href={pathname === "/about" ? "/" : "/about"}
                     className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100"
                     style={{
                       fontWeight: 300,
@@ -429,10 +433,12 @@ export default function Header() {
                     onClick={() => setIsMobileMenuOpen(false)}
                     whileHover={{ x: 10 }}
                   >
-                    About us
+                    {pathname === "/about" ? "Home" : "About us"}
                   </motion.a>
                   <motion.a
-                    href="#shop"
+                    href="https://shop.mozimo.in/"
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100"
                     style={{
                       fontWeight: 300,

src/components/ProductCategory.tsx

@@ -17,6 +17,15 @@ export default function ProductCategory() {
     "Dragees",
     "Gelatos",
   ];
+
+  const categoryLinks = [
+    "https://shop.mozimo.in/#bar",
+    "https://shop.mozimo.in/#barks",
+    "https://shop.mozimo.in/#pralines",
+    "https://shop.mozimo.in/#spreads",
+    "https://shop.mozimo.in/#dragees",
+    "https://shop.mozimo.in/",
+  ];
   const categoryImages = [
     "/categories/c1.svg",
     "/categories/c2.svg",
@@ -83,7 +92,10 @@ export default function ProductCategory() {
           transition={{ duration: 0.2, delay: idx * 0.02 }}
           viewport={{ once: true }}
         >
-          <button
+          <a
+            href={categoryLinks[idx]}
+            target="_blank"
+            rel="noopener noreferrer"
             className={`group flex items-center gap-4 w-full text-left font-moneta transition-all duration-100 ease-out will-change-transform
               ${
                 isActive
@@ -122,7 +134,7 @@ export default function ProductCategory() {
               />
             </div>
             <span className="will-change-transform">{category}</span>
-          </button>
+          </a>
         </motion.li>
       );
     });