import React, { useState } from 'react';
import { BookOpen, Code, Database, Sparkles, TrendingUp, Award, ExternalLink, Heart, Menu, X, ChevronDown, ChevronUp } from 'lucide-react';
export default function AICoursePlatform() {
const [activeTab, setActiveTab] = useState('courses');
const [expandedCategory, setExpandedCategory] = useState(null);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const courseCategories = {
general: {
title: "Free AI Courses - General Platforms",
icon: <BookOpen className="w-5 h-5" />,
color: "bg-blue-500",
courses: [
{ name: "Elements of AI", provider: "University of Helsinki", url: "https://www.elementsofai.com/" },
{ name: "Anthropic's Free AI Courses", provider: "Anthropic", url: "https://medium.com/data-and-beyond/your-complete-guide-to-anthropics-viral-free-ai-courses-skilljar-edition-7ebc69a5d2e7" },
{ name: "Great Learning Free AI Courses", provider: "Great Learning", url: "https://www.mygreatlearning.com/ai/free-courses" },
{ name: "Google AI Courses and Tools", provider: "Google", url: "https://grow.google/ai/" },
{ name: "IBM SkillsBuild Free AI Course", provider: "IBM", url: "https://skillsbuild.org/students/course-catalog/artificial-intelligence" },
{ name: "AI For Everyone", provider: "Coursera", url: "https://www.coursera.org/learn/ai-for-everyone" },
{ name: "edX Free AI Courses", provider: "edX", url: "https://www.edx.org/courses?q=free+ai+courses" },
{ name: "26 Best Free AI Courses", provider: "Infobip", url: "https://www.infobip.com/blog/free-online-ai-courses" },
]
},
stanford: {
title: "Stanford University Free AI Courses",
icon: <Award className="w-5 h-5" />,
color: "bg-red-500",
courses: [
{ name: "Stanford AI Free Content", provider: "Stanford Online", url: "https://online.stanford.edu/artificial-intelligence/free-content" },
{ name: "5 Free Stanford AI Courses", provider: "KDNuggets", url: "https://www.kdnuggets.com/5-free-stanford-ai-courses" },
{ name: "9 Free AI Courses from Stanford", provider: "Analytics Vidhya", url: "https://www.analyticsvidhya.com/blog/2024/07/free-stanford-ai-courses/" },
{ name: "Stanford AI Courses and Programs", provider: "Stanford", url: "https://online.stanford.edu/artificial-intelligence/courses-and-programs" },
{ name: "Introduction to AI", provider: "Udacity", url: "https://www.classcentral.com/course/udacity-introduction-to-artificial-intelligence-301" },
]
},
mit: {
title: "MIT Free AI & Machine Learning",
icon: <Code className="w-5 h-5" />,
color: "bg-purple-500",
courses: [
{ name: "13 Foundational AI Courses", provider: "MIT OpenLearning", url: "https://openlearning.mit.edu/news/13-foundational-ai-courses-resources-mit" },
{ name: "7 Free MIT ML Courses", provider: "MIT", url: "https://openlearning.mit.edu/news/7-free-online-mit-courses-grasp-machine-learning" },
{ name: "Introduction to Machine Learning", provider: "MIT", url: "https://openlearninglibrary.mit.edu/courses/course-v1:MITx+6.036+1T2019/about" },
{ name: "MIT Artificial Intelligence", provider: "MIT OCW", url: "https://ocw.mit.edu/courses/6-034-artificial-intelligence-fall-2010/" },
{ name: "MIT Deep Learning 6.S191", provider: "MIT", url: "https://introtodeeplearning.com/" },
]
},
harvard: {
title: "Harvard University Free AI Courses",
icon: <Award className="w-5 h-5" />,
color: "bg-red-600",
courses: [
{ name: "Harvard Free AI Courses Online", provider: "Best Colleges", url: "https://www.bestcolleges.com/resources/free-harvard-ai-courses-online/" },
{ name: "Harvard AI Courses Catalog", provider: "Harvard", url: "https://pll.harvard.edu/subject/artificial-intelligence" },
{ name: "5 Free Harvard AI Courses", provider: "Nairametrics", url: "https://nairametrics.com/2023/12/24/harvard-university-offers-5-free-online-ai-courses-for-technology-enthusiasts/" },
{ name: "Introduction to AI with Python", provider: "Harvard/edX", url: "https://www.kdnuggets.com/free-harvard-course-introduction-to-ai-with-python" },
]
},
deeplearning: {
title: "DeepLearning.AI & Andrew Ng",
icon: <Sparkles className="w-5 h-5" />,
color: "bg-indigo-500",
courses: [
{ name: "Deep Learning Specialization", provider: "Coursera", url: "https://www.coursera.org/specializations/deep-learning" },
{ name: "Neural Networks and Deep Learning", provider: "DeepLearning.AI", url: "https://www.coursera.org/learn/neural-networks-deep-learning" },
{ name: "Machine Learning Specialization", provider: "Andrew Ng", url: "https://www.coursera.org/specializations/machine-learning-introduction" },
{ name: "Supervised Machine Learning", provider: "Coursera", url: "https://www.coursera.org/learn/machine-learning" },
]
}
};
const viralAIData = {
trends: {
title: "AI Trends & Market Data",
icon: <TrendingUp className="w-5 h-5" />,
color: "bg-green-500",
sources: [
{ name: "9 Real AI Trends to Watch in 2025", url: "https://www.pragmaticcoders.com/blog/ai-predictions-top-ai-trends" },
{ name: "Google Data and AI Trends 2024", url: "https://data-ai-trends.withgoogle.com/" },
{ name: "Stanford AI Index 2025", url: "https://hai.stanford.edu/news/ai-index-2025-state-of-ai-in-10-charts" },
{ name: "AI Statistics 2024-2025", url: "https://ff.co/ai-statistics-trends-global-market/" },
{ name: "131 AI Statistics for 2025", url: "https://www.nu.edu/blog/ai-statistics-trends/" },
]
},
datasets: {
title: "Kaggle & Dataset Sources",
icon: <Database className="w-5 h-5" />,
color: "bg-orange-500",
sources: [
{ name: "Kaggle Datasets Hub", url: "https://www.kaggle.com/datasets" },
{ name: "How My Datasets Went Viral", url: "https://jasleen101010.medium.com/how-my-datasets-went-viral-on-kaggle-75e0de8ac239" },
{ name: "Viral Social Media Trends Dataset", url: "https://www.kaggle.com/datasets/atharvasoundankar/viral-social-media-trends-and-engagement-analysis" },
{ name: "10 Most Popular Datasets on Kaggle", url: "https://analyticsindiamag.com/ai-trends/10-most-popular-datasets-on-kaggle/" },
{ name: "Kaggle Dataset GitHub Topics", url: "https://github.com/topics/kaggle-dataset" },
]
},
prompts: {
title: "ChatGPT Viral Prompts",
icon: <Sparkles className="w-5 h-5" />,
color: "bg-pink-500",
sources: [
{ name: "10 Best ChatGPT Prompts for Viral Content", url: "https://abloggerslifestyle.medium.com/10-best-chat-gpt-prompts-to-create-viral-content-even-in-2024-e16e2565dd53" },
{ name: "500+ Best Prompts for ChatGPT", url: "https://www.godofprompt.ai/blog/500-best-prompts-for-chatgpt-2024" },
{ name: "Viral ChatGPT Prompt with Sam Altman", url: "https://www.techradar.com/computing/artificial-intelligence/new-chatgpt-prompt-goes-viral-with-sam-altmans-approval" },
{ name: "30 ChatGPT Prompts for Social Media", url: "https://www.castmagic.io/post/chatgpt-prompts-for-social-media" },
{ name: "10 Viral ChatGPT Prompts You Must Try", url: "https://medium.com/aimonks/10-viral-chatgpt-ai-prompts-you-must-try-6d4a4ce848ec" },
]
},
tools: {
title: "Trending AI Tools & Platforms",
icon: <Code className="w-5 h-5" />,
color: "bg-cyan-500",
sources: [
{ name: "45 Best AI Tools in 2025", url: "https://www.synthesia.io/post/ai-tools" },
{ name: "Best AI TikTok Video Generator", url: "https://www.neuralframes.com/post/ai-tiktok-video-generators" },
{ name: "50+ Best AI Tools for 2025", url: "https://niftypm.com/blog/ai-tools/" },
{ name: "Top 5 Viral AI Tools This Week", url: "https://medium.com/@genai.works/top-5-viral-ai-tools-you-need-to-know-this-week-e16f4dfcc67e" },
{ name: "Most Popular Generative AI Tools 2024", url: "https://www.visualcapitalist.com/ranked-the-most-popular-generative-ai-tools-in-2024/" },
]
}
};
const agiResources = [
{ name: "ARC Prize 2024 Technical Report", url: "https://arxiv.org/abs/2412.04604" },
{ name: "arXiv AI Current Papers", url: "https://arxiv.org/list/cs.AI/current" },
{ name: "Levels of AGI Framework", url: "https://arxiv.org/abs/2311.02462" },
{ name: "OpenAI: Planning for AGI", url: "https://openai.com/index/planning-for-agi-and-beyond/" },
{ name: "AWS: What is AGI?", url: "https://aws.amazon.com/what-is/artificial-general-intelligence/" },
{ name: "McKinsey: What is AGI?", url: "https://www.mckinsey.com/featured-insights/mckinsey-explainers/what-is-artificial-general-intelligence-agi" },
{ name: "ARC-AGI Benchmark", url: "https://arcprize.org/arc-agi" },
];
const toggleCategory = (category) => {
setExpandedCategory(expandedCategory === category ? null : category);
};
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
{/* Header */}
<header className="bg-black/30 backdrop-blur-md border-b border-purple-500/20 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
<div className="flex items-center gap-3">
<div className="bg-gradient-to-r from-purple-500 to-pink-500 p-2 rounded-lg">
<Sparkles className="w-8 h-8 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-white">AI Learning Hub</h1>
<p className="text-sm text-purple-300">Master AI with 150+ Free Resources</p>
</div>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex gap-6">
<button
onClick={() => setActiveTab('courses')}
className={`px-4 py-2 rounded-lg transition-all ${
activeTab === 'courses'
? 'bg-purple-500 text-white'
: 'text-purple-200 hover:bg-purple-500/20'
}`}
>
Courses
</button>
<button
onClick={() => setActiveTab('data')}
className={`px-4 py-2 rounded-lg transition-all ${
activeTab === 'data'
? 'bg-purple-500 text-white'
: 'text-purple-200 hover:bg-purple-500/20'
}`}
>
Viral AI Data
</button>
<button
onClick={() => setActiveTab('agi')}
className={`px-4 py-2 rounded-lg transition-all ${
activeTab === 'agi'
? 'bg-purple-500 text-white'
: 'text-purple-200 hover:bg-purple-500/20'
}`}
>
AGI Research
</button>
</nav>
{/* Mobile Menu Button */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden text-white p-2"
>
{mobileMenuOpen ? <X /> : <Menu />}
</button>
</div>
{/* Mobile Navigation */}
{mobileMenuOpen && (
<div className="md:hidden pb-4 space-y-2">
<button
onClick={() => { setActiveTab('courses'); setMobileMenuOpen(false); }}
className={`w-full px-4 py-2 rounded-lg text-left ${
activeTab === 'courses' ? 'bg-purple-500 text-white' : 'text-purple-200'
}`}
>
Courses
</button>
<button
onClick={() => { setActiveTab('data'); setMobileMenuOpen(false); }}
className={`w-full px-4 py-2 rounded-lg text-left ${
activeTab === 'data' ? 'bg-purple-500 text-white' : 'text-purple-200'
}`}
>
Viral AI Data
</button>
<button
onClick={() => { setActiveTab('agi'); setMobileMenuOpen(false); }}
className={`w-full px-4 py-2 rounded-lg text-left ${
activeTab === 'agi' ? 'bg-purple-500 text-white' : 'text-purple-200'
}`}
>
AGI Research
</button>
</div>
)}
</div>
</header>
{/* Main Content */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Donation Banner */}
<div className="bg-gradient-to-r from-pink-500/20 to-purple-500/20 backdrop-blur-sm border border-pink-500/30 rounded-xl p-6 mb-8">
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-3">
<Heart className="w-8 h-8 text-pink-400" />
<div>
<h2 className="text-xl font-bold text-white">Support This Free Resource</h2>
<p className="text-purple-200">Help us maintain and expand this AI learning platform</p>
</div>
</div>
<a
href="https://www.paypal.com/donate/?hosted_button_id=YOUR_BUTTON_ID&business=maroapeebles"
target="_blank"
rel="noopener noreferrer"
className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 flex items-center gap-2"
>
<Heart className="w-5 h-5" />
Donate via PayPal
</a>
</div>
</div>
{/* Courses Tab */}
{activeTab === 'courses' && (
<div className="space-y-6">
<div className="text-center mb-8">
<h2 className="text-4xl font-bold text-white mb-2">Free AI Courses</h2>
<p className="text-purple-300">100+ Premium courses from top universities - completely free</p>
</div>
{Object.entries(courseCategories).map(([key, category]) => (
<div key={key} className="bg-white/5 backdrop-blur-sm border border-purple-500/20 rounded-xl overflow-hidden">
<button
onClick={() => toggleCategory(key)}
className="w-full px-6 py-4 flex items-center justify-between hover:bg-white/5 transition-all"
>
<div className="flex items-center gap-3">
<div className={`${category.color} p-2 rounded-lg`}>
{category.icon}
</div>
<h3 className="text-xl font-bold text-white">{category.title}</h3>
<span className="bg-purple-500/30 text-purple-200 px-3 py-1 rounded-full text-sm">
{category.courses.length} courses
</span>
</div>
{expandedCategory === key ? <ChevronUp className="text-purple-300" /> : <ChevronDown className="text-purple-300" />}
</button>
{expandedCategory === key && (
<div className="px-6 pb-4 grid grid-cols-1 md:grid-cols-2 gap-3">
{category.courses.map((course, idx) => (
<a
key={idx}
href={course.url}
target="_blank"
rel="noopener noreferrer"
className="bg-white/5 hover:bg-white/10 border border-purple-500/20 rounded-lg p-4 transition-all group"
>
<div className="flex items-start justify-between gap-2">
<div>
<h4 className="font-semibold text-white group-hover:text-purple-300 transition-colors">
{course.name}
</h4>
<p className="text-sm text-purple-300 mt-1">{course.provider}</p>
</div>
<ExternalLink className="w-4 h-4 text-purple-400 flex-shrink-0 mt-1" />
</div>
</a>
))}
</div>
)}
</div>
))}
</div>
)}
{/* Viral AI Data Tab */}
{activeTab === 'data' && (
<div className="space-y-6">
<div className="text-center mb-8">
<h2 className="text-4xl font-bold text-white mb-2">Viral AI Data & Resources</h2>
<p className="text-purple-300">Trending datasets, prompts, and tools taking the AI world by storm</p>
</div>
{Object.entries(viralAIData).map(([key, category]) => (
<div key={key} className="bg-white/5 backdrop-blur-sm border border-purple-500/20 rounded-xl overflow-hidden">
<button
onClick={() => toggleCategory(`data-${key}`)}
className="w-full px-6 py-4 flex items-center justify-between hover:bg-white/5 transition-all"
>
<div className="flex items-center gap-3">
<div className={`${category.color} p-2 rounded-lg`}>
{category.icon}
</div>
<h3 className="text-xl font-bold text-white">{category.title}</h3>
<span className="bg-purple-500/30 text-purple-200 px-3 py-1 rounded-full text-sm">
{category.sources.length} sources
</span>
</div>
{expandedCategory === `data-${key}` ? <ChevronUp className="text-purple-300" /> : <ChevronDown className="text-purple-300" />}
</button>
{expandedCategory === `data-${key}` && (
<div className="px-6 pb-4 grid grid-cols-1 md:grid-cols-2 gap-3">
{category.sources.map((source, idx) => (
<a
key={idx}
href={source.url}
target="_blank"
rel="noopener noreferrer"
className="bg-white/5 hover:bg-white/10 border border-purple-500/20 rounded-lg p-4 transition-all group"
>
<div className="flex items-start justify-between gap-2">
<h4 className="font-semibold text-white group-hover:text-purple-300 transition-colors">
{source.name}
</h4>
<ExternalLink className="w-4 h-4 text-purple-400 flex-shrink-0 mt-1" />
</div>
</a>
))}
</div>
)}
</div>
))}
</div>
)}
{/* AGI Research Tab */}
{activeTab === 'agi' && (
<div className="space-y-6">
<div className="text-center mb-8">
<h2 className="text-4xl font-bold text-white mb-2">AGI Research & Computing</h2>
<p className="text-purple-300">Cutting-edge research on Artificial General Intelligence</p>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-purple-500/20 rounded-xl p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{agiResources.map((resource, idx) => (
<a
key={idx}
href={resource.url}
target="_blank"
rel="noopener noreferrer"
className="bg-white/5 hover:bg-white/10 border border-purple-500/20 rounded-lg p-4 transition-all group"
>
<div className="flex items-start justify-between gap-2">
<h4 className="font-semibold text-white group-hover:text-purple-300 transition-colors">
{resource.name}
</h4>
<ExternalLink className="w-4 h-4 text-purple-400 flex-shrink-0 mt-1" />
</div>
</a>
))}
</div>
</div>
<div className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-xl p-6">
<h3 className="text-xl font-bold text-white mb-4">Understanding AGI</h3>
<p className="text-purple-200 leading-relaxed">
Artificial General Intelligence (AGI) refers to highly autonomous systems that outperform humans at most economically valuable work.
These resources cover the latest research, frameworks, and debates surrounding AGI development, safety, and potential impacts on society.
</p>
</div>
</div>
)}
</main>
{/* Footer */}
<footer className="bg-black/30 backdrop-blur-md border-t border-purple-500/20 mt-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="text-center">
<p className="text-purple-300 mb-2">
150+ Free AI Resources Curated for Your Learning Journey
</p>
<p className="text-purple-400 text-sm">
Support via PayPal: <span className="text-white font-semibold">maroapeebles</span>
</p>
<p className="text-purple-500 text-xs mt-4">
© 2025 AI Learning Hub. All course content belongs to respective institutions.
</p>
</div>
</div>
</footer>
</div>
);
}https://claude.ai/public/artifacts/5b96f1e9-e478-4151-abf8-889c1916ca5d
.png)
.png)
.png)

.png)
.png)
.png)