# New Website Workflow SOP This Standard Operating Procedure (SOP) defines the high-end development standards for Gnomad Studio. It ensures that every website draft is transformed into a premium, high-performance, and mobile-optimized production application. ## 1. Foundation & Technical Architecture - **Centralized Config (`data.ts`)**: Always extract hardcoded text, contacts, and meta-data into a central `src/data.ts`. - **The Favicon Requirement**: Initialize a unique, high-quality favicon at the start of every project. - **🚨 Vite Deployment Pathing (NEO)**: - Set `base: './'` in `vite.config.ts` to prevent 404s on Hostinger/demo subdirectories. - Use **dot-relative paths** (e.g., `src="./logo.png"`) for all assets. - **Pre-Flight Build**: Run a local production build (`npm run build`) and preview it to verify asset paths before every push. ## 2. Visual Design & Cinematic Interaction - **Dual-Theme Support**: Implement site-wide Light and Dark mode using Tailwind `dark:` variants. - **Cinematic Entrance (NIOBE)**: Use `framer-motion` for page entrance transitions (fade-in-up) on heroes and primary cards. - **Interactive Micro-Animations**: - **The "Running Light"**: Apply the border-beam animation to the primary header CTA. - **Motion Priming**: Subtle hover scale (1.02) and glow effects on interactive elements. - **Glassmorphism**: Use `backdrop-blur-md` and semi-transparent borders for internal cards. ## 3. The "Barracks" Mobile & Accessibility Standard - **The Unit Principle**: Every grid card must be a single clickable UI unit (wrapped in `` or ``). - **Touch Ergonomics (NIOBE)**: Ensure all interactive targets are at least **44x44px**. - **The "Bleed Scroller" Pattern**: - Expand horizontal scrollers beyond the container with `-mx-6 px-6`. - Use `snap-x mandatory` and `snap-start` for tactile mobile scrolling. - **CRITICAL**: Include an invisible `div` spacer at the end of every scroller. - **Form Ergonomics**: Set all inputs to `text-base` (16px) minimum to prevent iOS automatic zoom-on-focus. ## 4. Growth, SEO & Conversion (OPTIMUS) - **Conversion-First Lead Gen**: Replace passive contact forms with **Multi-Step Wizards** (Intake Triage) or **Interactive EstimateFlows**. - **Social & OG Ready**: - Provide a dedicated **1200x630px OG Image** for social sharing. - Implement specific JSON-LD schemas (`LocalBusiness`, `NGO`, or `Product`). - **Review Dominance**: Inject persistent, floating Google Review widgets directly into the layout. - **GA4 Insight Strategy**: Every website must include Google Analytics 4 (GA4) tags (`gtag.js`) in the `` of the entry point file. For Gnomad properties, use `G-E1RZ70YGNE`; for client sites, create a new property and provide the ID. ## 5. Compliance & Legal Safeguards (MATLOCK) - **Access Control**: Implement a 21+ **Age Verification Gate** for all cannabis/dispensary clients. - **Accessibility Audit**: All builds must pass a WCAG 2.1 Level AA scan (ARIA labels, color contrast, keyboard nav). - **Privacy & Attribution**: - Include a clear Privacy Policy link in the footer. - Add "AI-Assisted, Human-Verified" attribution where applicable for transparency. ## 6. Automated DevOps (Hostinger) - **GitHub Actions (`deploy.yml`)**: automated CI/CD using `--legacy-peer-deps`. - **Vault Security**: Never hardcode credentials; always use GitHub Secrets. --- > [!TIP] > This SOP is the Gnomad Studio Gold Standard. No project is considered "Done" until every checkpoint is verified.