Hugging Face's logo

Spaces:
5ordan
/
deepsite-project
Running

App Files Community
deepsite-project / pricing.html
5ordan's picture
5ordan
https://www.amazon.com/ replicate this site exactly
9c6e804 verified
raw
history blame contribute delete
10.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Pricing | AfterQuery</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <style>
 :root {
 --primary: #2563EB;
 --dark: #111827;
 --light: #F9FAFB;
 --gray: #6B7280;
 }
 body {
 font-family: 'Inter', sans-serif;
 margin: 0;
 padding: 0;
 color: var(--dark);
 line-height: 1.5;
 }
 .container {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 2rem;
 }
 header {
 background-color: white;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 position: fixed;
 width: 100%;
 z-index: 50;
 }
 nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.5rem 0;
 }
 .logo {
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--primary);
 }
 .nav-links {
 display: flex;
 align-items: center;
 gap: 2rem;
 }
 .nav-links a {
 text-decoration: none;
 color: var(--dark);
 font-weight: 500;
 font-size: 0.95rem;
 }
 .nav-links a:hover {
 color: var(--primary);
 }
 .pricing {
 padding: 10rem 0 6rem;
 }
 .section-title {
 text-align: center;
 font-size: 2.25rem;
 font-weight: 800;
 margin-bottom: 4rem;
 }
 .pricing-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 2rem;
 max-width: 1024px;
 margin: 0 auto;
 }
 .pricing-card {
 background-color: white;
 border-radius: 0.5rem;
 padding: 2rem;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 border: 1px solid #E5E7EB;
 }
 .pricing-card.popular {
 border: 1px solid var(--primary);
 }
 .pricing-header {
 text-align: center;
 margin-bottom: 2rem;
 }
 .pricing-title {
 font-size: 1.25rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
 }
 .pricing-price {
 font-size: 3rem;
 font-weight: 800;
 margin-bottom: 0.5rem;
 }
 .pricing-period {
 color: var(--gray);
 font-size: 1rem;
 }
 .pricing-features {
 margin-bottom: 2rem;
 }
 .pricing-feature {
 display: flex;
 align-items: center;
 margin-bottom: 0.75rem;
 font-size: 0.95rem;
 }
 .pricing-feature i {
 color: var(--primary);
 margin-right: 0.5rem;
 }
 .pricing-btn {
 display: inline-flex;
 justify-content: center;
 width: 100%;
 background-color: var(--primary);
 color: white;
 padding: 0.75rem 1.5rem;
 border-radius: 0.375rem;
 text-decoration: none;
 font-weight: 500;
 transition: all 0.15s ease;
 font-size: 1rem;
 }
 .pricing-btn:hover {
 background-color: #1D4ED8;
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .popular-badge {
 background-color: var(--primary);
 color: white;
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 font-size: 0.75rem;
 font-weight: 600;
 margin-bottom: 1rem;
 display: inline-block;
 }
 footer {
 background-color: var(--dark);
 color: white;
 padding: 4rem 0;
 text-align: center;
 font-size: 0.875rem;
 }
 .footer-links {
 display: flex;
 justify-content: center;
 gap: 1.5rem;
 margin-bottom: 2rem;
 }
 .footer-links a {
 color: #D1D5DB;
 text-decoration: none;
 transition: color 0.15s ease;
 }
 .footer-links a:hover {
 color: var(--primary);
 }
 .copyright {
 color: #9CA3AF;
 }
 </style>
</head>
<body>
 <header>
 <div class="container">
 <nav>
 <div class="logo">AfterQuery</div>
 <div class="nav-links">
 <a href="/">Features</a>
 <a href="/pricing">Pricing</a>
 <a href="/docs">Docs</a>
 <a href="/blog">Blog</a>
 <a href="/amazon">Amazon</a>
<a href="/login">Login</a>
 <a href="/signup" class="btn"><i data-feather="user"></i> Sign Up</a>
 </div>
 </nav>
 </div>
 </header>
<section class="pricing">
 <div class="container">
 <h2 class="section-title">Pricing</h2>
 <div class="pricing-grid">
 <div class="pricing-card">
 <div class="pricing-header">
 <h3 class="pricing-title">Free</h3>
 <div class="pricing-price">$0</div>
 <div class="pricing-period">forever</div>
 </div>
 <div class="pricing-features">
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Basic features</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Community support</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>MIT License</span>
 </div>
 </div>
 <a href="/signup" class="pricing-btn">Get Started</a>
 </div>
 <div class="pricing-card popular">
 <div class="pricing-header">
 <div class="popular-badge">Most Popular</div>
 <h3 class="pricing-title">Pro</h3>
 <div class="pricing-price">$19</div>
 <div class="pricing-period">per month</div>
 </div>
 <div class="pricing-features">
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>All Free features</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Priority support</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Commercial license</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Advanced caching</span>
 </div>
 </div>
 <a href="/signup" class="pricing-btn">Start Free Trial</a>
 </div>
 <div class="pricing-card">
 <div class="pricing-header">
 <h3 class="pricing-title">Enterprise</h3>
 <div class="pricing-price">Custom</div>
 <div class="pricing-period">contact us</div>
 </div>
 <div class="pricing-features">
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>All Pro features</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Dedicated support</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>White-glove onboarding</span>
 </div>
 <div class="pricing-feature">
 <i data-feather="check"></i>
 <span>Custom integrations</span>
 </div>
 </div>
 <a href="/contact" class="pricing-btn">Contact Sales</a>
 </div>
 </div>
 </div>
 </section>
<footer>
 <div class="container">
 <div class="footer-links">
 <a href="https://github.com/afterquery/afterquery"><i data-feather="github"></i> GitHub</a>
 <a href="https://twitter.com/afterquery"><i data-feather="twitter"></i> Twitter</a>
 <a href="https://discord.gg/UNU5uzw"><i data-feather="message-circle"></i> Discord</a>
 <a href="/privacy">Privacy</a>
 <a href="/terms">Terms</a>
 </div>
 <div class="copyright">
 &copy; 2023 AfterQuery. All rights reserved.
 </div>
 </div>
 </footer>
<script>
 feather.replace();
 </script>
</body>
</html>