Spruce up contact and repair request forms, fix Docker build timeouts

- Contact page: two-column layout with rover image and email card sidebar
- Repair request: hero section, "How it works" steps sidebar, return address
  field, warranty/charges checkbox
- Reduce static generation concurrency to prevent Docker build timeouts
- Bump staticPageGenerationTimeout to 300s

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

next.config.ts

@@ -2,7 +2,11 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
-  staticPageGenerationTimeout: 120,
+  staticPageGenerationTimeout: 300,
+  experimental: {
+    staticGenerationMaxConcurrency: 8,
+    staticGenerationMinPagesPerWorker: 25,
+  },
 };
 
 export default nextConfig;

src/app/contact/ContactForm.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import Image from "next/image";
 import { Container } from "@/components/layout/Container";
 import { Button } from "@/components/ui/Button";
 import { FormField } from "@/components/ui/FormField";
@@ -34,7 +35,7 @@ export default function ContactForm() {
 
   if (submitted) {
     return (
-      <section className="bg-white py-16 sm:py-24">
+      <section className="bg-muted py-16 sm:py-24">
         <Container>
           <div className="mx-auto max-w-2xl text-center">
             <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
@@ -53,24 +54,21 @@ export default function ContactForm() {
     "w-full rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20";
 
   return (
-    <section className="bg-white py-16 sm:py-24">
+    <section className="bg-muted py-16 sm:py-24">
       <Container>
-        <div className="mx-auto max-w-2xl">
+        <div className="mb-10">
-          <div className="mb-12">
           <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
             Contact us.
           </h1>
-            <p className="mt-4 text-foreground-light">
+          <p className="mt-3 text-foreground-light">
-              Email:{" "}
+            Have a question or need a quote? Fill in the form and we&apos;ll get back to you.
-              <a
-                href="mailto:contact@micromelon.com.au"
-                className="text-brand-dark underline hover:text-foreground"
-              >
-                contact@micromelon.com.au
-              </a>
           </p>
         </div>
 
+        <div className="grid gap-12 md:grid-cols-2">
+          {/* Form */}
+          <div>
+            <div className="rounded-2xl border border-border bg-white p-6 shadow-sm sm:p-8">
               <form onSubmit={handleSubmit} className="space-y-6">
                 <FormField
                   label="Your Name"
@@ -161,6 +159,46 @@ export default function ContactForm() {
                 </div>
               </form>
             </div>
+          </div>
+
+          {/* Sidebar */}
+          <div>
+            <div className="sticky top-24 space-y-6">
+              <div className="overflow-hidden rounded-2xl">
+                <Image
+                  src="/images/products/rover-candid.png"
+                  alt="Micromelon Rover"
+                  width={600}
+                  height={400}
+                  className="w-full object-cover"
+                />
+              </div>
+
+              <div className="rounded-2xl border border-border bg-white p-5 shadow-sm">
+                <div className="flex items-start gap-3">
+                  <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand/10">
+                    <svg className="h-5 w-5 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Email</p>
+                    <a
+                      href="mailto:contact@micromelon.com.au"
+                      className="text-sm font-medium text-brand-dark hover:underline"
+                    >
+                      contact@micromelon.com.au
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <p className="text-center text-sm text-muted-foreground">
+                We typically respond within 1 business day.
+              </p>
+            </div>
+          </div>
+        </div>
       </Container>
     </section>
   );

src/app/rover-repair-request/RepairRequestForm.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import Image from "next/image";
 import { Container } from "@/components/layout/Container";
 import { Button } from "@/components/ui/Button";
-import { SectionHeading } from "@/components/ui/SectionHeading";
 import { KNOWN_SCHOOLS } from "@/data/schools";
 
 interface RoverEntry {
@@ -23,6 +23,8 @@ export default function RepairRequestForm() {
   const [rovers, setRovers] = useState<RoverEntry[]>([
     { id: nextId++, serialNumber: "", issue: "" },
   ]);
+  const [returnAddress, setReturnAddress] = useState("");
+  const [agreedToCharges, setAgreedToCharges] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const institutionRef = useRef<HTMLDivElement>(null);
@@ -63,6 +65,7 @@ export default function RepairRequestForm() {
           email,
           phone,
           institution,
+          returnAddress,
           rovers: rovers.map((r) => ({
             serialNumber: r.serialNumber,
             issue: r.issue,
@@ -79,7 +82,7 @@ export default function RepairRequestForm() {
 
   if (submitted) {
     return (
-      <section className="bg-white py-16 sm:py-24">
+      <section className="bg-muted py-16 sm:py-24">
         <Container>
           <div className="mx-auto max-w-2xl text-center">
             <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
@@ -97,16 +100,47 @@ export default function RepairRequestForm() {
   const inputClasses =
     "w-full rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20";
 
-  return (
+  const steps = [
-    <section className="bg-white py-16 sm:py-24">
+    { number: 1, title: "Submit your request", description: "Fill in the form with your rover details and the issues you're experiencing." },
-      <Container>
+    { number: 2, title: "Receive confirmation", description: "You'll receive a confirmation email acknowledging your repair request." },
-        <div className="mx-auto max-w-2xl">
+    { number: 3, title: "Return Order PDF", description: "We'll email you a Return Order PDF with instructions on how and where to ship your rover." },
-          <SectionHeading
+    { number: 4, title: "We repair your rovers", description: "Repairs normally take 1–2 weeks. If your rovers are out of warranty, you'll receive a quote before we proceed." },
-            title="Rover Repair Request"
+    { number: 5, title: "Repaired & on its way", description: "Once repairs are complete, you'll receive an email letting you know your rover is on its way back." },
-            subtitle="Let us know which rovers need repair and we'll organise getting them fixed."
+  ];
-            centered={false}
-          />
 
+  return (
+    <>
+      {/* Hero section */}
+      <section className="bg-muted">
+        <Container>
+          <div className="grid items-center gap-8 py-16 sm:py-20 md:grid-cols-2">
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+                Rover Repair Request
+              </h1>
+              <p className="mt-4 text-lg text-muted-foreground">
+                Let us know which rovers need repair and we&apos;ll organise getting them fixed.
+              </p>
+            </div>
+            <div className="flex justify-center md:justify-end">
+              <Image
+                src="/images/products/rover-candid.png"
+                alt="Micromelon Rover"
+                width={420}
+                height={280}
+                className="rounded-2xl object-cover"
+              />
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      {/* Form + sidebar */}
+      <section className="bg-white py-16 sm:py-20">
+        <Container>
+          <div className="grid gap-12 md:grid-cols-2">
+            {/* Form */}
+            <div>
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
                   <label htmlFor="name" className="mb-2 block text-sm font-medium text-foreground">
@@ -267,13 +301,66 @@ export default function RepairRequestForm() {
                 </div>
 
                 <div>
-              <Button type="submit" variant="primary" disabled={submitting}>
+                  <label htmlFor="returnAddress" className="mb-2 block text-sm font-medium text-foreground">
+                    Return Address <span className="text-brand">*</span>
+                  </label>
+                  <textarea
+                    id="returnAddress"
+                    required
+                    rows={3}
+                    placeholder="Street address, suburb, state, postcode"
+                    value={returnAddress}
+                    onChange={(e) => setReturnAddress(e.target.value)}
+                    className={inputClasses}
+                  />
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <input
+                    type="checkbox"
+                    id="agree-charges"
+                    required
+                    checked={agreedToCharges}
+                    onChange={(e) => setAgreedToCharges(e.target.checked)}
+                    className="mt-1 h-4 w-4 shrink-0 rounded border-border text-brand accent-brand focus:ring-brand/20"
+                  />
+                  <label htmlFor="agree-charges" className="text-sm text-muted-foreground">
+                    I understand that rover repairs within the standard 1-year warranty period are covered at no cost for manufacturing defects. Repairs outside the warranty period, or for damage caused by misuse, intentional damage, or neglect, are subject to a $50 service fee plus the cost of replacement parts. Micromelon reserves the right to assess the rover and provide a quote before proceeding with any chargeable repairs. <span className="text-brand">*</span>
+                  </label>
+                </div>
+
+                <div>
+                  <Button type="submit" variant="primary" disabled={submitting || !agreedToCharges}>
                     {submitting ? "Submitting..." : "Submit Repair Request"}
                   </Button>
                 </div>
               </form>
             </div>
+
+            {/* Sidebar */}
+            <div>
+              <div className="sticky top-24">
+                <div className="rounded-2xl border border-border bg-muted p-6">
+                  <h3 className="text-lg font-bold text-foreground">How it works</h3>
+                  <div className="mt-5 space-y-8">
+                    {steps.map((step) => (
+                      <div key={step.number} className="flex gap-4">
+                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand text-sm font-bold text-white">
+                          {step.number}
+                        </div>
+                        <div>
+                          <p className="font-semibold text-foreground">{step.title}</p>
+                          <p className="mt-1 text-sm text-muted-foreground">{step.description}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </Container>
       </section>
+    </>
   );
 }