"use client" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, cardHoverTarget, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Search, Compass, TrendingUp, Flame, Image, Heart, MessageCircle, Grid3X3, Users, Music, MapPin, } from "lucide-react" const categories = [ { name: "Trending", icon: Flame, color: "from-orange-500 to-rose-600" }, { name: "Travel", icon: MapPin, color: "from-emerald-500 to-teal-600" }, { name: "Music", icon: Music, color: "from-violet-500 to-purple-600" }, { name: "People", icon: Users, color: "from-blue-500 to-cyan-600" }, { name: "Design", icon: Image, color: "from-pink-500 to-rose-600" }, ] const exploreItems = [ { id: 1, aspect: "portrait", color: "bg-linear-to-br from-blue-400 to-blue-600" }, { id: 2, aspect: "square", color: "bg-linear-to-br from-rose-400 to-rose-600" }, { id: 3, aspect: "landscape", color: "bg-linear-to-br from-emerald-400 to-emerald-600" }, { id: 4, aspect: "square", color: "bg-linear-to-br from-amber-400 to-amber-600" }, { id: 5, aspect: "portrait", color: "bg-linear-to-br from-purple-400 to-purple-600" }, { id: 6, aspect: "square", color: "bg-linear-to-br from-cyan-400 to-cyan-600" }, { id: 7, aspect: "landscape", color: "bg-linear-to-br from-pink-400 to-pink-600" }, { id: 8, aspect: "square", color: "bg-linear-to-br from-teal-400 to-teal-600" }, { id: 9, aspect: "square", color: "bg-linear-to-br from-orange-400 to-orange-600" }, { id: 10, aspect: "portrait", color: "bg-linear-to-br from-indigo-400 to-indigo-600" }, { id: 11, aspect: "square", color: "bg-linear-to-br from-lime-400 to-lime-600" }, { id: 12, aspect: "landscape", color: "bg-linear-to-br from-red-400 to-red-600" }, ] export default function ExplorePage() { return (

Explore

{categories.map((cat) => { const Icon = cat.icon return ( ) })} {exploreItems.map((item) => (

))}

Discover More

) }

Explore Page

Explore

Explore