From 68745f087dc10f47929ad05ac0f5529479fb078c Mon Sep 17 00:00:00 2001 From: ashk6645 Date: Thu, 25 Sep 2025 23:36:42 +0530 Subject: [PATCH 1/3] Minor fixes --- components/ErrorBoundary.jsx | 0 components/Navbar.jsx | 129 +++++++++++++++++------------ components/ProductCardSkeleton.jsx | 0 components/ui/Button.jsx | 0 components/ui/Input.jsx | 0 hooks/useCart.js | 0 hooks/useIntersectionObserver.js | 0 lib/utils.js | 0 8 files changed, 75 insertions(+), 54 deletions(-) create mode 100644 components/ErrorBoundary.jsx create mode 100644 components/ProductCardSkeleton.jsx create mode 100644 components/ui/Button.jsx create mode 100644 components/ui/Input.jsx create mode 100644 hooks/useCart.js create mode 100644 hooks/useIntersectionObserver.js create mode 100644 lib/utils.js diff --git a/components/ErrorBoundary.jsx b/components/ErrorBoundary.jsx new file mode 100644 index 0000000..e69de29 diff --git a/components/Navbar.jsx b/components/Navbar.jsx index d7fb5c8..4463b80 100644 --- a/components/Navbar.jsx +++ b/components/Navbar.jsx @@ -2,68 +2,89 @@ import { Search, ShoppingCart } 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"; const Navbar = () => { + const router = useRouter(); + const [search, setSearch] = useState(""); + const cartCount = useSelector((state: any) => state.cart.total); - const router = useRouter(); + const handleSearch = useCallback( + (e: React.FormEvent) => { + 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 ( + - ) -} - -export default Navbar \ No newline at end of file +export default Navbar; diff --git a/components/ProductCardSkeleton.jsx b/components/ProductCardSkeleton.jsx new file mode 100644 index 0000000..e69de29 diff --git a/components/ui/Button.jsx b/components/ui/Button.jsx new file mode 100644 index 0000000..e69de29 diff --git a/components/ui/Input.jsx b/components/ui/Input.jsx new file mode 100644 index 0000000..e69de29 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..e69de29 From 486cfb762d89bfe8e37592f9b1065ae66ba748d3 Mon Sep 17 00:00:00 2001 From: ashk6645 Date: Thu, 25 Sep 2025 23:45:08 +0530 Subject: [PATCH 2/3] Minor UI changes --- components/Navbar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Navbar.jsx b/components/Navbar.jsx index 4463b80..4fa8129 100644 --- a/components/Navbar.jsx +++ b/components/Navbar.jsx @@ -8,10 +8,10 @@ import { useSelector } from "react-redux"; const Navbar = () => { const router = useRouter(); const [search, setSearch] = useState(""); - const cartCount = useSelector((state: any) => state.cart.total); + const cartCount = useSelector((state) => state.cart.total); const handleSearch = useCallback( - (e: React.FormEvent) => { + (e) => { e.preventDefault(); if (search.trim()) { router.push(`/shop?search=${encodeURIComponent(search.trim())}`); From bda9005d99c61c1af8cc40173aebf69e84f846d1 Mon Sep 17 00:00:00 2001 From: ashk6645 Date: Mon, 6 Oct 2025 19:48:12 +0530 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=A8=20Enhance=20UI=20with=20modern=20?= =?UTF-8?q?components=20and=20animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add reusable Button and Input components with variants - Implement responsive mobile navigation with hamburger menu - Upgrade Hero section with enhanced gradients and animations - Improve ProductCard design with better hover effects - Modernize Newsletter form with validation and loading states - Add custom CSS animations (shimmer, fade-in, slide-in) - Enhance loading components with skeleton screens - Improve overall visual hierarchy and accessibility --- app/globals.css | 43 ++++++++++++ components/Footer.jsx | 19 +++-- components/Hero.jsx | 46 +++++++----- components/Loading.jsx | 33 +++++++-- components/Navbar.jsx | 109 +++++++++++++++++++++++------ components/Newsletter.jsx | 51 ++++++++++++-- components/ProductCard.jsx | 23 +++--- components/ProductCardSkeleton.jsx | 50 +++++++++++++ components/ui/Button.jsx | 63 +++++++++++++++++ components/ui/Input.jsx | 55 +++++++++++++++ lib/utils.js | 15 ++++ 11 files changed, 445 insertions(+), 62 deletions(-) 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/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 ( -