Messi GOAT — Tribute Landing

Giới thiệu dự án

Messi GOAT là template landing page kiểu tribute/personality dành cho thương hiệu cá nhân, vận động viên hoặc dự án portfolio cần cảm giác cinematic và sang trọng. Toàn bộ giao diện đặt trên nền tối với accent gradient tím-xanh, hero hai cột (typography lớn + ảnh polaroid bo góc), section 'Through the Years' dùng hover-expand image strip, gallery polaroid đa lớp, ba thẻ Hall of Fame và marquee trích dẫn ở footer. Code Next.js 15 App Router + React 19, Tailwind CSS 4, animation bằng Framer Motion. Bộ component đi kèm (skiper-ui + shadcn/ui style) gồm hover-expand, masked-div, image-ripple, marquee, animated-number, slide-button — tái sử dụng cho landing nhân vật khác chỉ bằng cách thay text và ảnh.

Tính năng nổi bật

• Hero 2 cột với typography 'Lionel / GOAT / Messi' và ảnh polaroid bo góc, badge GOAT lơ lửng
• Section 'Through the Years' dùng hover-expand image strip, mở rộng theo con trỏ
• Hall of Fame: 3 card thành tích (World Cup, Ballon d'Or, Barcelona Legacy) layout grid
• Marquee trích dẫn vô cực + animated-number cho stats (800+ Goals, 8 Ballon d'Or, 44+ Trophies)
• Bộ skiper-ui: image-ripple, masked-div, slide-button, flipper, marquee — kéo-thả tái sử dụng

Công nghệ sử dụng

• Next.js 15
• React 19
• Tailwind CSS 4
• Framer Motion
• lucide-react

Hướng dẫn sử dụng

1. Bước 1

   Tải file nén ở nút phía trên và giải nén vào thư mục dự án của bạn.

2. Bước 2

   Chạy npm install để cài đặt dependencies.

3. Bước 3

   Chạy npm run dev và mở http://localhost:3000.