turns-00085.parquet:43243
43dc0497914902662389da63degenerate_repetitionAbsentFinal dense release
USER
Create a modern, responsive landing page for a clothing e-commerce brand using Tailwind CSS. The primary brand color is #034079. The page should include a header with logo and nav, hero section with a call-to-action, featured products grid, testimonials, and a footer. Keep the design clean and minimal, optimized for mobile. Output should be a complete functional HTML
ASSISTANT
```html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Clothly - Modern Clothing Brand</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Customizing the primary brand color */
:root {
--brand-color: #034079;
}
.text-brand {
color: var(--brand-color);
}
.bg-brand {
background-color: var(--brand-color);
}
.border-brand {
border-color: var(--brand-color);
}
</style>
</head>
<body class="bg-white text-gray-900 font-sans antialiased">
<!-- Header -->
<header class="sticky top-0 z-30 bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="text-brand font-extrabold text-2xl tracking-tight">Clothly</a>
<nav class="hidden md:flex space-x-8 text-gray-700 font-medium">
<a href="#products" class="hover:text-brand transition">Products</a>
<a href="#testimonials" class="hover:text-brand transition">Testimonials</a>
<a href="#footer" class="hover:text-brand transition">Contact</a>
</nav>
<button id="mobile-menu-button" aria-label="Toggle menu" class="md:hidden focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
</svg>
</button>
</div>
<!-- Mobile Menu -->
<nav id="mobile-menu" class="md:hidden hidden border-t border-gray-200">
<div class="px-5 pt-4 pb-4 space-y-2 flex flex-col text-gray-700 font-medium">
<a href="#products" class="block py-2 hover:text-brand transition">Products</a>
<a href="#testimonials" class="block py-2 hover:text-brand transition">Testimonials</a>
<a href="#footer" class="block py-2 hover:text-brand transition">Contact</a>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="relative bg-white">
<div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-16 md:py-24 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
<div class="max-w-xl text-center md:text-left">
<h1 class="text-4xl sm:text-5xl font-extrabold text-brand leading-tight">
Dress to Impress,<br />Every Single Day
</h1>
<p class="mt-4 text-gray-700 text-lg sm:text-xl max-w-md">
Discover our exclusive collection of modern, sustainable, and comfortable clothing. Made for those who value style and quality.
</p>
<a href="#products" class="inline-block mt-8 px-8 py-3 bg-brand hover:bg-[#022a58] text-white font-semibold rounded-md shadow-md transition focus:outline-none focus:ring-4 focus:ring-[#034079]/50">
Shop Now
</a>
</div>
<div class="w-full max-w-md">
<img
src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=600&q=80"
alt="Stylish person wearing modern clothing"
class="rounded-lg shadow-lg object-cover w-full h-80 sm:h-[360px]"
loading="lazy"
/>
</div>
</div>
</section>
<!-- Featured Products -->
<section id="products" class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-extrabold text-brand text-center mb-12">
Featured Products
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<article class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-white">
<img
src="https://images.unsplash.com/photo-1521334884684-d80222895322?auto=format&fit=crop&w=600&q=80"
alt="Classic White Shirt"
class="w-full h-64 object-cover"
loading="lazy"
/>
<div class="p-4">
<h3 class="font-semibold text-lg text-gray-900">Classic White Shirt</h3>
<p class="mt-2 text-gray-600">$45.00</p>
<a href="#" class="mt-4 inline-block text-brand font-medium hover:underline">View Details</a>
</div>
</article>
<!-- Product 2 -->
<article class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-white">
<img
src="https://images.unsplash.com/photo-1495121605193-b116b5b09a38?auto=format&fit=crop&w=600&q=80"
alt="Modern Denim Jacket"
class="w-full h-64 object-cover"
loading="lazy"
/>
<div class="p-4">
<h3 class="font-semibold text-lg text-gray-900">Modern Denim Jacket</h3>
<p class="mt-2 text-gray-600">$89.00</p>
<a href="#" class="mt-4 inline-block text-brand font-medium hover:underline">View Details</a>
</div>
</article>
<!-- Product 3 -->
<article class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-white">
<img
src="https://images.unsplash.com/photo-1530845641392-33e0a59a74b0?auto=format&fit=crop&w=600&q=80"
alt="Casual Chinos"
class="w-full h-64 object-cover"
loading="lazy"
/>
<div class="p-4">
<h3 class="font-semibold text-lg text-gray-900">Casual Chinos</h3>
<p class="mt-2 text-gray-600">$65.00</p>
<a href="#" class="mt-4 inline-block text-brand font-medium hover:underline">View Details</a>
</div>
</article>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="bg-[#f8fafc] py-16">
<div class="max-w-3xl mx-auto px-5 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-extrabold text-brand mb-12">What Our Customers Say</h2>
<div class="space-y-12">
<blockquote class="relative bg-white p-8 rounded-lg shadow-md">
<p class="text-gray-700 italic">
“Clothly’s clothes not only look fantastic but feel incredibly comfortable. I get compliments everywhere I go!”
</p>
<footer class="mt-4 text-sm font-semibold text-brand">— Sarah K.</footer>
</blockquote>
<blockquote class="relative bg-white p-8 rounded-lg shadow-md">
<p class="text-gray-700 italic">
“The quality is outstanding and the eco-friendly materials make me feel good about what I wear.”
</p>
<footer class="mt-4 text-sm font-semibold text-brand">— James L.</footer>
</blockquote>
<blockquote class="relative bg-white p-8 rounded-lg shadow-md">
<p class="text-gray-700 italic">
“Fast shipping and amazing customer service. I’m a loyal customer for life!”
</p>
<footer class="mt-4 text-sm font-semibold text-brand">— Maria T.</footer>
</blockquote>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer" class="bg-brand text-white py-12 mt-16">
<div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
<p class="text-center md:text-left text-sm">© 2024 Clothly. All rights reserved.</p>
<nav class="flex space-x-6 text-sm">
<a href="#" class="hover:underline">Privacy Policy</a>
<a href="#" class="hover:underline">Terms of Service</a>
<a href="#" class="hover:underline">Contact Us</a>
</nav>
</div>
</footer>
<script>
// Mobile menu toggle
const btn = document.getElementById("mobile-menu-button");
const menu = document.getElementById("mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
</script>
</body>
</html>
```