MichaelMassamba/wordpress-wizardry-wizards
0
1<!DOCTYPE html>2<html lang="en" class="light">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>WPBreeze - WordPress Theme Tutorial</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: {18 50: '#eef2ff',19 100: '#e0e7ff',20 200: '#c7d2fe',21 300: '#a5b4fc',22 400: '#818cf8',23 500: '#6366f1',24 600: '#4f46e5',25 700: '#4338ca',26 800: '#3730a3',27 900: '#312e81',28 },29 secondary: {30 50: '#fdf2f8',31 100: '#fce7f3',32 200: '#fbcfe8',33 300: '#f9a8d4',34 400: '#f472b6',35 500: '#ec4899',36 600: '#db2777',37 700: '#be185d',38 800: '#9d174d',39 900: '#831843',40 }41 }42 }43 }44 }45 </script>46 <style>47 .gradient-text {48 background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);49 -webkit-background-clip: text;50 background-clip: text;51 -webkit-text-fill-color: transparent;52 }53 .theme-transition * {54 transition: background-color 0.3s ease, color 0.3s ease;55 }56 </style>57</head>58<body class="theme-transition bg-gray-50 dark:bg-gray-900 min-h-screen">59 <!-- Navigation -->60 <nav class="bg-white dark:bg-gray-800 shadow-sm">61 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">62 <div class="flex justify-between h-16">63 <div class="flex items-center">64 <a href="#" class="text-xl font-bold gradient-text">WPBreeze</a>65 </div>66 <div class="hidden md:flex items-center space-x-8">67 <a href="#" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Home</a>68 <a href="tutorial.html" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Tutorial</a>69 <a href="resources.html" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Resources</a>70 <a href="showcase.html" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Showcase</a>71</div>72 <div class="flex items-center">73 <button id="theme-toggle" class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-primary-500">74 <i data-feather="moon" class="hidden dark:block text-gray-300"></i>75 <i data-feather="sun" class="dark:hidden text-gray-700"></i>76 </button>77 <button class="md:hidden ml-4 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-primary-500">78 <i data-feather="menu"></i>79 </button>80 </div>81 </div>82 </div>83 </nav>84 85 <!-- Hero Section -->86 <section class="py-20 px-4 sm:px-6 lg:px-8">87 <div class="max-w-7xl mx-auto text-center">88 <h1 class="text-4xl md:text-6xl font-bold mb-6">89 <span class="gradient-text block">Build Your Dream WordPress Theme</span>90 <span class="text-gray-800 dark:text-gray-200">With Modern Tools</span>91 </h1>92 <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-10">93 Learn how to create custom WordPress themes from scratch using TailwindCSS, modern JavaScript, and best practices for performance and accessibility.94 </p>95 <div class="flex justify-center space-x-4">96 <a href="#" class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-md transition duration-300">97 Start Tutorial98 </a>99 <a href="#" class="px-6 py-3 border border-gray-300 dark:border-gray-600 hover:border-primary-500 text-gray-700 dark:text-gray-300 font-medium rounded-lg shadow-sm transition duration-300 hover:text-primary-600 dark:hover:text-primary-400">100 View Examples101 </a>102 </div>103 </div>104 </section>105 106 <!-- Tutorial Preview -->107 <section class="py-16 bg-gray-100 dark:bg-gray-800">108 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">109 <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">What You'll Learn</h2>110 111 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">112 <!-- Card 1 -->113 <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">114 <div class="h-48 bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">115 <i data-feather="code" class="w-16 h-16 text-white"></i>116 </div>117 <div class="p-6">118 <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Theme Structure</h3>119 <p class="text-gray-600 dark:text-gray-300">120 Understand the essential WordPress theme files and how they work together.121 </p>122 </div>123 </div>124 125 <!-- Card 2 -->126 <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">127 <div class="h-48 bg-gradient-to-r from-secondary-500 to-primary-500 flex items-center justify-center">128 <i data-feather="layers" class="w-16 h-16 text-white"></i>129 </div>130 <div class="p-6">131 <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Template Hierarchy</h3>132 <p class="text-gray-600 dark:text-gray-300">133 Master WordPress template hierarchy to create flexible theme layouts.134 </p>135 </div>136 </div>137 138 <!-- Card 3 -->139 <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">140 <div class="h-48 bg141</body>142</html>