|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Content Crafters Suite</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
#vanta-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.tool-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<div id="vanta-bg"></div> |
|
|
|
|
|
<header class="relative z-10"> |
|
|
<div class="container mx-auto px-6 py-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="pen-tool" class="text-blue-400"></i> |
|
|
<h1 class="text-2xl font-bold gradiant-text">AI Content Crafters</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-blue-300 hover:text-white transition">Home</a> |
|
|
<a href="#" class="hover:text-white transition">Tools</a> |
|
|
<a href="#" class="hover:text-white transition">About</a> |
|
|
<a href="#" class="hover:text-white transition">Contact</a> |
|
|
</nav> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="relative z-10"> |
|
|
<section class="container mx-auto px-6 py-20 text-center"> |
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6"> |
|
|
<span class="gradient-text">Supercharge</span> Your Content Creation |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10"> |
|
|
60+ AI-powered tools for writers, developers, and creators. Generate high-quality content and code in seconds. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium transition transform hover:scale-105"> |
|
|
Explore Tools |
|
|
</button> |
|
|
<button class="border border-blue-400 text-blue-300 hover:bg-blue-900/30 px-8 py-4 rounded-lg font-medium transition"> |
|
|
How It Works |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="container mx-auto px-6 py-16"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Featured Writing Tools</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-blue-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-blue-900/30 flex items-center justify-center"> |
|
|
<i data-feather="edit-3" class="text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">AI Article Writer</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">SEO-optimized long-form articles up to 10,000 words.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-blue-300">Writing</span> |
|
|
<button class="text-blue-400 hover:text-blue-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-purple-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-purple-900/30 flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Blog Post Generator</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">WordPress-ready drafts with hooks & SEO metadata.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-purple-300">Writing</span> |
|
|
<button class="text-purple-400 hover:text-purple-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-red-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-red-900/30 flex items-center justify-center"> |
|
|
<i data-feather="mail" class="text-red-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Email Writer</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">Professional emails with A/B subject testing.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-red-300">Writing</span> |
|
|
<button class="text-red-400 hover:text-red-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-yellow-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-yellow-900/30 flex items-center justify-center"> |
|
|
<i data-feather="shopping-bag" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Product Writer</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">E-commerce descriptions with SEO optimization.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-yellow-300">E-Commerce</span> |
|
|
<button class="text-yellow-400 hover:text-yellow-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-pink-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-pink-900/30 flex items-center justify-center"> |
|
|
<i data-feather="message-square" class="text-pink-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Caption Generator</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">Platform-specific captions with trending hashtags.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-pink-300">Social Media</span> |
|
|
<button class="text-pink-400 hover:text-pink-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-indigo-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-900/30 flex items-center justify-center"> |
|
|
<i data-feather="type" class="text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Headline Generator</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">50+ headline options with CTR predictions.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-indigo-300">Marketing</span> |
|
|
<button class="text-indigo-400 hover:text-indigo-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-green-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-green-900/30 flex items-center justify-center"> |
|
|
<i data-feather="search" class="text-green-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">SEO Keyword Tool</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">100+ keyword suggestions with volume data.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-green-300">SEO</span> |
|
|
<button class="text-green-400 hover:text-green-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-teal-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-teal-900/30 flex items-center justify-center"> |
|
|
<i data-feather="list" class="text-teal-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Outline Creator</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">Tree view collapsible content structure.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-teal-300">Planning</span> |
|
|
<button class="text-teal-400 hover:text-teal-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-emerald-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-emerald-900/30 flex items-center justify-center"> |
|
|
<i data-feather="code" class="text-emerald-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Regex Builder</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">Visual regex creator with live testing and explanations.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-emerald-300">Coding</span> |
|
|
<button class="text-emerald-400 hover:text-emerald-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-orange-400"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-orange-900/30 flex items-center justify-center"> |
|
|
<i data-feather="layout" class="text-orange-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">HTML Generator</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4 text-sm">Generate responsive HTML with Tailwind classes.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-orange-300">Web Dev</span> |
|
|
<button class="text-orange-400 hover:text-orange-300 flex items-center text-sm"> |
|
|
Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-white hover:bg-gradient-to-r from-blue-600 to-purple-600"> |
|
|
<div class="h-full flex flex-col items-center justify-center"> |
|
|
<h3 class="text-xl font-semibold mb-2 text-center">View All 60+ Tools</h3> |
|
|
<p class="text-gray-300 mb-4 text-sm text-center">Explore our full collection of AI writing and coding tools</p> |
|
|
<button class="bg-white text-gray-900 hover:bg-gray-200 px-6 py-2 rounded-lg font-medium transition"> |
|
|
Browse Tools |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="container mx-auto px-6 py-16 bg-gray-800/40 rounded-xl my-12"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Why Choose Our AI Tools?</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-10"> |
|
|
<div class="p-6 rounded-lg"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-900/20 flex items-center justify-center"> |
|
|
<i data-feather="zap" class="text-blue-400 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Lightning Fast</h3> |
|
|
<p class="text-gray-300 text-sm">Generate in seconds</p> |
|
|
</div> |
|
|
<div class="p-6 rounded-lg"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-900/20 flex items-center justify-center"> |
|
|
<i data-feather="edit" class="text-purple-400 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Easy to Use</h3> |
|
|
<p class="text-gray-300 text-sm">Intuitive interfaces</p> |
|
|
</div> |
|
|
<div class="p-6 rounded-lg"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-900/20 flex items-center justify-center"> |
|
|
<i data-feather="lock" class="text-green-400 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Secure</h3> |
|
|
<p class="text-gray-300 text-sm">Data stays private</p> |
|
|
</div> |
|
|
<div class="p-6 rounded-lg"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-yellow-900/20 flex items-center justify-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">60+ Tools</h3> |
|
|
<p class="text-gray-300 text-sm">Complete dev & writing suite</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="relative z-10 bg-gray-900/80 border-t border-gray-800 mt-20"> |
|
|
<div class="container mx-auto px-6 py-12"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">AI Content Crafters</h3> |
|
|
<p class="text-gray-400">Your all-in-one solution for AI-powered content creation.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Tools</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Article Writer</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Email Writer</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Product Writer</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Caption Generator</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Headline Generator</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">SEO Tools</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">API</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-300 transition"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-300 transition"><i data-feather="github"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-300 transition"><i data-feather="linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 AI Content Crafters. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x111827, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
