diff --git a/README.md b/README.md index 857acad3..6dcf12d2 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ Technologies Used : - [Check it out here :eyes:](https://www.figma.com/design/sttuMcIvVuk7AORRMS70s5/VigyBag-Redesign?node-id=0-1&t=hA6fe3u7c9kflZzx-0) -We accpet contributions to our project pertaining to the [Code of Conduct](https://github.com/codervivek5/VigyBag?tab=coc-ov-file) and [Contributing Guidelines](https://github.com/codervivek5/VigyBag/blob/main/CONTRIBUTING.md) stated below. +We accept contributions to our project pertaining to the [Code of Conduct](https://github.com/codervivek5/VigyBag?tab=coc-ov-file) and [Contributing Guidelines](https://github.com/codervivek5/VigyBag/blob/main/CONTRIBUTING.md) stated below. ## :handshake: Contributing diff --git a/src/User/components/EnhancedButtons/AnimatedButton.jsx b/src/User/components/EnhancedButtons/AnimatedButton.jsx new file mode 100644 index 00000000..cf9234a8 --- /dev/null +++ b/src/User/components/EnhancedButtons/AnimatedButton.jsx @@ -0,0 +1,121 @@ +import React from 'react'; +import { motion } from 'framer-motion'; + +const AnimatedButton = ({ + children, + variant = 'primary', + size = 'md', + onClick, + disabled = false, + icon, + className = '', + ...props +}) => { + const baseClasses = 'relative overflow-hidden font-semibold rounded-full transition-all duration-300 flex items-center justify-center gap-2'; + + const variants = { + primary: 'bg-gradient-to-r from-green-600 to-green-700 text-white hover:from-green-700 hover:to-green-800 shadow-lg hover:shadow-xl', + secondary: 'border-2 border-green-600 text-green-700 hover:bg-green-50 hover:border-green-700', + outline: 'border border-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-50', + ghost: 'text-green-600 hover:bg-green-50', + danger: 'bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 shadow-lg hover:shadow-xl' + }; + + const sizes = { + sm: 'px-4 py-2 text-sm', + md: 'px-6 py-3 text-base', + lg: 'px-8 py-4 text-lg', + xl: 'px-10 py-5 text-xl' + }; + + const buttonVariants = { + initial: { scale: 1 }, + hover: { + scale: 1.05, + transition: { type: 'spring', stiffness: 300, damping: 20 } + }, + tap: { + scale: 0.95, + transition: { type: 'spring', stiffness: 300, damping: 20 } + } + }; + + const rippleVariants = { + initial: { scale: 0, opacity: 0.5 }, + animate: { + scale: 4, + opacity: 0, + transition: { duration: 0.6, ease: 'easeOut' } + } + }; + + const handleClick = (e) => { + if (disabled) return; + + // Create ripple effect + const button = e.currentTarget; + const rect = button.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + const ripple = document.createElement('span'); + ripple.style.cssText = ` + position: absolute; + left: ${x}px; + top: ${y}px; + width: ${size}px; + height: ${size}px; + background: rgba(255, 255, 255, 0.3); + border-radius: 50%; + transform: scale(0); + animation: ripple 0.6s ease-out; + pointer-events: none; + `; + + button.appendChild(ripple); + setTimeout(() => ripple.remove(), 600); + + if (onClick) onClick(e); + }; + + return ( + + {icon && ( + + {icon} + + )} + {children} + + {/* Shine effect */} +
+ + + + ); +}; + +export default AnimatedButton; \ No newline at end of file diff --git a/src/User/components/EnhancedHero/EnhancedHero.jsx b/src/User/components/EnhancedHero/EnhancedHero.jsx new file mode 100644 index 00000000..d253d17f --- /dev/null +++ b/src/User/components/EnhancedHero/EnhancedHero.jsx @@ -0,0 +1,205 @@ +import React, { useState, useEffect } from 'react'; +import { motion } from 'framer-motion'; +import { FaLeaf, FaRecycle, FaHeart } from 'react-icons/fa'; +import background from '../../../assets/background.png'; + +const EnhancedHero = ({ onShopNowClick }) => { + const [currentText, setCurrentText] = useState(0); + + const heroTexts = [ + "Your Eco-Friendly Shopping Heaven", + "Sustainable Products for Better Tomorrow", + "Green Living Made Simple" + ]; + + useEffect(() => { + const interval = setInterval(() => { + setCurrentText((prev) => (prev + 1) % heroTexts.length); + }, 3000); + return () => clearInterval(interval); + }, []); + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + duration: 0.8, + staggerChildren: 0.2 + } + } + }; + + const itemVariants = { + hidden: { y: 50, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { duration: 0.6, ease: "easeOut" } + } + }; + + const floatingVariants = { + animate: { + y: [-10, 10, -10], + transition: { + duration: 3, + repeat: Infinity, + ease: "easeInOut" + } + } + }; + + return ( +
+
+ + + + + + + + + + + + + +
+ + + Welcome to{' '} + + VigyBag! + + + + + + {heroTexts[currentText]} + + + + + At VigyBag, we curate the finest earth-friendly essentials to help you reduce your environmental footprint without compromising on quality or style. + + + + + Shop Now + + + + Learn More + + + + +
+ + 1000+ + +
Eco Products
+
+
+ + 50K+ + +
Happy Customers
+
+
+ + 100% + +
Sustainable
+
+ + +
+
+ ); +}; + +export default EnhancedHero; \ No newline at end of file diff --git a/src/User/components/EnhancedProductCard/EnhancedProductCard.jsx b/src/User/components/EnhancedProductCard/EnhancedProductCard.jsx new file mode 100644 index 00000000..c5d0e80b --- /dev/null +++ b/src/User/components/EnhancedProductCard/EnhancedProductCard.jsx @@ -0,0 +1,163 @@ +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Link } from 'react-router-dom'; +import { FaHeart, FaShoppingCart, FaEye, FaStar, FaLeaf } from 'react-icons/fa'; + +const EnhancedProductCard = ({ product }) => { + const [isWishlisted, setIsWishlisted] = useState(false); + const [imageLoaded, setImageLoaded] = useState(false); + + const cardVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5, ease: "easeOut" } + }, + hover: { + y: -8, + transition: { duration: 0.3, ease: "easeOut" } + } + }; + + const overlayVariants = { + hidden: { opacity: 0 }, + visible: { opacity: 1 } + }; + + const buttonVariants = { + hidden: { scale: 0, opacity: 0 }, + visible: { + scale: 1, + opacity: 1, + transition: { type: "spring", stiffness: 300, damping: 20 } + } + }; + + return ( + + {/* Eco Badge */} +
+
+ + Eco-Friendly +
+
+ + {/* Wishlist Button */} + setIsWishlisted(!isWishlisted)} + > + + + + {/* Product Image */} +
+ setImageLoaded(true)} + initial={{ scale: 1.1 }} + animate={{ scale: imageLoaded ? 1 : 1.1 }} + transition={{ duration: 0.6 }} + /> + + {/* Hover Overlay */} + + + + + + + + + + + {/* Discount Badge */} + {product.discount && ( +
+
+ {product.discount} +
+
+ )} +
+ + {/* Product Info */} +
+ + + {product.name} + + + +

