---
import { Image } from "astro:assets";
import Code2promptLogo from "/src/assets/logo_light_v0.0.1.svg";
---
<section
id="header"
class="w-full bg-gradient-to-b from-gray-900 to-blue-900 text-white py-16 min-h-[100vh] relative"
>
<div class="flex flex-col items-center justify-center p-8">
<a href="/docs/welcome">
<Image
src={Code2promptLogo}
alt="Code2Prompt Logo"
class="h-[180px] mx-auto"
/>
</a>
<h1 class="text-4xl font-bold mt-6 mb-2">Code2Prompt</h1>
<p class="text-xl text-center mt-2 mb-8 max-w-2xl">
Transform Your Code into AI-Optimized Prompts in Seconds
</p>
<div class="flex gap-4 flex-wrap">
<a href="/docs/welcome">
<button
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-200"
>
Documentation
</button>
</a>
<a href="/docs/how_to/install">
<button
class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-200"
>
Installation
</button>
</a>
</div>
</div>
<!-- Scroll Indicator Arrow -->
<div
id="scroll-indicator"
class="absolute bottom-8 opacity-70 hover:opacity-100 transition-all duration-300 cursor-pointer"
style="left: 50%; transform: translateX(-50%);"
>
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="text-white drop-shadow-lg block"
>
<path
d="M7 10L12 15L17 10"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
</div>
</section>
<script>
// Handle scroll indicator visibility
const scrollIndicator = document.getElementById("scroll-indicator");
function handleScroll() {
if (scrollIndicator) {
if (window.scrollY > 50) {
// Hide arrow when scrolled down
scrollIndicator.style.opacity = "0";
scrollIndicator.style.transform = "translateX(-50%) translateY(20px)";
scrollIndicator.style.pointerEvents = "none";
} else {
// Show arrow when at top
scrollIndicator.style.opacity = "0.7";
scrollIndicator.style.transform = "translateX(-50%) translateY(0)";
scrollIndicator.style.pointerEvents = "auto";
scrollIndicator.style.display = "block";
}
}
}
// Add scroll event listener
window.addEventListener("scroll", handleScroll);
// Handle click on scroll indicator
if (scrollIndicator) {
scrollIndicator.addEventListener("click", () => {
window.scrollTo({
top: window.innerHeight,
behavior: "smooth",
});
});
}
</script>
<style>
@keyframes bounce {
0%,
20%,
53%,
80%,
100% {
transform: translateX(-50%) translateY(0);
}
40%,
43% {
transform: translateX(-50%) translateY(-10px);
}
70% {
transform: translateX(-50%) translateY(-5px);
}
90% {
transform: translateX(-50%) translateY(-2px);
}
}
#scroll-indicator {
animation: bounce 2s infinite;
}
</style>
