Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QUICK GCP LAB | Google Cloud Tutorials</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --gcp-blue: #4285F4; | |
| --gcp-red: #EA4335; | |
| --gcp-yellow: #FBBC05; | |
| --gcp-green: #34A853; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--gcp-blue), var(--gcp-red), var(--gcp-yellow), var(--gcp-green)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| background-size: 300% 300%; | |
| animation: gradient 8s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .gcp-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .gcp-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .avatar-bg { | |
| background: linear-gradient(135deg, var(--gcp-blue), var(--gcp-green)); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--gcp-blue), var(--gcp-green)); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3); | |
| } | |
| .video-card { | |
| transition: all 0.3s ease; | |
| } | |
| .video-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .topic-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .topic-chip:hover { | |
| transform: scale(1.05); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .carousel-item { | |
| min-width: 300px; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .scroll-indicator { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-20px); } | |
| 60% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-8 h-8 rounded-md avatar-bg flex items-center justify-center mr-2"> | |
| <i class="fas fa-cloud text-white text-sm"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">QUICK GCP LAB</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a> | |
| <a href="#tutorials" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Tutorials</a> | |
| <a href="#topics" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Topics</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Testimonials</a> | |
| <a href="https://youtube.com/quickgcplab" target="_blank" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fab fa-youtube mr-2"></i> Subscribe | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a> | |
| <a href="#tutorials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Tutorials</a> | |
| <a href="#topics" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Topics</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Testimonials</a> | |
| <a href="https://youtube.com/quickgcplab" target="_blank" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-600 hover:to-green-600"> | |
| <i class="fab fa-youtube mr-2"></i> Subscribe | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> | |
| <div class="max-w-7xl mx-auto 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 lg:text-6xl font-bold text-gray-900 mb-6 leading-tight"> | |
| Master <span class="gradient-text">Google Cloud</span> with Hands-on Tutorials | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg"> | |
| Learn GCP concepts through practical, real-world examples. From beginner to advanced, we've got you covered! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#tutorials" class="btn-primary text-white px-6 py-3 rounded-lg text-lg font-semibold text-center flex items-center justify-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Latest | |
| </a> | |
| <a href="https://youtube.com/quickgcplab" target="_blank" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-lg text-lg font-semibold text-center hover:bg-gray-100 transition-colors flex items-center justify-center"> | |
| <i class="fab fa-youtube mr-2 text-red-600"></i> Subscribe | |
| </a> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Subscriber"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Subscriber"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Subscriber"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-gray-600">Join <span class="font-bold text-gray-800">10,000+</span> learners</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-white shadow-xl overflow-hidden border-4 border-white animate-float"> | |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="QUICK GCP LAB Instructor" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-white rounded-lg shadow-lg px-4 py-2 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Latest Video</p> | |
| <p class="text-sm font-medium">GCP Networking</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16 scroll-indicator"> | |
| <a href="#tutorials" class="text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Featured Tutorials --> | |
| <section id="tutorials" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Featured Tutorials</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Hand-picked tutorials to help you master Google Cloud Platform</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="gcp-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative pb-[56.25%] overflow-hidden video-card"> | |
| <img src="https://i.ytimg.com/vi/5g5u6O5bJhE/maxresdefault.jpg" alt="GCP Compute Engine Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> | |
| <span class="text-xs text-white bg-blue-600 px-2 py-1 rounded">NEW</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">GCP Compute Engine Deep Dive</h3> | |
| <p class="text-gray-600 mb-4">Learn how to create and manage virtual machines in Google Cloud</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 25 min</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-eye mr-1"></i> 12.5K views</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="gcp-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative pb-[56.25%] overflow-hidden video-card"> | |
| <img src="https://i.ytimg.com/vi/3aoQZxUhT7Y/maxresdefault.jpg" alt="GCP Networking Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Mastering GCP Networking</h3> | |
| <p class="text-gray-600 mb-4">Everything you need to know about VPCs, Firewalls, and Load Balancers</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 42 min</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-eye mr-1"></i> 8.7K views</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="gcp-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative pb-[56.25%] overflow-hidden video-card"> | |
| <img src="https://i.ytimg.com/vi/7m_q1ldzw0U/maxresdefault.jpg" alt="GCP Kubernetes Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> | |
| <span class="text-xs text-white bg-green-600 px-2 py-1 rounded">POPULAR</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">GKE for Beginners</h3> | |
| <p class="text-gray-600 mb-4">Your complete guide to Kubernetes on Google Cloud Platform</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 38 min</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-eye mr-1"></i> 15.2K views</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="https://youtube.com/quickgcplab" target="_blank" class="inline-flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg text-lg font-medium hover:bg-gray-50 transition-colors"> | |
| <i class="fab fa-youtube mr-2 text-red-600"></i> View All Tutorials | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recent Uploads Carousel --> | |
| <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-900">Recent Uploads</h2> | |
| <div class="flex space-x-2"> | |
| <button class="carousel-prev w-10 h-10 rounded-full bg-white shadow flex items-center justify-center hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left text-gray-600"></i> | |
| </button> | |
| <button class="carousel-next w-10 h-10 rounded-full bg-white shadow flex items-center justify-center hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="carousel-container overflow-hidden"> | |
| <div class="carousel-track flex space-x-6 transition-transform duration-300"> | |
| <!-- Carousel Item 1 --> | |
| <div class="carousel-item flex-shrink-0 w-72 bg-white rounded-lg overflow-hidden shadow"> | |
| <div class="relative pb-[56.25%]"> | |
| <img src="https://i.ytimg.com/vi/9nSj7biH0d4/maxresdefault.jpg" alt="GCP IAM Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-gray-900 mb-1">GCP IAM Explained</h3> | |
| <p class="text-sm text-gray-500">3 days ago • 4.2K views</p> | |
| </div> | |
| </div> | |
| <!-- Carousel Item 2 --> | |
| <div class="carousel-item flex-shrink-0 w-72 bg-white rounded-lg overflow-hidden shadow"> | |
| <div class="relative pb-[56.25%]"> | |
| <img src="https://i.ytimg.com/vi/2ZQKPgJ8hRo/maxresdefault.jpg" alt="Cloud Functions Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-gray-900 mb-1">Serverless with Cloud Functions</h3> | |
| <p class="text-sm text-gray-500">1 week ago • 6.8K views</p> | |
| </div> | |
| </div> | |
| <!-- Carousel Item 3 --> | |
| <div class="carousel-item flex-shrink-0 w-72 bg-white rounded-lg overflow-hidden shadow"> | |
| <div class="relative pb-[56.25%]"> | |
| <img src="https://i.ytimg.com/vi/5g5u6O5bJhE/maxresdefault.jpg" alt="BigQuery Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-gray-900 mb-1">BigQuery for Data Analysis</h3> | |
| <p class="text-sm text-gray-500">2 weeks ago • 9.1K views</p> | |
| </div> | |
| </div> | |
| <!-- Carousel Item 4 --> | |
| <div class="carousel-item flex-shrink-0 w-72 bg-white rounded-lg overflow-hidden shadow"> | |
| <div class="relative pb-[56.25%]"> | |
| <img src="https://i.ytimg.com/vi/3aoQZxUhT7Y/maxresdefault.jpg" alt="Cloud Storage Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-gray-900 mb-1">Cloud Storage Best Practices</h3> | |
| <p class="text-sm text-gray-500">2 weeks ago • 7.5K views</p> | |
| </div> | |
| </div> | |
| <!-- Carousel Item 5 --> | |
| <div class="carousel-item flex-shrink-0 w-72 bg-white rounded-lg overflow-hidden shadow"> | |
| <div class="relative pb-[56.25%]"> | |
| <img src="https://i.ytimg.com/vi/7m_q1ldzw0U/maxresdefault.jpg" alt="Cloud Run Tutorial" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black/30 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-gray-900 mb-1">Deploy with Cloud Run</h3> | |
| <p class="text-sm text-gray-500">3 weeks ago • 11.3K views</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Start Learning Section --> | |
| <section id="topics" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Start Learning</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Browse tutorials by Google Cloud topic</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- Compute --> | |
| <a href="#" class="topic-chip bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center hover:shadow-lg"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-server text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-900 mb-2">Compute</h3> | |
| <p class="text-sm text-gray-500">VMs, Containers, Serverless</p> | |
| </a> | |
| <!-- Storage --> | |
| <a href="#" class="topic-chip bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center hover:shadow-lg"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-database text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-900 mb-2">Storage</h3> | |
| <p class="text-sm text-gray-500">Cloud Storage, Databases</p> | |
| </a> | |
| <!-- Networking --> | |
| <a href="#" class="topic-chip bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center hover:shadow-lg"> | |
| <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-network-wired text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-900 mb-2">Networking</h3> | |
| <p class="text-sm text-gray-500">VPC, Load Balancing, CDN</p> | |
| </a> | |
| <!-- Security --> | |
| <a href="#" class="topic-chip bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center hover:shadow-lg"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-shield-alt text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-900 mb-2">Security</h3> | |
| <p class="text-sm text-gray-500">IAM, Encryption, Policies</p> | |
| </a> | |
| <!-- Data & AI --> | |
| <a href="#" class="topic-chip bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center hover:shadow-lg"> | |
| <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-900 mb-2">Data & AI</h3> | |
| <p class="text-sm text-gray-500">BigQuery, ML, Analytics</p> | |
| </a> | |
| </div> | |
| <div class="mt-12 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 md:p-12"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Ready to become a GCP expert?</h3> | |
| <p class="text-gray-600 mb-6">Subscribe to QUICK GCP LAB for weekly tutorials, hands-on labs, and real-world GCP solutions.</p> | |
| <a href="https://youtube.com/quickgcplab" target="_blank" class="btn-primary text-white px-6 py-3 rounded-lg text-lg font-semibold inline-flex items-center"> | |
| <i class="fab fa-youtube mr-2"></i> Subscribe Now | |
| </a> | |
| </div> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="w-40 h-40 rounded-full bg-white shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-cloud text-6xl gradient-text"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">What Our Learners Say</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Join thousands of satisfied students mastering GCP with our tutorials</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">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 italic">"The GKE tutorial was exactly what I needed to deploy my first containerized app. Clear explanations and practical examples made it so easy to follow along!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">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 italic">"I passed my Google Cloud Associate Engineer exam thanks to these tutorials. The networking deep dive was particularly helpful for understanding complex concepts."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white rounded-xl p-6 shadow | |
| </html> |