improved site header, added contact form, content card carousel, footer, and more photos

components/contact-form.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+import './contact-form.css'
+
+export default function ContactForm() {
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setSubmitted(true)
+  }
+
+  return (
+    <div className="contact-form-box">
+      <form className="contact-form-inner" onSubmit={handleSubmit} noValidate>
+        <div>
+          <h2 className="contact-form-title">Get in touch</h2>
+          <p className="contact-form-description">
+            Send us a message and we&apos;ll get back to you as soon as we can.
+          </p>
+        </div>
+
+        <div className="contact-form-field">
+          <label htmlFor="contact-email" className="contact-form-label">
+            Email
+          </label>
+          <input
+            id="contact-email"
+            name="email"
+            type="email"
+            required
+            autoComplete="email"
+            placeholder="you@example.com"
+            className="contact-form-input"
+          />
+        </div>
+
+        <div className="contact-form-field">
+          <label htmlFor="contact-phone" className="contact-form-label">
+            Phone <span className="contact-form-label-optional">(optional)</span>
+          </label>
+          <input
+            id="contact-phone"
+            name="phone"
+            type="tel"
+            autoComplete="tel"
+            placeholder="+44 7700 900000"
+            className="contact-form-input"
+          />
+        </div>
+
+        <div className="contact-form-field">
+          <label htmlFor="contact-message" className="contact-form-label">
+            Message
+          </label>
+          <textarea
+            id="contact-message"
+            name="message"
+            required
+            rows={6}
+            placeholder="Tell us about your project..."
+            className="contact-form-textarea"
+          />
+        </div>
+
+        <button type="submit" className="contact-form-submit">
+          {submitted ? 'Message sent' : 'Send message'}
+        </button>
+      </form>
+    </div>
+  )
+}