8f:I[903690,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0tk-9_pd_t87z.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1frdulrl5q9n5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/18z38_es0jdvv.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2u859s2mzgnxb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0tk-9_pd_t87z.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1frdulrl5q9n5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/18z38_es0jdvv.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2u859s2mzgnxb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u"],"SWRDataProvider"] 91:T2ab8,[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

) }85:["$","$L8f",null,{"chatId":"mXaAmsDBP9o","children":["$","$L90",null,{"data":{"@\"active-block\",\"mXaAmsDBP9o\",":{"id":"b_DNi8zPdJCBL","messageId":"MXo5bKsgNwpCJgR0CZPD4BjKLeae4AHu","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"product-category-grid","type":"code-project","project":"product-category-grid","taskNameActive":"Updating image URLs","taskNameComplete":"Updated image URLs"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"mXaAmsDBP9o\",":false,"":null},"children":"$L92"}]}]

About

Tags

Share

About

Tags

Share

More from deepakchandwani

More Templates Like This