Syntaxfire

Who it is for

• Cohort course creators
• Coaches productizing expertise
• Agencies building course landing pages
• Professionals upskilling in AI

Layout

1. Header: logo mark + two-tone wordmark, Curriculum / Reviews / Pricing / Why us / FAQs, outlined orange 'Enroll now' button; scroll-aware active link underline
2. Countdown strip: 'Limited time offer ends in' with HH:MM:SS tiles
3. Hero on dark grid with orange glow: cohort start pill, headline mixing bold sans and orange italic serif word, subline, Prompt Analyzer demo input with score, Enroll CTA
4. Course structure: six-module accordion
5. Trusted by professionals: four big stats, star-rated review cards, embedded video reviews
6. Meet your instructor
7. Pricing: plan toggle with two plans
8. Why choose us: feature cards marquee; 3D globe visualization
9. FAQs and contact sales form; footer

Palette

Energetic, premium, urgent, techy, warm. A dark studio lit by an orange spotlight.

• background#141414
• text#fafafa
• primary (flame orange)#f97015
• card#1c1c1c
• secondary#262626
• border#333333
• muted text#a3a3a3

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type

Display

Funnel Sans 700, 60px hero with -1.5px tracking; Lora italic serif in orange for emphasized words and stat numerals

Body

Funnel Sans 16px

Sans/serif contrast inside headlines creates a signature highlight; serif numerals make stats feel premium.

Spacing and imagery

Centered hero, 1150px container, 8px radius buttons, 12px cards, grid-line background texture, generous section gaps.

Radial orange glow over a subtle grid; interactive UI demo instead of photos; instructor photo; video testimonial thumbnails; Three.js globe with points.

Components

• Scroll-aware nav
• Countdown strip
• Two-tone serif/sans headline
• Prompt analyzer demo widget
• Curriculum accordion
• Stat counters
• Review cards with stars
• Video review embeds
• Instructor bio
• Pricing toggle and plan cards
• Feature cards marquee
• 3D globe
• FAQ accordion
• Contact sales form

Interactions

• Live countdown
• Prompt analyzer scores and suggests improvements
• Accordion modules
• Monthly/one-time pricing toggle
• Nav highlights section in view
• Globe rotation and hover
• Page transitions across five routes
• Lead form submission with validation

Data

• Module{index, title, summary, lessons[]}
• Review{name, role, rating, quote, videoUrl}
• Plan{id, name, price, billing, features[], highlighted}
• Lead{name, email, company, teamSize, message}
• CohortConfig{startDate, offerEndsAt, seats}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Syntaxfire**, a landing site for a fictional six-week live cohort that teaches professionals to write effective AI prompts. Visitors should feel urgency (next cohort date, offer countdown), try a mini interactive demo, understand the curriculum, trust the outcomes, pick a plan and enroll, while teams can contact sales.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Accordion, Tabs/Toggle, Card, Dialog, Form), lucide-react, Framer Motion for page transitions and reveals, Three.js via react-three-fiber (lazy-loaded) for the globe, react-hook-form + zod, React Router for five routes (home, curriculum, pricing, team plans, FAQ). **Supabase**: `leads` table for contact-sales and `waitlist` table; an Edge Function for inserts with validation and rate limiting; enrollment via hosted checkout links.

### Pages & layout
1. **Home** – header with icon + two-tone wordmark, five anchor links, outlined orange "Enroll now". Countdown strip ("Offer ends in" with digit tiles). Hero on a dark grid with a radial orange glow: pill "Next cohort starts {date}", headline with one word in orange italic serif, subline, a "Prompt analyzer" demo card (text field, score out of 100, "Improve" suggestions from a local heuristic), and the CTA. Curriculum accordion (six modules). Social proof: four stats, three review cards with stars, two video reviews. Instructor section. Pricing with a toggle (pay once / installments) and two plans. "Why choose us" feature cards. Globe of learner locations. FAQs. Final CTA.
2. **Team plans** – benefits and contact-sales form. Other routes expand sections.

### Design system
- Tokens: `--background: #141414`, `--foreground: #fafafa`, `--primary: #f97015`, `--primary-foreground: #050505`, `--card: #1c1c1c`, `--secondary: #262626`, `--border: #333333` (decorative), `--input-border: #676767`, `--muted-foreground: #a3a3a3`, `--radius: 0.5rem`.
- Fonts: Funnel Sans (or Manrope) 400/600/700 and Lora italic for highlight words and stat numbers. Scale: 12 / 14 / 16 / 18 / 24 / 36 / 48 / 60.
- Spacing: 8px base; sections 128px; grid background 64px squares at 4% white.
- Motion: glow pulse 6s; countdown digit flip 200ms; accordion 200ms; globe slow rotation; route fade 250ms.

### Components & interactions
Nav (active section underline via scroll-spy), countdown (running, expired → "Enrollment open" state), analyzer (empty, typing, scoring, results with 2–3 suggestions, reset), accordion (one open at a time, keyboard), stat, review card, video review (poster → player), pricing toggle (with prices updating and a "save X" hint), plan card (highlighted, disabled when sold out), globe (fallback static image when WebGL unavailable), contact form (name, work email, company, team size, message; errors; submitting; success; error).

### Data & state
`Module{index,title,summary,lessons[]}`, `Review{name,role,rating,quote,videoUrl?}`, `Plan{id,name,price,installmentPrice,features[],highlighted}`, `Cohort{startDate,offerEndsAt,seatsLeft}`, tables `leads(id,name,email,company,team_size,message,created_at)` and `waitlist(id,email,created_at)`. Content in typed config. Seed sample reviews labeled as illustrative and a fictional instructor.

### Accessibility
Orange `#f97015` on the dark background is 6.45:1 (6.0:1 on cards), fine for text; buttons use `#050505` on orange (7.1:1). Muted `#a3a3a3` is 7.3:1 on the page and 6.8:1 on cards. Form fields use `--input-border: #676767` (3:1+); `#333333` borders are decorative. Countdown uses a static readable sentence for screen readers and does not announce every second. The analyzer is a labeled textarea with results in a live region. Accordion follows the disclosure pattern. The globe is decorative with a text list of regions. Video reviews have captions. Reduced motion stops glow pulse, globe spin and flips.
Verified contrast: body text on dark background #fafafa on #141414 = 17.65:1; orange highlight text on dark background #f97015 on #141414 = 6.45:1; orange text on card #f97015 on #1c1c1c = 5.97:1; dark label on orange button #050505 on #f97015 = 7.14:1; muted text on dark background #a3a3a3 on #141414 = 7.3:1.

### Security
Edge Function validates `leads` and `waitlist` input with zod, enforces honeypot and rate limits; RLS denies all public reads and allows inserts only via the function. The analyzer runs locally; if you later call an AI API, do it from an Edge Function with the key in env, a per-IP quota and output escaping. Payments via hosted checkout links only. No secrets in client code.

### Performance & SEO
Lazy-load Three.js only when the globe scrolls into view; code-split routes. Course JSON-LD with offers, FAQPage schema, OG image. Keep LCP under 2.5s by rendering hero text first. Lighthouse 90+.

### Guardrails
- Fictional course brand, instructor and placeholder media; no real company logos.
- Stats and reviews labeled as sample until real; no fabricated testimonials presented as genuine.
- Collect minimal lead data.
- Small typed components, no `any`, visible errors.
- Done when: countdown handles expiry; analyzer gives deterministic feedback; pricing toggle updates prices; leads save through the function; the globe loads lazily with a fallback; keyboard users can complete every flow.

Open the builderAll templatesThis palette on its own