[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-tailwind-css-complete-project-tutorial-final-all--*":3,"academy-blog-translations-uognb4k6yyjzol6":74},{"data":4,"page":73,"perPage":73,"totalItems":73,"totalPages":73},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":68,"keywords":69,"locale":44,"published_at":70,"scheduled_at":13,"school_blog":65,"short_description":71,"status":63,"title":6,"updated":72,"updated_by":13,"slug":66,"views":67},"EP 10: Skills Test: Building a Beautiful Website with Professional Tailwind CSS","sclblg987654321","school_blog_translations","\u003Cp>We've reached the final episode of our series! After learning all the techniques of Tailwind CSS, it's time to apply all our knowledge to create a real project.\u003C\u002Fp>\u003Cp>In this episode, we'll build a complete SaaS Landing Page for \"TaskFlow Pro\" from planning and design to coding and performance optimization. This will incorporate everything we've learned throughout this series.\u003C\u002Fp>\u003Ch2>Project Planning\u003C\u002Fh2>\u003Ch3>Project Goals\u003C\u002Fh3>\u003Ch3>Project we'll build: TaskFlow Pro Landing Page\u003C\u002Fh3>\u003Cul>\u003Cli>Task Management app introduction website\u003C\u002Fli>\u003Cli>Dark\u002FLight Mode system\u003C\u002Fli>\u003Cli>Mobile and Desktop responsive\u003C\u002Fli>\u003Cli>Animation and Interactive Elements\u003C\u002Fli>\u003Cli>Optimized performance\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Website Structure\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cstrong>Header + Navigation\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Hero Section\u003C\u002Fstrong> - Product introduction\u003C\u002Fli>\u003Cli>\u003Cstrong>Features Section\u003C\u002Fstrong> - Main features\u003C\u002Fli>\u003Cli>\u003Cstrong>Pricing Section\u003C\u002Fstrong> - Pricing plans\u003C\u002Fli>\u003Cli>\u003Cstrong>Testimonials\u003C\u002Fstrong> - Customer reviews\u003C\u002Fli>\u003Cli>\u003Cstrong>CTA Section\u003C\u002Fstrong> - Call to action\u003C\u002Fli>\u003Cli>\u003Cstrong>Footer\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Ch2>Project Setup\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>TaskFlow Pro - Professional Task Management<\u002Ftitle>\n <meta name=\"description\" content=\"TaskFlow Pro helps you manage tasks efficiently with modern tools and easy-to-use interface\">\n \n <!-- Tailwind CSS -->\n <script src=\"https:\u002F\u002Fcdn.tailwindcss.com\"><\u002Fscript>\n \n <!-- Custom Configuration -->\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n primary: {\n 50: '#eff6ff',\n 100: '#dbeafe',\n 200: '#bfdbfe',\n 300: '#93c5fd',\n 400: '#60a5fa',\n 500: '#3b82f6',\n 600: '#2563eb',\n 700: '#1d4ed8',\n 800: '#1e40af',\n 900: '#1e3a8a',\n },\n success: {\n 50: '#f0fdf4',\n 500: '#22c55e',\n 600: '#16a34a',\n },\n warning: {\n 50: '#fffbeb',\n 500: '#f59e0b',\n 600: '#d97706',\n },\n danger: {\n 50: '#fef2f2',\n 500: '#ef4444',\n 600: '#dc2626',\n }\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n animation: {\n 'fade-in': 'fadeIn 0.5s ease-out',\n 'slide-up': 'slideUp 0.5s ease-out',\n 'scale-in': 'scaleIn 0.3s ease-out',\n 'float': 'float 3s ease-in-out infinite',\n }\n }\n }\n }\n <\u002Fscript>\n \n <!-- Custom Styles -->\n <style>\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes scaleIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n \n .glass-effect {\n backdrop-filter: blur(16px) saturate(180%);\n background-color: rgba(255, 255, 255, 0.75);\n border: 1px solid rgba(255, 255, 255, 0.125);\n }\n \n .dark .glass-effect {\n background-color: rgba(0, 0, 0, 0.25);\n border: 1px solid rgba(255, 255, 255, 0.125);\n }\n <\u002Fstyle>\n<\u002Fhead>\n<body class=\"font-sans antialiased bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300\">\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Header and Navigation\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Header -->\n<header class=\"fixed top-0 left-0 right-0 z-50 glass-effect\">\n <nav class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <!-- Logo -->\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-8 h-8 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg flex items-center justify-center\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <span class=\"text-xl font-bold text-gray-900 dark:text-white\">TaskFlow Pro<\u002Fspan>\n <\u002Fdiv>\n \n <!-- Desktop Navigation -->\n <div class=\"hidden md:flex items-center space-x-8\">\n <a href=\"#features\" class=\"text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Features\n <\u002Fa>\n <a href=\"#pricing\" class=\"text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Pricing\n <\u002Fa>\n <a href=\"#testimonials\" class=\"text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Reviews\n <\u002Fa>\n <a href=\"#\" class=\"text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Sign In\n <\u002Fa>\n <\u002Fdiv>\n \n <!-- CTA + Theme Toggle -->\n <div class=\"flex items-center space-x-4\">\n <!-- Theme Toggle -->\n <button id=\"theme-toggle\" class=\"p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors\">\n <svg class=\"w-5 h-5 hidden dark:block\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"><\u002Fpath>\n <\u002Fsvg>\n <svg class=\"w-5 h-5 block dark:hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fbutton>\n \n <!-- CTA Button -->\n <button class=\"hidden md:inline-flex items-center px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-all duration-200 transform hover:scale-105\">\n Start Free Trial\n <\u002Fbutton>\n \n <!-- Mobile Menu Button -->\n <button class=\"md:hidden p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors\" id=\"mobile-menu-button\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Mobile Navigation -->\n <div class=\"md:hidden hidden\" id=\"mobile-menu\">\n <div class=\"px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700\">\n <a href=\"#features\" class=\"block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Features\n <\u002Fa>\n <a href=\"#pricing\" class=\"block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Pricing\n <\u002Fa>\n <a href=\"#testimonials\" class=\"block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Reviews\n <\u002Fa>\n <a href=\"#\" class=\"block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors\">\n Sign In\n <\u002Fa>\n <button class=\"w-full mt-4 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-colors\">\n Start Free Trial\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fnav>\n<\u002Fheader>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Hero Section - Product Introduction\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Hero Section -->\n<section class=\"pt-24 pb-12 lg:pt-32 lg:pb-20 bg-gradient-to-br from-primary-50 via-white to-primary-50 dark:from-gray-900 dark:via-gray-900 dark:to-primary-900\u002F20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n <!-- Left Content -->\n <div class=\"text-center lg:text-left\">\n <div class=\"animate-fade-in\">\n <span class=\"inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900\u002F50 text-primary-700 dark:text-primary-300 text-sm font-medium rounded-full mb-4\">\n 🚀 New! AI-Powered Task Management\n <\u002Fspan>\n \n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight mb-6\">\n Manage Tasks\n <span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">\n Systematically\n <\u002Fspan>\n <br>Like a Professional\n <\u002Fh1>\n \n <p class=\"text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed max-w-2xl mx-auto lg:mx-0\">\n TaskFlow Pro helps your team manage projects efficiently \n with AI that analyzes and continuously improves your workflow processes.\n <\u002Fp>\n \n <div class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8\">\n <button class=\"inline-flex items-center justify-center px-8 py-4 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-xl text-lg transition-all duration-200 transform hover:scale-105 hover:shadow-lg\">\n Start Free Trial\n <svg class=\"ml-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fbutton>\n \n <button class=\"inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-xl text-lg border border-gray-200 dark:border-gray-700 transition-all duration-200 transform hover:scale-105\">\n <svg class=\"mr-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M3 12a9 9 0 1018 0 9 9 0 00-18 0z\"><\u002Fpath>\n <\u002Fsvg>\n Watch Demo\n <\u002Fbutton>\n <\u002Fdiv>\n \n <!-- Social Proof -->\n <div class=\"flex items-center justify-center lg:justify-start space-x-6 text-sm text-gray-500 dark:text-gray-400\">\n <div class=\"flex items-center\">\n <span class=\"text-2xl font-bold text-primary-500\">15K+<\u002Fspan>\n <span class=\"ml-1\">Active Teams<\u002Fspan>\n <\u002Fdiv>\n <div class=\"flex items-center\">\n <span class=\"text-2xl font-bold text-primary-500\">4.9<\u002Fspan>\n <div class=\"flex ml-1\">\n ⭐⭐⭐⭐⭐\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"flex items-center\">\n <span class=\"text-2xl font-bold text-primary-500\">99.9%<\u002Fspan>\n <span class=\"ml-1\">Uptime<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Right Content - Dashboard Preview -->\n <div class=\"relative animate-slide-up\">\n <div class=\"relative z-10\">\n <!-- Dashboard Mockup -->\n <div class=\"bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden border border-gray-200 dark:border-gray-700\">\n <!-- Dashboard Header -->\n <div class=\"bg-gray-50 dark:bg-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-3 h-3 bg-red-500 rounded-full\"><\u002Fdiv>\n <div class=\"w-3 h-3 bg-yellow-500 rounded-full\"><\u002Fdiv>\n <div class=\"w-3 h-3 bg-green-500 rounded-full\"><\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">TaskFlow Pro Dashboard<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Dashboard Content -->\n <div class=\"p-6\">\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">Current Projects<\u002Fh3>\n <span class=\"px-3 py-1 bg-green-100 dark:bg-green-900\u002F50 text-green-700 dark:text-green-300 text-sm rounded-full\">\n 5 Projects\n <\u002Fspan>\n <\u002Fdiv>\n \n <!-- Project Cards -->\n <div class=\"space-y-3\">\n <div class=\"flex items-center justify-between p-4 bg-primary-50 dark:bg-primary-900\u002F20 rounded-lg border border-primary-200 dark:border-primary-800\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-3 h-3 bg-primary-500 rounded-full\"><\u002Fdiv>\n <div>\n <div class=\"font-medium text-gray-900 dark:text-white\">Website Redesign<\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">In Progress<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-right\">\n <div class=\"text-sm font-medium text-gray-900 dark:text-white\">75%<\u002Fdiv>\n <div class=\"w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-1\">\n <div class=\"w-3\u002F4 h-full bg-primary-500 rounded-full\"><\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-3 h-3 bg-yellow-500 rounded-full\"><\u002Fdiv>\n <div>\n <div class=\"font-medium text-gray-900 dark:text-white\">Mobile App<\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">Pending Approval<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-right\">\n <div class=\"text-sm font-medium text-gray-900 dark:text-white\">45%<\u002Fdiv>\n <div class=\"w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-1\">\n <div class=\"w-2\u002F5 h-full bg-yellow-500 rounded-full\"><\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-3 h-3 bg-green-500 rounded-full\"><\u002Fdiv>\n <div>\n <div class=\"font-medium text-gray-900 dark:text-white\">Marketing Campaign<\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">Completed<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-right\">\n <div class=\"text-sm font-medium text-gray-900 dark:text-white\">100%<\u002Fdiv>\n <div class=\"w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-1\">\n <div class=\"w-full h-full bg-green-500 rounded-full\"><\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Floating Elements -->\n <div class=\"absolute -top-4 -left-4 w-20 h-20 bg-primary-200 dark:bg-primary-800 rounded-full opacity-20 animate-float\"><\u002Fdiv>\n <div class=\"absolute -bottom-4 -right-4 w-16 h-16 bg-primary-300 dark:bg-primary-700 rounded-full opacity-30 animate-float\" style=\"animation-delay: 1s;\"><\u002Fdiv>\n <div class=\"absolute top-1\u002F2 -left-8 w-12 h-12 bg-primary-400 dark:bg-primary-600 rounded-full opacity-20 animate-float\" style=\"animation-delay: 2s;\"><\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Features Section - Main Features\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Features Section -->\n<section id=\"features\" class=\"py-20 bg-white dark:bg-gray-900\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <!-- Section Header -->\n <div class=\"text-center mb-16 animate-fade-in\">\n <span class=\"inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900\u002F50 text-primary-700 dark:text-primary-300 text-sm font-medium rounded-full mb-4\">\n Key Features\n <\u002Fspan>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4\">\n Everything You Need\n <span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">\n In One Place\n <\u002Fspan>\n <\u002Fh2>\n <p class=\"text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto\">\n TaskFlow Pro comes with comprehensive tools that help your team work at maximum efficiency\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Features Grid -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n <!-- Feature 1 -->\n <div class=\"group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in\">\n <div class=\"w-12 h-12 bg-primary-100 dark:bg-primary-900\u002F50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n <svg class=\"w-6 h-6 text-primary-600 dark:text-primary-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n Smart Task Management\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n AI helps prioritize tasks, analyze workflow processes, and recommend ways to improve efficiency\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Feature 2 -->\n <div class=\"group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in\" style=\"animation-delay: 0.1s;\">\n <div class=\"w-12 h-12 bg-success-100 dark:bg-success-900\u002F50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n <svg class=\"w-6 h-6 text-success-600 dark:text-success-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n Real-time Collaboration\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n Share tasks, comment, and track progress in real-time, enabling teams to coordinate efficiently\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Feature 3 -->\n <div class=\"group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in\" style=\"animation-delay: 0.2s;\">\n <div class=\"w-12 h-12 bg-warning-100 dark:bg-warning-900\u002F50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n <svg class=\"w-6 h-6 text-warning-600 dark:text-warning-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n Reports and Analytics\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n View work statistics, analyze team performance, and get insights to continuously improve processes\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Feature 4 -->\n <div class=\"group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in\" style=\"animation-delay: 0.3s;\">\n <div class=\"w-12 h-12 bg-purple-100 dark:bg-purple-900\u002F50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n <svg class=\"w-6 h-6 text-purple-600 dark:text-purple-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n Enterprise Security\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n End-to-End encryption, Two-Factor Authentication, and automatic data backup systems\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Feature 5 -->\n <div class=\"group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in\" style=\"animation-delay: 0.4s;\">\n <div class=\"w-12 h-12 bg-indigo-100 dark:bg-indigo-900\u002F50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n <svg class=\"w-6 h-6 text-indigo-600 dark:text-indigo-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n Connect Your Apps\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n Supports integration with Slack, Google Workspace, Microsoft 365, and many other applications\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Feature 6 -->\n <div class=\"group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in\" style=\"animation-delay: 0.5s;\">\n <div class=\"w-12 h-12 bg-pink-100 dark:bg-pink-900\u002F50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n <svg class=\"w-6 h-6 text-pink-600 dark:text-pink-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n Cross-Device Support\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n Works on mobile, tablet, and computer with real-time data sync across all devices\n <\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Pricing Section - Pricing Plans\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Pricing Section -->\n<section id=\"pricing\" class=\"py-20 bg-gray-50 dark:bg-gray-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <!-- Section Header -->\n <div class=\"text-center mb-16 animate-fade-in\">\n <span class=\"inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900\u002F50 text-primary-700 dark:text-primary-300 text-sm font-medium rounded-full mb-4\">\n Pricing Plans\n <\u002Fspan>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4\">\n Choose the Plan\n <span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">\n That's Right for You\n <\u002Fspan>\n <\u002Fh2>\n <p class=\"text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto\">\n Start free and upgrade as your team grows. All plans come with a 30-day guarantee\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Pricing Cards -->\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n <!-- Basic Plan -->\n <div class=\"bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 animate-scale-in\">\n <div class=\"text-center\">\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-4\">\n Basic\n <\u002Fh3>\n <div class=\"mb-6\">\n <span class=\"text-4xl font-bold text-gray-900 dark:text-white\">Free<\u002Fspan>\n <span class=\"text-gray-500 dark:text-gray-400\">\u002Fmonth<\u002Fspan>\n <\u002Fdiv>\n <p class=\"text-gray-600 dark:text-gray-300 mb-6\">\n Perfect for small teams and personal use\n <\u002Fp>\n <\u002Fdiv>\n \n <ul class=\"space-y-4 mb-8\">\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Up to 5 members<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">10 projects<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">1GB storage<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Basic reports<\u002Fspan>\n <\u002Fli>\n <\u002Ful>\n \n <button class=\"w-full py-3 px-6 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium rounded-xl transition-colors\">\n Start Free\n <\u002Fbutton>\n <\u002Fdiv>\n \n <!-- Pro Plan (Popular) -->\n <div class=\"bg-white dark:bg-gray-900 rounded-2xl border-2 border-primary-500 p-8 relative animate-scale-in\" style=\"animation-delay: 0.1s;\">\n <div class=\"absolute -top-4 left-1\u002F2 transform -translate-x-1\u002F2\">\n <span class=\"px-4 py-2 bg-primary-500 text-white text-sm font-medium rounded-full\">\n Recommended\n <\u002Fspan>\n <\u002Fdiv>\n \n <div class=\"text-center\">\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-4\">\n Pro\n <\u002Fh3>\n <div class=\"mb-6\">\n <span class=\"text-4xl font-bold text-gray-900 dark:text-white\">$29<\u002Fspan>\n <span class=\"text-gray-500 dark:text-gray-400\">\u002Fmonth<\u002Fspan>\n <\u002Fdiv>\n <p class=\"text-gray-600 dark:text-gray-300 mb-6\">\n Perfect for growing teams and businesses\n <\u002Fp>\n <\u002Fdiv>\n \n <ul class=\"space-y-4 mb-8\">\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Up to 25 members<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Unlimited projects<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">100GB storage<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Advanced reports + AI Insights<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">API integrations<\u002Fspan>\n <\u002Fli>\n <\u002Ful>\n \n <button class=\"w-full py-3 px-6 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl transition-colors\">\n Choose Pro Plan\n <\u002Fbutton>\n <\u002Fdiv>\n \n <!-- Enterprise Plan -->\n <div class=\"bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 animate-scale-in\" style=\"animation-delay: 0.2s;\">\n <div class=\"text-center\">\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white mb-4\">\n Enterprise\n <\u002Fh3>\n <div class=\"mb-6\">\n <span class=\"text-4xl font-bold text-gray-900 dark:text-white\">$99<\u002Fspan>\n <span class=\"text-gray-500 dark:text-gray-400\">\u002Fmonth<\u002Fspan>\n <\u002Fdiv>\n <p class=\"text-gray-600 dark:text-gray-300 mb-6\">\n Perfect for large organizations and enterprises\n <\u002Fp>\n <\u002Fdiv>\n \n <ul class=\"space-y-4 mb-8\">\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Unlimited members<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Unlimited projects<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">1TB storage<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">Custom AI Models<\u002Fspan>\n <\u002Fli>\n <li class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-500 mr-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n <span class=\"text-gray-600 dark:text-gray-300\">24\u002F7 Premium Support<\u002Fspan>\n <\u002Fli>\n <\u002Ful>\n \n <button class=\"w-full py-3 px-6 bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-100 text-white dark:text-gray-900 font-medium rounded-xl transition-colors\">\n Contact Sales\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Money Back Guarantee -->\n <div class=\"text-center mt-12\">\n <div class=\"inline-flex items-center px-4 py-2 bg-green-100 dark:bg-green-900\u002F50 text-green-700 dark:text-green-300 rounded-full\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"><\u002Fpath>\n <\u002Fsvg>\n 30-day money-back guarantee if not satisfied\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Testimonials Section - Customer Reviews\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Testimonials Section -->\n<section id=\"testimonials\" class=\"py-20 bg-white dark:bg-gray-900\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <!-- Section Header -->\n <div class=\"text-center mb-16 animate-fade-in\">\n <span class=\"inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900\u002F50 text-primary-700 dark:text-primary-300 text-sm font-medium rounded-full mb-4\">\n Customer Reviews\n <\u002Fspan>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4\">\n Our Customers\n <span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">\n Love Us\n <\u002Fspan>\n <\u002Fh2>\n <p class=\"text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto\">\n Hear from over 15,000 teams who chose TaskFlow Pro for task management\n <\u002Fp>\n <\u002Fdiv>\n \n <!-- Testimonials Grid -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n <!-- Testimonial 1 -->\n <div class=\"bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 animate-scale-in\">\n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-yellow-400\">\n ⭐⭐⭐⭐⭐\n <\u002Fdiv>\n <\u002Fdiv>\n <blockquote class=\"text-gray-600 dark:text-gray-300 mb-6 leading-relaxed\">\n \"TaskFlow Pro has helped our team manage projects much more efficiently. \n The AI in the system helps us plan work much better than before.\"\n <\u002Fblockquote>\n <div class=\"flex items-center\">\n <img class=\"w-12 h-12 rounded-full object-cover mr-4\" \n src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494790108755-2616b612b786?w=96&h=96&fit=crop&crop=face\" \n alt=\"Sarah Johnson\">\n <div>\n <div class=\"font-semibold text-gray-900 dark:text-white\">Sarah Johnson<\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">Product Manager, Tech Startup<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Testimonial 2 -->\n <div class=\"bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 animate-scale-in\" style=\"animation-delay: 0.1s;\">\n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-yellow-400\">\n ⭐⭐⭐⭐⭐\n <\u002Fdiv>\n <\u002Fdiv>\n <blockquote class=\"text-gray-600 dark:text-gray-300 mb-6 leading-relaxed\">\n \"TaskFlow Pro's reporting system provides very comprehensive data. \n It helps us make informed decisions in team management.\"\n <\u002Fblockquote>\n <div class=\"flex items-center\">\n <img class=\"w-12 h-12 rounded-full object-cover mr-4\" \n src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472099645785-5658abf4ff4e?w=96&h=96&fit=crop&crop=face\" \n alt=\"Michael Chen\">\n <div>\n <div class=\"font-semibold text-gray-900 dark:text-white\">Michael Chen<\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">CEO, Digital Agency<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Testimonial 3 -->\n <div class=\"bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 animate-scale-in\" style=\"animation-delay: 0.2s;\">\n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-yellow-400\">\n ⭐⭐⭐⭐⭐\n <\u002Fdiv>\n <\u002Fdiv>\n <blockquote class=\"text-gray-600 dark:text-gray-300 mb-6 leading-relaxed\">\n \"Using TaskFlow Pro increased our team efficiency by 40% \n and reduced meeting time by half.\"\n <\u002Fblockquote>\n <div class=\"flex items-center\">\n <img class=\"w-12 h-12 rounded-full object-cover mr-4\" \n src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1438761681033-6461ffad8d80?w=96&h=96&fit=crop&crop=face\" \n alt=\"Emma Wilson\">\n <div>\n <div class=\"font-semibold text-gray-900 dark:text-white\">Emma Wilson<\u002Fdiv>\n <div class=\"text-sm text-gray-500 dark:text-gray-400\">Director, Marketing Team<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Stats Section -->\n <div class=\"mt-16 grid grid-cols-2 md:grid-cols-4 gap-8\">\n <div class=\"text-center\">\n <div class=\"text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2\">\n 15K+\n <\u002Fdiv>\n <div class=\"text-gray-600 dark:text-gray-300\">Active Teams<\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-center\">\n <div class=\"text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2\">\n 2M+\n <\u002Fdiv>\n <div class=\"text-gray-600 dark:text-gray-300\">Tasks Managed<\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-center\">\n <div class=\"text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2\">\n 99.9%\n <\u002Fdiv>\n <div class=\"text-gray-600 dark:text-gray-300\">Uptime<\u002Fdiv>\n <\u002Fdiv>\n <div class=\"text-center\">\n <div class=\"text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2\">\n 4.9\u002F5\n <\u002Fdiv>\n <div class=\"text-gray-600 dark:text-gray-300\">Review Score<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>CTA Section - Call to Action\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- CTA Section -->\n<section class=\"py-20 bg-gradient-to-br from-primary-600 via-primary-500 to-primary-600 relative overflow-hidden\">\n <!-- Background Pattern -->\n <div class=\"absolute inset-0 opacity-10\">\n <div class=\"absolute top-10 left-10 w-20 h-20 bg-white rounded-full\"><\u002Fdiv>\n <div class=\"absolute top-40 right-20 w-16 h-16 bg-white rounded-full\"><\u002Fdiv>\n <div class=\"absolute bottom-20 left-1\u002F4 w-12 h-12 bg-white rounded-full\"><\u002Fdiv>\n <div class=\"absolute bottom-40 right-1\u002F3 w-24 h-24 bg-white rounded-full\"><\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10\">\n <div class=\"animate-fade-in\">\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6\">\n Ready to Transform\n <br>Your Task Management?\n <\u002Fh2>\n <p class=\"text-xl text-primary-100 mb-8 max-w-2xl mx-auto\">\n Join over 15,000 teams who chose TaskFlow Pro \n to boost their work efficiency\n <\u002Fp>\n \n <div class=\"flex flex-col sm:flex-row gap-4 justify-center items-center mb-8\">\n <button class=\"inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-50 text-primary-600 font-semibold rounded-xl text-lg transition-all duration-200 transform hover:scale-105 shadow-lg\">\n Start 14-Day Free Trial\n <svg class=\"ml-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fbutton>\n \n <button class=\"inline-flex items-center justify-center px-8 py-4 bg-transparent hover:bg-white\u002F10 text-white font-semibold rounded-xl text-lg border-2 border-white\u002F30 hover:border-white\u002F50 transition-all duration-200\">\n <svg class=\"mr-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M3 12a9 9 0 1018 0 9 9 0 00-18 0z\"><\u002Fpath>\n <\u002Fsvg>\n Watch Demo\n <\u002Fbutton>\n <\u002Fdiv>\n \n <div class=\"flex items-center justify-center space-x-6 text-primary-100\">\n <div class=\"flex items-center text-sm\">\n <svg class=\"w-4 h-4 mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n No credit card required\n <\u002Fdiv>\n <div class=\"flex items-center text-sm\">\n <svg class=\"w-4 h-4 mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n Cancel anytime\n <\u002Fdiv>\n <div class=\"flex items-center text-sm\">\n <svg class=\"w-4 h-4 mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\u002Fpath>\n <\u002Fsvg>\n 30-day guarantee\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Footer\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Footer -->\n<footer class=\"bg-gray-900 dark:bg-black text-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <!-- Company Info -->\n <div>\n <div class=\"flex items-center space-x-2 mb-4\">\n <div class=\"w-8 h-8 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg flex items-center justify-center\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\u002Fpath>\n <\u002Fsvg>\n <\u002Fdiv>\n <span class=\"text-xl font-bold\">TaskFlow Pro<\u002Fspan>\n <\u002Fdiv>\n <p class=\"text-gray-400 mb-4\">\n Professional task management with AI that helps boost your team's work efficiency\n <\u002Fp>\n <div class=\"flex space-x-4\">\n <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z\"\u002F>\n <\u002Fsvg>\n <\u002Fa>\n <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z\"\u002F>\n <\u002Fsvg>\n <\u002Fa>\n <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\u002F>\n <\u002Fsvg>\n <\u002Fa>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Product Links -->\n <div>\n <h4 class=\"font-semibold mb-4\">Product<\u002Fh4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Features<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Security<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Integrations<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Updates<\u002Fa><\u002Fli>\n <\u002Ful>\n <\u002Fdiv>\n \n <!-- Company Links -->\n <div>\n <h4 class=\"font-semibold mb-4\">Company<\u002Fh4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">About Us<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Team<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">News<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Careers<\u002Fa><\u002Fli>\n <\u002Ful>\n <\u002Fdiv>\n \n <!-- Support Links -->\n <div>\n <h4 class=\"font-semibold mb-4\">Support<\u002Fh4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Help Center<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Documentation<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Contact Us<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">System Status<\u002Fa><\u002Fli>\n <\u002Ful>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Bottom Footer -->\n <div class=\"border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center\">\n <div class=\"text-gray-400 text-sm mb-4 md:mb-0\">\n © 2025 TaskFlow Pro. All rights reserved.\n <\u002Fdiv>\n <div class=\"flex space-x-6 text-sm\">\n <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Privacy Policy<\u002Fa>\n <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Terms of Service<\u002Fa>\n <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors\">Cookies<\u002Fa>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Ffooter>\n\n<!-- JavaScript -->\n<script>\n\u002F\u002F Theme Toggle\nconst themeToggle = document.getElementById('theme-toggle');\nconst html = document.documentElement;\n\nthemeToggle.addEventListener('click', () => {\n html.classList.toggle('dark');\n localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');\n});\n\n\u002F\u002F Initialize theme\nif (localStorage.getItem('theme') === 'dark' || \n (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n html.classList.add('dark');\n}\n\n\u002F\u002F Mobile Menu Toggle\nconst mobileMenuButton = document.getElementById('mobile-menu-button');\nconst mobileMenu = document.getElementById('mobile-menu');\n\nmobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n});\n\n\u002F\u002F Smooth Scroll for Navigation Links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n});\n\n\u002F\u002F Animation on Scroll\nconst observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n};\n\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n}, observerOptions);\n\n\u002F\u002F Observe elements with animation classes\ndocument.querySelectorAll('.animate-fade-in, .animate-slide-up, .animate-scale-in').forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n el.style.transition = 'all 0.6s ease-out';\n observer.observe(el);\n});\n<\u002Fscript>\n\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Optimization\u003C\u002Fh2>\u003Ch3>Production Recommendations\u003C\u002Fh3>\u003Ch4>1. Optimize Tailwind Configuration\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n content: [\n '.\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx}',\n '.\u002Fcomponents\u002F**\u002F*.{js,jsx,ts,tsx}',\n ],\n theme: {\n extend: {\n \u002F\u002F Use only colors that are actually used\n colors: {\n primary: {\n 50: '#eff6ff',\n 500: '#3b82f6',\n 600: '#2563eb',\n }\n }\n },\n },\n plugins: [],\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>2. Minify and Compress\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\"># Use PostCSS plugins\nnpm install cssnano autoprefixer\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>3. Efficient CDN Usage\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Use CDN for Development only -->\n<!-- For Production, build and host locally -->\n<link rel=\"preload\" href=\"\u002Fcss\u002Fmain.css\" as=\"style\">\n<link rel=\"stylesheet\" href=\"\u002Fcss\u002Fmain.css\">\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>4. Lazy Loading Implementation\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Use loading=\"lazy\" for images -->\n<img loading=\"lazy\" src=\"image.jpg\" alt=\"Description\">\n\n<!-- Use Intersection Observer for animations -->\n<script>\nconst lazyImages = document.querySelectorAll('img[loading=\"lazy\"]');\nconst imageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.src = img.dataset.src;\n img.classList.remove('lazy');\n observer.unobserve(img);\n }\n });\n});\n\nlazyImages.forEach(img => imageObserver.observe(img));\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Best Practices Used in This Project\u003C\u002Fh2>\u003Ch3>1. Responsive Design\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Mobile-First Approach\u003C\u002Fstrong>: Start with mobile design, then expand\u003C\u002Fli>\u003Cli>\u003Cstrong>Multi-device Testing\u003C\u002Fstrong>: Test on various screen sizes\u003C\u002Fli>\u003Cli>\u003Cstrong>Container Queries\u003C\u002Fstrong>: Use when appropriate\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. Accessibility\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Alt Attributes\u003C\u002Fstrong>: Include for all images\u003C\u002Fli>\u003Cli>\u003Cstrong>Semantic HTML\u003C\u002Fstrong>: Use proper HTML elements\u003C\u002Fli>\u003Cli>\u003Cstrong>Keyboard Navigation\u003C\u002Fstrong>: Support keyboard users\u003C\u002Fli>\u003Cli>\u003Cstrong>Color Contrast\u003C\u002Fstrong>: Ensure sufficient contrast ratios\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>3. Performance\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Lazy Loading\u003C\u002Fstrong>: For images and heavy content\u003C\u002Fli>\u003Cli>\u003Cstrong>JavaScript Minimization\u003C\u002Fstrong>: Keep JavaScript lean\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS Transitions\u003C\u002Fstrong>: Use instead of JavaScript animations\u003C\u002Fli>\u003Cli>\u003Cstrong>Tailwind Purging\u003C\u002Fstrong>: Optimize unused CSS\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>4. SEO\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Complete Meta Tags\u003C\u002Fstrong>: Title, description, etc.\u003C\u002Fli>\u003Cli>\u003Cstrong>Structured Data\u003C\u002Fstrong>: When applicable\u003C\u002Fli>\u003Cli>\u003Cstrong>Fast Loading\u003C\u002Fstrong>: Optimize for speed\u003C\u002Fli>\u003Cli>\u003Cstrong>Mobile-Friendly\u003C\u002Fstrong>: Responsive design\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>5. User Experience\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Loading States\u003C\u002Fstrong>: Show progress and feedback\u003C\u002Fli>\u003Cli>\u003Cstrong>Clear Navigation\u003C\u002Fstrong>: Easy to understand\u003C\u002Fli>\u003Cli>\u003Cstrong>Consistent Design\u003C\u002Fstrong>: Follow design system\u003C\u002Fli>\u003Cli>\u003Cstrong>Error Handling\u003C\u002Fstrong>: Provide helpful feedback\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Deployment and Maintenance\u003C\u002Fh2>\u003Ch3>Deployment Steps\u003C\u002Fh3>\u003Ch4>1. Production Build\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\"># Install dependencies\nnpm install\n\n# Build CSS\nnpx tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css --minify\n\n# Optimize HTML\n# - Change from CDN to local CSS file\n# - Remove tailwind.config from HTML\n# - Add analytics tracking codes\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>2. Image Optimization\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\"># Use tools to optimize images\nnpm install -g imagemin-cli\n\nimagemin images\u002F* --out-dir=images\u002Foptimized\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>3. Server Configuration\u003C\u002Fh4>\u003Cpre>\u003Ccode class=\"language-plaintext language-nginx\"># nginx configuration\nserver {\n listen 80;\n server_name yourdomain.com;\n \n location \u002F {\n root \u002Fvar\u002Fwww\u002Fhtml;\n index index.html;\n try_files $uri $uri\u002F =404;\n }\n \n location ~* \\.(css|js|png|jpg|jpeg|gif|ico|svg)$ {\n expires 1y;\n add_header Cache-Control \"public, immutable\";\n }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Monitoring and Analytics\u003C\u002Fh2>\u003Ch3>1. Performance Monitoring\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Google PageSpeed Insights -->\n<!-- GTmetrix -->\n<!-- WebPageTest.org -->\n\n<!-- Core Web Vitals -->\n<script>\nnew PerformanceObserver((entryList) => {\n for (const entry of entryList.getEntries()) {\n console.log('LCP candidate:', entry.startTime, entry);\n }\n}).observe({type: 'largest-contentful-paint', buffered: true});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. User Analytics\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Google Analytics 4 -->\n<script async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=GA_MEASUREMENT_ID\"><\u002Fscript>\n<script>\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'GA_MEASUREMENT_ID');\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Project Summary\u003C\u002Fh2>\u003Cp>In this TaskFlow Pro Landing Page project, we've applied all the knowledge from our \"10 Episodes to Tailwind CSS Mastery\" series:\u003C\u002Fp>\u003Ch3>🎨 Design System:\u003C\u002Fh3>\u003Cul>\u003Cli>Consistent color palette\u003C\u002Fli>\u003Cli>Clear typography hierarchy\u003C\u002Fli>\u003Cli>Systematic spacing system\u003C\u002Fli>\u003Cli>Reusable component library\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>📱 Responsive Design:\u003C\u002Fh3>\u003Cul>\u003Cli>Mobile-First approach\u003C\u002Fli>\u003Cli>Appropriate breakpoints\u003C\u002Fli>\u003Cli>Multi-device testing\u003C\u002Fli>\u003Cli>Touch-friendly interface\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>⚡ Performance:\u003C\u002Fh3>\u003Cul>\u003Cli>Small CSS file size\u003C\u002Fli>\u003Cli>Lazy loading images\u003C\u002Fli>\u003Cli>Smooth animations\u003C\u002Fli>\u003Cli>Fast loading times\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🌙 Dark Mode:\u003C\u002Fh3>\u003Cul>\u003Cli>Dark mode system support\u003C\u002Fli>\u003Cli>Automatic detection\u003C\u002Fli>\u003Cli>Smooth transitions\u003C\u002Fli>\u003Cli>Consistent styling\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>💫 Interactions:\u003C\u002Fh3>\u003Cul>\u003Cli>Hover effects\u003C\u002Fli>\u003Cli>Click animations\u003C\u002Fli>\u003Cli>Scroll-triggered animations\u003C\u002Fli>\u003Cli>Micro-interactions\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>♿ Accessibility:\u003C\u002Fh3>\u003Cul>\u003Cli>Semantic HTML\u003C\u002Fli>\u003Cli>Keyboard navigation\u003C\u002Fli>\u003Cli>Screen reader support\u003C\u002Fli>\u003Cli>High contrast ratios\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🔧 Best Practices:\u003C\u002Fh3>\u003Cul>\u003Cli>Clean code structure\u003C\u002Fli>\u003Cli>Maintainable CSS\u003C\u002Fli>\u003Cli>SEO optimization\u003C\u002Fli>\u003Cli>Cross-browser compatibility\u003C\u002Fli>\u003C\u002Ful>\u003Chr>\u003Ch3>Conclusion\u003C\u002Fh3>\u003Cp>This marks the end of our \"10 Episodes to Tailwind CSS Mastery\" series! 🎉\u003C\u002Fp>\u003Cp>You're now ready to:\u003C\u002Fp>\u003Cp>✅ \u003Cstrong>Build beautiful and efficient websites\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>✅ \u003Cstrong>Manage design systems systematically\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>✅ \u003Cstrong>Use Tailwind CSS professionally\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>✅ \u003Cstrong>Solve problems and optimize performance\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>✅ \u003Cstrong>Create real projects independently\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch3>Next Steps:\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cstrong>Keep Practicing\u003C\u002Fstrong>: Try building your own projects with new concepts\u003C\u002Fli>\u003Cli>\u003Cstrong>Stay Updated\u003C\u002Fstrong>: Tailwind CSS continues to evolve\u003C\u002Fli>\u003Cli>\u003Cstrong>Join Communities\u003C\u002Fstrong>: Share your work and learn from others\u003C\u002Fli>\u003Cli>\u003Cstrong>Teach Others\u003C\u002Fstrong>: Pass on your knowledge to fellow developers\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Thank you for following along with this series! 🚀\u003C\u002Fp>\u003Cp>We hope this series has truly helped you become a Tailwind CSS professional and create impressive projects.\u003C\u002Fp>\u003Cp>See you in our next series! ✨\u003C\u002Fp>\u003Ch3>Read more\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fen\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Eps That Will Make You a Pro Tailwind CSS Overnight\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","20_11zon_ckij7hlw5x.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fqljbfkavuxe2y3z\u002F20_11zon_ckij7hlw5x.webp","2026-03-04 08:26:38.239Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:26:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:37.290Z","0tdk25xx3w28f0v","responsive web design","2026-04-10 16:07:31.800Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:35.769Z","hp7u7nbteeiubmv","Dark Mode CSS","2026-04-10 16:07:31.407Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:37.657Z","g3g1c75a0fxdylz","landing page tutorial","2026-04-10 16:07:31.972Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"en","pbc_1989393366","locales","2026-01-22 11:00:02.726Z","twemoji:flag-united-states","qv9c1llfov2d88z",false,"English","2026-04-10 15:42:46.825Z",{"category":49,"collectionId":50,"collectionName":51,"created":13,"expand":52,"id":65,"slug":66,"updated":13,"views":67},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":21,"priority":61,"publish_at":62,"scheduled_at":13,"status":63,"updated":64,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:26:33.946Z","vzv2yduhfk_hs035tvsww.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fi22e96fj41lsws7\u002Fvzv2yduhfk_hs035tvsww.webp",{"en":21,"th":21},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","uognb4k6yyjzol6","tailwind-css-complete-project-tutorial-final",235,"qljbfkavuxe2y3z",[20,25,30,35],"2025-07-25 05:27:49.980Z","The final episode! Create a complete TaskFlow Pro Landing Page project covering Dark Mode, Responsive Design, Animations, Performance Optimization, and all Best Practices. Master real-world Tailwind CSS development.","2026-05-12 01:13:46.302Z",1,{"th":66,"en":66}]