Landing Page & Intake Form

The landing page serves as SavvySolve's primary customer acquisition channel. It implements the "friction-free entry" principle from the PRD, allowing customers to request help immediately without creating an account.

Design Philosophy

The landing page targets three distinct user personas:

1. Seniors & Retirees - Need patient, clear explanations with no judgment
2. Busy Professionals - Value speed and efficiency
3. Small Business Owners - Need on-demand IT support without full-time staff

All design decisions prioritize accessibility: large touch targets, clear typography, WCAG AA compliance, and mobile-first responsive layout.

Page Structure

The landing page at app/page.tsx contains six sections:

Hero Section

The hero combines the value proposition with the intake form. The headline "The DoorDash of Getting Things Done Digitally" communicates the on-demand nature of the service.

Trust indicators display key metrics:

• Response time: Under 5 minutes average
• Satisfaction: 4.9/5 rating
• Guarantee: 100% money-back promise

How It Works

A three-step visual guide explains the process:

1. Describe Your Problem - Fill out the intake form
2. A Solver Claims Your Request - Available solvers see and claim tickets
3. Get It Done Together - Connect via chat, call, or screen share

Who We Help

Persona cards address specific pain points for each target audience, listing common use cases like video calls with grandkids for seniors, document formatting for professionals, and website help for small businesses.

Pricing

Three tier cards display clear pricing:

• Quick Assist: $69 for 20 minutes
• Standard Solve: $129 for 45 minutes (featured as "Most Popular")
• Deep Dive: $219 for 90 minutes

Intake Form

The intake form lives in components/IntakeForm.tsx and uses React Hook Form with Zod validation.

Form Fields

export const intakeFormSchema = z.object({
  name: z.string().min(2).max(100),
  phone: z.string().min(10).regex(phoneRegex),
  email: z.string().email().optional(),
  description: z.string().min(10).max(500),
  deviceType: z.enum([
    "iphone", "android", "ipad", "tablet",
    "mac", "windows", "chromebook", "other"
  ]),
  urgency: z.enum(["low", "medium", "high", "critical"]),
});

The phone number validation accepts multiple formats: (123) 456-7890, 123-456-7890, 1234567890, and +1 123 456 7890.

Public Ticket Creation

The form submits through a public tRPC procedure, meaning no authentication is required:

create: publicProcedure
  .input(intakeFormSchema)
  .mutation(async ({ input }) => {
    const [ticket] = await db
      .insert(tickets)
      .values({
        customerInfo: {
          name: input.name,
          phone: input.phone,
          email: input.email,
        },
        description: input.description,
        deviceType: input.deviceType,
        urgency: input.urgency,
        status: "pending",
      })
      .returning();

    return {
      id: ticket.id,
      status: ticket.status,
      createdAt: ticket.createdAt,
    };
  }),

Success State

Upon successful submission, the form displays:

• A confirmation message
• The ticket ID (truncated to first 8 characters)
• Instructions to check phone for updates

Urgency Levels

The urgency field uses a 2x2 grid of radio buttons with clear descriptions:

This maps to the queue system's priority ordering, where critical tickets appear first.

Branding

The page uses SavvySolve's brand colors:

• Primary Orange: #FF8A0D - CTAs, accents, trust indicators
• Primary Purple: #1B0F40 - Headlines, navigation, pricing section background
• White: Clean backgrounds, contrast text

Typography uses Poppins throughout for a friendly, approachable feel.

Mobile Experience

The landing page is mobile-first:

• Single-column layout on small screens
• Large touch targets (minimum 44px)
• Sticky navigation with hamburger menu consideration
• Form fields with appropriate input types (tel, email)
• Urgency selection as 2x2 grid for thumb-friendly tapping

Related Documentation

• Queue View - How solvers see and claim submitted tickets
• Tickets Router - API reference for ticket operations