Spaces:

GXSNetwork
/

BioNexus

Sleeping

App Files Files Community

gaialive commited on Oct 20, 2025

Commit

e4c6a7c

verified ·

1 Parent(s): 7fe631a

Upload 27 files

Browse files

Files changed (27) hide show

.dockerignore +8 -0
Dockerfile +29 -0
Dockerfile.dev +20 -0
index.html +30 -0
package-lock.json +0 -0
package.json +27 -13
postcss.config.js +6 -0
public/spaces-config.json +10 -0
public/spaces-landing.html +108 -0
src/App.css +31 -0
src/App.jsx +12 -0
src/components/DatasetsSection.jsx +107 -0
src/components/NewsSection.jsx +101 -0
src/hooks/useTheme.js +27 -0
src/index.css +153 -0
src/layouts/MainLayout.jsx +141 -0
src/main.jsx +49 -0
src/pages/DatasetsPage.jsx +201 -0
src/pages/DirectoryPage.jsx +188 -0
src/pages/HomePage.jsx +107 -0
src/pages/MatchmakingPage.jsx +247 -0
src/pages/NewsDetailPage.jsx +142 -0
src/pages/NewsPage.jsx +123 -0
src/pages/NotFoundPage.jsx +32 -0
src/utils/theme.js +24 -0
tailwind.config.js +20 -0
vite.config.js +22 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,8 @@

+node_modules
+dist
+.env
+.git
+.gitignore
+README.md
+.dockerignore
+Dockerfile.dev

Dockerfile ADDED Viewed

	@@ -0,0 +1,29 @@

+# Use Node.js runtime
+FROM node:18-alpine as build
+# Set working directory
+WORKDIR /app
+# Copy package files
+COPY package*.json ./
+# Install dependencies
+RUN npm ci
+# Copy application code
+COPY . .
+# Build the application
+RUN npm run build
+# Use nginx to serve the static files
+FROM nginx:alpine
+# Copy built files to nginx
+COPY --from=build /app/dist /usr/share/nginx/html
+# Expose port
+EXPOSE 80
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev ADDED Viewed

	@@ -0,0 +1,20 @@

+# Use Node.js runtime
+FROM node:18-alpine
+# Set working directory
+WORKDIR /app
+# Copy package files
+COPY package*.json ./
+# Install all dependencies
+RUN npm install
+# Copy application code
+COPY . .
+# Expose port
+EXPOSE 5173
+# Start the development server
+CMD ["npm", "run", "dev"]

index.html ADDED Viewed

	@@ -0,0 +1,30 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BioNexus Hub - Bioeconomy Innovation & FLW Nexus</title>
+    <meta name="description" content="A lightweight, regional-to-global digital nexus that connects policymakers, companies, researchers, civil society and communities to accelerate bioeconomy solutions that reduce food loss & waste (FLW) and catalyse circular agrifood-system transformation.">
+    <meta name="keywords" content="bioeconomy, food loss, waste reduction, agrifood, circular economy, sustainability">
+    <meta name="author" content="BioNexus Hub">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://bionexus-hub.hf.space/">
+    <meta property="og:title" content="BioNexus Hub - Bioeconomy Innovation & FLW Nexus">
+    <meta property="og:description" content="Connecting stakeholders to accelerate bioeconomy solutions that reduce food loss & waste.">
+    <meta property="og:image" content="/vite.svg">
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://bionexus-hub.hf.space/">
+    <meta property="twitter:title" content="BioNexus Hub - Bioeconomy Innovation & FLW Nexus">
+    <meta property="twitter:description" content="Connecting stakeholders to accelerate bioeconomy solutions that reduce food loss & waste.">
+    <meta property="twitter:image" content="/vite.svg">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -1,18 +1,32 @@
 {
-  "name": "BioNexus-Hub",
-  "version": "1.0.0",
-  "description": "A lightweight, regional-to-global digital nexus that connects policymakers, companies, researchers, civil society and communities to accelerate bioeconomy solutions that reduce food loss & waste (FLW) and catalyse circular agrifood-system transformation.",
-  "main": "index.js",
   "scripts": {
-    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
-    "dev:client": "cd client && npm run dev",
-    "dev:server": "cd server && npm run dev",
-    "build": "cd client && npm run build",
-    "start": "node index.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "private": true,
   "devDependencies": {
-    "concurrently": "^8.2.0"
-  }
 }

 {
+  "name": "bionexus-hub-client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^4.0.0",
+    "vite": "^5.0.8"
+  },
+  "proxy": "http://localhost:3001"
 }

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  }
+}

public/spaces-config.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "sdk": "docker",
+  "app_port": 80,
+  "container_runtime": "runc",
+  "resources": {
+    "memory": "4Gi",
+    "cpu": "2",
+    "gpu": false
+  }
+}

public/spaces-landing.html ADDED Viewed

	@@ -0,0 +1,108 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BioNexus Hub - Hugging Face Spaces</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #16a34a, #2563eb, #9333ea);
