setIsMaximized(false)}
+ />
+ )}
+
+
+ {/* Legend Sidebar */}
+ {!simple && (
+
+
+
+ {headerContent ? headerContent : (
+ <>
+
{title || 'Mohammed V Street Tour'}
+
{points.length} locations
+
+ )}
+
+
+
+
+ {points.map(point => (
+
+ ))}
+
+
+ )}
+
+ {/* Sidebar Toggle Button (Floating) */}
+ {!simple && !isSidebarOpen && (
+
+ )}
+
+ {/* Maximize/Minimize Button (Floating) */}
+
+
+ {/* Map Area */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/react/MapFilters.tsx b/web/src/components/react/MapFilters.tsx
new file mode 100644
index 00000000..92b0120a
--- /dev/null
+++ b/web/src/components/react/MapFilters.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface Props {
+ isOpen: boolean;
+ onClose: () => void;
+
+ // Available options
+ availableCategories: string[];
+ availableProvinces: string[];
+ availableTimePeriods: string[];
+ availablePeople: string[];
+
+ // Selected filters
+ selectedCategories: string[];
+ selectedProvinces: string[];
+ selectedTimePeriods: string[];
+ selectedPeople: string[];
+
+ // Handlers
+ onCategoryChange: (category: string) => void;
+ onProvinceChange: (province: string) => void;
+ onTimePeriodChange: (period: string) => void;
+ onPersonChange: (person: string) => void;
+ onClearFilters: () => void;
+}
+
+export default function MapFilters({
+ isOpen,
+ onClose,
+ availableCategories,
+ availableProvinces,
+ availableTimePeriods,
+ availablePeople,
+ selectedCategories,
+ selectedProvinces,
+ selectedTimePeriods,
+ selectedPeople,
+ onCategoryChange,
+ onProvinceChange,
+ onTimePeriodChange,
+ onPersonChange,
+ onClearFilters
+}: Props) {
+ if (!isOpen) return null;
+
+ const hasActiveFilters = selectedCategories.length > 0 ||
+ selectedProvinces.length > 0 ||
+ selectedTimePeriods.length > 0 ||
+ selectedPeople.length > 0;
+
+ const formatLabel = (label: string) => {
+ // Remove prefixes
+ let formatted = label.replace('province/', '').replace('people/', '');
+
+ // Replace slash with colon for categories
+ formatted = formatted.replace('/', ': ');
+
+ // Capitalize first letter of each word (optional, but looks better)
+ // formatted = formatted.replace(/\b\w/g, l => l.toUpperCase());
+
+ return formatted;
+ };
+
+ const FilterSection = ({ title, options, selected, onChange }: { title: string, options: string[], selected: string[], onChange: (val: string) => void }) => {
+ if (options.length === 0) return null;
+ return (
+
+
{title}
+
+ {options.map(option => (
+
+ ))}
+
+
+ );
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
Filter Locations
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/react/PlanView.tsx b/web/src/components/react/PlanView.tsx
new file mode 100644
index 00000000..ddd9cc0c
--- /dev/null
+++ b/web/src/components/react/PlanView.tsx
@@ -0,0 +1,404 @@
+import React, { useState, useEffect, useRef } from 'react';
+import Map, { Marker, Popup, NavigationControl } from 'react-map-gl/maplibre';
+import type { MapRef } from 'react-map-gl/maplibre';
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { useInView } from 'react-intersection-observer';
+import {
+ MapPin,
+ Clock,
+ Mountain,
+ Footprints,
+ Utensils,
+ BedDouble,
+ Coffee,
+ User,
+ ChevronDown,
+ Navigation,
+ Car,
+ Bus,
+ Plane,
+ Train,
+ PawPrint
+} from 'lucide-react';
+
+interface Place {
+ id: string;
+ kind: string;
+ spec: {
+ name: string;
+ description: string;
+ location: {
+ province: string;
+ latitude: number;
+ longitude: number;
+ };
+ [key: string]: any;
+ };
+ [key: string]: any;
+}
+
+interface Person {
+ id: string;
+ kind: string;
+ spec: {
+ name: string;
+ role: string;
+ [key: string]: any;
+ };
+ [key: string]: any;
+}
+
+interface Step {
+ title: string;
+ description?: string;
+ type: string;
+ optional?: boolean;
+ places?: Place[];
+ people?: {
+ id: string;
+ role: string;
+ details?: Person;
+ }[];
+ transportToNext?: {
+ mode: string;
+ durationMin: number;
+ advice?: string;
+ };
+ subSteps?: Step[];
+}
+
+interface Plan {
+ id: string;
+ kind: string;
+ spec: {
+ title?: string;
+ estimatedDuration: {
+ value: number;
+ unit: string;
+ };
+ difficulty: string;
+ steps: Step[];
+ };
+}
+
+interface Props {
+ plan: Plan;
+ children?: React.ReactNode;
+}
+
+const getStepIcon = (type: string) => {
+ switch (type) {
+ case 'waypoint': return
;
+ case 'activity': return
;
+ case 'break': return
;
+ case 'overnight': return
;
+ default: return
;
+ }
+};
+
+const StepCard = ({ step, index, isActive, onInView, onClick }: { step: Step; index: number; isActive: boolean; onInView: (inView: boolean) => void, onClick: () => void }) => {
+ const { ref, inView } = useInView({
+ threshold: 0,
+ rootMargin: '-45% 0px -45% 0px',
+ onChange: (inView) => onInView(inView),
+ });
+
+ return (
+
+ {/* Timeline Line */}
+
+
+ {/* Step Marker */}
+
+ {index + 1}
+
+
+
+
+
+
+
+ {getStepIcon(step.type)}
+ {step.type}
+ {step.optional && (
+
+ Optional
+
+ )}
+
+
+ {step.title}
+
+
+
+
+ {step.description && (
+
+ {step.description}
+
+ )}
+
+ {/* Substeps */}
+ {step.subSteps && step.subSteps.length > 0 && (
+
+ {step.subSteps.map((subStep, i) => (
+
+
+ {subStep.description && (
+
{subStep.description}
+ )}
+
+ ))}
+
+ )}
+
+ {/* Places */}
+ {step.places && step.places.length > 0 && (
+
+ )}
+
+ {/* People */}
+ {step.people && step.people.length > 0 && (
+
+
People
+
+ {step.people.map((person, i) => (
+
+
+
+
+
+
+ {person.details?.spec.name || person.id}
+
+
+ {person.role}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Transport */}
+ {step.transportToNext && (
+
+
+ {(() => {
+ const mode = step.transportToNext.mode;
+ switch (mode) {
+ case 'Walking': return
;
+ case 'Taxi':
+ case 'Shared Taxi': return
;
+ case 'Bus':
+ case 'Mini Bus': return
;
+ case 'Plane': return
;
+ case 'Train': return
;
+ case 'Mule': return
;
+ default: return
;
+ }
+ })()}
+
+ {step.transportToNext.mode}
+ •
+ {step.transportToNext.durationMin} min
+
+
+ {step.transportToNext.advice && (
+
{step.transportToNext.advice}
+ )}
+
+ )}
+
+
+
+
+ );
+};
+
+export default function PlanView({ plan, children }: Props) {
+ const [activeStepIndex, setActiveStepIndex] = useState(0);
+ const mapRef = useRef
(null);
+ const stepRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+ const scrollToStep = (index: number) => {
+ stepRefs.current[index]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ setActiveStepIndex(index);
+ };
+
+ // Flatten steps for linear navigation if needed, but for now we just iterate top-level
+ // If we want to support nested steps in the map, we need to flatten.
+ // Let's stick to top-level steps for the main timeline for simplicity,
+ // or flatten if subSteps have places.
+ // The dummy data has subSteps without places (just activities), so top-level is fine.
+
+ const steps = plan.spec.steps;
+
+ // Collect all points for initial bounds
+ const allPoints = steps.flatMap(s => s.places || []).map(p => ({
+ longitude: p.spec.location.longitude,
+ latitude: p.spec.location.latitude
+ }));
+
+ const onMapLoad = (e: maplibregl.MapLibreEvent) => {
+ if (allPoints.length > 0) {
+ const bounds = new maplibregl.LngLatBounds();
+ allPoints.forEach(p => bounds.extend([p.longitude, p.latitude]));
+ e.target.fitBounds(bounds, { padding: 100, duration: 0 });
+ }
+ };
+
+ useEffect(() => {
+ const activeStep = steps[activeStepIndex];
+ if (activeStep && activeStep.places && activeStep.places.length > 0 && mapRef.current) {
+ const places = activeStep.places;
+ if (places.length === 1) {
+ mapRef.current.flyTo({
+ center: [places[0].spec.location.longitude, places[0].spec.location.latitude],
+ zoom: 14,
+ duration: 1500
+ });
+ } else {
+ const bounds = new maplibregl.LngLatBounds();
+ places.forEach(p => bounds.extend([p.spec.location.longitude, p.spec.location.latitude]));
+ mapRef.current.fitBounds(bounds, { padding: 100, maxZoom: 14, duration: 1500 });
+ }
+ }
+ }, [activeStepIndex]);
+
+ return (
+
+ {/* Left Column: Content */}
+
+
+
+
+ Back to Plans
+
+
+
+
+
+ {plan.kind.split('/').pop()?.replace('-', ' ')}
+
+
+
+ {plan.spec.title || steps[0]?.title || 'Plan Details'}
+
+
+
+
+
+ {plan.spec.estimatedDuration.value} {plan.spec.estimatedDuration.unit}
+
+
+
+ {plan.spec.difficulty} Difficulty
+
+
+
+ {steps.length} Stops
+
+
+
+ {/* Editorial Content */}
+ {children}
+
+
+ {steps.map((step, index) => (
+
{ stepRefs.current[index] = el; }}>
+ {
+ if (inView) setActiveStepIndex(index);
+ }}
+ onClick={() => scrollToStep(index)}
+ />
+
+ ))}
+
+
+
+
End of Itinerary
+
+ Have you completed this journey? Share your experience!
+
+
+
+
+
+ {/* Right Column: Map */}
+
+
+
+
+
+
+
+Starting from **Casa Port**, cross the street towards **Bd Félix Houphouët-Boigny**.
+
+Few steps in, you'll find one of Casablanca's most famous mausoleums, home to the graves of key historical figures like **Benjdia** and **Sidi Belyout**, after whom the site was named.
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/02-sidi-belyout.mdx b/web/src/content/games/chase-au-tresor/02-sidi-belyout.mdx
new file mode 100644
index 00000000..c202e6e3
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/02-sidi-belyout.mdx
@@ -0,0 +1,48 @@
+---
+title: 'Sidi Belyout: The Lion-man'
+description: 'From Sidi Belyout Saint to FAR street through the Félix Houphouët-Boigny street'
+order: 2
+answer: 'plaza'
+nextStep: '03-houphouet-boigny'
+question: 'What is the name of the hotel?'
+heroImage: '../../../assets/games/sidi-belyout.webp'
+hints:
+ - "The hotel has 5+ flags on the front."
+ - "Translate Square to Spanish"
+---
+import MiniMap from '../../../components/MiniMap.astro';
+import GameQuiz from '../../../components/react/GameQuiz';
+
+Correct! The animal associated with Sidi Belyout is indeed the **Lion**.
+
+Sidi Belyout, originally known as **Abu Hafs Omar bin Haroun Al-Madyouni**, is the legendary patron saint of Casablanca.
+
+He was known for his mysterious origins and miraculous connection with lions, which earned him the title "Abu Louyouth" (Father of Lions).
+
+According to local tales, he lived in seclusion in the wilderness of Ain Sbaa, where lions would peacefully gather around him, and his fountain's water was believed to ensure a return to Casablanca for anyone who drank from it.
+
+Dead in the 14th century, his current shrine was built in 1851, and remains a historical and spiritual landmark in the city, reflecting the deep-rooted traditions and folklore of Casablanca.
+
+## Go! Go!
+
+You are here!
+
+
+
+
+
+Advance a little bit into **Bd Félix Houphouët-Boigny** and enjoy the beautiful palm trees.
+
+I emphasize on appreciating the palm tree since some of them are more than 100 years old. Just around the street there is one of the oldest hotels of casablanca.
+
+Look for it!
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/03-houphouet-boigny.mdx b/web/src/content/games/chase-au-tresor/03-houphouet-boigny.mdx
new file mode 100644
index 00000000..09680163
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/03-houphouet-boigny.mdx
@@ -0,0 +1,46 @@
+---
+title: 'The controversial street'
+description: 'Inside the controvertial street'
+order: 3
+answer: '1937'
+question: 'What is the year of completion of the building?'
+nextStep: '04-first-skyscrapers'
+heroImage: '../../../assets/games/plaza.jpg'
+hints:
+ - "The building is built by Moretti & Milone (Check map 😉)."
+ - "The building is on left corner of the street."
+---
+import MiniMap from '../../../components/MiniMap.astro';
+import GameQuiz from '../../../components/react/GameQuiz';
+
+Nice one! You found Hotel Plaza!
+
+Hotel Plaza is one of the oldest hotels in Casablanca outside of the walls. It is situated in Félix Houphouët-Boigny street.
+
+Félix Houphouët-Boigny street was one of the first streets of the new city, it was opened by the French protectorate to connect the Port with the city.
+
+Its foundation was controvertial since the French created an openning in the city wall and moved a the Sidi Belyout Muslim cemetry. This insited many pretest all across the city.
+
+If you're wondering why Casablanca's city walls are not closed on the northern side, this is the reason. You can still spot parts of the original wall behind the Sidi Belyout mausoleum.
+
+## Go! Go!
+
+You are here!
+
+
+
+
+
+Good work! Until now you are doing great! Let's spice things up.
+
+On the same street, there is a building constructed in the 1930s. The exact year is engraved on one of its exterior façades, along with the names of the architect and the real estate developers.
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/04-first-skyscrapers.mdx b/web/src/content/games/chase-au-tresor/04-first-skyscrapers.mdx
new file mode 100644
index 00000000..9fb9a39b
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/04-first-skyscrapers.mdx
@@ -0,0 +1,50 @@
+---
+title: 'First skyscrapers of Casablanca'
+description: 'Exploring the then highest building in the city center.'
+order: 4
+answer: 'excelsior'
+question: 'What is the name of the hotel?'
+nextStep: '05-excelsior-hotel'
+heroImage: '../../../assets/games/moretti-milone.jpg'
+hints:
+ - "The building has some nice Zellij logos in the front"
+ - "It is the name of an unreleased album by the Moroccan Rapper Morphine"
+---
+import MiniMap from '../../../components/MiniMap.astro';
+import GameQuiz from '../../../components/react/GameQuiz';
+
+Oooh! You reached **Avenue des FAR**! you are going places!
+
+At the start of the 20th century, Casablanca experienced rapid growth, drawing people from all over the world, particularly architects and real estate investors.
+
+In 1936, two cousins, real estate investors Moretti and Millone, teamed up with French architect Pierre Jabin to construct one of Casablanca's first skyscrapers (by the time standards), also one of the tallest and largest residential buildings in North Africa at the time.
+
+Standing 12 stories high, the building was innovative in how it catered to different types of residents. The lower floors housed spacious family apartments, while the top floor featured smaller studio units designed for single occupants.
+
+Before continuing straight towards Mohammed V street, let's take a quick detour to visit the iconic clock tower, one of the earliest buildings constructed by the French Protectorate.
+
+The clock tower was first built in 1909, then rebuilt in 1993 after its demolition in 1948.
+
+## You are here!
+
+
+
+
+
+## Go! Go!
+
+Well done! Now that we've seen two of the oldest and most iconic buildings of modern Casablanca, let's explore another historic landmark in the city center.
+
+Good work! Now that we've seen 2 of the oldest and most emblematic buildings of the new Casablanca. Let's check another one of the very old buildings in the city center.
+
+I won't tell you its name! Your next task is to cross the street and look for one of the city's oldest hotels still in operation today.
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/05-excelsior-hotel.mdx b/web/src/content/games/chase-au-tresor/05-excelsior-hotel.mdx
new file mode 100644
index 00000000..8ffcf857
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/05-excelsior-hotel.mdx
@@ -0,0 +1,47 @@
+---
+title: 'Hotel Excelsior and the first days of UN Square'
+description: 'One of the oldest hotels of the city'
+order: 5
+answer: 'glaoui'
+question: 'Who was the owner of the building (last name only) ?'
+nextStep: '06-first-buildings'
+heroImage: '../../../assets/games/excelsior.jpg'
+hints:
+ - "His name is on the front of the passage under the building"
+ - "He was a famous Pacha of Marrakech"
+---
+import MiniMap from '../../../components/MiniMap.astro';
+import GameQuiz from '../../../components/react/GameQuiz';
+
+
+## You are here!
+
+It was easy right?! Good job anyways!
+
+
+[Excelsior Hotel](https://fr.wikipedia.org/wiki/H%C3%B4tel_Excelsior_de_Casablanca) is one of the oldest hotels outside Casablanca's old medina.
+
+When it opened in 1918, it was considered state-of-the-art, featuring modern amenities of the time, such as electricity, an elevator, heating, and private bathrooms in each room.
+
+
+> Le Maroc au lendemain de la guerre" comme suit: "...les chambres y sont d'une scrupuleuse propreté, confortablement meublées, avec des tapis de rabat et de salé qui les égayent et les ornent, des salles de bains parfaites, des tables de toilettes modernes, avec eau courante font oublier certaines cambuses primitives ou je demeurais jadis, à de précédents voyages à Casablanca -- French Writter who stayed at Excelsior in 1919
+
+
+
+
+
+## Go! Go!
+
+In front of Excelsior hotel, lays a huge building with 3 façades. The building is a striking example of Casablanca Art Deco, with an elegant façade, strong vertical lines, decorative details, and upper floors featuring terraces covered in traditional red and green Zellij tiles.
+
+The building was owned by one of the most powerful and influential figures in early 20th century Morocco.
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/06-first-buildings.mdx b/web/src/content/games/chase-au-tresor/06-first-buildings.mdx
new file mode 100644
index 00000000..d9a69e1d
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/06-first-buildings.mdx
@@ -0,0 +1,46 @@
+---
+title: "The architectural boom in Casablanca"
+description: 'Discover your first buildings in Casablanca'
+order: 6
+answer: 'ibn-batouta'
+question: 'What is the name travel agency?'
+nextStep: '07-16th-november-square'
+heroImage: '../../../assets/games/plaza.jpg'
+hints:
+ - "The Agency is in front of Bendahan Building"
+ - "The agency is named after a famous Moroccan traveler"
+---
+import MiniMap from '../../../components/MiniMap.astro';
+import GameQuiz from '../../../components/react/GameQuiz';
+
+Wow! you are getting good at this!
+
+The real estate boom attracted influential figures from Morocco and from around the world, including Pacha Tazi and Pacha Thami El Glaoui, Moretti&Milone, and Bendahan...
+
+This surge in investment triggered a domino effect, drawing even more investors and institutions from Europe, particularly France.
+
+Notably, major banks such as the British West African Bank and Crédit Lyonnais, as well as automobile manufacturers like Fiat and Citroën, established a presence in the city.
+
+## You are here!
+
+
+
+
+
+## Go! Go!
+
+Head down Rue Amraoui Brahim until you reach Mohammed V Street. Turn right, then take a left onto Rue Aristide Briand.
+
+On this street, you will discover the Bendahan Building, one of the city center's most elegant structures. Directly across from it stands the former British West African Bank; now converted into a Moroccan bank office, this historic building features a stunning facade reminiscent of a Greek temple.
+
+You will also find a shuttered, vintage travel agency along this same lane.
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/07-16th-november-square.mdx b/web/src/content/games/chase-au-tresor/07-16th-november-square.mdx
new file mode 100644
index 00000000..d8102229
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/07-16th-november-square.mdx
@@ -0,0 +1,45 @@
+---
+title: '16th November Square'
+description: 'Explore the 16th of November square'
+order: 7
+answer: 'lutetia'
+question: 'What is the name of the cinema?'
+nextStep: '08-finish'
+heroImage: '../../../assets/games/plaza.jpg'
+hints:
+ - "It is in rue Tata"
+---
+import MiniMap from '../../../components/MiniMap.astro';
+import GameQuiz from '../../../components/react/GameQuiz';
+
+Nice Job! Did you use google for that?
+
+"Casablanca is home to many popular public squares, the most famous being United Nations Square.
+
+For first-time visitors, this is often the initial point of contact with the city, offering a perfect glimpse into the chaotic yet beautiful energy that defines Casablanca.
+
+Another notable location is the smaller November 16th Square, which is ringed by stunning Art Deco structures such as the Tazi Building, La Chope, and the British West African Bank.
+
+This square is also distinguished by a red sculpture-fountain known as 'Source of Life' (Source de vie). Created in 1982 by artist Abdelhaq Sijelmassi, this landmark underwent a complete restoration in 2021 during the Covid-19 pandemic.
+
+## You are here!
+
+
+
+
+
+## Go! Go!
+
+Take a break and Enjoy the beautiful buildings around you and let's start a hunt.
+
+Less than a 100m away from the square there is a big cinema! Find it!
+
+## Assignment
+
+
diff --git a/web/src/content/games/chase-au-tresor/08-finish.mdx b/web/src/content/games/chase-au-tresor/08-finish.mdx
new file mode 100644
index 00000000..e92b119e
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/08-finish.mdx
@@ -0,0 +1,16 @@
+---
+title: 'You made it to Lutetia'
+description: 'Lutetia the final line'
+order: 3
+answer: 'leutecia'
+question: ''
+nextStep: 'finish'
+heroImage: '../../../assets/games/plaza.jpg'
+hints:
+ - ""
+ - ""
+---
+
+Nice Job! You did it!
+
+If the cinema is open, go enjoy a good movie in one of the oldest cinemas of the city.
diff --git a/web/src/content/games/chase-au-tresor/index.mdx b/web/src/content/games/chase-au-tresor/index.mdx
new file mode 100644
index 00000000..f84d2490
--- /dev/null
+++ b/web/src/content/games/chase-au-tresor/index.mdx
@@ -0,0 +1,21 @@
+---
+title: 'Bienvenue a Casa'
+description: 'This is treasure chase kind of game about in our beloved Casa. The goal is to explore the city while having fun.'
+order: 0
+answer: 'start'
+nextStep: '01-casa-port'
+heroImage: '../../../assets/games/casablanca.jpg'
+---
+import YouTubeEmbed from '../../../components/YouTubeEmbed.astro';
+
+Welcome to the Casablanca Treasure Hunt!
+
+This is a treasure hunt style game set in our beloved Casablanca. The goal is to explore the city while having fun.
+
+At each step, you will be given a question along with different hints. Once you find the answer, enter it in the input box. If your answer is correct, you move on to the next step.
+
+
+
+The game will start at Casa port train station, so pack you things and go there.
+
+Once you are there and ready to play, click the button below!
diff --git a/web/src/content/maps/azilal.md b/web/src/content/maps/azilal.md
new file mode 100644
index 00000000..4a0a9186
--- /dev/null
+++ b/web/src/content/maps/azilal.md
@@ -0,0 +1,6 @@
+---
+title: "Azilal: Land of Dinosaurs"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1758622159686-7f61d8a81aa5?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: azilal
+---
diff --git a/web/src/content/maps/beni-mellal.md b/web/src/content/maps/beni-mellal.md
new file mode 100644
index 00000000..a0a5da79
--- /dev/null
+++ b/web/src/content/maps/beni-mellal.md
@@ -0,0 +1,6 @@
+---
+title: "Beni Mellal: History hidden in Nature"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1679492112641-f07234f62991?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: beni-mellal
+---
diff --git a/web/src/content/maps/casablanca.md b/web/src/content/maps/casablanca.md
new file mode 100644
index 00000000..3be5b04a
--- /dev/null
+++ b/web/src/content/maps/casablanca.md
@@ -0,0 +1,10 @@
+---
+title: "Casablanca: Where everything happens"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1699210260021-eac11ba4ff86?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+author: 'Mrrakc Team'
+draft: false
+mapId: casablanca
+---
+
+Welcome to the interactive map of Casablanca. Use the filters to explore different types of places, from Art Deco buildings to historical parks.
diff --git a/web/src/content/maps/errachidia.md b/web/src/content/maps/errachidia.md
new file mode 100644
index 00000000..dd18957c
--- /dev/null
+++ b/web/src/content/maps/errachidia.md
@@ -0,0 +1,6 @@
+---
+title: "Errachidia: Gateway to the Sahara"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1662009867642-933d25d401fe?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: errachidia
+---
diff --git a/web/src/content/maps/lakes-dams.md b/web/src/content/maps/lakes-dams.md
new file mode 100644
index 00000000..0a3adc4f
--- /dev/null
+++ b/web/src/content/maps/lakes-dams.md
@@ -0,0 +1,6 @@
+---
+title: "Lakes and Dams of Morocco"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1585213302748-a0e8042efa33?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: lakes-dams
+---
diff --git a/web/src/content/maps/marrakesh.md b/web/src/content/maps/marrakesh.md
new file mode 100644
index 00000000..0238245d
--- /dev/null
+++ b/web/src/content/maps/marrakesh.md
@@ -0,0 +1,7 @@
+---
+title: "Marrakech: The Red City"
+pubDate: '2026-01-18'
+heroImage: 'https://images.unsplash.com/photo-1579283135011-0974a412341a?q=80&w=1470&auto=format&fit=crop'
+author: 'Mrrakc Team'
+mapId: marrakesh
+---
diff --git a/web/src/content/maps/mountains.md b/web/src/content/maps/mountains.md
new file mode 100644
index 00000000..dadd13e6
--- /dev/null
+++ b/web/src/content/maps/mountains.md
@@ -0,0 +1,6 @@
+---
+title: "Mountains of Morocco"
+pubDate: '2026-01-05'
+heroImage: 'https://images.unsplash.com/photo-1647997796341-b4374130d293?q=80&w=1371&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: mountains
+---
diff --git a/web/src/content/maps/oujda-angad.md b/web/src/content/maps/oujda-angad.md
new file mode 100644
index 00000000..37afbe40
--- /dev/null
+++ b/web/src/content/maps/oujda-angad.md
@@ -0,0 +1,6 @@
+---
+title: "Oujda: The center of the Oriental region"
+pubDate: '2026-01-02'
+heroImage: '../../assets/blog/oujda-day-tour/index.jpeg'
+mapId: oujda
+---
diff --git a/web/src/content/maps/rabat.md b/web/src/content/maps/rabat.md
new file mode 100644
index 00000000..ce827652
--- /dev/null
+++ b/web/src/content/maps/rabat.md
@@ -0,0 +1,6 @@
+---
+title: "Rabat: La Capitale 🌟"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1719832194284-28c6f4a2681f?q=80&w=1476&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: rabat
+---
diff --git a/web/src/content/maps/sale-spiritual-walk.md b/web/src/content/maps/sale-spiritual-walk.md
new file mode 100644
index 00000000..dac56139
--- /dev/null
+++ b/web/src/content/maps/sale-spiritual-walk.md
@@ -0,0 +1,11 @@
+---
+title: "Salé: Spiritual walk"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1548013146-72479768bada?q=80&w=1470&auto=format&fit=crop'
+author: 'Mrrakc Team'
+mapId: sale-spiritual-walk
+---
+
+Second only to Fez, Salé is one of the most spiritual cities in Morocco. Holding 21 Zaouiyas and more than 60 saints (Male and Female), Sale easily deserves the city of saints title.
+
+Along history, Sufism played a huge role in Morocco's religious practice. Zaouiyas (sing. Zaouiya)
\ No newline at end of file
diff --git a/web/src/content/maps/sale.md b/web/src/content/maps/sale.md
new file mode 100644
index 00000000..293ce21b
--- /dev/null
+++ b/web/src/content/maps/sale.md
@@ -0,0 +1,6 @@
+---
+title: "Salé: More than 1000 years of greatness"
+pubDate: '2026-01-02'
+heroImage: '../../assets/blog/sale-1000-years-tale/index.jpeg'
+mapId: sale
+---
diff --git a/web/src/content/maps/tangier-assilah.md b/web/src/content/maps/tangier-assilah.md
new file mode 100644
index 00000000..1bf76909
--- /dev/null
+++ b/web/src/content/maps/tangier-assilah.md
@@ -0,0 +1,6 @@
+---
+title: "Tangier Assilah: The pearl of the Mediterranean"
+pubDate: '2024-01-02'
+heroImage: 'https://images.unsplash.com/photo-1711971725727-aa6e812eb45d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: tangier
+---
diff --git a/web/src/content/maps/tetouan.md b/web/src/content/maps/tetouan.md
new file mode 100644
index 00000000..41da8f6e
--- /dev/null
+++ b/web/src/content/maps/tetouan.md
@@ -0,0 +1,6 @@
+---
+title: "Tetouan: The white Dove"
+pubDate: '2026-01-03'
+heroImage: 'https://images.unsplash.com/photo-1579894461465-e8cdbe670cd1?q=80&w=1575&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+mapId: tetouan
+---
diff --git a/web/src/content/plans/casablanca-art-deco.md b/web/src/content/plans/casablanca-art-deco.md
new file mode 100644
index 00000000..9016dae3
--- /dev/null
+++ b/web/src/content/plans/casablanca-art-deco.md
@@ -0,0 +1,17 @@
+---
+title: "Casablanca Art Deco Tour"
+planId: "casablanca-art-deco"
+heroImage: "https://images.unsplash.com/photo-1699210260021-eac11ba4ff86?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+---
+
+## Casablanca's Art Deco Heritage
+
+Step back in time and explore the architectural wonders of Casablanca. This walking tour takes you through the city's center, where French Art Deco meets traditional Moroccan craftsmanship (Mauresque style).
+
+### Highlights
+
+* **Sacred Heart Cathedral**: A monumental white cathedral that dominates the skyline.
+* **Mohammed V Square**: The bustling heart of the city, home to the Wilaya and the Palace of Justice.
+* **Cinema Rialto**: A nostalgic glimpse into the golden age of cinema.
+
+This tour is perfect for architecture lovers and history buffs.
diff --git a/web/src/content/plans/high-atlas-trek.md b/web/src/content/plans/high-atlas-trek.md
new file mode 100644
index 00000000..a69302b3
--- /dev/null
+++ b/web/src/content/plans/high-atlas-trek.md
@@ -0,0 +1,22 @@
+---
+title: "Toubkal Summit Weekend Trek"
+planId: "high-atlas-trek"
+heroImage: "https://images.unsplash.com/photo-1632310226481-b8d07d2e2184?q=80&w=2070&auto=format&fit=crop"
+pubDate: 2024-06-01
+---
+
+Embark on a challenging yet rewarding trek through the High Atlas Mountains. This multi-day journey takes you through stunning landscapes, traditional Berber villages, and up to the refuge at the base of Mount Toubkal, North Africa's highest peak.
+
+## Highlights
+
+- **Scenic Views:** Experience breathtaking panoramas of the Atlas range.
+- **Cultural Immersion:** Walk through local villages and meet the friendly Berber people.
+- **Physical Challenge:** Test your endurance on steep trails and high altitudes.
+
+## What to Bring
+
+- Sturdy hiking boots
+- Warm clothing (layers are best)
+- Sun protection (hat, sunglasses, sunscreen)
+- Water bottle and purification tablets
+- Camera to capture the memories
diff --git a/web/src/content/plans/marrakech-food-tour.md b/web/src/content/plans/marrakech-food-tour.md
new file mode 100644
index 00000000..ea1d6f01
--- /dev/null
+++ b/web/src/content/plans/marrakech-food-tour.md
@@ -0,0 +1,16 @@
+---
+title: "Marrakech Food Tour"
+planId: "marrakech-food-tour"
+heroImage: "https://images.unsplash.com/photo-1661083098412-054431ab7112?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+pubDate: 2024-05-15
+---
+
+Discover the vibrant flavors of Marrakech on this guided food tour. From the bustling Jemaa el-Fnaa square to hidden gems in the Medina, you'll taste authentic Moroccan dishes and learn about the city's rich culinary history.
+
+### What to Expect
+
+* **Authentic Flavors**: Sample traditional tagines, fresh pastries, and refreshing mint tea.
+* **Local Insights**: Learn about the ingredients and cooking techniques from local experts.
+* **Hidden Gems**: Explore the winding streets of the Medina and discover places you wouldn't find on your own.
+
+Prepare your taste buds for an unforgettable adventure!
diff --git a/web/src/content/plans/marrakech-street-food-tour.md b/web/src/content/plans/marrakech-street-food-tour.md
new file mode 100644
index 00000000..a0045333
--- /dev/null
+++ b/web/src/content/plans/marrakech-street-food-tour.md
@@ -0,0 +1,11 @@
+---
+title: "Marrakech Street Food Tour"
+pubDate: '2026-01-18'
+heroImage: 'https://images.unsplash.com/photo-1585337023483-54f26c0389ab?q=80&w=1470&auto=format&fit=crop'
+author: 'Mrrakc Team'
+planId: marrakech-street-food-tour
+---
+
+Explore Marrakech through its street food. Walk from Jemaa el-Fnaa to small hidden spots in the medina and taste real local dishes.
+
+This food walk includes 13 must-try stops, from simple breakfasts like bissara to late-night snacks like snail soup. Come hungry and ready to try new flavors.
diff --git a/web/src/layouts/BaseLayout.astro b/web/src/layouts/BaseLayout.astro
new file mode 100644
index 00000000..05555719
--- /dev/null
+++ b/web/src/layouts/BaseLayout.astro
@@ -0,0 +1,77 @@
+---
+import '../styles/global.css';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+
+interface Props {
+ title: string;
+ description?: string;
+ image?: string;
+ transparentHeader?: boolean;
+}
+
+const { title, description = "Journey through the soul of Morocco.", image = '/blog-placeholder-1.jpg', transparentHeader = false } = Astro.props;
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/layouts/GameLayout.astro b/web/src/layouts/GameLayout.astro
new file mode 100644
index 00000000..a28379fa
--- /dev/null
+++ b/web/src/layouts/GameLayout.astro
@@ -0,0 +1,18 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+interface Props {
+ title: string;
+ description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+
+
+
+
+
+
+
diff --git a/web/src/pages/blog/[...slug].astro b/web/src/pages/blog/[...slug].astro
new file mode 100644
index 00000000..cfbce261
--- /dev/null
+++ b/web/src/pages/blog/[...slug].astro
@@ -0,0 +1,118 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+export async function getStaticPaths() {
+ const posts = await getCollection('blog', ({ data }) => {
+ return import.meta.env.PROD ? data.draft !== true : true;
+ });
+ return posts.map((post) => ({
+ params: { slug: post.slug },
+ props: post,
+ }));
+}
+type Props = CollectionEntry<'blog'>;
+
+const post = Astro.props;
+const { Content, headings, remarkPluginFrontmatter } = await post.render();
+const readingTime = remarkPluginFrontmatter.readingTime;
+
+// Filter headings for ToC (H2 and H3)
+const tocHeadings = headings.filter(h => h.depth >= 2 && h.depth <= 3);
+
+// Handle heroImage which can be a string or an optimized image object
+const heroImage = post.data.heroImage;
+const heroImageSrc = typeof heroImage === 'string' ? heroImage : heroImage?.src;
+---
+
+
+
+
+
+ {typeof heroImage === 'string' ? (
+
+ ) : heroImage ? (
+
+ ) : null}
+
+
+
+
+
+ {post.data.tags[0] || 'Story'}
+
+
+ {post.data.title}
+
+
+ {post.data.author}
+ •
+
+ {readingTime && (
+ <>
+ •
+ {readingTime}
+
+ )}
+
+
+
+
+
+ {post.data.showToc && tocHeadings.length > 0 && (
+
+
+ Table of Contents
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ Journal
+
+
+ Exploring the rich tapestry of Moroccan heritage, one story at a time.
+
+
+
+
+ {posts.map((post) => (
+
+ ))}
+
+
+
+ {title}
+
+
+ {heroImage && (
+
+
+
+ )}
+
+
+
+
+ {nextStep && (
+
+ {/* GameQuiz is now rendered within the MDX content */}
+
+ )}
+
+ {!nextStep && (
+
+
Congratulations!
+
You have completed the treasure hunt.
+
Play Again
+
+
+ {title}
+
+ {heroImage && (
+
+
+
+ )}
+
+
+
+
+
+
diff --git a/web/src/pages/games/index.astro b/web/src/pages/games/index.astro
new file mode 100644
index 00000000..fd741579
--- /dev/null
+++ b/web/src/pages/games/index.astro
@@ -0,0 +1,53 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+import { ArrowRight } from 'lucide-react';
+import { Image } from 'astro:assets';
+
+const allGames = await getCollection('games');
+// Filter for game index files (IDs that don't contain slashes, e.g. "chase-au-tresor")
+const gameIndices = allGames.filter(game => !game.id.includes('/'));
+---
+
+
+
+
+
+
+ Available Games
+
+
+ Choose an adventure and start exploring!
+
+
+
+
+
+
+
+
+
+ Mrrakc
+
+
+ Journey through the soul of Morocco: Culture, History, and Diverse Landscapes.
+
+
+ Start Exploring
+
+
+
Beyond the Guidebooks
+
+ Mrrakc is your gateway to the authentic Morocco. From the bustling souks of Marrakech to the silent dunes of Merzouga, we invite you to explore the rich tapestry of Moroccan heritage. Discover hidden gems, ancient traditions, and the warm hospitality that defines this magical land.
+
+
+
The Many Faces of Morocco
+
+
+
+ {/* Header */}
+
+
+
+
{points.length} locations found
+
+
+
+ {/* Map Container */}
+
+
Interactive Maps
+
+ Deep dive into specific themes, regions, and historical eras through our curated interactive maps.
+
+
+
+
+
+
diff --git a/web/src/pages/plans/[id].astro b/web/src/pages/plans/[id].astro
new file mode 100644
index 00000000..6c7e136b
--- /dev/null
+++ b/web/src/pages/plans/[id].astro
@@ -0,0 +1,39 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PlanView from '../../components/react/PlanView';
+import plansData from '../../data/generated/plans.json';
+import { getEntry, render } from 'astro:content';
+
+export async function getStaticPaths() {
+ const plans = Object.values(plansData);
+ return plans.map((plan) => ({
+ params: { id: plan.id },
+ props: { plan },
+ }));
+}
+
+const { plan } = Astro.props;
+
+// Fetch editorial content if available
+// If plan.id is in generated plans, it means it's a data-driven plan.
+// We might also have a markdown file for it.
+// The id in getStaticPaths comes from generated plans.
+// So we try to find a content entry with that id.
+const entry = await getEntry('plans', plan.id);
+const { Content } = entry ? await render(entry) : { Content: null };
+
+// Merge metadata
+const title = plan.spec.title || entry?.data.title || plan.spec.steps[0]?.title;
+const description = plan.spec.description || entry?.data.description || `Itinerary: ${title}`;
+const heroImage = entry?.data.heroImage;
+---
+
+
+
+ {Content && (
+
+
+
+ )}
+
+
diff --git a/web/src/pages/plans/index.astro b/web/src/pages/plans/index.astro
new file mode 100644
index 00000000..55b32861
--- /dev/null
+++ b/web/src/pages/plans/index.astro
@@ -0,0 +1,78 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import plansData from '../../data/generated/plans.json';
+import { getEntry } from 'astro:content';
+import { Map, Clock, Mountain, ArrowRight } from 'lucide-react';
+
+const plans = await Promise.all(Object.values(plansData).map(async (plan) => {
+ const entry = await getEntry('plans', plan.id);
+ const heroImage = entry?.data.heroImage;
+ const title = plan.spec.title || entry?.data.title || plan.spec.steps[0]?.title || 'Untitled Plan';
+ const pubDate = plan.spec.pubDate ? new Date(plan.spec.pubDate) : (entry?.data.pubDate || new Date(0));
+
+ return {
+ ...plan,
+ title,
+ heroImage,
+ pubDate
+ };
+}));
+
+plans.sort((a, b) => b.pubDate.getTime() - a.pubDate.getTime());
+---
+
+
+
+
+
+ Blanat
+
+
+ Curated itineraries to help you discover the best of the region.
+
+
+
+
+
+ {/* Left Column: Details */}
+
+
+ {/* Description */}
+
+ {spec.description}
+
+
+ {/* Timeline */}
+ {spec.timeline && spec.timeline.length > 0 && (
+
+
+ Timeline
+
+
+ {spec.timeline.map(event => (
+
+
+
{formatDate(event.date)}
+
{event.title}
+
{event.description}
+
+ ))}
+
+ )}
+
+
+
+
+
+ {/* Right Column: Sidebar Info */}
+
+
+ Location
+
+
+
+
+