add the visual narrative

app/page.tsx

@@ -4,23 +4,28 @@ import Image from 'next/image'
 import { MapProvider } from '@/contexts/MapContext'
 import { StreetViewProvider } from '@/contexts/StreetViewContext'
 import { MarkerProvider } from '@/contexts/MarkerContext'
+import { NarrativeProvider } from '@/contexts/NarrativeContext'
+
 import Map from '@/components/map/Map'
 import InfoPage from '@/components/infoPage/InfoPage'
 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">
       <MapProvider>
-        <StreetViewProvider>
-          <MarkerProvider>
-            {/* <Map />
-            <InfoPage />
-            <StreetView /> */}
+        <NarrativeProvider>
+          <StreetViewProvider>
+            <MarkerProvider>
             <Narrative />
-          </MarkerProvider>
-        </StreetViewProvider>
+              <Map />
+              <InfoPage />
+              <StreetView />
+            </MarkerProvider>
+          </StreetViewProvider>
+        </NarrativeProvider>
       </MapProvider>
     </main>
   )

components/narrative/Ending.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Ending = () => {
+    return (
+        <div className="relative w-full h-full">
+            <img src="/imgs/narrative_six.png" alt="" className="w-full h-full" />
+            <div className="absolute left-8 bottom-[11rem] px-5 py-7 max-w-[57rem] bg-black bg-opacity-[.65] rounded-lg">
+                <p className="font-semibold text-[2rem]">FloodGen offers AI generative imagery that can show the predictable flooding, and improve preparedness</p>
+            </div>
+            <button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[1.5rem] bg-[#306DDD] rounded-[40px] cursor-pointer'>Explore Floodgen</button>
+            <img src='/logos/fg_logo_white_sm.png' className='absolute right-6 bottom-4 z-30 w-8 h-8' />
+        </div>
+    )
+}
+
+export default Ending

components/narrative/Introduction.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Introduction = () => {
+    return (
+        <div className="relative w-full h-full">
+            <img src="/imgs/narrative_one.png" className="w-full h-full" />
+            <div className="absolute right-12 bottom-16 px-5 py-7 w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
+                <h1 className="font-semibold text-[6.25rem]">1.3 million</h1>
+                <p className="mb-[1rem] font-semibold text-[2rem]">New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable</p>
+                <p className="font-semibold text-[1rem]">Source: Info, Photo</p>
+            </div>
+        </div>
+    )
+}
+
+export default Introduction

components/narrative/Narrative.tsx

@@ -1,28 +1,40 @@
 import { useState, useContext, useEffect } from "react";
 
-
+import Introduction from "./Introduction";
 import Slider from "./Slider";
 import Satellite from "./Satellite";
+import StreetView from "./StreetView";
+import Ending from "./Ending";
+
+import { NarrativeContext, NarrativeType } from "@/contexts/NarrativeContext";
 
+import { XMarkIcon } from "@heroicons/react/20/solid";
 
 const Narrative = () => {
+
+    const { openNarrative, setOpenNarrative } = useContext(NarrativeContext) as NarrativeType
+
+    const clickHandler = () => setOpenNarrative(false)
+
     return (
-        <div className="w-full h-[100vh] overflow-y-auto">
-            <img src="/logos/floodgen_logo_white.png" className="absolute left-8 top-12 w-[155px] h-[38.75px] z-30" alt="logos_white" />
-            <div className="relative w-full h-full">
-                <img src="/imgs/narrative_one.png" className="w-full h-full" />
-                <div className="absolute right-12 bottom-16 px-5 py-7 w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
-                    <h1 className="font-semibold text-[6.25rem]">1.3 million</h1>
-                    <p className="mb-[1rem] font-semibold text-[2rem]">New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable</p>
-                    <p className="font-semibold text-[1rem]">Source: Info, Photo</p>
-                </div>
-            </div>
-            <Satellite />
-            <div className="relative w-full h-full">
-                <img src="/imgs/narrative_four.png" alt="" className="w-full h-full" />
-            </div>
-            <Slider />
-        </div>
+        <>
+            {
+                openNarrative && (
+                    <div className="z-30 w-full h-[100vh] overflow-y-auto">
+                        <img src="/logos/floodgen_logo_white.png" className="absolute left-8 top-12 w-[155px] h-[38.75px] z-30" alt="logos_white" />
+                        <div className="absolute right-8 top-12 flex items-center justify-center w-[35px] h-[35px] bg-[#E7E7E7] bg-opacity-60 rounded-full z-30 cursor-pointer">
+                            <XMarkIcon width={24} height={24} className=" text-black font-thin " onClick={clickHandler}/>
+                        </div>
+
+                        <Introduction />
+                        <Satellite />
+                        <StreetView />
+                        <Slider />
+                        <Ending />
+                    </div>
+                )
+            }
+        </>
     )
 }
 

components/narrative/Satellite.tsx

@@ -7,13 +7,12 @@ import { Scrollama, Step } from "react-scrollama";
 
 
 const Satellite = () => {
-
     const [_currentStepIndex, setCurrentStepIndex] = useState<number>(0);
-    const onStepEnter = (data: number) => {
+    const onStepEnter = (data:number) => {
         setCurrentStepIndex(data)
     }
     return (
-        <div className="relative w-full h-full">
+        <div className="relative w-full h-full overflow-y-scroll">
             <img src="/imgs/narrative_two.png" className='w-full h-full' alt="" />
             <Scrollama offset={0.5} onStepEnter={onStepEnter}>
                 <Step data={1}>
@@ -25,18 +24,11 @@ const Satellite = () => {
                     <>
                         <div className="absolute left-0 top-0 w-full h-full bg-black bg-opacity-40"></div>
                         <div className="absolute left-8 bottom-28 p-5 w-[52.75rem] bg-black bg-opacity-[.65] rounded-lg">
-                            {/* <Image
-                                src="/imgs/narrative_six.png"
-                                width={804}
-                                height={423.24}
-                                alt="narrative_six"
-                            /> */}
                             <img src="/imgs/narrative_six.png" className='w-[804px] h-[423.24px]' alt="" />
                             <p className="mt-2 font-semibold text-[2rem]">If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
                         </div>
                     </>
                 </Step>
-
             </Scrollama>
         </div>
 

components/narrative/Slider.tsx

@@ -33,38 +33,28 @@ const Slider = () => {
                 onMouseMove={handleMove}
                 onMouseDown={handleMouseDown}
             >
-                {/* <Image
-                    alt=""
-                    fill
-                    priority
-                    src="/imgs/narrative_six.png"
-                /> */}
                 <img src="/imgs/narrative_six.png" className="w-full h-full" alt="" />
+                <div className="absolute right-8 bottom-24 p-5 font-semibold text-[2rem] bg-black bg-opacity-70 rounded-lg">AI generated</div>
                 <div
-                    className="absolute top-0 left-0 right-0 w-full h-full overflow-hidden select-none"
+                    className="absolute top-0 left-0 right-0 w-full h-full overflow-hidden select-none z-30"
                     style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
                 >
-                    {/* <Image
-                        fill
-                        priority
-                        alt=""
-                        src="/imgs/narrative_four.png"
-                    /> */}
+                    <div className="absolute left-8 bottom-24 p-5 font-semibold text-[2rem] bg-black bg-opacity-70 rounded-lg">Street view</div>
                     <img src="/imgs/narrative_four.png" className="w-full h-full" alt="" />
                 </div>
                 <div
-                    className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize"
+                    className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize z-40"
                     style={{
                         left: `calc(${sliderPosition}% - 1px)`,
                     }}
                 >
                     <div className="bg-white absolute rounded-full w-14 h-14 -left-[calc(50%_+_24px)] top-[calc(50%_-_5px)]">
                         <ChevronRightIcon width={24} height={24} className="absolute right-0 top-[calc(50%_-_12px)] text-black" />
                         <ChevronLeftIcon width={24} height={24} className="absolute left-0 top-[calc(50%_-_12px)] text-black" />
-
                     </div>
                 </div>
             </div>
+            <img src='/logos/fg_logo_white_sm.png' className='absolute right-6 bottom-4 z-30 w-8 h-8' />
         </div>
     );
 };

components/narrative/StreetView.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const StreetView = () => {
+    return (
+        <div className="relative w-full h-full">
+            <img src="/imgs/narrative_four.png" alt="" className="w-full h-full" />
+        </div>
+    )
+}
+
+export default StreetView

contexts/NarrativeContext.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, useState, Dispatch, SetStateAction, ReactNode } from 'react'
+
+export type NarrativeType = {
+    openNarrative: boolean | null,
+    setOpenNarrative: Dispatch<SetStateAction<boolean>>
+}
+
+type Props = {
+    children: ReactNode
+}
+
+const NarrativeContext = createContext<NarrativeType | null>(null)
+
+const NarrativeProvider = ({ children }: Props) => {
+    const [openNarrative, setOpenNarrative] = useState(true)
+
+    return (
+        <NarrativeContext.Provider value={{openNarrative, setOpenNarrative}}>
+            {children}
+        </NarrativeContext.Provider>
+    )
+}
+
+export {NarrativeContext, NarrativeProvider}