Skip to content

practice

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

practice

README.md

Practice

A calm, content-rich Astro template for an independent neighborhood dental practice.

Overview

Practice is a static multi-page website for Porchlight Family Dental, a fictional independent practice in Portland’s Maplewood neighborhood. It gives prospective patients a clear path from understanding available care to requesting an appointment or calling the team.

The homepage introduces three focused services, a four-step first-visit walkthrough, practice details, and honest frequently asked questions. Each service has a directly loadable detail route with local-search metadata, service context, safety-conscious copy, and a configurable booking handoff.

Features

  • Homepage plus direct-load routes for family dentistry, restorative care, and urgent visits
  • Four-step first-visit walkthrough designed to reduce uncertainty and dental anxiety
  • Centralized practice name, address, phone, email, hours, and booking URL
  • Markdown content collection for service copy, metadata, and service-specific FAQs
  • Dentist, Service, and FAQPage structured data
  • Honest appointment-request language with working tel: and mailto: handoffs
  • Responsive layouts for desktop, tablet, 390px mobile, and 320px narrow screens

Tech stack

  • Language: TypeScript
  • Framework: Astro 7
  • Build tool: Astro
  • Styling: Custom responsive CSS
  • Content: Astro content collections with Markdown

Getting started

Prerequisites

  • Node.js 22.12 or newer
  • npm

Installation

npm install

Development

npm run dev

Open the local URL printed by the development server.

Available scripts

  • npm run dev — start the local development server
  • npm run build — type-check and create a production build
  • npm run lint — run ESLint
  • npm run preview — preview the production build locally

Project structure

practice/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/images/
│   ├── components/
│   ├── content/services/
│   ├── data/site.json
│   ├── icons/
│   ├── layouts/
│   ├── pages/services/
│   ├── styles/
│   ├── types/
│   └── content.config.ts
├── preview/
├── astro.config.mjs
├── eslint.config.js
├── package.json
└── tsconfig.json

Personalizing

Content and business data

Edit src/data/site.json for the practice name, description, contact details, address, opening hours, social proof, and appointment-request URL. Edit the Markdown files in src/content/services/ for service copy, service metadata, and FAQs. Homepage-only copy and FAQs live in src/pages/index.astro.

Branding and styles

Edit src/styles/global.css for the color tokens, typography stacks, spacing, layouts, rounded arch treatment, and responsive breakpoints.

Images

Local images live in src/assets/images/ and are imported by src/pages/index.astro and src/pages/services/[service].astro. Portrait or vertical images at least 1200px wide work best with the arched crops.

Photography was downloaded from Pexels and stored locally:

Routes and features

The homepage is composed in src/pages/index.astro. Service pages are generated by src/pages/services/[service].astro from Markdown entries in src/content/services/. Shared header, FAQ, first-visit, and booking UI live in src/components/. Collection validation lives in src/content.config.ts.

Environment variables

This project does not require environment variables.

Production build

npm run build
npm run preview

Production files are written to dist/.

Screenshots

  • Thumbnail: preview/practice-thumbnail.png
  • Full page: preview/practice-homepage.png