# AI Marketing Hero Section

> A modern, animated hero section component featuring a sophisticated light rays background effect and interactive dashboard preview. Built with React and Tailwind CSS, this component showcases an AI-powered marketing platform with elegant typography, gradient CTA buttons, and a comprehensive analytics dashboard with real-time metrics cards. Includes animated WebGL light beams, smooth hover effects, and a responsive 4-column stats grid displaying key performance indicators like user growth, order volume, sales figures, and pending items. Perfect for SaaS landing pages, marketing platforms, or any application requiring a premium, data-driven presentation with stunning visual effects. Key Features:  Animated light rays background with Canvas rendering Responsive metric cards with trend indicators Interactive chart visualization Modern gradient design with subtle blur effects Fully responsive layout Smooth animations and hover states Clean typography with light font weights Professional color scheme with purple/slate accents

- Author: [M.bin Salman](https://21st.dev/@muhammad-binsalman)
- License: unknown
- npm dependencies: ogl, lucide-react
- Live preview: https://21st.dev/@muhammad-binsalman/components/ai-marketing-hero-section

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/muhammad-binsalman/ai-marketing-hero-section?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt