Create the About Page | Build BookIt with Svelte 5

Every Business Needs a Story

Customers want to know who they’re booking with. An about page builds trust and helps your booking platform feel professional. Let’s add one to BookIt.

What You’ll Learn

Reinforce the folder + +page.svelte pattern
Create a content-focused page
Practice the routing workflow

Create the About Route

You know the pattern now. Let’s apply it.

Step 1: Create the Folder

src/routes/
├── +page.svelte
├── services/
│   └── +page.svelte
└── about/              ← Create this folder

Step 2: Add the Page

Create +page.svelte inside the about folder:

<!-- filename: src/routes/about/+page.svelte -->
<h1>About BookIt</h1>

<p>
  BookIt makes scheduling simple. Whether you need lawn care, garden 
  maintenance, or expert consultation, we connect you with trusted 
  professionals in your area.
</p>

<h2>Our Mission</h2>
<p>
  We believe booking services should be as easy as picking a time that 
  works for you. No phone calls, no back-and-forth emails — just simple 
  online booking.
</p>

<h2>Why Choose Us</h2>
<ul>
  <li>Vetted, professional service providers</li>
  <li>Transparent pricing with no hidden fees</li>
  <li>Easy rescheduling and cancellation</li>
  <li>Secure online payments</li>
</ul>

<h2>Get in Touch</h2>
<p>
  Have questions? We'd love to hear from you. Visit our contact page 
  or email us at hello@bookit.example.
</p>

Step 3: Verify

Navigate to http://localhost:5173/about in your browser. Your about page should appear.

Why This Page Matters

The about page serves multiple purposes in a booking app:

Trust building. Customers are more likely to book when they understand who’s behind the service.

SEO value. Search engines look for content that explains what your business does. An about page provides that context.

Navigation destination. Most websites have an about page — users expect to find one.

Your Project Structure

src/routes/
├── +page.svelte          → /
├── services/
│   └── +page.svelte      → /services
└── about/
    └── +page.svelte      → /about  ← New!

A Note on Content

This lesson includes placeholder content. In a real project, you’d write copy that reflects your actual business. The important thing is understanding the pattern:

Create folder for the route
Add +page.svelte with your content
Visit the URL to see it live

The content itself is just HTML inside a Svelte component.

Common Mistakes

Nesting Too Deep

src/routes/
└── pages/
    └── about/
        └── +page.svelte    → /pages/about (probably not what you want)

Remember: every folder becomes a URL segment. If you want /about, the about folder goes directly inside routes, not inside another folder.

Summary

You’ve added a second informational page to BookIt. The pattern remains the same: folder name becomes URL, +page.svelte provides the content.

Key takeaways:

Static content pages work the same as dynamic ones
Folder structure directly maps to URLs
Each page is an independent Svelte component

Next Steps

One more static page to go. Continue with Add a Contact Page to give customers a way to reach out.