[V0_FILE]typescriptreact:file="index.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { useState, useRef, useEffect } from "react" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" const uiFeatures = [ { title: "Responsive Design", description: "Layouts that adapt to various screen sizes", }, { title: "Accessibility Features", description: "Ensuring usability for all users", }, { title: "Performance Optimization", description: "Fast loading and smooth interactions", }, { title: "Cross-Browser Compatibility", description: "Consistent experience across platforms", }, { title: "User-Centric Design", description: "Intuitive interfaces", }, ] export default function Frame() { const [hoveredIndex, setHoveredIndex] = useState(null) const [activePillStyle, setActivePillStyle] = useState({}) const [isDarkMode, setIsDarkMode] = useState(false) const featureRefs = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { if (hoveredIndex !== null) { const hoveredElement = featureRefs.current[hoveredIndex] if (hoveredElement) { const { offsetTop, offsetHeight, offsetWidth, offsetLeft } = hoveredElement setActivePillStyle({ top: `${offsetTop}px`, left: `${offsetLeft}px`, height: `${offsetHeight}px`, width: `${offsetWidth}px`, }) } } }, [hoveredIndex]) const toggleDarkMode = () => { setIsDarkMode(!isDarkMode) document.documentElement.classList.toggle("dark") } return (

UI

{/* Background Highlight */}

{/* Feature Items */}

{uiFeatures.map((feature, index) => (

(featureRefs.current[index] = el)} className="inline-block px-3 py-3 rounded-[10px] transition-colors duration-300" onMouseEnter={() => setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{feature.title}

{feature.description}

))}

) }

About

About