[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-tailwind-css-real-project-taskflow-pro-ep10-all--*":3,"academy-blog-translations-sy3knwijf29g13d":73},{"data":4,"page":72,"perPage":72,"totalItems":72,"totalPages":72},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":67,"keywords":68,"locale":44,"published_at":62,"scheduled_at":13,"school_blog":65,"short_description":69,"slug":70,"status":63,"title":6,"updated":71,"updated_by":13,"views":66},"EP 10: ทดสอบฝีมือ: สร้างเว็บไซต์สวยๆ ด้วย Tailwind CSS แบบมืออาชีพ","sclblg987654321","school_blog_translations","\u003Cp>มาถึงตอนสุดท้ายของซีรีย์แล้ว! หลังจากที่เราเรียนรู้ทุกเทคนิคของ Tailwind CSS มาแล้ว ถึงเวลาที่จะนำความรู้ทั้งหมดมาใช้สร้างโปรเจ็กต์จริงกัน\u003C\u002Fp>\u003Cp>ในตอนนี้เราจะสร้างเว็บไซต์ Landing Page สำหรับ SaaS ที่สมบูรณ์แบบ ตั้งแต่การวางแผน การออกแบบ ไปจนถึงการเขียนโค้ดและการปรับแต่งให้มีประสิทธิภาพสูงสุด ซึ่งจะรวมทุกสิ่งที่เราเรียนรู้มาในซีรีย์นี้\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>การวางแผนโปรเจ็กต์\u003C\u002Fh2>\u003Ch3>กำหนดเป้าหมายของโปรเจ็กต์\u003C\u002Fh3>\u003Cp>\u003Cstrong>โปรเจ็กต์ที่เราจะสร้าง: TaskFlow Pro Landing Page\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>เว็บไซต์แนะนำแอป Task Management\u003C\u002Fli>\u003Cli>มีระบบ Dark\u002FLight Mode\u003C\u002Fli>\u003Cli>รองรับ Mobile และ Desktop\u003C\u002Fli>\u003Cli>มี Animation และ Interactive Elements\u003C\u002Fli>\u003Cli>Performance ที่เหมาะสม\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>โครงสร้างหน้าเว็บไซต์\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cstrong>Header + Navigation\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Hero Section\u003C\u002Fstrong> - แนะนำผลิตภัณฑ์\u003C\u002Fli>\u003Cli>\u003Cstrong>Features Section\u003C\u002Fstrong> - ฟีเจอร์หลัก\u003C\u002Fli>\u003Cli>\u003Cstrong>Pricing Section\u003C\u002Fstrong> - แผนราคา\u003C\u002Fli>\u003Cli>\u003Cstrong>Testimonials\u003C\u002Fstrong> - รีวิวลูกค้า\u003C\u002Fli>\u003Cli>\u003Cstrong>CTA Section\u003C\u002Fstrong> - เรียกให้ดำเนินการ\u003C\u002Fli>\u003Cli>\u003Cstrong>Footer\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Ch2>การตั้งค่าโปรเจ็กต์\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"th\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>TaskFlow Pro - จัดการงานอย่างมืออาชีพ<\u002Ftitle>\n <meta name=\"description\" content=\"TaskFlow Pro ช่วยให้คุณจัดการงานได้อย่างมีประสิทธิภาพ ด้วยเครื่องมือที่ทันสมัยและใช้งานง่าย\">\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>\u003Cp> \u003C\u002Fp>\u003Ch2>สร้าง Header และ 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 ฟีเจอร์\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 ราคา\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 รีวิว\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 เข้าสู่ระบบ\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 เริ่มใช้ฟรี\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 ฟีเจอร์\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 ราคา\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 รีวิว\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 เข้าสู่ระบบ\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 เริ่มใช้ฟรี\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fnav>\n<\u002Fheader>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Hero Section - การแนะนำผลิตภัณฑ์\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 🚀 ใหม่! 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 จัดการงานให้\n <span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">\n เป็นระบบ\n <\u002Fspan>\n <br>แบบมืออาชีพ\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 ช่วยให้ทีมของคุณจัดการโปรเจ็กต์ได้อย่างมีประสิทธิภาพ \n ด้วย AI ที่ช่วยวิเคราะห์และปรับปรุงขั้นตอนการทำงานให้ดีขึ้นเรื่อยๆ\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 เริ่มใช้งานฟรี\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 ชมการสาธิต\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\">ทีมที่ใช้งาน<\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\">โปรเจ็กต์ปัจจุบัน<\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 โปรเจ็กต์\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\">กำลังดำเนินการ<\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\">รอการอนุมัติ<\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\">เสร็จสิ้นแล้ว<\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>\u003Cp> \u003C\u002Fp>\u003Ch2>Features Section - ฟีเจอร์หลัก\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-plaintext\"><!-- 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 ฟีเจอร์เด่น\n <\u002Fspan>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4\">\n ทุกอย่างที่คุณต้องการ\n <span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">\n ในที่เดียว\n <\u002Fspan>\n <\u002Fh2>\n <p class=\"text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto\">\n TaskFlow Pro มาพร้อมกับเครื่องมือครบครันที่จะช่วยให้ทีมของคุณทำงานได้อย่างมีประสิทธิภาพสูงสุด\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 จัดการงานอัจฉริยะ\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n AI ช่วยจัดลำดับความสำคัญของงาน วิเคราะห์ขั้นตอนการทำงาน และแนะนำวิธีการปรับปรุงประสิทธิภาพ\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 ทำงานร่วมกันแบบเรียลไทม์\n <\u002Fh3>\n <p class=\"text-gray-600 dark:text-gray-300 leading-relaxed\">\n แชร์งาน แสดงความคิดเห็น และติดตามความคืบหน้าแบบเรียลไทม์ ทำให้ทีมประสานงานกันได้อย่างมีประสิทธิภาพ\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\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\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>\u003Cp> \u003C\u002Fp>\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>\u003Cp> \u003C\u002Fp>\u003Ch2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">การปรับแต่ง Performance\u003C\u002Fh2>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">ข้อแนะนำสำหรับ Production\u003C\u002Fh3>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">1. ปรับแต่ง Tailwind Configuration\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv class=\"sticky opacity-0 group-hover\u002Fcopy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\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}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">2. การ Minify และ Compress\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\"># ใช้ PostCSS plugins\nnpm install cssnano autoprefixer\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">3. การใช้ CDN อย่างมีประสิทธิภาพ\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv>\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\">\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">4. การ Lazy Loading\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\"><!-- ใช้ loading=\"lazy\" สำหรับรูปภาพ --> <img loading=\"lazy\" src=\"image.jpg\" alt=\"Description\"> <!-- ใช้ Intersection Observer สำหรับ Animation --> <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 lazyImages.forEach(img => imageObserver.observe(img));\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\"> \u003C\u002Fh2>\u003Ch2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">Best Practices ที่ใช้ในโปรเจ็กต์\u003C\u002Fh2>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">1. Responsive Design\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ใช้ Mobile-First Approach\u003C\u002Fstrong>: เริ่มจาก mobile แล้วขยายไป desktop\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ทดสอบในหน้าจอขนาดต่างๆ\u003C\u002Fstrong>: รองรับทุกอุปกรณ์\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ใช้ Container Queries เมื่อเหมาะสม\u003C\u002Fstrong>: สำหรับ component ที่ซับซ้อน\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">2. Accessibility\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ใส่ alt attributes ในรูปภาพ\u003C\u002Fstrong>: สำหรับ screen readers\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ใช้ semantic HTML\u003C\u002Fstrong>: ช่วยให้เข้าใจโครงสร้างได้ดี\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>รองรับ keyboard navigation\u003C\u002Fstrong>: สำหรับผู้ใช้ที่ไม่สามารถใช้เมาส์ได้\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>มี color contrast ที่เพียงพอ\u003C\u002Fstrong>: เพื่อการมองเห็นที่ดี\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">3. Performance\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ใช้ loading=\"lazy\" สำหรับรูปภาพ\u003C\u002Fstrong>: ลดเวลาโหลดหน้าแรก\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Minimize JavaScript\u003C\u002Fstrong>: ใช้ JS เฉพาะที่จำเป็น\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ใช้ CSS transitions แทน JavaScript animation\u003C\u002Fstrong>: เร็วกว่าและนุ่มนวลกว่า\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ปรับแต่ง Tailwind purging\u003C\u002Fstrong>: ลบ CSS ที่ไม่ใช้ออก\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">4. SEO\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Meta tags ที่ครบถ้วน\u003C\u002Fstrong>: title, description, keywords\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Structured data\u003C\u002Fstrong>: ช่วยให้ search engine เข้าใจเนื้อหา\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Fast loading speed\u003C\u002Fstrong>: ส่งผลต่อการ ranking\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Mobile-friendly design\u003C\u002Fstrong>: Google ให้ความสำคัญกับ mobile-first\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">5. User Experience\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Loading states และ animations\u003C\u002Fstrong>: ทำให้รู้สึกว่าระบบตอบสนอง\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Clear navigation\u003C\u002Fstrong>: ง่ายต่อการใช้งาน\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Consistent design system\u003C\u002Fstrong>: สร้างความเชื่อมั่น\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>Error states และ feedback\u003C\u002Fstrong>: ช่วยผู้ใช้เข้าใจสถานการณ์\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">การ Deploy และ Maintenance\u003C\u002Fh2>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">ขั้นตอนการ Deploy\u003C\u002Fh3>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">1. การ Build สำหรับ Production\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv>\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>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">2. การ Optimize รูปภาพ\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv class=\"sticky opacity-0 group-hover\u002Fcopy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\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\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch4 class=\"text-base font-bold text-text-100 mt-1\">3. การตั้งค่า Server\u003C\u002Fh4>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv>\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}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp> \u003C\u002Fp>\u003Ch2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">การ Monitor และ Analytics\u003C\u002Fh2>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">1. Performance Monitoring\u003C\u002Fh3>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv class=\"sticky opacity-0 group-hover\u002Fcopy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\u003Cdiv class=\"absolute right-0 h-8 px-2 items-center inline-flex\"> \u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\"><!-- Google PageSpeed Insights --> <!-- GTmetrix --> <!-- WebPageTest.org --> <!-- Core Web Vitals --> <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>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">2. User Analytics\u003C\u002Fh3>\u003Cdiv class=\"relative group\u002Fcopy bg-bg-000\u002F50 border-0.5 border-border-400 rounded-lg\">\u003Cdiv class=\"sticky opacity-0 group-hover\u002Fcopy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\u003Cdiv class=\"absolute right-0 h-8 px-2 items-center inline-flex\"> \u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\"><!-- Google Analytics 4 --> <script async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=GA_MEASUREMENT_ID\"><\u002Fscript> <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>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp> \u003C\u002Fp>\u003Ch2>สรุปโปรเจ็กต์\u003C\u002Fh2>\u003Cp class=\"whitespace-normal break-words\">ในโปรเจ็กต์ TaskFlow Pro Landing Page นี้ เราได้นำเอาความรู้ทั้งหมดจากซีรีย์ \"10 EP สู่การเป็นมือโปร Tailwind CSS\" มาใช้งานครบถ้วน:\u003C\u002Fp>\u003Ch3>🎨 Design System:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">Color palette ที่สอดคล้องกัน\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Typography hierarchy ที่ชัดเจน\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Spacing system ที่เป็นระบบ\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Component library ที่ใช้ซ้ำได้\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>📱 Responsive Design:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">Mobile-First approach\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Breakpoints ที่เหมาะสม\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">ทดสอบในทุกขนาดหน้าจอ\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Touch-friendly interface\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>⚡ Performance:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">CSS file size ที่เล็ก\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Lazy loading images\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Smooth animations\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Fast loading time\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🌙 Dark Mode:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">Support ระบบ dark mode\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Automatic detection\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Smooth transitions\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Consistent styling\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>💫 Interactions:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">Hover effects\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Click animations\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Scroll-triggered animations\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Micro-interactions\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>♿ Accessibility:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">Semantic HTML\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Keyboard navigation\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Screen reader support\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">High contrast ratios\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🔧 Best Practices:\u003C\u002Fh3>\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">Clean code structure\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Maintainable CSS\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">SEO optimization\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">Cross-browser compatibility\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>บทสรุป\u003C\u002Fh3>\u003Cp class=\"whitespace-normal break-words\">นี่คือจุดสิ้นสุดของซีรีย์ \"10 EP สู่การเป็นมือโปร Tailwind CSS\" 🎉\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">ตอนนี้คุณพร้อมแล้วที่จะ:\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">✅ \u003Cstrong>สร้างเว็บไซต์ที่สวยงามและมีประสิทธิภาพ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">✅ \u003Cstrong>จัดการ Design System อย่างเป็นระบบ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">✅ \u003Cstrong>ใช้ Tailwind CSS แบบมืออาชีพ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">✅ \u003Cstrong>แก้ไขปัญหาและ optimize performance\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">✅ \u003Cstrong>สร้างโปรเจ็กต์จริงได้ด้วยตัวเอง\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch3 class=\"text-lg font-bold text-text-100 mt-1 -mb-1.5\">ขั้นตอนต่อไป:\u003C\u002Fh3>\u003Col class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal space-y-1.5 pl-7\">\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ฝึกฝนต่อ\u003C\u002Fstrong>: ลองสร้างโปรเจ็กต์ของตัวเองด้วยแนวคิดใหม่ๆ\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>ติดตามอัปเดต\u003C\u002Fstrong>: Tailwind CSS มีการพัฒนาอย่างต่อเนื่อง\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>เข้าร่วมชุมชน\u003C\u002Fstrong>: แชร์ผลงานและเรียนรู้จากคนอื่น\u003C\u002Fli>\u003Cli class=\"whitespace-normal break-words\">\u003Cstrong>สอนต่อ\u003C\u002Fstrong>: ถ่ายทอดความรู้ให้กับคนอื่น\u003C\u002Fli>\u003C\u002Fol>\u003Cp class=\"whitespace-normal break-words\">ขอบคุณที่ติดตาม Superdev School! 🚀\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">หวังว่าซีรีย์นี้จะช่วยให้คุณกลายเป็นมือโปร Tailwind CSS ได้จริงๆ และสร้างผลงานที่น่าประทับใจออกมา\u003C\u002Fp>\u003Cp class=\"whitespace-normal break-words\">พบกันใหม่ในซีรีย์หน้า! ✨\u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\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 class=\"\" data-start=\"5978\" data-end=\"6095\">\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>","19_11zon_hgjoj15atc.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fy2hyqg8nltsrl6g\u002F19_11zon_hgjoj15atc.webp","2026-03-04 08:26:37.065Z","",{"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:35.769Z","hp7u7nbteeiubmv","Dark Mode CSS","2026-04-10 16:07:31.407Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:36.163Z","hwfo0itcn5mxejb","responsive design","2026-04-10 16:07:31.508Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:36.529Z","hb9p78x43pu8nwo","landing page design","2026-04-10 16:07:31.600Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":49,"collectionId":50,"collectionName":51,"expand":52,"id":65,"views":66},"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","sy3knwijf29g13d",289,"y2hyqg8nltsrl6g",[20,25,30,35],"ตอนสุดท้ายของซีรีย์! สร้างโปรเจ็กต์จริง TaskFlow Pro Landing Page ที่สมบูรณ์แบบ ครอบคลุม Dark Mode, Responsive Design, Animation, Performance Optimization และ Best Practices ทั้งหมด","tailwind-css-real-project-taskflow-pro-ep10","2026-04-25 02:47:17.410Z",1,{"th":70}]