...

src/App.jsx

@@ -5,6 +5,7 @@ import Home from './pages/Home';
 import How from './pages/How';
 import GetStarted from './pages/GetStarted';
 import Technology from './pages/Technology';
+import Freezone from './pages/Freezone';
 import Blog from './pages/Blog';
 import BlogPost from './pages/BlogPost';
 import './App.css';
@@ -20,11 +21,13 @@ function App() {
             <Route path="/how" element={<How />} />
             <Route path="/get-started" element={<GetStarted />} />
             <Route path="/technology" element={<Technology />} />
+            <Route path="/freezone" element={<Freezone />} />
             <Route path="/blog" element={<Blog />} />
             <Route path="/blog/:slug" element={<BlogPost />} />
             <Route path="/capability/:slug" element={<BlogPost />} />
             <Route path="/component/:slug" element={<BlogPost />} />
             <Route path="/tech/:slug" element={<BlogPost />} />
+            <Route path="/freezone/:slug" element={<BlogPost />} />
           </Routes>
         </main>
       </div>

src/blogs/freezone_ultimate-convenience-and-features.md

@@ -0,0 +1,17 @@
+---
+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: /src/assets/stresssfree.jpg
+---
+
+Imagine a business environment where every tool you need is at your fingertips, processes are streamlined, and innovation thrives. A digital freezone delivers this reality, offering an ultimate blend of convenience and advanced features that transform the way you work.
+
+**Key Features for a Better Business Life:**
+
+*   **Integrated Digital Tools:** Access a comprehensive suite of integrated tools for communication, collaboration, project management, and financial operations, all within a secure ecosystem.
+*   **Automated Compliance:** Leverage AI-driven systems that automate compliance checks and regulatory filings, significantly reducing administrative burden and ensuring adherence to digital freezone laws.
+*   **Seamless Global Transactions:** Conduct international transactions with ease, benefiting from low fees, rapid settlements, and support for various digital currencies.
+*   **Personalized AI Agents:** Utilize intelligent AI agents that learn your preferences and automate routine tasks, freeing up your time to focus on strategic initiatives and creative endeavors.
+*   **Vibrant Community and Ecosystem:** Connect with a global community of innovators, entrepreneurs, and digital nomads, fostering collaboration and new opportunities.
+
+A digital freezone is more than just a legal framework; it's a dynamic ecosystem designed to enhance productivity, reduce stress, and inject enjoyment back into your business life.

src/components/Navigation.jsx

@@ -19,6 +19,7 @@ const Navigation = () => {
     { path: '/how', label: 'HOW' },
     { path: '/get-started', label: 'GET STARTED' },
     { path: '/technology', label: 'TECHNOLOGY' },
+    { path: '/freezone', label: 'FREEZONE' },
     { path: '/blog', label: 'BLOG' },
   ];
 

src/pages/Freezone.jsx

@@ -0,0 +1,175 @@
+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 HeroSection from '../components/HeroSection';
+import Section from '../components/Section';
+import FeatureCard from '../components/FeatureCard';
+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
+const freezoneModules = import.meta.glob('../blogs/freezone_*.md', { query: '?raw', import: 'default', eager: true });
+
+const Freezone = () => {
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadArticles = async () => {
+      try {
+        const loadedArticles = [];
+        
+        for (const path in freezoneModules) {
+          const content = freezoneModules[path];
+          const { data: frontmatter } = matter(content);
+          
+          // Map icon strings to actual components
+          const iconMap = {
+            'Gavel': <Gavel size={32} />,
+            '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
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: imageMap[frontmatter.image] || freezoneImage, // Default image
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
+          });
+        }
+
+        // Sort by order (if order is defined in frontmatter)
+        loadedArticles.sort((a, b) => a.order - b.order);
+        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);
+      }
+    };
+
+    loadArticles();
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <HeroSection
+        subtitle="Operate from a Digital Freezone"
+        title="HERO Freezone"
+        description="A secure and independent environment for your digital assets and operations, with legal dispute resolution."
+        backgroundImage={freezoneBackground}
+        ctaText="Learn More"
+        ctaLink="/freezone" // Link to the freezone page itself, or a sub-section if applicable
+        showVideo={false}
+      />
+
+      {/* Freezone Articles Section */}
+      <Section background="gradient" padding="xlarge">
+        <div className="text-center mb-16">
+          <motion.h2
+            className="text-4xl md:text-5xl font-bold text-white mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+          >
+            Why a Digital <span className="text-green-400">Freezone?</span>
+          </motion.h2>
+          <motion.p
+            className="text-xl text-gray-300 max-w-4xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+          >
+            Explore the core benefits of operating your HERO from a digital freezone.
+          </motion.p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {loading ? (
+            // Loading skeleton
+            Array.from({ length: 4 }).map((_, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+                className="glass-effect rounded-xl p-6 animate-pulse"
+              >
+                <div className="h-8 w-8 bg-gray-600 rounded mb-4"></div>
+                <div className="h-6 bg-gray-600 rounded mb-3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-4"></div>
+                <div className="h-32 bg-gray-600 rounded-lg"></div>
+              </motion.div>
+            ))
+          ) : (
+            articles.map((article, index) => (
+              <Link key={index} to={`/freezone/${article.slug}`} className="block">
+                <FeatureCard
+                  icon={article.icon}
+                  title={article.title}
+                  description={article.description}
+                  image={article.image}
+                  delay={index * 0.2}
+                />
+              </Link>
+            ))
+          )}
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default Freezone;

src/pages/Technology.jsx

@@ -15,7 +15,7 @@ import securityImage from '../assets/person.jpg'; // Digital privacy
 import swarmImage from '../assets/swarm.jpg'; // AI Agent Creation
 
 // Use Vite's import.meta.glob to import all tech markdown files
-const techModules = import.meta.glob('../blogs/tech_*.md', { as: 'raw', eager: true });
+const techModules = import.meta.glob('../blogs/tech_*.md', { query: '?raw', import: 'default', eager: true });
 
 const Technology = () => {
   const [technologies, setTechnologies] = useState([]);