+            color: white;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+        .container {
+            max-width: 800px;
+            padding: 2rem;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 20px;
+            backdrop-filter: blur(10px);
+            margin: 1rem;
+        }
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            line-height: 1.6;
+        }
+        .btn {
+            display: inline-block;
+            padding: 1rem 2rem;
+            background: white;
+            color: #16a34a;
+            font-weight: bold;
+            font-size: 1.2rem;
+            border-radius: 50px;
+            text-decoration: none;
+            margin: 1rem;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            transition: all 0.3s ease;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 12px rgba(0,0,0,0.4);
+        }
+        .features {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 1rem;
+            margin: 2rem 0;
+        }
+        .feature {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 1rem;
+            border-radius: 10px;
+            flex: 1;
+            min-width: 200px;
+        }
+        .feature h3 {
+            margin-top: 0;
+        }
+        footer {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>BioNexus Hub</h1>
+        <p>A lightweight, regional-to-global digital nexus that connects policymakers, companies, researchers, civil society and communities to accelerate bioeconomy solutions that reduce food loss & waste (FLW).</p>
+        <div class="features">
+            <div class="feature">
+                <h3>📰 News Hub</h3>
+                <p>Discover regional policy updates and best practices</p>
+            </div>
+            <div class="feature">
+                <h3>📊 Open Data</h3>
+                <p>Access datasets on cold-chain gaps and processing capacity</p>
+            </div>
+            <div class="feature">
+                <h3>🤝 Matchmaking</h3>
+                <p>Connect with partners and funders for pilot projects</p>
+            </div>
+        </div>
+        <a href="/app" class="btn">Launch BioNexus Hub</a>
+        <footer>
+            <p>BioNexus Hub - Accelerating bioeconomy solutions for food loss & waste reduction</p>
+            <p>© 2025 BioNexus Hub. All rights reserved.</p>
+        </footer>
+    </div>
+</body>
+</html>

src/App.css ADDED Viewed

	@@ -0,0 +1,31 @@

+/* We'll primarily use Tailwind classes instead of custom CSS */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+.App {
+  text-align: center;
+}
+.App-header {
+  background-color: #282c34;
+  padding: 20px;
+  color: white;
+}
+.hero {
+  padding: 40px;
+  background: linear-gradient(135deg, #16a34a, #2563eb);
+  color: white;
+  border-radius: 10px;
+  margin: 20px;
+}
+.hero h2 {
+  font-size: 2rem;
+  margin-bottom: 15px;
+}
+@media (max-width: 768px) {
+  .hero h2 {
+    font-size: 1.5rem;
+  }
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,12 @@

+importReact from 'react'
+function App() {
+  return (
+    <div className="App">
+      <h1>GXS BioNexus Hub</h1>
+      <p>If you see this message, React Router is not working properly.</p>
+    </div>
+  )
+}
+export default App

src/components/DatasetsSection.jsx ADDED Viewed

	@@ -0,0 +1,107 @@

+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+const DatasetsSection = () => {
+  const [datasets, setDatasets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    // In a real app, this would fetch from an API
+    // For demo purposes, we'll use mock data
+    const mockDatasets = [
+      {
+        id: 1,
+        title: 'Cold Chain Infrastructure Map',
+        description: 'Geospatial data on refrigeration facilities across Sub-Saharan Africa',
+        category: 'Infrastructure',
+        size: '2.4 GB',
+        downloads: 1240
+      },
+      {
+        id: 2,
+        title: 'Post-Harvest Loss Hotspots',
+        description: 'Identified areas with highest food loss rates in South Asia',
+        category: 'Analytics',
+        size: '890 MB',
+        downloads: 890
+      },
+      {
+        id: 3,
+        title: 'Processing Capacity Database',
+        description: 'List of food processing facilities with available capacity',
+        category: 'Industry',
+        size: '1.1 GB',
+        downloads: 1560
+      }
+    ];
+    setTimeout(() => {
+      setDatasets(mockDatasets);
+      setLoading(false);
+    }, 500);
+  }, []);
+  if (loading) {
+    return (
+      <section className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Open Datasets</h2>
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+  if (error) {
+    return (
+      <section className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Open Datasets</h2>
+          <div className="text-center text-red-500">
+            <p>Error loading datasets: {error}</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+  return (
+    <section className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
+      <div className="container mx-auto px-4">
+        <div className="flex justify-between items-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Open Datasets</h2>
+          <Link to="/datasets" className="text-bio-blue dark:text-blue-400 hover:underline font-medium drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
+            Browse All Datasets →
+          </Link>
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {datasets.map((dataset) => (
+            <div key={dataset.id} className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-lg p-6 border border-blue-100 dark:border-gray-600 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-gray-700/50 dark:to-gray-800/50">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="text-xl font-bold text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">{dataset.title}</h3>
+                <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-blue bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 rounded-full drop-shadow bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30">
+                  {dataset.category}
+                </span>
+              </div>
+              <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{dataset.description}</p>
+              <div className="flex justify-between items-center">
+                <div className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">
+                  <span className="mr-4">Size: {dataset.size}</span>
+                  <span>{dataset.downloads} downloads</span>
+                </div>
+                <button className="bg-gradient-to-r from-bio-blue to-blue-500 text-white px-4 py-2 rounded-lg hover:from-blue-500 hover:to-blue-600 transition shadow-md hover:shadow-lg drop-shadow">
+                  Download
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+export default DatasetsSection;

src/components/NewsSection.jsx ADDED Viewed

	@@ -0,0 +1,101 @@

+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+const NewsSection = () => {
+  const [news, setNews] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    // In a real app, this would fetch from an API
+    // For demo purposes, we'll use mock data
+    const mockNews = [
+      {
+        id: 1,
+        title: 'New Cold Chain Initiative Launched in Southeast Asia',
+        excerpt: 'Regional partnership aims to reduce post-harvest losses by 30% through solar-powered refrigeration.',
+        date: '2025-10-15',
+        category: 'Policy'
+      },
+      {
+        id: 2,
+        title: 'Innovative Edible Coatings Show Promise in Lab Trials',
+        excerpt: 'New biodegradable coatings extend shelf life of fruits by up to 2 weeks.',
+        date: '2025-10-10',
+        category: 'Technology'
+      },
+      {
+        id: 3,
+        title: 'Global Fund Announces $50M for FLW Reduction Projects',
+        excerpt: 'Funding opportunity for pilot projects connecting smallholders to processing facilities.',
+        date: '2025-10-05',
+        category: 'Finance'
+      }
+    ];
+    setTimeout(() => {
+      setNews(mockNews);
+      setLoading(false);
+    }, 500);
+  }, []);
+  if (loading) {
+    return (
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Latest News & Updates</h2>
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+  if (error) {
+    return (
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Latest News & Updates</h2>
+          <div className="text-center text-red-500">
+            <p>Error loading news: {error}</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+  return (
+    <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300">
+      <div className="container mx-auto px-4">
+        <div className="flex justify-between items-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Latest News & Updates</h2>
+          <Link to="/news" className="text-bio-blue dark:text-blue-400 hover:underline font-medium drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
+            View All News →
+          </Link>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {news.map((item) => (
+            <div key={item.id} className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+              <div className="p-6">
+                <div className="flex justify-between items-start mb-4">
+                  <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-green bg-green-100 dark:bg-green-900/30 dark:text-green-300 rounded-full drop-shadow bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30">
+                    {item.category}
+                  </span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">{new Date(item.date).toLocaleDateString()}</span>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">{item.title}</h3>
+                <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{item.excerpt}</p>
+                <Link to={`/news/${item.id}`} className="text-bio-blue dark:text-blue-400 font-medium hover:text-blue-700 dark:hover:text-blue-300 transition drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
+                  Read More →
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+export default NewsSection;

src/hooks/useTheme.js ADDED Viewed

	@@ -0,0 +1,27 @@

+import { useState, useEffect } from 'react';
+import { applyTheme, getInitialTheme } from '../utils/theme';
+export const useTheme = () => {
+  const [theme, setTheme] = useState('light');
+  // Check for saved theme preference or respect OS preference
+  useEffect(() => {
+    const initialTheme = getInitialTheme();
+    setTheme(initialTheme);
+    applyTheme(initialTheme);
+  }, []);
+  // Apply theme to document
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  const toggleTheme = () => {
+    setTheme(prevTheme => {
+      const newTheme = prevTheme === 'light' ? 'dark' : 'light';
+      return newTheme;
+    });
+  };
+  return { theme, toggleTheme };
+};

src/index.css ADDED Viewed

	@@ -0,0 +1,153 @@

+@import 'tailwindcss';
+@theme {
+  --bio-green: #16a34a;
+  --bio-blue: #2563eb;
+  --bio-purple: #9333ea;
+  --bio-orange: #ea580c;
+  --bio-yellow: #ca8a04;
+  --bio-pink: #db2777;
+  --bio-teal: #0d9488;
+  --bio-cyan: #0891b2;
+  --bio-lime: #65a30d;
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: #334155;
+  background-color: #f8fafc;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  transition: background-color 0.3s, color 0.3s;
+  /* Enhanced font rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  /* Vibrant background gradient */
+  background: linear-gradient(135deg, #f0f9ff 0%, #fdf2f8 50%, #f0fdf4 100%);
+}
+.dark body {
+  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #052e16 100%);
+}
+h1, h2, h3, h4, h5, h6 {
+  /* Improved font rendering for headings */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-weight: 800;
+  /* Gradient text for headings */
+  background: linear-gradient(90deg, var(--bio-green), var(--bio-blue), var(--bio-purple));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
+  background: linear-gradient(90deg, #4ade80, #60a5fa, #c084fc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+button, a {
+  /* Improved font rendering for interactive elements */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+/* Dark mode styles */
+.dark {
+  color: #f1f5f9;
+  background-color: #0f172a;
+}
+/* Improved font rendering for all elements */
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+/* Gradient text utility class */
+.text-gradient {
+  background: linear-gradient(90deg, var(--bio-green), var(--bio-blue), var(--bio-purple));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.dark .text-gradient {
+  background: linear-gradient(90deg, #4ade80, #60a5fa, #c084fc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+/* Gradient backgrounds */
+.bg-gradient-bio {
+  background: linear-gradient(135deg, var(--bio-green), var(--bio-blue), var(--bio-purple));
+}
+.bg-gradient-bio-alt {
+  background: linear-gradient(135deg, var(--bio-pink), var(--bio-orange), var(--bio-yellow));
+}
+.bg-gradient-bio-light {
+  background: linear-gradient(135deg, var(--bio-cyan), var(--bio-teal), var(--bio-lime));
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/layouts/MainLayout.jsx ADDED Viewed

	@@ -0,0 +1,141 @@

+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useTheme } from '../hooks/useTheme';
+const MainLayout = ({ children }) => {
+  const { theme, toggleTheme } = useTheme();
+  const location = useLocation();
+  const navigation = [
+    { name: 'Home', path: '/' },
+    { name: 'News', path: '/news' },
+    { name: 'Datasets', path: '/datasets' },
+    { name: 'Directory', path: '/directory' },
+    { name: 'Matchmaking', path: '/matchmaking' }
+  ];
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-colors duration-300">
+      <header className="bg-gradient-to-r from-bio-green via-bio-blue to-bio-purple text-white py-6 px-4 shadow-xl dark:from-gray-800 dark:via-gray-900 dark:to-gray-800 transition-colors duration-300">
+        <div className="container mx-auto flex justify-between items-center">
+          <div>
+            <Link to="/" className="text-3xl md:text-4xl font-bold hover:opacity-90 transition drop-shadow-lg">
+              <span className="bg-gradient-to-r from-yellow-300 via-green-300 to-blue-300 bg-clip-text text-transparent">
+                GXS BioNexus Hub
+              </span>
+            </Link>
+            <p className="text-lg mt-1 drop-shadow">
+              <span className="bg-gradient-to-r from-green-200 to-blue-200 bg-clip-text text-transparent">
+                Bioeconomy Innovation & FLW Nexus
+              </span>
+            </p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <nav className="hidden md:block">
+              <ul className="flex space-x-6">
+                {navigation.map((item) => (
+                  <li key={item.path}>
+                    <Link
+                      to={item.path}
+                      className={`hover:text-green-200 transition font-medium drop-shadow ${
+                        location.pathname === item.path
+                          ? 'font-bold underline underline-offset-4 decoration-2 bg-gradient-to-r from-yellow-300 to-green-300 bg-clip-text text-transparent'
+                          : 'bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent dark:from-gray-100 dark:to-gray-300'
+                      }`}
+                    >
+                      {item.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-full bg-white/20 hover:bg-white/30 transition drop-shadow"
+              aria-label="Toggle dark mode"
+            >
+              {theme === 'light' ? (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              )}
+            </button>
+            <button className="md:hidden text-white">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </header>
+      <main>
+        {children}
+      </main>
+      <footer className="bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 text-white py-12 dark:from-gray-900 dark:via-black dark:to-gray-900 transition-colors duration-300">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <h3 className="text-xl font-bold mb-4 drop-shadow">
+                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
+                  GXS BioNexus Hub
+                </span>
+              </h3>
+              <p className="text-gray-400 drop-shadow">Accelerating bioeconomy solutions that reduce food loss & waste.</p>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4 drop-shadow">
+                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
+                  Platform
+                </span>
+              </h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><Link to="/" className="hover:text-white transition drop-shadow">Home</Link></li>
+                <li><Link to="/news" className="hover:text-white transition drop-shadow">News Hub</Link></li>
+                <li><Link to="/datasets" className="hover:text-white transition drop-shadow">Datasets</Link></li>
+                <li><Link to="/directory" className="hover:text-white transition drop-shadow">Directory</Link></li>
+                <li><Link to="/matchmaking" className="hover:text-white transition drop-shadow">Matchmaking</Link></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4 drop-shadow">
+                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
+                  Resources
+                </span>
+              </h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white transition drop-shadow">Documentation</a></li>
+                <li><a href="#" className="hover:text-white transition drop-shadow">API</a></li>
+                <li><a href="#" className="hover:text-white transition drop-shadow">Community</a></li>
+                <li><a href="#" className="hover:text-white transition drop-shadow">Blog</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4 drop-shadow">
+                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
+                  Connect
+                </span>
+              </h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white transition drop-shadow">Twitter</a></li>
+                <li><a href="#" className="hover:text-white transition drop-shadow">LinkedIn</a></li>
+                <li><a href="#" className="hover:text-white transition drop-shadow">GitHub</a></li>
+                <li><a href="#" className="hover:text-white transition drop-shadow">Contact</a></li>
+              </ul>
+            </div>
+          </div>
+          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 drop-shadow">
+            <p>&copy; 2025 GXS BioNexus Hub. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+export default MainLayout;

src/main.jsx ADDED Viewed

	@@ -0,0 +1,49 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import MainLayout from './layouts/MainLayout'
+import HomePage from './pages/HomePage'
+import NewsPage from './pages/NewsPage'
+import NewsDetailPage from './pages/NewsDetailPage'
+import DatasetsPage from './pages/DatasetsPage'
+import DirectoryPage from './pages/DirectoryPage'
+import MatchmakingPage from './pages/MatchmakingPage'
+import NotFoundPage from './pages/NotFoundPage'
+import './index.css'
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <MainLayout><HomePage /></MainLayout>
+  },
+  {
+    path: "/news",
+    element: <MainLayout><NewsPage /></MainLayout>
+  },
+  {
+    path: "/news/:id",
+    element: <MainLayout><NewsDetailPage /></MainLayout>
+  },
+  {
+    path: "/datasets",
+    element: <MainLayout><DatasetsPage /></MainLayout>
+  },
+  {
+    path: "/directory",
+    element: <MainLayout><DirectoryPage /></MainLayout>
+  },
+  {
+    path: "/matchmaking",
+    element: <MainLayout><MatchmakingPage /></MainLayout>
+  },
+  {
+    path: "*",
+    element: <MainLayout><NotFoundPage /></MainLayout>
+  }
+])
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)

src/pages/DatasetsPage.jsx ADDED Viewed

	@@ -0,0 +1,201 @@

+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+const DatasetsPage = () => {
+  const [datasets, setDatasets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('All');
+  useEffect(() => {
+    // In a real app, this would fetch from an API
+    // For demo purposes, we'll use mock data
+    const mockDatasets = [
+      {
+        id: 1,
+        title: 'Cold Chain Infrastructure Map',
+        description: 'Geospatial data on refrigeration facilities across Sub-Saharan Africa. Includes location, capacity, and operational status of cold storage facilities.',
+        category: 'Infrastructure',
+        size: '2.4 GB',
+        downloads: 1240,
+        tags: ['geospatial', 'refrigeration', 'Africa', 'logistics']
+      },
+      {
+        id: 2,
+        title: 'Post-Harvest Loss Hotspots',
+        description: 'Identified areas with highest food loss rates in South Asia. Contains data on crop types, loss percentages, and contributing factors.',
+        category: 'Analytics',
+        size: '890 MB',
+        downloads: 890,
+        tags: ['analytics', 'loss assessment', 'South Asia', 'crops']
+      },
+      {
+        id: 3,
+        title: 'Processing Capacity Database',
+        description: 'List of food processing facilities with available capacity. Includes contact information, equipment types, and scheduling availability.',
+        category: 'Industry',
+        size: '1.1 GB',
+        downloads: 1560,
+        tags: ['processing', 'manufacturing', 'capacity', 'directory']
+      },
+      {
+        id: 4,
+        title: 'Food Waste Composition Analysis',
+        description: 'Detailed analysis of food waste streams in urban environments. Data covers waste composition by type, seasonal variations, and disposal methods.',
+        category: 'Waste Management',
+        size: '3.2 GB',
+        downloads: 2100,
+        tags: ['waste', 'composition', 'urban', 'analysis']
+      },
+      {
+        id: 5,
+        title: 'Agricultural Surplus Mapping',
+        description: 'Real-time mapping of agricultural surpluses available for redistribution. Updated weekly with data from farms and cooperatives.',
+        category: 'Supply Chain',
+        size: '1.7 GB',
+        downloads: 980,
+        tags: ['surplus', 'redistribution', 'mapping', 'real-time']
+      },
+      {
+        id: 6,
+        title: 'Policy Instruments Database',
+        description: 'Comprehensive database of food loss and waste reduction policies worldwide. Includes policy descriptions, implementation status, and impact assessments.',
+        category: 'Policy',
+        size: '520 MB',
+        downloads: 1650,
+        tags: ['policy', 'regulations', 'government', 'database']
+      }
+    ];
+    setTimeout(() => {
+      setDatasets(mockDatasets);
+      setLoading(false);
+    }, 500);
+  }, []);
+  const categories = ['All', ...new Set(datasets.map(dataset => dataset.category))];
+  const filteredDatasets = datasets.filter(dataset => {
+    const matchesSearch = dataset.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          dataset.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          dataset.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
+    const matchesCategory = categoryFilter === 'All' || dataset.category === categoryFilter;
+    return matchesSearch && matchesCategory;
+  });
+  if (loading) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Open Datasets</h2>
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Open Datasets</h2>
+          <div className="text-center text-red-500">
+            <p>Error loading datasets: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300 min-h-screen">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Open Datasets</h2>
+        <div className="mb-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-gray-100 dark:border-gray-700 bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-grow">
+              <input
+                type="text"
+                placeholder="Search datasets..."
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-700 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-700 dark:to-gray-800"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            <div className="w-full md:w-48">
+              <select
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-700 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-700 dark:to-gray-800"
+                value={categoryFilter}
+                onChange={(e) => setCategoryFilter(e.target.value)}
+              >
+                {categories.map(category => (
+                  <option key={category} value={category}>{category}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {filteredDatasets.map((dataset) => (
+            <div key={dataset.id} className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-lg p-6 border border-blue-100 dark:border-gray-600 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-gray-700/50 dark:to-gray-800/50">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="text-xl font-bold text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">{dataset.title}</h3>
+                <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-blue bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 rounded-full drop-shadow bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30">
+                  {dataset.category}
+                </span>
+              </div>
+              <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{dataset.description}</p>
+              <div className="flex flex-wrap gap-2 mb-4">
+                {dataset.tags.map((tag, index) => (
+                  <span key={index} className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full drop-shadow bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+              <div className="flex justify-between items-center">
+                <div className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">
+                  <span className="mr-4">Size: {dataset.size}</span>
+                  <span>{dataset.downloads} downloads</span>
+                </div>
+                <div className="flex gap-2">
+                  <button className="bg-gradient-to-r from-bio-blue to-blue-500 text-white px-4 py-2 rounded-lg hover:from-blue-500 hover:to-blue-600 transition shadow-md hover:shadow-lg drop-shadow">
+                    Download
+                  </button>
+                  <button className="border border-bio-blue text-bio-blue dark:text-blue-400 px-4 py-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/30 transition drop-shadow bg-gradient-to-r from-white to-blue-50 dark:from-gray-800 dark:to-blue-900/30">
+                    Preview
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {filteredDatasets.length === 0 && (
+          <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-2xl shadow-lg bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900">
+            <p className="text-gray-600 dark:text-gray-400 drop-shadow">No datasets found matching your criteria.</p>
+            <button
+              className="mt-4 text-bio-blue dark:text-blue-400 hover:underline drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent"
+              onClick={() => {
+                setSearchTerm('');
+                setCategoryFilter('All');
+              }}
+            >
+              Clear filters
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default DatasetsPage;

src/pages/DirectoryPage.jsx ADDED Viewed

	@@ -0,0 +1,188 @@

+import React, { useState, useEffect } from 'react';
+const DirectoryPage = () => {
+  const [organizations, setOrganizations] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sectorFilter, setSectorFilter] = useState('All');
+  useEffect(() => {
+    // In a real app, this would fetch from an API
+    // For demo purposes, we'll use mock data
+    const mockOrganizations = [
+      {
+        id: 1,
+        name: 'Global Food Rescue Initiative',
+        sector: 'NGO',
+        country: 'International',
+        description: 'Non-profit organization focused on reducing food waste through redistribution networks.',
+        expertise: ['Food Recovery', 'Logistics', 'Volunteer Management'],
+        projects: 42
+      },
+      {
+        id: 2,
+        name: 'AgriTech Solutions Ltd',
+        sector: 'Private',
+        country: 'Netherlands',
+        description: 'Technology company developing smart cold chain solutions for perishable goods.',
+        expertise: ['Cold Chain Technology', 'IoT Sensors', 'Data Analytics'],
+        projects: 18
+      },
+      {
+        id: 3,
+        name: 'Sustainable Agriculture Research Institute',
+        sector: 'Academic',
+        country: 'United States',
+        description: 'Research institution studying post-harvest loss reduction techniques.',
+        expertise: ['Research', 'Post-harvest Technology', 'Training'],
+        projects: 27
+      },
+      {
+        id: 4,
+        name: 'Ministry of Agriculture and Food Security',
+        sector: 'Government',
+        country: 'Kenya',
+        description: 'Government agency implementing national food loss reduction programs.',
+        expertise: ['Policy Development', 'Program Implementation', 'Farmer Support'],
+        projects: 15
+      },
+      {
+        id: 5,
+        name: 'Circular Economy Food Partners',
+        sector: 'NGO',
+        country: 'Germany',
+        description: 'Organization promoting circular economy approaches to food systems.',
+        expertise: ['Circular Economy', 'Composting', 'Waste Valorization'],
+        projects: 33
+      },
+      {
+        id: 6,
+        name: 'Farm to Market Logistics Co.',
+        sector: 'Private',
+        country: 'Brazil',
+        description: 'Logistics company specializing in transportation of perishable agricultural products.',
+        expertise: ['Transportation', 'Cold Chain Logistics', 'Supply Chain'],
+        projects: 29
+      }
+    ];
+    setTimeout(() => {
+      setOrganizations(mockOrganizations);
+      setLoading(false);
+    }, 500);
+  }, []);
+  const sectors = ['All', ...new Set(organizations.map(org => org.sector))];
+  const filteredOrganizations = organizations.filter(org => {
+    const matchesSearch = org.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          org.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          org.expertise.some(exp => exp.toLowerCase().includes(searchTerm.toLowerCase()));
+    const matchesSector = sectorFilter === 'All' || org.sector === sectorFilter;
+    return matchesSearch && matchesSector;
+  });
+  if (loading) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Stakeholder Directory</h2>
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Stakeholder Directory</h2>
+        <div className="mb-8 bg-white dark:bg-gray-700 rounded-2xl shadow-lg p-6 border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-grow">
+              <input
+                type="text"
+                placeholder="Search organizations..."
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            <div className="w-full md:w-48">
+              <select
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                value={sectorFilter}
+                onChange={(e) => setSectorFilter(e.target.value)}
+              >
+                {sectors.map(sector => (
+                  <option key={sector} value={sector}>{sector}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredOrganizations.map((org) => (
+            <div key={org.id} className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+              <div className="p-6">
+                <div className="flex justify-between items-start mb-4">
+                  <h3 className="text-xl font-bold text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">{org.name}</h3>
+                  <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-purple bg-purple-100 dark:bg-purple-900/30 dark:text-purple-300 rounded-full drop-shadow bg-gradient-to-r from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30">
+                    {org.sector}
+                  </span>
+                </div>
+                <div className="mb-4">
+                  <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">{org.country}</span>
+                </div>
+                <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{org.description}</p>
+                <div className="mb-4">
+                  <h4 className="font-semibold text-gray-800 dark:text-white mb-2 drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">Expertise:</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {org.expertise.map((exp, index) => (
+                      <span key={index} className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full drop-shadow bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700">
+                        {exp}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">{org.projects} projects</span>
+                  <button className="bg-gradient-to-r from-bio-purple to-purple-500 text-white px-4 py-2 rounded-lg hover:from-purple-500 hover:to-purple-600 transition shadow-md hover:shadow-lg drop-shadow">
+                    Contact
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {filteredOrganizations.length === 0 && (
+          <div className="text-center py-12 bg-white dark:bg-gray-700 rounded-2xl shadow-lg bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+            <p className="text-gray-600 dark:text-gray-400 drop-shadow">No organizations found matching your criteria.</p>
+            <button
+              className="mt-4 text-bio-purple dark:text-purple-400 hover:underline drop-shadow bg-gradient-to-r from-bio-purple to-purple-500 bg-clip-text text-transparent"
+              onClick={() => {
+                setSearchTerm('');
+                setSectorFilter('All');
+              }}
+            >
+              Clear filters
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default DirectoryPage;

src/pages/HomePage.jsx ADDED Viewed

	@@ -0,0 +1,107 @@

+import React from 'react';
+import { Link } from 'react-router-dom';
+const HomePage = () => {
+  const features = [
+    {
+      title: "News Hub",
+      description: "Discover regional policy updates and best practices in food loss reduction and bioeconomy innovation.",
+      icon: "📰",
+      link: "/news",
+      gradient: "from-bio-green to-green-500"
+    },
+    {
+      title: "Open Data",
+      description: "Access datasets on cold-chain gaps, processing capacity, and surplus hotspots to inform interventions.",
+      icon: "📊",
+      link: "/datasets",
+      gradient: "from-bio-blue to-blue-500"
+    },
+    {
+      title: "Matchmaking",
+      description: "Connect with partners, funders, and implementers to develop collaborative pilot projects.",
+      icon: "🤝",
+      link: "/matchmaking",
+      gradient: "from-bio-purple to-purple-500"
+    },
+    {
+      title: "Directory",
+      description: "Find and connect with stakeholders across the bioeconomy ecosystem.",
+      icon: "📖",
+      link: "/directory",
+      gradient: "from-bio-orange to-orange-500"
+    }
+  ];
+  return (
+    <div className="bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      {/* Enhanced hero section with more vibrant gradient */}
+      <section className="hero py-16 md:py-24 bg-gradient-to-r from-bio-green via-bio-blue to-bio-purple text-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-all duration-300">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg [-webkit-text-stroke: 0.5px_rgba(0,0,0,0.1)] bg-gradient-to-r from-yellow-300 via-green-300 to-blue-300 bg-clip-text text-transparent">
+            Connecting Stakeholders to Accelerate Bioeconomy Solutions
+          </h2>
+          <p className="text-xl md:text-2xl max-w-3xl mx-auto mb-10 drop-shadow-md font-medium bg-gradient-to-r from-green-200 via-blue-200 to-purple-200 bg-clip-text text-transparent">
+            Reducing Food Loss & Waste through data, partnerships, and pilot projects
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+            <Link
+              to="/datasets"
+              className="bg-gradient-to-r from-bio-green to-green-500 text-white font-bold py-3 px-8 rounded-full hover:from-green-500 hover:to-green-600 transition-all transform hover:scale-105 shadow-lg text-center shadow-green-500/30 hover:shadow-green-500/50"
+            >
+              Explore Datasets
+            </Link>
+            <Link
+              to="/matchmaking"
+              className="bg-gradient-to-r from-bio-purple to-purple-500 text-white font-bold py-3 px-8 rounded-full hover:from-purple-500 hover:to-purple-600 transition-all transform hover:scale-105 shadow-lg text-center shadow-purple-500/30 hover:shadow-purple-500/50"
+            >
+              Join Matchmaking
+            </Link>
+          </div>
+        </div>
+      </section>
+      {/* Enhanced features section with colorful gradients */}
+      <section className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">
+            Our Platform Features
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => (
+              <Link
+                to={feature.link}
+                key={index}
+                className={`bg-gradient-to-br ${feature.gradient} dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl shadow-xl border border-white/20 dark:border-gray-700 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 block text-white hover:from-bio-pink hover:to-bio-teal`}
+              >
+                <div className="text-5xl mb-4 drop-shadow-md">{feature.icon}</div>
+                <h3 className="text-2xl font-bold mb-3 drop-shadow bg-gradient-to-r from-yellow-300 to-white bg-clip-text text-transparent">{feature.title}</h3>
+                <p className="drop-shadow">{feature.description}</p>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+      {/* Enhanced CTA section with vibrant gradient */}
+      <section className="py-16 bg-gradient-to-r from-bio-teal via-bio-blue to-bio-purple dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-colors duration-300">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold mb-6 text-white drop-shadow-lg bg-gradient-to-r from-yellow-300 to-white bg-clip-text text-transparent">
+            Join Our Growing Network
+          </h2>
+          <p className="text-xl max-w-3xl mx-auto mb-10 text-white/90 drop-shadow-md font-medium bg-gradient-to-r from-green-200 to-blue-200 bg-clip-text text-transparent">
+            Be part of a global community working to transform agrifood systems through bioeconomy solutions.
+          </p>
+          <Link
+            to="/directory"
+            className="bg-gradient-to-r from-bio-pink to-pink-500 text-white font-bold py-3 px-8 rounded-full hover:from-pink-500 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg inline-block shadow-pink-500/30 hover:shadow-pink-500/50"
+          >
+            Explore Directory
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+};
+export default HomePage;

src/pages/MatchmakingPage.jsx ADDED Viewed

	@@ -0,0 +1,247 @@

+import React, { useState } from 'react';
+const MatchmakingPage = () => {
+  const [activeTab, setActiveTab] = useState('opportunities');
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    organization: '',
+    interest: '',
+    description: ''
+  });
+  const opportunities = [
+    {
+      id: 1,
+      title: 'Solar-Powered Cold Storage for Smallholder Farmers',
+      organization: 'Renewable Agriculture Initiative',
+      location: 'Kenya, Tanzania',
+      description: 'Seeking technology partners and investors for deployment of solar-powered cold storage units in East Africa.',
+      tags: ['Cold Chain', 'Solar Power', 'Smallholders', 'East Africa'],
+      posted: '2025-10-18'
+    },
+    {
+      id: 2,
+      title: 'Mobile Processing Unit for Fruit Preservation',
+      organization: 'Sustainable Food Systems Group',
+      location: 'India, Bangladesh',
+      description: 'Looking for equipment manufacturers and local partners to deploy mobile processing units for mango and banana preservation.',
+      tags: ['Processing', 'Mobile Units', 'Fruit Preservation', 'South Asia'],
+      posted: '2025-10-15'
+    },
+    {
+      id: 3,
+      title: 'Food Waste to Biogas Project',
+      organization: 'Circular Economy Network',
+      location: 'Brazil, Colombia',
+      description: 'Seeking technology providers and financing partners for food waste-to-biogas facilities in urban areas.',
+      tags: ['Biogas', 'Waste Valorization', 'Urban', 'South America'],
+      posted: '2025-10-12'
+    }
+  ];
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // In a real app, this would submit to an API
+    alert('Thank you for your submission! We will review your request and get back to you soon.');
+    setFormData({
+      name: '',
+      email: '',
+      organization: '',
+      interest: '',
+      description: ''
+    });
+  };
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+  return (
+    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Matchmaking Platform</h2>
+        <div className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden mb-8 border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+          <div className="border-b border-gray-200 dark:border-gray-600">
+            <nav className="flex">
+              <button
+                className={`py-4 px-6 text-center border-b-2 font-medium text-sm ${
+                  activeTab === 'opportunities'
+                    ? 'border-bio-green text-bio-green dark:text-green-400 drop-shadow bg-gradient-to-r from-bio-green to-green-500 bg-clip-text text-transparent'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                }`}
+                onClick={() => setActiveTab('opportunities')}
+              >
+                Collaboration Opportunities
+              </button>
+              <button
+                className={`py-4 px-6 text-center border-b-2 font-medium text-sm ${
+                  activeTab === 'submit'
+                    ? 'border-bio-green text-bio-green dark:text-green-400 drop-shadow bg-gradient-to-r from-bio-green to-green-500 bg-clip-text text-transparent'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                }`}
+                onClick={() => setActiveTab('submit')}
+              >
+                Submit Opportunity
+              </button>
+            </nav>
+          </div>
+          <div className="p-6">
+            {activeTab === 'opportunities' ? (
+              <div>
+                <h3 className="text-xl font-bold mb-6 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">Current Collaboration Opportunities</h3>
+                <div className="space-y-6">
+                  {opportunities.map((opportunity) => (
+                    <div key={opportunity.id} className="border border-gray-200 dark:border-gray-600 rounded-xl p-6 hover:shadow-md transition drop-shadow bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800">
+                      <div className="flex justify-between items-start mb-4">
+                        <h4 className="text-lg font-bold text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">{opportunity.title}</h4>
+                        <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">{opportunity.posted}</span>
+                      </div>
+                      <div className="mb-3">
+                        <span className="font-medium text-gray-700 dark:text-gray-300 drop-shadow">Organization:</span> {opportunity.organization}
+                      </div>
+                      <div className="mb-3">
+                        <span className="font-medium text-gray-700 dark:text-gray-300 drop-shadow">Location:</span> {opportunity.location}
+                      </div>
+                      <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{opportunity.description}</p>
+                      <div className="flex flex-wrap gap-2 mb-4">
+                        {opportunity.tags.map((tag, index) => (
+                          <span key={index} className="px-2 py-1 text-xs bg-bio-blue/10 text-bio-blue dark:bg-blue-900/30 dark:text-blue-300 rounded-full drop-shadow bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30">
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                      <button className="bg-gradient-to-r from-bio-green to-green-500 text-white px-4 py-2 rounded-lg hover:from-green-500 hover:to-green-600 transition shadow-md hover:shadow-lg drop-shadow">
+                        Express Interest
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div>
+                <h3 className="text-xl font-bold mb-6 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">Submit Collaboration Opportunity</h3>
+                <p className="text-gray-600 dark:text-gray-300 mb-6 drop-shadow">Have a project or collaboration opportunity? Submit the details below and our team will review it for inclusion in our matchmaking platform.</p>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+                      Your Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+                      Email Address
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="organization" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+                      Organization
+                    </label>
+                    <input
+                      type="text"
+                      id="organization"
+                      name="organization"
+                      value={formData.organization}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="interest" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+                      Type of Collaboration
+                    </label>
+                    <select
+                      id="interest"
+                      name="interest"
+                      value={formData.interest}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                    >
+                      <option value="">Select an option</option>
+                      <option value="funding">Funding/Investment</option>
+                      <option value="technology">Technology Partnership</option>
+                      <option value="implementation">Project Implementation</option>
+                      <option value="research">Research Collaboration</option>
+                      <option value="policy">Policy Development</option>
+                      <option value="other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+                      Opportunity Description
+                    </label>
+                    <textarea
+                      id="description"
+                      name="description"
+                      value={formData.description}
+                      onChange={handleChange}
+                      required
+                      rows={5}
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
+                      placeholder="Describe your collaboration opportunity in detail..."
+                    ></textarea>
+                  </div>
+                  <div>
+                    <button
+                      type="submit"
+                      className="w-full bg-gradient-to-r from-bio-green to-bio-blue text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition shadow-lg drop-shadow"
+                    >
+                      Submit Opportunity
+                    </button>
+                  </div>
+                </form>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="bg-gradient-to-r from-bio-purple to-bio-blue rounded-2xl p-6 text-white shadow-lg">
+          <h3 className="text-xl font-bold mb-2 drop-shadow">Need Help Finding Partners?</h3>
+          <p className="mb-4 drop-shadow">Our matchmaking team can help connect you with the right partners for your project.</p>
+          <button className="bg-white text-bio-purple font-bold px-6 py-2 rounded-lg hover:bg-purple-100 transition shadow-md drop-shadow">
+            Contact Matchmaking Team
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MatchmakingPage;

src/pages/NewsDetailPage.jsx ADDED Viewed

	@@ -0,0 +1,142 @@

+import React, { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
+const NewsDetailPage = () => {
+  const { id } = useParams();
+  const [newsItem, setNewsItem] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    // In a real app, this would fetch from an API
+    // For demo purposes, we'll use mock data
+    const mockNews = [
+      {
+        id: 1,
+        title: 'New Cold Chain Initiative Launched in Southeast Asia',
+        excerpt: 'Regional partnership aims to reduce post-harvest losses by 30% through solar-powered refrigeration.',
+        date: '2025-10-15',
+        category: 'Policy',
+        content: 'The Southeast Asian Cold Chain Initiative represents a significant step forward in addressing post-harvest losses in the region. The project, funded by a coalition of international donors, will install solar-powered refrigeration units in rural areas where access to electricity is limited. Early pilot programs have shown promising results, with participating farms reporting a 25% reduction in losses of perishable goods.\n\nThe initiative is being implemented in partnership with local governments, agricultural cooperatives, and technology providers. The first phase will target 500 farms across Thailand, Vietnam, and Indonesia, with plans to expand to additional countries in the region.\n\nAccording to Dr. Maria Santos, the project director, "This initiative addresses a critical gap in our food system. By providing reliable cold storage at the farm level, we can significantly reduce losses while improving farmer incomes and food security."'
+      },
+      {
+        id: 2,
+        title: 'Innovative Edible Coatings Show Promise in Lab Trials',
+        excerpt: 'New biodegradable coatings extend shelf life of fruits by up to 2 weeks.',
+        date: '2025-10-10',
+        category: 'Technology',
+        content: 'Scientists at the Institute for Sustainable Agriculture have developed a new type of edible coating derived from plant-based materials that can extend the shelf life of fruits and vegetables. In laboratory trials, apples treated with the coating remained fresh for up to 14 days longer than untreated controls. The coating is completely biodegradable and safe for consumption.\n\nThe coating is made from a blend of polysaccharides and proteins derived from agricultural waste, making it both sustainable and cost-effective to produce. Initial taste tests have shown no impact on the flavor or texture of treated produce.\n\n"We\'re excited about the potential of this technology to reduce food waste at the consumer level," said Dr. James Wilson, lead researcher on the project. "If we can extend the shelf life of produce by two weeks, it could have a significant impact on household food waste."'
+      },
+      {
+        id: 3,
+        title: 'Global Fund Announces $50M for FLW Reduction Projects',
+        excerpt: 'Funding opportunity for pilot projects connecting smallholders to processing facilities.',
+        date: '2025-10-05',
+        category: 'Finance',
+        content: 'The Global Food Loss Reduction Fund has announced a new call for proposals with $50 million available for innovative projects that connect smallholder farmers to processing and distribution networks. Priority will be given to projects that demonstrate measurable impact on reducing food loss while improving farmer incomes. Applications are due by December 31, 2025.\n\nThe fund is seeking projects that address food loss at multiple points in the supply chain, from harvest to retail. Preference will be given to initiatives that incorporate innovative technologies, build local capacity, and demonstrate potential for scalability.\n\n"Reducing food loss is not just about preventing waste - it\'s about creating more efficient and equitable food systems," said Fund Director Sarah Johnson. "We\'re looking for projects that can show real impact on both food security and farmer livelihoods."'
+      }
+    ];
+    const item = mockNews.find(news => news.id === parseInt(id));
+    if (item) {
+      setTimeout(() => {
+        setNewsItem(item);
+        setLoading(false);
+      }, 300);
+    } else {
+      setError('News item not found');
+      setLoading(false);
+    }
+  }, [id]);
+  if (loading) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-red-500 mb-4 drop-shadow">Error</h2>
+            <p className="text-red-500 drop-shadow">{error}</p>
+            <Link to="/news" className="mt-4 inline-block text-bio-blue dark:text-blue-400 hover:underline drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
+              ← Back to News
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+      <div className="container mx-auto px-4">
+        <Link to="/news" className="inline-block text-bio-blue dark:text-blue-400 hover:underline mb-6 drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
+          ← Back to News
+        </Link>
+        <article className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+          <div className="p-6 md:p-8">
+            <div className="flex flex-wrap items-center justify-between mb-6">
+              <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-green bg-green-100 dark:bg-green-900/30 dark:text-green-300 rounded-full drop-shadow bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30">
+                {newsItem.category}
+              </span>
+              <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">
+                {new Date(newsItem.date).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric'
+                })}
+              </span>
+            </div>
+            <h1 className="text-3xl md:text-4xl font-bold mb-6 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">
+              {newsItem.title}
+            </h1>
+            <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 italic drop-shadow bg-gradient-to-r from-gray-600 to-gray-500 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+              {newsItem.excerpt}
+            </p>
+            <div className="prose prose-lg dark:prose-invert max-w-none">
+              {newsItem.content.split('\n\n').map((paragraph, index) => (
+                <p key={index} className="mb-4 text-gray-700 dark:text-gray-300 drop-shadow">
+                  {paragraph}
+                </p>
+              ))}
+            </div>
+          </div>
+        </article>
+        <div className="max-w-4xl mx-auto mt-8">
+          <div className="bg-gradient-to-r from-bio-green to-bio-blue rounded-2xl p-6 text-white shadow-lg">
+            <h3 className="text-xl font-bold mb-2 drop-shadow">Stay Informed</h3>
+            <p className="mb-4 drop-shadow">Subscribe to our newsletter to receive updates on food loss and waste reduction initiatives.</p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <input
+                type="email"
+                placeholder="Your email address"
+                className="flex-grow px-4 py-2 rounded-lg text-gray-800 drop-shadow"
+              />
+              <button className="bg-white text-bio-green font-bold px-6 py-2 rounded-lg hover:bg-green-100 transition shadow-md drop-shadow">
+                Subscribe
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default NewsDetailPage;

src/pages/NewsPage.jsx ADDED Viewed

	@@ -0,0 +1,123 @@

+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+const NewsPage = () => {
+  const [news, setNews] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    // In a real app, this would fetch from an API
+    // For demo purposes, we'll use mock data
+    const mockNews = [
+      {
+        id: 1,
+        title: 'New Cold Chain Initiative Launched in Southeast Asia',
+        excerpt: 'Regional partnership aims to reduce post-harvest losses by 30% through solar-powered refrigeration.',
+        date: '2025-10-15',
+        category: 'Policy',
+        content: 'The Southeast Asian Cold Chain Initiative represents a significant step forward in addressing post-harvest losses in the region. The project, funded by a coalition of international donors, will install solar-powered refrigeration units in rural areas where access to electricity is limited. Early pilot programs have shown promising results, with participating farms reporting a 25% reduction in losses of perishable goods.'
+      },
+      {
+        id: 2,
+        title: 'Innovative Edible Coatings Show Promise in Lab Trials',
+        excerpt: 'New biodegradable coatings extend shelf life of fruits by up to 2 weeks.',
+        date: '2025-10-10',
+        category: 'Technology',
+        content: 'Scientists at the Institute for Sustainable Agriculture have developed a new type of edible coating derived from plant-based materials that can extend the shelf life of fruits and vegetables. In laboratory trials, apples treated with the coating remained fresh for up to 14 days longer than untreated controls. The coating is completely biodegradable and safe for consumption.'
+      },
+      {
+        id: 3,
+        title: 'Global Fund Announces $50M for FLW Reduction Projects',
+        excerpt: 'Funding opportunity for pilot projects connecting smallholders to processing facilities.',
+        date: '2025-10-05',
+        category: 'Finance',
+        content: 'The Global Food Loss Reduction Fund has announced a new call for proposals with $50 million available for innovative projects that connect smallholder farmers to processing and distribution networks. Priority will be given to projects that demonstrate measurable impact on reducing food loss while improving farmer incomes. Applications are due by December 31, 2025.'
+      },
+      {
+        id: 4,
+        title: 'Mobile Processing Units Deployed in Rural Africa',
+        excerpt: 'New program brings food processing capabilities directly to farming communities.',
+        date: '2025-09-28',
+        category: 'Implementation',
+        content: 'A new program launched by the African Agricultural Development Initiative is deploying mobile processing units to rural farming communities. These units can process fruits, vegetables, and grains on-site, reducing the need for long transportation to centralized facilities. Early results show a 40% reduction in post-harvest losses in participating communities.'
+      },
+      {
+        id: 5,
+        title: 'Blockchain Technology Enhances Supply Chain Transparency',
+        excerpt: 'New platform tracks food from farm to consumer, reducing waste through better coordination.',
+        date: '2025-09-20',
+        category: 'Technology',
+        content: 'A consortium of technology companies and agricultural organizations has launched a blockchain-based platform that tracks food products from farm to consumer. The system provides real-time visibility into inventory levels, expiration dates, and distribution routes, enabling better coordination and reducing waste throughout the supply chain.'
+      },
+      {
+        id: 6,
+        title: 'Community Composting Programs Expand Globally',
+        excerpt: 'Cities adopt innovative approaches to turn food waste into valuable resources.',
+        date: '2025-09-15',
+        category: 'Circular Economy',
+        content: 'Cities around the world are implementing innovative community composting programs that turn food waste into valuable soil amendments. These programs not only reduce waste sent to landfills but also provide local communities with a source of high-quality compost for urban agriculture and gardening.'
+      }
+    ];
+    setTimeout(() => {
+      setNews(mockNews);
+      setLoading(false);
+    }, 500);
+  }, []);
+  if (loading) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">News & Updates</h2>
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">News & Updates</h2>
+          <div className="text-center text-red-500">
+            <p>Error loading news: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">News & Updates</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {news.map((item) => (
+            <div key={item.id} className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
+              <div className="p-6">
+                <div className="flex justify-between items-start mb-4">
+                  <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-green bg-green-100 dark:bg-green-900/30 dark:text-green-300 rounded-full drop-shadow bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30">
+                    {item.category}
+                  </span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">{new Date(item.date).toLocaleDateString()}</span>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">{item.title}</h3>
+                <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{item.excerpt}</p>
+                <Link to={`/news/${item.id}`} className="text-bio-blue dark:text-blue-400 font-medium hover:text-blue-700 dark:hover:text-blue-300 transition drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
+                  Read More →
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default NewsPage;

src/pages/NotFoundPage.jsx ADDED Viewed

	@@ -0,0 +1,32 @@

+import React from 'react';
+import { Link } from 'react-router-dom';
+const NotFoundPage = () => {
+  return (
+    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen flex items-center">
+      <div className="container mx-auto px-4 text-center">
+        <h1 className="text-6xl font-bold text-bio-green dark:text-green-400 mb-4 drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">404</h1>
+        <h2 className="text-3xl font-bold text-gray-800 dark:text-white mb-6 drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">Page Not Found</h2>
+        <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto drop-shadow bg-gradient-to-r from-gray-600 to-gray-500 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
+          Sorry, the page you're looking for doesn't exist or has been moved.
+        </p>
+        <div className="flex flex-col sm:flex-row justify-center gap-4">
+          <Link
+            to="/"
+            className="bg-gradient-to-r from-bio-green to-green-500 text-white font-bold py-3 px-8 rounded-lg hover:from-green-500 hover:to-green-600 transition shadow-lg text-center drop-shadow"
+          >
+            Go Home
+          </Link>
+          <Link
+            to="/directory"
+            className="bg-gradient-to-r from-bio-purple to-purple-500 text-white font-bold py-3 px-8 rounded-lg hover:from-purple-500 hover:to-purple-600 transition shadow-lg text-center drop-shadow"
+          >
+            Browse Directory
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default NotFoundPage;

src/utils/theme.js ADDED Viewed

	@@ -0,0 +1,24 @@

+export const applyTheme = (theme) => {
+  const root = document.documentElement;
+  if (theme === 'dark') {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+  // Save to localStorage
+  localStorage.setItem('theme', theme);
+};
+export const getInitialTheme = () => {
+  const savedTheme = localStorage.getItem('theme');
+  const prefersDark = window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (savedTheme) {
+    return savedTheme;
+  }
+  return prefersDark ? 'dark' : 'light';
+};

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,20 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class', // Enable class-based dark mode
+  theme: {
+    extend: {
+      colors: {
+        'bio-green': '#16a34a',
+        'bio-blue': '#2563eb',
+        'bio-purple': '#9333ea',
+        'bio-orange': '#ea580c',
+        'bio-yellow': '#ca8a04',
+      }
+    },
+  },
+  plugins: [],
+}

vite.config.js ADDED Viewed

	@@ -0,0 +1,22 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+        }
+      }
+    }
+  }
+})