update logo and color

src/components/HeroSection.jsx

@@ -47,7 +47,7 @@ const HeroSection = ({
         >
           {subtitle && (
             <motion.p 
-              className="text-blue-400 text-lg font-medium mb-4"
+              className="text-green-300 text-lg font-medium mb-4"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ delay: 0.2, duration: 0.6 }}

src/components/Navigation.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import logo from '../assets/new_logo_tft.png'; // <-- replace with your logo path
 
 const Navigation = () => {
   const location = useLocation();
@@ -23,11 +24,21 @@ const Navigation = () => {
   ];
 
   return (
-    <nav className={`fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-white/10 transition-all duration-300 ${isScrolled ? 'py-3' : 'py-4'}`}>
+    <nav
+      className={`fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-white/10 transition-all duration-300 ${
+        isScrolled ? 'py-3' : 'py-4'
+      }`}
+    >
       <div className="max-w-7xl mx-auto px-6">
         <div className="flex items-center justify-between">
-          <Link to="/" className={`font-bold text-white transition-all duration-300 ${isScrolled ? 'text-xl' : 'text-2xl'}`}>
-            ThreeFold
+          <Link to="/" className="flex items-center">
+            <img
+              src={logo}
+              alt="ThreeFold Logo"
+              className={`transition-all duration-300 ${
+                isScrolled ? 'h-5' : 'h-6'
+              }`}
+            />
           </Link>
           <div className="hidden md:flex space-x-8">
             {navItems.map((item) => (

src/pages/Home.jsx

@@ -12,7 +12,8 @@ import matter from 'gray-matter';
 import threeFoldImage from '../assets/sphere.jpg'; // Digital network visualization
 
 // Use Vite's import.meta.glob to import all home content markdown files and images
-const homeModules = import.meta.glob('../content/home/*.md', { as: 'raw', eager: true });
+const homeModules = import.meta.glob('../content/home/*.md', { query: '?raw', import: 'default', eager: true });
+
 const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
 const iconComponents = {
   Shield, Brain, Users, Lock, Zap, Heart, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign
@@ -149,7 +150,7 @@ const Home = () => {
             transition={{ duration: 0.6 }}
             viewport={{ once: true }}
           >
-            Why <span className="text-purple-400">ThreeFold</span> Matters
+            Why <span className="text-green-300">ThreeFold</span> Matters
           </motion.h2>
           <motion.p 
             className="text-xl text-gray-300 max-w-6xl mx-auto leading-relaxed"
@@ -174,7 +175,7 @@ const Home = () => {
               className="glass-effect rounded-xl p-6 hover:glow-blue transition-all duration-300"
             >
               <div className="flex items-start space-x-3">
-                <Heart className="text-purple-400 mt-1 flex-shrink-0" size={20} />
+                <Heart className="text-green-300 mt-1 flex-shrink-0" size={20} />
                 <p className="text-gray-300">{benefit}</p>
               </div>
             </motion.div>
@@ -192,7 +193,7 @@ const Home = () => {
             transition={{ duration: 0.6 }}
             viewport={{ once: true }}
           >
-            Three <span className="text-cyan-400">Core Inventions</span>
+            Three <span className="text-green-300">Core Inventions</span>
           </motion.h2>
           <motion.p 
             className="text-xl text-gray-300 max-w-5xl mx-auto"