{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-featured-work-highlights-interactive-hover-reveal","type":"registry:block","title":"Interactive Hover Reveal","files":[{"path":"components/blocks/portfolio/portfolio-featured-work-highlights/interactive-hover-reveal.tsx","content":"import { useState } from 'react';\nimport { ArrowRight } from 'lucide-react';\n\nexport default function InteractiveHoverReveal() {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const projects = [\n    {\n      title: 'Photography Portfolio Website',\n      category: 'Web Design',\n      description:\n        \"A minimalist website designed to showcase a professional photographer's work with advanced filtering and gallery features.\",\n      image:\n        'https://images.unsplash.com/photo-1488229297570-58520851e868?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      title: 'Health & Fitness App',\n      category: 'Mobile App Design',\n      description:\n        'A comprehensive fitness tracking application designed to help users maintain their health goals with personalized recommendations.',\n      image:\n        'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      title: 'Eco-Friendly Product Packaging',\n      category: 'Brand Design',\n      description:\n        'Sustainable packaging design for an eco-conscious beauty brand, focusing on recyclable materials and minimal waste.',\n      image:\n        'https://images.unsplash.com/photo-1606041011872-596597976b25?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      title: 'Smart Home Dashboard',\n      category: 'UI/UX Design',\n      description:\n        'An intuitive interface for controlling smart home devices with emphasis on accessibility and ease of use.',\n      image:\n        'https://images.unsplash.com/photo-1560439514-4e9645039924?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      title: 'Restaurant Ordering System',\n      category: 'Web Application',\n      description:\n        'A comprehensive online ordering system for restaurants that streamlines the takeout and delivery process.',\n      image:\n        'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      title: 'Travel Experience Platform',\n      category: 'Web Design',\n      description:\n        'A platform connecting travelers with local experiences and hidden gems, featuring interactive maps and booking features.',\n      image:\n        'https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n  ];\n\n  return (\n    <section className=\"py-16 md:py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        {/* Section Header */}\n        <div className=\"mb-12 text-center md:mb-16\">\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Portfolio Highlights\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n            Explore a selection of my featured work across various disciplines\n            and industries.\n          </p>\n        </div>\n\n        {/* Project Grid */}\n        <div className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n          {projects.map((project, index) => (\n            <a\n              href={project.link}\n              key={index}\n              className=\"group relative block h-80 overflow-hidden rounded-xl\"\n              onMouseEnter={() => setHoveredIndex(index)}\n              onMouseLeave={() => setHoveredIndex(null)}\n            >\n              {/* Project Image */}\n              <div className=\"absolute inset-0 h-full w-full\">\n                <img\n                  src={project.image}\n                  alt={project.title}\n                  className=\"object-cover transition-transform duration-500 group-hover:scale-110\"\n                />\n                <div className=\"absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-black/30 opacity-80 transition-opacity duration-300 group-hover:opacity-90\" />\n              </div>\n\n              {/* Project Info - Initial State */}\n              <div\n                className={`absolute bottom-0 left-0 p-6 transition-all duration-300 ease-in-out ${\n                  hoveredIndex === index ? 'opacity-0' : 'opacity-100'\n                }`}\n              >\n                <div className=\"text-sm font-medium tracking-wider text-white uppercase\">\n                  {project.category}\n                </div>\n                <h3 className=\"text-xl font-bold text-white drop-shadow-md\">\n                  {project.title}\n                </h3>\n              </div>\n\n              {/* Expanded Content on Hover */}\n              <div\n                className={`absolute inset-0 flex flex-col justify-end p-6 transition-all duration-300 ease-in-out ${\n                  hoveredIndex === index\n                    ? 'opacity-100'\n                    : 'translate-y-4 opacity-0'\n                }`}\n              >\n                <div className=\"text-sm font-medium tracking-wider text-white uppercase\">\n                  {project.category}\n                </div>\n                <h3 className=\"mb-2 text-xl font-bold text-white drop-shadow-md\">\n                  {project.title}\n                </h3>\n                <p className=\"mb-3 text-sm font-medium text-white drop-shadow\">\n                  {project.description}\n                </p>\n                <span className=\"inline-flex items-center text-sm font-medium text-white drop-shadow\">\n                  View Project <ArrowRight className=\"ml-1 h-3.5 w-3.5\" />\n                </span>\n              </div>\n            </a>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-featured-work-highlights/interactive-hover-reveal.tsx"}],"description":"A grid of project thumbnails that reveal a title, role, and link on hover. Use it to keep a portfolio index clean while exposing detail on demand.","dependencies":["lucide-react"]}