Ctrl+K
You are an expert Shopify front-end developer. Generate one self-contained, production-ready HTML file that demonstrates a streamlined collection page for “Acme Corporation”. Tech stack: • HTML5 (semantic tags) • TailwindCSS 3.x utility classes (no custom CSS if avoidable) • Alpine JS v3 (only for toggles and mini-cart—keep to < 1 KB) Overall goals: Fully responsive (mobile-first, looks great from 360 px up to 1440 px). Fast: lazy-load imagery, use CSS Grid/Flex, no carousels or heavy scripts. Accessible & SEO-friendly: correct aria labels, logical heading hierarchy, alt text placeholders. Beautiful UX but minimalist—avoids “fancy web-store clutter” while showcasing the core store components for stakeholder review. <header> • Slim announcement bar (dark bg, white text) – dismissible with Alpine. • Main nav: left-aligned logo (links to “/”), inline links (Home, About, Contact), right-aligned icons (search, account, cart with badge). • On ≤768 px: collapse nav links into hamburger button that reveals vertical menu. </header> <main> • Collection hero: - Banner img (1200×400 placeholder) – object-cover, sm:h-48 md:h-64. - Collection title (h1) + subtitle (max-width prose). • Filter/sort bar: - “Sort by” select (Featured | Price Low-High | Price High-Low | Newest). - “Filter” button (Alpine slide-down drawer) with: ▸ Availability (checkbox in-stock) ▸ Price range (min / max inputs) ▸ Collapse on outside click / Esc. • Product grid: - CSS Grid: 2 cols (sm), 3 cols (md), 4 cols (xl). Gap-4. - Each card: square image (lazy), product title, price, unobtrusive “Add to cart” (AJAX-style via Alpine stub), hover second image FX. • Pagination: basic numbered list + “Next”. • Trust strip: flex items with icons & short captions (Shipping | Returns | Secure payments). </main> <footer> • Newsletter sign-up (input + button). • Two-col link list (Policies, Support, Social). • Copyright notice. </footer> 2️⃣ DESIGN & UX DETAILS Tailwind colour palette: neutral grays + one accent (#2563eb or blue-600) for CTAs. Use prose class for readable text blocks. Fixed header shadow on scroll (sticky top-0). Product image hover: group-hover:opacity-0 / second img absolute overlay. Cart badge updates via Alpine reactive cartQty. Form controls styled with form-input, form-select, form-checkbox plugin classes (assume Tailwind Forms plugin). 3️⃣ PERFORMANCE TOUCHES <link rel="preconnect"> to fonts.gstatic.com (if using Google Font, but OK to stick to system UI). loading="lazy" on all <img>. Only one tiny inline <script> block (Alpine CDN import + minimal component code). No external icons—use Heroicons (outline) via inline SVG for zero network calls. 4️⃣ PLACEHOLDERS & COMMENTS Use lorem titles like “Acme Widget A”. Price placeholders “₹1,299” etc. Comment every major section with <!-- SECTION: Collection Hero --> etc. for easy scanning. 5️⃣ DELIVERABLE Return one complete HTML document wrapped in html Copy Edit <!DOCTYPE html> <html lang="en"> … </html> that can be saved as collection-demo.html and opened locally to see the full responsive behaviour. Do NOT include any explanatory text outside the code block—just the file contents. - Follow Up Deployment
a6b4368 verified