diff --git a/client/.env b/client/.env
new file mode 100644
index 0000000..b29a702
--- /dev/null
+++ b/client/.env
@@ -0,0 +1,27 @@
+# Public url. Canonical url of the project.
+NEXT_PUBLIC_URL=http://localhost:3000
+
+# Environment. Only for development. It will be provided by Vercel otherwise.
+NEXT_PUBLIC_ENVIRONMENT=development
+
+# API Url.
+# Development, Preview, Production
+# Depending on the environment we will use different urls. It can be the same for the storybook and for the project.
+# NEXT_PUBLIC_API_URL=http://localhost:1337/api
+NEXT_PUBLIC_API_URL=https://esa-gda-comms-staging-mfafc.ondigitalocean.app/cms/api
+
+# Mapbox token
+# Development, Preview, Production
+# corresponding to the account used for this project. It can be the same for the storybook and for the project.
+NEXT_PUBLIC_MAPBOX_API_TOKEN=pk.eyJ1Ijoidml6enVhbGl0eWVzYSIsImEiOiJjbHBiNDBiNHcwZWdmMnBybDg1a253eGpoIn0.XYSrGTkz6BoR6NPdx2_tDA
+
+# Google Analytics tracking ID.
+# Development, Preview, Production
+# If you're working with an Google Analytics 4 property, you have a Measurement ID instead of a Tracking ID.
+NEXT_PUBLIC_GA_TRACKING_ID=UA-000000-2
+
+# Recoil: Remove warnings about duplicate atoms due to hot-reloading
+# Development
+RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
+
+NEXT_PUBLIC_PREVIEW_SECRET=preview-secret
diff --git a/client/public/images/mock/carousel.png b/client/public/images/mock/carousel.png
new file mode 100644
index 0000000..35fc11e
Binary files /dev/null and b/client/public/images/mock/carousel.png differ
diff --git a/client/src/containers/map/markers/story-markers/marker.tsx b/client/src/containers/map/markers/story-markers/marker.tsx
index d1fad57..00c3c11 100644
--- a/client/src/containers/map/markers/story-markers/marker.tsx
+++ b/client/src/containers/map/markers/story-markers/marker.tsx
@@ -2,6 +2,10 @@ import { useState } from 'react';
import { Marker } from 'react-map-gl';
+import Image from 'next/image';
+
+import { motion } from 'framer-motion';
+
import { StoryStepMapMarker } from '@/types/story';
import { Dialog, DialogContent } from '@/components/ui/dialog';
@@ -12,10 +16,50 @@ type StoryMarkerProps = {
marker: StoryStepMapMarker;
};
+const MOCK_IMAGES = [
+ {
+ id: 0,
+ img: '/images/mock/carousel.png',
+ legend: 'Summary of GDA Urban EO Information and Use Cases 1',
+ },
+ {
+ id: 1,
+ img: '/images/mock/carousel.png',
+ legend: 'Summary of GDA Urban EO Information and Use Cases 2',
+ },
+ {
+ id: 2,
+ img: '/images/mock/carousel.png',
+ legend: 'Summary of GDA Urban EO Information and Use Cases 3',
+ },
+];
+
const StoryMarker = ({ marker: { media, name, id, lat, lng } }: StoryMarkerProps) => {
const [isFullScreen, setIsFullScreen] = useState(false);
const handleClickExpand = () => setIsFullScreen((prev) => !prev);
+ const [currentImage, setCurrentImage] = useState(MOCK_IMAGES[1]);
+
+ const setPrevImage = () => {
+ setCurrentImage(MOCK_IMAGES[currentImage.id - 1]);
+ };
+
+ const setNextImage = () => {
+ setCurrentImage(MOCK_IMAGES[currentImage.id + 1]);
+ };
+
+ const variants = {
+ show: {
+ opacity: 1,
+ transition: {
+ ease: 'easeOut',
+ duration: 0.3,
+ },
+ },
+ hide: {
+ opacity: 0,
+ },
+ };
return (
<>
@@ -29,13 +73,68 @@ const StoryMarker = ({ marker: { media, name, id, lat, lng } }: StoryMarkerProps
>