[V0_FILE]typescriptreact:file="app/marketplace/page.tsx" isMerged="true" import Link from "next/link" import { Search, SortDesc, Tag } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function Marketplace() { return (

{/* Header */}

Marketplace

{/* Main Content */}

{/* Filters Sidebar */}

Filters

{/* Category Filter */}

Price Range

{/* Rating Filter */}

Seller Rating

{[5, 4, 3, 2, 1].map((rating) => (

{rating}+ ★

))}

{/* Verification Status */}

Verification

{["Verified Sellers", "Verified Products"].map((item) => (

{item}

))}

{/* Products Grid */}

{/* Sorting and View Options */}

All Accounts Products Services

{/* Products */}

{Array.from({ length: 9 }).map((_, index) => (

{index % 3 === 0 && ( Featured )} {index % 4 === 0 && ( Hot Deal )}

{index % 3 === 0 ? "Gaming" : index % 3 === 1 ? "Social Media" : "Digital Product"}

{4 + (index % 2)} ★

{index % 3 === 0 ? "Premium Gaming Account" : index % 3 === 1 ? "Social Media Profile" : "Digital Asset Bundle"}

${50 + index * 10}.00

{10 + index} sold

))}

{/* Pagination */}

...

) } [V0_FILE]typescriptreact:file="app/marketplace/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowLeft, Check, Heart, Share2, ShieldCheck, Star, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function ProductPage() { return (

{/* Breadcrumb */}

Back to Marketplace

{/* Product Details */}

{/* Product Images */}

{[1, 2, 3, 4].map((img) => (

))}

{/* Product Info */}

Verified Gaming Account

Premium Gaming Account - Max Level

5.0 (48 reviews)

120 sold

$199.99 $249.99 20% OFF

Description

This is a premium gaming account with all characters at max level. The account includes rare skins, weapons, and achievements that are no longer available to new players. Perfect for serious gamers who want to skip the grinding phase.

All characters unlocked and at max level
Rare limited-edition skins and items
All achievements completed
Account in good standing with no bans or warnings

SellerName

Verified Seller

Secure Transaction

This transaction is protected by our escrow system. Payment is only released to the seller after you confirm receipt.

{/* Additional Information */}

Details Reviews (48) Seller Info FAQ

Product Details

Account Information

Game Epic Adventure RPG
Account Level 100 (Max)
Characters All Unlocked (25)
Rare Items 45+
Account Age 3 years

Transfer Information

Transfer Method Full Account Access
Delivery Time Within 24 hours
Support After Sale 30 days
Returns Not Accepted

Customer Reviews

5.0

48 reviews

{[5, 4, 3, 2, 1].map((rating) => (

{rating} stars

{rating === 5 ? "48" : "0"}

))}

{[1, 2, 3].map((review) => (

U{review}

User{review}

1 month ago

Excellent account! Everything was as described and the transfer process was smooth. The seller was very helpful and responsive. Highly recommended!

{review !== 3 && }

))}

{/* Similar Products */}

Similar Products

