## Add Component: FAQ Middle Simple ### File: /components/ui/faq-middle-simple.tsx ```tsx "use client"; import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Plus } from 'lucide-react'; import { cn } from '@/lib/utils'; // ============================================================================ // TYPES // ============================================================================ interface FaqMiddleSimpleProps { className?: string; } interface FAQItem { id: string; number: string; question: string; answer: string; } // ============================================================================ // DATA // ============================================================================ const FAQ_DATA: FAQItem[] = [ { id: '1', number: '{01}', question: 'How far in advance should I book?', answer: 'To ensure the best experience and availability, we recommend booking at least 6 months in advance. This allows us sufficient time for planning and coordination.' }, { id: '2', number: '{02}', question: 'What type of photography do you specialize in?', answer: 'Our studio specializes in editorial-style portraits and lifestyle photography. We focus on capturing authentic moments with a modern, high-end aesthetic.' }, { id: '3', number: '{03}', question: 'How long will it take to receive my photos?', answer: 'For portrait sessions, the typical turnaround time is 2 weeks. For larger commercial projects, it may take 4-6 weeks for full delivery.' }, { id: '4', number: '{04}', question: 'How many edited photos will I get?', answer: 'The number of photos depends on the session length. Generally, we provide a curated gallery of 40-60 high-resolution, fully retouched images.' } ]; // ============================================================================ // ACCORDION ITEM COMPONENT // ============================================================================ function AccordionItem({ item, index, isActive, onClick }: { item: FAQItem; index: number; isActive: boolean; onClick: () => void; }) { return ( {/* Header */}

{item.question}

{item.number}

{/* Content */} {isActive && ( {/* Exactly 20px gap between question and answer as per visual spec */}

{item.answer}

)} ); } // ============================================================================ // MAIN COMPONENT // ============================================================================ export function FaqMiddleSimple({ className }: FaqMiddleSimpleProps) { const [activeIndex, setActiveIndex] = useState(null); const toggleAccordion = (id: string) => { setActiveIndex(prev => (prev === id ? null : id)); }; return ( <> {/* Google Fonts */}

{/* Label Reveal */} FAQ {/* Title Reveal */} Frequently asked question {/* Accordion List Reveal */}

{FAQ_DATA.map((item, index) => ( toggleAccordion(item.id)} /> ))}

); } export default FaqMiddleSimple; ``` ### Install Dependencies: ```bash npm install framer-motion lucide-react ``` ### Update /app/page.tsx: Add this import at the top: ```tsx import FaqMiddleSimple from "@/components/ui/faq-middle-simple"; ``` Add this inside

, below existing components: ```tsx ``` ### Rules: - Copy the code EXACTLY as provided - Do NOT modify, refactor, or rename anything - Do NOT change any Tailwind classes - Do NOT add features or "improvements" - Just create the file and update page.tsx