Build responsive Saas website (public pages only)

**VORA** (https://vora.build) is business management software for US trade contractors: landscaping, pool builders, general contractors, roofers, electricians and more. It runs purchasing, job costing, crews and subcontractors in one place, so the owner stops being the person who holds everything together. The current pre-launch site is live on vora.build. We're replacing it with a new public marketing site of about 50 pages. **The planning is done.** You'll get: - **A complete wireframe**: every page, its structure, headings, internal links and SEO metadata, all approved. - **VORA brand guidelines** (PDF): logo, color, typography and tone. - **A technical SEO spec** covering rendering, URLs, redirects, structured data, robots, sitemap, performance targets and analytics. - **All content and product visuals from us.** I supply the copy, images, data and VORA product screens. You don't write copy or design the product UI; you bring them to life on the page. - **You create the small site visuals**: avatars, icons, small illustrations, decorative graphics, background shapes and similar supporting elements, all in VORA's brand style. Avatars are illustrative (e.g. crew members inside an animated scene). They must never look like real customer photos or be paired with quotes. - **The existing codebase**: Next.js 16 (App Router), React 19, hosted on Vercel, private GitHub repo. ### What you'll build **1. Two signature pages, scroll-driven and interactive: Home and Why VORA.** These two pages tell VORA's story as you scroll. Think of how monday.com and notion.com reveal their product as the page moves: sections that pin, product screens that build themselves up, transitions tied to scroll position. We want that **quality and feel, not a copy**. The design must be original and built from VORA's brand guidelines, animating the product visuals we provide. - **Home:** H1 "Stop being the person who holds everything together.", then the owner's pain points, then what VORA takes care of, then the trades, then the CTA. - **Why VORA:** four themes (stop chasing your team; get your time back; a business that doesn't depend on you; from owner-operated to well-organized), each told as a scroll scene. - You design the scenes within the brand guidelines and the wireframe's section order and copy. We review and approve the direction before you build. **2. About 45 static pages from one component system.** These are clean, fast and consistent, with light motion at most. They share a small set of templates: - 10 trade pages from one template, with different data per trade; - 4 product feature pages; - 5 comparison pages with real HTML tables; - pricing; - integrations and QuickBooks; - a resources hub and templates; - about, FAQ, demo booking; - 13 docs articles. **3. Content must be easy for us to edit later. No CMS.** We won't use a headless CMS or a page builder. Instead: - **All copy and page data lives in clearly organized content files** in the repo (e.g. `content/home.ts`, `content/trades/pools.ts`), never hard-coded inside components. That covers headlines, paragraphs, FAQs, tables, prices, links and image references. - Adding a trade or changing a FAQ answer should be a content-file edit, not a code change. - Document the content structure in the README, so we (or Claude Code) can make small changes safely after handover. **4. SEO and performance are part of "done".** The site's purpose is to be found on Google and cited by AI answer engines, so the animations must not cost us that: - **All text, headings and links are server-rendered in the initial HTML.** No content that exists only after JS runs or only after you scroll. Animation enhances content that is already in the page. - **Core Web Vitals pass on mobile:** LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1, measured on the scroll pages too. - **`prefers-reduced-motion` is respected:** the scroll pages fall back to a readable static layout. - **Fully responsive.** The scroll experience must work well on phones, not just desktop. - **Accessible:** keyboard navigation, focus states, AA contrast, semantic HTML. - The technical SEO spec is followed in full: metadata, canonicals, redirects, JSON-LD, sitemap and robots. ### Existing site setup (we'll coordinate the migration together) The current vora.build already runs on this stack. We'll agree together what carries over to the new build and how: - **Vercel BotID:** bot protection on forms - **Ahrefs Web Analytics** - **Google Tag Manager with Consent Mode v2** (GA4 runs inside GTM) - **Resend:** form emails, contacts and inbound email - Existing `robots.ts`, `sitemap.ts`, JSON-LD helpers, security headers and redirects ### Out of scope - The VORA app itself: sign-up, login and the product. Public pages link to it. - The estimator's AI back end (we build it). - Copywriting and product UI screens (we provide them). The small supporting visuals are **in** scope (see above). ### How we'll work - **You work on a branch of our GitHub repo.** Every push creates a Vercel preview URL, which is how we review your work. - **Only we merge to `main`**, which publishes to vora.build. No direct pushes to `main`. - Access is shared through GitHub and Vercel invites, never through credentials in chat. ### Deliverables 1. The direction for Home and Why VORA, approved before build (a reference link plus a short description is enough to start) 2. The two scroll pages, built and responsive, on a Vercel preview 3. The shared component library, the page templates and the content-file structure 4. All ~50 pages built with the content I provide 5. Technical SEO spec implemented, and redirects from the current URLs 6. Existing integrations migrated as agreed; GA4 and GTM events wired (the event list is in the spec) 7. The small site visuals (avatars, icons, illustrations, decorative graphics) as optimized SVG or WebP files, with source files handed over 8. Lighthouse / PageSpeed reports for the key templates, and a handover README (including how to edit content) ### Timeline: 2 weeks This is a tight, focused schedule. Content, product visuals, the wireframe and the spec are ready on day one, and we review the same day. Only apply if you can commit to it. ### Milestones (fixed price, paid per milestone) 1. **Days 1–2:** Home and Why VORA direction approved; component system and content-file structure set up 2. **Days 3–7:** Home and Why VORA built on a Vercel preview; templates for trade, feature, compare, pricing and docs 3. **Days 8–12:** all pages populated, small visuals done, SEO spec and integrations implemented, QA on preview 4. **Days 13–14:** final fixes; launch (we merge to `main`), followed by a two-week bug-fix window ### How to apply Please include: 1. **A link to one existing website or template that shows what you're envisioning for the VORA Home and Why VORA pages**, with 2–3 sentences on what you'd take from it and how you'd make it VORA's own. It's a reference for direction only; we won't buy or reuse it. 2. **2–3 links to live sites you built with scroll-driven animation.** Say exactly what you built on each and which library you used. 3. **How you keep scroll-heavy pages fast and SEO-friendly**, in 3–5 sentences. 4. **Your fixed-price estimate per milestone, and your timeline.** 5. **Your availability and time zone overlap** with Dubai (GST, UTC+4). We need a few hours of overlap each working day. 6. **Confirm you can deliver within 2 weeks.** ### Screening questions 1. Share the link to the website or template that best represents your vision for VORA's Home page, and explain why. 2. Which animation library would you use for the Home scroll sequence, and why? 3. How do you make sure scroll-revealed text is still in the server-rendered HTML for search engines? 4. Have you worked with the Next.js App Router (`generateMetadata`, server components)? 5. How would you structure the content so a non-developer can safely change text later without a CMS? ### Budget and timeline - Fixed price, paid by milestone (budget as set on this posting) - Launch within 2 weeks of start ### Working terms - All code, designs and assets are work-for-hire, and VORA owns them on payment. - No third-party themes, templates or paid plugins in the build without approval. All assets must be properly licensed. --- *Thanks for reading this far. Start your proposal with the word "Office" so we know you did.*