diff --git a/app/globals.css b/app/globals.css
index 0c8dae4..7ec9058 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,6 +9,49 @@
             transform: translateX(-50%);
         }
     }
+
+    @keyframes shimmer {
+        0% {
+            transform: translateX(-100%);
+        }
+        100% {
+            transform: translateX(100%);
+        }
+    }
+
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideInRight {
+        from {
+            opacity: 0;
+            transform: translateX(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .animate-shimmer {
+        animation: shimmer 2s infinite;
+    }
+
+    .animate-fade-in-up {
+        animation: fadeInUp 0.6s ease-out;
+    }
+
+    .animate-slide-in-right {
+        animation: slideInRight 0.4s ease-out;
+    }
 }
 
 @layer base {
diff --git a/components/ErrorBoundary.jsx b/components/ErrorBoundary.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Footer.jsx b/components/Footer.jsx
index 6fa7b26..bbebbdd 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -47,17 +47,22 @@ const Footer = () => {
     ]
 
     return (
-        <footer className="mx-6 bg-white">
+        <footer className="mx-6 bg-white border-t border-slate-100">
             <div className="max-w-7xl mx-auto">
-                <div className="flex flex-col md:flex-row items-start justify-between gap-10 py-10 border-b border-slate-500/30 text-slate-500">
+                <div className="flex flex-col md:flex-row items-start justify-between gap-10 py-10 border-b border-slate-200 text-slate-500">
                     <div>
-                        <Link href="/" className="text-4xl font-semibold text-slate-700">
+                        <Link href="/" className="text-4xl font-semibold text-slate-700 hover:text-slate-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/20 rounded">
                             <span className="text-green-600">go</span>cart<span className="text-green-600 text-5xl leading-0">.</span>
                         </Link>
-                        <p className="max-w-[410px] mt-6 text-sm">Welcome to gocart, your ultimate destination for the latest and smartest gadgets. From smartphones and smartwatches to essential accessories, we bring you the best in innovation — all in one place.</p>
+                        <p className="max-w-[410px] mt-6 text-sm leading-relaxed">Welcome to gocart, your ultimate destination for the latest and smartest gadgets. From smartphones and smartwatches to essential accessories, we bring you the best in innovation — all in one place.</p>
                         <div className="flex items-center gap-3 mt-5">
                             {socialIcons.map((item, i) => (
-                                <Link href={item.link} key={i} className="flex items-center justify-center w-10 h-10 bg-slate-100 hover:scale-105 hover:border border-slate-300 transition rounded-full">
+                                <Link
+                                    href={item.link}
+                                    key={i}
+                                    className="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-slate-200 hover:scale-105 hover:border border-slate-300 transition rounded-full focus:outline-none focus:ring-2 focus:ring-green-500/20"
+                                    aria-label={`Visit our ${item.link.split('://')[1]}`}
+                                >
                                     <item.icon />
                                 </Link>
                             ))}
@@ -71,7 +76,7 @@ const Footer = () => {
                                     {section.links.map((link, i) => (
                                         <li key={i} className="flex items-center gap-2">
                                             {link.icon && <link.icon />}
-                                            <Link href={link.path} className="hover:underline transition">{link.text}</Link>
+                                            <Link href={link.path} className="hover:text-green-600 hover:underline transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/20 rounded-sm px-1">{link.text}</Link>
                                         </li>
                                     ))}
                                 </ul>
@@ -79,7 +84,7 @@ const Footer = () => {
                         ))}
                     </div>
                 </div>
-                <p className="py-4 text-sm text-slate-500">
+                <p className="py-4 text-sm text-slate-400">
                     Copyright 2025 © gocart All Right Reserved.
                 </p>
             </div>
diff --git a/components/Hero.jsx b/components/Hero.jsx
index abcc2bb..e723fe4 100644
--- a/components/Hero.jsx
+++ b/components/Hero.jsx
@@ -4,6 +4,7 @@ import { ArrowRightIcon, ChevronRightIcon } from 'lucide-react'
 import Image from 'next/image'
 import React from 'react'
 import CategoriesMarquee from './CategoriesMarquee'
+import { Button } from './ui/Button'
 
 const Hero = () => {
 
@@ -12,36 +13,47 @@ const Hero = () => {
     return (
         <div className='mx-6'>
             <div className='flex max-xl:flex-col gap-8 max-w-7xl mx-auto my-10'>
-                <div className='relative flex-1 flex flex-col bg-green-200 rounded-3xl xl:min-h-100 group'>
-                    <div className='p-5 sm:p-16'>
-                        <div className='inline-flex items-center gap-3 bg-green-300 text-green-600 pr-4 p-1 rounded-full text-xs sm:text-sm'>
-                            <span className='bg-green-600 px-3 py-1 max-sm:ml-1 rounded-full text-white text-xs'>NEWS</span> Free Shipping on Orders Above $50! <ChevronRightIcon className='group-hover:ml-2 transition-all' size={16} />
+                <div className='relative flex-1 flex flex-col bg-gradient-to-br from-green-100 via-green-200 to-green-300 rounded-3xl xl:min-h-100 group overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 animate-fade-in-up'>
+                    <div className='p-5 sm:p-16 relative z-10'>
+                        <div className='inline-flex items-center gap-3 bg-green-300/90 backdrop-blur-sm text-green-800 pr-4 p-1 rounded-full text-xs sm:text-sm hover:bg-green-400/90 transition-all duration-300'>
+                            <span className='bg-green-600 px-3 py-1 max-sm:ml-1 rounded-full text-white text-xs shadow-lg animate-pulse'>NEWS</span> 
+                            Free Shipping on Orders Above $50! 
+                            <ChevronRightIcon className='group-hover:ml-2 transition-all duration-200 group-hover:text-green-900' size={16} />
                         </div>
-                        <h2 className='text-3xl sm:text-5xl leading-[1.2] my-3 font-medium bg-gradient-to-r from-slate-600 to-[#A0FF74] bg-clip-text text-transparent max-w-xs  sm:max-w-md'>
+                        <h2 className='text-3xl sm:text-5xl leading-[1.2] my-3 font-bold bg-gradient-to-r from-slate-700 via-slate-800 to-[#A0FF74] bg-clip-text text-transparent max-w-xs sm:max-w-md drop-shadow-sm'>
                             Gadgets you'll love. Prices you'll trust.
                         </h2>
                         <div className='text-slate-800 text-sm font-medium mt-4 sm:mt-8'>
-                            <p>Starts from</p>
-                            <p className='text-3xl'>{currency}4.90</p>
+                            <p className="text-slate-600">Starts from</p>
+                            <p className='text-4xl font-bold text-slate-800 drop-shadow-sm'>{currency}4.90</p>
                         </div>
-                        <button className='bg-slate-800 text-white text-sm py-2.5 px-7 sm:py-5 sm:px-12 mt-4 sm:mt-10 rounded-md hover:bg-slate-900 hover:scale-103 active:scale-95 transition'>LEARN MORE</button>
+                        <Button size="lg" className="mt-4 sm:mt-10 shadow-xl hover:shadow-2xl transform hover:scale-105 bg-gradient-to-r from-slate-800 to-slate-900 hover:from-slate-900 hover:to-black">
+                            LEARN MORE
+                        </Button>
                     </div>
-                    <Image className='sm:absolute bottom-0 right-0 md:right-10 w-full sm:max-w-sm' src={assets.hero_model_img} alt="" />
+                    <Image className='sm:absolute bottom-0 right-0 md:right-10 w-full sm:max-w-sm transition-transform duration-500 group-hover:scale-105 drop-shadow-lg' src={assets.hero_model_img} alt="Featured product" />
+                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                 </div>
                 <div className='flex flex-col md:flex-row xl:flex-col gap-5 w-full xl:max-w-sm text-sm text-slate-600'>
-                    <div className='flex-1 flex items-center justify-between w-full bg-orange-200 rounded-3xl p-6 px-8 group'>
+                    <div className='flex-1 flex items-center justify-between w-full bg-gradient-to-br from-orange-100 via-orange-200 to-orange-300 rounded-3xl p-6 px-8 group shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-in-right'>
                         <div>
-                            <p className='text-3xl font-medium bg-gradient-to-r from-slate-800 to-[#FFAD51] bg-clip-text text-transparent max-w-40'>Best products</p>
-                            <p className='flex items-center gap-1 mt-4'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all' size={18} /> </p>
+                            <p className='text-3xl font-bold bg-gradient-to-r from-slate-800 via-orange-600 to-[#FFAD51] bg-clip-text text-transparent max-w-40 drop-shadow-sm'>Best products</p>
+                            <p className='flex items-center gap-1 mt-4 text-slate-700 transition-colors duration-200 group-hover:text-orange-700 font-medium'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all duration-200' size={18} /> </p>
+                        </div>
+                        <div className="relative">
+                            <Image className='w-35 transition-transform duration-500 group-hover:scale-110 drop-shadow-lg' src={assets.hero_product_img1} alt="Best products" />
+                            <div className="absolute inset-0 bg-gradient-to-t from-orange-200/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
                         </div>
-                        <Image className='w-35' src={assets.hero_product_img1} alt="" />
                     </div>
-                    <div className='flex-1 flex items-center justify-between w-full bg-blue-200 rounded-3xl p-6 px-8 group'>
+                    <div className='flex-1 flex items-center justify-between w-full bg-gradient-to-br from-blue-100 via-blue-200 to-blue-300 rounded-3xl p-6 px-8 group shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-in-right' style={{animationDelay: '0.2s'}}>
                         <div>
-                            <p className='text-3xl font-medium bg-gradient-to-r from-slate-800 to-[#78B2FF] bg-clip-text text-transparent max-w-40'>20% discounts</p>
-                            <p className='flex items-center gap-1 mt-4'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all' size={18} /> </p>
+                            <p className='text-3xl font-bold bg-gradient-to-r from-slate-800 via-blue-600 to-[#78B2FF] bg-clip-text text-transparent max-w-40 drop-shadow-sm'>20% discounts</p>
+                            <p className='flex items-center gap-1 mt-4 text-slate-700 transition-colors duration-200 group-hover:text-blue-700 font-medium'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all duration-200' size={18} /> </p>
+                        </div>
+                        <div className="relative">
+                            <Image className='w-35 transition-transform duration-500 group-hover:scale-110 drop-shadow-lg' src={assets.hero_product_img2} alt="Discounted products" />
+                            <div className="absolute inset-0 bg-gradient-to-t from-blue-200/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
                         </div>
-                        <Image className='w-35' src={assets.hero_product_img2} alt="" />
                     </div>
                 </div>
             </div>
diff --git a/components/Loading.jsx b/components/Loading.jsx
index 8e125ac..7e73d92 100644
--- a/components/Loading.jsx
+++ b/components/Loading.jsx
@@ -1,12 +1,37 @@
 'use client'
 
-const Loading = () => {
+const Loading = ({ fullScreen = true, size = "default", text = "Loading..." }) => {
+    const sizeClasses = {
+        sm: "w-4 h-4 border-2",
+        default: "w-8 h-8 border-3",
+        lg: "w-12 h-12 border-4"
+    }
 
-    return (
-        <div className='flex items-center justify-center h-screen'>
-            <div className='w-11 h-11 rounded-full border-3 border-gray-300 border-t-green-500 animate-spin'></div>
+    const LoadingSpinner = () => (
+        <div className="flex flex-col items-center gap-4">
+            <div className={`${sizeClasses[size]} rounded-full border-gray-200 border-t-green-500 animate-spin`}></div>
+            {text && (
+                <p className="text-slate-600 font-medium animate-pulse">{text}</p>
+            )}
         </div>
     )
+
+    if (fullScreen) {
+        return (
+            <div className='flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-white'>
+                <div className="text-center">
+                    <LoadingSpinner />
+                    <div className="mt-8 flex justify-center space-x-1">
+                        <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce"></div>
+                        <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
+                        <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return <LoadingSpinner />
 }
 
 export default Loading
\ No newline at end of file
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index d7fb5c8..630fd18 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -1,69 +1,159 @@
 'use client'
-import { Search, ShoppingCart } from "lucide-react";
+import { Search, ShoppingCart, Menu, X } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { useSelector } from "react-redux";
+import { Button } from "./ui/Button";
 
 const Navbar = () => {
+  const router = useRouter();
+  const [search, setSearch] = useState("");
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const cartCount = useSelector((state) => state.cart.total);
 
-    const router = useRouter();
+  const handleSearch = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (search.trim()) {
+        router.push(`/shop?search=${encodeURIComponent(search.trim())}`);
+      }
+    },
+    [router, search]
+  );
 
-    const [search, setSearch] = useState('')
-    const cartCount = useSelector(state => state.cart.total)
+  return (
+    <nav className="relative bg-white/95 backdrop-blur-sm shadow-sm border-b border-slate-100">
+      <div className="mx-6">
+        <div className="flex items-center justify-between max-w-7xl mx-auto py-4 transition-all">
+          <Link
+            href="/"
+            className="relative text-4xl font-semibold text-slate-700 hover:scale-[1.02] transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/20 rounded"
+          >
+            <span className="text-green-600">go</span>
+            cart
+            <span className="text-green-600 text-5xl leading-0">.</span>
+            <p className="absolute -top-1 -right-8 px-3 p-0.5 text-xs font-semibold rounded-full flex items-center gap-2 text-white bg-green-500 shadow-sm">
+              plus
+            </p>
+          </Link>
 
-    const handleSearch = (e) => {
-        e.preventDefault()
-        router.push(`/shop?search=${search}`)
-    }
+          {/* Mobile Menu Button */}
+          <div className="sm:hidden flex items-center gap-3">
+            <Link
+              href="/cart"
+              className="relative flex items-center text-slate-600 hover:text-green-600 transition-colors duration-200"
+            >
+              <ShoppingCart size={20} />
+              <span className="absolute -top-1 -right-1 flex items-center justify-center text-[10px] font-semibold text-white bg-green-500 w-4 h-4 rounded-full">
+                {cartCount}
+              </span>
+            </Link>
+            <Button 
+              variant="ghost" 
+              size="icon"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="hover:bg-slate-100"
+            >
+              {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+            </Button>
+          </div>
 
-    return (
-        <nav className="relative bg-white">
-            <div className="mx-6">
-                <div className="flex items-center justify-between max-w-7xl mx-auto py-4  transition-all">
+          {/* Desktop Menu */}
+          <div className="hidden sm:flex items-center gap-4 lg:gap-8 text-slate-600">
+            {[
+              { label: "Home", href: "/" },
+              { label: "Shop", href: "/shop" },
+              { label: "About", href: "/" },
+              { label: "Contact", href: "/" },
+            ].map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                className="relative px-1 py-0.5 font-medium transition-colors duration-200 hover:text-green-600 focus-visible:text-green-600 focus:outline-none after:absolute after:left-0 after:bottom-0 after:h-0.5 after:w-full after:scale-x-0 after:bg-green-500 after:transition-transform after:duration-200 hover:after:scale-x-100 focus-visible:after:scale-x-100"
+              >
+                {item.label}
+              </Link>
+            ))}
 
-                    <Link href="/" className="relative text-4xl font-semibold text-slate-700">
-                        <span className="text-green-600">go</span>cart<span className="text-green-600 text-5xl leading-0">.</span>
-                        <p className="absolute text-xs font-semibold -top-1 -right-8 px-3 p-0.5 rounded-full flex items-center gap-2 text-white bg-green-500">
-                            plus
-                        </p>
-                    </Link>
+            <form
+              onSubmit={handleSearch}
+              className="hidden xl:flex items-center w-xs text-sm gap-2 bg-slate-100/80 hover:bg-slate-100 px-4 py-3 rounded-full border border-transparent focus-within:border-slate-300 focus-within:bg-white shadow-inner transition"
+            >
+              <Search size={18} className="text-slate-600" />
+              <input
+                type="text"
+                className="w-full bg-transparent outline-none placeholder-slate-500"
+                placeholder="Search products"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                required
+              />
+            </form>
 
-                    {/* Desktop Menu */}
-                    <div className="hidden sm:flex items-center gap-4 lg:gap-8 text-slate-600">
-                        <Link href="/">Home</Link>
-                        <Link href="/shop">Shop</Link>
-                        <Link href="/">About</Link>
-                        <Link href="/">Contact</Link>
+            <Link
+              href="/cart"
+              className="group relative flex items-center gap-2 text-slate-600 hover:text-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/20 rounded-full px-3 py-1"
+            >
+              <ShoppingCart size={18} className="transition-transform duration-200 group-hover:-translate-y-0.5" />
+              Cart
+              <span
+                className="absolute -top-1 left-3 flex items-center justify-center text-[10px] font-semibold text-white bg-green-500 w-4 h-4 rounded-full shadow-sm"
+                aria-label={`Cart items: ${cartCount}`}
+              >
+                {cartCount}
+              </span>
+            </Link>
 
-                        <form onSubmit={handleSearch} className="hidden xl:flex items-center w-xs text-sm gap-2 bg-slate-100 px-4 py-3 rounded-full">
-                            <Search size={18} className="text-slate-600" />
-                            <input className="w-full bg-transparent outline-none placeholder-slate-600" type="text" placeholder="Search products" value={search} onChange={(e) => setSearch(e.target.value)} required />
-                        </form>
+            <Button variant="gradient" size="sm" className="shadow-lg">
+              Login
+            </Button>
+          </div>
+        </div>
+      </div>
 
-                        <Link href="/cart" className="relative flex items-center gap-2 text-slate-600">
-                            <ShoppingCart size={18} />
-                            Cart
-                            <button className="absolute -top-1 left-3 text-[8px] text-white bg-slate-600 size-3.5 rounded-full">{cartCount}</button>
-                        </Link>
+      {/* Mobile Menu */}
+      <div className={`sm:hidden transition-all duration-300 ease-in-out ${mobileMenuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+        <div className="px-6 py-4 bg-white border-t border-slate-100 shadow-lg">
+          <div className="flex flex-col gap-4">
+            {[
+              { label: "Home", href: "/" },
+              { label: "Shop", href: "/shop" },
+              { label: "About", href: "/" },
+              { label: "Contact", href: "/" },
+            ].map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-slate-600 hover:text-green-600 font-medium transition-colors duration-200 py-2"
+              >
+                {item.label}
+              </Link>
+            ))}
+            
+            <form onSubmit={handleSearch} className="flex items-center gap-2 bg-slate-100 px-4 py-3 rounded-full mt-2">
+              <Search size={18} className="text-slate-600" />
+              <input
+                type="text"
+                className="flex-1 bg-transparent outline-none placeholder-slate-500"
+                placeholder="Search products"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                required
+              />
+            </form>
 
-                        <button className="px-8 py-2 bg-indigo-500 hover:bg-indigo-600 transition text-white rounded-full">
-                            Login
-                        </button>
+            <Button variant="gradient" className="mt-2">
+              Login
+            </Button>
+          </div>
+        </div>
+      </div>
 
-                    </div>
+      <hr className="border-slate-100" />
+    </nav>
+  );
+};
 
-                    {/* Mobile User Button  */}
-                    <div className="sm:hidden">
-                        <button className="px-7 py-1.5 bg-indigo-500 hover:bg-indigo-600 text-sm transition text-white rounded-full">
-                            Login
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <hr className="border-gray-300" />
-        </nav>
-    )
-}
-
-export default Navbar
\ No newline at end of file
+export default Navbar;
diff --git a/components/Newsletter.jsx b/components/Newsletter.jsx
index a9399b8..cf39cbd 100644
--- a/components/Newsletter.jsx
+++ b/components/Newsletter.jsx
@@ -1,14 +1,55 @@
-import React from 'react'
+'use client'
+import React, { useState } from 'react'
 import Title from './Title'
+import { Button } from './ui/Button'
+import { Input } from './ui/Input'
+import { Mail } from 'lucide-react'
+import toast from 'react-hot-toast'
 
 const Newsletter = () => {
+    const [email, setEmail] = useState('')
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setIsLoading(true)
+        
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        
+        toast.success('Successfully subscribed to newsletter!')
+        setEmail('')
+        setIsLoading(false)
+    }
+
     return (
         <div className='flex flex-col items-center mx-4 my-36'>
             <Title title="Join Newsletter" description="Subscribe to get exclusive deals, new arrivals, and insider updates delivered straight to your inbox every week." visibleButton={false} />
-            <div className='flex bg-slate-100 text-sm p-1 rounded-full w-full max-w-xl my-10 border-2 border-white ring ring-slate-200'>
-                <input className='flex-1 pl-5 outline-none' type="text" placeholder='Enter your email address' />
-                <button className='font-medium bg-green-500 text-white px-7 py-3 rounded-full hover:scale-103 active:scale-95 transition'>Get Updates</button>
-            </div>
+            
+            <form onSubmit={handleSubmit} className='w-full max-w-xl my-10'>
+                <div className='flex flex-col sm:flex-row gap-3 bg-white p-2 rounded-2xl shadow-lg border border-slate-200 hover:shadow-xl transition-shadow duration-300'>
+                    <div className='flex-1'>
+                        <Input
+                            type="email"
+                            placeholder="Enter your email address"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            leftIcon={<Mail size={18} />}
+                            className="border-0 shadow-none bg-transparent focus-visible:ring-0 focus-visible:border-0 h-12"
+                            required
+                        />
+                    </div>
+                    <Button 
+                        type="submit" 
+                        variant="gradient" 
+                        size="lg"
+                        loading={isLoading}
+                        className="rounded-xl px-8 whitespace-nowrap"
+                    >
+                        Get Updates
+                    </Button>
+                </div>
+            </form>
         </div>
     )
 }
diff --git a/components/ProductCard.jsx b/components/ProductCard.jsx
index 69b7501..a3cc7c6 100644
--- a/components/ProductCard.jsx
+++ b/components/ProductCard.jsx
@@ -12,20 +12,25 @@ const ProductCard = ({ product }) => {
     const rating = Math.round(product.rating.reduce((acc, curr) => acc + curr.rating, 0) / product.rating.length);
 
     return (
-        <Link href={`/product/${product.id}`} className=' group max-xl:mx-auto'>
-            <div className='bg-[#F5F5F5] h-40  sm:w-60 sm:h-68 rounded-lg flex items-center justify-center'>
-                <Image width={500} height={500} className='max-h-30 sm:max-h-40 w-auto group-hover:scale-115 transition duration-300' src={product.images[0]} alt="" />
+        <Link href={`/product/${product.id}`} className='group max-xl:mx-auto block rounded-2xl bg-white shadow-sm hover:shadow-xl transition-all duration-300 border border-transparent hover:border-slate-200 transform hover:-translate-y-1'>
+            <div className='bg-gradient-to-br from-slate-50 to-slate-100 h-40 sm:w-60 sm:h-68 rounded-2xl flex items-center justify-center overflow-hidden relative'>
+                <Image width={500} height={500} className='max-h-30 sm:max-h-40 w-auto group-hover:scale-110 transition-transform duration-500 ease-out' src={product.images[0]} alt={product.name} />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
             </div>
-            <div className='flex justify-between gap-3 text-sm text-slate-800 pt-2 max-w-60'>
-                <div>
-                    <p>{product.name}</p>
-                    <div className='flex'>
+            <div className='flex justify-between gap-3 text-sm text-slate-800 pt-4 pb-5 px-4'>
+                <div className='flex-1 min-w-0'>
+                    <p className='font-semibold truncate group-hover:text-green-600 transition-colors duration-200'>{product.name}</p>
+                    <div className='flex items-center mt-2 gap-1'>
                         {Array(5).fill('').map((_, index) => (
-                            <StarIcon key={index} size={14} className='text-transparent mt-0.5' fill={rating >= index + 1 ? "#00C950" : "#D1D5DB"} />
+                            <StarIcon key={index} size={14} className='text-transparent transition-all duration-200' fill={rating >= index + 1 ? "#10b981" : "#E5E7EB"} />
                         ))}
+                        <span className='text-xs text-slate-500 ml-1'>({product.rating.length})</span>
                     </div>
                 </div>
-                <p>{currency}{product.price}</p>
+                <div className="flex flex-col items-end">
+                    <p className='font-bold text-lg text-green-600 whitespace-nowrap'>{currency}{product.price}</p>
+                    <span className="text-xs text-slate-400 bg-slate-100 px-2 py-1 rounded-full mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">View Details</span>
+                </div>
             </div>
         </Link>
     )
diff --git a/components/ProductCardSkeleton.jsx b/components/ProductCardSkeleton.jsx
new file mode 100644
index 0000000..3bdf14a
--- /dev/null
+++ b/components/ProductCardSkeleton.jsx
@@ -0,0 +1,50 @@
+'use client'
+
+const ProductCardSkeleton = () => {
+    return (
+        <div className='max-xl:mx-auto block rounded-2xl bg-white shadow-sm border border-slate-100 overflow-hidden animate-pulse'>
+            {/* Image Skeleton */}
+            <div className='bg-gradient-to-r from-slate-200 via-slate-100 to-slate-200 h-40 sm:w-60 sm:h-68 rounded-2xl flex items-center justify-center relative'>
+                <div className="w-20 h-20 bg-slate-300 rounded-lg animate-pulse"></div>
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -translate-x-full animate-shimmer"></div>
+            </div>
+            
+            {/* Content Skeleton */}
+            <div className='pt-4 pb-5 px-4 space-y-3'>
+                <div className='flex justify-between gap-3'>
+                    <div className='flex-1 space-y-2'>
+                        {/* Product name skeleton */}
+                        <div className='h-4 bg-slate-200 rounded animate-pulse'></div>
+                        
+                        {/* Rating skeleton */}
+                        <div className='flex items-center gap-1'>
+                            {Array(5).fill('').map((_, index) => (
+                                <div key={index} className="w-3 h-3 bg-slate-200 rounded animate-pulse"></div>
+                            ))}
+                            <div className='h-3 w-8 bg-slate-200 rounded ml-1 animate-pulse'></div>
+                        </div>
+                    </div>
+                    
+                    {/* Price skeleton */}
+                    <div className="flex flex-col items-end space-y-1">
+                        <div className='h-5 w-16 bg-slate-200 rounded animate-pulse'></div>
+                        <div className='h-3 w-12 bg-slate-100 rounded animate-pulse'></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+// Multiple skeleton cards component
+export const ProductCardSkeletons = ({ count = 4 }) => {
+    return (
+        <div className='grid grid-cols-2 sm:flex flex-wrap gap-6 justify-between'>
+            {Array(count).fill('').map((_, index) => (
+                <ProductCardSkeleton key={index} />
+            ))}
+        </div>
+    )
+}
+
+export default ProductCardSkeleton
\ No newline at end of file
diff --git a/components/ui/Button.jsx b/components/ui/Button.jsx
new file mode 100644
index 0000000..0fa197c
--- /dev/null
+++ b/components/ui/Button.jsx
@@ -0,0 +1,63 @@
+'use client'
+import { forwardRef } from 'react'
+import { cn } from '@/lib/utils'
+
+const Button = forwardRef(({ 
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  children,
+  disabled,
+  loading,
+  ...props 
+}, ref) => {
+  const baseStyles = "inline-flex items-center justify-center whitespace-nowrap rounded-lg font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95"
+  
+  const variants = {
+    default: "bg-slate-800 text-white hover:bg-slate-900 hover:shadow-lg hover:-translate-y-0.5 shadow-md",
+    destructive: "bg-red-600 text-white hover:bg-red-700 hover:shadow-lg",
+    outline: "border border-slate-300 bg-white hover:bg-slate-50 hover:border-slate-400 text-slate-700",
+    secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
+    ghost: "hover:bg-slate-100 hover:text-slate-900",
+    link: "text-green-600 underline-offset-4 hover:underline",
+    gradient: "bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 shadow-lg hover:shadow-xl"
+  }
+
+  const sizes = {
+    default: "h-10 px-6 py-2",
+    sm: "h-8 rounded-md px-4 text-sm",
+    lg: "h-12 rounded-lg px-8 text-lg",
+    icon: "h-10 w-10",
+  }
+
+  const Component = asChild ? "span" : "button"
+
+  return (
+    <Component
+      className={cn(
+        baseStyles,
+        variants[variant],
+        sizes[size],
+        disabled && "opacity-50 cursor-not-allowed",
+        loading && "cursor-wait",
+        className
+      )}
+      ref={ref}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && (
+        <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      )}
+      {children}
+    </Component>
+  )
+})
+
+Button.displayName = "Button"
+
+export { Button }
\ No newline at end of file
diff --git a/components/ui/Input.jsx b/components/ui/Input.jsx
new file mode 100644
index 0000000..95115bd
--- /dev/null
+++ b/components/ui/Input.jsx
@@ -0,0 +1,55 @@
+'use client'
+import { forwardRef } from 'react'
+import { cn } from '@/lib/utils'
+
+const Input = forwardRef(({ className, type, error, label, helpText, leftIcon, rightIcon, ...props }, ref) => {
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label className="text-sm font-medium text-slate-700">
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div className="relative">
+        {leftIcon && (
+          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400">
+            {leftIcon}
+          </div>
+        )}
+        <input
+          type={type}
+          className={cn(
+            "flex h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500/20 focus-visible:border-green-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200",
+            leftIcon && "pl-10",
+            rightIcon && "pr-10",
+            error && "border-red-500 focus-visible:ring-red-500/20 focus-visible:border-red-500",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {rightIcon && (
+          <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400">
+            {rightIcon}
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className="text-sm text-red-600 flex items-center gap-1">
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+          </svg>
+          {error}
+        </p>
+      )}
+      {helpText && !error && (
+        <p className="text-sm text-slate-600">{helpText}</p>
+      )}
+    </div>
+  )
+})
+
+Input.displayName = "Input"
+
+export { Input }
\ No newline at end of file
diff --git a/hooks/useCart.js b/hooks/useCart.js
new file mode 100644
index 0000000..e69de29
diff --git a/hooks/useIntersectionObserver.js b/hooks/useIntersectionObserver.js
new file mode 100644
index 0000000..e69de29
diff --git a/lib/utils.js b/lib/utils.js
new file mode 100644
index 0000000..515721c
--- /dev/null
+++ b/lib/utils.js
@@ -0,0 +1,15 @@
+// Simple clsx implementation
+function clsx(...args) {
+  return args
+    .flat()
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+export function cn(...inputs) {
+  return clsx(...inputs)
+}
+
+export default cn
\ No newline at end of file