dave-dev/css-alchemy-wizardry
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CSS Alchemy Wizardry - AI-Powered CSS Generator</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 src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap');14 :root {15 --primary: #6366f1;16 --secondary: #a855f7;17 }18 .theme-dark {19 --bg-primary: #0f172a;20 --bg-secondary: #1e293b;21 --text-primary: #f8fafc;22 --text-secondary: #94a3b8;23 }24 .theme-light {25 --bg-primary: #ffffff;26 --bg-secondary: #f1f5f9;27 --text-primary: #0f172a;28 --text-secondary: #64748b;29 }30 </style>31</head>32<body class="theme-light font-['Space_Grotesk'] min-h-screen transition-colors duration-300">33 <div id="vanta-bg" class="fixed inset-0 -z-10"></div>34 <div class="max-w-7xl mx-auto px-6 py-12">35 <!-- Header -->36 <header class="flex justify-between items-center mb-16">37 <div class="flex items-center gap-2">38 <i data-feather="wand" class="text-purple-500 w-8 h-8"></i>39 <h1 class="text-3xl font-bold bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">CSS Alchemy Wizardry</h1>40 </div>41 <nav class="hidden md:flex gap-8">42 <a href="#" class="hover:text-purple-500 transition">Features</a>43 <a href="#" class="hover:text-purple-500 transition">Examples</a>44 <a href="#" class="hover:text-purple-500 transition">Pricing</a>45 </nav>46 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">47 <i data-feather="moon" class="hidden dark:block"></i>48 <i data-feather="sun" class="dark:hidden"></i>49 </button>50 </header>51 52 <!-- Hero Section -->53 <section class="mb-24">54 <div class="grid md:grid-cols-2 gap-12 items-center">55 <div>56 <h2 class="text-5xl font-bold mb-6 leading-tight">AI-Powered CSS Magic at Your Fingertips</h2>57 <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">Generate stunning, production-ready CSS themes with the power of AI. Perfect for designers, developers, and creative minds.</p>58 <div class="flex gap-4">59 <button onclick="window.location.href='/generator.html'" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all">Start Generating</button>60<button class="border-2 border-gray-300 dark:border-gray-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition">Watch Demo</button>61 </div>62 </div>63 <div class="relative">64 <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden border border-gray-200 dark:border-gray-700">65 <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center">66 <div class="flex gap-2">67 <div class="w-3 h-3 rounded-full bg-red-500"></div>68 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>69 <div class="w-3 h-3 rounded-full bg-green-500"></div>70 </div>71 <div class="flex-1 text-center text-sm font-mono">theme-generator.css</div>72 </div>73 <div class="p-6 font-mono text-sm">74 <div class="text-purple-500">/* Generated with CSS Alchemy Wizardry */</div>75 <div class="text-blue-500">:root {</div>76 <div class="ml-4 text-green-500">--primary: <span class="text-yellow-500">#6366f1</span>;</div>77 <div class="ml-4 text-green-500">--secondary: <span class="text-yellow-500">#a855f7</span>;</div>78 <div class="ml-4 text-green-500">--success: <span class="text-yellow-500">#10b981</span>;</div>79 <div class="text-blue-500">}</div>80 <div class="mt-2 text-blue-500">.btn {</div>81 <div class="ml-4 text-green-500">@apply px-4 py-2 rounded-lg;</div>82 <div class="ml-4 text-green-500">@apply bg-gradient-to-r from-primary to-secondary;</div>83 <div class="text-blue-500">}</div>84 </div>85 </div>86 <div class="absolute -bottom-6 -right-6 bg-purple-500/10 backdrop-blur-md w-32 h-32 rounded-full -z-10"></div>87 </div>88 </div>89 </section>90 91 <!-- Features Section -->92 <section class="mb-24">93 <h2 class="text-3xl font-bold mb-12 text-center">Magical Features</h2>94 <div class="grid md:grid-cols-3 gap-8">95 <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 hover:border-purple-500 transition">96 <div class="w-12 h-12 rounded-lg bg-purple-500/10 text-purple-500 flex items-center justify-center mb-4">97 <i data-feather="cpu" class="w-6 h-6"></i>98 </div>99 <h3 class="text-xl font-bold mb-2">AI-Powered Generation</h3>100 <p class="text-gray-600 dark:text-gray-300">Our advanced AI analyzes your preferences to generate perfectly balanced CSS themes.</p>101 </div>102 <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 hover:border-purple-500 transition">103 <div class="w-12 h-12 rounded-lg bg-purple-500/10 text-purple-500 flex items-center justify-center mb-4">104 <i data-feather="eye" class="w-6 h-6"></i>105 </div>106 <h3 class="text-xl font-bold mb-2">Live Preview</h3>107 <p class="text-gray-600 dark:text-gray-300">See your theme applied to sample components in real-time as you customize.</p>108 </div>109 <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 hover:border-purple-500 transition">110 <div class="w-12 h-12 rounded-lg bg-purple-500/10 text-purple-500 flex items-center justify-center mb-4">111 <i data-feather="download" class="w-6 h-6"></i>112 </div>113 <h3 class="text-xl font-bold mb-2">Export Options</h3>114 <p class="text-gray-600 dark:text-gray-300">Download your theme as CSS, SCSS, or even as Tailwind/Bootstrap configs.</p>115 </div>116 </div>117 </section>118 119 <!-- CTA Section -->120 <section class="text-center mb-24">121 <h2 class="text-3xl font-bold mb-6">Ready to Brew Some CSS Magic?</h2>122 <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">Join thousands of designers and developers who are creating beautiful styles with AI assistance.</p>123 <button onclick="window.location.href='/generator.html'" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-4 rounded-lg font-medium hover:shadow-lg transition-all text-lg">Start Your Free Trial</button>124</section>125 126 <!-- Footer -->127 <footer class="border-t border-gray-200 dark:border-gray-700 pt-12">128 <div class="grid md:grid-cols-4 gap-8">129 <div>130 <div class="flex items-center gap-2 mb-4">131 <i data-feather="wand" class="text-purple-500 w-6 h-6"></i>132 <span class="font-bold">CSS Alchemy Wizardry</span>133 </div>134 <p class="text-gray-600 dark:text-gray-300">Brewing beautiful styles with AI magic since 2023.</p>135 </div>136 <div>137 <h4 class="font-bold mb-4">Product</h4>138 <ul class="space-y-2">139 <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition">Features</a></li>140 <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition">Pricing</a></li>141 <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition">Examples</a></li>142 </ul>143 </div>144 <div>145 <h4 class="font-bold mb-4">Resources</h4>146 <ul class="space-y-2">147 <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition">Documentation</a></li>148 <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition">Blog</a></li>149 <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition">Support</a></li>150 </ul>151 </div>152 <div>153 <h4 class="font-bold mb-4">Connect</h4>154 <div class="flex gap-4">155 <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition"><i data-feather="twitter"></i></a>156 <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition"><i data-feather="github"></i></a>157 <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition"><i data-feather="instagram"></i></a>158 <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-500 transition"><i data-feather="linkedin"></i></a>159 </div>160 </div>161 </div>162 <div class="mt-12 text-center text-gray-500 dark:text-gray-400">163 <p>© 2023 CSS Alchemy Wizardry. All rights reserved.</p>164 </div>165 </footer>166 </div>167 168 <script>169 // Initialize Vanta.js background170 VANTA.NET({171 el: "#vanta-bg",172 mouseControls: true,173 touchControls: true,174 gyroControls: false,175 minHeight: 200.00,176 minWidth: 200.00,177 scale: 1.00,178 scaleMobile: 1.00,179 color: 0x6366f1,180 backgroundColor: 0xf8fafc,181 points: 10.00,182 maxDistance: 22.00,183 spacing: 17.00184 });185 186 // Theme toggle functionality187 const themeToggle = document.getElementById('theme-toggle');188 const html = document.documentElement;189 190 themeToggle.addEventListener('click', () => {191 html.classList.toggle('theme-dark');192 html.classList.toggle('theme-light');193 194 // Update Vanta.js background color195 const isDark = html.classList.contains('theme-dark');196 VANTA.NET({197 el: "#vanta-bg",198 color: isDark ? 0xa855f7 : 0x6366f1,199 backgroundColor: isDark ? 0x0f172a : 0xf8fafc,200 points: 10.00,201 maxDistance: 22.00,202 spacing: 17.00203 });204 });205 206 // Feather icons207 feather.replace();208 </script>209</body>210</html>211