[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "framer-motion": "12.23.12" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import ProductCategoryGrid from "@/components/product-category-grid" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/ui/direction-aware-hover.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useState } from "react" import Image from "next/image" import { AnimatePresence, motion } from "framer-motion" import { cn } from "@/lib/utils" export const DirectionAwareHover = ({ imageUrl, children, childrenClassName, imageClassName, className, }: { imageUrl: string children: React.ReactNode | string childrenClassName?: string imageClassName?: string className?: string }) => { const ref = useRef(null) const [direction, setDirection] = useState<"top" | "bottom" | "left" | "right" | string>("left") const handleMouseEnter = (event: React.MouseEvent) => { if (!ref.current) return const direction = getDirection(event, ref.current) console.log("direction", direction) switch (direction) { case 0: setDirection("top") break case 1: setDirection("right") break case 2: setDirection("bottom") break case 3: setDirection("left") break default: setDirection("left") break } } const getDirection = (ev: React.MouseEvent, obj: HTMLElement) => { const { width: w, height: h, left, top } = obj.getBoundingClientRect() const x = ev.clientX - left - w / 2 const y = ev.clientY - top - h / 2 const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4 return d } return (

{children} ) } const variants = { initial: { x: 0, }, exit: { x: 0, y: 0, }, top: { y: 20, }, bottom: { y: -20, }, left: { x: 20, }, right: { x: -20, }, } const textVariants = { initial: { y: 0, x: 0, opacity: 0, }, exit: { y: 0, x: 0, opacity: 0, }, top: { y: -20, opacity: 1, }, bottom: { y: 2, opacity: 1, }, left: { x: -2, opacity: 1, }, right: { x: 20, opacity: 1, }, } const overlayVariants = { initial: { opacity: 0, }, exit: { opacity: 0, }, top: { opacity: 1, }, bottom: { opacity: 1, }, left: { opacity: 1, }, right: { opacity: 1, }, } [V0_FILE]typescriptreact:file="components/product-category-grid.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { DirectionAwareHover } from "@/components/ui/direction-aware-hover" const categories = [ { id: "cat-sport", name: "SportsWare", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1260&h=750&q=80", alignRight: true, }, { id: "cat-tees", name: "Graphic Tees", image: "https://images.unsplash.com/photo-1734834917963-2c7a7351b4d7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE1fHxncmFwaGljJTIwdHNoaXJ0fGVufDB8fDB8fHww", }, { id: "cat-hoodies", name: "Ladies Hoodies", image: "https://images.unsplash.com/photo-1634276703006-c1236a505b36?q=80&w=3086&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { id: "cat-ladies-shirts", name: "Ladies Shirts", image: "https://plus.unsplash.com/premium_photo-1690350731538-57344931ac02?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bGFkaWVzJTIwc2hpcnR8ZW58MHx8MHx8fDA%3D", }, { id: "cat-youth", name: "Youth Fashion", image: "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=1260&h=750&q=80", }, { id: "cat-kids", name: "Kids Fashion", image: "https://images.unsplash.com/photo-1519238263530-99bdd11df2ea?auto=format&fit=crop&w=1260&h=750&q=80", }, { id: "cat-cologne", name: "Perfume & Cologne", image: "https://images.unsplash.com/photo-1541643600914-78b084683601?auto=format&fit=crop&w=1260&h=750&q=80", alignRight: true, }, { id: "cat-mens-shirts", name: "Mens Shirts", image: "https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?auto=format&fit=crop&w=1260&h=750&q=80", }, { id: "cat-intimate", name: "Ladies Intimates", image: "https://images.unsplash.com/photo-1596755389378-c31d21fd1273?auto=format&fit=crop&w=1260&h=750&q=80", }, ] export default function ProductCategoryGrid() { return (

{categories.map((category) => (

{category.name}

))}

BANNER

) }

About

Tags

Share

About

Tags

Share

More from deepakchandwani

More Templates Like This

About

Tags

Share

About

Tags

Share

More from deepakchandwani

More Templates Like This