[V0_FILE]typescriptreact:file="components/card-hover-effect-demo.tsx" import { HoverEffect } from "@/components/ui/card-hover-effect" export default function CardHoverEffectDemo() { return (

) } export const projects = [ { title: "Stripe", description: "A technology company that builds economic infrastructure for the internet.", link: "https://stripe.com", }, { title: "Netflix", description: "A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.", link: "https://netflix.com", }, { title: "Google", description: "A multinational technology company that specializes in Internet-related services and products.", link: "https://google.com", }, { title: "Meta", description: "A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.", link: "https://meta.com", }, { title: "Amazon", description: "A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.", link: "https://amazon.com", }, { title: "Microsoft", description: "A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.", link: "https://microsoft.com", }, ] [V0_FILE]typescriptreact:file="components/ui/card-hover-effect.tsx" import { cn } from "@/lib/utils" import { AnimatePresence, motion } from "framer-motion" import Link from "next/link" import { useState } from "react" export const HoverEffect = ({ items, className, }: { items: { title: string description: string link: string }[] className?: string }) => { const [hoveredIndex, setHoveredIndex] = useState(null) return (

{items.map((item, idx) => ( setHoveredIndex(idx)} onMouseLeave={() => setHoveredIndex(null)} > {hoveredIndex === idx && ( )} {item.title} {item.description} ))}

) } export const Card = ({ className, children, }: { className?: string children: React.ReactNode }) => { return (

{children}

) } export const CardTitle = ({ className, children, }: { className?: string children: React.ReactNode }) => { return

{children}

} export const CardDescription = ({ className, children, }: { className?: string children: React.ReactNode }) => { return

{children}

}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This