Service Catalog
Grid covering mowing, tree removal, irrigation maintenance, landscape design, seasonal cleanup, and mulching across residential and commercial tiers.
WJ Lawn & Landscaping Services
A marketing site for a Florida lawn-care and landscaping business, featuring a service catalog and an interactive before/after portfolio.
Project Overview
WJ Lawn & Landscaping Services is a conversion-focused marketing site for a Florida lawn-care company serving both residential and commercial clients. The site organizes six core service categories — mowing, tree work, irrigation, landscape design, seasonal cleanup, and mulching — alongside a drag-to-compare before/after portfolio and a lawn-care project gallery. Built on Astro 6 with Tailwind v4, daisyUI 5, and nanostores, and deployed on Netlify for fast static delivery from a small component set under `src/components/home/`.
Technologies
Technical Challenges
Building the before/after slider without pulling in a third-party library — the component coordinates pointer and touch events with a clip-path reveal over two stacked images, while keeping the handle responsive across breakpoints and avoiding layout shifts.
Key Features
Before & After Slider
Draggable comparison component that reveals project transformations by moving a handle across paired photos, showcasing six full-scope landscaping rebuilds.
Direct-Contact CTAs
Phone number (908-692-8717) and email are surfaced in the hero, services, and footer via tel: and mailto: links to shorten the path from visit to quote request.
Portfolio Gallery
Dedicated lawn-care gallery rendering completed-project imagery through Astro's optimized asset pipeline for fast loads on mobile.
Technical Deep Dive
The site is a single-route Astro 6 application (src/pages/index.astro) composed from a focused set of home-page components: HomeHero, HomeHeroFooter, HomeServices, HomeWhyChooseUs, and HomeImageGallery. Tailwind v4 and daisyUI 5 drive the visual system, with nanostores available for any small interactive state. The Netlify adapter handles deployment and serves the optimized _astro/ assets.
The before/after gallery is the centerpiece of the portfolio section. Two images are stacked in a fixed-aspect container; the top image is clipped with a CSS clip-path whose width is driven by the drag position of a handle. Pointer and touch listeners update that offset in real time, and the handle is reachable via keyboard so the comparison is not locked behind a mouse. Pairing the slider with Astro’s image optimization keeps the initial paint light even on mobile.
Conversion is wired throughout the page rather than gated behind a form. The phone number and email appear in the hero, the services grid, and the footer as tel: and mailto: links so visitors can reach the owner in one tap. A generated sitemap.xml route (src/pages/sitemap.xml.ts) handles SEO basics for a site whose traffic is mostly local search.
Interested in this project?
I'd love to discuss the technical details or answer any questions you may have.
Get in Touch