SpectrumInfinite's picture
############################################## ## ROLE ############################################## You are a **senior front-end + WordPress engineer** tasked with rebuilding **Maximage Promotional Products** into a modern, quote-driven B2B portal that rivals HALO, Swag.com, PCNA, Gemline, Pop! Promos, ETS Express and Numo. ############################################## ## PROMO-INDUSTRY MUST-HAVES (WHY) ############################################## • **Quote-First Workflow** – configurable item → instant quote → artwork upload → proof approval → PO (HALO, Pop! Promos) :contentReference[oaicite:0]{index=0} • **Variation Engine** – handle 50 k+ colour / imprint combos per SKU (PCNA’s weekly spotlight pens) :contentReference[oaicite:1]{index=1} • **Dynamic Pricing Matrix** – base + setup + imprint + rush + freight (ETS Express drinkware wizard) :contentReference[oaicite:2]{index=2} • **Supplier Feeds** – live stock & lead time via PromoStandards (open spec) :contentReference[oaicite:3]{index=3} • **Multi-Leg Freight Calc** – vendor → decorator → client split-ship logic (Numo order-status portal shows legs) :contentReference[oaicite:4]{index=4} • **Company Stores / Kitting** – Swag.com “Send-a-Link” gifting & multi-address fulfilment :contentReference[oaicite:5]{index=5} • **Trust / CSR Badges** – Gemline “betterway” CSR, NSF/SQF PDF links :contentReference[oaicite:6]{index=6} • **Resource Hub** – blogs & lookbooks echo HALO and PCNA content marketing :contentReference[oaicite:7]{index=7} ############################################## ## GLOBAL TECH STACK ############################################## WordPress 6.x **block theme** · Tailwind v4 · Vite build · Alpine v3 · Swiper 9 · GSAP 3 ACF Pro for Quote & Proof CPTs · PromoStandards inventory cron · Stripe B2B (PO & card) ############################################## ## FILE MAP ############################################## theme-maximage/ ├─ functions.php – enqueue Vite, register menus, CPT Quote/QuoteItem, PromoStandards cron ├─ theme.json – palette (Max Red #C51428, Charcoal #1E1E1E, Gray-100 #F7F9FA) & fonts (‘Inter’) ├─ resources/ css/, js/, images/ ├─ templates/ front-page.php · page-programs.php · page-resources.php · page-contact.php ├─ cpt-quote.php · cpt-company-store.php └─ parts/ header.php · mega-menu.php · hero.php · discovery-hub.php · programs.php · proof-cta.php · trust-badges.php · blog-teasers.php · client-logos.php · footer.php · quote-drawer.php ############################################## ## HOME-PAGE SECTION SPEC ############################################## 1. **Hero Banner** • Headline “Custom Promotional Products, Endless Possibilities” • Sub-copy + 2 CTAs: “Start Your Quote” (opens 4-step wizard) / “Browse Products”. • Background lifestyle kit + subtle SVG wave (CSS-only). • Customer-type marquee (corporate, events, non-profits) – mirrors Swag.com rotating value props :contentReference[oaicite:8]{index=8} 2. **Product Discovery Hub** • Six category tiles (Apparel, Drinkware, Tech, Eco, Office, Kits). • Faceted filter bar (colour, price, lead time) like HALO grid :contentReference[oaicite:9]{index=9}. • “External Catalogue Search” button opens branded modal; falls back to new tab. • “Trending Now” Swiper pulling PCNA Product-Of-The-Week feed :contentReference[oaicite:10]{index=10}. 3. **Programs & Services** • Cards: Company Stores, Kitting & Drop-Ship, Recognition / Uniforms; copy modelled on HALO solutions :contentReference[oaicite:11]{index=11}. 4. **Virtual Sample / Proof CTA** • Split layout: left animated GIF of Pantone-matched mock-up (Pop! Promos) :contentReference[oaicite:12]{index=12}; right upload form → Quote CPT. 5. **Sustainability / Trust Badges** • NSF & SQF icons + Gemline “betterway” style CSR blurb :contentReference[oaicite:13]{index=13}. 6. **Resources & Case Studies** • 3-post blog teaser; 2 downloadable lookbooks (PCNA new products PDF style) :contentReference[oaicite:14]{index=14}. 7. **Client Logos & Testimonials** • CSS marquee logo strip (HALO partner carousel) :contentReference[oaicite:15]{index=15}; Swiper testimonial cards. 8. **Contact & Quote Form** • Two-column CF7 form (logo upload) + QR / phone; posts Quote CPT status “New”. ############################################## ## HEADER / MENU ############################################## Left logo → Pages: **Products · Industries · Programs · Services · Resources · About** → Quote Bag icon (sticky) → EN/FR toggle. Mega-menu for *Products* lists HALO-style subcats & quick links :contentReference[oaicite:16]{index=16}. ############################################## ## FOOTER ############################################## Brand blurb · Explore (same as header) · Support (Quote Status, Artwork Guide, FAQ) · Compliance (NSF, SQF, CSR) · Connect (email, phone, LinkedIn, Instagram) – mirrors Numo + Gemline layouts :contentReference[oaicite:17]{index=17}. ############################################## ## ACCEPTANCE TESTS ############################################## ✓ Create quote with 1 953 combinations < 3 s. ✓ Proof approval toggles status + email. ✓ Multi-leg freight calc returns total. ✓ PromoStandards feed sync passes health check. ✓ Lighthouse mobile & desktop scores = 100 / 100 / 100 / 100. ✓ EN/FR hreflang, schema.org Product & Organization validated. ############################################## ## DELIVERY ############################################## Return complete Git repo (theme, package.json) + editor manual (Markdown). - Initial Deployment
88a58d8 verified