# Design Refinement Plan for Biohazard VFX Website

Based on the provided feedback and code review, here's a comprehensive plan to refine the website's design with a focus on minimalism, usability, and maturity.

## 1. Layout & Spacing Improvements

### Container & Grid System
- [x] Increase max-width of `.container-custom` for larger screens (1920px+) to utilize full horizontal space
- [x] Implement standard exponential spacing scale (using Tailwind's built-in spacing scale)
- [x] Review and adjust all padding/margin values to use standard spacing scale

### Section Spacing
- [x] Reduce excessive vertical padding in sections (currently py-12 md:py-16 lg:py-20)
- [x] Implement consistent section spacing using exponential scale

## 2. Color & Typography Refinement

### Color Palette
- [ ] Review accent color usage (currently #3f7832ff / #90b075ff) - ensure consistency
- [ ] Reduce saturation of interactive elements (buttons, links, etc.)
- [ ] Ensure proper contrast ratios for all text elements

### Typography
- [ ] Reduce font size hierarchy (especially hero titles)
- [ ] Simplify font stack - reduce from 3 fonts to 2 (Inter + one display font)
- [ ] Reduce font weight variations - limit to 2-3 weights max

## 3. Component Refinements

### Navigation
- [ ] Simplify mobile navigation drawer animation
- [ ] Reduce shadow intensity on navigation elements
- [ ] Remove decorative elements (glows, gradients) from navigation

### Cards & Project Grid
- [x] Reduce border-radius on all cards (currently 8px default, reduce to 4px)
- [x] Remove hover zoom effects on project images (group-hover:scale-105/110)
- [ ] Simplify project card content - reduce animation complexity
- [ ] Standardize project grid layout - remove complex asymmetric grid

### Buttons
- [x] Reduce button border-radius (currently 8px, reduce to 4px)
- [x] Simplify button states - remove glow effects
- [x] Reduce button padding - use tighter spacing

### Footer
- [ ] Simplify footer layout - reduce vertical spacing
- [ ] Reduce form element padding
- [ ] Simplify social media icons

## 4. Animations & Effects Reduction

### Global
- [x] Remove or significantly reduce all hover animations
- [x] Eliminate all "bouncing" or exaggerated transitions
- [x] Simplify focus states - use standard outline instead of glow

### Specific Components
- [ ] HeroSection - Remove video parallax effect
- [x] ProjectGrid - Remove image zoom on hover
- [x] BlogCard - Remove image zoom on hover
- [x] All cards - Remove scale/transform effects

## 5. Implementation Steps

1. Update Tailwind config with refined spacing, colors, and border-radius values
2. Modify global CSS to implement new design tokens
3. Refactor Layout components (Container, Section, Grid) with new spacing
4. Simplify Navigation component
5. Redesign ProjectGrid with simpler, more consistent layout
6. Refactor Cards components (ProjectCard, BlogCard, TeamCard)
7. Simplify Buttons components
8. Refactor Footer component
9. Update page components (HomePage, ProjectsPage, BlogPage) to use new styles
10. Review and test all pages on different screen sizes

## 6. Quality Assurance

- [ ] Test on various screen sizes (mobile, tablet, desktop, large desktop)
- [ ] Verify color contrast ratios meet accessibility standards
- [ ] Ensure all interactive elements are clearly identifiable without excessive effects
- [ ] Validate performance improvements (reduced animations, simpler layouts)