...

src/App.jsx

@@ -22,6 +22,7 @@ function App() {
             <Route path="/get-started" element={<GetStarted />} />
             <Route path="/technology" element={<Technology />} />
             <Route path="/freezone" element={<Freezone />} />
+            <Route path="/freezone/:slug" element={<BlogPost />} />
             <Route path="/blog" element={<Blog />} />
             <Route path="/blog/:category/:slug" element={<BlogPost />} />
             <Route path="/component/:slug" element={<BlogPost />} />

src/content/freezone/dispute-resolution.md

@@ -1,6 +1,6 @@
 ---
 title: Dispute Resolution (AI & People)
-slug: dispute-resolution-ai-and-people
+slug: dispute-resolution
 description: Explore the innovative dispute resolution mechanisms available within a digital freezone, combining AI efficiency with human oversight.
 image: disputeresolution.jpg
 ---

src/content/freezone/keep-your-assets-safe.md

@@ -1,6 +1,6 @@
 ---
 title: Keep Your Assets Safe Now and in Future
-slug: keep-your-assets-safe-now-and-in-future
+slug: keep-your-assets-safe
 description: Discover how a digital freezone provides robust protection for your assets against current and future threats.
 image: world.jpg
 ---

src/content/freezone/ultimate-convenience-and-features.md

@@ -1,6 +1,6 @@
 ---
 title: Ultimate in Convenience and Features
-slug: ultimate-in-convenience-and-features
+slug: ultimate-convenience-and-features
 description: Experience unparalleled convenience and a rich suite of features designed to make your business life fun again within a digital freezone.
 image: stresssfree.jpg
 ---

src/pages/Freezone.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
-import { Gavel, Wallet, ShieldCheck, Smile } from 'lucide-react'; // Appropriate icons for Freezone
+import { Gavel, Wallet, ShieldCheck, Smile, BookOpen, Landmark, Scale } from 'lucide-react'; // Appropriate icons for Freezone
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
@@ -9,13 +9,11 @@ import matter from 'gray-matter';
 
 // Import images
 const freezoneBackground = new URL('../assets/inthezone.png', import.meta.url).href;
-const freezoneImage = new URL('../assets/freezone.jpg', import.meta.url).href;
-const theworldImage = new URL('../assets/world.jpg', import.meta.url).href;
-const disputeresolutionImage = new URL('../assets/disputeresolution.jpg', import.meta.url).href;
-const stresssfreeImage = new URL('../assets/stresssfree.jpg', import.meta.url).href;
 
-// Use Vite's import.meta.glob to import all freezone markdown files
+// Use Vite's import.meta.glob to import all freezone markdown files and images
-const freezoneModules = import.meta.glob('../content/freezone/*.md', { query: '?raw', import: 'default', eager: true });
+const freezoneModules = import.meta.glob('../content/freezone/*.md', { as: 'raw', eager: true });
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
+const iconComponents = { Gavel, Wallet, ShieldCheck, Smile, BookOpen, Landmark, Scale };
 
 const Freezone = () => {
   const [articles, setArticles] = useState([]);
@@ -30,29 +28,17 @@ const Freezone = () => {
           const content = freezoneModules[path];
           const { data: frontmatter } = matter(content);
           
-          // Map icon strings to actual components
+          const IconComponent = iconComponents[frontmatter.iconname];
-          const iconMap = {
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
-            'Gavel': <Gavel size={32} />,
+          const importedImage = imageModules[imagePath];
-            'Wallet': <Wallet size={32} />,
-            'ShieldCheck': <ShieldCheck size={32} />,
-            'Smile': <Smile size={32} />
-          };
-
-          // Map image paths to actual imports
-          const imageMap = {
-            '/src/assets/freezone.jpg': freezoneImage,
-            '/src/assets/theworld.jpg': theworldImage,
-            '/src/assets/disputeresolution.jpg': disputeresolutionImage,
-            '/src/assets/stresssfree.jpg': stresssfreeImage
-          };
 
           loadedArticles.push({
-            icon: iconMap[frontmatter.icon] || <Gavel size={32} />, // Default icon
+            icon: IconComponent ? <IconComponent size={32} /> : <Gavel size={32} />, // Default icon
             title: frontmatter.title,
             description: frontmatter.description,
-            image: imageMap[frontmatter.image] || freezoneImage, // Default image
+            image: importedImage,
             order: frontmatter.order || 999,
-            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/&/g, 'and').replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/^-+|-+$/g, '')
           });
         }
 
@@ -61,37 +47,6 @@ const Freezone = () => {
         setArticles(loadedArticles);
       } catch (error) {
         console.error('Error loading freezone articles:', error);
-        // Fallback to static data if loading fails (optional, but good for robustness)
-        setArticles([
-          {
-            icon: <Wallet size={32} />,
-            title: "Legal and Financial Sovereignty",
-            description: "Understand how a digital freezone provides unparalleled legal and financial sovereignty for your operations.",
-            image: freezoneImage,
-            slug: "legal-and-financial-sovereignty"
-          },
-          {
-            icon: <ShieldCheck size={32} />,
-            title: "Keep Your Assets Safe Now and in Future",
-            description: "Discover how a digital freezone provides robust protection for your assets against current and future threats.",
-            image: theworldImage,
-            slug: "keep-your-assets-safe-now-and-in-future"
-          },
-          {
-            icon: <Gavel size={32} />,
-            title: "Dispute Resolution (AI & People)",
-            description: "Explore the innovative dispute resolution mechanisms available within a digital freezone, combining AI efficiency with human oversight.",
-            image: disputeresolutionImage,
-            slug: "dispute-resolution"
-          },
-          {
-            icon: <Smile size={32} />,
-            title: "Ultimate in Convenience and Features",
-            description: "Experience unparalleled convenience and a rich suite of features designed to make your business life fun again within a digital freezone.",
-            image: stresssfreeImage,
-            slug: "ultimate-convenience-and-features"
-          }
-        ]);
       } finally {
         setLoading(false);
       }
@@ -155,7 +110,7 @@ const Freezone = () => {
             ))
           ) : (
             articles.map((article, index) => (
-              <Link key={index} to={`/blog/freezone/${article.slug}`} className="block">
+              <Link key={index} to={`/freezone/${article.slug}`} className="block">
                 <FeatureCard
                   icon={article.icon}
                   title={article.title}