zentech / index.html
ZenTec's picture
Fix functions are working I want a good thing ready to public don't use mockup data - Initial Deployment
5cff093 verified
Raw
History Blame Contribute Delete
26.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zentech | Web3 Innovation Incubator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a2a;
color: white;
}
.futuristic {
font-family: 'Orbitron', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #FF7A00 0%, #8A2BE2 100%);
}
.glow {
box-shadow: 0 0 15px rgba(255, 122, 0, 0.5);
}
.glow-secondary {
box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}
.progress-bar {
height: 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
}
.progress-fill {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #FF7A00, #8A2BE2);
transition: width 0.5s ease;
}
.project-card:hover {
transform: translateY(-5px);
transition: all 0.3s ease;
}
</style>
</head>
<body class="min-h-screen">
<!-- Vanta.js Background -->
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
<!-- Navigation -->
<nav class="border-b border-gray-800 backdrop-blur-md bg-black bg-opacity-50 fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl font-bold futuristic text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-purple-600">ZENTECH</span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-gray-800">Home</a>
<a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Projects</a>
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">About</a>
<a href="#invest" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Invest</a>
</div>
</div>
<div class="hidden md:block">
<button class="ml-4 px-4 py-2 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition duration-300 glow">
Connect Wallet
</button>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-6xl font-bold mb-6 futuristic text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-purple-600">
Where Innovation Meets Opportunity
</h1>
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
Invest in projects that change lives. Fund. Launch. Earn.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="px-8 py-4 rounded-xl gradient-bg text-white font-bold hover:opacity-90 transition duration-300 glow">
View Projects
</button>
<button class="px-8 py-4 rounded-xl bg-transparent border-2 border-purple-600 text-white font-bold hover:bg-purple-900 hover:bg-opacity-20 transition duration-300 glow-secondary">
Invest Now
</button>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-40 backdrop-blur-lg">
<div class="max-w-7xl mx-auto" data-aos="fade-up">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 futuristic">About Zentech</h2>
<div class="w-24 h-1 gradient-bg mx-auto rounded-full"></div>
</div>
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<p class="text-lg text-gray-300 mb-8">
Zentech is a Web3-powered incubator. Each project has a clear capital target. Once funded, we launch and share revenue transparently with investors.
</p>
<div class="grid grid-cols-2 gap-4">
<div class="p-6 rounded-2xl bg-gray-900 bg-opacity-50 border border-gray-800">
<div class="text-3xl mb-2">🌱</div>
<h3 class="font-bold futuristic">Agriculture</h3>
</div>
<div class="p-6 rounded-2xl bg-gray-900 bg-opacity-50 border border-gray-800">
<div class="text-3xl mb-2">🚚</div>
<h3 class="font-bold futuristic">Logistics</h3>
</div>
<div class="p-6 rounded-2xl bg-gray-900 bg-opacity-50 border border-gray-800">
<div class="text-3xl mb-2">🤖</div>
<h3 class="font-bold futuristic">AI</h3>
</div>
<div class="p-6 rounded-2xl bg-gray-900 bg-opacity-50 border border-gray-800">
<div class="text-3xl mb-2">🔐</div>
<h3 class="font-bold futuristic">Security</h3>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="rounded-2xl overflow-hidden border border-gray-800">
<img src="http://static.photos/technology/1200x630/42" alt="Zentech Technology" class="w-full h-auto">
</div>
</div>
</div>
</div>
</section>
<!-- Projects Dashboard -->
<section id="projects" class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto" data-aos="fade-up">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 futuristic">Our Projects</h2>
<div class="w-24 h-1 gradient-bg mx-auto rounded-full"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Project 1 -->
<div class="project-card bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 hover:shadow-lg transition duration-300">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold futuristic">DeliveryPal</h3>
<span class="px-3 py-1 bg-green-900 bg-opacity-30 text-green-400 text-xs rounded-full">Open</span>
</div>
<p class="text-gray-400 mb-4">WhatsApp AI Delivery Service</p>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span>Raised: $12,000</span>
<span>Target: $50,000</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 24%"></div>
</div>
</div>
<div class="text-sm text-gray-300 mb-4">
<span class="font-bold text-orange-400">ROI:</span> 20–25% annually
</div>
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-white hover:bg-opacity-50 transition duration-300">
Invest Now
</button>
</div>
<!-- Project 2 -->
<div class="project-card bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 hover:shadow-lg transition duration-300">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold futuristic">Rosemary Farming</h3>
<span class="px-3 py-1 bg-green-900 bg-opacity-30 text-green-400 text-xs rounded-full">Open</span>
</div>
<p class="text-gray-400 mb-4">Farming & Essential Oils</p>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span>Raised: $8,500</span>
<span>Target: $30,000</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 28.3%"></div>
</div>
</div>
<div class="text-sm text-gray-300 mb-4">
<span class="font-bold text-orange-400">ROI:</span> 18–22% annually
</div>
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-white hover:bg-opacity-50 transition duration-300">
Invest Now
</button>
</div>
<!-- Project 3 -->
<div class="project-card bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 hover:shadow-lg transition duration-300">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold futuristic">Shea Butter</h3>
<span class="px-3 py-1 bg-green-900 bg-opacity-30 text-green-400 text-xs rounded-full">Open</span>
</div>
<p class="text-gray-400 mb-4">Oil Production</p>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span>Raised: $5,000</span>
<span>Target: $25,000</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 20%"></div>
</div>
</div>
<div class="text-sm text-gray-300 mb-4">
<span class="font-bold text-orange-400">ROI:</span> 15–20% annually
</div>
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-white hover:bg-opacity-50 transition duration-300">
Invest Now
</button>
</div>
<!-- Project 4 -->
<div class="project-card bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 hover:shadow-lg transition duration-300">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold futuristic">Chicken Gizzard</h3>
<span class="px-3 py-1 bg-green-900 bg-opacity-30 text-green-400 text-xs rounded-full">Open</span>
</div>
<p class="text-gray-400 mb-4">Export Project</p>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span>Raised: $6,800</span>
<span>Target: $40,000</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 17%"></div>
</div>
</div>
<div class="text-sm text-gray-300 mb-4">
<span class="font-bold text-orange-400">ROI:</span> 22–28% annually
</div>
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-white hover:bg-opacity-50 transition duration-300">
Invest Now
</button>
</div>
<!-- Project 5 -->
<div class="project-card bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 hover:shadow-lg transition duration-300">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold futuristic">AI Farmer Drone</h3>
<span class="px-3 py-1 bg-green-900 bg-opacity-30 text-green-400 text-xs rounded-full">Open</span>
</div>
<p class="text-gray-400 mb-4">Agricultural Automation</p>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span>Raised: $15,000</span>
<span>Target: $80,000</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 18.75%"></div>
</div>
</div>
<div class="text-sm text-gray-300 mb-4">
<span class="font-bold text-orange-400">ROI:</span> 30–35% annually
</div>
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-white hover:bg-opacity-50 transition duration-300">
Invest Now
</button>
</div>
<!-- Project 6 -->
<div class="project-card bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 hover:shadow-lg transition duration-300">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold futuristic">AI Weather Sensor</h3>
<span class="px-3 py-1 bg-green-900 bg-opacity-30 text-green-400 text-xs rounded-full">Open</span>
</div>
<p class="text-gray-400 mb-4">Agricultural Tool</p>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span>Raised: $9,200</span>
<span>Target: $45,000</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 20.4%"></div>
</div>
</div>
<div class="text-sm text-gray-300 mb-4">
<span class="font-bold text-orange-400">ROI:</span> 25–30% annually
</div>
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-white hover:bg-opacity-50 transition duration-300">
Invest Now
</button>
</div>
</div>
</div>
</section>
<!-- Fundraising Dashboard -->
<section id="invest" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-40 backdrop-blur-lg">
<div class="max-w-7xl mx-auto" data-aos="fade-up">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 futuristic">Investment Transparency</h2>
<div class="w-24 h-1 gradient-bg mx-auto rounded-full"></div>
</div>
<div class="bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold futuristic mb-4">Total Fundraising</h3>
<div class="mb-6">
<div class="flex justify-between text-lg mb-2">
<span>Raised:</span>
<span class="font-bold">$67,000</span>
</div>
<div class="flex justify-between text-lg mb-2">
<span>Target:</span>
<span class="font-bold">$340,000</span>
</div>
<div class="flex justify-between text-lg mb-2">
<span>Remaining:</span>
<span class="font-bold">$273,000</span>
</div>
</div>
<div class="progress-bar mb-6">
<div class="progress-fill" style="width: 19.7%"></div>
</div>
</div>
<div>
<h3 class="text-xl font-bold futuristic mb-4">Wallet Details</h3>
<div class="bg-gray-800 bg-opacity-30 rounded-xl p-4 mb-4">
<div class="flex items-center mb-2">
<i data-feather="credit-card" class="mr-2"></i>
<span class="text-sm">Network:</span>
<span class="ml-2 font-bold">Polygon USDT</span>
</div>
<div class="flex items-center">
<i data-feather="wallet" class="mr-2"></i>
<span class="text-sm">Wallet:</span>
<span class="ml-2 font-mono text-xs truncate">0xD790d67CCd166361c67DD9Fa627ce36175e6f1a3</span>
</div>
</div>
<button class="w-full py-3 rounded-lg gradient-bg text-white font-bold hover:opacity-90 transition duration-300 glow">
Copy Wallet Address
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto" data-aos="fade-up">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 futuristic">Why Invest With Zentech</h2>
<div class="w-24 h-1 gradient-bg mx-auto rounded-full"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 text-center">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="shield" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold futuristic mb-2">Transparent Funding</h3>
<p class="text-gray-400">Blockchain-based funding with full transparency</p>
</div>
<div class="bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 text-center">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="dollar-sign" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold futuristic mb-2">Revenue Sharing</h3>
<p class="text-gray-400">Earn returns once targets are met</p>
</div>
<div class="bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 text-center">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="cpu" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold futuristic mb-2">AI + Web3</h3>
<p class="text-gray-400">Cutting-edge technology integration</p>
</div>
<div class="bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 text-center">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="trending-up" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold futuristic mb-2">High-Demand</h3>
<p class="text-gray-400">Focused on growing market sectors</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg">
<div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold mb-6 futuristic">Your capital builds the future. Invest today.</h2>
<button class="px-8 py-4 rounded-xl bg-black bg-opacity-30 text-white font-bold border-2 border-white hover:bg-opacity-50 transition duration-300 glow">
Start Investing (Polygon USDT)
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-black bg-opacity-70 backdrop-blur-lg border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<h3 class="text-2xl font-bold futuristic mb-4 text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-purple-600">ZENTECH</h3>
<p class="text-gray-400 mb-4">Web3-powered incubator for innovative projects.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="github"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold futuristic mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#projects" class="text-gray-400 hover:text-white">Projects</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold futuristic mb-4">Contact</h4>
<div class="space-y-2">
<div class="flex items-center text-gray-400">
<i data-feather="twitter" class="mr-2"></i>
<span>@zentechowner</span>
</div>
<div class="flex items-center text-gray-400">
<i data-feather="mail" class="mr-2"></i>
<span>contact@zentech.io</span>
</div>
<div class="bg-gray-800 bg-opacity-30 rounded-lg p-3 mt-4">
<div class="text-xs text-gray-400 mb-1">Investment Wallet:</div>
<div class="font-mono text-xs truncate">0xD790d67CCd166361c67DD9Fa627ce36175e6f1a3</div>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
© 2025 Zentech. All Rights Reserved.
</div>
</div>
</footer>
<script>
// Initialize Vanta.js
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xff7a00,
color2: 0x8a2be2,
backgroundColor: 0x0a0a2a,
size: 0.8
});
// Initialize AOS
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html>