+ {product.description} +

+ + {/* Rating */} +
+ {[...Array(5)].map((_, i) => ( + + ))} + (4.2) +
+ + {/* Price */} +
+
+ ₹299 + ₹399 +
+ + + Add to Cart + +
+
+ + {/* Shimmer Effect */} +
+ + ); +}; + +export default EnhancedProductCard; \ No newline at end of file diff --git a/src/User/components/EnhancedSearch/SmartSearchBar.jsx b/src/User/components/EnhancedSearch/SmartSearchBar.jsx new file mode 100644 index 00000000..91ab85a2 --- /dev/null +++ b/src/User/components/EnhancedSearch/SmartSearchBar.jsx @@ -0,0 +1,247 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { FaSearch, FaTimes, FaHistory, FaTrendingUp, FaLeaf } from 'react-icons/fa'; + +const SmartSearchBar = ({ onSearch, placeholder = "Search eco-friendly products..." }) => { + const [query, setQuery] = useState(''); + const [isActive, setIsActive] = useState(false); + const [suggestions, setSuggestions] = useState([]); + const [recentSearches, setRecentSearches] = useState([]); + const [trendingSearches] = useState([ + 'Bamboo Products', 'Organic Soaps', 'Eco-friendly Bags', 'Natural Cosmetics' + ]); + const inputRef = useRef(null); + const containerRef = useRef(null); + + // Mock suggestions - replace with actual API call + const mockSuggestions = [ + { id: 1, name: 'Bamboo Toothbrush', category: 'Personal Care', eco: true }, + { id: 2, name: 'Organic Cotton Bags', category: 'Accessories', eco: true }, + { id: 3, name: 'Natural Soap Set', category: 'Beauty', eco: true }, + { id: 4, name: 'Eco-friendly Water Bottle', category: 'Lifestyle', eco: true }, + { id: 5, name: 'Sustainable Notebooks', category: 'Stationery', eco: true } + ]; + + useEffect(() => { + if (query.length > 0) { + const filtered = mockSuggestions.filter(item => + item.name.toLowerCase().includes(query.toLowerCase()) || + item.category.toLowerCase().includes(query.toLowerCase()) + ); + setSuggestions(filtered); + } else { + setSuggestions([]); + } + }, [query]); + + useEffect(() => { + const handleClickOutside = (event) => { + if (containerRef.current && !containerRef.current.contains(event.target)) { + setIsActive(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + const handleSearch = (searchQuery) => { + if (searchQuery.trim()) { + // Add to recent searches + const newRecentSearches = [searchQuery, ...recentSearches.filter(s => s !== searchQuery)].slice(0, 5); + setRecentSearches(newRecentSearches); + localStorage.setItem('recentSearches', JSON.stringify(newRecentSearches)); + + if (onSearch) onSearch(searchQuery); + setQuery(searchQuery); + setIsActive(false); + } + }; + + const handleKeyPress = (e) => { + if (e.key === 'Enter') { + handleSearch(query); + } + }; + + const clearSearch = () => { + setQuery(''); + setIsActive(false); + inputRef.current?.focus(); + }; + + const containerVariants = { + inactive: { + boxShadow: '0 2px 8px rgba(0,0,0,0.1)', + transition: { duration: 0.2 } + }, + active: { + boxShadow: '0 8px 32px rgba(0,0,0,0.15)', + transition: { duration: 0.2 } + } + }; + + const dropdownVariants = { + hidden: { + opacity: 0, + y: -10, + scale: 0.95, + transition: { duration: 0.2 } + }, + visible: { + opacity: 1, + y: 0, + scale: 1, + transition: { duration: 0.2, ease: 'easeOut' } + } + }; + + return ( +
+ + {/* Search Icon */} +
+ +
+ + {/* Input Field */} + setQuery(e.target.value)} + onFocus={() => setIsActive(true)} + onKeyPress={handleKeyPress} + placeholder={placeholder} + className="w-full pl-12 pr-12 py-4 text-gray-800 placeholder-gray-500 focus:outline-none bg-transparent" + /> + + {/* Clear Button */} + + {query && ( + + + + )} + + + {/* Loading Indicator */} +
+ +
+ + + {/* Search Dropdown */} + + {isActive && ( + + {/* Suggestions */} + {suggestions.length > 0 && ( +
+

+ + Suggestions +

+
+ {suggestions.map((item) => ( + handleSearch(item.name)} + > +
+
+ +
+
+
+ {item.name} +
+
{item.category}
+
+
+ {item.eco && ( + + Eco + + )} + + ))} +
+
+ )} + + {/* Recent Searches */} + {recentSearches.length > 0 && suggestions.length === 0 && ( +
+

+ + Recent Searches +

+
+ {recentSearches.map((search, index) => ( + handleSearch(search)} + > + {search} + + ))} +
+
+ )} + + {/* Trending Searches */} + {query === '' && ( +
+

+ + Trending +

+
+ {trendingSearches.map((trend, index) => ( + handleSearch(trend)} + > + {trend} + + ))} +
+
+ )} + + )} + +
+ ); +}; + +export default SmartSearchBar; \ No newline at end of file diff --git a/src/User/components/Footer/Footer.jsx b/src/User/components/Footer/Footer.jsx index dc5a4365..093c372b 100644 --- a/src/User/components/Footer/Footer.jsx +++ b/src/User/components/Footer/Footer.jsx @@ -6,6 +6,7 @@ import { FaFacebookF, FaWhatsapp, FaLinkedinIn, + FaGithub, FaHome, FaQuestionCircle, FaInfoCircle, @@ -152,6 +153,7 @@ const Footer = () => { +
diff --git a/src/User/components/LoadingComponents/PageLoader.jsx b/src/User/components/LoadingComponents/PageLoader.jsx new file mode 100644 index 00000000..09632995 --- /dev/null +++ b/src/User/components/LoadingComponents/PageLoader.jsx @@ -0,0 +1,96 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { FaLeaf } from 'react-icons/fa'; + +const PageLoader = () => { + const containerVariants = { + animate: { + transition: { + staggerChildren: 0.2 + } + } + }; + + const leafVariants = { + animate: { + y: [0, -20, 0], + rotate: [0, 10, -10, 0], + transition: { + duration: 2, + repeat: Infinity, + ease: "easeInOut" + } + } + }; + + const textVariants = { + animate: { + opacity: [0.5, 1, 0.5], + transition: { + duration: 1.5, + repeat: Infinity, + ease: "easeInOut" + } + } + }; + + return ( +
+ + {/* Animated Leaves */} +
+ {[...Array(3)].map((_, i) => ( + + + + ))} +
+ + {/* Loading Text */} + + Loading VigyBag + + + + Preparing your eco-friendly experience... + + + {/* Progress Bar */} +
+ +
+ +
+ ); +}; + +export default PageLoader; \ No newline at end of file diff --git a/src/User/components/LoadingComponents/ProductCardSkeleton.jsx b/src/User/components/LoadingComponents/ProductCardSkeleton.jsx new file mode 100644 index 00000000..26fdbaec --- /dev/null +++ b/src/User/components/LoadingComponents/ProductCardSkeleton.jsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { motion } from 'framer-motion'; + +const ProductCardSkeleton = () => { + const shimmerVariants = { + animate: { + x: [-100, 100], + transition: { + repeat: Infinity, + duration: 1.5, + ease: "easeInOut" + } + } + }; + + return ( +
+ {/* Image Skeleton */} +
+ +
+ + {/* Content Skeleton */} +
+ {/* Title */} +
+ +
+ + {/* Description */} +
+
+ +
+
+ +
+
+ + {/* Rating */} +
+ {[...Array(5)].map((_, i) => ( +
+ ))} +
+ + {/* Price and Button */} +
+
+ +
+
+ +
+
+
+
+ ); +}; + +export default ProductCardSkeleton; \ No newline at end of file diff --git a/src/User/components/ModernNavbar/ModernNavbar.jsx b/src/User/components/ModernNavbar/ModernNavbar.jsx new file mode 100644 index 00000000..5da22ddc --- /dev/null +++ b/src/User/components/ModernNavbar/ModernNavbar.jsx @@ -0,0 +1,248 @@ +import React, { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Link, useLocation } from 'react-router-dom'; +import { FaSearch, FaShoppingCart, FaHeart, FaUser, FaBars, FaTimes } from 'react-icons/fa'; +import Logo from '../../../assets/images/Logo.svg'; + +const ModernNavbar = () => { + const [isScrolled, setIsScrolled] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const [searchQuery, setSearchQuery] = useState(''); + const [isSearchFocused, setIsSearchFocused] = useState(false); + const location = useLocation(); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 20); + }; + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const navItems = [ + { name: 'Home', path: '/' }, + { name: 'Categories', path: '/categories' }, + { name: 'Products', path: '/products' }, + { name: 'About', path: '/about-us' }, + { name: 'Contact', path: '/contact' } + ]; + + const navbarVariants = { + top: { + backgroundColor: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(10px)', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)' + }, + scrolled: { + backgroundColor: 'rgba(255, 255, 255, 0.98)', + backdropFilter: 'blur(20px)', + boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)' + } + }; + + const mobileMenuVariants = { + closed: { + x: '100%', + transition: { type: 'spring', stiffness: 300, damping: 30 } + }, + open: { + x: 0, + transition: { type: 'spring', stiffness: 300, damping: 30 } + } + }; + + const searchVariants = { + normal: { width: '300px' }, + focused: { width: '400px' } + }; + + return ( + <> + +
+ {/* Logo */} + + + + + {/* Desktop Navigation */} +
+ {navItems.map((item) => ( + + + {item.name} + + {location.pathname === item.path && ( + + )} + + ))} +
+ + {/* Search Bar */} + +
+ + setSearchQuery(e.target.value)} + onFocus={() => setIsSearchFocused(true)} + onBlur={() => setIsSearchFocused(false)} + className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-white/80 backdrop-blur-sm" + /> +
+ + + {/* Action Buttons */} +
+ {/* Wishlist */} + + + + 3 + + + + {/* Cart */} + + + + 2 + + + + {/* User Profile */} + + + Login + + + {/* Mobile Menu Toggle */} + setIsMobileMenuOpen(!isMobileMenuOpen)} + whileTap={{ scale: 0.9 }} + > + {isMobileMenuOpen ? : } + +
+
+ + + {/* Mobile Menu */} + + {isMobileMenuOpen && ( + <> + setIsMobileMenuOpen(false)} + /> + +
+
+ VigyBag + +
+ + {/* Mobile Search */} +
+ + +
+ + {/* Mobile Navigation */} + + + {/* Mobile Actions */} +
+ +
+
+ + + )} + + + ); +}; + +export default ModernNavbar; \ No newline at end of file diff --git a/src/User/components/Popular_Categories/ProductGrid.jsx b/src/User/components/Popular_Categories/ProductGrid.jsx index cd2b310a..e4af202e 100644 --- a/src/User/components/Popular_Categories/ProductGrid.jsx +++ b/src/User/components/Popular_Categories/ProductGrid.jsx @@ -6,6 +6,7 @@ import toast from "react-hot-toast"; import { useNavigate } from "react-router-dom"; import { FaHeart, FaRegHeart } from "react-icons/fa"; import PaymentPage from "../../pages/Payment/Payment"; +import { useAuth } from "../../../context/AuthContext"; // ProductGrid component to display a grid of products function ProductGrid({ products, headingText }) { @@ -35,6 +36,7 @@ function ProductGrid({ products, headingText }) { function ProductCard({ product }) { const navigate = useNavigate(); const dispatch = useDispatch(); + const { isLoggedIn } = useAuth(); const cartItems = useSelector((state) => state.cart.items); const wishlistItems = useSelector((state) => state.wishlist.items); @@ -43,11 +45,21 @@ function ProductCard({ product }) { }; const handleBuyNow = () => { + if (!isLoggedIn) { + toast.error("Please login to buy products!"); + navigate("/auth"); + return; + } navigate(`/checkout`); }; // Function to add product to cart const onAddToCart = (product) => { + if (!isLoggedIn) { + toast.error("Please login to add items to cart!"); + navigate("/auth"); + return; + } const quantity = 1; dispatch(manageCartItem({ product, quantity })); toast.success("Successfully added to cart!"); @@ -66,6 +78,11 @@ function ProductCard({ product }) {
{/* Add to cart button */}
diff --git a/src/User/components/ProductCard/ProductCard.jsx b/src/User/components/ProductCard/ProductCard.jsx index 89d42ff6..35112405 100644 --- a/src/User/components/ProductCard/ProductCard.jsx +++ b/src/User/components/ProductCard/ProductCard.jsx @@ -1,7 +1,23 @@ import React from "react"; import { FaStar } from "react-icons/fa"; +import { useAuth } from "../../../context/AuthContext"; +import { useNavigate } from "react-router-dom"; const ProductCard = ({ image, title, price, rating }) => { + const { isLoggedIn } = useAuth(); + const navigate = useNavigate(); + + const handleAddToCart = () => { + if (!isLoggedIn) { + alert("Please login to add items to your cart!"); + navigate("/auth"); + return; + } + + // Add to cart logic here + alert(`${title} added to cart!`); + }; + return (
{
+
+ {visibleContributors < contributorsData.length ? ( + + ) : ( + + )}
- {/* ENHANCED: Statistics */}
{contributorsData.length}+
diff --git a/src/User/pages/Help/Help.jsx b/src/User/pages/Help/Help.jsx index c7fc27cc..cfa092df 100644 --- a/src/User/pages/Help/Help.jsx +++ b/src/User/pages/Help/Help.jsx @@ -40,21 +40,22 @@ const Help = () => { }; return ( -
-

- Hello, What can we help you with? -

-
{" "} +
+
+

+ Hello, What can we help you with? +

+
{" "}
{ ))} +
); diff --git a/src/User/pages/UIShowcase/UIShowcase.jsx b/src/User/pages/UIShowcase/UIShowcase.jsx new file mode 100644 index 00000000..2f97080b --- /dev/null +++ b/src/User/pages/UIShowcase/UIShowcase.jsx @@ -0,0 +1,295 @@ +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { FaShoppingCart, FaHeart, FaSearch, FaLeaf, FaRecycle } from 'react-icons/fa'; +import EnhancedHero from '../../components/EnhancedHero/EnhancedHero'; +import EnhancedProductCard from '../../components/EnhancedProductCard/EnhancedProductCard'; +import AnimatedButton from '../../components/EnhancedButtons/AnimatedButton'; +import SmartSearchBar from '../../components/EnhancedSearch/SmartSearchBar'; +import ProductCardSkeleton from '../../components/LoadingComponents/ProductCardSkeleton'; +import PageLoader from '../../components/LoadingComponents/PageLoader'; + +const UIShowcase = () => { + const [showLoader, setShowLoader] = useState(false); + const [showSkeletons, setShowSkeletons] = useState(false); + + const sampleProducts = [ + { + id: 1, + name: "Bamboo Toothbrush Set", + description: "Eco-friendly bamboo toothbrushes with soft bristles, perfect for sustainable oral care.", + img: "https://images.unsplash.com/photo-1607613009820-a29f7bb81c04?w=300&h=300&fit=crop", + discount: "20% Off", + path: "/product/1" + }, + { + id: 2, + name: "Organic Cotton Tote Bag", + description: "Durable and stylish organic cotton bag for all your shopping needs.", + img: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=300&h=300&fit=crop", + discount: "15% Off", + path: "/product/2" + }, + { + id: 3, + name: "Natural Soap Collection", + description: "Handcrafted soaps made with natural ingredients and essential oils.", + img: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=300&h=300&fit=crop", + discount: "Buy 2 Get 1", + path: "/product/3" + } + ]; + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1 + } + } + }; + + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { duration: 0.5 } + } + }; + + return ( +
+ {showLoader && } + + {/* Header */} + +
+

+ VigyBag UI Enhancement Showcase +

+

+ Experience the new and improved user interface with modern animations, + enhanced interactions, and eco-friendly design elements. +

+
+ + + {/* Enhanced Hero Section */} + +
+

+ Enhanced Hero Section +

+
+ console.log('Shop Now clicked!')} /> +
+
+ + + {/* Smart Search Bar */} + +
+

