Back to Projects

Clean & Service

ReactTypeScriptReact Hook FormZodSEO

Overview

Clean and Service is a responsive Italian-language marketing website for a professional linen-rental and laundry service serving hospitality properties such as bed-and-breakfasts and short-term rentals. Built as a React and Vite single-page application, it explains the service workflow, presents ready-to-use linen solutions, communicates operational benefits, and converts visitors through WhatsApp, telephone, maps, and a validated contact form. The site combines mobile-first design, local-search metadata, structured business data, accessibility considerations, and a static deployment workflow into a focused lead-generation experience.

Objectives

  • ▸ Present ready-to-use linen kits and scheduled delivery and collection as a simple hospitality-service workflow
  • ▸ Explain service categories, custom plans, professional laundering, hygiene standards, and seasonal scalability
  • ▸ Generate qualified enquiries through prominent WhatsApp, telephone, email, and contact-form calls to action
  • ▸ Support local discoverability through Italian metadata, canonical and social tags, robots directives, geographic information, and structured data
  • ▸ Deliver a polished mobile-first experience with responsive navigation, touch-friendly controls, persistent mobile contact actions, and clear visual hierarchy
  • ▸ Establish trust through service-status messaging, benefit summaries, testimonials, frequently asked questions, and location information
  • ▸ Keep the public website operationally lightweight through a client-rendered frontend and static production build

Architecture

Client-rendered single-page application built with React, TypeScript, and Vite. The application entry point mounts a shared App component that configures React Query, toast notifications, tooltips, React Router, the primary landing-page route, and a catch-all 404 route. The landing page composes reusable React sections for the sticky header, hero, service workflow, offerings, custom plans, benefits, trust indicators, testimonials, frequently asked questions, contact form, footer, and persistent mobile calls to action. Tailwind CSS and CSS custom properties provide the responsive design system, color tokens, gradients, shadows, dark-mode variables, animations, focus states, and reduced-motion behavior. Radix-based and shadcn-style UI primitives support reusable controls such as sheets, accordions, buttons, forms, tooltips, and toast messages. Zod validates contact fields before the browser opens a precomposed email through a mailto handoff. Selected call-to-action events are published to the browser dataLayer when analytics tooling is available. The repository contains no application backend, database, authentication layer, background worker, or server-side contact-submission API; deployment produces static Vite assets and includes an SCP-based script with remote backup and extraction steps.

Key Features

  • ▸ Italian-language landing page focused on professional linen rental, laundering, delivery, and collection for hospitality properties
  • ▸ Responsive hero section with preloaded imagery, concise service positioning, WhatsApp and telephone actions, and smooth navigation to detailed information
  • ▸ Sticky header that adapts while scrolling, desktop anchor navigation, keyboard skip link, mobile drawer navigation, and visible contact actions
  • ▸ Three-step workflow explaining how customers order linen kits, receive or collect supplies, and return used items for professional processing
  • ▸ Service presentation covering ready-to-use kits, scheduled logistics, professional hygiene processes, and seasonal capacity adjustments
  • ▸ Custom-plan section communicating consultation, supply planning, flexible logistics, operational standards, seasonal scaling, and order-management concepts
  • ▸ Benefits section supported by locally stored service and linen imagery
  • ▸ Trust-badge strip for service availability, hospitality standards, coverage messaging, and location discovery
  • ▸ Responsive testimonials displayed as an Embla carousel on mobile devices and a multi-column grid on larger screens
  • ▸ Collapsible FAQ accordion covering workflow, seasonal changes, kit contents, logistics, activation timing, hygiene, urgent requests, and customization
  • ▸ Controlled React contact form with Zod validation for name, email, optional telephone number, and message
  • ▸ Field-specific validation errors and toast feedback before initiating a precomposed email through the visitor's local mail client
  • ▸ Direct WhatsApp, telephone, email, and map handoffs positioned throughout the page
  • ▸ Optional dataLayer events for selected contact and conversion interactions
  • ▸ Schema.org JSON-LD for local business, organization ratings, services, FAQs, and breadcrumb navigation
  • ▸ Search-oriented metadata including Italian title and description content, canonical URL, Open Graph and Twitter tags, geographic metadata, and crawler directives
  • ▸ Accessibility details including semantic labels, ARIA attributes, visible focus states, touch-sized mobile controls, keyboard navigation, and reduced-motion preferences
  • ▸ Image-performance optimizations including hero preloading, eager critical imagery, lazy secondary imagery, explicit dimensions, and asynchronous decoding hints
  • ▸ Persistent mobile WhatsApp and telephone bar with safe-area-aware spacing
  • ▸ Reusable visual system based on HSL design tokens, responsive typography, blue and mint gradients, glass-style cards, shadows, hover effects, and entrance animations
  • ▸ Graceful catch-all 404 route for invalid browser paths
  • ▸ Production build and deployment script that packages static assets, uploads them over SCP, creates a remote backup, and extracts the new build

Challenges

  • ▸ Transforming a broad hospitality laundry offering into a concise one-page conversion journey without overwhelming visitors
  • ▸ Repeating contact calls to action often enough to support conversion while keeping each placement relevant to the surrounding section
  • ▸ Maintaining mobile usability with a sticky header, drawer navigation, bottom-fixed CTA bar, safe-area padding, large touch targets, and responsive content variants
  • ▸ Supporting local-search discovery through several structured-data blocks and metadata formats while preserving a focused user-facing experience
  • ▸ Implementing a usable contact flow without a backend, which delegates message delivery, persistence, spam protection, and final submission to the visitor's email client
  • ▸ Coordinating a visually rich page with responsive local imagery, critical-image preloading, lazy loading, animations, and a custom design-token system
  • ▸ Balancing motion and visual polish with keyboard accessibility, focus visibility, touch interaction, and reduced-motion preferences
  • ▸ Providing mobile and desktop testimonial experiences through different carousel and grid presentation patterns
  • ▸ Keeping analytics integration optional so conversion interactions continue working when no browser dataLayer is present
  • ▸ Maintaining privacy-safe portfolio documentation because the source includes business contact, domain, geographic, deployment, and testimonial information
  • ▸ Managing a deployment workflow coupled to SSH and SCP configuration without exposing remote host, account, or filesystem details

Outcomes

  • ▸ Delivered a buildable React and Vite marketing funnel with a focused landing-page route and graceful 404 fallback
  • ▸ Created a responsive lead-generation experience with WhatsApp, telephone, email, maps, and validated form entry points
  • ▸ Implemented client-side contact validation with field-specific errors and toast feedback before initiating the email handoff
  • ▸ Established reusable landing-page sections and a broad Radix and shadcn-style component foundation for future expansion
  • ▸ Delivered desktop and mobile navigation patterns, including a sticky header, drawer menu, skip link, and persistent mobile contact bar
  • ▸ Added structured local-business, service, FAQ, rating, and breadcrumb data to improve machine-readable page context
  • ▸ Provided Italian search metadata, canonical and social-sharing tags, geographic metadata, and crawler configuration
  • ▸ Exposed selected conversion interactions to an optional browser dataLayer for future analytics and tag-management integration
  • ▸ Implemented image-loading and responsive-layout strategies for the hero, service, benefit, and testimonial sections
  • ▸ Built a coherent visual identity through reusable design tokens, gradients, typography, shadows, responsive breakpoints, and motion utilities
  • ▸ Included production build, preview, lint, and development scripts together with a static deployment workflow that backs up the previous remote release