Agency Process & Methodology Page

Create a polished, confidence-building "How We Work" process page for a digital product agency called "Frameshift" that specializes in designing and building SaaS products. The page should walk prospective clients through the agency's methodology from discovery to launch, demonstrating professionalism and reducing buyer anxiety. The design should feel structured, modern, and collaborative.

1. NAVIGATION BAR
- Logo: "Frameshift" in a geometric sans-serif with a small rotating-square icon in #6366F1 (indigo-500)
- Links: Services, Work, Process (active/underlined), Team, Blog, Contact
- Right side: "Let's Talk" CTA button (solid #6366F1)
- White background, subtle bottom border, sticky on scroll
- Mobile: hamburger menu with slide-in overlay

2. HERO SECTION
- Full-width section with light gradient background (#F5F3FF to white)
- Eyebrow label: "Our Process"
- Headline: "From Idea to Launch in 12 Weeks"
- Subheadline: "We follow a battle-tested, four-phase methodology designed to take SaaS products from concept to market with clarity, speed, and zero surprises."
- CTA: "Book a Discovery Call" (solid indigo) + "Download Process PDF" (outline, download icon)
- Right side: minimal isometric illustration showing the four phases as connected building blocks
- Below hero: client logo bar — "Trusted by teams at" + 6 grayscale logos (Stripe, Notion, Linear, Figma, Vercel, Plaid)

3. PROCESS OVERVIEW (horizontal timeline)
- Section headline: "Four Phases. One Clear Path."
- Horizontal connected timeline with 4 numbered nodes:
  - Phase 1: "Discover" — Weeks 1-2
  - Phase 2: "Design" — Weeks 3-6
  - Phase 3: "Develop" — Weeks 7-10
  - Phase 4: "Deliver" — Weeks 11-12
- Active phase node: solid #6366F1 circle with white number
- Connected by a horizontal progress line with subtle gradient
- Each node shows phase name, duration, and a small icon (magnifying glass, pen tool, code brackets, rocket)
- Mobile: vertical timeline with left-aligned nodes and connecting line

4. PHASE 1 — DISCOVER (detail section, image right)
- Phase badge: "Phase 1 · Weeks 1-2"
- Title: "Understand Your Vision & Users"
- Description: "Every project begins with deep research. We interview stakeholders, map user journeys, audit competitors, and align on success metrics — before a single pixel is designed."
- Deliverables list (checkmark icon each):
  - Stakeholder interview summaries (3-5 sessions)
  - Competitive landscape analysis (5+ competitors)
  - User persona profiles (2-3 personas)
  - Information architecture sitemap
  - Project brief & success metrics document
- Collaboration note: "You'll participate in 2 workshops and review the project brief before we move forward."
- Right side: mockup of a project brief document and user persona card
- Background: white

5. PHASE 2 — DESIGN (detail section, image left)
- Phase badge: "Phase 2 · Weeks 3-6"
- Title: "Design With Intent"
- Description: "We translate research into wireframes, then high-fidelity designs. Every screen is prototyped and tested with real users before development begins."
- Deliverables list:
  - Low-fidelity wireframes (all core flows)
  - Design system & component library
  - High-fidelity UI designs (Figma)
  - Interactive clickable prototype
  - Usability test report (5 user sessions)
- Collaboration note: "You'll have 2 design review checkpoints. Unlimited async feedback via Figma comments."
- Left side: mockup of Figma design screens with annotation callouts
- Background: #F8FAFC

6. PHASE 3 — DEVELOP (detail section, image right)
- Phase badge: "Phase 3 · Weeks 7-10"
- Title: "Build for Scale & Speed"
- Description: "Our engineering team builds your product in 2-week sprints with continuous demos. We ship production-ready code with tests, CI/CD, and documentation from day one."
- Deliverables list:
  - Sprint 1 & 2 working builds (bi-weekly demos)
  - Frontend + backend implementation
  - API documentation
  - Automated test suite (90%+ coverage)
  - Staging environment for review
- Collaboration note: "Bi-weekly sprint demos. You'll test every feature on staging before it's marked complete."
- Right side: mockup of a sprint board with task cards and a code diff view
- Background: white

7. PHASE 4 — DELIVER (detail section, image left)
- Phase badge: "Phase 4 · Weeks 11-12"
- Title: "Launch With Confidence"
- Description: "We handle deployment, performance optimization, and launch-day monitoring. Post-launch, we provide 30 days of priority support and a detailed handoff package."
- Deliverables list:
  - Production deployment & DNS setup
  - Performance audit (Core Web Vitals, Lighthouse 95+)
  - Analytics & monitoring setup (Mixpanel, Sentry)
  - Technical handoff documentation
  - 30-day post-launch priority support
- Collaboration note: "You'll approve the go-live checklist and be on a shared Slack channel for launch-day coordination."
- Left side: mockup of a launch checklist with green checkmarks and a Lighthouse score badge
- Background: #F8FAFC

8. BY THE NUMBERS (full-width dark section)
- Background: #1E1B4B (dark indigo)
- Headline: "Proven Results Across 80+ Projects"
- 4 stat blocks in a row:
  - "80+" — "Products Launched"
  - "12 Weeks" — "Average Time to Market"
  - "4.9/5" — "Client Satisfaction Score"
  - "92%" — "Client Retention Rate"
- Animated count-up on scroll
- Subtext: "From seed-stage startups to Series C scale-ups"

9. CLIENT TESTIMONIALS (2 cards side by side)
- Section headline: "What Clients Say About Working With Us"
- Card 1: "Frameshift's process gave us total visibility. We always knew what was happening, what was next, and what we needed to do. Zero surprises — just a great product at the end." — David Park, CTO at Streamline · B2B SaaS · Launched in 11 weeks
- Card 2: "We'd worked with agencies before where the process was chaotic. Frameshift was the opposite — structured, communicative, and genuinely collaborative. Our NPS jumped 40 points after the redesign." — Camille Okonkwo, Head of Product at Mosaic Health · HealthTech · Launched in 14 weeks
- Each card: large quote marks icon, quote text, avatar, name, title, project type, timeline
- Light gray background (#F8FAFC), 16px border-radius, subtle shadow

10. TOOLS WE USE (icon grid)
- Section headline: "Our Toolkit"
- 3 rows of tool icons with labels:
  - Design: Figma, FigJam, Maze, Lottie
  - Development: React, Next.js, TypeScript, Tailwind, PostgreSQL, Vercel
  - Collaboration: Linear, Slack, Notion, Loom
- Grayscale icons that tint to brand colors on hover
- Clean grid layout with generous spacing

11. FAQ SECTION (accordion)
- "How much does a typical project cost?" — Most projects fall between $60K and $150K depending on scope. We provide a detailed estimate after the discovery phase, and the price is fixed — no surprise invoices.
- "Can we start with just the design phase?" — Absolutely. We offer standalone discovery and design engagements. Many clients start with design and then extend into development.
- "What if the project takes longer than 12 weeks?" — Our 12-week timeline covers most SaaS MVPs. For larger scopes, we'll propose a phased roadmap during discovery so you know exactly what to expect.
- "Do you work with early-stage startups?" — Yes! About 40% of our clients are pre-seed to Series A. We offer flexible payment schedules for startups.
- "What happens after launch?" — We offer ongoing retainer partnerships for continued development, or a clean handoff to your internal team. Either way, you own 100% of the code and designs.
- "What's the typical team size on a project?" — A standard team includes 1 project lead, 1-2 designers, and 2-3 engineers. You'll have a single point of contact throughout.

12. FINAL CTA SECTION
- Background: indigo gradient (#6366F1 to #8B5CF6)
- Headline: "Ready to Build Something Great?"
- Subheadline: "Book a 30-minute discovery call. We'll discuss your project, share relevant case studies, and outline next steps."
- Two-column layout: left side content, right side an embedded Calendly-style date picker showing available slots
- CTA button: "Book Discovery Call" (white on dark, large)
- Below: "No commitment · Free consultation · Response within 24 hours"

13. FOOTER
- 4 columns on #0F172A (slate-900) background:
  - Services: Product Strategy, UI/UX Design, Web Development, Mobile Apps, Design Systems
  - Work: Case Studies, Industries, Clients, Testimonials
  - Company: About, Process, Team, Careers, Blog
  - Connect: Contact, Twitter/X, LinkedIn, Dribbble, GitHub
- Newsletter signup: "Get our monthly product design insights" — email input + "Subscribe"
- Bottom bar: "© 2026 Frameshift Studio. All rights reserved." + Privacy · Terms
- Clutch/DesignRush badges in footer

Design: Structured, professional, collaborative. Primary: #6366F1 (indigo-500), secondary: #1E1B4B (dark indigo), accent: #10B981 (emerald for checkmarks, success indicators). Backgrounds: white alternating with #F8FAFC and #F5F3FF (light indigo tint). Typography: Plus Jakarta Sans for headings (geometric, confident), Inter for body text. Cards with 16px border-radius and subtle shadows. Generous whitespace. Phase badges use indigo/violet tones. Process timeline uses gradient connecting lines. Overall feel: methodical, transparent, trustworthy.

Responsive: Mobile-first. Horizontal timeline becomes vertical with left-aligned nodes. Phase detail sections stack image below text. Stats grid becomes 2x2. Tool grid becomes 3-column. Testimonial cards stack vertically. FAQ full-width. CTA section stacks with calendar below text. Sticky mobile bottom bar with "Book a Call" CTA. All touch targets minimum 44px.