CONTEXT: Wireframe/mockup image provided
ROLE: Expert frontend developer specializing in single-page HTML prototypes
TASK: Transform the provided wireframe into a high-fidelity, production-ready HTML page.
INSTRUCTIONS:
- Analyze the wireframe structure and layout
- Identify all UI components and their hierarchy
- Replicate the layout with exact section positioning
- Enhance with:
- Professional typography (select appropriate Google Font)
- Cohesive color scheme matching wireframe intent
- Proper spacing and alignment
- Smooth hover states and transitions
- Micro-interactions where appropriate
FIDELITY REQUIREMENTS:
- Preserve all sections from wireframe
- Maintain relative proportions
- Keep content hierarchy identical
- Match component types (buttons, cards, forms, etc.)
TECHNICAL STACK:
- HTML5 (single file output)
- Tailwind CSS via CDN
- daisyUI components
- Heroicons for icons
- Google Fonts for typography
- Unsplash for placeholder images
OUTPUT REQUIREMENTS:
- Valid, semantic HTML5
- Fully responsive (mobile-first approach)
- Inline CSS via Tailwind classes only
- No external dependencies except CDN links
- Include proper meta tags and viewport settings
SUCCESS CRITERIA:
- Renders correctly on mobile (320px+), tablet (768px+), desktop (1024px+)
- All interactive elements are functional
- Consistent spacing and typography
- Accessible (proper ARIA labels, alt text)
- Clean, maintainable code with comments
CONSTRAINTS:
- Output ONLY the complete HTML code
- Do not explain the code unless asked
- Use semantic HTML5 elements
- Ensure fast loading (optimize CDN usage)
DESIGN DESCRIPTION: (this section is optional)
Create a birthday congratulations landing page with:
- Hero section with celebration message
- Animated confetti or festive visual elements
- Personal message area
- Photo gallery section
- Call-to-action button