Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AITopica - Your Gateway to Artificial Intelligence</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .tool-card:hover { | |
| background-color: rgba(255, 255, 255, 0.9); | |
| } | |
| .nav-link:hover { | |
| color: #a777e3; | |
| } | |
| .animated-underline { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .animated-underline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #a777e3; | |
| transition: width 0.3s ease; | |
| } | |
| .animated-underline:hover::after { | |
| width: 100%; | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-3xl text-purple-600"></i> | |
| <span class="text-xl font-bold text-gray-800">AITopica</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 font-medium animated-underline">Home</a> | |
| <a href="#content" class="nav-link text-gray-700 font-medium animated-underline">AI Content</a> | |
| <a href="#tools" class="nav-link text-gray-700 font-medium animated-underline">AI Tools</a> | |
| <a href="#courses" class="nav-link text-gray-700 font-medium animated-underline">Courses</a> | |
| <a href="#community" class="nav-link text-gray-700 font-medium animated-underline">Community</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <button class="hidden md:block bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition duration-300"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Demystifying AI for Everyone</h1> | |
| <p class="text-xl mb-8 opacity-90">Your one-stop gateway to understanding and leveraging artificial intelligence, regardless of your technical background.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| Explore AI Basics | |
| </button> | |
| <button class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| Watch Intro Video | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Choose AITopica?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-graduation-cap text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Beginner-Friendly</h3> | |
| <p class="text-gray-600">No technical jargon. We break down complex AI concepts into simple, digestible content anyone can understand.</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-tools text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Hands-On Tools</h3> | |
| <p class="text-gray-600">Try AI-powered tools with our guided walkthroughs. Experience AI in action without any coding required.</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-users text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Supportive Community</h3> | |
| <p class="text-gray-600">Join thousands of learners in our friendly community where no question is too basic.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Content Section --> | |
| <section id="content" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center mb-12"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Learn AI Fundamentals</h2> | |
| <p class="text-gray-600 mb-6">Our carefully curated content makes AI accessible to everyone. Start with the basics and gradually build your understanding through articles, videos, and interactive lessons.</p> | |
| <div class="flex flex-wrap gap-3"> | |
| <a href="https://www.coursera.org/learn/machine-learning" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-semibold transition duration-300 text-sm"> | |
| Coursera ML | |
| </a> | |
| <a href="https://www.udacity.com/course/intro-to-artificial-intelligence--cs271" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition duration-300 text-sm"> | |
| Udacity AI | |
| </a> | |
| <a href="https://www.edx.org/course/artificial-intelligence-ai" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold transition duration-300 text-sm"> | |
| edX AI | |
| </a> | |
| <a href="https://www.fast.ai/" target="_blank" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold transition duration-300 text-sm"> | |
| Fast.ai | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://illustrations.popsy.co/amber/developer-activity.svg" alt="Learning Illustration" class="w-full max-w-md mx-auto"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-brain text-5xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-purple-600 font-medium">Beginner Level</span> | |
| <h3 class="text-xl font-semibold mt-2 mb-3 text-gray-800">What is AI? A Simple Explanation</h3> | |
| <p class="text-gray-600 mb-4">Learn what artificial intelligence really means and how it's changing our world in simple terms.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">8 min read</span> | |
| <a href="https://www.coursera.org/specializations/deep-learning" target="_blank" class="text-purple-600 hover:text-purple-800 font-medium">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-5xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-blue-600 font-medium">Practical Guide</span> | |
| <h3 class="text-xl font-semibold mt-2 mb-3 text-gray-800">AI in Everyday Life</h3> | |
| <p class="text-gray-600 mb-4">Discover how AI powers the apps and services you use daily without you even realizing it.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">12 min read</span> | |
| <a href="https://www.udacity.com/course/ai-for-everyone--nd118" target="_blank" class="text-blue-600 hover:text-blue-800 font-medium">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-question-circle text-5xl text-green-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-green-600 font-medium">FAQ</span> | |
| <h3 class="text-xl font-semibold mt-2 mb-3 text-gray-800">AI Myths Debunked</h3> | |
| <p class="text-gray-600 mb-4">Separating fact from fiction about artificial intelligence and what it can (and can't) do.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">10 min read</span> | |
| <a href="https://www.edx.org/course/ethics-of-ai" target="_blank" class="text-green-600 hover:text-green-800 font-medium">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Tools Section --> | |
| <section id="tools" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Try Our AI Tools</h2> | |
| <p class="text-xl text-center mb-12 text-gray-600 max-w-2xl mx-auto">Experience AI in action with our collection of beginner-friendly tools. No technical skills required!</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Chat & Writing Tools --> | |
| <div class="tool-card bg-gray-50 p-6 rounded-xl border border-gray-200 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-comment-dots text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">ChatGPT</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Conversational AI for answering questions, content creation, and brainstorming. Great for writers, students, and professionals.</p> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| <!-- Image Generation --> | |
| <div class="tool-card bg-gray-50 p-6 rounded-xl border border-gray-200 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-image text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">DALL-E & Midjourney</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Create stunning images from text descriptions. Ideal for designers, marketers, and content creators needing visual assets.</p> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| <!-- Video Tools --> | |
| <div class="tool-card bg-gray-50 p-6 rounded-xl border border-gray-200 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-video text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Runway & Synthesia</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">AI video editing and generation tools. Create professional videos with AI avatars and automated editing features.</p> | |
| <button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| <!-- Code Assistance --> | |
| <div class="tool-card bg-gray-50 p-6 rounded-xl border border-gray-200 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-code text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">GitHub Copilot</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">AI pair programmer that suggests code completions. Boosts productivity for developers of all skill levels.</p> | |
| <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| <!-- Audio Tools --> | |
| <div class="tool-card bg-gray-50 p-6 rounded-xl border border-gray-200 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-music text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Murf & Descript</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">AI voice generation and audio editing tools. Create professional voiceovers and edit audio like text documents.</p> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| <!-- Productivity --> | |
| <div class="tool-card bg-gray-50 p-6 rounded-xl border border-gray-200 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-tasks text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Notion AI & Tome</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">AI-powered productivity tools for note-taking, task management, and presentation creation. Streamline your workflow.</p> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h3 class="text-xl font-semibold mb-6 text-center">Top AI Tools by Category</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- Writing --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-purple-600">Writing Assistants</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex justify-between"> | |
| <a href="https://chat.openai.com" target="_blank" class="hover:text-purple-600">1. ChatGPT</a> | |
| <span class="text-yellow-500">★★★★★</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.jasper.ai" target="_blank" class="hover:text-purple-600">2. Jasper</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.copy.ai" target="_blank" class="hover:text-purple-600">3. Copy.ai</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://claude.ai" target="_blank" class="hover:text-purple-600">4. Claude</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.writesonic.com" target="_blank" class="hover:text-purple-600">5. Writesonic</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Image --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-blue-600">Image Generators</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex justify-between"> | |
| <a href="https://www.midjourney.com" target="_blank" class="hover:text-blue-600">1. Midjourney</a> | |
| <span class="text-yellow-500">★★★★★</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://openai.com/dall-e" target="_blank" class="hover:text-blue-600">2. DALL-E 3</a> | |
| <span class="text-yellow-500">★★★★★</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://stablediffusionweb.com" target="_blank" class="hover:text-blue-600">3. Stable Diffusion</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://firefly.adobe.com" target="_blank" class="hover:text-blue-600">4. Adobe Firefly</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://leonardo.ai" target="_blank" class="hover:text-blue-600">5. Leonardo AI</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Video --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-red-600">Video Tools</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex justify-between"> | |
| <a href="https://runwayml.com" target="_blank" class="hover:text-red-600">1. Runway ML</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.synthesia.io" target="_blank" class="hover:text-red-600">2. Synthesia</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://pika.art" target="_blank" class="hover:text-red-600">3. Pika Labs</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.heygen.com" target="_blank" class="hover:text-red-600">4. HeyGen</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.invideo.io" target="_blank" class="hover:text-red-600">5. InVideo AI</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Coding --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-yellow-600">Coding Assistants</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex justify-between"> | |
| <a href="https://github.com/features/copilot" target="_blank" class="hover:text-yellow-600">1. GitHub Copilot</a> | |
| <span class="text-yellow-500">★★★★★</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://aws.amazon.com/codewhisperer" target="_blank" class="hover:text-yellow-600">2. Amazon CodeWhisperer</a> | |
| <span class="text-yellow-500">★★★★☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.tabnine.com" target="_blank" class="hover:text-yellow-600">3. Tabnine</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.cursor.sh" target="_blank" class="hover:text-yellow-600">4. Cursor</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <a href="https://www.codeium.com" target="_blank" class="hover:text-yellow-600">5. Codeium</a> | |
| <span class="text-yellow-500">★★★☆☆</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h3 class="text-xl font-semibold mb-6 text-center">AI Tools for Business Functions</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Digital Marketing --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-purple-600">Digital Marketing</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://www.jasper.ai" target="_blank" class="hover:text-purple-600">Jasper - AI Content Creation</a></li> | |
| <li><a href="https://www.copy.ai" target="_blank" class="hover:text-purple-600">Copy.ai - Marketing Copy</a></li> | |
| <li><a href="https://www.photoroom.com" target="_blank" class="hover:text-purple-600">Photoroom - Product Image Editing</a></li> | |
| <li><a href="https://www.adcreative.ai" target="_blank" class="hover:text-purple-600">AdCreative.ai - Ad Design</a></li> | |
| <li><a href="https://www.mailchimp.com/features/ai" target="_blank" class="hover:text-purple-600">Mailchimp AI - Email Marketing</a></li> | |
| </ul> | |
| </div> | |
| <!-- HR & Recruitment --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-blue-600">HR & Recruitment</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://www.hirevue.com" target="_blank" class="hover:text-blue-600">HireVue - AI Interviews</a></li> | |
| <li><a href="https://www.textio.com" target="_blank" class="hover:text-blue-600">Textio - Job Post Optimization</a></li> | |
| <li><a href="https://www.pymetrics.com" target="_blank" class="hover:text-blue-600">Pymetrics - Candidate Matching</a></li> | |
| <li><a href="https://www.paradox.ai" target="_blank" class="hover:text-blue-600">Paradox - AI Recruiting Assistant</a></li> | |
| <li><a href="https://www.entelo.com" target="_blank" class="hover:text-blue-600">Entelo - Talent Sourcing</a></li> | |
| </ul> | |
| </div> | |
| <!-- Finance & Accounting --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-green-600">Finance & Accounting</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://www.zoho.com/books/ai" target="_blank" class="hover:text-green-600">Zoho Books AI - Accounting</a></li> | |
| <li><a href="https://www.hi.morningstar.com" target="_blank" class="hover:text-green-600">Morningstar - Investment Analysis</a></li> | |
| <li><a href="https://www.kensho.com" target="_blank" class="hover:text-green-600">Kensho - Financial Analytics</a></li> | |
| <li><a href="https://www.alpha-sense.com" target="_blank" class="hover:text-green-600">AlphaSense - Market Intelligence</a></li> | |
| <li><a href="https://www.ey.com/en_gl/ai" target="_blank" class="hover:text-green-600">EY AI - Audit & Compliance</a></li> | |
| </ul> | |
| </div> | |
| <!-- Sales & CRM --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-red-600">Sales & CRM</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://www.gong.io" target="_blank" class="hover:text-red-600">Gong - Sales Call Analysis</a></li> | |
| <li><a href="https://www.chorus.ai" target="_blank" class="hover:text-red-600">Chorus - Conversation Intelligence</a></li> | |
| <li><a href="https://www.salesforce.com/products/sales-cloud/features/einstein" target="_blank" class="hover:text-red-600">Salesforce Einstein - CRM AI</a></li> | |
| <li><a href="https://www.hubspot.com/ai" target="_blank" class="hover:text-red-600">HubSpot AI - Marketing & Sales</a></li> | |
| <li><a href="https://www.clari.com" target="_blank" class="hover:text-red-600">Clari - Revenue Operations</a></li> | |
| </ul> | |
| </div> | |
| <!-- Healthcare --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-indigo-600">Healthcare</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://www.pathai.com" target="_blank" class="hover:text-indigo-600">PathAI - Pathology Diagnostics</a></li> | |
| <li><a href="https://www.babylonhealth.com" target="_blank" class="hover:text-indigo-600">Babylon - AI Doctor</a></li> | |
| <li><a href="https://www.tempus.com" target="_blank" class="hover:text-indigo-600">Tempus - Precision Medicine</a></li> | |
| <li><a href="https://www.deepmind.com/health" target="_blank" class="hover:text-indigo-600">DeepMind Health</a></li> | |
| <li><a href="https://www.butterflynetwork.com" target="_blank" class="hover:text-indigo-600">Butterfly Network - AI Ultrasound</a></li> | |
| </ul> | |
| </div> | |
| <!-- Other Business Functions --> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold mb-3 text-yellow-600">Other Business Functions</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://www.legalrobot.com" target="_blank" class="hover:text-yellow-600">LegalRobot - Contract Analysis</a></li> | |
| <li><a href="https://www.cognitivescale.com" target="_blank" class="hover:text-yellow-600">CognitiveScale - Industry AI</a></li> | |
| <li><a href="https://www.c3.ai" target="_blank" class="hover:text-yellow-600">C3 AI - Enterprise AI</a></li> | |
| <li><a href="https://www.blueprism.com/products/intelligent-automation" target="_blank" class="hover:text-yellow-600">Blue Prism - RPA & AI</a></li> | |
| <li><a href="https://www.dataminr.com" target="_blank" class="hover:text-yellow-600">Dataminr - Real-time Alerts</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| View Full Rankings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI News Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Latest AI News & Developments</h2> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <button onclick="fetchNews('general')" class="px-4 py-2 rounded-full bg-purple-100 text-purple-700 hover:bg-purple-200 transition">All AI News</button> | |
| <button onclick="fetchNews('business')" class="px-4 py-2 rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition">Business</button> | |
| <button onclick="fetchNews('technology')" class="px-4 py-2 rounded-full bg-green-100 text-green-700 hover:bg-green-200 transition">Tech</button> | |
| <button onclick="fetchNews('science')" class="px-4 py-2 rounded-full bg-red-100 text-red-700 hover:bg-red-200 transition">Science</button> | |
| </div> | |
| <div id="ai-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="col-span-3 text-center py-10"> | |
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-purple-600 mb-4"></div> | |
| <p>Loading latest AI news...</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button onclick="loadMoreNews()" class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| Load More News | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // News configuration | |
| const API_KEY = 'YOUR_NEWSAPI_KEY'; // Replace with your actual API key | |
| let currentPage = 1; | |
| let currentCategory = 'general'; | |
| // Fetch AI news from multiple sources | |
| async function fetchAINews(category = 'general', page = 1) { | |
| try { | |
| // Try NewsAPI first | |
| const newsApiUrl = `https://newsapi.org/v2/top-headlines?category=${category}&q=ai OR artificial intelligence&pageSize=6&page=${page}&apiKey=${API_KEY}`; | |
| // Fallback to GNews if NewsAPI fails | |
| const gNewsUrl = `https://gnews.io/api/v4/search?q=ai OR artificial intelligence&lang=en&max=6&page=${page}&apikey=${API_KEY}`; | |
| let response = await fetch(newsApiUrl); | |
| if (!response.ok) throw new Error('NewsAPI failed'); | |
| const data = await response.json(); | |
| return data.articles.map(article => ({ | |
| ...article, | |
| source: article.source.name || 'Unknown', | |
| category | |
| })); | |
| } catch (error) { | |
| console.log('Falling back to GNews API'); | |
| try { | |
| const response = await fetch(gNewsUrl); | |
| const data = await response.json(); | |
| return data.articles.map(article => ({ | |
| title: article.title, | |
| description: article.description, | |
| url: article.url, | |
| urlToImage: article.image, | |
| publishedAt: article.publishedAt, | |
| source: article.source.name || 'Unknown', | |
| category | |
| })); | |
| } catch (fallbackError) { | |
| console.error('Error fetching news:', fallbackError); | |
| return []; | |
| } | |
| } | |
| } | |
| // Display news articles with category filtering | |
| async function displayNews(category = 'general', page = 1) { | |
| const newsContainer = document.getElementById('ai-news-container'); | |
| newsContainer.innerHTML = ` | |
| <div class="col-span-3 text-center py-10"> | |
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-purple-600 mb-4"></div> | |
| <p>Loading ${category} AI news...</p> | |
| </div> | |
| `; | |
| const articles = await fetchAINews(category, page); | |
| if (articles.length === 0) { | |
| newsContainer.innerHTML = ` | |
| <div class="col-span-3 text-center py-10"> | |
| <i class="fas fa-exclamation-triangle text-3xl text-yellow-500 mb-4"></i> | |
| <p class="text-gray-600">Unable to load news at this time. Please try again later.</p> | |
| <p class="text-sm text-gray-500 mt-2">You can also try these news sources directly:</p> | |
| <div class="mt-4 flex justify-center gap-4"> | |
| <a href="https://techcrunch.com/tag/artificial-intelligence/" target="_blank" class="text-purple-600 hover:underline">TechCrunch AI</a> | |
| <a href="https://www.theverge.com/ai-artificial-intelligence" target="_blank" class="text-purple-600 hover:underline">The Verge AI</a> | |
| <a href="https://www.wired.com/tag/artificial-intelligence/" target="_blank" class="text-purple-600 hover:underline">Wired AI</a> | |
| </div> | |
| </div> | |
| `; | |
| return; | |
| } | |
| let html = ''; | |
| articles.forEach((article, index) => { | |
| const colors = { | |
| general: 'purple', | |
| business: 'blue', | |
| technology: 'green', | |
| science: 'red' | |
| }; | |
| const color = colors[article.category] || 'indigo'; | |
| html += ` | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300 border border-gray-100"> | |
| <a href="${article.url}" target="_blank" rel="noopener noreferrer"> | |
| <div class="h-48 bg-${color}-100 flex items-center justify-center overflow-hidden"> | |
| ${article.urlToImage ? | |
| `<img src="${article.urlToImage}" alt="${article.title}" class="w-full h-full object-cover" loading="lazy">` : | |
| `<i class="fas fa-newspaper text-5xl text-${color}-600"></i>`} | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm text-${color}-600 font-medium">${article.source}</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-${color}-100 text-${color}-800">${article.category}</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mt-2 mb-3 text-gray-800">${article.title}</h3> | |
| <p class="text-gray-600 mb-4">${article.description || 'No description available'}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">${new Date(article.publishedAt).toLocaleDateString()}</span> | |
| <span class="text-${color}-600 hover:text-${color}-800 font-medium">Read More →</span> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| `; | |
| }); | |
| newsContainer.innerHTML = html; | |
| } | |
| // Category filter | |
| function fetchNews(category) { | |
| currentCategory = category; | |
| currentPage = 1; | |
| displayNews(category); | |
| } | |
| // Load more news | |
| function loadMoreNews() { | |
| currentPage++; | |
| displayNews(currentCategory, currentPage); | |
| } | |
| // Initial load | |
| document.addEventListener('DOMContentLoaded', () => displayNews('general')); | |
| </script> | |
| <!-- AI Education Videos --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Top AI Education Videos</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe class="w-full h-64" src="https://www.youtube.com/embed/aircAruvnKk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Neural Networks Explained</h3> | |
| <p class="text-gray-600 mb-4">3Blue1Brown's excellent visual explanation of how neural networks work (5.2M views)</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 180K | |
| <i class="fas fa-eye ml-3 mr-1"></i> 5.2M | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe class="w-full h-64" src="https://www.youtube.com/embed/JMUxkJyrIQI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Machine Learning for Beginners</h3> | |
| <p class="text-gray-600 mb-4">Google's Machine Learning Crash Course introduction (2.8M views)</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 92K | |
| <i class="fas fa-eye ml-3 mr-1"></i> 2.8M | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe class="w-full h-64" src="https://www.youtube.com/embed/R9OHn5ZF4Uo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">AI vs Machine Learning</h3> | |
| <p class="text-gray-600 mb-4">IBM's clear explanation of AI concepts (1.6M views)</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 45K | |
| <i class="fas fa-eye ml-3 mr-1"></i> 1.6M | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="https://www.youtube.com/hashtag/aitutorial" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300 inline-block"> | |
| Explore More AI Videos | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Start Your AI Learning Journey</h2> | |
| <p class="text-xl text-center mb-12 opacity-90 max-w-2xl mx-auto">Our structured courses take you from complete beginner to AI-savvy with practical projects along the way.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="course-card bg-white bg-opacity-10 backdrop-blur-sm p-8 rounded-xl border border-white border-opacity-20 transition duration-300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-white bg-opacity-20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-baby text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">AI for Absolute Beginners</h3> | |
| </div> | |
| <ul class="mb-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>No prerequisites needed</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Interactive lessons with quizzes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Certificate of completion</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Free</span> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition duration-300"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="course-card bg-white bg-opacity-10 backdrop-blur-sm p-8 rounded-xl border border-white border-opacity-20 transition duration-300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-white bg-opacity-20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-user-graduate text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Practical AI Applications</h3> | |
| </div> | |
| <ul class="mb-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Hands-on projects with real tools</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Build your first AI-powered app</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Community support</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">$49</span> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition duration-300"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="course-card bg-white bg-opacity-10 backdrop-blur-sm p-8 rounded-xl border border-white border-opacity-20 transition duration-300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-white bg-opacity-20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chalkboard-teacher text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">AI for Business Owners</h3> | |
| </div> | |
| <ul class="mb-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Learn to leverage AI in your business</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Case studies from successful implementations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mr-3 mt-1 text-green-300"></i> | |
| <span>Tools and strategies you can use today</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">$99</span> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition duration-300"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| View All Courses | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What Our Learners Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Sarah J.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I was intimidated by AI before finding AITopica. Their beginner course explained everything so clearly - now I can actually have intelligent conversations about AI!"</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Michael T.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The practical AI tools section helped me implement AI solutions in my small business. The step-by-step guides made it so easy to get started."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya K." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Priya K.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"As a teacher, I wanted to understand AI to prepare my students. AI Nexus gave me both the knowledge and confidence to introduce these concepts in my classroom."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Join Our Growing Community</h2> | |
| <p class="text-gray-600 mb-8">Connect with fellow AI enthusiasts, ask questions, share discoveries, and grow together in our supportive learning environment.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-comments text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Discussion Forums</h4> | |
| <p class="text-gray-600">Get answers to all your AI questions from our community and experts.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-calendar-check text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Live Q&A Sessions</h4> | |
| <p class="text-gray-600">Monthly live sessions with AI professionals and educators.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-project-diagram text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Project Showcases</h4> | |
| <p class="text-gray-600">Share what you've built and get feedback from the community.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| Join Community | |
| </button> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://illustrations.popsy.co/amber/group-chat.svg" alt="Community Illustration" class="w-full max-w-md mx-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <div class="bg-white rounded-xl shadow-md p-8 md:p-12 text-center"> | |
| <h2 class="text-3xl font-bold mb-4 text-gray-800">Stay Updated on AI</h2> | |
| <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for weekly AI insights, tool recommendations, and learning resources delivered straight to your inbox.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300 whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="text-sm text-gray-500 mt-4">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-robot text-3xl text-purple-500"></i> | |
| <span class="text-xl font-bold">AITopica</span> | |
| </div> | |
| <p class="text-gray-400">Making artificial intelligence accessible and understandable for everyone.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Learn</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">AI Basics</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Courses</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Glossary</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Tools</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">All Tools</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Text Generators</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Image Tools</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Audio Tools</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Video Tools</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-400"> | |
| <p>© 2023 AITopica. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple JavaScript for mobile menu toggle (can be expanded) | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| const menu = document.querySelector('.md\\:flex.space-x-8'); | |
| menu.classList.toggle('hidden'); | |
| menu.classList.toggle('flex'); | |
| menu.classList.toggle('flex-col'); | |
| menu.classList.toggle('absolute'); | |
| menu.classList.toggle('top-16'); | |
| menu.classList.toggle('left-0'); | |
| menu.classList.toggle('right-0'); | |
| menu.classList.toggle('bg-white'); | |
| menu.classList.toggle('p-4'); | |
| menu.classList.toggle('shadow-md'); | |
| menu.classList.toggle('space-y-4'); | |
| menu.classList.toggle('space-x-0'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rajathanda/everythingonai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |