Tất nhiên! Tôi sẽ thêm hình ảnh vào các section chính để trang landing page trở nên sinh động hơn. Để tôi xem lại các component hiện tại trước.

Now I have a clear picture of all sections. Let me generate images for the key sections: Hero (badminton player in action), Player Section (court photos for each card), AI Section, and How It Works. I'll generate them in parallel.

All images generated. Now let me update each section to include them.

Now add images to the court cards in the Player Section:

Now remove the duplicate AI badge that was in the header since it's now on the image:

Now update the AI Section with the tech image:

Now update the CTA Section with the background image:

Now let me also add an image to the Core Values section to make it more visually engaging:

Now add images to the Core Values section:

Da them hinh anh vao 5 section chinh cua landing page:

• Hero: Hinh nguoi choi cau long dang thuc hien cu dap manh, hien thi ben phai noi dung text voi layout 2 cot, kem theo floating stat card.
• Core Values: Hinh nhom nguoi choi vui ve phia tren cot "Nguoi choi" va hinh dashboard tren laptop phia tren cot "Chu san".
• Player Section (Tim san): Moi court card co hinh anh san cau long rieng biet voi badge "Goi y AI" hien thi overlay tren anh.
• AI Technology: Hinh minh hoa cong nghe AI voi Brain icon overlay, thay the animated orb truoc do.
• CTA: Background image san cau long tu goc chup tren cao voi dark overlay de text vua de doc vua co them chieu sau.

Let me first read all current components to identify every Lucide icon usage, and research how to use MDI icons in a React/Next.js project.

Good. I can see the approach: use @mdi/react and @mdi/js packages. Let me now map all Lucide icons to their MDI equivalents. Here's what I need to replace across all files:

Icon mapping (Lucide -> MDI):

• Menu -> mdiMenu
• X -> mdiClose
• ArrowRight -> mdiArrowRight
• Play -> mdiPlay
• MapPin -> mdiMapMarker
• Calendar -> mdiCalendar
• TrendingUp -> mdiTrendingUp
• BarChart3 -> mdiChartBar
• Users -> mdiAccountGroup
• Zap -> mdiFlash
• Star -> mdiStar
• Clock -> mdiClock
• Search -> mdiMagnify
• Sparkles -> mdiCreation
• DollarSign -> mdiCurrencyUsd
• Activity -> mdiPulse
• UserPlus -> mdiAccountPlus
• CheckCircle -> mdiCheckCircle
• Brain -> mdiBrain
• Cpu -> mdiChip
• LineChart -> mdiChartLine
• Lightbulb -> mdiLightbulbOn
• Shield -> mdiShieldCheck
• Heart -> mdiHeart

First, let me add the MDI packages to package.json:

Now let me create a shared MDI Icon helper component to make it easy to use MDI icons with consistent sizing across the app, then update all files. I'll do the component files in parallel:

Now update all landing components in parallel:

The footer doesn't import Lucide icons (it only uses inline SVGs for social media), so it doesn't need changes. All 8 landing page components have been updated. Let me verify nothing was missed:

Zero Lucide imports remaining in the landing components. All icons have been successfully migrated.

Da thay the toan bo Lucide Icons bang Material Design Icons (MDI) tu Pictogrammers trong tat ca 8 component landing page. Toi da them package @mdi/js va @mdi/react, tao component wrapper components/ui/mdi-icon.tsx de su dung MDI icon mot cach nhat quan, va map 24 Lucide icon sang cac MDI tuong duong (vd: ArrowRight -> mdiArrowRight, Brain -> mdiBrain, MapPin -> mdiMapMarker, v.v.). Khong con bat ky import lucide-react nao trong thu muc landing.