"use client"import React, { useState, useEffect } from 'react';import { ChevronLeft, ChevronRight, Star, Users, Recycle, TrendingUp, Heart, ShoppingBag } from 'lucide-react';export default function BrowsePage() {  const [currentSlide, setCurrentSlide] = useState(0);  const [isVisible, setIsVisible] = useState(false);  const featuredItems = [    {       id: 1,       name: "Vintage Denim Jacket",       image: "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=400&h=400&fit=crop",       size: "M",       price: "$45",      rating: 4.8,      liked: false    },    {       id: 2,       name: "Floral Summer Dress",       image: "https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=400&h=400&fit=crop",       size: "S",       price: "$35",      rating: 4.9,      liked: true    },    {       id: 3,       name: "Leather Ankle Boots",       image: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=400&h=400&fit=crop",       size: "8",       price: "$60",      rating: 4.7,      liked: false    },    {       id: 4,       name: "Cozy Wool Sweater",       image: "https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400&h=400&fit=crop",       size: "L",       price: "$40",      rating: 4.8,      liked: true    },    {       id: 5,       name: "Silk Blouse",       image: "https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?w=400&h=400&fit=crop",       size: "M",       price: "$38",      rating: 4.6,      liked: false    },    {       id: 6,       name: "Classic Trench Coat",       image: "https://images.unsplash.com/photo-1539533018447-63fcce2678e3?w=400&h=400&fit=crop",       size: "M",       price: "$85",      rating: 4.9,      liked: false    }  ];  const testimonials = [    {      name: "Sarah Johnson",      text: "ReWear has completely changed how I shop for clothes. I've found amazing pieces and made great friends!",      rating: 5,      image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=60&h=60&fit=crop&crop=face"    },    {      name: "Mike Chen",      text: "Love the sustainable approach. Great quality items and the community is so welcoming.",      rating: 5,      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face"    },    {      name: "Emma Davis",      text: "The variety is incredible and swapping is so much fun. Highly recommend!",      rating: 5,      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop&crop=face"    }  ];  useEffect(() => {    setIsVisible(true);    const interval = setInterval(() => {      setCurrentSlide((prev) => (prev + 1) % Math.max(1, featuredItems.length - 2));    }, 4000);    return () => clearInterval(interval);  }, []);  const nextSlide = () => {    setCurrentSlide((prev) => (prev + 1) % Math.max(1, featuredItems.length - 2));  };  const prevSlide = () => {    setCurrentSlide((prev) => (prev - 1 + Math.max(1, featuredItems.length - 2)) % Math.max(1, featuredItems.length - 2));  };  return (    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">      {/* Header */}      <header className="bg-gradient-to-r from-green-800 to-green-700 shadow-2xl sticky top-0 z-50 backdrop-blur-sm">        <div className="max-w-7xl mx-auto px-6 py-4">          <div className="flex items-center justify-between">            <div className="flex items-center space-x-2">              <div className="w-10 h-10 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center">                <Recycle className="w-6 h-6 text-white" />              </div>              <span className="text-3xl font-bold text-white tracking-tight">ReWear</span>            </div>            <nav className="hidden md:flex items-center space-x-8">              <a href="#" className="text-white hover:text-orange-300 transition-all duration-300 font-medium text-lg hover:scale-105">                Home              </a>              <a href="#" className="text-orange-300 hover:text-orange-200 transition-all duration-300 font-medium text-lg hover:scale-105 border-b-2 border-orange-300">                Browse              </a>              <a href="#" className="text-white hover:text-orange-300 transition-all duration-300 font-medium text-lg hover:scale-105">                Login              </a>              <button className="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-6 py-2 rounded-full font-semibold hover:from-orange-600 hover:to-orange-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">                Sign Up              </button>            </nav>          </div>        </div>      </header>      {/* Hero Section */}      <section className={`relative px-6 py-20 text-center transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>        <div className="absolute inset-0 bg-gradient-to-r from-green-900/20 to-orange-900/20 backdrop-blur-3xl"></div>        <div className="relative max-w-4xl mx-auto">          <h1 className="text-6xl md:text-7xl font-bold text-white mb-6 leading-tight">            Discover             <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600"> Sustainable</span>            <br />Fashion          </h1>          <p className="text-xl md:text-2xl text-slate-300 mb-12 max-w-2xl mx-auto leading-relaxed">            Exchange, swap, and find amazing pre-loved clothing while making a positive impact on our planet          </p>          <div className="flex flex-col sm:flex-row gap-6 justify-center">            <button className="group bg-gradient-to-r from-orange-500 to-orange-600 text-white px-10 py-4 rounded-full text-xl font-semibold hover:from-orange-600 hover:to-orange-700 transition-all duration-300 shadow-2xl hover:shadow-orange-500/25 transform hover:scale-105">              <span className="flex items-center justify-center gap-2">                <ShoppingBag className="w-5 h-5 group-hover:rotate-12 transition-transform" />                Start Swapping              </span>            </button>            <button className="group bg-white/10 backdrop-blur-sm border border-white/20 text-white px-10 py-4 rounded-full text-xl font-semibold hover:bg-white/20 transition-all duration-300 shadow-2xl transform hover:scale-105">              <span className="flex items-center justify-center gap-2">                <TrendingUp className="w-5 h-5 group-hover:rotate-12 transition-transform" />                Browse Items              </span>            </button>          </div>        </div>      </section>      <div className="max-w-7xl mx-auto px-6 py-12">        {/* Featured Items Carousel */}        <section className="mb-20">          <div className="flex items-center justify-between mb-8">            <h2 className="text-4xl font-bold text-white">Featured Items</h2>            <div className="flex gap-2">              <button                 onClick={prevSlide}                className="p-3 bg-white/10 backdrop-blur-sm rounded-full text-white hover:bg-white/20 transition-all duration-300 hover:scale-110"              >                <ChevronLeft className="w-6 h-6" />              </button>              <button                 onClick={nextSlide}                className="p-3 bg-white/10 backdrop-blur-sm rounded-full text-white hover:bg-white/20 transition-all duration-300 hover:scale-110"              >                <ChevronRight className="w-6 h-6" />              </button>            </div>          </div>                    <div className="relative overflow-hidden">            <div               className="flex transition-transform duration-500 ease-in-out"              style={{ transform: `translateX(-${currentSlide * (100 / 3)}%)` }}            >              {featuredItems.map((item) => (                <div key={item.id} className="w-1/3 flex-shrink-0 px-3">                  <div className="group bg-white/10 backdrop-blur-sm rounded-2xl overflow-hidden hover:bg-white/20 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">                    <div className="relative">                      <img                        src={item.image}                        alt={item.name}                        className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"                      />                      <button className="absolute top-4 right-4 p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-all">                        <Heart className={`w-5 h-5 ${item.liked ? 'fill-red-500 text-red-500' : ''}`} />                      </button>                      <div className="absolute top-4 left-4 bg-gradient-to-r from-orange-500 to-orange-600 text-white px-3 py-1 rounded-full text-sm font-semibold">                        Size {item.size}                      </div>                    </div>                    <div className="p-6">                      <div className="flex items-center justify-between mb-2">                        <h3 className="text-xl font-bold text-white">{item.name}</h3>                        <span className="text-2xl font-bold text-orange-400">{item.price}</span>                      </div>                      <div className="flex items-center gap-1 mb-4">                        {[...Array(5)].map((_, i) => (                          <Star key={i} className={`w-4 h-4 ${i < Math.floor(item.rating) ? 'text-yellow-400 fill-yellow-400' : 'text-slate-400'}`} />                        ))}                        <span className="text-slate-300 text-sm ml-2">{item.rating}</span>                      </div>                      <button className="w-full bg-gradient-to-r from-green-600 to-green-700 text-white py-3 rounded-xl font-semibold hover:from-green-700 hover:to-green-800 transition-all duration-300 transform hover:scale-105">                        View Details                      </button>                    </div>                  </div>                </div>              ))}            </div>          </div>        </section>        {/* Testimonials */}        <section className="mb-20">          <h2 className="text-4xl font-bold text-white text-center mb-12">What Our Community Says</h2>          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">            {testimonials.map((testimonial, index) => (              <div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300 transform hover:scale-105">                <div className="flex items-center gap-1 mb-4">                  {[...Array(testimonial.rating)].map((_, i) => (                    <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" />                  ))}                </div>                <p className="text-slate-300 mb-6 italic">"{testimonial.text}"</p>                <div className="flex items-center gap-3">                  <img src={testimonial.image} alt={testimonial.name} className="w-12 h-12 rounded-full object-cover" />                  <div>                    <p className="text-white font-semibold">{testimonial.name}</p>                    <p className="text-slate-400 text-sm">Verified User</p>                  </div>                </div>              </div>            ))}          </div>        </section>        {/* Impact Metrics */}        <section className="grid grid-cols-1 md:grid-cols-3 gap-8">          <div className="bg-gradient-to-br from-green-800/30 to-green-900/30 backdrop-blur-sm rounded-2xl p-8 text-center hover:from-green-700/30 hover:to-green-800/30 transition-all duration-300 transform hover:scale-105">            <div className="w-16 h-16 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">              <ShoppingBag className="w-8 h-8 text-white" />            </div>            <h3 className="text-5xl font-bold text-white mb-2">10,000+</h3>            <p className="text-slate-300 text-lg">Items Swapped</p>            <p className="text-slate-400 text-sm mt-2">And counting every day!</p>          </div>          <div className="bg-gradient-to-br from-orange-800/30 to-orange-900/30 backdrop-blur-sm rounded-2xl p-8 text-center hover:from-orange-700/30 hover:to-orange-800/30 transition-all duration-300 transform hover:scale-105">            <div className="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4">              <Users className="w-8 h-8 text-white" />            </div>            <h3 className="text-5xl font-bold text-white mb-2">5,000+</h3>            <p className="text-slate-300 text-lg">Active Users</p>            <p className="text-slate-400 text-sm mt-2">Growing community</p>          </div>          <div className="bg-gradient-to-br from-green-800/30 to-orange-800/30 backdrop-blur-sm rounded-2xl p-8 text-center hover:from-green-700/30 hover:to-orange-700/30 transition-all duration-300 transform hover:scale-105">            <div className="w-16 h-16 bg-gradient-to-br from-orange-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4">              <Recycle className="w-8 h-8 text-white" />            </div>            <h3 className="text-5xl font-bold text-white mb-2">50 tons</h3>            <p className="text-slate-300 text-lg">Textile Waste Saved</p>            <p className="text-slate-400 text-sm mt-2">Environmental impact</p>          </div>        </section>      </div>      {/* Footer CTA */}      <section className="bg-gradient-to-r from-green-800 to-green-700 mt-20 py-16">        <div className="max-w-4xl mx-auto text-center px-6">          <h2 className="text-4xl font-bold text-white mb-4">Ready to Join the Revolution?</h2>          <p className="text-xl text-green-100 mb-8">Start your sustainable fashion journey today</p>          <button className="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-12 py-4 rounded-full text-xl font-semibold hover:from-orange-600 hover:to-orange-700 transition-all duration-300 shadow-2xl hover:shadow-orange-500/25 transform hover:scale-105">            Get Started Now          </button>        </div>      </section>    </div>  );} enhance the browser page by making it loook professional ,it looks comical

Product Detail Page (Based on your wireframe)Create a product detail page matching this wireframe: - Left side: Large "Add Images" upload area (square placeholder) - Right side: "Add Product Description" text area with multiple lines - Bottom section: "Previous Listings" with 4 small item cards in a row - "Available/Swap" button prominently placed on the right - Search bar at top of page - Clean two-column layout with proper spacing as shown in wireframe - Color scheme: Deep green (#1a5f3f), warm orange (#ff6b35) for buttons - Image upload functionality with drag-and-drop - Responsive design (stack on mobile)and the Admin Panel would be Screen 8 (the bottom wireframe). So the correct sequence is:Screen 1: Login PageScreen 2: Registration PageScreen 3: Landing PageScreen 4: Browse/Home PageScreen 5: Item Listing PageScreen 6: DashboardScreen 7: Product Detail Page ← This was missing!Screen 8: Admin Panel