Share0
Tweet0
Share0
Share0
Tweet0
Share0

import { Button } from “@/components/ui/button”;import { Card, CardContent, CardDescription, CardHeader, CardTitle } from “@/components/ui/card”;import { Badge } from “@/components/ui/badge”;import { Tabs, TabsContent, TabsList, TabsTrigger } from “@/components/ui/tabs”;import {TrendingUp,DollarSign,Users,Star,ExternalLink,Zap,Target,Award,ArrowRight,PlayCircle,BookOpen,Briefcase,TrendingDown} from “lucide-react”;

const Index = () => {
const affiliateProducts = [
{
id: 1,
name: “ChatGPT Plus”,
category: “AI Tools”,
commission: “20%”,
price: “$20/tháng”,
rating: 4.8,
description: “Công cụ AI chat tiên tiến nhất hiện tại”,
image: “https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop”,
tags: [“Hot”, “High Converting”]
},
{
id: 2,
name: “Canva Pro”,
category: “Design Tools”,
commission: “30%”,
price: “$15/tháng”,
rating: 4.7,
description: “Thiết kế đồ họa chuyên nghiệp dễ dàng”,
image: “https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=400&h=300&fit=crop”,
tags: [“Popular”]
},
{
id: 3,
name: “ClickFunnels”,
category: “Marketing”,
commission: “40%”,
price: “$97/tháng”,
rating: 4.6,
description: “Tạo funnel bán hàng chuyên nghiệp”,
image: “https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop”,
tags: [“High Commission”]
},
{
id: 4,
name: “Notion”,
category: “Productivity”,
commission: “25%”,
price: “$10/tháng”,
rating: 4.9,
description: “Workspace tất cả trong một”,
image: “https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop”,
tags: [“Trending”]
},
{
id: 5,
name: “Shopify”,
category: “E-commerce”,
commission: “200%”,
price: “$29/tháng”,
rating: 4.5,
description: “Nền tảng bán hàng online số 1”,
image: “https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop”,
tags: [“High Payout”]
},
{
id: 6,
name: “Semrush”,
category: “SEO Tools”,
commission: “40%”,
price: “$120/tháng”,
rating: 4.4,
description: “Công cụ SEO và marketing toàn diện”,
image: “https://images.unsplash.com/photo-1432888622747-4eb9a8efeb07?w=400&h=300&fit=crop”,
tags: [“Professional”]
}
];

const categories = [“Tất cả”, “AI Tools”, “Design Tools”, “Marketing”, “Productivity”, “E-commerce”, “SEO Tools”];

const stats = [
{ title: “Tổng Sản Phẩm”, value: “50+”, icon: Briefcase, color: “text-blue-600” },
{ title: “Commission Trung Bình”, value: “35%”, icon: TrendingUp, color: “text-green-600” },
{ title: “Affiliate Partners”, value: “1,200+”, icon: Users, color: “text-purple-600” },
{ title: “Doanh Thu/Tháng”, value: “$25K+”, icon: DollarSign, color: “text-orange-600” }
];

return (

{/* Header */}

AffiliateHub

Sản PhẩmThống KêTài Nguyên Đăng Ký

  {/* Hero Section */}
  <section className="py-20 text-center">
    <div className="container mx-auto px-4 max-w-4xl">
      <Badge className="mb-6 bg-purple-100 text-purple-700 hover:bg-purple-200">
        <Zap className="w-4 h-4 mr-1" />
        Top Affiliate Products 2024
      </Badge>
      <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-purple-600 via-blue-600 to-indigo-600 bg-clip-text text-transparent">
        Kiếm Tiền Online
        <br />
        Với Affiliate Marketing
      </h1>
      <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
        Khám phá hơn 50+ sản phẩm affiliate chất lượng cao với commission hấp dẫn. 
        Bắt đầu kiếm tiền ngay hôm nay với các công cụ và khóa học tốt nhất thị trường.
      </p>
      <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
        <Button size="lg" className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-lg px-8 py-3">
          <PlayCircle className="w-5 h-5 mr-2" />
          Xem Demo
        </Button>
        <Button size="lg" variant="outline" className="border-purple-300 text-purple-600 hover:bg-purple-50 text-lg px-8 py-3">
          <BookOpen className="w-5 h-5 mr-2" />
          Tài Liệu Hướng Dẫn
        </Button>
      </div>
    </div>
  </section>

  {/* Stats Section */}
  <section id="stats" className="py-16 bg-white/50">
    <div className="container mx-auto px-4">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <Card key={index} className="text-center border-0 shadow-lg hover:shadow-xl transition-shadow">
            <CardContent className="p-6">
              <div className={`w-12 h-12 ${stat.color} bg-opacity-10 rounded-lg flex items-center justify-center mx-auto mb-4`}>
                <stat.icon className={`w-6 h-6 ${stat.color}`} />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-1">{stat.value}</h3>
              <p className="text-gray-600 text-sm">{stat.title}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  </section>

  {/* Products Section */}
  <section id="products" className="py-20">
    <div className="container mx-auto px-4">
      <div className="text-center mb-12">
        <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
          Sản Phẩm Affiliate Hot Nhất
        </h2>
        <p className="text-gray-600 text-lg max-w-2xl mx-auto">
          Được tuyển chọn kỹ lưỡng với commission cao và tỷ lệ chuyển đổi tốt
        </p>
      </div>

      <Tabs defaultValue="Tất cả" className="w-full">
        <TabsList className="grid w-full max-w-3xl mx-auto mb-8 grid-cols-4 md:grid-cols-7 bg-white/50 backdrop-blur-sm">
          {categories.map((category) => (
            <TabsTrigger key={category} value={category} className="text-xs md:text-sm">
              {category}
            </TabsTrigger>
          ))}
        </TabsList>

        {categories.map((category) => (
          <TabsContent key={category} value={category}>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {affiliateProducts
                .filter(product => category === "Tất cả" || product.category === category)
                .map((product) => (
                  <Card key={product.id} className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg overflow-hidden">
                    <div className="relative">
                      <img 
                        src={product.image} 
                        alt={product.name}
                        className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute top-3 left-3 flex gap-2">
                        {product.tags.map((tag) => (
                          <Badge key={tag} className="bg-white/90 text-gray-700 hover:bg-white">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                    <CardHeader>
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle className="text-lg mb-1">{product.name}</CardTitle>
                          <Badge variant="secondary" className="text-xs">
                            {product.category}
                          </Badge>
                        </div>
                        <div className="text-right">
                          <div className="flex items-center gap-1 mb-1">
                            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                            <span className="text-sm font-medium">{product.rating}</span>
                          </div>
                          <div className="text-lg font-bold text-green-600">
                            {product.commission}
                          </div>
                        </div>
                      </div>
                      <CardDescription className="text-gray-600">
                        {product.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="flex justify-between items-center">
                        <div>
                          <span className="text-sm text-gray-500">Giá: </span>
                          <span className="font-semibold text-gray-900">{product.price}</span>
                        </div>
                        <Button className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700">
                          <ExternalLink className="w-4 h-4 mr-2" />
                          Tham Gia
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))
              }
            </div>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  </section>

  {/* Resources Section */}
  <section id="resources" className="py-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
    <div className="container mx-auto px-4 text-center">
      <h2 className="text-4xl font-bold mb-6">
        Tài Nguyên & Hướng Dẫn
      </h2>
      <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
        Học cách tối ưu hóa affiliate marketing và tăng thu nhập của bạn
      </p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white">
          <CardHeader>
            <BookOpen className="w-12 h-12 mx-auto mb-4" />
            <CardTitle>E-book Miễn Phí</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="opacity-90 mb-4">
              "Bí Quyết Affiliate Marketing 2024" - Hướng dẫn từ A-Z
            </p>
            <Button variant="outline" className="border-white text-white hover:bg-white hover:text-purple-600">
              Tải Ngay
            </Button>
          </CardContent>
        </Card>

        <Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white">
          <CardHeader>
            <PlayCircle className="w-12 h-12 mx-auto mb-4" />
            <CardTitle>Video Training</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="opacity-90 mb-4">
              Khóa học video 10+ giờ về affiliate marketing
            </p>
            <Button variant="outline" className="border-white text-white hover:bg-white hover:text-purple-600">
              Xem Ngay
            </Button>
          </CardContent>
        </Card>

        <Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white">
          <CardHeader>
            <Award className="w-12 h-12 mx-auto mb-4" />
            <CardTitle>Community</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="opacity-90 mb-4">
              Tham gia cộng đồng 5000+ affiliate marketers
            </p>
            <Button variant="outline" className="border-white text-white hover:bg-white hover:text-purple-600">
              Tham Gia
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  </section>

  {/* CTA Section */}
  <section className="py-20 bg-white">
    <div className="container mx-auto px-4 text-center">
      <h2 className="text-4xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
        Bắt Đầu Kiếm Tiền Ngay Hôm Nay
      </h2>
      <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
        Đăng ký miễn phí và truy cập vào kho tài nguyên affiliate marketing đầy đủ nhất
      </p>
      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <Button size="lg" className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-lg px-8 py-3">
          Đăng Ký Miễn Phí
          <ArrowRight className="w-5 h-5 ml-2" />
        </Button>
        <Button size="lg" variant="outline" className="border-purple-300 text-purple-600 hover:bg-purple-50 text-lg px-8 py-3">
          Liên Hệ Tư Vấn
        </Button>
      </div>
    </div>
  </section>

  {/* Footer */}
  <footer className="py-12 bg-gray-900 text-white">
    <div className="container mx-auto px-4">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg flex items-center justify-center">
              <Target className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-xl font-bold">AffiliateHub</h3>
          </div>
          <p className="text-gray-400">
            Nền tảng affiliate marketing hàng đầu Việt Nam
          </p>
        </div>
        <div>
          <h4 className="font-semibold mb-4">Sản Phẩm</h4>
          <ul className="space-y-2 text-gray-400">
            <li><a href="#" className="hover:text-white transition-colors">AI Tools</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Marketing Tools</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Design Tools</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Productivity</a></li>
          </ul>
        </div>
        <div>
          <h4 className="font-semibold mb-4">Hỗ Trợ</h4>
          <ul className="space-y-2 text-gray-400">
            <li><a href="#" className="hover:text-white transition-colors">Hướng Dẫn</a></li>
            <li><a href="#" className="hover:text-white transition-colors">FAQ</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Community</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Liên Hệ</a></li>
          </ul>
        </div>
        <div>
          <h4 className="font-semibold mb-4">Theo Dõi</h4>
          <ul className="space-y-2 text-gray-400">
            <li><a href="#" className="hover:text-white transition-colors">Facebook</a></li>
            <li><a href="#" className="hover:text-white transition-colors">YouTube</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Telegram</a></li>
            <li><a href="#" className="hover:text-white transition-colors">Email</a></li>
          </ul>
        </div>
      </div>
      <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2024 AffiliateHub. Tất cả quyền được bảo lưu.</p>
      </div>
    </div>
  </footer>
</div>

);
};

export default Index;

Thẻ

chưa có thẻ

Bạn cũng có thể thích

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}