Hugging Face's logo

Spaces:
Mujahid1111
/
codewizard-backend-brewery
Running

App Files Community
codewizard-backend-brewery / index.html
Mujahid1111's picture
Mujahid1111
1. Global Principles & Core Technologies
ceb3cf5 verified
Raw History Blame Contribute Delete
13.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeWizard Backend Brewery</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover: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="min-h-screen bg-gray-50">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<div class="relative z-10">
<!-- Navigation -->
<nav class="bg-white/80 backdrop-blur-md shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<i data-feather="code" class="text-purple-600 mr-2"></i>
<span class="text-xl font-bold text-gray-900">CodeWizard</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="text-purple-600 font-medium">Home</a>
<a href="dashboard.html" class="text-gray-600 hover:text-purple-600">Dashboard</a>
<a href="crypto.html" class="text-gray-600 hover:text-purple-600">Crypto</a>
<a href="heatmap.html" class="text-gray-600 hover:text-purple-600">Heatmap</a>
<a href="#" class="text-gray-600 hover:text-purple-600" id="login-btn">Login</a>
</div>
<button class="md:hidden text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient text-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Full-Stack Digital Alchemy</h1>
<p class="text-xl mb-8">From frontend finesse to backend brilliance - we craft complete digital experiences that enchant users and scale effortlessly.</p>
<div class="flex space-x-4">
<button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Get Started</button>
<button class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition">Learn More</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="http://static.photos/technology/640x360/42" alt="Technology" class="rounded-xl shadow-2xl">
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-4">Our Magical Services</h2>
<p class="text-xl text-gray-600 text-center mb-12 max-w-3xl mx-auto">Comprehensive solutions from pixel-perfect frontends to robust backends</p>
<div class="grid md:grid-cols-3 gap-8">
<!-- Frontend Card -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="bg-purple-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
<i data-feather="layers" class="text-purple-600 w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-3">Frontend Wizardry</h3>
<p class="text-gray-600">Crafting intuitive, responsive interfaces with React, Vue, and modern CSS frameworks.</p>
</div>
<!-- Backend Card -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="bg-blue-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
<i data-feather="database" class="text-blue-600 w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-3">Backend Sorcery</h3>
<p class="text-gray-600">Scalable APIs, microservices, and databases with Node.js, Python, and cloud architectures.</p>
</div>
<!-- Full Stack Card -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="bg-green-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
<i data-feather="cpu" class="text-green-600 w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-3">Full-Stack Alchemy</h3>
<p class="text-gray-600">End-to-end solutions that seamlessly integrate frontend and backend technologies.</p>
</div>
</div>
</div>
</section>
<!-- Backend Showcase -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-3xl font-bold mb-6">Backend Expertise</h2>
<p class="text-xl text-gray-600 mb-8">We architect robust, scalable backend systems with:</p>
<ul class="space-y-4">
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
<span>Node.js, Express, NestJS for JavaScript backends</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
<span>Python with Django, Flask, and FastAPI</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
<span>PostgreSQL, MongoDB, and Redis databases</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
<span>GraphQL and REST API design</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
<span>AWS, GCP, and Azure cloud deployment</span>
</li>
</ul>
</div>
<div class="md:w-1/2">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-gray-900 p-4 flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="p-6 font-mono text-sm bg-gray-800 text-gray-100">
<p class="text-purple-400">// Sample API endpoint</p>
<p class="text-blue-400">router</p>
<p class="text-blue-400 ml-4">.route('/api/users')</p>
<p class="text-blue-400 ml-8">.get(controller.getUsers)</p>
<p class="text-blue-400 ml-8">.post(validateUser, controller.createUser);</p>
<br>
<p class="text-purple-400">// Database model</p>
<p class="text-blue-400">const userSchema = new Schema({</p>
<p class="text-yellow-400 ml-4">name: { type: String, required: true },</p>
<p class="text-yellow-400 ml-4">email: { type: String, unique: true },</p>
<p class="text-yellow-400 ml-4">createdAt: { type: Date, default: Date.now }</p>
<p class="text-blue-400">});</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-purple-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Brew Some Digital Magic?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Whether you need frontend finesse, backend brilliance, or a complete full-stack solution, we've got you covered.</p>
<button class="bg-white text-purple-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition">Start Your Project Now</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 flex items-center">
<i data-feather="code" class="mr-2"></i> CodeWizard
</h3>
<p class="text-gray-400">Brewing digital experiences that delight users and scale effortlessly.</p>
</div>
<div>
<h4 class="font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="dashboard.html" class="text-gray-400 hover:text-white transition">Dashboard</a></li>
<li><a href="crypto.html" class="text-gray-400 hover:text-white transition">Crypto</a></li>
<li><a href="heatmap.html" class="text-gray-400 hover:text-white transition">Heatmap</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="github"></i>
</a>
<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="mail"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>© 2023 CodeWizard Backend Brewery. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<script>
VANTA.WAVES({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x5a3fbc,
shininess: 100.00,
waveHeight: 20.00,
waveSpeed: 1.30,
zoom: 0.65
});
</script>
<script>feather.replace();</script>
</body>
</html>