sobansameer's picture
Make me website page
62075a5 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog | 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;
}
.blog-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-gray-600 hover:text-purple-600 transition">Features</a>
<a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
<a href="blog.html" class="text-purple-600 font-medium 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">QuantumCart <span class="bg-white text-purple-600 px-2 rounded-lg">Blog</span></h1>
<p class="text-xl max-w-3xl mx-auto opacity-90">
Latest insights, trends, and updates on e-commerce automation and AI-powered shopping.
</p>
</div>
</section>
<!-- Blog Posts Section -->
<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">
<!-- Blog Post 1 -->
<div class="blog-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300">
<img src="http://static.photos/technology/640x360/1" alt="AI in E-commerce" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-3">
<span>December 15, 2023</span>
<span class="mx-2"></span>
<span class="text-purple-600">AI & Automation</span>
</div>
<h3 class="text-xl font-bold mb-3">The Future of AI in E-commerce</h3>
<p class="text-gray-600 mb-4">How artificial intelligence is revolutionizing online shopping experiences and customer engagement.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Read More
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Blog Post 2 -->
<div class="blog-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300">
<img src="http://static.photos/business/640x360/2" alt="Inventory Management" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-3">
<span>December 10, 2023</span>
<span class="mx-2"></span>
<span class="text-purple-600">Operations</span>
</div>
<h3 class="text-xl font-bold mb-3">Automated Inventory Management Best Practices</h3>
<p class="text-gray-600 mb-4">Learn how to optimize your inventory management with intelligent automation and real-time tracking.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Read More
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Blog Post 3 -->
<div class="blog-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300">
<img src="http://static.photos/analytics/640x360/3" alt="Customer Analytics" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-3">
<span>December 5, 2023</span>
<span class="mx-2"></span>
<span class="text-purple-600">Analytics</span>
</div>
<h3 class="text-xl font-bold mb-3">Understanding Customer Behavior Through Data</h3>
<p class="text-gray-600 mb-4">Deep dive into customer analytics and how to leverage data to improve conversion rates and retention.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Read More
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Blog Post 4 -->
<div class="blog-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300">
<img src="http://static.photos/security/640x360/4" alt="Fraud Prevention" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-3">
<span>November 28, 2023</span>
<span class="mx-2"></span>
<span class="text-purple-600">Security</span>
</div>
<h3 class="text-xl font-bold mb-3">Advanced Fraud Detection Techniques</h3>
<p class="text-gray-600 mb-4">Explore the latest methods in fraud prevention and how AI is helping protect e-commerce businesses.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Read More
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Blog Post 5 -->
<div class="blog-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300">
<img src="http://static.photos/mobile/640x360/5" alt="Mobile Commerce" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-3">
<span>November 20, 2023</span>
<span class="mx-2"></span>
<span class="text-purple-600">Mobile</span>
</div>
<h3 class="text-xl font-bold mb-3">Mobile-First E-commerce Strategies</h3>
<p class="text-gray-600 mb-4">Essential strategies for optimizing your e-commerce platform for mobile users and increasing mobile conversions.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Read More
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Blog Post 6 -->
<div class="blog-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300">
<img src="http://static.photos/scaling/640x360/6" alt="Business Scaling" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-3">
<span>November 15, 2023</span>
<span class="mx-2"></span>
<span class="text-purple-600">Growth</span>
</div>
<h3 class="text-xl font-bold mb-3">Scaling Your E-commerce Business Efficiently</h3>
<p class="text-gray-600 mb-4">Key insights on how to scale your online store without compromising on customer experience or operational efficiency.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Read More
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4 md:px-6 text-center">
<h2 class="text-3xl font-bold mb-6">Stay Updated</h2>
<p class="text-xl max-w-2xl mx-auto mb-10 text-gray-600">
Get the latest e-commerce insights and QuantumCart updates delivered to your inbox.
</p>
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
<button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition">
Subscribe
</button>
</form>
</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="features.html" class="hover:text-white transition">Features</a></li>
<li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
<li><a href="blog.html" class="hover:text-white transition">Blog</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">Community</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>