I've recreated the UI with a clean, responsive design that matches the screenshot. Key features include:
- Responsive navigation with mobile optimization
- Two-column hero section with heading, description, and CTA
- Floating action buttons with icons
- Client logo section at the bottom
- Custom color scheme matching the original design with black (
#1E1B33) and lime green (#B9FF66)
The components are organized into separate files for better maintainability. The design is fully responsive and will work well on all screen sizes. Let me know if you'd like any adjustments to better match the original design!
I've recreated the Atlassian interface with all the key components:
- A dismissible banner for the team'25 event
- Main navigation with dropdown indicators
Products menu with:
- Sidebar categories
- Grid of product cards
- NEW badges where applicable
- Responsive design that works on mobile and desktop
- Interactive elements with hover states
- Atlassian's brand colors and styling
The components are organized into separate files for better maintainability. Let me know if you'd like any adjustments to better match the original design!
Wedding Website Prompt
Goal: Create a beautiful and responsive wedding website for [Groom's Name] and [Bride's Name] that includes a live streaming feature for the ceremony, a photo gallery to showcase their special moments, and an appealing design that looks great on all devices (desktop, mobile, and TV screens).
Website Sections:
- Hero Section:
- A captivating hero image or video featuring the couple.
- A warm welcome message from the bride and groom.
- Clear and concise information about the wedding date, time, and location.
- About Us Section:
- A charming story about how the couple met and fell in love.
- Individual sections for the bride and groom to introduce themselves.
- Optional: A fun fact or anecdote about the couple.
- Wedding Ceremony Section:
- Live streaming functionality to allow virtual guests to attend the ceremony.
- Details about the wedding ceremony schedule and location.
- Information about wedding attire or any dress code preferences.
- Photo Gallery Section:
- A visually stunning gallery showcasing the couple's engagement photos, pre-wedding celebrations, and other special moments.
- Option to include captions or stories for each photo.
- RSVP Section:
- A user-friendly RSVP form for guests to confirm their attendance.
- The option to include a meal selection or any other necessary details.
- Contact Section:
- A clear way for guests to contact the couple with any questions.
- Include email addresses or a contact form.
Design Considerations:
- Responsiveness: Ensure the website adapts seamlessly to all devices (desktop, mobile, and TV screens).
- Appealing Aesthetics: Use a color scheme, fonts, and imagery that reflect the couple's style and the wedding theme.
- High-Quality Images: Include professional or high-resolution photos throughout the website.
- Easy Navigation: Create an intuitive and user-friendly navigation menu for easy access to different sections.
- Background Music (Optional): Add subtle background music to enhance the website's ambiance (ensure it's muted on page load).
Additional Notes: - Consider incorporating interactive elements like a guestbook or a wedding countdown timer.
- If the couple has a wedding registry, include a link for guests to easily access it.
- Maintain a consistent tone of voice throughout the website that reflects the couple's personalities.