# Prompt Templates Copy-paste prompts for common tasks. Replace `{{placeholders}}` with project specifics. --- ## 1. Create homepage from scratch ``` Act as a senior frontend architect. Build a premium, cinematic, dark/gold luxury homepage for {{BRAND}} ({{INDUSTRY}}) using the design DNA in .claude/skills/premium-frontend-designer/. Stack: Next.js 16 App Router · TypeScript · Tailwind v4 · Framer Motion · lucide-react. Composition (top → bottom): 1. Nav (fixed, scroll-aware) 2. Hero (min-h-100svh, parallax halos, 2 CTAs, eyebrow + serif h1 + sub + body) 3. BrandStrip (marquee of capability keywords) 4. About / Story (split 5/7, copy + visual) 5. WhyUCO-style problem→solution comparison 6. Services overview (6 cards) 7. Trusted Clients marquee (use ONLY logos I provide) 8. Stats / Impact metrics (animated counters) 9. Cinematic reel (lazy video) 10. Process / Closed loop (timeline) 11. Industries served 12. Certifications 13. Gallery (4-image bento) 14. Final CTA section 15. Footer (4 columns, no duplication) Brand details I will provide: {{BRAND_LEGAL_NAME, PHONE, EMAIL, WHATSAPP_URL, INSTAGRAM, APP_STORE, GOOGLE_PLAY, AGENCY_CREDIT}} Do NOT invent links. Ask if missing. ``` --- ## 2. Redesign an existing page ``` Inspect {{PAGE_ROUTE}}. Keep the content + intent but rebuild it to match the design DNA in .claude/skills/premium-frontend-designer/. Requirements: - Reuse existing primitives (Section, Container, Button, Reveal, SectionLabel, etc.) — don't duplicate. - Apply the cardGrid + cardCell motion variants for grid entrances. - Add a single gold-accent phrase per h2. - Centralize section padding via the Section primitive (no per-page overrides). - Run typecheck + grep for placeholder hrefs before reporting done. Return a clear file change list with NEW / MODIFIED markers. ``` --- ## 3. Add a polished footer ``` Build a 4-column premium footer for {{BRAND}}. Columns: 1. Brand + contact (logo, tagline, phone, email, WhatsApp, Instagram) 2. Navigation (top-level pages) 3. Services (specific service items) 4. Legal & App (Privacy Policy + 2 store badges) No duplicate link labels across columns. External links open in new tab. Footer bottom row: copyright + tagline + subtle agency credit (gold underline on hover). Watermark: project name in serif, large, opacity-0.025, contained inside footer overflow. Brand details: {{PHONE, EMAIL, WHATSAPP_URL, INSTAGRAM_URL, APP_STORE_URL, GOOGLE_PLAY_URL, AGENCY_CREDIT_URL}} ``` --- ## 4. Add WhatsApp button ``` Add a refined WhatsApp button to: 1. Footer contact stack (icon + label "WhatsApp · {{DISPLAY_NUMBER}}"). 2. Nav (circular icon-only button next to primary CTA, mobile menu pill). 3. Contact page info card (full-width tile w/ icon disc). URL: {{WHATSAPP_API_URL}} Display number: {{+CC XX XXX XXXX}} Use inline SVG (lucide has no WhatsApp glyph). Refined gold tint, not bright green. Hover: gold border + soft glow + scale 1.04. aria-label="Chat with {{BRAND}} on WhatsApp". target="_blank" rel="noopener noreferrer". ``` --- ## 5. Add app store badges ``` Add official App Store + Google Play badge SVGs. URLs: - App Store: {{APP_STORE_URL}} - Google Play: {{GOOGLE_PLAY_URL}} Tasks: 1. Download from svgrepo.com (use /show/ path not /download/): - https://www.svgrepo.com/show/303128/download-on-the-app-store-apple-logo.svg - https://www.svgrepo.com/show/303139/google-play-badge-logo.svg 2. Save to public/images/app-store-badge.svg + public/images/google-play-badge.svg. 3. Render via plain (next/image blocks SVG in Next 16). 4. Width: 132 px footer / 140-160 px in hero CTA section. 5. Hover: opacity-85 + -translate-y-0.5. No gold circles. 6. Stack gap-2 (8 px) in footer. 7. aria-label on every anchor. target="_blank" rel="noopener noreferrer". Use the snippet from snippets/AppBadges.tsx as a starting point. ``` --- ## 6. Add client logo section ``` Add a premium "Trusted by leading {{INDUSTRY}} partners" client logo marquee to the homepage (after Services) and About page (after process). Use ONLY these 12 logos I provide: {{LIST OF LOGO URLS}} Tasks: 1. Download each into public/images/clients/ with clean filenames. 2. Create src/lib/clients.ts with typed array { src, alt }. 3. Use recognisable brand names for alt text; for unidentified logos use "{{BRAND}} client logo". 4. Marquee: 50s linear infinite, hover-pause, mask-image edge fade. 5. Tile: h-24 w-44 mobile / h-28 w-52 tablet+. Default grayscale + opacity 70%, hover full color + scale 1.05. 6. Reduced-motion fallback: render a static grid-cols-2 sm:grid-cols-3 lg:grid-cols-6. Use snippets/ClientLogoMarquee.tsx as the base. ``` --- ## 7. Add certificate gallery ``` Replace the document-card list on /certifications with a 4-image gallery showing the actual certificate pages. Use these exact images (download to public/images/certifications/): {{IMG1_URL, IMG2_URL, IMG3_URL, IMG4_URL}} Each image links to the corresponding PDF (already in public/documents/certifications/). Layout: sm:grid-cols-2 lg:grid-cols-4 with aspect-[3/4] portrait tiles. Tile chrome: - Top-left page badge (Page 1 / Page 2 · Annex). - Top-right ArrowUpRight disc. - Bottom caption: mono category in gold + serif title + "Open PDF" CTA. - Hover: scale 1.04, gold ring border, amber radial glow, gold underline sweep. External: target="_blank" rel="noopener noreferrer" on every anchor. Optional: secondary "Need the full PDFs?" pill row below grid with direct download links. Use snippets/CertificateGallery.tsx as a starting point. ``` --- ## 8. Fix mobile responsiveness ``` The {{PAGE}} layout breaks on mobile. Specific issues: {{ISSUES_LIST}} Walk through the responsive checklist in .claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md and fix every applicable item. Test at 320 / 375 / 390 / 414 / 768 / 1024 viewports. Don't redesign — only fix layout, spacing, overflow, clipping. Preserve the visual identity. Return a table of issues + fixes (Before / After columns). ``` --- ## 9. Polish typography sitewide ``` Audit and refine typography across all pages: 1. Hero h1: clamp(2.4rem, 7vw, 6.4rem), leading-[1.0], tracking-[-0.02em]. Add pt buffer for sticky-nav clearance. 2. Two-font system: serif for h1/h2 only, clean sans (Geist/Inter) for everything else. 3. Remove font-mono from long values + body text. Keep only on tiny brand-pattern eyebrow tags if at all. 4. Tracking: reduce all tracking-[0.32em+] on small labels to tracking-[0.22em]. 5. Nav links: text-sm font-medium tracking-[0.005em] (slightly larger + medium weight, near-zero tracking). 6. BrandStrip marquee: smaller (text-xs md:text-sm uppercase) so it doesn't compete with hero. 7. Section labels via SectionLabel primitive — never inline. 8. text-balance on h1/h2, text-pretty on body paragraphs. Confirm: - typecheck clean - HTTP 200 on every route - zero tracking-[0.32em] remaining - no font-mono on user-facing body content ``` --- ## 10. Add Privacy Policy ``` Create /privacy-policy route matching the premium dark/gold style. 9 sections with id="..." anchors + scroll-mt-28: - introduction - information-we-collect - how-we-use-information - contact-form-data - cookies-and-analytics - data-protection - third-party-services - user-rights - contact-information Use brand contact details from lib/content.ts. Effective date stamp at top + metallic-divider. Bottom disclaimer with mailto link in gold underline. Single column max-w-3xl. font-display h2 per section. text-pretty body. Don't write fake legal claims. General professional language only. Tell users they can contact for privacy questions. Add to footer Legal column. ``` --- ## 11. Coolify deploy via Dockerfile ``` Deploy {{PROJECT}} to Coolify with a Dockerfile build pack. Tasks: 1. Add `output: "standalone"` to next.config.ts. 2. Create multi-stage Dockerfile (node:22-alpine, 3 stages: deps → build → run). 3. Add .dockerignore (skip .git, node_modules, .next cache, env files, .claude). 4. Run-stage as non-root user (UID 1001). 5. EXPOSE 3000, CMD ["node", "server.js"] using standalone output. Then via Coolify API: - PATCH application: build_pack="dockerfile", dockerfile_location="/Dockerfile", ports_exposes="3000", domains="https://{{DOMAIN}}" - POST /api/v1/deploy?uuid={{APP_UUID}}&force=true - Poll deployment until terminal status. If "no available server" appears on the domain after deploy: verify DNS resolves to Coolify host IP, then redeploy to trigger Let's Encrypt cert issuance. ``` --- ## 12. General "make this premium" polish ``` Inspect {{COMPONENT_OR_PAGE}}. Identify what doesn't match the premium dark/gold luxury direction in .claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md. Specifically check: - Are buttons using premium variants (gold gradient primary, outline secondary)? - Are cards using the hover lift + amber glow + gold underline sweep pattern? - Is there any cheap iconography or stock-photo placeholder? - Are headings using the serif font with one gold-accent phrase? - Is spacing centralized via Section primitive? - Is motion subtle (no bounces, no scale > 1.05 on hover)? Apply only the changes needed — don't rewrite working sections. Return a list of refinements made. ```