feat: Implement initial home and contact pages with global styling.

This commit is contained in:
2026-03-11 10:29:36 +01:00
parent 0fbfae29d9
commit 3ef4f6b2ad
3 changed files with 159 additions and 82 deletions

View File

@@ -4,7 +4,7 @@ import { Suspense } from "react";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { ContactForm } from "@/components/contact-form";
import { JsonLd } from "@/components/json-ld";
import { deliveryHighlights, siteConfig } from "@/data/site-content";
import { deliveryHighlights, processSteps, siteConfig } from "@/data/site-content";
import {
breadcrumbSchema,
buildPageMetadata,
@@ -81,14 +81,31 @@ export default function ContactPage() {
<section className="section">
<div className="container contact-layout">
<div className="contact-card">
<div className="card-heading">
<span className="eyebrow">Send us a message</span>
<h2>Tell us about your project.</h2>
<div style={{ display: "flex", flexDirection: "column", gap: "7rem" }}>
<div className="contact-card">
<div className="card-heading">
<span className="eyebrow">Send us a message</span>
<h2>Tell us about your project.</h2>
</div>
<Suspense fallback={<p>Loading contact form...</p>}>
<ContactForm />
</Suspense>
</div>
<div className="contact-next-steps">
<span className="eyebrow">What happens next</span>
<div className="contact-steps-list">
{processSteps.slice(0, 3).map((s) => (
<div key={s.step} className="contact-step-item">
<span className="contact-step-num">{s.step}</span>
<div>
<strong>{s.title}</strong>
<p>{s.description}</p>
</div>
</div>
))}
</div>
</div>
<Suspense fallback={<p>Loading contact form...</p>}>
<ContactForm />
</Suspense>
</div>
<div className="contact-sidebar">