CoolFace
Apppublic

aadityahere24/aso-launch-wizard

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
pricing.html234 linesDownload Raw Back to root
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>Pricing - ASO Launch Wizard</title>7    <script src="https://cdn.tailwindcss.com"></script>8    <script src="https://unpkg.com/feather-icons"></script>9    <style>10        .gradient-text {11            background: linear-gradient(90deg, #6366f1, #8b5cf6);12            -webkit-background-clip: text;13            background-clip: text;14            color: transparent;15        }16        .pricing-card:hover {17            transform: translateY(-5px);18            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);19        }20    </style>21</head>22<body class="bg-gray-50 min-h-screen font-sans">23    <div class="bg-white shadow-sm py-4 sticky top-0 z-50">24        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">25            <div class="flex items-center space-x-2">26                <i data-feather="rocket" class="text-indigo-600 w-6 h-6"></i>27                <span class="text-xl font-bold gradient-text">ASO Launch Wizard</span>28            </div>29            <div class="hidden md:flex space-x-8">30                <a href="index.html" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a>31                <a href="features.html" class="text-gray-700 hover:text-indigo-600 font-medium">Features</a>32                <a href="pricing.html" class="text-indigo-600 font-medium">Pricing</a>33                <a href="resources.html" class="text-gray-700 hover:text-indigo-600 font-medium">Resources</a>34            </div>35            <div class="flex items-center space-x-4">36                <a href="login.html" class="text-gray-700 hover:text-indigo-600">Log in</a>37                <a href="trial.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium">Start Free Trial</a>38            </div>39        </div>40    </div>41 42    <section class="py-16">43        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">44            <div class="text-center mb-16">45                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">Simple, <span class="gradient-text">Transparent</span> Pricing</h1>46                <p class="text-lg text-gray-600 max-w-3xl mx-auto">47                    No hidden fees. Cancel anytime. Get started with our free trial.48                </p>49            </div>50 51            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">52                <!-- Starter Plan -->53                <div class="bg-white border border-gray-200 rounded-xl p-8 pricing-card transition-all duration-300">54                    <div class="mb-6">55                        <h3 class="text-2xl font-bold text-gray-900 mb-2">Starter</h3>56                        <p class="text-gray-600">Perfect for solo developers</p>57                    </div>58                    <div class="mb-6">59                        <span class="text-4xl font-bold text-gray-900">$19</span>60                        <span class="text-gray-600">/month</span>61                    </div>62                    <ul class="space-y-3 mb-8">63                        <li class="flex items-center">64                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>65                            <span>5 projects per month</span>66                        </li>67                        <li class="flex items-center">68                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>69                            <span>Basic ASO suggestions</span>70                        </li>71                        <li class="flex items-center">72                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>73                            <span>Email support</span>74                        </li>75                    </ul>76                    <a href="trial.html" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 text-center py-3 px-4 rounded-md font-medium">77                        Start Free Trial78                    </a>79                </div>80 81                <!-- Pro Plan (Featured) -->82                <div class="bg-white border-2 border-indigo-500 rounded-xl p-8 pricing-card transition-all duration-300 transform scale-105 relative">83                    <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-xl">84                        MOST POPULAR85                    </div>86                    <div class="mb-6">87                        <h3 class="text-2xl font-bold text-gray-900 mb-2">Pro</h3>88                        <p class="text-gray-600">For serious indie developers</p>89                    </div>90                    <div class="mb-6">91                        <span class="text-4xl font-bold text-gray-900">$49</span>92                        <span class="text-gray-600">/month</span>93                    </div>94                    <ul class="space-y-3 mb-8">95                        <li class="flex items-center">96                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>97                            <span>20 projects per month</span>98                        </li>99                        <li class="flex items-center">100                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>101                            <span>Advanced ASO suggestions</span>102                        </li>103                        <li class="flex items-center">104                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>105                            <span>Competitor analysis</span>106                        </li>107                        <li class="flex items-center">108                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>109                            <span>Priority support</span>110                        </li>111                    </ul>112                    <a href="trial.html" class="block w-full bg-indigo-600 hover:bg-indigo-700 text-white text-center py-3 px-4 rounded-md font-medium">113                        Start Free Trial114                    </a>115                </div>116 117                <!-- Studio Plan -->118                <div class="bg-white border border-gray-200 rounded-xl p-8 pricing-card transition-all duration-300">119                    <div class="mb-6">120                        <h3 class="text-2xl font-bold text-gray-900 mb-2">Studio</h3>121                        <p class="text-gray-600">For small game studios</p>122                    </div>123                    <div class="mb-6">124                        <span class="text-4xl font-bold text-gray-900">$99</span>125                        <span class="text-gray-600">/month</span>126                    </div>127                    <ul class="space-y-3 mb-8">128                        <li class="flex items-center">129                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>130                            <span>Unlimited projects</span>131                        </li>132                        <li class="flex items-center">133                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>134                            <span>Premium ASO suggestions</span>135                        </li>136                        <li class="flex items-center">137                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>138                            <span>Full competitor analysis</span>139                        </li>140                        <li class="flex items-center">141                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>142                            <span>24/7 VIP support</span>143                        </li>144                        <li class="flex items-center">145                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>146                            <span>Team collaboration</span>147                        </li>148                    </ul>149                    <a href="trial.html" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 text-center py-3 px-4 rounded-md font-medium">150                        Start Free Trial151                    </a>152                </div>153            </div>154 155            <div class="mt-16 bg-gray-50 p-8 rounded-xl max-w-4xl mx-auto">156                <h3 class="text-xl font-bold text-gray-900 mb-4 text-center">Frequently Asked Questions</h3>157                <div class="space-y-4">158                    <div class="border-b border-gray-200 pb-4">159                        <h4 class="font-medium text-gray-900 mb-2">Is there a free trial?</h4>160                        <p class="text-gray-600">Yes! All plans come with a 14-day free trial. No credit card required.</p>161                    </div>162                    <div class="border-b border-gray-200 pb-4">163                        <h4 class="font-medium text-gray-900 mb-2">Can I cancel anytime?</h4>164                        <p class="text-gray-600">Absolutely. No long-term contracts. Cancel anytime with one click.</p>165                    </div>166                    <div class="border-b border-gray-200 pb-4">167                        <h4 class="font-medium text-gray-900 mb-2">Do you offer discounts for students?</h4>168                        <p class="text-gray-600">Yes! Students get 50% off all plans. Email us with your student ID for a discount code.</p>169                    </div>170                    <div>171                        <h4 class="font-medium text-gray-900 mb-2">What payment methods do you accept?</h4>172                        <p class="text-gray-600">We accept all major credit cards (Visa, Mastercard, American Express) and PayPal.</p>173                    </div>174                </div>175            </div>176        </div>177    </section>178 179    <footer class="bg-gray-900 text-gray-400 py-12">180        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">181            <div class="grid md:grid-cols-4 gap-8">182                <div>183                    <div class="flex items-center space-x-2 mb-4">184                        <i data-feather="rocket" class="text-indigo-400 w-6 h-6"></i>185                        <span class="text-xl font-bold text-white">ASO Launch Wizard</span>186                    </div>187                    <p class="text-sm mb-4">188                        The fastest, safest way to generate compliant app store metadata for indie game developers.189                    </p>190                    <div class="flex space-x-4">191                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>192                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>193                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="discord"></i></a>194                    </div>195                </div>196                <div>197                    <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Product</h3>198                    <ul class="space-y-2">199                        <li><a href="features.html" class="hover:text-white">Features</a></li>200                        <li><a href="pricing.html" class="hover:text-white">Pricing</a></li>201                        <li><a href="#" class="hover:text-white">API</a></li>202                        <li><a href="#" class="hover:text-white">Roadmap</a></li>203                    </ul>204                </div>205                <div>206                    <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Resources</h3>207                    <ul class="space-y-2">208                        <li><a href="#" class="hover:text-white">Documentation</a></li>209                        <li><a href="#" class="hover:text-white">ASO Guide</a></li>210                        <li><a href="#" class="hover:text-white">Blog</a></li>211                        <li><a href="#" class="hover:text-white">Support</a></li>212                    </ul>213                </div>214                <div>215                    <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Company</h3>216                    <ul class="space-y-2">217                        <li><a href="#" class="hover:text-white">About</a></li>218                        <li><a href="#" class="hover:text-white">Careers</a></li>219                        <li><a href="#" class="hover:text-white">Privacy</a></li>220                        <li><a href="#" class="hover:text-white">Terms</a></li>221                    </ul>222                </div>223            </div>224            <div class="mt-12 pt-8 border-t border-gray-800 text-sm text-center">225                <p>© 2023 ASO Launch Wizard. All rights reserved.</p>226            </div>227        </div>228    </footer>229 230    <script>231        feather.replace();232    </script>233</body>234</html>