edit contact page

src/components/CallToAction.tsx

@@ -25,7 +25,7 @@ export function CallToAction() {
             <Button href="/contact" color="white">
               Contact Us
             </Button>
-            <a href="/book-meeting" className="button-outline">
+            <a href="https://calendly.com/florian_threefold/30min" className="button-outline">
               Book a Meeting
             </a>
           </div>

src/components/ContactHero.tsx

@@ -1,63 +1,14 @@
 'use client'
 
-import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from '@heroicons/react/24/outline'
+import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
 import { useState } from 'react'
+import Image from 'next/image'
 
 export function ContactHero() {
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phoneNumber: '',
-    message: ''
-  })
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle')
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }))
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    setSubmitStatus('idle')
-
-    try {
-      const response = await fetch('/api/contact', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(formData),
-      })
-
-      if (response.ok) {
-        setSubmitStatus('success')
-        setFormData({
-          firstName: '',
-          lastName: '',
-          email: '',
-          phoneNumber: '',
-          message: ''
-        })
-      } else {
-        setSubmitStatus('error')
-      }
-    } catch (error) {
-      console.error('Error submitting form:', error)
-      setSubmitStatus('error')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
   return (
-    <div className="relative isolate bg-white">
+    <div className="relative isolate bg-gray-100">
       <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+        {/* Left container (unchanged) */}
         <div className="relative px-6 pt-24 pb-20 lg:static lg:px-8 lg:py-32">
           <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
             <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
@@ -100,7 +51,9 @@ export function ContactHero() {
               Get in Touch
             </h2>
             <p className="mt-6 text-lg/8 text-gray-600">
-              At OurWorld, we value your feedback and inquiries. Whether you're interested in our ventures, have questions about our technologies, or want to collaborate, we're here to connect. Reach out to us today and let's build a better digital future together.
+              At OurWorld, we value your feedback and inquiries. Whether you're interested in our ventures, have
+              questions about our technologies, or want to collaborate, we're here to connect. Reach out to us today
+              and let's build a better digital future together.
             </p>
             <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
               <div className="flex gap-x-4">
@@ -120,7 +73,7 @@ export function ContactHero() {
                   <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
                 </dt>
                 <dd>
-                  <a href="mailto:hello@example.com" className="hover:text-gray-900">
+                  <a href="mailto:info@ourworld.tf" className="hover:text-gray-900">
                     info@ourworld.tf
                   </a>
                 </dd>
@@ -128,124 +81,19 @@ export function ContactHero() {
             </dl>
           </div>
         </div>
-        <form onSubmit={handleSubmit} className="px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-48">
-          <div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
-            {/* Status Messages */}
-            {submitStatus === 'success' && (
-              <div className="mb-6 rounded-md bg-green-50 p-4">
-                <div className="text-sm text-green-800">
-                  Thank you! Your message has been sent successfully. We'll get back to you soon.
-                </div>
-              </div>
-            )}
-            {submitStatus === 'error' && (
-              <div className="mb-6 rounded-md bg-red-50 p-4">
-                <div className="text-sm text-red-800">
-                  Sorry, there was an error sending your message. Please try again or contact us directly.
-                </div>
-              </div>
-            )}
 
-            <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
+        {/* Right container (image) */}
-              <div>
+        <div className="relative flex items-center justify-center bg-gray-100 px-6 py-32 lg:px-8">
-                <label htmlFor="firstName" className="block text-sm/6 font-semibold text-gray-900">
+          <div className="w-full max-w-md overflow-hidden rounded-lg shadow-lg">
-                  First name *
+            <Image
-                </label>
+              src="/images/contact/contact.jpg"
-                <div className="mt-2.5">
+              alt="Team jumping at sunset"
-                  <input
+              width={900}
-                    id="firstName"
+              height={600}
-                    name="firstName"
+              className="h-auto w-full object-cover"
-                    type="text"
+            />
-                    required
-                    autoComplete="given-name"
-                    value={formData.firstName}
-                    onChange={handleInputChange}
-                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
-                  />
-                </div>
-              </div>
-              <div>
-                <label htmlFor="lastName" className="block text-sm/6 font-semibold text-gray-900">
-                  Last name *
-                </label>
-                <div className="mt-2.5">
-                  <input
-                    id="lastName"
-                    name="lastName"
-                    type="text"
-                    required
-                    autoComplete="family-name"
-                    value={formData.lastName}
-                    onChange={handleInputChange}
-                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
-                  />
-                </div>
-              </div>
-              <div className="sm:col-span-2">
-                <label htmlFor="email" className="block text-sm/6 font-semibold text-gray-900">
-                  Email *
-                </label>
-                <div className="mt-2.5">
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    required
-                    autoComplete="email"
-                    value={formData.email}
-                    onChange={handleInputChange}
-                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
-                  />
-                </div>
-              </div>
-              <div className="sm:col-span-2">
-                <label htmlFor="phoneNumber" className="block text-sm/6 font-semibold text-gray-900">
-                  Phone number
-                </label>
-                <div className="mt-2.5">
-                  <input
-                    id="phoneNumber"
-                    name="phoneNumber"
-                    type="tel"
-                    autoComplete="tel"
-                    value={formData.phoneNumber}
-                    onChange={handleInputChange}
-                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
-                  />
-                </div>
-              </div>
-              <div className="sm:col-span-2">
-                <label htmlFor="message" className="block text-sm/6 font-semibold text-gray-900">
-                  Message *
-                </label>
-                <div className="mt-2.5">
-                  <textarea
-                    id="message"
-                    name="message"
-                    rows={4}
-                    required
-                    value={formData.message}
-                    onChange={handleInputChange}
-                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="mt-8 flex justify-end">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className={`rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${
-                  isSubmitting
-                    ? 'bg-gray-400 cursor-not-allowed'
-                    : 'bg-indigo-600 hover:bg-gray-500'
-                }`}
-              >
-                {isSubmitting ? 'Sending...' : 'Send message'}
-              </button>
-            </div>
           </div>
-        </form>
+        </div>
       </div>
     </div>
   )