121 lines
8.6 KiB
Markdown
121 lines
8.6 KiB
Markdown
# Implementation Plan: Candle Company Marketing Webpage
|
||
|
||
## Goal
|
||
Design and implement a single-page (or small multi-section) marketing website for a candle company that showcases products, brand story, and enables direct purchase or wholesale inquiries.
|
||
|
||
## Ambiguity to Resolve Before Coding
|
||
The request is underspecified. Before implementation, the parent/owner should confirm the following (these are listed in **Risks** as well):
|
||
- Company name, brand voice, color palette, and logo (or placeholders acceptable).
|
||
- Product catalog: number of SKUs, scent names, prices, sizes, and imagery (or placeholders acceptable).
|
||
- Commerce model: direct checkout (Shopify, Stripe, Snipcart) vs. "request a quote" / wholesale form vs. informational only.
|
||
- Tech stack: plain HTML/CSS/JS, a static site generator (Astro, Eleventy, Hugo), or a React/Next.js app.
|
||
- Hosting target: GitHub Pages, Netlify, Vercel, or self-hosted.
|
||
- Pages required: single landing page, or Home / Shop / About / Contact split.
|
||
- Compliance: any claims (e.g., "eco-friendly", "soy", "hand-poured") need substantiation; FDA/CPSC prop-65 warnings if marketed in CA.
|
||
|
||
Default assumptions (used to make the plan concrete; can be overridden):
|
||
- **Stack**: Astro (static-first, SEO-friendly, easy to deploy to Netlify/Vercel).
|
||
- **Scope**: Home, Shop, About, Contact — 4 routes plus a shared layout.
|
||
- **Commerce**: Snipcart (drop-in cart) or a simple "Add to Cart" UI that posts to a hosted checkout. If the owner prefers no commerce, replace Shop with a product gallery and a Contact form.
|
||
- **Brand**: placeholder name "Ember & Wick", warm neutral palette, serif display + sans body.
|
||
- **Assets**: SVG placeholders for product imagery, real assets to be supplied later.
|
||
|
||
---
|
||
|
||
## Tasks
|
||
|
||
1. **Task 1: Scaffold project**
|
||
- Files: `package.json`, `astro.config.mjs`, `tsconfig.json`, `.gitignore`, `README.md`.
|
||
- Steps: `npm create astro@latest -- --template minimal --no-install`, add Tailwind via `npx astro add tailwind`, install Snipcart loader if commerce is in scope.
|
||
- Acceptance: `npm run dev` serves a blank page at `http://localhost:4321`; `npm run build` produces `dist/`.
|
||
|
||
2. **Task 2: Define design tokens and global styles**
|
||
- File: `src/styles/global.css` (or `tailwind.config.mjs` if using Tailwind).
|
||
- Changes: palette (e.g., warm cream `#F6F1E7`, charcoal `#2B2A28`, ember `#C8553D`, wax `#E9DFC9`), typography scale (serif display, sans body), spacing scale, focus ring, reduced-motion media query.
|
||
- Acceptance: Lighthouse contrast checks pass AA on body text and CTAs.
|
||
|
||
3. **Task 3: Build shared layout**
|
||
- Files: `src/layouts/BaseLayout.astro`, `src/components/SiteHeader.astro`, `src/components/SiteFooter.astro`, `src/components/SeoHead.astro`.
|
||
- Changes: sticky header with nav (Home / Shop / About / Contact), mobile hamburger, footer with newsletter signup (Mailchimp/Buttondown embed), SEO meta, Open Graph, favicon, JSON-LD `Organization` schema.
|
||
- Acceptance: Header collapses to a working menu at <768px; OG image preview renders when sharing.
|
||
|
||
4. **Task 4: Author content collection for products**
|
||
- Files: `src/content/config.ts`, `src/content/products/*.md` (one file per candle).
|
||
- Changes: Zod schema with `name`, `slug`, `scentNotes` (top/heart/base), `burnHours`, `sizeOz`, `priceUSD`, `image`, `inStock`, `tags[]`. Seed with 6 placeholder SKUs.
|
||
- Acceptance: `astro build` validates all entries; missing fields fail the build.
|
||
|
||
5. **Task 5: Home page**
|
||
- File: `src/pages/index.astro`.
|
||
- Sections: hero with brand tagline + CTA, "Best Sellers" carousel (3–6 products from collection), brand story teaser, Instagram/UGC grid (placeholder images), email capture, footer.
|
||
- Acceptance: LCP < 2.5s on a simulated Fast 3G; hero CTA is keyboard-reachable.
|
||
|
||
6. **Task 6: Shop page**
|
||
- File: `src/pages/shop.astro` plus `src/components/ProductCard.astro`, `src/components/ProductGrid.astro`, `src/components/FilterBar.astro`.
|
||
- Changes: grid of `ProductCard`, client-side filter by `tags` (scent family, size), sort by price/name, "Add to Cart" button wired to Snipcart (or a placeholder alert if commerce out of scope).
|
||
- Acceptance: filter/sort works with no layout shift; empty state when no results.
|
||
|
||
7. **Task 7: Product detail page**
|
||
- File: `src/pages/shop/[slug].astro`.
|
||
- Changes: large image, scent pyramid, burn time, ingredients, care instructions, related products, add-to-cart.
|
||
- Acceptance: dynamic route generates one page per content entry; 404 for unknown slugs.
|
||
|
||
8. **Task 8: About page**
|
||
- File: `src/pages/about.astro`.
|
||
- Sections: founder story, process (sourcing, pouring, curing), sustainability claims (with citations where required), atelier/team photos.
|
||
- Acceptance: every quantitative claim is either sourced or labeled as aspirational.
|
||
|
||
9. **Task 9: Contact / Wholesale page**
|
||
- File: `src/pages/contact.astro`.
|
||
- Changes: form fields (name, email, message, inquiry type: retail/wholesale/press), serverless handler (Astro endpoint `src/pages/api/contact.ts` posting to Resend or Formspree), inline validation, honeypot + Cloudflare Turnstile.
|
||
- Acceptance: form rejects bots in staging; successful submission shows thank-you state and writes nothing to the client console.
|
||
|
||
10. **Task 10: Accessibility and performance pass**
|
||
- Files: across components.
|
||
- Changes: semantic landmarks, alt text on every `<img>`, `aria-live` for cart updates, focus management on mobile menu, lazy-load below-the-fold images (`loading="lazy"`, `decoding="async"`), preload hero image, self-host or subset fonts.
|
||
- Acceptance: axe-core run via `npm run test:a11y` reports zero serious/critical issues; Lighthouse Performance ≥ 90, Accessibility ≥ 95 on the built site.
|
||
|
||
11. **Task 11: Analytics and consent**
|
||
- File: `src/components/Analytics.astro`.
|
||
- Changes: Plausible (cookieless, preferred) or GA4 with a cookie consent banner; respect `prefers-reduced-motion`.
|
||
- Acceptance: no analytics scripts fire before consent; events tracked: `add_to_cart`, `view_item`, `form_submit`.
|
||
|
||
12. **Task 12: Deploy**
|
||
- File: `netlify.toml` or `vercel.json`.
|
||
- Changes: build command `npm run build`, publish `dist/`, security headers (CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy), redirects for trailing slashes.
|
||
- Acceptance: preview deploy URL returns 200; security headers present in response.
|
||
|
||
---
|
||
|
||
## Files to Modify
|
||
- `package.json` — add deps (`@astrojs/tailwind`, `astro`, `@astrojs/sitemap`, `snipcart` if used).
|
||
- `astro.config.mjs` — integrations, site URL, sitemap, image service.
|
||
- `src/styles/global.css` — tokens, base resets, typography.
|
||
- `src/layouts/BaseLayout.astro` — shell, SEO, header, footer.
|
||
- `src/components/*` — header, footer, product card, filter bar, analytics, seo head.
|
||
- `src/pages/index.astro`, `src/pages/shop.astro`, `src/pages/shop/[slug].astro`, `src/pages/about.astro`, `src/pages/contact.astro`.
|
||
- `src/pages/api/contact.ts` — form handler.
|
||
- `src/content/config.ts` and `src/content/products/*.md` — product schema and seeds.
|
||
|
||
## New Files
|
||
- `public/og-image.png`, `public/favicon.svg` — share assets.
|
||
- `public/images/products/*.svg` — placeholder product imagery.
|
||
- `src/env.d.ts` — Astro types.
|
||
- `README.md` — run/build/deploy instructions and content authoring guide.
|
||
|
||
## Dependencies
|
||
- Task 1 blocks all others.
|
||
- Tasks 2 and 3 should land before 5–9.
|
||
- Task 4 blocks Tasks 6 and 7.
|
||
- Task 10 depends on every page being authored.
|
||
- Task 12 depends on Task 10.
|
||
|
||
## Risks
|
||
- **Underspecification**: brand name, palette, copy, product data, and commerce model are not provided. Plan defaults to placeholders; the owner should confirm before design polish.
|
||
- **Compliance**: fragrance allergens (EU IFRA / US FDA), prop-65 in California, and "natural"/"eco" claims need legal review. Include a disclaimer block on product pages until cleared.
|
||
- **Imagery**: stock or original photography significantly affects perceived quality; SVG placeholders look unfinished in production.
|
||
- **Commerce integration**: Snipcart/Stripe accounts and tax/shipping configuration are external dependencies; budget setup time.
|
||
- **Email deliverability**: domain DNS (SPF/DKIM/DMARC) must be set for the contact form and newsletter to avoid spam foldering.
|
||
- **Performance budgets**: large hero images and web fonts are common regression sources; specify a max hero image size (e.g., 200 KB WebP/AVIF) and subset fonts.
|
||
- **Accessibility regressions**: Snipcart's modal and the mobile menu are frequent focus-trap pitfalls; allocate explicit testing time.
|
||
- **i18n**: if the brand sells internationally, currency, language, and date formatting need a strategy (Astro i18n routes or a future migration to a localized CMS).
|