---
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Divider } from "@/components/ui/divider";
const MESSAGES = [
"Create a blog template",
"Build a navigation bar",
"Design a pricing section",
"Generate a contact form"
];
---
<section class="w-full min-h-screen py-22">
<div class="absolute top-0 z-[-2] h-screen w-screen bg-zinc-900 bg-[radial-gradient(100%_50%_at_50%_0%,rgba(99,102,241,0.13)_0,rgba(99,102,241,0)_50%,rgba(99,102,241,0)_100%)]"></div>
<div class="container mx-auto px-4 mt-22">
<header class="text-center mb-12">
<div class="absolute top-5 left-5 text-neutral-500 cursor-pointer hover:text-neutral-300 transition-colors duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M9 4v16" /><path d="M14 10l2 2l-2 2" />
</svg>
</div>
<h2 class="text-5xl font-bold text-white mb-4">Hi, <span class="bg-gradient-to-r from-indigo-300 via-violet-400 to-purple-200 text-transparent bg-clip-text">Jhon</span></h2>
<p class="text-neutral-400">What will you build today?</p>
<Divider class="w-1/2 mx-auto mt-5 bg-neutral-600 [mask-image:radial-gradient(circle,black_40%,transparent_70%)] [-webkit-mask-image:radial-gradient(circle,black_40%,transparent_70%)]"/>
</header>
<footer>
<div class="relative max-w-3xl mx-auto">
<Textarea
id="ia"
name="ia"
rows={4}
class="w-full bg-neutral-800 text-neutral-200 rounded-2xl p-5 border border-neutral-700 hover:border-neutral-600 transition-all duration-300 outline-none resize-none placeholder-neutral-500"
placeholder="How can I help you today?"
/>
<Button class="absolute bottom-2 rounded-xl right-2 text-neutral-300 bg-indigo-500/50 hover:bg-indigo-600/50 border border-indigo-500 hover:border-indigo-600 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" /></svg>
Generate
</Button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:flex items gap-2 justify-center mt-5">
{MESSAGES.map(message => (
<Button class="bg-neutral-800 rounded-4xl text-neutral-300 border-neutral-700 hover:bg-neutral-700 text-xs md:text-sm hover:border-neutral-600 transition-all duration-300">
{message}
</Button>
))}
</div>
</footer>
</div>
<style>
textarea {
scrollbar-width: thin;
scrollbar-color: #00000049 #0f172a00;
}
</style>
</section>
Ai-chat-1.astro