components/form/GoogleAppointmentBlock.tsx

@@ -0,0 +1,16 @@
+const GoogleAppointmentBlock = () => {
+    const {GOOGLE_APPOINTMENTS_LINK} = process.env;
+    console.log(GOOGLE_APPOINTMENTS_LINK)
+    return (
+        <div className='w-full h-full flex flex-row justify-center bg-white border-solid'>
+            <embed 
+                src={GOOGLE_APPOINTMENTS_LINK!}
+                style={{border: 1}}
+                width="100%"
+                height="600"
+            ></embed>
+        </div>
+    );
+}
+
+export default GoogleAppointmentBlock;

pages/index.tsx

@@ -8,6 +8,7 @@ import navigationContent from '../lib/navigationContent'
 import ContactForm from '@/components/form/ContactForm';
 import Footer from '@/components/footer';
 import Link from 'next/link';
+import GoogleAppointmentBlock from '@/components/form/GoogleAppointmentBlock';
 const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
@@ -119,6 +120,7 @@ export default function Home() {
           <div className='flex flex-row h-full w-full justify-center'>
             <div className='flex flex-col h-full w-full justify-center'>
               <ContactForm/>
+              {/* <GoogleAppointmentBlock/> */}
             </div>
             <span className="cursor-pointer self-end" onClick={() => {
               executeScrollToLandiing();