Wren Landscape Design

Learn more

This is an example of a page. Unlike posts, which are displayed on your blog’s front page in the order they’re published, pages are better suited for more timeless content that you want to be easily accessible, like your About or Contact information. Click the Edit link to make changes to this page or add another page.

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { base44 } from '@/api/base44Client';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { ArrowRight, Check } from 'lucide-react';
const terrainTypes = ['Urban', 'Coastal', 'Mountain', 'Riverine', 'Civic', 'Residential'];
const envGoals = [
  'Climate Adaptation',
  'Biodiversity Enhancement',
  'Carbon Sequestration',
  'Community Wellbeing',
  'Stormwater Management',
  'Habitat Restoration',
];
const budgetRanges = [
  { value: 'under_100k', label: 'Under €100k' },
  { value: '100k_500k', label: '€100k — €500k' },
  { value: '500k_1m', label: '€500k — €1M' },
  { value: 'over_1m', label: 'Over €1M' },
];
export default function Contact() {
  const [step, setStep] = useState(1);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useState({
    terrain_type: '',
    environmental_goals: [],
    name: '',
    email: '',
    organisation: '',
    project_description: '',
    budget_range: '',
  });
  const toggleGoal = (goal) => {
    setForm(prev => ({
      ...prev,
      environmental_goals: prev.environmental_goals.includes(goal)
        ? prev.environmental_goals.filter(g => g !== goal)
        : [...prev.environmental_goals, goal],
    }));
  };
  const handleSubmit = async () => {
    setSubmitting(true);
    await base44.entities.Inquiry.create({
      ...form,
      terrain_type: form.terrain_type.toLowerCase(),
    });
    setSubmitted(true);
    setSubmitting(false);
  };
  if (submitted) {
    return (
      <div className="pt-28 pb-40 px-6 md:px-12 flex items-center justify-center min-h-[80vh]">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center max-w-lg"
        >
          <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-8">
            <Check className="w-8 h-8 text-primary" />
          </div>
          <h1 className="font-heading text-3xl md:text-4xl font-bold tracking-tight mb-4">
            Thank you
          </h1>
          <p className="font-body text-base text-muted-foreground leading-relaxed">
            We've received your project inquiry. Our team will review your submission and 
            be in touch within 48 hours.
          </p>
        </motion.div>
      </div>
    );
  }
  return (
    <div className="pt-28 pb-24 md:pb-40">
      {/* Header */}
      <div className="px-6 md:px-12 mb-16">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6"
        >
          Contact
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="font-body text-lg text-muted-foreground max-w-2xl leading-relaxed"
        >
          Tell us about your terrain. This project intake helps us understand your site, 
          your ambitions, and how we might work together.
        </motion.p>
      </div>
      {/* Step indicator */}
      <div className="px-6 md:px-12 mb-12">
        <div className="flex items-center gap-2">
          {[1, 2, 3].map((s) => (
            <React.Fragment key={s}>
              <button
                onClick={() => s < step && setStep(s)}
                className={`font-heading text-xs tracking-widest transition-colors ${
                  s === step ? 'text-foreground' : s < step ? 'text-primary cursor-pointer' : 'text-muted-foreground/40'
                }`}
              >
                {s === 1 ? 'TERRAIN' : s === 2 ? 'GOALS' : 'DETAILS'}
              </button>
              {s < 3 && <span className="w-8 h-px bg-border" />}
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="horizon-line mx-6 md:mx-12 mb-12" />
      <div className="px-6 md:px-12 max-w-3xl">
        {/* Step 1: Terrain Type */}
        {step === 1 && (
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.4 }}
          >
            <h2 className="font-heading text-2xl md:text-3xl font-bold tracking-tight mb-3">
              What is your terrain?
            </h2>
            <p className="font-body text-sm text-muted-foreground mb-10">
              Select the landscape type that best describes your site.
            </p>
            <div className="space-y-2">
              {terrainTypes.map((terrain) => (
                <button
                  key={terrain}
                  onClick={() => {
                    setForm(prev => ({ ...prev, terrain_type: terrain }));
                    setStep(2);
                  }}
                  className={`w-full text-left px-6 py-5 border transition-all duration-300 group flex items-center justify-between ${
                    form.terrain_type === terrain
                      ? 'border-foreground bg-foreground/5'
                      : 'border-border hover:border-foreground/30'
                  }`}
                >
                  <span className="font-heading text-lg tracking-tight">{terrain}</span>
                  <ArrowRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
                </button>
              ))}
            </div>
          </motion.div>
        )}
        {/* Step 2: Environmental Goals */}
        {step === 2 && (
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.4 }}
          >
            <h2 className="font-heading text-2xl md:text-3xl font-bold tracking-tight mb-3">
              What are your environmental goals?
            </h2>
            <p className="font-body text-sm text-muted-foreground mb-10">
              Select all that apply to your project.
            </p>
            <div className="space-y-2 mb-10">
              {envGoals.map((goal) => (
                <button
                  key={goal}
                  onClick={() => toggleGoal(goal)}
                  className={`w-full text-left px-6 py-5 border transition-all duration-300 flex items-center justify-between ${
                    form.environmental_goals.includes(goal)
                      ? 'border-foreground bg-foreground/5'
                      : 'border-border hover:border-foreground/30'
                  }`}
                >
                  <span className="font-heading text-lg tracking-tight">{goal}</span>
                  {form.environmental_goals.includes(goal) && (
                    <Check className="w-5 h-5 text-primary" />
                  )}
                </button>
              ))}
            </div>
            <Button
              onClick={() => setStep(3)}
              disabled={form.environmental_goals.length === 0}
              className="font-heading text-sm tracking-wide bg-foreground text-background hover:bg-primary px-8 py-6 h-auto"
            >
              Continue
              <ArrowRight className="w-4 h-4 ml-3" />
            </Button>
          </motion.div>
        )}
        {/* Step 3: Contact Details */}
        {step === 3 && (
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.4 }}
          >
            <h2 className="font-heading text-2xl md:text-3xl font-bold tracking-tight mb-3">
              Tell us about yourself
            </h2>
            <p className="font-body text-sm text-muted-foreground mb-10">
              We'll use these details to get back to you.
            </p>
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="font-heading text-xs tracking-widest uppercase text-muted-foreground block mb-2">
                    Name *
                  </label>
                  <Input
                    value={form.name}
                    onChange={(e) => setForm(prev => ({ ...prev, name: e.target.value }))}
                    className="h-12 bg-transparent border-border font-body"
                    placeholder="Your full name"
                  />
                </div>
                <div>
                  <label className="font-heading text-xs tracking-widest uppercase text-muted-foreground block mb-2">
                    Email *
                  </label>
                  <Input
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm(prev => ({ ...prev, email: e.target.value }))}
                    className="h-12 bg-transparent border-border font-body"
                    placeholder="your@email.com"
                  />
                </div>
              </div>
              <div>
                <label className="font-heading text-xs tracking-widest uppercase text-muted-foreground block mb-2">
                  Organisation
                </label>
                <Input
                  value={form.organisation}
                  onChange={(e) => setForm(prev => ({ ...prev, organisation: e.target.value }))}
                  className="h-12 bg-transparent border-border font-body"
                  placeholder="Company or council name"
                />
              </div>
              <div>
                <label className="font-heading text-xs tracking-widest uppercase text-muted-foreground block mb-2">
                  Budget Range
                </label>
                <div className="grid grid-cols-2 gap-2">
                  {budgetRanges.map((b) => (
                    <button
                      key={b.value}
                      onClick={() => setForm(prev => ({ ...prev, budget_range: b.value }))}
                      className={`px-4 py-3 border text-left transition-all duration-300 ${
                        form.budget_range === b.value
                          ? 'border-foreground bg-foreground/5'
                          : 'border-border hover:border-foreground/30'
                      }`}
                    >
                      <span className="font-body text-sm">{b.label}</span>
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="font-heading text-xs tracking-widest uppercase text-muted-foreground block mb-2">
                  Project Description
                </label>
                <Textarea
                  value={form.project_description}
                  onChange={(e) => setForm(prev => ({ ...prev, project_description: e.target.value }))}
                  className="min-h-[120px] bg-transparent border-border font-body resize-none"
                  placeholder="Tell us about your site and vision..."
                />
              </div>
              <Button
                onClick={handleSubmit}
                disabled={!form.name || !form.email || submitting}
                className="font-heading text-sm tracking-wide bg-foreground text-background hover:bg-primary px-8 py-6 h-auto"
              >
                {submitting ? 'Submitting...' : 'Submit Inquiry'}
                <ArrowRight className="w-4 h-4 ml-3" />
              </Button>
            </div>
          </motion.div>
        )}
      </div>
      {/* Direct contact */}
      <div className="px-6 md:px-12 mt-24 md:mt-40">
        <div className="horizon-line mb-12" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <p className="font-heading text-xs tracking-widest uppercase text-muted-foreground mb-4">
              General Inquiries
            </p>
            <a href="mailto:hello@verdant.ie" className="font-body text-base text-foreground hover:text-primary transition-colors">
              hello@verdant.ie
            </a>
          </div>
          <div>
            <p className="font-heading text-xs tracking-widest uppercase text-muted-foreground mb-4">
              Business Development
            </p>
            <a href="tel:+35312345678" className="font-body text-base text-foreground hover:text-primary transition-colors">
              +353 1 234 5678
            </a>
          </div>
          <div>
            <p className="font-heading text-xs tracking-widest uppercase text-muted-foreground mb-4">
              Address
            </p>
            <p className="font-body text-base text-foreground">
              The Green House, 12 Merrion Square<br />Dublin 2, D02 KF82
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}