01
Conversion
A three-question Project Route diagnostic recommends a renovation route and prefills the consultation workflow.
Home, Design & Construction
Citrus Joinery — Design-Build Renovations
Citrus Joinery is a premium, frontend-only demonstration website for a fictional design-build renovation studio serving London and nearby areas.
Home, design, and construction websitedesign-buildjoinerymaterialrenovation
Visit live website ↗citrus-joinery-renovations.vercel.app
Project type
Home, design, and construction website
Industry
Home, Design & Construction
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the Citrus Joinery — Design-Build Renovations experience
Citrus Joinery is a premium, frontend-only demonstration website for a fictional design-build renovation studio serving London and nearby areas. The project is designed as a sales-ready digital experience for clients who want to request a consultation, compare renovation routes, explore project studies, and understand the design-build process before committing to a first meeting.
The central conversion is Request a project consultation / estimate. Visitors can use the three-step Project Route diagnostic, preserve their selected context, and carry the generated recommendation into a staged consultation form. The website intentionally contains no real customer reviews, ratings, testimonials, awards, customer data, or live email/CRM submission.
This is a demonstration implementation. Named people, projects, locations, project narratives, credentials, and business contact details are illustrative content rather than representations of a real company or live service.
Experience details
Key features and interaction highlights
02
Consultation
A three-step form includes scope, investment range, contact validation, consent, review, loading, success, failure, Back, and restart states.
03
Projects
A functional project index with filters, selected chips, counts, empty state, Clear action, keyboard-native controls, project detail routes, and related projects.
04
Project detail
Contextual hero, decision summary, material note, gallery composition, specifications, FAQ, related projects, and conversion path.
05
Services
Services matrix, distinct service detail routes, route-fit message, decision canvas, project evidence, FAQs, and CTA.
06
Process
A GSAP-traveling active process marker, selectable process stages, and alternating media/process sections.
Visual gallery
Desktop details and mobile experience
Three genuine captures from the live deployment show the opening view, an interior content section, and the responsive mobile composition.
Build characteristics
Technology and delivery signals
Labels come from project documentation where available; conservative delivery characteristics are used when a repository does not specify its stack.
ReactTypeScriptViteTailwind CSSGSAPFramer MotionWoutershadcn/ui
Project FAQ
Questions about Citrus Joinery — Design-Build Renovations
What is Citrus Joinery — Design-Build Renovations?
Citrus Joinery is a premium, frontend-only demonstration website for a fictional design-build renovation studio serving London and nearby areas.
Who is the Citrus Joinery — Design-Build Renovations website designed for?
Homeowners and project stakeholders comparing services, materials, capabilities, and outcomes.
What does the Citrus Joinery — Design-Build Renovations experience include?
The documented experience includes conversion, consultation, projects, project detail. The live website shows the complete interface and interaction flow.
Can I view Citrus Joinery — Design-Build Renovations online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
