Restaurant Wedding Profile - Copy this React, Tailwind Component to your project
Design a responsive and luxurious Restaurant Wedding Profile webpage using React.js. Update the specifications to include a menu showcasing different cuisines (e.g., Indian Menu, European Menu), with interactive hover or click functionality to reveal dishes in each menu. Use a clean white color palette as the dominant theme but ensure it remains visually engaging by incorporating accents and textures. Below is the detailed breakdown: Updated Color Palette: Background Colors: Use pure white (#FFFFFF) as the primary background for a clean and elegant look. Add subtle textures or patterns (e.g., fine floral designs in light gray or soft shadows) to avoid monotony. Accent Colors: Employ a soft gold gradient (#FFD700 → #FFAA00) for: Section dividers. Card borders. Button backgrounds. Use blush pink (#FFE4E6) and muted lavender (#E9D8F1) sparingly for highlights and hover effects. Text Colors: Primary text: Charcoal gray (#4A4A4A) for readability. Secondary text: Muted mauve (#6E4C7A). Highlights: Deep magenta (#C2185B) for emphasizing key content like section titles. Hover and Animation Colors: For buttons, cards, and menu items, use a soft gold glow (#FFD700, 40% opacity) on hover. Updated Layout Requirements: 1. Hero Section: Full width image slider at the top featuring wedding venue photos with smooth fade in/out transitions every 5 seconds. Overlay text: A tagline in serif font (e.g., "Celebrate Your Love in Style") styled with a gold gradient. Add a subtle shadow to the text for better readability over images. 2. Menu Categories Section: Display menu categories as clickable rectangular cards, each representing a specific cuisine (e.g., Indian, European, Fusion). Card Design: Background: White with a gold border. Content: Image: Representative of the cuisine (e.g., traditional dishes for each menu). Title: Bold serif font in charcoal gray. Description: Muted mauve text in a smaller sans serif font. Hover Effect: Slight scaling, glowing border in gold, and a soft shadow. 3. Interactive Menu Functionality: When hovering or clicking on a menu card: Display the dishes from that menu in a dropdown grid layout or modal overlay. Each dish card should include: Image: High quality dish photo. Title: Dish name in bold text. Description: Short description in muted mauve. Price: Highlighted in deep magenta (#C2185B). 4. Detailed Menu Section: Beneath the interactive menu, show all available dishes in a grid layout: Dish Cards: White background with soft shadow. Gold border with a blush pink hover effect. Content: Image, name, description, and price. Add sorting or filtering options (e.g., by price, popularity, or dietary preferences). 5. Reservation Form Section: Position the form prominently on the right hand side of the page. Fields: Name, Email, Phone: Styled with white backgrounds and gold borders. Date: Calendar picker styled with gold accents. Time: Dropdown with blush pink highlights. Special Requests: Textarea with white background and lavender border. Submit Button: Background: Gold gradient (#FFD700 → #FFAA00). Hover Effect: Soft glowing animation with a gold shimmer. 6. Footer Section: Add a minimalist footer with: Social Media Icons: Styled in gold. Contact details in muted mauve. A small embedded map preview. Background: White with subtle gray floral patterns or light shadow dividers. Typography: Titles: Serif fonts (e.g., "Playfair Display") in gold gradient for an elegant touch. Body Text: Sans serif fonts (e.g., "Open Sans") in charcoal gray for clarity. Advanced Features: Interactive Menu System: Use React state (useState) to toggle between menus and display dishes dynamically. Implement animated transitions (e.g., fade in or slide down) when showing dishes. Responsiveness: Ensure the layout adapts seamlessly to all screen sizes: Grid layout for categories and dishes adjusts dynamically for mobile views. Form fields stack vertically on smaller screens. Micro Animations: Add subtle animations for buttons, icons, and menu cards using framer motion or CSS keyframes.
