Cutler & Co Architects — Website Specification

Primary Navigation Pages (in nav)

Secondary Pages (not in main nav)

Routing Notes

• •App.jsx is the single source of truth for all routes.
• •All pages are wrapped in the shared Layout component (navbar + footer), except where explicitly excluded.
• •pages.config.js registers auto-discovered pages. Manual routes for Amandaria, Builders, FAQ, ConsultSuccess, PaymentConfirmed, ProjectCaseStudy are defined directly in App.jsx.
• •The pagesConfig loop in App.jsx only covers auto-registered pages. New pages must be added as explicit <Route> elements.
• •Main page is controlled by mainPage: 'Home' in pages.config.js.

Header Navigation (Layout.jsx)

• •Logo: 'Cutler & Co' (serif, large) + 'ARCHITECTS' (small caps, tracked)
• •Desktop nav links: Home, About, Portfolio, Services, Testimonials, Contact, FAQ
• •CTA button: 'Book a Consult' — opens BookConsultModal overlay
• •Sticky on scroll: transparent → bg-[#F5F1E8]/95 with backdrop blur after 20px scroll
• •Mobile: hamburger menu (Menu/X icons), full-screen overlay with same links
• •Active state: border-b-2 border-[#B8A082] on current page link

Footer Navigation (Layout.jsx)

• •Background: #3D2E22 (dark brown)
• •Column 1: Logo + tagline ('Timeless architectural design crafted with precision and passion.')
• •Column 2: Quick Links — all 7 nav pages
• •Column 3: Contact — phone, email, address, Instagram + Facebook links
• •Copyright line at bottom

Internal CTAs

Colour Palette

Typography

Spacing & Layout

• •Max content width: max-w-7xl (main) / max-w-5xl (forms, services) / max-w-4xl (text-focused sections)
• •Horizontal padding: px-6 lg:px-12
• •Section padding: py-24 lg:py-32 (standard) / py-32 (hero/CTA sections)
• •Grid gaps: gap-8 lg:gap-12 (standard) / gap-16 lg:gap-24 (feature sections)

Button Styles

Card & Section Styles

Animations

• •Framer Motion used throughout for scroll-triggered entrance animations
• •Standard pattern: initial={{ opacity: 0, y: 20/30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
• •Hero animations: animate (not whileInView), with staggered delays 0.1–0.4s
• •Image hover: scale-105 over 700ms
• •Hero image: subtle scale-in on load (1.04 → 1.0 over 1.6s)
• •Page transitions: Framer AnimatePresence on questionnaire steps and portfolio filter changes
• •Accordion: height 0 → auto with opacity fade

Home Page (/)

• •Section 1 — Hero: Full-screen (min-h-screen), background photo of project, brown/70 overlay. Eyebrow 'Strategists', H1 'Architectural Strategists for Profitable Projects', subheadline, two CTA buttons (Book Discovery Call → /Contact, Explore Our Process → /Services). Scroll cue ChevronDown bounce animation.
• •Section 2 — Trust Bar: Dark brown bg. Stats: '20+ Years Experience', 'Registered Architects', 'End-to-End Project Delivery'.
• •Section 3 — Who We Work With: bg-[#EAE4D6], 3-column grid. Homeowners → /HomeownerJourney, Developers → /Developers, Builders → /Builders. Each card: icon, title, description, underline CTA link.
• •Section 4 — Featured Project (Amandaria): FeaturedProject component. Header row, full 80vh hero image block linking to /portfolio/amandaria, 2-column sub-image strip, stats bar (dark brown).
• •Section 5 — Brand Video: BrandVideoSection component. Heading + Google Drive embedded video.
• •Section 6 — The Method: StickyProcessTimeline component. 6-stage sticky scroll timeline (desktop) / accordion (mobile).
• •Section 7 — Why Cutler & Co: Dark brown bg. 3 differentiators: Risk Reduction, Investment Protection, Informed Decisions.
• •Section 8 — Final CTA: 'Ready to make better decisions about your project?' → Book a Discovery Call → /Contact.

About (/About)

• •Section 1 — Hero: 2-column grid. Left: eyebrow, H1 'Cutler & Co Architects', 4 body paragraphs, 'Book a Discovery Call' CTA. Right: firm photo.
• •Section 2 — Credentials Bar: Dark brown bg. 4 items: Founded, Experience, Specialisation, Location.
• •Section 3 — Founder: 2-column. Left: eyebrow 'Founder', H2 'Vicky Cutler', italic quote + 2 body paragraphs. Right: Vicky Cutler portrait photo.
• •Section 4 — Values (bg-[#EAE4D6]): 4 values in 2-column grid. Each: icon in gold-bordered box + title + description. Values: Strategy Before Design, Investment Thinking, Honest Advice, Local Knowledge.
• •Section 5 — CTA (dark brown): 'Let's talk about your project.' → Book a Discovery Call.

Portfolio (/Portfolio)

• •Section 1 — Hero: Centred. Eyebrow 'Our Work', H1 'Portfolio', tagline.
• •Section 2 — Category Filters: 4 buttons: All Projects (11), Completed (6), Under Construction (2), Upcoming (3).
• •Section 3 — Projects Grid: 3-column responsive grid. Each card: aspect-[4/5] image, hover overlay with 'View Case Study', status badge (top right), title, location, summary, up to 2 outcomes. Click → /Portfolio/:projectId.
• •Section 4 — CTA: 'Ready to Create Something Exceptional?' → Start Your Project → /Contact.
• •11 projects total: Archer Street, Worongary, Main Ridge, Red Hill South, Elwood, Malvern (all Completed), Currumbin Waters, Palm Beach Estate (Under Construction), Byron Bay, Noosa Heads, Surfers Paradise Tower (Upcoming).

Services (/Services)

• •Section 1 — Hero: 'What We Offer', H1 'Our Services', description.
• •Section 2 — Project Journey bar: horizontal clickable stage navigator for first 6 services.
• •Section 3 — Services Accordion: 10 services, each expandable: What's Included, Key Deliverables, Typical Suitability, Client Benefits.
• •Services: Strategy & Feasibility, Pre-Design, Concept Design, Design Development, Development Approval (DA), Construction Documentation, Consultant Coordination, Construction Support, Interior Design, Project Advisory.
• •Section 4 — Why Choose Us (dark brown): 3 points: 20+ Years, Strategic Approach, Client-Centred.

Testimonials (/Testimonials)

• •Hero: H1 'Client Testimonials', subheadline.
• •Grid: alternating left/right video + details panels. Video placeholder shown when videoUrl empty.
• •Currently 1 populated testimonial: Clarissa and Silvan, Currumbin Waters, Internal House Renovation.
• •9 placeholder slots ready for future video testimonials.
• •Each entry: client name, location, project, services provided.

Contact (/Contact)

• •Hero: H1 'Get In Touch', subheadline.
• •Info cards (3): Visit Us (by appointment), Call Us, Email Us.
• •Contact form: Name*, Email*, Phone, Project Type, Message*. On submit → sendEmail backend function → Admin@cutlerco.com.au. Success toast message shown for 5s.

FAQ (/FAQ)

• •Hero: Eyebrow 'Support', H1 'Frequently Asked Questions'.
• •9 FAQ categories, accordion items per category.
• •Categories: Getting Started, Design & Drawings, Timeframes & Scheduling, Fees & Payments, Project Progress & Payments, Approvals & Consultants, Communication & Project Management, Construction, Project Changes & Pausing, Why Work With an Architect?, Final Questions.
• •~35 total Q&A items. Each item: serif question, animated height expand, body answer (some with nested lists).

Homeowner Journey (/HomeownerJourney)

• •Full-screen questionnaire flow. Back button → /Home.
• •One step: 'What are you looking for?' with 2 cards:
• •A. 'I just need plans drawn up' → /DrawingsOnly
• •B. 'I want to maximise my home's potential' → /NewBuildPackage
• •AnimatePresence transitions between steps.

Drawings Only (/DrawingsOnly)

• •Explains the firm doesn't offer basic drafting-only services.
• •Presents Concept Design Package as alternative.
• •Features checklist of what Concept Design includes.
• •CTA: 'See the Concept Design Package' → /ConceptDesignPackage.
• •Closing: recommends a draftsperson if they strictly want drawings only.

New Build / Full Architectural Services (/NewBuildPackage)

• •Positioned as full-service architectural engagement.
• •Two-column grid: 'This is for you' / 'This is not for you' checklists.
• •'How We Work' process list.
• •CTA: 'Enquire About Your Project' → opens LeadCaptureModal.
• •selectedPackage: { title: 'Full Architectural Services' }

Concept Design Package (/ConceptDesignPackage)

• •Package card: dark brown bg, features list (1hr meeting, up to 3 concept floor plan options, 1hr presentation, high-level cost guidance). Turnaround: 2–3 weeks.
• •Note: CAD files assumed available; site measure $1,000+GST if not.
• •CTA: 'Enquire Now' → LeadCaptureModal.
• •selectedPackage: { title: 'Concept Design Package' }

Homeowners (/Homeowners)

• •Dark brown hero with H1 'Services for Homeowners'.
• •3 service cards: Custom Home Design, Renovations & Extensions, Interior Design.
• •Portfolio preview CTA → /Portfolio.
• •Service packages CTA → /Services.
• •Final CTA (dark brown) → /Contact.

Developers (/Developers)

• •Hero: 'For Developers', H1 'Services for Developers'.
• •3 service cards: Commercial Design, Development Consulting, Feasibility Studies.
• •2-column 'Your Development Partner' section with benefits list.
• •Portfolio CTA → /Portfolio.
• •Final CTA → /Contact.

Builders (/Builders)

• •Marketing page for construction professionals.
• •Value propositions, service workflow, lead-capture modal.
• •Email submission via base44.functions.invoke('sendEmail').

Consult Success (/ConsultSuccess)

• •Post-Calendly booking confirmation page.
• •Retrieves form data from sessionStorage.
• •Triggers Stripe checkout via createCheckout backend function.
• •Consultation fee: $350 + GST = $385 AUD total.
• •Redirects to Stripe checkout URL.

Payment Confirmed (/PaymentConfirmed)

• •Post-Stripe payment success page.
• •Animated checkmark, confirmation message.
• •CTA: Return to homepage.

Portfolio Data Structure (pages/Portfolio.jsx)

• •Each project object: id, title, type, location, category (completed/under-construction/upcoming), image (primary), summary, outcomes (array), brief, challenge, solution, outcome, images (array).
• •11 projects in static data array.
• •Categories: completed (6), under-construction (2), upcoming (3).

Project Case Study Template (/Portfolio/:projectId)

• •Reads :projectId from URL, looks up project from hardcoded data.
• •Sections: hero image, project overview table, brief/challenge/solution, outcomes, image gallery.
• •Back link to /Portfolio.

Featured Project (Home Page)

• •Component: components/FeaturedProject.jsx
• •Shows Amandaria as flagship case study.
• •80vh hero image, subtitle, 'View Project' CTA button.
• •2-column sub-image strip (pool terrace + restaurant images).
• •Stats strip (dark brown): Project Value $4.6M, On Budget, 26 Months, 820m², 4.2 Hectares.
• •All links → /portfolio/amandaria

Routes

Accessible at both /amandaria and /portfolio/amandaria. Both routes render the same component without double-wrapping the Layout.

Image Assets (21 photographs)

All images hosted at media.base44.com/images/public/69fa6cf3b8e8f638d3419eac/

• •hero1 — main hero (pool + pavilion structure)
• •hero2 — aerial/wide shot of retreat
• •poolSunset — infinity pool at golden hour
• •poolAerial — cascading pool levels
• •villa1, villa2 — guest villa exteriors
• •pavilion1, pavilion2 — bamboo pavilion and elevated walkway
• •restaurant1, restaurant2 — restaurant pavilion interior/exterior
• •bedroom — master suite
• •bathroom — outdoor bathroom
• •tower — sky tower
• •lounge — open lounge pavilion
• •poolDeck — private pool deck
• •interiorSuite — suite interior (sculptural ceiling)
• •lobby1, lobby2 — arrival lobby
• •spa1 — rain curtain chamber
• •spa2 — spa entry
• •sitePlan — architectural site plan 1:1500

Page Sections (in order)

Site Planning Section Component (components/amandaria/SitePlanSection.jsx)

• •Site plan URL: https://media.base44.com/images/public/69fa6cf3b8e8f638d3419eac/1b29fd73d_image.png
• •Left column (340px sticky): heading, 3 body paragraphs, 4-row spec table (Scale 1:1500, Site Area 4.2 Hectares, Key Structures 7 Pavilions, Circulation Raised Timber Walkways).
• •Right column: site plan image in white-bg card with shadow. Hover shows 'View Full Screen' overlay with ZoomIn icon.
• •Click opens SitePlanLightbox: black/95 fullscreen overlay, max-w-7xl image, close button, caption.

Gallery Configuration

• •galleryImages array: 16 images with captions.
• •Row 1: 3 equal squares (indices 0,1,2).
• •Row 2: 1 wide (col-span-2) + 1 normal, aspect-[16/7].
• •Row 3: 4 equal squares (indices 5–8).
• •Row 4: 3 x aspect-[4/3] (indices 9–11).
• •Row 5: 1 + 2 x aspect-[4/3] (indices 12–14).
• •Note: galleryImages[15] = spa2 (index 15) is in gallery; spa1 is used for the full-bleed spa section.

Layout (Layout.jsx)

• •Shared wrapper for all pages.
• •Renders: sticky navbar, BookConsultModal, main content (pt-24), footer.
• •Manages: scroll state (scrolled), mobile menu open state, consult modal open state.
• •Social links in footer: Instagram + Facebook.

BookConsultModal (components/BookConsultModal.jsx)

• •Shadcn Dialog component.
• •Form fields: Full Name*, Email*, Phone, Project Location, Project Type (select), Budget Range (select), Brief Description.
• •On submit: saves form to sessionStorage as 'consultForm', redirects to Calendly with name+email prefilled.
• •Calendly URL: https://calendly.com/vicky-cutlerco/call
• •Consultation fee note: $350 + GST ($385 total).

StickyProcessTimeline (components/StickyProcessTimeline.jsx)

• •6 process stages with metadata (Why it matters, Risk, Value, Outcome).
• •Desktop: full-screen sticky scroll, syncs active step with scroll progress.
• •Mobile: accordion-style expand/collapse.
• •Exported as wrapper component choosing desktop or mobile based on screen size.

BrandVideoSection (components/BrandVideoSection.jsx)

• •Branded section with firm name heading, decorative divider.
• •Embeds Google Drive video in responsive 16:9 container.
• •Scroll-triggered Framer Motion fade/slide animations.

FeaturedProject (components/FeaturedProject.jsx)

• •Section header with 'Featured Project' eyebrow and link to case study.
• •80vh hero image (hero1) with gradient overlay and title overlay.
• •2-column sub-image strip (secondary + tertiary Amandaria photos).
• •Stats strip: $4.6M, On Budget, 26 Months, 820m², 4.2 Hectares.

LeadCaptureModal (components/services/LeadCaptureModal.jsx)

• •Used on NewBuildPackage and ConceptDesignPackage pages.
• •Captures lead details: name, email, project type, budget, location, package_requested.
• •Saves to ServiceLead entity in database.
• •Sends email notification to Admin@cutlerco.com.au.

ProjectCaseStudy (pages/ProjectCaseStudy.jsx)

• •Template for /Portfolio/:projectId routes.
• •Reads projectId from URL, matches against hardcoded project array.
• •Renders: hero, overview, brief/challenge/solution/outcome, image gallery.

Platform

Backend Functions (functions/ directory)

Environment Variables / Secrets

Database Entities

Third-party Integrations

Automations

• •No active automations currently configured.
• •createAutomation backend function exists as infrastructure.
• •Potential future: ServiceLead entity automation to send email notification on new lead creation.

Contact Form (pages/Contact.jsx)

Book a Consult Modal (components/BookConsultModal.jsx)

Lead Capture Modal (components/services/LeadCaptureModal.jsx)

Logo

• •Text-based logo — no image file.
• •Line 1: 'Cutler & Co' — font-serif, text-2xl md:text-3xl, tracking-tight.
• •Line 2: 'ARCHITECTS' — font-serif, text-sm md:text-base, uppercase, tracking-[0.3em], color #6B5547.
• •In footer: same treatment on dark background, 'ARCHITECTS' in #B8A082.
• •Navigation: #3D2E22 on light bg, white on dark backgrounds.

Brand Voice

• •Tone: Strategic, confident, expert, honest, premium.
• •Not: Salesy, generic, fluffy.
• •Key phrases: 'Architectural Strategists', 'Profitable Projects', 'Discovery Call', 'not just an architect — your strategic advisor'.
• •Target: Affluent homeowners, developers, builders seeking ROI-focused architecture.

Photography Style

• •High-resolution, editorial quality.
• •Warm, natural light.
• •Architectural/interior photography with human scale implied.
• •Amandaria: tropical hinterland, bamboo, timber, stone, water, mist.
• •Overlay treatment: brown gradients (#3D2E22/70 down to transparent) to maintain text legibility.

Social Media

• •Instagram: @cutlerco_architects — https://www.instagram.com/cutlerco_architects/
• •Facebook: CutlerandCoArchitects — https://www.facebook.com/CutlerandCoArchitects/

Critical Files

Routing Rules

• •Outer LayoutWrapper at line ~58 of App.jsx wraps ALL routes with the shared Layout.
• •Do NOT add inner LayoutWrapper to individual routes — this creates double footer/header.
• •Exception: some routes intentionally render without the outer wrapper (check App.jsx for pattern).
• •New pages: add import at top of App.jsx, add <Route path='/path' element={<PageComponent />} /> inside the <Routes> block.
• •/amandaria and /portfolio/amandaria both render <Amandaria /> — no LayoutWrapper needed since outer wrapper handles it.

Backend Function Pattern

• •All functions: Deno.serve(async (req) => { ... })
• •Import SDK: import { createClientFromRequest } from 'npm:@base44/sdk@0.8.31'
• •Call from frontend: await base44.functions.invoke('functionName', params)
• •Response structure: { data: ..., status: ..., headers: ... } — actual return value is in response.data

Design Token Quick Reference

Page Creation Checklist

• •1. Create file in pages/ directory (e.g. pages/MyPage.jsx)
• •2. Export default function with same name as file
• •3. Add import to App.jsx: import MyPage from './pages/MyPage'
• •4. Add Route to App.jsx: <Route path='/my-page' element={<MyPage />} />
• •5. If auto-discovered via pagesConfig, also update pages.config.js
• •6. Add nav link in Layout.jsx navItems array if needed
• •7. Test that Layout (navbar + footer) appears correctly — no double rendering