Hugging Face's logo

Spaces:
5ordan
/
deepsite-project
Running

App Files Community
deepsite-project / index.html
5ordan's picture
5ordan
https://www.amazon.com/ replicate this site exactly
9c6e804 verified
Raw
History Blame Contribute Delete
7.55 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>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);
 }
 .hero {
 padding: 12rem 0 6rem;
 text-align: center;
 background-color: var(--light);
 }
 .hero h1 {
 font-size: 3rem;
 font-weight: 800;
 margin-bottom: 1.5rem;
 line-height: 1.2;
 }
 .hero p {
 font-size: 1.25rem;
 color: var(--gray);
 max-width: 42rem;
 margin: 0 auto 2.5rem;
 }
 .btn {
 display: inline-flex;
 align-items: center;
 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;
 }
 .btn:hover {
 background-color: #1D4ED8;
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .btn i {
 margin-right: 0.5rem;
 }
 .features {
 padding: 6rem 0;
 }
 .section-title {
 text-align: center;
 font-size: 2.25rem;
 font-weight: 800;
 margin-bottom: 4rem;
 }
 .feature-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 2rem;
 }
 .feature-card {
 background-color: white;
 border-radius: 0.5rem;
 padding: 2rem;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 transition: all 0.15s ease;
 }
 .feature-card:hover {
 transform: translateY(-0.25rem);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 .feature-icon {
 font-size: 2.25rem;
 color: var(--primary);
 margin-bottom: 1.5rem;
 }
 .feature-title {
 font-size: 1.25rem;
 font-weight: 600;
 margin-bottom: 1rem;
 }
 .feature-desc {
 color: var(--gray);
 font-size: 1rem;
 }
 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">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="hero">
 <div class="container">
 <h1>The Missing GraphQL Client</h1>
 <p>A lightweight, intuitive GraphQL client that makes data fetching simple and efficient.</p>
 <a href="#" class="btn"><i data-feather="arrow-right"></i> Get Started</a>
 </div>
 </section>
<section class="features">
 <div class="container">
 <h2 class="section-title">Features</h2>
<div class="feature-grid">
 <div class="feature-card">
 <div class="feature-icon">
 <i data-feather="zap"></i>
 </div>
 <h3 class="feature-title">Tiny Bundle</h3>
 <p class="feature-desc">Under 5kb gzipped with zero dependencies.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">
 <i data-feather="code"></i>
 </div>
 <h3 class="feature-title">Simple API</h3>
 <p class="feature-desc">Intuitive API design that makes GraphQL feel natural.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">
 <i data-feather="cpu"></i>
 </div>
 <h3 class="feature-title">Powerful Caching</h3>
 <p class="feature-desc">Smart caching and automatic refetching built right in.</p>
 </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>