+ Smart Search Bar +

+
+ console.log('Search:', query)} + placeholder="Try searching for 'bamboo' or 'organic'..." + /> +
+
+ + + {/* Enhanced Product Cards */} + +
+ + Enhanced Product Cards + + +
+ setShowSkeletons(!showSkeletons)} + icon={} + > + {showSkeletons ? "Show Products" : "Show Loading State"} + +
+ +
+ {showSkeletons ? ( + [...Array(3)].map((_, index) => ( + + + + )) + ) : ( + sampleProducts.map((product, index) => ( + + + + )) + )} +
+
+ + + {/* Animated Buttons */} + +
+ + Animated Buttons + + +
+ +

Primary Buttons

+
+ }> + Add to Cart + + }> + Add to Wishlist + +
+ + + +

Secondary Buttons

+
+ }> + Quick View + + + Learn More + +
+ + + +

Special Buttons

+
+ }> + Eco-Friendly + + setShowLoader(true)} + onMouseLeave={() => setTimeout(() => setShowLoader(false), 2000)} + > + Show Loader + +
+ +
+
+ + + {/* CSS Utilities Demo */} + +
+ + CSS Utilities & Effects + + +
+ +
+ +
+

Floating Animation

+

Smooth floating effect with eco-friendly colors

+ + + +
+ +
+

Glassmorphism

+

Modern glass effect with backdrop blur

+ + + +
+ +
+

Gradient Background

+

Beautiful eco-friendly gradient effects

+ +
+
+ + + {/* Footer */} + +
+

VigyBag UI Enhancement Complete!

+

+ These enhancements provide a modern, engaging, and eco-friendly user experience. +

+ + Back to Home + +
+ +
+ ); +}; + +export default UIShowcase; \ No newline at end of file diff --git a/src/User/pages/UserAuth/UserAuth.jsx b/src/User/pages/UserAuth/UserAuth.jsx index 9c411693..d6b7c573 100644 --- a/src/User/pages/UserAuth/UserAuth.jsx +++ b/src/User/pages/UserAuth/UserAuth.jsx @@ -458,6 +458,32 @@ const AuthForm = () => { {showConfirmPassword ? : }
+
+ + +