Smart Hydration Tracker (Website Prompt)

UNIVERSAL WEBSITE BUILDER — MASTER PROMPT

ROLE:

Act as a senior frontend developer, UI/UX designer, accessibility specialist, SEO expert, and software architect. Your task is to build a complete, professional, responsive single-product ecommerce landing page based on the configuration below.

The website must be visually appealing, mobile-first, conversion-focused, accessible, and ready for deployment without requiring paid backend subscriptions or complex databases.

---

STEP 1: PROJECT CONFIGURATION

A. Website Type: Selected Website Type: Single-Product E-commerce Storefront (High-Converting Sales Landing Page)

B. Project Information: Website Name: Apex Pulse (Smart Hydration Tracker) Website Purpose: Showcase a single hero product, highlight its features and benefits, answer buyer FAQs, and convert visitors into buyers via a zero-cost checkout flow. Target Audience: Fitness enthusiasts, professionals, and tech-focused consumers looking to improve daily health habits. Brand Description: Minimalist, premium health-tech brand focused on sleek design and everyday utility. Preferred Language: English Reference Websites: Clean, modern landing pages similar to modern consumer hardware launches (e.g., Apple product pages, Oura, Minimalist DTC brands). Existing Project: NO

C. Design Preferences: Design Style: Modern, clean, tech-forward, high contrast Primary Color: Deep Slate / Obsidian (#0F172A) Secondary Color: Electric Cyan / Aqua accent (#06B6D4) Theme: Dark mode default (clean, premium tech aesthetic) Typography: Clean sans-serif (Inter or similar system font stack) Layout: Single-page long-form narrative landing page with sticky navigation and sticky CTA Animation: Subtle (smooth scroll, hover transitions, fade-in on scroll)

D. Technology Stack: Framework: Next.js (App Router) or clean Static HTML/Tailwind Language: TypeScript Styling: Tailwind CSS Icons: Lucide React (lightweight, consistent) Package Manager: npm / pnpm Architecture: Static site generation (JAMstack) suitable for free hosting (Vercel, Netlify, or GitHub Pages).

E. Backend and Database Requirements: Selected Architecture: Static Website with External Services (No paid backend or database). Order Handling: Direct WhatsApp Order Link pre-filled with product name and customer message, plus an optional modal form (Google Form or Formspree integration) for cash-on-delivery details.

F. Required Sections (Single Page Architecture):

1. Sticky Header: Brand logo, quick jump links (Features, Specs, Reviews, FAQ), and "Order Now" action button.
2. Hero Section: Compelling headline, value hook, high-resolution product mockup container, pricing callout, and primary CTA button.
3. Social Proof Bar: Trust badges (Free shipping, 30-day money-back guarantee, 5-star rating summary).
4. Feature Highlights: 3 to 4 core benefits with icon grid and visual layout.
5. Interactive Showcase / Specs: Technical specifications table (battery life, materials, connectivity).
6. Customer Reviews: 3 realistic testimonial cards with star ratings and verified buyer tags.
7. FAQ Accordion: 4 to 5 common pre-purchase questions (shipping time, warranty, return policy).
8. Sticky Mobile Bottom Bar: Visible on mobile devices showing price and a quick "Buy via WhatsApp" button.
9. Footer: Copyright, basic disclaimer, and links.

G. Required Features:

• 100% Mobile-responsive layout (optimized for one-thumb scrolling)
• Working WhatsApp order generator link (pre-configured with URL query: https://wa.me/?text=Hi,%20I%20want%20to%20order%20the%20Apex%20Pulse)
• Working interactive FAQ accordion (expand/collapse)
• Product image gallery/selector (thumbnail switcher)
• Clean, semantic HTML with meta tags and Open Graph preview setup

---

STEP 2: IMPLEMENTATION INSTRUCTIONS

1. Do not use generic Lorem Ipsum; generate realistic, persuasive copy for the "Apex Pulse" smart hydration bottle.
2. Build the entire landing page with self-contained, modular components.
3. Ensure high contrast and fast loading with clean Tailwind classes.
4. Provide the complete code ready to preview immediately.