# Tasks - Why Cavin Infotech Grid Alignment & Featured Gallery & Products Suite

- [x] Implement the 4-column, 2-row CSS Grid layout in `src/App.jsx`
  - [x] Update Grid container styles (`gridTemplateColumns`, `gridTemplateRows`)
  - [x] Adjust grid coordinates for all cards and images
  - [x] Add warm amber radial glow to "Industry Expertise" and "Secure & Reliable" cards
  - [x] Apply reversed overlay gradient to "Outcome Focused" card
  - [x] Reduce mobile font sizes and apply styles to mobile layout
- [x] Create and integrate the premium "Featured Gallery" section
  - [x] Implement reusable component `src/components/FeaturedGallery.jsx`
  - [x] Design expanded/collapsed card states with Framer Motion layout transitions
  - [x] Add hover tracking for active index retention
  - [x] Incorporate category labels, read times, animated progress lines, and Read More buttons
  - [x] Setup mobile fallback stacked view
  - [x] Import and place the gallery after Why Cavin Infotech section
- [x] Redesign "Our Products Suite" section to light contrast theme
  - [x] Change section background to off-white (`#f8fafc`)
  - [x] Restructure products to side-by-side grid layout
  - [x] Design card backgrounds with a soft blush-pink `#F6F2F5` and light-gray gradient
  - [x] Style card borders with a thick 6px stroke in muted lavender-gray
  - [x] Implement fading micro-dot pattern background texture rising from the bottom
  - [x] Style light cards with subtle case-by-case brand gradients (purple/pink, green/mint, gold/amber)
  - [x] Implement visual mock dashboard previews at the bottom of cards
  - [x] Add percentage/stat overlays (OEE Improvement, Downtime, AI Assistance, Workflow Automation, HR Operations)
  - [x] Build centered dark CTA button ("View All Products") with gold glow effect and hover scale transitions
- [x] Verify build compiles correctly
- [x] Test layout responsiveness and verify visual alignment in the browser
