fix

src/components/ContactHero.jsx

@@ -1,65 +1,28 @@
 'use client'
 
 import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
-import { Button } from '@/components/Button'
+
-import { Container } from '@/components/Container'
 import { H2, PS } from '@/components/text'
-import { useState } from 'react'
+
 
 export function ContactHero() {
   return (
     <div className="relative isolate">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2 py-8 lg:py-12">
         {/* Left container */}
-        <div className="relative px-6 pt-24 pb-20 lg:static lg:px-8 lg:py-32">
+        <div className="relative px-4 lg:px-6 py-8 lg:py-16">
           <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">
+            <H2 className="">
-              <svg
-                aria-hidden="true"
-                className="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
-              >
-                <defs>
-                  <pattern
-                    x="100%"
-                    y={-1}
-                    id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
-                    width={200}
-                    height={200}
-                    patternUnits="userSpaceOnUse"
-                  >
-                    <path d="M130 200V.5M.5 .5H200" fill="none" />
-                  </pattern>
-                </defs>
-                <rect width="100%" height="100%" strokeWidth={0} className="fill-white" />
-                <svg x="100%" y={-1} className="overflow-visible fill-gray-50">
-                  <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
-                </svg>
-                <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
-              </svg>
-              <div
-                aria-hidden="true"
-                className="absolute top-[calc(100%-13rem)] -left-56 hidden transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))]"
-              >
-                <div
-                  style={{
-                    clipPath:
-                      'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
-                  }}
-                  className="aspect-1155/678 w-288.75 bg-linear-to-br from-[#80caff] to-[#4f46e5] opacity-10"
-                />
-              </div>
-            </div>
-            <H2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
               Get in Touch
             </H2>
-            <PS>
+            <PS className="mt-2">
               At VEDA, we welcome your questions, ideas, and collaborations. Whether you're curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we're here to connect. Reach out to us today and let's create transformative experiences along the timeless Nile.
             </PS>
-            <dl className="mt-10 space-y-4 text-base/7 text-gray-200">
+            <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
               <div className="flex gap-x-4">
                 <dt className="flex-none">
                   <span className="sr-only">Email</span>
-                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-800" />
                 </dt>
                 <dd>
                   <a href="mailto:info@veda-egypt.com" className="hover:text-gray-900">
@@ -70,7 +33,7 @@ export function ContactHero() {
               <div className="flex gap-x-4">
                 <dt className="flex-none">
                   <span className="sr-only">Reservations</span>
-                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-800" />
                 </dt>
                 <dd>
                   <a href="mailto:reservation@veda-egypt.com" className="hover:text-gray-900">
@@ -83,7 +46,7 @@ export function ContactHero() {
         </div>
 
         {/* Right container (image) */}
-        <div className="relative bg-gray-100 overflow-hidden px-6 lg:px-8">
+        <div className="relative bg-transparent overflow-hidden px-6 lg:px-8">
           <div className="h-full w-full overflow-hidden">
             <img
               src="/images/contact.jpg"