As a user, I want to experience a visually cohesive landing page that exactly matches the mock-design pages in structure, layout, and color palette. This task covers applying the global color theme (#F5F9FC background, #E3F2FD surface, #212121 text, #00C853 accent, #B0BEC5 muted), typography, and shared layout components (header, footer, section spacing) across all pages based on the existing JSX designs. Remove any scaffold pages that are not part of the Hollow-Cannabis design (e.g., login, signup, welcome, dashboard/overview, dashboard/ai-assistant, dashboard/settings). Ensure mobile and desktop responsiveness is baked in from the start.
As a backend developer, I want to implement a FastAPI endpoint that serves drop configuration data (unit count, launch datetime, scarcity message, dispensary deep link, CTA state pre/post launch) so the frontend countdown timer and CTA components can dynamically reflect the current drop state without hardcoding values.
As a backend developer, I want to implement a FastAPI endpoint that aggregates and serves social proof content (social mentions, partner co-signs, press coverage) so the landing page social proof section can pull in real or curated content dynamically.
As a user, I want to see a full-width hero section featuring the packaging design image (provided in chat) with a maker-first headline ('Toad Venom. The maker leads.') and no platform branding visible in the fold. The packaging image should be full-width and optimized for both mobile and desktop. Implement based on the existing Landing (v1) JSX design.
As a user, I want to browse and purchase the drop product on the Dispensary Menu page (deep-linked from the landing page CTA), where I can view product details and proceed to purchase at Squintz Foreign. Implement based on the existing Dispensary Menu (v1) JSX design, ensuring it is responsive and connects seamlessly from the landing page CTA.
As a user, I want to read rich text and view visuals in the 'Meet the Maker' section that tells Toad Venom's background, pheno-hunting story, underground reputation, and why this drop matters. No video — rich text and visuals only. Implement based on the existing Landing (v1) JSX design.
As a user, I want to read the production story section ('Nature's Lab: the craft, uncompromised') covering licensed processing, honoring the original wash, and how the craft made it on-shelf. Implement as a rich-text + visuals section based on the Landing (v1) JSX design.
As a user, I want to see information about Squintz Foreign dispensary (veteran-owned, 5-star, cultural hub in the SFV) on the landing page so I know where the product will be available. Implement based on the Landing (v1) JSX design.
As a user, I want to see a dynamic countdown timer represented by a vibrant green (#00C853) beaker that smoothly empties as time runs out, integrated into the 'Countdown Timer + Scarcity Line' section directly after the storytelling sections. The liquid level must decrease smoothly (no ticks). On hover, display exact time remaining in hours, minutes, and seconds. Implement based on Landing (v1) JSX design.
As a user, I want to see scarcity messaging like '250 units. 72 hours.' integrated alongside the countdown beaker timer so I understand the limited availability of the drop. Implement as part of the countdown section based on the Landing (v1) JSX design.
As a user, I want to click a CTA button pre-launch to add the drop event to my calendar (Google/Apple/Outlook), so I don't miss the launch. Implement the calendar deep-link CTA based on the Landing (v1) JSX design.
As a user, I want to click a launch-day CTA ('Available only on Weedmaps') that deep-links directly to the product on the Squintz Foreign Weedmaps menu so I can purchase the product on launch day. Implement based on the Landing (v1) JSX design.
As a user, I want to see social proof on the landing page including social media mentions, partner co-signs, and press coverage so I feel confident about the credibility and cultural authenticity of the drop. Implement based on the Landing (v1) JSX design.
As a frontend developer, I want to integrate the drop configuration API into the countdown timer, scarcity messaging, and CTA components so that unit count, launch time, and deep-link URL are driven by backend data rather than hardcoded values.
As a frontend developer, I want to integrate the social proof API into the social proof section of the landing page so that mentions, co-signs, and press coverage are pulled dynamically from the backend rather than being static.
As a user, I want the landing page to load within 3 seconds on both mobile and desktop, with smooth animations (especially the beaker countdown), so that the experience feels premium and frictionless. This task covers image compression/lazy-loading, code splitting, animation performance auditing (60fps target), and Lighthouse performance review.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!