{[1, 2, 3, 4].map((item) => (

Gaming Account - Level 80

${120 + item * 10}.00

4.8 ★

))}

) } [V0_FILE]typescriptreact:file="app/auth/register/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Eye, EyeOff, Lock, Mail, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" import { useToast } from "@/hooks/use-toast" export default function RegisterPage() { const [isLoading, setIsLoading] = useState(false) const [showPassword, setShowPassword] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", agreeTerms: false, }) const [errors, setErrors] = useState({ name: "", email: "", password: "", confirmPassword: "", agreeTerms: "", }) const router = useRouter() const { toast } = useToast() const handleChange = (e: React.ChangeEvent) => { const { name, value, type, checked } = e.target setFormData((prev) => ({ ...prev, [name]: type === "checkbox" ? checked : value, })) // Clear error when user types if (errors[name as keyof typeof errors]) { setErrors((prev) => ({ ...prev, [name]: "" })) } } const handleCheckboxChange = (checked: boolean) => { setFormData((prev) => ({ ...prev, agreeTerms: checked })) if (errors.agreeTerms) { setErrors((prev) => ({ ...prev, agreeTerms: "" })) } } const validateForm = () => { let valid = true const newErrors = { ...errors } if (!formData.name.trim()) { newErrors.name = "Name is required" valid = false } if (!formData.email) { newErrors.email = "Email is required" valid = false } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = "Email is invalid" valid = false } if (!formData.password) { newErrors.password = "Password is required" valid = false } else if (formData.password.length < 8) { newErrors.password = "Password must be at least 8 characters" valid = false } if (!formData.confirmPassword) { newErrors.confirmPassword = "Please confirm your password" valid = false } else if (formData.password !== formData.confirmPassword) { newErrors.confirmPassword = "Passwords do not match" valid = false } if (!formData.agreeTerms) { newErrors.agreeTerms = "You must agree to the terms and conditions" valid = false } setErrors(newErrors) return valid } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsLoading(true) // Simulate API call try { // In a real app, this would be an API call to your registration endpoint await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate successful registration toast({ title: "Registration successful", description: "Your account has been created. Welcome to SecureTrade!", }) // Redirect to dashboard router.push("/dashboard") } catch (error) { toast({ title: "Registration failed", description: "There was an error creating your account. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Join SecureTrade

Create an account to start buying, selling, and trading digital products securely.

Create Your Profile

Showcase your products and build reputation

Start Trading

Buy, sell, and trade with confidence

Already have an account?{" "} Sign in

Create Your Account

Fill in your details to get started

Full Name

{errors.name &&

{errors.name}

}

{errors.email &&

{errors.email}

}

Password

{errors.password &&

{errors.password}

}

Confirm Password

{errors.confirmPassword &&

{errors.confirmPassword}

}

I agree to the Terms of Service and Privacy Policy {errors.agreeTerms &&

{errors.agreeTerms}

}

OR CONTINUE WITH

) } [V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" export default function ForgotPasswordPage() { const [isLoading, setIsLoading] = useState(false) const [email, setEmail] = useState("") const [error, setError] = useState("") const [isSubmitted, setIsSubmitted] = useState(false) const { toast } = useToast() const handleChange = (e: React.ChangeEvent) => { setEmail(e.target.value) setError("") } const validateForm = () => { if (!email) { setError("Email is required") return false } else if (!/\S+@\S+\.\S+/.test(email)) { setError("Email is invalid") return false } return true } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsLoading(true) // Simulate API call try { // In a real app, this would be an API call to your password reset endpoint await new Promise((resolve) => setTimeout(resolve, 1500)) setIsSubmitted(true) toast({ title: "Reset link sent", description: "Check your email for a link to reset your password.", }) } catch (error) { toast({ title: "Failed to send reset link", description: "There was an error sending the reset link. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Back to login

Reset Your Password

Enter your email address and we'll send you a link to reset your password.

{!isSubmitted ? ( ) : (

We've sent a password reset link to {email}. Please check your email.

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function DashboardLoading() { return (

{Array(3) .fill(0) .map((_, i) => (

))}

{Array(4) .fill(0) .map((_, i) => (

))}

{Array(3) .fill(0) .map((_, i) => (

))}

{Array(4) .fill(0) .map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/add-listing/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft, ImagePlus, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" export default function AddListingPage() { const [isLoading, setIsLoading] = useState(false) const [images, setImages] = useState([]) const [formData, setFormData] = useState({ title: "", category: "", price: "", description: "", }) const [errors, setErrors] = useState({ title: "", category: "", price: "", description: "", images: "", }) const router = useRouter() const { toast } = useToast() const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) // Clear error when user types if (errors[name as keyof typeof errors]) { setErrors((prev) => ({ ...prev, [name]: "" })) } } const handleSelectChange = (value: string) => { setFormData((prev) => ({ ...prev, category: value })) if (errors.category) { setErrors((prev) => ({ ...prev, category: "" })) } } const handleImageUpload = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { const newImages = Array.from(e.target.files).map((file) => URL.createObjectURL(file)) setImages((prev) => [...prev, ...newImages]) if (errors.images) { setErrors((prev) => ({ ...prev, images: "" })) } } } const removeImage = (index: number) => { setImages((prev) => prev.filter((_, i) => i !== index)) } const validateForm = () => { let valid = true const newErrors = { ...errors } if (!formData.title.trim()) { newErrors.title = "Title is required" valid = false } if (!formData.category) { newErrors.category = "Category is required" valid = false } if (!formData.price) { newErrors.price = "Price is required" valid = false } else if (isNaN(Number(formData.price)) || Number(formData.price) <= 0) { newErrors.price = "Price must be a positive number" valid = false } if (!formData.description.trim()) { newErrors.description = "Description is required" valid = false } else if (formData.description.length < 50) { newErrors.description = "Description must be at least 50 characters" valid = false } if (images.length === 0) { newErrors.images = "At least one image is required" valid = false } setErrors(newErrors) return valid } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsLoading(true) // Simulate API call try { // In a real app, this would be an API call to create a new listing await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Listing created", description: "Your listing has been created successfully.", }) // Redirect to dashboard router.push("/dashboard") } catch (error) { toast({ title: "Failed to create listing", description: "There was an error creating your listing. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Back to Dashboard

Create New Listing

Fill in the details to create a new listing

Title {errors.title &&

{errors.title}

}

Category {errors.category &&

{errors.category}

}

Price ($) {errors.price &&

{errors.price}

}

Description

{errors.description && <p className="text-xs text-red-500">{errors.description}</p>}
                  <p className="text-xs text-muted-foreground">
                    {formData.description.length}/500 characters (minimum 50)
                  </p>
                </div>

<div className="space-y-2">
                  <Label>Images</Label>
                  <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
                    {images.map((image, index) => (
                      <div key={index} className="relative aspect-square overflow-hidden rounded-md border bg-muted">
                        <img
                          src={image || "/placeholder.svg"}
                          alt={`Listing image ${index + 1}`}
                          className="h-full w-full object-cover"
                        />
                        <button
                          type="button"
                          className="absolute right-2 top-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
                          onClick={() => removeImage(index)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <label className="flex aspect-square cursor-pointer flex-col items-center justify-center rounded-md border border-dashed bg-muted hover:bg-muted/80">
                      <ImagePlus className="mb-2 h-8 w-8 text-muted-foreground" />
                      <span className="text-sm font-medium">Add Image</span>
                      <span className="text-xs text-muted-foreground">PNG, JPG or WEBP</span>
                      <Input
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={handleImageUpload}
                        disabled={isLoading}
                        multiple
                      />
                    </label>
                  </div>
                  {errors.images && <p className="text-xs text-red-500">{errors.images}</p>}
                </div>

<div className="flex gap-4">
                  <Button type="submit" className="flex-1 bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
                    {isLoading ? "Creating..." : "Create Listing"}
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    className="flex-1"
                    onClick={() => router.push("/dashboard")}
                    disabled={isLoading}
                  >
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>

<div className="space-y-6">
          <Card>
            <CardContent className="p-6">
              <h2 className="mb-4 text-lg font-semibold">Listing Guidelines</h2>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start gap-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="mt-0.5 text-green-500"
                  >
                    <path d="M20 6L9 17l-5-5" />
                  </svg>
                  <span>Provide accurate and detailed information about what you're selling</span>
                </li>
                <li className="flex items-start gap-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="mt-0.5 text-green-500"
                  >
                    <path d="M20 6L9 17l-5-5" />
                  </svg>
                  <span>Upload clear, high-quality images</span>
                </li>
                <li className="flex items-start gap-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="mt-0.5 text-green-500"
                  >
                    <path d="M20 6L9 17l-5-5" />
                  </svg>
                  <span>Set a fair and competitive price</span>
                </li>
                <li className="flex items-start gap-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="mt-0.5 text-green-500"
                  >
                    <path d="M20 6L9 17l-5-5" />
                  </svg>
                  <span>Be responsive to buyer inquiries</span>
                </li>
              </ul>

<div className="mt-6 rounded-lg bg-amber-50 p-4 text-amber-800">
                <h3 className="mb-2 font-medium">Important Notice</h3>
                <p className="text-sm">
                  All listings are reviewed by our team before being published. Listings that violate our terms of
                  service will be rejected.
                </p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <h2 className="mb-4 text-lg font-semibold">Fees & Payments</h2>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Transaction Fee</span>
                  <span className="font-medium">4.5%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Payment Processing</span>
                  <span className="font-medium">2.9% + $0.30</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Payout Time</span>
                  <span className="font-medium">2-3 business days</span>
                </div>
              </div>

<div className="mt-4 text-xs text-muted-foreground">
                Fees are deducted from the final sale price. You'll receive the remaining amount in your account
                balance.
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/profile/[username]/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Calendar, MapPin, MessageSquare, Star, User } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ProfilePage({ params }: { params: { username: string } }) {
  const username = params.username

return (
    <div className="container mx-auto px-4 py-8">
      <Link href="/marketplace" className="mb-6 flex items-center text-sm text-muted-foreground hover:text-foreground">
        <ArrowLeft className="mr-2 h-4 w-4" />
        Back to Marketplace
      </Link>

<div className="grid gap-6 md:grid-cols-[1fr_2fr]">
        <div className="space-y-6">
          <Card>
            <CardContent className="p-6">
              <div className="flex flex-col items-center text-center">
                <Avatar className="h-24 w-24">
                  <AvatarImage src="/placeholder.svg?height=96&width=96" alt={username} />
                  <AvatarFallback>{username.slice(0, 2).toUpperCase()}</AvatarFallback>
                </Avatar>

<h1 className="mt-4 text-2xl font-bold">{username}</h1>
                <Badge className="mt-2 bg-emerald-500 hover:bg-emerald-600">Verified Seller</Badge>

<div className="mt-4 flex items-center justify-center">
                  <div className="flex items-center">
                    <Star className="mr-1 h-4 w-4 fill-yellow-400 text-yellow-400" />
                    <Star className="mr-1 h-4 w-4 fill-yellow-400 text-yellow-400" />
                    <Star className="mr-1 h-4 w-4 fill-yellow-400 text-yellow-400" />
                    <Star className="mr-1 h-4 w-4 fill-yellow-400 text-yellow-400" />
                    <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  </div>
                  <span className="ml-2 text-sm font-medium">5.0 (48 reviews)</span>
                </div>

<div className="mt-6 w-full">
                  <Button className="w-full bg-violet-600 hover:bg-violet-700">
                    <MessageSquare className="mr-2 h-4 w-4" />
                    Contact Seller
                  </Button>
                </div>
              </div>

<div className="mt-6 space-y-4 border-t pt-6">
                <div className="flex items-center gap-2 text-sm">
                  <User className="h-4 w-4 text-muted-foreground" />
                  <span>Member since 2023</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Calendar className="h-4 w-4 text-muted-foreground" />
                  <span>Last active today</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                  <span>United States</span>
                </div>
              </div>

<div className="mt-6 space-y-2 border-t pt-6">
                <h3 className="font-medium">About</h3>
                <p className="text-sm text-muted-foreground">
                  Experienced seller specializing in gaming accounts and digital assets. Fast delivery and excellent
                  customer service guaranteed.
                </p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <h3 className="mb-4 font-medium">Seller Stats</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Total Sales</span>
                  <span className="font-medium">124</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Response Rate</span>
                  <span className="font-medium">98%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Response Time</span>
                  <span className="font-medium">{"< 1 hour"}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Completed Orders</span>
                  <span className="font-medium">120</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Cancellation Rate</span>
                  <span className="font-medium">3%</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<div>
          <Tabs defaultValue="listings">
            <TabsList className="w-full">
              <TabsTrigger value="listings" className="flex-1">
                Listings
              </TabsTrigger>
              <TabsTrigger value="reviews" className="flex-1">
                Reviews
              </TabsTrigger>
            </TabsList>

<TabsContent value="listings" className="mt-6">
              <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
                {Array.from({ length: 6 }).map((_, index) => (
                  <Link href="#" key={index}>
                    <Card className="overflow-hidden border-none transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                      <div className="relative aspect-square overflow-hidden bg-muted">
                        <img
                          src={`/placeholder.svg?height=300&width=300`}
                          alt="Product"
                          className="h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                        />
                        {index % 3 === 0 && (
                          <Badge className="absolute left-2 top-2 bg-emerald-500 hover:bg-emerald-600">Featured</Badge>
                        )}
                      </div>
                      <CardContent className="p-4">
                        <h3 className="mb-1 font-semibold">
                          {index % 3 === 0
                            ? "Premium Gaming Account"
                            : index % 3 === 1
                              ? "Social Media Profile"
                              : "Digital Asset Bundle"}
                        </h3>
                        <div className="flex items-center justify-between">
                          <span className="text-lg font-bold text-violet-600">${50 + index * 10}.00</span>
                          <div className="flex items-center text-sm text-yellow-500">
                            5.0 <span className="ml-1">★</span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                ))}
              </div>
            </TabsContent>

<TabsContent value="reviews" className="mt-6">
              <Card>
                <CardContent className="p-6">
                  <div className="mb-6 flex items-center gap-4">
                    <div className="text-center">
                      <div className="text-5xl font-bold">5.0</div>
                      <div className="flex items-center justify-center">
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      </div>
                      <div className="mt-1 text-sm text-muted-foreground">48 reviews</div>
                    </div>
                    <div className="flex-1">
                      {[5, 4, 3, 2, 1].map((rating) => (
                        <div key={rating} className="mb-1 flex items-center gap-2">
                          <div className="text-sm">{rating} stars</div>
                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
                            <div
                              className="h-full bg-yellow-400"
                              style={{ width: rating === 5 ? "100%" : rating === 4 ? "0%" : "0%" }}
                            ></div>
                          </div>
                          <div className="text-sm">{rating === 5 ? "48" : "0"}</div>
                        </div>
                      ))}
                    </div>
                  </div>

<div className="space-y-6">
                    {Array.from({ length: 5 }).map((_, index) => (
                      <div key={index} className="border-b pb-6 last:border-0">
                        <div className="mb-2 flex items-center gap-2">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={`/placeholder.svg?height=32&width=32`} alt="Reviewer" />
                            <AvatarFallback>U{index + 1}</AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="text-sm font-medium">User{index + 1}</p>
                            <div className="flex items-center">
                              <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                              <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                              <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                              <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                              <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                              <span className="ml-2 text-xs text-muted-foreground">
                                {index === 0 ? "2 days ago" : index === 1 ? "1 week ago" : `${index + 1} weeks ago`}
                              </span>
                            </div>
                          </div>
                        </div>
                        <p className="text-sm text-muted-foreground">
                          {index % 2 === 0
                            ? "Excellent seller! The account was exactly as described and the transfer process was smooth and secure. Would definitely buy from again."
                            : "Great experience overall. Fast delivery and excellent communication throughout the process. The product exceeded my expectations."}
                        </p>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/auth-provider.tsx" isMerged="true"
"use client"

import type React from "react"

import { createContext, useContext, useEffect, useState } from "react"

type User = {
  id: string
  name: string
  email: string
  avatar?: string
  role: "user" | "admin"
  isVerified: boolean
} | null

type AuthContextType = {
  user: User
  isLoading: boolean
  login: (email: string, password: string) => Promise<void>
  register: (name: string, email: string, password: string) => Promise<void>
  logout: () => void
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Check if user is logged in (e.g., from localStorage or a cookie)
    const checkAuth = async () => {
      try {
        // In a real app, this would be an API call to verify the token
        const storedUser = localStorage.getItem("user")
        if (storedUser) {
          setUser(JSON.parse(storedUser))
        }
      } catch (error) {
        console.error("Authentication error:", error)
        setUser(null)
      } finally {
        setIsLoading(false)
      }
    }

checkAuth()
  }, [])

const login = async (email: string, password: string) => {
    setIsLoading(true)
    try {
      // In a real app, this would be an API call to your authentication endpoint
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock user data
      const userData = {
        id: "user-123",
        name: "John Doe",
        email,
        role: "user" as const,
        isVerified: true,
      }

setUser(userData)
      localStorage.setItem("user", JSON.stringify(userData))
    } catch (error) {
      console.error("Login error:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const register = async (name: string, email: string, password: string) => {
    setIsLoading(true)
    try {
      // In a real app, this would be an API call to your registration endpoint
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock user data
      const userData = {
        id: "user-" + Math.random().toString(36).substring(2, 9),
        name,
        email,
        role: "user" as const,
        isVerified: false,
      }

setUser(userData)
      localStorage.setItem("user", JSON.stringify(userData))
    } catch (error) {
      console.error("Registration error:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const logout = () => {
    setUser(null)
    localStorage.removeItem("user")
  }

return <AuthContext.Provider value={{ user, isLoading, login, register, logout }}>{children}</AuthContext.Provider>
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="app/auth/reset-password/[token]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft, Eye, EyeOff, Lock } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"

export default function ResetPasswordPage({ params }: { params: { token: string } }) {
  const [isLoading, setIsLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [formData, setFormData] = useState({
    password: "",
    confirmPassword: "",
  })
  const [errors, setErrors] = useState({
    password: "",
    confirmPassword: "",
  })

const router = useRouter()
  const { toast } = useToast()
  const token = params.token

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))

// Clear error when user types
    if (errors[name as keyof typeof errors]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const validateForm = () => {
    let valid = true
    const newErrors = { ...errors }

if (!formData.password) {
      newErrors.password = "Password is required"
      valid = false
    } else if (formData.password.length < 8) {
      newErrors.password = "Password must be at least 8 characters"
      valid = false
    }

if (!formData.confirmPassword) {
      newErrors.confirmPassword = "Please confirm your password"
      valid = false
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match"
      valid = false
    }

setErrors(newErrors)
    return valid
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

setIsLoading(true)

// Simulate API call
    try {
      // In a real app, this would be an API call to your reset password endpoint with the token
      await new Promise((resolve) => setTimeout(resolve, 1500))

toast({
        title: "Password reset successful",
        description: "Your password has been reset. You can now log in with your new password.",
      })

// Redirect to login page
      router.push("/auth/login")
    } catch (error) {
      toast({
        title: "Failed to reset password",
        description: "There was an error resetting your password. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="container mx-auto flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-12">
      <div className="w-full max-w-md">
        <Link href="/auth/login" className="mb-6 flex items-center text-sm text-muted-foreground hover:text-foreground">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to login
        </Link>

<div className="overflow-hidden rounded-lg border bg-card shadow-sm">
          <div className="p-6">
            <div className="mb-6 text-center">
              <h1 className="text-2xl font-bold">Reset Your Password</h1>
              <p className="text-muted-foreground">Enter your new password below.</p>
            </div>

<form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="password">New Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="password"
                    name="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    className={`pl-10 ${errors.password ? "border-red-500" : ""}`}
                    value={formData.password}
                    onChange={handleChange}
                    disabled={isLoading}
                  />
                  <button
                    type="button"
                    className="absolute right-3 top-3 text-muted-foreground"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </button>
                </div>
                {errors.password && <p className="text-xs text-red-500">{errors.password}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm New Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="confirmPassword"
                    name="confirmPassword"
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    className={`pl-10 ${errors.confirmPassword ? "border-red-500" : ""}`}
                    value={formData.confirmPassword}
                    onChange={handleChange}
                    disabled={isLoading}
                  />
                </div>
                {errors.confirmPassword && <p className="text-xs text-red-500">{errors.confirmPassword}</p>}
              </div>

<Button type="submit" className="w-full bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
                {isLoading ? "Resetting..." : "Reset Password"}
              </Button>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/checkout/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft, CreditCard, Lock, ShieldCheck } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"

export default function CheckoutPage({ params }: { params: { id: string } }) {
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    cardNumber: "",
    cardName: "",
    expiryDate: "",
    cvv: "",
  })
  const [errors, setErrors] = useState({
    cardNumber: "",
    cardName: "",
    expiryDate: "",
    cvv: "",
  })

const router = useRouter()
  const { toast } = useToast()
  const productId = params.id

// Mock product data - in a real app, this would be fetched from an API
  const product = {
    id: productId,
    title: "Premium Gaming Account",
    price: 199.99,
    image: "/placeholder.svg?height=200&width=200",
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    let formattedValue = value

// Format card number with spaces
    if (name === "cardNumber") {
      formattedValue = value
        .replace(/\s/g, "")
        .replace(/(.{4})/g, "$1 ")
        .trim()
        .slice(0, 19)
    }

// Format expiry date with slash
    if (name === "expiryDate") {
      formattedValue = value.replace(/\//g, "")
      if (formattedValue.length > 2) {
        formattedValue = `${formattedValue.slice(0, 2)}/${formattedValue.slice(2, 4)}`
      }
    }

setFormData((prev) => ({ ...prev, [name]: formattedValue }))

// Clear error when user types
    if (errors[name as keyof typeof errors]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const validateForm = () => {
    let valid = true
    const newErrors = { ...errors }

// Validate card number (16 digits)
    if (!formData.cardNumber.replace(/\s/g, "")) {
      newErrors.cardNumber = "Card number is required"
      valid = false
    } else if (!/^\d{4}\s\d{4}\s\d{4}\s\d{4}$/.test(formData.cardNumber)) {
      newErrors.cardNumber = "Invalid card number format"
      valid = false
    }

// Validate card name
    if (!formData.cardName.trim()) {
      newErrors.cardName = "Cardholder name is required"
      valid = false
    }

// Validate expiry date (MM/YY format)
    if (!formData.expiryDate) {
      newErrors.expiryDate = "Expiry date is required"
      valid = false
    } else if (!/^\d{2}\/\d{2}$/.test(formData.expiryDate)) {
      newErrors.expiryDate = "Invalid format (MM/YY)"
      valid = false
    } else {
      const [month, year] = formData.expiryDate.split("/").map(Number)
      const currentYear = new Date().getFullYear() % 100
      const currentMonth = new Date().getMonth() + 1

if (month < 1 || month > 12) {
        newErrors.expiryDate = "Invalid month"
        valid = false
      } else if (year < currentYear || (year === currentYear && month < currentMonth)) {
        newErrors.expiryDate = "Card has expired"
        valid = false
      }
    }

// Validate CVV (3 or 4 digits)
    if (!formData.cvv) {
      newErrors.cvv = "CVV is required"
      valid = false
    } else if (!/^\d{3,4}$/.test(formData.cvv)) {
      newErrors.cvv = "CVV must be 3 or 4 digits"
      valid = false
    }

setErrors(newErrors)
    return valid
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

setIsLoading(true)

// Simulate payment processing
    try {
      // In a real app, this would be an API call to your payment processor
      await new Promise((resolve) => setTimeout(resolve, 2000))

toast({
        title: "Payment successful",
        description: "Your purchase has been completed successfully.",
      })

// Redirect to success page
      router.push(`/checkout/${productId}/success`)
    } catch (error) {
      toast({
        title: "Payment failed",
        description: "There was an error processing your payment. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="container mx-auto px-4 py-8">
      <Link
        href={`/product/${productId}`}
        className="mb-6 flex items-center text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="mr-2 h-4 w-4" />
        Back to Product
      </Link>

<div className="grid gap-8 md:grid-cols-[1fr_400px]">
        <div>
          <h1 className="mb-6 text-2xl font-bold md:text-3xl">Secure Checkout</h1>

<Card>
            <CardContent className="p-6">
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="cardNumber">Card Number</Label>
                    <div className="flex items-center gap-2">
                      <img src="/placeholder.svg?height=24&width=36" alt="Visa" className="h-6" />
                      <img src="/placeholder.svg?height=24&width=36" alt="Mastercard" className="h-6" />
                      <img src="/placeholder.svg?height=24&width=36" alt="Amex" className="h-6" />
                    </div>
                  </div>
                  <div className="relative">
                    <CreditCard className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="cardNumber"
                      name="cardNumber"
                      placeholder="1234 5678 9012 3456"
                      className={`pl-10 ${errors.cardNumber ? "border-red-500" : ""}`}
                      value={formData.cardNumber}
                      onChange={handleChange}
                      disabled={isLoading}
                      maxLength={19}
                    />
                  </div>
                  {errors.cardNumber && <p className="text-xs text-red-500">{errors.cardNumber}</p>}
                </div>

<div className="space-y-2">
                  <Label htmlFor="cardName">Cardholder Name</Label>
                  <Input
                    id="cardName"
                    name="cardName"
                    placeholder="John Doe"
                    className={errors.cardName ? "border-red-500" : ""}
                    value={formData.cardName}
                    onChange={handleChange}
                    disabled={isLoading}
                  />
                  {errors.cardName && <p className="text-xs text-red-500">{errors.cardName}</p>}
                </div>

<div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="expiryDate">Expiry Date</Label>
                    <Input
                      id="expiryDate"
                      name="expiryDate"
                      placeholder="MM/YY"
                      className={errors.expiryDate ? "border-red-500" : ""}
                      value={formData.expiryDate}
                      onChange={handleChange}
                      disabled={isLoading}
                      maxLength={5}
                    />
                    {errors.expiryDate && <p className="text-xs text-red-500">{errors.expiryDate}</p>}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="cvv">CVV</Label>
                    <Input
                      id="cvv"
                      name="cvv"
                      placeholder="123"
                      className={errors.cvv ? "border-red-500" : ""}
                      value={formData.cvv}
                      onChange={handleChange}
                      disabled={isLoading}
                      maxLength={4}
                      type="password"
                    />
                    {errors.cvv && <p className="text-xs text-red-500">{errors.cvv}</p>}
                  </div>
                </div>

<div className="rounded-lg bg-muted/50 p-4">
                  <div className="flex items-center gap-2">
                    <Lock className="h-4 w-4 text-muted-foreground" />
                    <p className="text-sm font-medium">Secure Payment</p>
                  </div>
                  <p className="mt-1 text-xs text-muted-foreground">
                    Your payment information is encrypted and secure. We never store your full card details.
                  </p>
                </div>

<Button type="submit" className="w-full bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
                  {isLoading ? "Processing..." : `Pay $${product.price.toFixed(2)}`}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>

<div>
          <Card>
            <CardContent className="p-6">
              <h2 className="mb-4 text-lg font-semibold">Order Summary</h2>

<div className="mb-4 flex items-center gap-4">
                <div className="h-16 w-16 overflow-hidden rounded-md bg-muted">
                  <img
                    src={product.image || "/placeholder.svg"}
                    alt={product.title}
                    className="h-full w-full object-cover"
                  />
                </div>
                <div>
                  <h3 className="font-medium">{product.title}</h3>
                  <p className="text-sm text-muted-foreground">Digital Product</p>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Subtotal</span>
                  <span>${product.price.toFixed(2)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Platform Fee</span>
                  <span>${(product.price * 0.05).toFixed(2)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Secure Transaction Fee</span>
                  <span>${(product.price * 0.02).toFixed(2)}</span>
                </div>
              </div>

<div className="flex items-center justify-between font-bold">
                <span>Total</span>
                <span>${(product.price * 1.07).toFixed(2)}</span>
              </div>

<div className="mt-6 rounded-lg bg-emerald-50 p-4 text-emerald-800">
                <div className="flex items-center gap-2">
                  <ShieldCheck className="h-5 w-5" />
                  <h3 className="font-medium">Secure Transaction</h3>
                </div>
                <p className="mt-1 text-sm">
                  Your payment is protected by our escrow system. Funds will only be released to the seller after you
                  confirm receipt.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/checkout/[id]/success/page.tsx" isMerged="true"
import Link from "next/link"
import { CheckCircle, Download, MessageSquare } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

export default function CheckoutSuccessPage({ params }: { params: { id: string } }) {
  const productId = params.id

return (
    <div className="container mx-auto flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center px-4 py-12">
      <div className="w-full max-w-md text-center">
        <div className="mb-6 flex justify-center">
          <div className="rounded-full bg-green-100 p-3">
            <CheckCircle className="h-12 w-12 text-green-600" />
          </div>
        </div>

<h1 className="mb-2 text-2xl font-bold md:text-3xl">Payment Successful!</h1>
        <p className="mb-6 text-muted-foreground">
          Your purchase has been completed successfully. The seller has been notified and will process your order
          shortly.
        </p>

<Card>
          <CardContent className="p-6">
            <h2 className="mb-4 text-lg font-semibold">Order Details</h2>

<div className="space-y-3 text-left">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Order ID</span>
                <span className="font-medium">ORD-{Math.random().toString(36).substring(2, 10).toUpperCase()}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Date</span>
                <span className="font-medium">{new Date().toLocaleDateString()}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Payment Method</span>
                <span className="font-medium">Credit Card</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Status</span>
                <span className="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
                  Completed
                </span>
              </div>
            </div>
          </CardContent>
        </Card>

<div className="mt-6 space-y-4">
          <Button className="w-full bg-violet-600 hover:bg-violet-700">
            <Download className="mr-2 h-4 w-4" />
            Download Receipt
          </Button>

<Button variant="outline" className="w-full">
            <MessageSquare className="mr-2 h-4 w-4" />
            Contact Seller
          </Button>

<div className="pt-2">
            <Link href="/dashboard" className="text-sm text-violet-600 hover:underline">
              Go to Dashboard
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"

import { useEffect, useState } from "react"
import { Moon, Sun } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useTheme } from "next-themes"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()
  const [mounted, setMounted] = useState(false)

// Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <Button variant="ghost" size="icon" className="opacity-0">
        <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" />
      </Button>
    )
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="relative overflow-hidden">
          <Sun
            className={`h-[1.2rem] w-[1.2rem] transition-all ${theme === "dark" ? "rotate-90 scale-0" : "rotate-0 scale-100"}`}
          />
          <Moon
            className={`absolute h-[1.2rem] w-[1.2rem] transition-all ${theme === "dark" ? "rotate-0 scale-100" : "rotate-90 scale-0"}`}
          />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")} className="cursor-pointer">
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")} className="cursor-pointer">
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")} className="cursor-pointer">
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 262 83% 58%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 262 83% 58%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 6%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 6%;
    --popover-foreground: 0 0% 98%;
    --primary: 262 83% 58%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 262 83% 58%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Custom animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.3);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Improved scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-muted;
}

::-webkit-scrollbar-thumb {
  @apply rounded-full bg-primary/50;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-primary/70;
}

/* Page transitions */
.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

/* Custom utility classes */
.glass-effect {
  @apply bg-background/80 backdrop-blur-md;
}

.text-gradient {
  @apply bg-gradient-to-r from-violet-600 to-purple-600 bg-clip-text text-transparent;
}

.hover-card-effect {
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-primary/10;
}

.button-glow {
  @apply relative overflow-hidden transition-all duration-300;
}

.button-glow::after {
  content: "";
  @apply absolute inset-0 rounded-md opacity-0 transition-opacity duration-300;
  box-shadow: 0 0 15px 3px theme("colors.primary.DEFAULT");
}

.button-glow:hover::after {
  @apply opacity-100;
}

/* Loading skeleton animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-loading {
  background: linear-gradient(
    90deg,
    theme("colors.muted.DEFAULT") 25%,
    theme("colors.muted.foreground/10") 50%,
    theme("colors.muted.DEFAULT") 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "slide-in-right": {
          "0%": { transform: "translateX(100%)", opacity: 0 },
          "100%": { transform: "translateX(0)", opacity: 1 },
        },
        "slide-out-left": {
          "0%": { transform: "translateX(0)", opacity: 1 },
          "100%": { transform: "translateX(-100%)", opacity: 0 },
        },
        "fade-in": {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
        "fade-out": {
          "0%": { opacity: 1 },
          "100%": { opacity: 0 },
        },
        "bounce-subtle": {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-5px)" },
        },
        "pulse-subtle": {
          "0%, 100%": { opacity: 1 },
          "50%": { opacity: 0.7 },
        },
        "spin-slow": {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "slide-in-right": "slide-in-right 0.3s ease-out",
        "slide-out-left": "slide-out-left 0.3s ease-out",
        "fade-in": "fade-in 0.3s ease-out",
        "fade-out": "fade-out 0.3s ease-out",
        "bounce-subtle": "bounce-subtle 2s infinite",
        "pulse-subtle": "pulse-subtle 2s infinite",
        "spin-slow": "spin-slow 3s linear infinite",
      },
      transitionProperty: {
        height: "height",
        spacing: "margin, padding",
      },
      boxShadow: {
        glow: "0 0 15px 2px rgba(139, 92, 246, 0.3)",
        "glow-strong": "0 0 20px 5px rgba(139, 92, 246, 0.5)",
        "inner-glow": "inset 0 0 15px 2px rgba(139, 92, 246, 0.2)",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        "gradient-mesh": "linear-gradient(to right bottom, #8b5cf6, #6366f1, #3b82f6, #0ea5e9, #06b6d4)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import { Inter } from "next/font/google"
import Link from "next/link"
import { Bell, Menu, Search, ShoppingCart, User } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ThemeProvider } from "@/components/theme-provider"
import { AuthProvider } from "@/components/auth-provider"
import { ThemeToggle } from "@/components/theme-toggle"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Toaster } from "@/components/ui/toaster"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "SecureTrade - Buy, Sell, and Trade Digital Products Securely",
  description: "The most secure platform for buying, selling, and trading digital accounts and products.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <AuthProvider>
            <div className="flex min-h-screen flex-col">
              <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
                <div className="container mx-auto flex h-16 items-center justify-between px-4">
                  <div className="flex items-center gap-6">
                    <Link
                      href="/"
                      className="flex items-center gap-2 text-xl font-bold text-primary transition-colors hover:text-primary/90"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="h-6 w-6 animate-pulse-subtle"
                      >
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                        <path d="M8 11h8" />
                        <path d="M12 15V7" />
                      </svg>
                      SecureTrade
                    </Link>
                    <nav className="hidden md:flex md:gap-6">
                      <Link
                        href="/marketplace"
                        className="group relative text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                      >
                        Marketplace
                        <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full"></span>
                      </Link>
                      <Link
                        href="#"
                        className="group relative text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                      >
                        Categories
                        <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full"></span>
                      </Link>
                      <Link
                        href="#"
                        className="group relative text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                      >
                        How It Works
                        <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full"></span>
                      </Link>
                      <Link
                        href="#"
                        className="group relative text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                      >
                        Support
                        <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full"></span>
                      </Link>
                    </nav>
                  </div>
                  <div className="hidden md:flex md:items-center md:gap-4">
                    <div className="relative">
                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <Input
                        type="search"
                        placeholder="Search..."
                        className="w-[200px] bg-background pl-8 transition-all duration-300 focus:w-[300px] md:w-[300px] md:focus:w-[400px]"
                      />
                    </div>
                    <ThemeToggle />
                    <Button variant="ghost" size="icon" className="relative">
                      <Bell className="h-5 w-5 transition-transform duration-300 hover:rotate-12" />
                      <span className="absolute right-1 top-1 flex h-2 w-2 animate-pulse rounded-full bg-red-600"></span>
                    </Button>
                    <Button variant="ghost" size="icon" className="transition-transform duration-300 hover:rotate-12">
                      <ShoppingCart className="h-5 w-5" />
                    </Button>
                    <Link href="/auth/login">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-full transition-all duration-300 hover:bg-primary/10 hover:text-primary"
                      >
                        <User className="h-5 w-5" />
                      </Button>
                    </Link>
                  </div>

{/* Mobile Menu */}
                  <Sheet>
                    <SheetTrigger asChild>
                      <Button variant="ghost" size="icon" className="md:hidden">
                        <Menu className="h-6 w-6" />
                        <span className="sr-only">Toggle menu</span>
                      </Button>
                    </SheetTrigger>
                    <SheetContent side="right" className="w-[80vw] sm:w-[350px]">
                      <div className="flex flex-col gap-6 py-4">
                        <div className="flex items-center justify-between">
                          <Link href="/" className="flex items-center gap-2 text-xl font-bold text-primary">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              className="h-6 w-6"
                            >
                              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                              <path d="M8 11h8" />
                              <path d="M12 15V7" />
                            </svg>
                            SecureTrade
                          </Link>
                          <ThemeToggle />
                        </div>

<nav className="flex flex-col gap-2">
                          <Link
                            href="/marketplace"
                            className="flex items-center rounded-md p-2 text-sm font-medium hover:bg-muted"
                          >
                            Marketplace
                          </Link>
                          <Link
                            href="#"
                            className="flex items-center rounded-md p-2 text-sm font-medium hover:bg-muted"
                          >
                            Categories
                          </Link>
                          <Link
                            href="#"
                            className="flex items-center rounded-md p-2 text-sm font-medium hover:bg-muted"
                          >
                            How It Works
                          </Link>
                          <Link
                            href="#"
                            className="flex items-center rounded-md p-2 text-sm font-medium hover:bg-muted"
                          >
                            Support
                          </Link>
                        </nav>

<div className="flex gap-2">
                          <Button variant="outline" size="sm" className="flex-1">
                            <Bell className="mr-2 h-4 w-4" />
                            Notifications
                          </Button>
                          <Button variant="outline" size="sm" className="flex-1">
                            <ShoppingCart className="mr-2 h-4 w-4" />
                            Cart
                          </Button>
                        </div>

<Link href="/auth/login">
                          <Button className="w-full bg-primary hover:bg-primary/90">
                            <User className="mr-2 h-4 w-4" />
                            Sign In
                          </Button>
                        </Link>
                      </div>
                    </SheetContent>
                  </Sheet>
                </div>
              </header>
              <main className="flex-1">{children}</main>
              <footer className="border-t bg-muted/30 py-8 dark:bg-muted/10">
                <div className="container mx-auto px-4">
                  <div className="mb-8 flex flex-col items-center justify-between gap-4 md:flex-row">
                    <Link href="/" className="flex items-center gap-2 text-xl font-bold text-primary">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="h-6 w-6"
                      >
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                        <path d="M8 11h8" />
                        <path d="M12 15V7" />
                      </svg>
                      SecureTrade
                    </Link>
                    <div className="flex gap-4">
                      <Link
                        href="#"
                        className="rounded-full bg-muted p-2 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                        </svg>
                      </Link>
                      <Link
                        href="#"
                        className="rounded-full bg-muted p-2 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                        </svg>
                      </Link>
                      <Link
                        href="#"
                        className="rounded-full bg-muted p-2 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                          <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                          <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                        </svg>
                      </Link>
                    </div>
                  </div>
                  <div className="grid gap-8 md:grid-cols-4">
                    <div>
                      <h3 className="mb-4 text-lg font-bold">Company</h3>
                      <ul className="space-y-2">
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            About Us
                          </Link>
                        </li>
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Careers
                          </Link>
                        </li>
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Press
                          </Link>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <h3 className="mb-4 text-lg font-bold">Support</h3>
                      <ul className="space-y-2">
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Help Center
                          </Link>
                        </li>
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Safety Center
                          </Link>
                        </li>
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Community Guidelines
                          </Link>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <h3 className="mb-4 text-lg font-bold">Legal</h3>
                      <ul className="space-y-2">
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Terms of Service
                          </Link>
                        </li>
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Privacy Policy
                          </Link>
                        </li>
                        <li>
                          <Link href="#" className="text-muted-foreground transition-colors hover:text-primary">
                            Cookie Policy
                          </Link>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <h3 className="mb-4 text-lg font-bold">Newsletter</h3>
                      <p className="mb-4 text-sm text-muted-foreground">
                        Subscribe to our newsletter for the latest updates and offers.
                      </p>
                      <div className="flex gap-2">
                        <Input placeholder="Your email" className="bg-background" />
                        <Button className="bg-primary hover:bg-primary/90">Subscribe</Button>
                      </div>
                    </div>
                  </div>
                  <div className="mt-12 border-t border-border pt-8 text-center text-sm text-muted-foreground">
                    <p>© 2025 SecureTrade. All rights reserved.</p>
                  </div>
                </div>
              </footer>
            </div>
            <Toaster />
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
  ({ side = "right", className, children, ...props }, ref) => (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
        {children}
        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  ),
)
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}

[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/hooks/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}

[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
        success: "border-green-500 bg-green-500 text-white dark:border-green-600 dark:bg-green-600",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}

[V0_FILE]typescriptreact:file="components/page-transition.tsx"
"use client"

import type React from "react"

import { usePathname } from "next/navigation"
import { useEffect, useState } from "react"

export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const [isTransitioning, setIsTransitioning] = useState(false)
  const [displayChildren, setDisplayChildren] = useState(children)

useEffect(() => {
    if (pathname) {
      setIsTransitioning(true)
      const timeout = setTimeout(() => {
        setDisplayChildren(children)
        setIsTransitioning(false)
      }, 300)
      return () => clearTimeout(timeout)
    }
  }, [pathname, children])

return (
    <div
      className={`transition-all duration-300 ${
        isTransitioning ? "opacity-0 translate-y-4" : "opacity-100 translate-y-0"
      }`}
    >
      {displayChildren}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import type React from "react"
import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
}

export { Skeleton }

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import { ArrowRight, ShieldCheck, Repeat, Zap, ChevronRight, Star, Check } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Hero Section with Animated Background */}
      <section className="relative overflow-hidden bg-gradient-to-br from-violet-600 via-indigo-700 to-purple-800 dark:from-violet-950 dark:via-indigo-950 dark:to-purple-950">
        <div className="absolute inset-0 bg-[url('/placeholder.svg?height=500&width=500')] bg-repeat opacity-5"></div>

{/* Animated particles */}
        <div className="absolute inset-0 overflow-hidden">
          {Array.from({ length: 20 }).map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-white opacity-20"
              style={{
                width: `${Math.random() * 10 + 5}px`,
                height: `${Math.random() * 10 + 5}px`,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animation: `float ${Math.random() * 10 + 10}s linear infinite`,
                animationDelay: `${Math.random() * 5}s`,
              }}
            ></div>
          ))}
        </div>

<div className="container relative mx-auto px-4 py-20 text-center md:py-32">
          <Badge className="mb-4 animate-bounce-subtle bg-white/10 text-white backdrop-blur-sm">
            Secure Trading Platform
          </Badge>
          <h1 className="mb-6 text-4xl font-extrabold tracking-tight text-white md:text-6xl">
            The Future of Secure <span className="text-gradient">Digital Trading</span>
          </h1>
          <p className="mx-auto mb-10 max-w-2xl text-lg text-white/80 md:text-xl">
            Buy, sell, and trade digital accounts and products with confidence on our innovative and secure platform.
          </p>
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Button size="lg" className="button-glow group bg-white text-violet-700 hover:bg-white/90">
              Explore Marketplace
              <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
              Learn How It Works
            </Button>
          </div>

{/* Floating cards */}
          <div className="relative mt-16 hidden md:block">
            <div className="absolute left-[10%] top-0 animate-float" style={{ animationDelay: "0.5s" }}>
              <Card className="w-48 rotate-[-5deg] overflow-hidden border-none shadow-xl">
                <div className="bg-gradient-to-r from-violet-500 to-purple-600 p-1"></div>
                <CardContent className="p-3">
                  <div className="flex items-center gap-2">
                    <div className="h-8 w-8 rounded-full bg-violet-100">
                      <img src="/placeholder.svg?height=32&width=32" alt="" className="h-full w-full rounded-full" />
                    </div>
                    <div>
                      <p className="text-xs font-medium">Gaming Account</p>
                      <p className="text-xs text-muted-foreground">$199</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
            <div className="absolute right-[15%] top-10 animate-float" style={{ animationDelay: "1s" }}>
              <Card className="w-48 rotate-[5deg] overflow-hidden border-none shadow-xl">
                <div className="bg-gradient-to-r from-emerald-500 to-teal-600 p-1"></div>
                <CardContent className="p-3">
                  <div className="flex items-center gap-2">
                    <div className="h-8 w-8 rounded-full bg-emerald-100">
                      <img src="/placeholder.svg?height=32&width=32" alt="" className="h-full w-full rounded-full" />
                    </div>
                    <div>
                      <p className="text-xs font-medium">Social Media</p>
                      <p className="text-xs text-muted-foreground">$149</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>

{/* Animated Wave Divider */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="text-background">
            <path
              fill="currentColor"
              fillOpacity="1"
              d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
            ></path>
          </svg>
        </div>
      </section>

{/* Features Section */}
      <section className="container mx-auto px-4 py-20">
        <div className="mb-12 text-center">
          <Badge className="mb-2">Why Choose Us</Badge>
          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl">Why Choose Our Platform</h2>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            We provide the most secure and efficient way to trade digital products online.
          </p>
        </div>

<div className="grid gap-8 md:grid-cols-3">
          <Card className="group overflow-hidden border-none shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:shadow-violet-100 dark:hover:shadow-violet-900/20">
            <div className="bg-gradient-to-r from-violet-500 to-purple-600 p-1 transition-all duration-300 group-hover:p-1.5"></div>
            <CardContent className="p-6 pt-8">
              <div className="mb-4 rounded-full bg-violet-100 p-3 text-violet-600 transition-all duration-300 group-hover:scale-110 dark:bg-violet-900/30">
                <ShieldCheck className="h-6 w-6" />
              </div>
              <h3 className="mb-2 text-xl font-bold">Secure Transactions</h3>
              <p className="text-muted-foreground">
                Our escrow system ensures that both buyers and sellers are protected throughout the entire transaction
                process.
              </p>
              <div className="mt-4 flex items-center text-sm font-medium text-violet-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-violet-400">
                Learn more <ChevronRight className="ml-1 h-4 w-4" />
              </div>
            </CardContent>
          </Card>

<Card className="group overflow-hidden border-none shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:shadow-emerald-100 dark:hover:shadow-emerald-900/20">
            <div className="bg-gradient-to-r from-emerald-500 to-teal-600 p-1 transition-all duration-300 group-hover:p-1.5"></div>
            <CardContent className="p-6 pt-8">
              <div className="mb-4 rounded-full bg-emerald-100 p-3 text-emerald-600 transition-all duration-300 group-hover:scale-110 dark:bg-emerald-900/30">
                <Repeat className="h-6 w-6" />
              </div>
              <h3 className="mb-2 text-xl font-bold">Easy Trading</h3>
              <p className="text-muted-foreground">
                Seamlessly trade accounts and digital products with our intuitive platform designed for smooth
                exchanges.
              </p>
              <div className="mt-4 flex items-center text-sm font-medium text-emerald-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-emerald-400">
                Learn more <ChevronRight className="ml-1 h-4 w-4" />
              </div>
            </CardContent>
          </Card>

<Card className="group overflow-hidden border-none shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:shadow-amber-100 dark:hover:shadow-amber-900/20">
            <div className="bg-gradient-to-r from-amber-500 to-orange-600 p-1 transition-all duration-300 group-hover:p-1.5"></div>
            <CardContent className="p-6 pt-8">
              <div className="mb-4 rounded-full bg-amber-100 p-3 text-amber-600 transition-all duration-300 group-hover:scale-110 dark:bg-amber-900/30">
                <Zap className="h-6 w-6" />
              </div>
              <h3 className="mb-2 text-xl font-bold">Lightning Fast</h3>
              <p className="text-muted-foreground">
                Our platform is optimized for speed, ensuring that listings, searches, and transactions happen
                instantly.
              </p>
              <div className="mt-4 flex items-center text-sm font-medium text-amber-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-amber-400">
                Learn more <ChevronRight className="ml-1 h-4 w-4" />
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Featured Listings Section */}
      <section className="bg-muted/30 py-20 dark:bg-muted/10">
        <div className="container mx-auto px-4">
          <div className="mb-12 text-center">
            <Badge className="mb-2">Featured</Badge>
            <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl">Featured Listings</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Explore our top-rated digital products and accounts from verified sellers.
            </p>
          </div>

<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {[1, 2, 3, 4].map((item) => (
              <Link href="#" key={item} className="group">
                <Card className="hover-card-effect overflow-hidden border-none">
                  <div className="relative aspect-square overflow-hidden bg-muted">
                    <div className="absolute inset-0 bg-gradient-to-br from-violet-600/20 to-purple-800/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
                    <img
                      src={`/placeholder.svg?height=300&width=300`}
                      alt="Product"
                      className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                    <div className="absolute bottom-2 left-2 rounded-full bg-emerald-500 px-3 py-1 text-xs font-medium text-white">
                      Verified
                    </div>
                    {item === 1 && (
                      <div className="absolute right-2 top-2 rounded-full bg-violet-500 px-3 py-1 text-xs font-medium text-white">
                        Hot Deal
                      </div>
                    )}
                  </div>
                  <CardContent className="p-4">
                    <div className="mb-1 flex items-center justify-between">
                      <Badge variant="outline" className="rounded-sm px-2 py-0 text-xs font-normal">
                        {item % 2 === 0 ? "Gaming" : "Social Media"}
                      </Badge>
                      <div className="flex items-center text-sm text-yellow-500">
                        <Star className="mr-1 h-3 w-3 fill-yellow-500" />
                        <span>{4.5 + (item % 2) * 0.3}</span>
                      </div>
                    </div>
                    <h3 className="mb-1 font-semibold group-hover:text-primary">Premium Gaming Account</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-lg font-bold text-primary">${120 - item * 5}.00</span>
                      <span className="text-xs text-muted-foreground">{120 - item * 10} sold</span>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
          <div className="mt-12 text-center">
            <Button size="lg" className="button-glow bg-primary text-white hover:bg-primary/90">
              View All Listings
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      </section>

{/* How It Works Section */}
      <section className="container mx-auto px-4 py-20">
        <div className="mb-12 text-center">
          <Badge className="mb-2">Process</Badge>
          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl">How It Works</h2>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            Our simple 4-step process makes trading digital products safe and easy.
          </p>
        </div>

<div className="relative mx-auto max-w-4xl">
          {/* Timeline Line */}
          <div className="absolute left-4 top-0 h-full w-0.5 bg-gradient-to-b from-violet-600 to-purple-600 md:left-1/2 md:-ml-0.5"></div>

{/* Timeline Items */}
          <div className="space-y-12">
            {[
              {
                title: "Create Your Account",
                description: "Sign up and verify your identity to start using our platform.",
                icon: "👤",
              },
              {
                title: "List or Browse",
                description: "List your digital products or browse existing listings.",
                icon: "🔍",
              },
              {
                title: "Secure Transaction",
                description: "Use our escrow system for safe and secure transactions.",
                icon: "🔒",
              },
              {
                title: "Complete Exchange",
                description: "Finalize the transaction and leave feedback for the other party.",
                icon: "✅",
              },
            ].map((step, index) => (
              <div key={index} className="relative flex items-start md:justify-between">
                <div className="order-last ml-6 w-full md:order-first md:ml-0 md:mr-6 md:w-5/12 md:text-right">
                  {index % 2 === 0 ? (
                    <div className="group">
                      <h3 className="mb-2 text-xl font-bold transition-colors duration-300 group-hover:text-primary">
                        {step.title}
                      </h3>
                      <p className="text-muted-foreground">{step.description}</p>
                    </div>
                  ) : (
                    <div className="hidden md:block"></div>
                  )}
                </div>

<div className="z-10 flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-violet-600 to-purple-600 text-white shadow-glow transition-transform duration-300 hover:scale-110 md:mx-auto">
                  <span className="text-sm">{index + 1}</span>
                </div>

<div className="order-first mr-6 w-full md:order-last md:ml-6 md:mr-0 md:w-5/12 md:text-left">
                  {index % 2 === 1 ? (
                    <div className="group">
                      <h3 className="mb-2 text-xl font-bold transition-colors duration-300 group-hover:text-primary">
                        {step.title}
                      </h3>
                      <p className="text-muted-foreground">{step.description}</p>
                    </div>
                  ) : (
                    <div className="hidden md:block"></div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials Section */}
      <section className="bg-muted/30 py-20 dark:bg-muted/10">
        <div className="container mx-auto px-4">
          <div className="mb-12 text-center">
            <Badge className="mb-2">Testimonials</Badge>
            <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl">What Our Users Say</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Hear from our satisfied users about their experience with SecureTrade.
            </p>
          </div>

<div className="grid gap-6 md:grid-cols-3">
            {[
              {
                name: "Alex Johnson",
                role: "Gamer & Seller",
                content:
                  "SecureTrade has completely changed how I sell my gaming accounts. The escrow system gives both me and my buyers peace of mind.",
                rating: 5,
              },
              {
                name: "Sarah Williams",
                role: "Digital Asset Collector",
                content:
                  "I've been buying digital assets for years, and SecureTrade is by far the most secure platform I've used. The verification process ensures I'm always getting what I pay for.",
                rating: 5,
              },
              {
                name: "Michael Chen",
                role: "Content Creator",
                content:
                  "As someone who regularly buys and sells social media accounts, I appreciate the transparency and security that SecureTrade provides. It's become my go-to platform.",
                rating: 4,
              },
            ].map((testimonial, index) => (
              <Card key={index} className="hover-card-effect overflow-hidden border-none">
                <CardContent className="p-6">
                  <div className="mb-4 flex items-center">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${i < testimonial.rating ? "fill-yellow-500 text-yellow-500" : "text-muted"}`}
                      />
                    ))}
                  </div>
                  <p className="mb-6 text-muted-foreground">"{testimonial.content}"</p>
                  <div className="flex items-center gap-3">
                    <div className="h-10 w-10 overflow-hidden rounded-full bg-muted">
                      <img
                        src={`/placeholder.svg?height=40&width=40`}
                        alt={testimonial.name}
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div>
                      <h4 className="font-medium">{testimonial.name}</h4>
                      <p className="text-sm text-muted-foreground">{testimonial.role}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="container mx-auto px-4 py-20">
        <div className="grid gap-8 md:grid-cols-4">
          {[
            { label: "Active Users", value: "10,000+", icon: "👥" },
            { label: "Transactions", value: "$2M+", icon: "💰" },
            { label: "Success Rate", value: "99.8%", icon: "📈" },
            { label: "Verified Sellers", value: "2,500+", icon: "✅" },
          ].map((stat, index) => (
            <Card key={index} className="hover-card-effect overflow-hidden border-none text-center">
              <CardContent className="p-6">
                <div className="mb-4 text-4xl">{stat.icon}</div>
                <h3 className="mb-1 text-3xl font-bold text-primary">{stat.value}</h3>
                <p className="text-muted-foreground">{stat.label}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* CTA Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-violet-600 via-indigo-700 to-purple-800 py-20 text-white dark:from-violet-950 dark:via-indigo-950 dark:to-purple-950">
        <div className="absolute inset-0 bg-[url('/placeholder.svg?height=500&width=500')] bg-repeat opacity-5"></div>

{/* Animated particles */}
        <div className="absolute inset-0 overflow-hidden">
          {Array.from({ length: 15 }).map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-white opacity-20"
              style={{
                width: `${Math.random() * 8 + 4}px`,
                height: `${Math.random() * 8 + 4}px`,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animation: `float ${Math.random() * 10 + 10}s linear infinite`,
                animationDelay: `${Math.random() * 5}s`,
              }}
            ></div>
          ))}
        </div>

<div className="container relative mx-auto px-4 text-center">
          <Badge className="mb-4 bg-white/10 text-white backdrop-blur-sm">Get Started Today</Badge>
          <h2 className="mb-6 text-3xl font-bold md:text-4xl">Ready to Get Started?</h2>
          <p className="mx-auto mb-8 max-w-2xl text-lg text-white/80">
            Join thousands of users who are already buying, selling, and trading on our secure platform.
          </p>
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Button size="lg" className="button-glow group bg-white text-violet-700 hover:bg-white/90">
              Create Your Account
              <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
              Learn More
            </Button>
          </div>

<div className="mt-12 flex flex-wrap items-center justify-center gap-6">
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-emerald-400" />
              <span className="text-sm font-medium text-white/90">No hidden fees</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-emerald-400" />
              <span className="text-sm font-medium text-white/90">Secure transactions</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-emerald-400" />
              <span className="text-sm font-medium text-white/90">24/7 support</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-emerald-400" />
              <span className="text-sm font-medium text-white/90">Money-back guarantee</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Eye, EyeOff, Lock, Mail } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/components/auth-provider"
import { PageTransition } from "@/components/page-transition"

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  })
  const [errors, setErrors] = useState({
    email: "",
    password: "",
  })

const router = useRouter()
  const { toast } = useToast()
  const { login } = useAuth()

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))

// Clear error when user types
    if (errors[name as keyof typeof errors]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const validateForm = () => {
    let valid = true
    const newErrors = { ...errors }

if (!formData.email) {
      newErrors.email = "Email is required"
      valid = false
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid"
      valid = false
    }

if (!formData.password) {
      newErrors.password = "Password is required"
      valid = false
    }

setErrors(newErrors)
    return valid
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

setIsLoading(true)

try {
      await login(formData.email, formData.password)

toast({
        title: "Login successful",
        description: "Welcome back to SecureTrade!",
        variant: "success",
      })

// Redirect to dashboard
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Login failed",
        description: "Please check your credentials and try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <PageTransition>
      <div className="container mx-auto flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-12">
        <div className="grid w-full max-w-[1000px] overflow-hidden rounded-xl border shadow-lg transition-all duration-300 hover:shadow-xl dark:shadow-none dark:hover:shadow-primary/10 md:grid-cols-2">
          <div className="flex flex-col justify-center bg-gradient-to-br from-violet-600 via-indigo-700 to-purple-800 p-8 text-white dark:from-violet-950 dark:via-indigo-950 dark:to-purple-950">
            <div className="mb-6">
              <h1 className="mb-2 text-3xl font-bold">Welcome Back!</h1>
              <p className="text-white/80">Log in to access your account and continue your secure trading journey.</p>
            </div>

<div className="space-y-4">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/20 transition-transform duration-300 hover:scale-110">
                  <Lock className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-medium">Secure Transactions</h3>
                  <p className="text-sm text-white/70">Your data and transactions are always protected</p>
                </div>
              </div>

<div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/20 transition-transform duration-300 hover:scale-110">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                    <path d="M8 11h8" />
                    <path d="M12 15V7" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-medium">Trusted Platform</h3>
                  <p className="text-sm text-white/70">Join thousands of satisfied users</p>
                </div>
              </div>
            </div>

<div className="mt-auto pt-12">
              <p className="text-sm text-white/70">
                Don't have an account?{" "}
                <Link
                  href="/auth/register"
                  className="font-medium text-white underline underline-offset-2 transition-colors hover:text-primary-foreground"
                >
                  Sign up
                </Link>
              </p>
            </div>
          </div>

<div className="flex flex-col justify-center bg-background p-8">
            <div className="mb-8 text-center">
              <h2 className="text-2xl font-bold">Login to Your Account</h2>
              <p className="text-muted-foreground">Enter your credentials to continue</p>
            </div>

<form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="name@example.com"
                    className={`pl-10 transition-all duration-300 focus:border-primary focus:ring-2 focus:ring-primary/20 ${errors.email ? "border-red-500 focus:border-red-500 focus:ring-red-500/20" : ""}`}
                    value={formData.email}
                    onChange={handleChange}
                    disabled={isLoading}
                  />
                </div>
                {errors.email && <p className="text-xs text-red-500">{errors.email}</p>}
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="password">Password</Label>
                  <Link href="/auth/forgot-password" className="text-xs text-primary hover:underline">
                    Forgot password?
                  </Link>
                </div>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="password"
                    name="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    className={`pl-10 transition-all duration-300 focus:border-primary focus:ring-2 focus:ring-primary/20 ${errors.password ? "border-red-500 focus:border-red-500 focus:ring-red-500/20" : ""}`}
                    value={formData.password}
                    onChange={handleChange}
                    disabled={isLoading}
                  />
                  <button
                    type="button"
                    className="absolute right-3 top-3 text-muted-foreground transition-colors hover:text-foreground"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </button>
                </div>
                {errors.password && <p className="text-xs text-red-500">{errors.password}</p>}
              </div>

<Button
                type="submit"
                className="w-full bg-primary text-white transition-all duration-300 hover:bg-primary/90 hover:shadow-md hover:shadow-primary/20"
                disabled={isLoading}
              >
                {isLoading ? (
                  <div className="flex items-center">
                    <svg
                      className="mr-2 h-4 w-4 animate-spin"
                      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>
                    Logging in...
                  </div>
                ) : (
                  "Login"
                )}
              </Button>
            </form>

<div className="my-6 flex items-center">
              <Separator className="flex-1" />
              <span className="mx-4 text-xs text-muted-foreground">OR CONTINUE WITH</span>
              <Separator className="flex-1" />
            </div>

<div className="grid gap-3 sm:grid-cols-2">
              <Button
                variant="outline"
                type="button"
                className="transition-all duration-300 hover:bg-muted/50 hover:shadow-sm"
                disabled={isLoading}
              >
                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
                  <path
                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    fill="#4285F4"
                  />
                  <path
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    fill="#34A853"
                  />
                  <path
                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    fill="#FBBC05"
                  />
                  <path
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    fill="#EA4335"
                  />
                </svg>
                Google
              </Button>
              <Button
                variant="outline"
                type="button"
                className="transition-all duration-300 hover:bg-muted/50 hover:shadow-sm"
                disabled={isLoading}
              >
                <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
                </svg>
                Facebook
              </Button>
            </div>

<p className="mt-6 text-center text-xs text-muted-foreground">
              By continuing, you agree to our{" "}
              <Link href="#" className="underline underline-offset-2 hover:text-primary">
                Terms of Service
              </Link>{" "}
              and{" "}
              <Link href="#" className="underline underline-offset-2 hover:text-primary">
                Privacy Policy
              </Link>
            </p>
          </div>
        </div>
      </div>
    </PageTransition>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  ArrowRight,
  Bell,
  CreditCard,
  DollarSign,
  Heart,
  LayoutDashboard,
  MessageSquare,
  Package,
  Plus,
  Settings,
  ShoppingCart,
  Star,
  User,
  Eye,
  ChevronUp,
  Filter,
  SortDesc,
  LogOut,
  Menu,
  Check,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { useAuth } from "@/components/auth-provider"
import { useToast } from "@/hooks/use-toast"
import { PageTransition } from "@/components/page-transition"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DashboardPage() {
  const [activeTab, setActiveTab] = useState("overview")
  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [progressValue, setProgressValue] = useState(0)

const { user, logout } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    // Simulate loading data
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

// Animate progress bar
    const progressTimer = setTimeout(() => {
      setProgressValue(75)
    }, 300)

return () => {
      clearTimeout(timer)
      clearTimeout(progressTimer)
    }
  }, [])

const handleLogout = () => {
    logout()
    toast({
      title: "Logged out",
      description: "You have been successfully logged out.",
    })
    router.push("/")
  }

if (isLoading) {
    return (
      <div className="flex min-h-screen flex-col">
        <div className="border-b">
          <div className="container flex h-16 items-center px-4">
            <div className="skeleton-loading h-6 w-24 rounded-md"></div>
            <div className="ml-6 hidden space-x-4 md:flex">
              <div className="skeleton-loading h-4 w-16 rounded-md"></div>
              <div className="skeleton-loading h-4 w-16 rounded-md"></div>
              <div className="skeleton-loading h-4 w-16 rounded-md"></div>
              <div className="skeleton-loading h-4 w-16 rounded-md"></div>
            </div>
            <div className="ml-auto flex items-center gap-2">
              <div className="skeleton-loading h-8 w-8 rounded-full"></div>
              <div className="skeleton-loading h-8 w-8 rounded-full"></div>
              <div className="skeleton-loading h-8 w-8 rounded-full"></div>
            </div>
          </div>
        </div>

<div className="container grid flex-1 gap-12 px-4 py-6 md:grid-cols-[200px_1fr] lg:grid-cols-[250px_1fr] lg:gap-16">
          <aside className="hidden md:block">
            <div className="space-y-2">
              {Array(8)
                .fill(0)
                .map((_, i) => (
                  <div key={i} className="skeleton-loading h-9 w-full rounded-md"></div>
                ))}
            </div>
          </aside>

<main className="space-y-6">
            <div className="flex flex-col gap-4 md:flex-row">
              {Array(3)
                .fill(0)
                .map((_, i) => (
                  <div key={i} className="flex-1 rounded-lg border p-6">
                    <div className="skeleton-loading mb-2 h-4 w-24 rounded-md"></div>
                    <div className="skeleton-loading h-8 w-28 rounded-md"></div>
                    <div className="skeleton-loading mt-2 h-3 w-36 rounded-md"></div>
                  </div>
                ))}
            </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
              <div className="col-span-4 rounded-lg border p-6">
                <div className="skeleton-loading mb-6 h-6 w-36 rounded-md"></div>
                <div className="space-y-4">
                  {Array(4)
                    .fill(0)
                    .map((_, i) => (
                      <div key={i} className="flex items-center gap-4">
                        <div className="skeleton-loading h-9 w-9 rounded-full"></div>
                        <div className="flex-1 space-y-2">
                          <div className="skeleton-loading h-4 w-full rounded-md"></div>
                          <div className="skeleton-loading h-3 w-3/4 rounded-md"></div>
                        </div>
                      </div>
                    ))}
                </div>
              </div>

<div className="col-span-3 rounded-lg border p-6">
                <div className="skeleton-loading mb-2 h-6 w-36 rounded-md"></div>
                <div className="skeleton-loading mb-6 h-4 w-48 rounded-md"></div>
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="skeleton-loading h-4 w-24 rounded-md"></div>
                      <div className="skeleton-loading h-5 w-16 rounded-full"></div>
                    </div>
                    <div className="skeleton-loading h-2 w-full rounded-full"></div>
                    <div className="skeleton-loading h-3 w-3/4 rounded-md"></div>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    )
  }

return (
    <PageTransition>
      <div className="flex min-h-screen flex-col">
        <div className="border-b">
          <div className="container flex h-16 items-center px-4">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="icon"
                className="md:hidden"
                onClick={() => setIsMobileSidebarOpen(!isMobileSidebarOpen)}
              >
                <Menu className="h-5 w-5" />
              </Button>
              <Link href="/dashboard" className="font-semibold text-primary">
                Dashboard
              </Link>
              <nav className="hidden md:flex md:gap-4">
                <Link
                  href="#"
                  className={`text-sm transition-colors duration-300 ${activeTab === "overview" ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
                  onClick={(e) => {
                    e.preventDefault()
                    setActiveTab("overview")
                  }}
                >
                  Overview
                </Link>
                <Link
                  href="#"
                  className={`text-sm transition-colors duration-300 ${activeTab === "listings" ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
                  onClick={(e) => {
                    e.preventDefault()
                    setActiveTab("listings")
                  }}
                >
                  My Listings
                </Link>
                <Link
                  href="#"
                  className={`text-sm transition-colors duration-300 ${activeTab === "purchases" ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
                  onClick={(e) => {
                    e.preventDefault()
                    setActiveTab("purchases")
                  }}
                >
                  Purchases
                </Link>
                <Link
                  href="#"
                  className={`text-sm transition-colors duration-300 ${activeTab === "messages" ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
                  onClick={(e) => {
                    e.preventDefault()
                    setActiveTab("messages")
                  }}
                >
                  Messages
                </Link>
              </nav>
            </div>
            <div className="ml-auto flex items-center gap-2">
              <Button variant="ghost" size="icon" className="relative">
                <Bell className="h-5 w-5 transition-transform duration-300 hover:rotate-12" />
                <span className="absolute right-1 top-1 flex h-2 w-2 animate-pulse rounded-full bg-red-600"></span>
              </Button>
              <Button variant="ghost" size="icon">
                <MessageSquare className="h-5 w-5 transition-transform duration-300 hover:rotate-12" />
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="rounded-full">
                    <Avatar className="h-8 w-8 transition-transform duration-300 hover:scale-110">
                      <AvatarImage src="/placeholder.svg?height=32&width=32" alt="User" />
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem className="cursor-pointer" onClick={() => router.push("/dashboard/profile")}>
                    <User className="mr-2 h-4 w-4" />
                    Profile
                  </DropdownMenuItem>
                  <DropdownMenuItem className="cursor-pointer" onClick={() => router.push("/dashboard/settings")}>
                    <Settings className="mr-2 h-4 w-4" />
                    Settings
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem className="cursor-pointer text-red-500 focus:text-red-500" onClick={handleLogout}>
                    <LogOut className="mr-2 h-4 w-4" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>

{/* Mobile Sidebar */}
        <Sheet open={isMobileSidebarOpen} onOpenChange={setIsMobileSidebarOpen}>
          <SheetContent side="left" className="w-[240px] p-0 pt-10">
            <div className="flex h-full flex-col">
              <div className="px-4 py-2">
                <h2 className="mb-2 font-semibold text-primary">Dashboard</h2>
                <nav className="grid items-start gap-2">
                  {[
                    { icon: LayoutDashboard, label: "Overview", value: "overview" },
                    { icon: Package, label: "My Listings", value: "listings" },
                    { icon: ShoppingCart, label: "Purchases", value: "purchases" },
                    { icon: Heart, label: "Favorites", value: "favorites" },
                    { icon: MessageSquare, label: "Messages", value: "messages", badge: 3 },
                    { icon: CreditCard, label: "Payments", value: "payments" },
                    { icon: User, label: "Profile", value: "profile" },
                    { icon: Settings, label: "Settings", value: "settings" },
                  ].map((item) => (
                    <Link
                      key={item.value}
                      href="#"
                      className={`flex items-center gap-2 rounded-lg px-3 py-2 transition-colors duration-200 ${
                        activeTab === item.value
                          ? "bg-primary/10 font-medium text-primary"
                          : "text-muted-foreground hover:bg-muted hover:text-foreground"
                      }`}
                      onClick={(e) => {
                        e.preventDefault()
                        setActiveTab(item.value)
                        setIsMobileSidebarOpen(false)
                      }}
                    >
                      <item.icon className="h-4 w-4" />
                      {item.label}
                      {item.badge && (
                        <Badge className="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-white">
                          {item.badge}
                        </Badge>
                      )}
                    </Link>
                  ))}
                </nav>
              </div>
              <div className="mt-auto border-t p-4">
                <Button variant="destructive" className="w-full justify-start" onClick={handleLogout}>
                  <LogOut className="mr-2 h-4 w-4" />
                  Logout
                </Button>
              </div>
            </div>
          </SheetContent>
        </Sheet>

<div className="container grid flex-1 gap-12 px-4 py-6 md:grid-cols-[200px_1fr] lg:grid-cols-[250px_1fr] lg:gap-16">
          <aside className="hidden md:block">
            <nav className="grid items-start gap-2">
              {[
                { icon: LayoutDashboard, label: "Overview", value: "overview" },
                { icon: Package, label: "My Listings", value: "listings" },
                { icon: ShoppingCart, label: "Purchases", value: "purchases" },
                { icon: Heart, label: "Favorites", value: "favorites" },
                { icon: MessageSquare, label: "Messages", value: "messages", badge: 3 },
                { icon: CreditCard, label: "Payments", value: "payments" },
                { icon: User, label: "Profile", value: "profile" },
                { icon: Settings, label: "Settings", value: "settings" },
              ].map((item) => (
                <Link
                  key={item.value}
                  href="#"
                  className={`group flex items-center gap-2 rounded-lg px-3 py-2 transition-all duration-200 ${
                    activeTab === item.value
                      ? "bg-primary/10 font-medium text-primary"
                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
                  }`}
                  onClick={(e) => {
                    e.preventDefault()
                    setActiveTab(item.value)
                  }}
                >
                  <item.icon
                    className={`h-4 w-4 transition-transform duration-300 ${activeTab === item.value ? "text-primary" : "group-hover:scale-110"}`}
                  />
                  {item.label}
                  {item.badge && (
                    <Badge className="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-white">
                      {item.badge}
                    </Badge>
                  )}
                </Link>
              ))}
            </nav>
          </aside>

<main>
            <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="space-y-6">
              <TabsContent
                value="overview"
                className="space-y-6 animate-in fade-in-50 data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0"
              >
                <div className="flex flex-col gap-4 md:flex-row">
                  <Card className="flex-1 overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-primary/5">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Total Balance</CardTitle>
                      <DollarSign className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">$1,234.56</div>
                      <p className="flex items-center text-xs text-green-500 dark:text-green-400">
                        <ChevronUp className="mr-1 h-3 w-3" />
                        +$249.20 from last month
                      </p>
                    </CardContent>
                  </Card>
                  <Card className="flex-1 overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-primary/5">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Active Listings</CardTitle>
                      <Package className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">12</div>
                      <p className="flex items-center text-xs text-green-500 dark:text-green-400">
                        <ChevronUp className="mr-1 h-3 w-3" />
                        +3 from last month
                      </p>
                    </CardContent>
                  </Card>
                  <Card className="flex-1 overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-primary/5">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Seller Rating</CardTitle>
                      <Star className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">4.9/5</div>
                      <p className="flex items-center text-xs text-muted-foreground">
                        <Star className="mr-1 h-3 w-3 fill-yellow-500 text-yellow-500" />
                        Based on 48 reviews
                      </p>
                    </CardContent>
                  </Card>
                </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
                  <Card className="col-span-4 overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-primary/5">
                    <CardHeader>
                      <CardTitle>Recent Activity</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {[
                          {
                            type: "sale",
                            title: "Gaming Account Sold",
                            amount: "$199.99",
                            date: "2 hours ago",
                          },
                          {
                            type: "purchase",
                            title: "Digital Asset Bundle Purchased",
                            amount: "$49.99",
                            date: "Yesterday",
                          },
                          {
                            type: "message",
                            title: "New message from Buyer123",
                            content: "Is this still available?",
                            date: "2 days ago",
                          },
                          {
                            type: "review",
                            title: "New 5-star review received",
                            content: "Great seller, fast delivery!",
                            date: "3 days ago",
                          },
                        ].map((activity, index) => (
                          <div
                            key={index}
                            className="group flex items-center gap-4 rounded-lg p-2 transition-colors duration-200 hover:bg-muted/50"
                          >
                            <div
                              className={`flex h-9 w-9 items-center justify-center rounded-full transition-transform duration-300 group-hover:scale-110 ${
                                activity.type === "sale"
                                  ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
                                  : activity.type === "purchase"
                                    ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
                                    : activity.type === "message"
                                      ? "bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400"
                                      : "bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400"
                              }`}
                            >
                              {activity.type === "sale" ? (
                                <DollarSign className="h-4 w-4" />
                              ) : activity.type === "purchase" ? (
                                <ShoppingCart className="h-4 w-4" />
                              ) : activity.type === "message" ? (
                                <MessageSquare className="h-4 w-4" />
                              ) : (
                                <Star className="h-4 w-4" />
                              )}
                            </div>
                            <div className="flex-1 space-y-1">
                              <p className="text-sm font-medium leading-none">{activity.title}</p>
                              {activity.amount ? (
                                <p className="text-sm text-muted-foreground">{activity.amount}</p>
                              ) : (
                                <p className="text-sm text-muted-foreground">{activity.content}</p>
                              )}
                            </div>
                            <div className="text-xs text-muted-foreground">{activity.date}</div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

<Card className="col-span-3 overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-primary/5">
                    <CardHeader>
                      <CardTitle>Account Status</CardTitle>
                      <CardDescription>Your current account level and benefits</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium">Verified Seller</span>
                          <Badge className="bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-800">
                            Active
                          </Badge>
                        </div>
                        <div className="space-y-1">
                          <div className="flex items-center justify-between text-xs">
                            <span>Level Progress</span>
                            <span className="font-medium">{progressValue}%</span>
                          </div>
                          <Progress value={progressValue} className="h-2 transition-all duration-1000 ease-in-out" />
                        </div>
                        <p className="text-xs text-muted-foreground">
                          Complete 5 more sales to reach Premium Seller status
                        </p>
                      </div>

<div className="space-y-2">
                        <h4 className="text-sm font-medium">Current Benefits</h4>
                        <ul className="space-y-2 text-sm">
                          <li className="flex items-center gap-2">
                            <Check className="h-4 w-4 text-green-500 dark:text-green-400" />
                            <span>Reduced transaction fees (4.5%)</span>
                          </li>
                          <li className="flex items-center gap-2">
                            <Check className="h-4 w-4 text-green-500 dark:text-green-400" />
                            <span>Priority customer support</span>
                          </li>
                          <li className="flex items-center gap-2">
                            <Check className="h-4 w-4 text-green-500 dark:text-green-400" />
                            <span>Verified seller badge</span>
                          </li>
                        </ul>
                      </div>

<Button className="w-full bg-primary text-white transition-all duration-300 hover:bg-primary/90 hover:shadow-md hover:shadow-primary/20">
                        Upgrade to Premium
                      </Button>
                    </CardContent>
                  </Card>
                </div>

<div>
                  <div className="flex items-center justify-between">
                    <h2 className="text-xl font-bold">Recent Listings</h2>
                    <Button variant="outline" size="sm" className="h-8 group">
                      View All
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
                    </Button>
                  </div>
                  <div className="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3">
                    {[1, 2, 3].map((item) => (
                      <Card
                        key={item}
                        className="group overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-primary/10"
                      >
                        <div className="aspect-video relative">
                          <img
                            src={`/placeholder.svg?height=200&width=300`}
                            alt="Product"
                            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                          />
                          <Badge className="absolute left-2 top-2 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">
                            Active
                          </Badge>
                        </div>
                        <CardContent className="p-4">
                          <h3 className="font-semibold group-hover:text-primary">
                            Gaming Account - Level {80 + item * 5}
                          </h3>
                          <div className="mt-2 flex items-center justify-between">
                            <span className="font-bold text-primary">${120 + item * 20}</span>
                            <div className="flex items-center text-sm text-muted-foreground">
                              <Eye className="mr-1 h-4 w-4" />
                              {50 + item * 12} views
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                    <Link href="/dashboard/add-listing">
                      <Card className="flex aspect-video cursor-pointer items-center justify-center border-dashed transition-all duration-300 hover:-translate-y-1 hover:border-primary hover:shadow-lg dark:hover:shadow-primary/10">
                        <CardContent className="flex flex-col items-center justify-center p-6">
                          <div className="mb-4 rounded-full bg-primary/10 p-2 transition-transform duration-300 hover:scale-110">
                            <Plus className="h-6 w-6 text-primary" />
                          </div>
                          <h3 className="font-medium">Add New Listing</h3>
                          <p className="mt-1 text-center text-xs text-muted-foreground">
                            Create a new listing to sell or trade
                          </p>
                        </CardContent>
                      </Card>
                    </Link>
                  </div>
                </div>
              </TabsContent>

<TabsContent
                value="listings"
                className="space-y-6 animate-in fade-in-50 data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0"
              >
                <Card className="overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-primary/5">
                  <CardHeader>
                    <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                      <CardTitle>My Listings</CardTitle>
                      <div className="flex flex-wrap gap-2">
                        <Button variant="outline" size="sm" className="h-8">
                          <Filter className="mr-2 h-4 w-4" />
                          Filter
                        </Button>
                        <Button variant="outline" size="sm" className="h-8">
                          <SortDesc className="mr-2 h-4 w-4" />
                          Sort
                        </Button>
                        <Button size="sm" className="h-8 bg-primary hover:bg-primary/90">
                          <Plus className="mr-2 h-4 w-4" />
                          Add New Listing
                        </Button>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {[1, 2, 3, 4, 5].map((item) => (
                        <div
                          key={item}
                          className="group flex items-center gap-4 rounded-lg border p-4 transition-all duration-300 hover:border-primary hover:bg-muted/50"
                        >
                          <div className="h-16 w-16 overflow-hidden rounded-md bg-muted">
                            <img
                              src={`/placeholder.svg?height=64&width=64`}
                              alt="Product"
                              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                            />
                          </div>
                          <div className="flex-1 space-y-1">
                            <h3 className="font-medium transition-colors duration-300 group-hover:text-primary">
                              {item % 2 === 0 ? "Gaming Account - Level 90" : "Digital Asset Bundle"}
                            </h3>
                            <p className="text-sm text-muted-foreground">Listed on {new Date().toLocaleDateString()}</p>
                          </div>
                          <div className="text-right">
                            <p className="font-bold text-primary">${80 + item * 20}</p>
                            <Badge
                              className={
                                item % 3 === 0 ? "bg-yellow-500 dark:bg-yellow-700" : "bg-green-500 dark:bg-green-700"
                              }
                            >
                              {item % 3 === 0 ? "Pending" : "Active"}
                            </Badge>
                          </div>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8 rounded-full transition-all duration-300 hover:bg-primary/10"
                              >
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  width="18"
                                  height="18"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2"
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                >
                                  <circle cx="12" cy="12" r="1" />
                                  <circle cx="12" cy="5" r="1" />
                                  <circle cx="12" cy="19" r="1" />
                                </svg>
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem className="cursor-pointer">Edit</DropdownMenuItem>
                              <DropdownMenuItem className="cursor-pointer">Promote</DropdownMenuItem>
                              <DropdownMenuItem className="cursor-pointer">Duplicate</DropdownMenuItem>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem className="cursor-pointer text-red-500 focus:text-red-500">
                                Delete
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </main>
        </div>
      </div>
    </PageTransition>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This