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
Create a dynamic, responsive marketplace website that serves as a centralized platform for businesses, restaurants, and organizations to sell their branded t-shirts and apparel. The website should function as a "mall" or "retail clothing store" for companies that lack their own web stores but want to sell their merchandise online. Core Website Structure Requirements 1. Header Section Logo: Centered positioning Navigation Menu: Left side: "Home" and "About" Right side: "Featured Products", "Stores/Retailers" (replacing customization), and "Contact Us" Search Bar: Prominently featured at the top with: Auto-populate functionality (similar to Amazon) Search by product name or business name Recognition of popular keywords and frequently searched businesses Dynamic suggestions based on user activity 2. Hero Banner Section Large, eye-catching hero banner below the header Should be dynamic and changeable through the admin panel Responsive across all devices 3. About Us Section Dedicated to platform information Replace temporary images with relevant collage or professional imagery Remove any QR codes Professional content that builds trust and credibility 4. Featured Products Section Display 4-8 featured products in a clean, organized grid Critical: All product images must be t-shirt mockups, not just logos or artwork Exception: Hard hat products can remain as they represent a specific product line Include product name, price, and business name "View All" button linking to main product catalog Convey a sense of a "trusted website" through professional UI 5. Stores/Retailers Section (Replacing Customization) This is the most critical change from the original design: Purpose: Showcase businesses/resellers on the platform Content Requirements: Display business names that have shops on the marketplace Show "top sellers" or "frequently looked-up sellers" Manual input system for featuring specific sellers Premium placement options for businesses paying extra fees Display options: 4 or 8 rows depending on premium sellers Display Features: Consider automatic scrolling feature (reference: PayNav.com style) Alternative: Static grid display in 2-3 rows Include business logos or names Clickable elements leading to individual store pages Examples to include: Hunter Crabs, Kent Island Fire Department, Native Green Leaf Technical Implementation: Admin panel for manual selection of featured stores Ability to set display frequency for premium sellers Responsive design that works on all devices Smooth transitions and professional appearance 6. Gallery Section Display variety of items from different sellers Initially limited to 4 images due to current inventory Expandable as more products are added Mix of products from various sellers to showcase diversity 7. Testimonials Section Include testimonials from both sellers and high-end buyers Manual input system (not auto-populated) Professional display with customer/seller names Rotating carousel or static grid display 8. Contact Form ("Get In Touch") Mandatory fields: Name, Email Address, Phone Number Comment/Message section Form submissions sent directly to designated email Professional validation and error messaging Confirmation message upon successful submission 9. Email Subscription Newsletter signup option Integration with email management system Submissions directed to designated email GDPR compliance considerations 10. Footer Section Professional footer with relevant links Social media icons Copyright information Quick links to important pages Individual Store Pages Requirements Each business/restaurant should have a dedicated store page with: Page Structure: Business name and logo prominently displayed Product grid showing all available items Product variations: styles, colors, sizes, fabric types Different pricing for different materials (cotton vs. polyester) Product Display Features: T-shirt mockup images (not just logos) Clear pricing information Size selection dropdown Quantity selector "Add to Cart" functionality Product descriptions Business Information: Business address and phone number Links to social media pages (Facebook, Instagram, etc.) Business description/about section Additional Features: Share functionality (WhatsApp, Discord, Outlook, copy link) Sales tracking for each business Percentage-back calculation system Currently disabled payment options (PayPal) with ability to enable later Technical Specifications Responsive Design: Mobile-first approach Breakpoints for tablet and desktop Touch-friendly interface for mobile users Consistent experience across all devices Performance Requirements: Fast loading times Optimized images Lazy loading for product images Efficient code structure Admin Panel Features: Manual control over featured stores display Product management system Order tracking capabilities Sales reporting by business Content management for static pages Design Guidelines Visual Style: Professional, trustworthy appearance Clean, modern interface Consistent use of brand colors High-quality product photography (t-shirt mockups) User Experience: Intuitive navigation Clear call-to-action buttons Easy product discovery Smooth checkout process Professional error handling Key Differentiators Not a customization platform - This is a marketplace for pre-designed branded apparel Business-focused - Serves companies without their own web stores Multi-vendor marketplace - Similar to a mall concept Premium placement options - Revenue model through featured listings Social media integration - Added value for businesses through cross-promotion Implementation Timeline Considerations Replace all logo/artwork images with t-shirt mockups Remove customization section entirely Implement new stores/retailers section Adjust gallery images Create sample business store pages Test responsive design across devices Success Metrics Professional appearance that conveys "legit business" Easy navigation for both buyers and sellers Clear differentiation between businesses Efficient order tracking system Scalable architecture for growth This marketplace should feel like a professional retail environment where employees and customers of various businesses can easily find and purchase their company's branded apparel, while businesses can track their sales and benefit from the platform's marketing reach. - Initial Deployment
