revise the narrative

app/layout.tsx

@@ -8,7 +8,7 @@ import Script from 'next/script'
 const roboto = Inter({subsets:['latin']})
 
 export const metadata: Metadata = {
-  title: 'Floodgen',
+  title: 'FloodGen',
   description: 'Generated by create next app',
   icons:"/app/fg_logo_white_sm.png"
 }

components/map/Map.tsx

@@ -37,8 +37,8 @@ const Map = () => {
                 style: "mapbox://styles/betanyc/clrrs5fv200h101o87qwn1sw1",
                 center: [lng, lat],
                 zoom: zoom,
-                minZoom: 8,
-                maxZoom: 14,
+                minZoom: 10,
+                maxZoom: 15,
                 interactive: true,
                 doubleClickZoom: false,
             })

components/map/mapLayer/MapLayerBtns.tsx

@@ -46,7 +46,7 @@ const MapLayerBtns = ({ clicked, buttonClickHandler }: Props) => {
 
     return (
         <>
-            <div className={`absolute   flex items-center gap-4 transition-all duration-[1500ms] ease-in-out z-20 ${openStreetView ? " top-[calc(50%_+_10rem)] left-4" : "top-[1.5rem] left-[14rem]"}`}>
+            <div className={`absolute   flex items-center gap-4 transition-all duration-[1500ms] ease-in-out z-20 ${openStreetView ? " top-[calc(65%_+_1rem)] left-4" : "top-[1.5rem] left-[14rem]"}`}>
                 {/* <Image width={80} height={80} src="./icons/previous.svg" alt='previous' className='border-2 border-black' /> */}
                 {/* {
                     openStreetView && <Previous />

components/narrative/Ending.tsx

@@ -11,7 +11,7 @@ const Ending = ({ clickHandler }: Props) => {
             <div className="absolute max-sm:right-4 left-4  md:left-8 bottom-[11rem] px-5 py-7 md:max-w-[50rem] bg-black bg-opacity-[.65] rounded-lg">
                 <p className="font-semibold text-[14px] md:text-heading text-white">FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies.</p>
             </div>
-            <button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[14px] md:text-[1.25rem] bg-[#306DDD] rounded-[40px] cursor-pointer' onClick={clickHandler}>Explore Floodgen</button>
+            <button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[14px] md:text-[1.25rem] text-white bg-[#306DDD] rounded-[40px] cursor-pointer' onClick={clickHandler}>Explore FloodGen</button>
             <img src='/logos/fg_logo_white_sm.png' className='absolute right-6 bottom-4 z-30 w-8 h-8' />
         </div>
     )

components/narrative/Narrative.tsx

@@ -27,7 +27,6 @@ const Narrative = () => {
                         <div className="absolute top-0 left-0 z-[1002] w-full h-full overflow-y-auto ">
                             <Introduction />
                             <Satellite />
-                            <StreetView />
                             <Slider />
                             <Ending clickHandler={clickHandler}/>
                         </div>

components/narrative/Satellite.tsx

@@ -26,7 +26,7 @@ const Satellite = () => {
             <div className='relative w-full h-[50%] md:h-full'>
                 <img src="/imgs/narrative_three.png" className='w-full h-full' alt="" />
                 {/* <div className="absolute left-0 top-0 w-full h-full bg-black bg-opacity-40"></div> */}
-                <div className="absolute left-8 bottom-[5%] flex flex-col items-center p-5 w-[50%] bg-black bg-opacity-[.65] rounded-lg">
+                <div className="absolute left-11 bottom-[5%] flex flex-col items-center p-5 w-[50%] bg-black bg-opacity-[.65] rounded-lg">
                     <img src="/imgs/narrative_six.png" className='w-full h-[20%]' alt="" />
                     <p className="mt-2 font-semibold text-[14px] md:text-[1.125rem] text-white">If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
                 </div>

hooks/useTooltips.tsx

@@ -57,7 +57,7 @@ const useTooltips = () => {
                 }
                 ${e.features[0].properties.Flooding_Category === 1 ? "<div class='description'>Moderate stormwater flood scenario of <span style='font-weight:bold'>1 ft. and greater flooding,</span> with the projected 2050 sea level rise (+2.5 ft)</div>" :
                     e.features[0].properties.Flooding_Category === 2 ? "<div class='description'>Moderate stormwater flood scenario of<span style='font-weight:bold'> greater than or equal to 4 in. and less than 1 ft. flooding,</span> with the projected 2050 sea level rise (+2.5 ft)</div>" :
-                        "<div class='description'>scenario of the <span style='font-weight:bold'>future high tides</span>, with the projected 2050 sea level rise (+2.5 ft)</div>"
+                        "<div class='description'>Moderate stormwater flood scenario of the<span style='font-weight:bold'>future high tides</span>, with the projected 2050 sea level rise (+2.5 ft)</div>"
                 }
                 
             </div>`