Teal Feature Showcase
A clean, refreshing feature showcase designed for travel platforms with cool teal accents and alternating layout.
Features
- Three alternating feature sections with left-right layout (Discover, Plan, Book)
- Decorative image placeholders with gradient backgrounds and grid overlays
- Feature highlight lists with checkmark icons
- Travel-themed icons — Compass, MapPin, Plane from Lucide
- Bottom CTA card with gradient teal background
- Source Sans 3 typography for clean readability
- Gradient text effects in the header
- Full light/dark mode support with WCAG AA contrast compliance
Dependencies
lucide-react for icons (Compass, MapPin, Plane, Globe, Star, etc.)- Shadcn UI components: Button, Badge, Card, Separator
Customization
- Features: Modify the
features array to change content, icons, and highlights
- Colors: Adjust teal palette (
#008080, #00897B, #4DB6AC) to match your brand
- Typography: Swap Source Sans 3 for another sans-serif font
- Layout: Change alternating layout by modifying the flex-direction logic
- CTA: Update the bottom card text and button for different campaigns
