Implement Categories Grid with Images

Task Description Create grid of 8 hexagonal categories with specific background images and unique gradients.

Deliverable Responsive grid with 8 hexagonal categories, each with thematic image and unique gradient.

Requirements

• 8 categories with hexagonal shapes
• Specific background images for each category
• Unique gradients per category
• Hover effects with scale and rotation
• "Carbon Credits" marked as "Coming Soon"

Technical Requirements

• Responsive grid: 2 columns mobile, 4 desktop
• CSS clip-path for hexagons
• Unique CSS gradients per category
• 3D transform hover effects
• Images with brightness/contrast filters

Content Updates Required

• Images per category:
  • Fruits: /images/fruits/fresh-strawberries.jpg
  • Grains: /images/grains/wheat-field.jpg
  • Dairy: /images/dairy/fresh-milk.jpg
  • Plants: /images/plants/seedlings.jpg
  • Preserves: /images/preserves/honey-jars.jpg
  • Crafts: /images/crafts/handwoven-basket.jpg
  • Oils: /images/oils/olive-oil.jpg
  • Carbon Credits: /images/forest/carbon-forest.jpg

Additional Notes

• Each category with unique gradient
• Carbon Credits without functional link
• 3D effects with perspective

Definition of Done

• 8 hexagonal categories visible
• Images load correctly
• Hover effects on 7 active categories
• Carbon Credits shows "Coming Soon" badge
• Responsive grid works