<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Back to Soil - Coming Soon</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-900 text-white">
<div class="min-h-screen flex flex-col items-center justify-center hero-section p-4">
<div class="content text-center w-full max-w-2xl px-4 py-8">
<header class="mb-8">
<img src="https://placehold.co/200x60/000000/FFFFFF?text=Logo+Placeholder" alt="Back to Soil Logo" class="mx-auto h-12 md:h-16 mb-4 animate-fade-in">
<h1 class="text-3xl md:text-5xl font-bold animate-fade-in">Back to Soil</h1>
</header>
<main class="mb-12">
<div class="animate-fade-in delay-200">
<p class="text-xl md:text-2xl mb-4 tracking-widest text-gray-300 uppercase">Coming Soon</p>
<hr class="w-1/4 mx-auto border-dashed-light mb-4">
<h2 class="text-4xl md:text-6xl font-playfair mb-4 leading-tight">Nurturing Soil,<br>Growing Futures</h2>
<hr class="w-1/4 mx-auto border-dashed-light">
</div>
</main>
<section class="animate-fade-in delay-500">
<h3 class="text-2xl md:text-3xl font-playfair mb-4">Stay in touch</h3>
<form id="contact-form" class="space-y-4">
<input type="text" id="name" name="name" placeholder="Your Name" class="w-full p-3 rounded-xl bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-300">
<input type="email" id="email" name="email" placeholder="Your Email" class="w-full p-3 rounded-xl bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-300">
<button type="submit" class="w-full p-3 rounded-xl bg-green-600 text-white font-semibold hover:bg-green-700 transition-colors duration-300">Notify Me</button>
<p id="form-message" class="text-sm mt-2 text-center"></p>
</form>
</section>
</div>
</div>
<footer class="bg-gray-800 text-gray-400 text-sm py-4 px-4 text-center">
<div class="container mx-auto">
<p>© 2024 Back to Soil. All Rights Reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>