add the contact column

app/page.tsx

@@ -12,15 +12,16 @@ import StreetView from '@/components/streetView/StreetView'
 import Narrative from '@/components/narrative/Narrative'
 
 
+
 export default function Home() {
   return (
     <main className="relative w-[100vw] h-[100vh] overflow-y-hidden">
-      <img src="/logos/floodgen_logo_white.png" className="absolute left-4 top-6 w-[155px] h-[38.75px] z-[999] " alt="logos_white" />
       <MapProvider>
         <NarrativeProvider>
           <StreetViewProvider>
             <MarkerProvider>
               <Narrative />
+
               <Map />
               <InfoPage />
               <StreetView />

components/infoPage/infoBox/InfoBox.tsx

@@ -11,14 +11,15 @@ import { XMarkIcon, Bars3Icon } from '@heroicons/react/16/solid'
 import InfoAbout from './InfoAbout'
 import InfoCredit from './InfoCredit'
 import InfoAI from './InfoAI'
+import InfoContact from './InfoContact'
 
 
 
 
 const InfoBox = () => {
 
 
-    const [selected, setSelected] = useState<'About' | "Credit" | 'Introduction' | 'AI'>("About")
+    const [selected, setSelected] = useState<'About' | "Credit" | 'Introduction' | 'AI' | "Contact">("About")
     const [boxShown, setBoxShown] = useState(false)
 
     const { setOpenNarrative } = useContext(NarrativeContext) as NarrativeType
@@ -28,7 +29,7 @@ const InfoBox = () => {
     const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
 
 
-    const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI") => {
+    const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI" | "Contact") => {
         setSelected(s)
     }
 
@@ -44,12 +45,12 @@ const InfoBox = () => {
 
     return (
         <>
-            <div className={`absolute top-[0] lg:top-0 w-full h-[100%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
+            <div className={`absolute top-[0] lg:top-0 w-full h-[100%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-[1000] overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
                 <div className=' px-5 lg:px-16 pt-8 lg:pt-[5rem] pb-8 w-full rounded-t-[1rem]'>
                     {/* <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' className='mb-2' /> */}
                     {
                         isDesktop ? <img src="/logos/floodgen_logo.png" alt="" className='mb-2 w-[203px] ' /> :
-                        <img src="/logos/floodgen_logo.png" alt="" className='mb-4 w-[80px] ' /> 
+                            <img src="/logos/floodgen_logo.png" alt="" className='mb-4 w-[80px] ' />
                     }
 
                     {/* <InfoTitle /> */}
@@ -59,16 +60,18 @@ const InfoBox = () => {
                             <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Introduction" && "pb-[0.05rem]  text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
                             <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
                             <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Contact" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Contact")}>Contact</div>
                         </div>
                         {
                             selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> :
                                 selected === "AI" ? <InfoAI /> :
-                                    <InfoCredit />
+                                    selected === "Contact" ? <InfoContact /> :
+                                        <InfoCredit />
                         }
                     </div>
                 </div>
             </div>
-            <div className={`absolute top-6 ${openStreetView ? "left-[calc(100%_-_3.5rem)]" : "left-[calc(100%_-_3.5rem)]"}  flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-40 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
+            <div className={`absolute top-6 ${openStreetView ? "left-[calc(100%_-_3.5rem)]" : "left-[calc(100%_-_3.5rem)]"}  flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-[1001] shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
                 {
                     boxShown ? <XMarkIcon className='w-6 h-6 text-black' /> : <Bars3Icon className='w-5 h-5 text-black' />
                 }

components/infoPage/infoBox/InfoContact.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const InfoContact = () => {
+    return (
+        <div className='lg:w-[60rem] h-full'>
+        <iframe src="https://airtable.com/embed/appZoFVpDtz3OFCxM/pag9X6tn50U62HP9N/form"  width="100%" height="600px" style={{background: 'transparent', border: '1px solid #ccc'}}></iframe>
+        </div>
+
+    )
+}
+
+export default InfoContact

components/map/Map.css

@@ -4,7 +4,7 @@
   border-radius: 20px !important;
   width: 270px !important;
   height: 120px !important;
-  z-index: 100000;
+  z-index: 100000 !important;
 }
 
 /* .content {

components/map/Map.tsx

@@ -97,7 +97,7 @@ const Map = () => {
                             "#3B9CD9",
                             ['all', ['==', ['get', "FLD_ZONE"], "AE"]],
                             "#7FBEE6",
-                            "#3C9CD9",
+                            "#C1DFF3",
                         ],
                         'fill-opacity': 1
                     }

components/narrative/Narrative.tsx

@@ -21,10 +21,10 @@ const Narrative = () => {
             {
                 openNarrative && (
                     <>
-                        <div className="absolute right-8 top-6 flex items-center justify-center w-[35px] h-[35px] bg-[#E7E7E7] bg-opacity-60 rounded-full z-[999] cursor-pointer">
+                        <div className="absolute right-8 top-6 flex items-center justify-center w-[35px] h-[35px] bg-[#E7E7E7] bg-opacity-60 rounded-full z-[10002] cursor-pointer">
                             <XMarkIcon width={24} height={24} className=" text-black font-thin " onClick={clickHandler} />
                         </div>
-                        <div className="absolute top-0 left-0 z-50 w-full h-full overflow-y-auto">
+                        <div className="absolute top-0 left-0 z-[1002] w-full h-full overflow-y-auto ">
                             <Introduction />
                             <Satellite />
                             <StreetView />

components/streetView/StreetInfo.tsx

@@ -22,7 +22,7 @@ const StreetInfo = ({ openStreetView }: Props) => {
   return (
     <>
       {
-        openStreetView && <div className={`absolute bottom-[-65%] flex flex-col lg:left-[13rem] lg:top-6 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[65%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-40`}>
+        openStreetView && <div className={`absolute bottom-[-65%] flex flex-col lg:left-4 lg:top-[6rem] px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[65%] lg:h-[calc(100%_-_6rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-40`}>
           <div className='flex justify-between items-center w-full'>
             <h2 className='font-bold text-heading text-content_black'>{selectedSitesFeatures.properties['Place']}</h2>
 

components/streetView/StreetView.tsx

@@ -135,7 +135,7 @@ const StreetView = () => {
                 </div>
 
                 <div className={`pt-[1.75rem] lg:pl-8`}>
-                    <div className='absolute top-6 left-[8rem] lg:left-[13rem] flex gap-4 ml-20 lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
+                    <div className='absolute top-6 left-[8rem] lg:left-[13rem] flex gap-4 ml-20 lg:ml-[0rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
                         {
                             floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
                         }

hooks/useTooltips.tsx

@@ -33,8 +33,9 @@ const useTooltips = () => {
         // }
 
         map?.on("mousemove", "coastal_flooding", (e: MapMouseEvent & EventData) => {
+            console.log(e.features[0].properties.FLD_ZONE === "VE" ? 'aaa' : "failed")
             const content = `<div class="content">
-            ${e.features[0].properties.FLD_ZONE === "VE" ? "<div class='zone' style='background:#3C9CD9'>1% annual chance flood event (coastal)</div>" :
+            ${e.features[0].properties.FLD_ZONE === "VE" ? "<div class='zone' style='background:#3B9CD9'>1% annual chance flood event (coastal)</div>" :
                     e.features[0].properties.FLD_ZONE === "AE" ? "<div class='zone' style='background:#7FBEE6'>1% annual chance flood event</div>" :
                         "<div class='zone' style='background:#C1DFF3'>0.2% annual chance of flood hazard</div>"
                 }