Canova: Real Estate Agency & Craftsmen Accommodations

The client didn't provide design files or strict brand guidelines upfront. This meant iterating through multiple AI-generated design concepts—exploring different color schemes, typography pairings, and layout approaches—before settling on the elegant black & white aesthetic with teal accents. Several rounds of feedback were needed to nail the right balance between professional and approachable.

Making every piece of content editable—hero titles, service descriptions, CTA buttons, team member bios, legal pages, navigation items—required building an extensive CMS schema. The configuration spans 2,000+ lines with 13 tabbed sections covering every page. This level of detail ensures staff never need developer intervention for routine updates.

The real estate site was built first, establishing the architectural patterns, component library, and CMS structure. When building the craftsmen accommodations site, we leveraged these foundations—reusing components like ServiceCard, LocationCard, and PageHero while adapting the content schema for accommodation-specific fields (bed counts, amenities). This approach required careful planning upfront to ensure the component library was flexible enough for both use cases.

We began by mapping out all required pages, content blocks, and data relationships. For real estate: property listings with locations, types, prices, images, features, and status. For craftsmen services: accommodation listings with bed counts, amenities, and availability. Both sites needed blog sections, testimonial displays, team pages, and comprehensive legal/privacy content.

Working collaboratively with the client, we established:

• Colors: Black & white primary palette with teal (hsl(175, 70%, 40%)) as the accent color
• Typography: Cormorant for elegant uppercase headings, Montserrat for clean body text
• Design Language: Subtle shadows, hover animations, card-based layouts, and video hero sections

We chose Next.js 15 with React 19 for its server-side rendering capabilities, excellent SEO support, and developer experience. PayloadCMS provided the headless CMS layer with a beautiful admin interface—crucial for non-technical users. Vercel hosting with PostgreSQL offered the performance and reliability needed with minimal operational overhead.

We built a shared component library including:

• ServiceCard – Interactive cards with hover effects for service offerings
• FeaturedPropertyCard – Property/accommodation listing cards with status badges
• LocationCard – City/region cards with listing counts
• PageHero – Flexible hero sections supporting images or videos
• CTASection – Reusable call-to-action blocks

The PayloadCMS configuration enables complete content control:

• Tabbed interface for each page (Home, Sales, Rentals, Contact, About, etc.)
• Array fields for team members, testimonials, and timeline entries
• Media uploads with S3 storage integration
• Rich text editing with Lexical editor
• Navigation management for header and footer links

• Next.js 15.3 with App Router architecture
• React 19 with TypeScript
• Tailwind CSS for styling with custom design tokens
• Radix UI primitives for accessible components
• Lucide React for icons
• React Hook Form for form handling

• PayloadCMS 3.38 (headless CMS)
• PostgreSQL via @payloadcms/db-vercel-postgres
• Lexical rich text editor
• S3 storage for media assets

• Vercel for hosting and deployment
• Cloudflare Turnstile for form spam protection
• Automatic sitemap generation with next-sitemap

• Server Components by default – Maximizes performance and SEO
• Global CMS configuration – Single TextContent global for all page content
• Collection-based data – Properties, Locations, Posts, Documents as separate collections
• Revalidation on change – CMS updates trigger cache invalidation automatically

• ~8 weeks total from planning to launch
• Real estate site built first, establishing component library and CMS patterns
• Craftsmen site followed, reusing components and adapting CMS schema—significantly faster due to shared foundations

• Staff onboarded to CMS in under 1 hour
• Content updates happen independently—new properties, blog posts, and testimonials added regularly without developer involvement
• Fast page loads with Next.js server-side rendering and Vercel's edge network
• Very low monthly hosting costs for both sites combined

• Two complete websites with shared architectural patterns
• 25+ reusable UI components
• 13 CMS content sections with full editability
• Property/accommodation database with location filtering
• Blog system with categories and featured posts

• Upfront planning pays off – Time invested in requirements, CMS schema design, and component architecture prevented costly rework later
• AI-assisted development – With this modern tech stack (Next.js, TypeScript, Tailwind), AI coding agents excel at rapid component development and iteration
• PayloadCMS flexibility – The schema-first approach allowed us to model exactly what the client needed without plugin limitations
• Build once, reuse – The real estate site established patterns that made the craftsmen site come together much faster

• Lock in brand decisions earlier – More structured brand workshops upfront would reduce design iteration cycles
• Prototype key interactions first – Building interactive prototypes for complex features (property filtering, search) before full implementation

• PayloadCMS + Next.js architecture works exceptionally well for content-heavy marketing sites
• Global CMS configurations for page content provide excellent editorial flexibility
• Collection-based data models (Properties, Locations) scale cleanly as listings grow
• Tailwind + CSS variables create maintainable design systems with easy theme customization