File size: 9,217 Bytes
d219551 62075a5 d219551 62075a5 d219551 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features | QuantumCart</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
<div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
<span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-gray-600 hover:text-purple-600 transition">Home</a>
<a href="features.html" class="text-purple-600 font-medium transition">Features</a>
<a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
<a href="blog.html" class="text-gray-600 hover:text-purple-600 transition">Blog</a>
<a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
</div>
<button class="md:hidden text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
<div class="container mx-auto px-4 md:px-6 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Powerful E-Commerce <span class="bg-white text-purple-600 px-2 rounded-lg">Features</span></h1>
<p class="text-xl max-w-3xl mx-auto opacity-90">
Explore the cutting-edge capabilities that set QuantumCart apart from traditional e-commerce platforms.
</p>
</div>
</section>
<!-- Features Grid -->
<section class="py-16">
<div class="container mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
<div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="cpu" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI-Powered Recommendations</h3>
<p class="text-gray-600">Our machine learning algorithms analyze customer behavior to suggest the most relevant products.</p>
</div>
<!-- Feature 2 -->
<div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
<div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="repeat" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">Automated Inventory</h3>
<p class="text-gray-600">Never run out of stock with our smart inventory management system.</p>
</div>
<!-- Feature 3 -->
<div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
<div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="trending-up" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">Dynamic Pricing</h3>
<p class="text-gray-600">Automatically adjust prices based on demand, competition and inventory levels.</p>
</div>
<!-- Feature 4 -->
<div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
<div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="shield" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">Fraud Detection</h3>
<p class="text-gray-600">Advanced algorithms identify and prevent fraudulent transactions.</p>
</div>
<!-- Feature 5 -->
<div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
<div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="globe" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">Multi-Channel Sales</h3>
<p class="text-gray-600">Manage inventory and orders across multiple sales channels from one dashboard.</p>
</div>
<!-- Feature 6 -->
<div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
<div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="bar-chart-2" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold mb-3">Advanced Analytics</h3>
<p class="text-gray-600">Get deep insights into customer behavior and sales performance.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-6">
<i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
<span class="text-xl font-bold text-white">QuantumCart</span>
</div>
<p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
</div>
</div>
<div>
<h4 class="text-white font-medium mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Features</a></li>
<li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
<li><a href="#" class="hover:text-white transition">Roadmap</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-medium mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Documentation</a></li>
<li><a href="#" class="hover:text-white transition">API</a></li>
<li><a href="#" class="hover:text-white transition">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-medium mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">About</a></li>
<li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
<li><a href="#" class="hover:text-white transition">Careers</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 QuantumCart. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
</div>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |