update design

components/shopify/shop-header.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import config from '@/lib/config.json';
+import { RiSearchLine, RiShoppingBagLine } from '@remixicon/react';
+import SearchDialog from './search-dialog';
+
+const CartIcon: React.FC = () => {
+  const { toggleCart, itemCount } = useShopifyCart();
+
+  return (
+    <button
+      onClick={toggleCart}
+      className="relative p-1 text-black hover:text-gray-600 transition-colors"
+    >
+      <RiShoppingBagLine size={20} />
+      {itemCount > 0 && (
+        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-medium">
+          {itemCount > 99 ? '99+' : itemCount}
+        </span>
+      )}
+    </button>
+  );
+};
+
+const Header: React.FC = () => {
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  return (
+    <nav className="bg-white/70 backdrop-blur-md border-b border-gray-200/60 sticky top-0 z-30 h-14">
+      <div className="container mx-auto px-4 h-full">
+        <div className="flex justify-between items-center h-full">
+          {/* Logo */}
+          <Link href="/" className="text-lg font-medium text-black font-heading">
+            {config.brand.logo.url ? (
+              <img
+                src={config.brand.logo.url}
+                alt={config.brand.logo.alt || 'Store'}
+                className="h-8"
+              />
+            ) : (
+              'Store'
+            )}
+          </Link>
+
+          {/* Navigation Links */}
+          <div className="flex items-center space-x-6">
+            <Link
+              href="/"
+              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
+            >
+              Products
+            </Link>
+            <Link
+              href="/collections"
+              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
+            >
+              Collections
+            </Link>
+
+            {/* Search + Cart Icons */}
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={() => setSearchOpen(true)}
+                className="p-1 text-black hover:text-gray-600 transition-colors"
+                aria-label="Search products"
+              >
+                <RiSearchLine size={20} />
+              </button>
+              <CartIcon />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
+    </nav>
+  );
+};
+
+export default Header;