67 lines
4.3 KiB
PHP
67 lines
4.3 KiB
PHP
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50 via-pink-50 to-white">
|
|
<div class="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-purple-300 opacity-30 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute top-40 -right-24 h-72 w-72 rounded-full bg-amber-300 opacity-30 blur-3xl"></div>
|
|
|
|
<?php $headerBgClass = 'bg-transparent'; require __DIR__ . '/header.php'; ?>
|
|
|
|
<div class="relative max-w-[1400px] mx-auto px-6 py-16 lg:py-24 grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<p class="text-sm font-semibold tracking-widest text-purple-600 uppercase mb-4">Imagine · Mix · Create</p>
|
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-gray-900 leading-tight">
|
|
Bring your
|
|
<span class="bg-gradient-to-r from-purple-600 via-pink-500 to-amber-500 bg-clip-text text-transparent">imagination</span>
|
|
to life.
|
|
</h1>
|
|
<p class="mt-6 text-lg text-gray-600 max-w-lg">
|
|
Create unique, AI-generated critters from your favorite combinations. Choose an
|
|
<span class="font-semibold text-gray-800">adjective</span>,
|
|
<span class="font-semibold text-gray-800">animal</span>,
|
|
<span class="font-semibold text-gray-800">action</span>,
|
|
and <span class="font-semibold text-gray-800">place</span> — and discover something completely new.
|
|
</p>
|
|
<div class="mt-8 flex flex-wrap gap-4">
|
|
<a href="register.php" class="inline-flex items-center rounded-full bg-gradient-to-r from-purple-600 to-pink-500 px-6 py-3 font-semibold text-white shadow-md hover:from-purple-700 hover:to-pink-600">
|
|
Sign Up Free
|
|
</a>
|
|
<a href="login.php" class="inline-flex items-center rounded-full bg-white px-6 py-3 font-semibold text-gray-800 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50">
|
|
Log In
|
|
</a>
|
|
</div>
|
|
<div class="mt-10 flex flex-wrap gap-6 text-sm text-gray-600">
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-pink-100 text-pink-600"><i data-lucide="zap" class="h-4 w-4"></i></span>
|
|
Unique creations
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-100 text-amber-600"><i data-lucide="sparkles" class="h-4 w-4"></i></span>
|
|
Save your favorites
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-purple-100 text-purple-600"><i data-lucide="rainbow" class="h-4 w-4"></i></span>
|
|
Remix and explore
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<p class="hidden sm:block absolute -top-8 left-8 z-10 -rotate-6 font-semibold text-gray-700 italic">
|
|
<i data-lucide="arrow-up-right" class="inline h-4 w-4 text-purple-500"></i> Endless possibilities
|
|
</p>
|
|
<div class="relative rounded-3xl bg-white p-3 shadow-xl ring-1 ring-gray-100">
|
|
<img
|
|
src="assets/hero-image.png"
|
|
alt="A cute AI-generated critter"
|
|
class="w-full rounded-2xl object-cover"
|
|
>
|
|
</div>
|
|
<div class="absolute -bottom-6 left-6 flex items-center gap-3 rounded-2xl bg-white px-4 py-3 shadow-lg ring-1 ring-gray-100">
|
|
<div>
|
|
<p class="font-semibold text-gray-900">Fluffy Pig</p>
|
|
<p class="text-sm text-gray-500">Building · On the Farm</p>
|
|
</div>
|
|
<i data-lucide="heart" class="h-4 w-4 text-pink-500"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|