This website is looking like it is created by an AI , i want you to be real designer who will think to invest his innovation and creativty to outstand this application
15225f2
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduVibe - Modern LMS Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .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); | |
| } | |
| .vanta-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| } | |
| .content-overlay { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Abstract Gradient Background --> | |
| <div class="fixed inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-gray-900 opacity-95"></div> | |
| <div class="fixed inset-0 bg-[url('https://static.photos/abstract/1200x630/42')] bg-cover bg-center mix-blend-overlay opacity-20"></div> | |
| <!-- Glassmorphism Navbar --> | |
| <nav class="content-overlay bg-white/10 backdrop-blur-lg border-b border-white/10 shadow-lg fixed w-full z-10 transition-all duration-300 hover:bg-white/20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path> | |
| </svg> | |
| <span class="ml-2 text-xl font-bold bg-gradient-to-r from-indigo-300 to-purple-400 bg-clip-text text-transparent">EduVibe</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="relative group text-white inline-flex items-center px-3 py-2 text-sm font-medium"> | |
| <span class="relative z-10">Home</span> | |
| <span class="absolute bottom-0 left-0 w-full h-0.5 bg-indigo-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span> | |
| </a> | |
| <a href="#" class="relative group text-white/80 hover:text-white inline-flex items-center px-3 py-2 text-sm font-medium"> | |
| <span class="relative z-10">Courses</span> | |
| <span class="absolute bottom-0 left-0 w-full h-0.5 bg-indigo-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span> | |
| </a> | |
| <a href="#" class="relative group text-white/80 hover:text-white inline-flex items-center px-3 py-2 text-sm font-medium"> | |
| <span class="relative z-10">Dashboard</span> | |
| <span class="absolute bottom-0 left-0 w-full h-0.5 bg-indigo-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span> | |
| </a> | |
| <a href="#" class="relative group text-white/80 hover:text-white inline-flex items-center px-3 py-2 text-sm font-medium"> | |
| <span class="relative z-10">Community</span> | |
| <span class="absolute bottom-0 left-0 w-full h-0.5 bg-indigo-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="relative overflow-hidden bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-indigo-500/30"> | |
| <span class="relative z-10">Sign In</span> | |
| <span class="absolute inset-0 bg-gradient-to-r from-indigo-400 to-purple-500 opacity-0 hover:opacity-100 transition-opacity duration-300"></span> | |
| </button> | |
| <button class="relative overflow-hidden border border-indigo-400 text-white hover:text-white ml-4 px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105"> | |
| <span class="relative z-10">Sign Up</span> | |
| <span class="absolute inset-0 bg-gradient-to-r from-indigo-400 to-purple-500 opacity-0 hover:opacity-100 transition-opacity duration-300"></span> | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu" class="block h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Floating Elements --> | |
| <div class="content-overlay relative pt-32 pb-28 px-4 sm:px-6 lg:px-8 overflow-hidden"> | |
| <div class="absolute -top-20 -right-20 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-indigo-500 rounded-full filter blur-3xl opacity-10"></div> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h1 class="text-5xl tracking-tight font-extrabold sm:text-6xl md:text-7xl"> | |
| <span class="block text-transparent bg-clip-text bg-gradient-to-r from-white to-indigo-200">Learn Without</span> | |
| <span class="block text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Limits</span> | |
| </h1> | |
| <p class="mt-6 max-w-md mx-auto text-lg text-gray-300 sm:text-xl md:mt-8 md:text-2xl md:max-w-3xl"> | |
| EduVibe transforms learning with interactive courses, live sessions, and a collaborative community. Start your journey today. | |
| </p> | |
| <div class="mt-10 sm:flex sm:justify-center"> | |
| <div class="relative inline-flex group"> | |
| <a href="#" class="relative z-10 w-full flex items-center justify-center px-8 py-4 text-lg font-medium rounded-full text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 transform group-hover:scale-105 shadow-lg group-hover:shadow-indigo-500/40"> | |
| Explore Courses | |
| <svg class="ml-3 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| <span class="absolute -inset-1 bg-gradient-to-r from-indigo-400 to-purple-500 rounded-full blur opacity-25 group-hover:opacity-100 transition duration-300"></span> | |
| </div> | |
| <div class="relative inline-flex group ml-4"> | |
| <a href="#" class="relative z-10 w-full flex items-center justify-center px-8 py-4 text-lg font-medium rounded-full text-white bg-transparent border-2 border-indigo-400 hover:bg-indigo-500/10 transition-all duration-300 transform group-hover:scale-105"> | |
| Live Demo | |
| <svg class="ml-3 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path> | |
| </svg> | |
| </a> | |
| <span class="absolute -inset-1 bg-gradient-to-r from-indigo-400 to-purple-500 rounded-full blur opacity-25 group-hover:opacity-100 transition duration-300"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section with 3D Cards --> | |
| <div class="content-overlay relative py-20 bg-gradient-to-b from-gray-900 to-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-4xl leading-8 font-extrabold tracking-tight text-white sm:text-5xl"> | |
| A <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">better way</span> to learn online | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| EduVibe combines the best learning tools with an engaging experience. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-800/50 backdrop-blur-lg rounded-xl p-8 h-full border border-gray-700/50 hover:border-indigo-400/30 transition-all duration-300 hover:shadow-lg hover:shadow-indigo-500/10 hover:-translate-y-2"> | |
| <div class="-mt-6"> | |
| <div class="inline-flex items-center justify-center p-4 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg"> | |
| <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="mt-8 text-xl font-semibold text-white tracking-tight">Interactive Videos</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| Engaging video lessons with quizzes and annotations to enhance your learning experience. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div> | |
| <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg"> | |
| <i data-feather="users" class="h-6 w-6 text-white"></i> | |
| </span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Live Classes</h3> | |
| <p class="mt-5 text-base text-gray-500"> | |
| Real-time interaction with instructors and peers through our live classroom feature. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div> | |
| <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg"> | |
| <i data-feather="bar-chart-2" class="h-6 w-6 text-white"></i> | |
| </span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Progress Tracking</h3> | |
| <p class="mt-5 text-base text-gray-500"> | |
| Detailed analytics to track your learning progress and identify areas for improvement. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div> | |
| <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg"> | |
| <i data-feather="message-square" class="h-6 w-6 text-white"></i> | |
| </span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Community Support</h3> | |
| <p class="mt-5 text-base text-gray-500"> | |
| Connect with fellow learners through discussion forums and study groups. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div> | |
| <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg"> | |
| <i data-feather="smartphone" class="h-6 w-6 text-white"></i> | |
| </span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Mobile Learning</h3> | |
| <p class="mt-5 text-base text-gray-500"> | |
| Learn on the go with our mobile-friendly platform and dedicated apps. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div> | |
| <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg"> | |
| <i data-feather="award" class="h-6 w-6 text-white"></i> | |
| </span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Certification</h3> | |
| <p class="mt-5 text-base text-gray-500"> | |
| Earn verifiable certificates upon course completion to showcase your skills. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Courses --> | |
| <div class="content-overlay relative py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Learn Something New</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Popular Courses | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Explore our most popular courses across various domains. | |
| </p> | |
| </div> | |
| <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Course 1 --> | |
| <div class="course-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i data-feather="code" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-lg font-medium text-gray-900 truncate"> | |
| Web Development Bootcamp | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-sm text-gray-500">Beginner - Advanced</div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Master HTML, CSS, JavaScript and modern frameworks like React and Node.js. | |
| </p> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="h-4 w-4 text-gray-400"></i> | |
| <span class="ml-2 text-sm text-gray-500">32 hours</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="h-4 w-4 text-gray-400"></i> | |
| <span class="ml-2 text-sm text-gray-500">4,500+ students</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="course-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i data-feather="dollar-sign" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-lg font-medium text-gray-900 truncate"> | |
| Financial Markets | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-sm text-gray-500">Intermediate</div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Understand financial markets, investment strategies, and risk management. | |
| </p> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="h-4 w-4 text-gray-400"></i> | |
| <span class="ml-2 text-sm text-gray-500">24 hours</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="h-4 w-4 text-gray-400"></i> | |
| <span class="ml-2 text-sm text-gray-500">3,200+ students</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="course-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i data-feather="cpu" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-lg font-medium text-gray-900 truncate"> | |
| Machine Learning Fundamentals | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-sm text-gray-500">Advanced</div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Learn core concepts of machine learning and implement models using Python. | |
| </p> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="h-4 w-4 text-gray-400"></i> | |
| <span class="ml-2 text-sm text-gray-500">40 hours</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="h-4 w-4 text-gray-400"></i> | |
| <span class="ml-2 text-sm text-gray-500">2,800+ students</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| View All Courses | |
| <i data-feather="arrow-right" class="ml-2 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="content-overlay relative py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What our students say | |
| </p> | |
| </div> | |
| <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-indigo-600">Web Developer</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500"> | |
| "The web development course completely transformed my career. The hands-on projects and mentor support were exceptional." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-indigo-600">Data Scientist</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500"> | |
| "The machine learning course provided me with practical skills that I could immediately apply at work. Highly recommended!" | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Priya Patel"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-gray-900">Priya Patel</div> | |
| <div class="text-indigo-600">UX Designer</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500"> | |
| "The UI/UX design course was exactly what I needed to transition into design. The community support was invaluable." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="content-overlay relative gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white md:text-4xl"> | |
| <span class="block">Ready to dive in?</span> | |
| <span class="block">Start your learning journey today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"> | |
| Get started | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70"> | |
| Live demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="content-overlay relative bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Courses</a></li{"ok":false,"message":"terminated"} | |
| </body> | |
| </html> |