"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowRight, Plus, Minus, Instagram, Twitter, Figma, Mail, Globe, Navigation } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface RevealSectionProps { title: string; links: { label: string; href: string }[]; isOpen: boolean; onToggle: () => void; index: number; } const RevealSection = ({ title, links, isOpen, onToggle, index }: RevealSectionProps) => { return (

{isOpen && (

{links.map((link, i) => ( {link.label} ))}

"Explore our {title.toLowerCase()} specifically curated for high-impact digital products and modern aesthetic standards."

)}

); }; export function KineticRevealFooter() { const [openIndex, setOpenIndex] = useState(0); const sections = [ { title: "Solutions", links: [ { label: "Interface Design", href: "#" }, { label: "Motion Graphics", href: "#" }, { label: "Development", href: "#" }, { label: "Strategy", href: "#" }, ] }, { title: "Collective", links: [ { label: "Our Story", href: "#" }, { label: "Careers", href: "#" }, { label: "Manifesto", href: "#" }, { label: "Press Kit", href: "#" }, ] }, { title: "Social", links: [ { label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }, { label: "Dribbble", href: "#" }, ] } ]; return ( ); } export default function KineticRevealFooterDemo() { return (

); }

{title}