Back

SoftlyShaded

Live Site
SoftlyShaded

Main Tech Stack

  • Astro
  • Tailwind CSS
  • TypeScript

Problem

Softly Shaded’s clients primarily found their work through Instagram and Facebook, but had a problem of scattered information across posts and stories. Client needed to consolidate their lash and brow services, pricing, and FAQ into a single location.

Solution

Built a single page website with Astro’s static site generation for optimal performance. The site features three main sections (Home, About and Services), a service catalog with detailed FAQs, and SEO optimization including structured data for local business discovery.

Demo

Notable Tech Used

Astro

  • Used Astro’s static site generation for fast, SEO-friendly pages with zero client-side JavaScript by default
  • Repetitive designs in pricing tables and FAQs made it ideal for component-based templating
  • Astro Content Collections organized to manage service data (Ombre Brows, Lash Extensions, Lash Lift) with TypeScript schema validation, no CMS needed for content that changes infrequently

Technical Challenges

  • Content Management: Services required complex data structures including pricing tiers, duration, preparation notes, and detailed FAQs. Solved by defining a type-safe Zod schema with nested objects and arrays.
  • SEO Optimization: Local service businesses rely heavily on search visibility. Implemented JSON-LD structured data with Schema.org’s BeautySalon type, including service catalog, pricing, and location data
  • Asset Optimization: Balancing visual appeal with performance. Used WebP format for photos, SVG for illustrations and logos

Lessons Learned

  • Content-Driven Architecture: Astro’s content collections proved ideal for service-based businesses where content updates infrequently (pricing, availability, FAQs) without needing full code changes.
  • Static Site Benefits: For brochure style websites, static generation eliminates server costs and security concerns while delivering high performance Lighthouse metrics.