openMF · abhinav-1305 · Jun 22, 2025 · Jun 22, 2025 · Jun 22, 2025
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/gazelle.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Mifos Product Demo</title>
   </head>
   <body>
     <div id="root"></div>

@@ -17,6 +17,7 @@
     "lucide-react": "^0.522.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.10"
   },

@@ -1,54 +1,13 @@
-import { ProductCard } from "./components/Cards/product-card";
-import { products } from "./data/productCardData";
 
-const App = () => {
+import { BrowserRouter } from "react-router-dom";
 
+import { AppRoutes } from "./routes/AppRoutes";
+const App = () => {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
-      <div className="pt-16 pb-16 px-6">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="inline-flex items-center bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-4 py-2 rounded-full text-sm font-medium mb-8">
-            <span className="w-2 h-2 bg-blue-400 dark:bg-blue-500 rounded-full mr-2"></span>
-            Product Demo Platform
-          </div>
-
-          <h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
-            Welcome to the Mifos
-            <br />
-            <span className="bg-gradient-to-r from-blue-600 to-blue-500 dark:from-blue-400 dark:to-blue-300 bg-clip-text text-transparent">
-              Product Demo Explorer
-            </span>
-            <div className="flex justify-center mt-0.5">
-              <svg height="16" width="180" viewBox="0 0 180 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M2 8 Q 30 16, 60 8 T 120 8 T 178 8" stroke="#60a5fa" strokeWidth="3" fill="none" opacity="0.5" strokeLinecap="round"/>
-              </svg>
-            </div>
-          </h1>
-
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed font-light">
-            Experience interactive demonstrations of our products — MifosX, Phee, and VNext. 
-            Explore comprehensive step-by-step guides designed to showcase the full potential of our financial technology solutions.
-          </p>
-        </div>
-      </div>
-
-      <div className="pb-24 px-6 pt-10">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 justify-items-center">
-            {products.map((product, index) => (
-              <ProductCard
-                key={index}
-                title={product.title}
-                description={product.description}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-
-
-    </div>
+    <BrowserRouter>
+      <AppRoutes/>
+    </BrowserRouter>
   );
 };
 
-export default App;
+export default App;
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button } from '../ui/button';
+import { useNavigate } from 'react-router-dom';
 
 interface ProductCardProps {
   title: string;
@@ -12,10 +13,16 @@ interface ProductCardProps {
 export const ProductCard: React.FC<ProductCardProps> = ({ 
   title = "MifosX",
   description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
-  onDemoClick = () => console.log('Demo clicked')
+
 }) => {
+  const navigate = useNavigate();
+
+  const handleDemoButtonClick = ()=>{
+    navigate(`/demos/${title.toLowerCase()}`);
+  }
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden w-80 border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:shadow-blue-200 dark:hover:shadow-blue-900/30 hover:-translate-y-0.15">
+    <div className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden w-80 border border-gray-200
+     dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:shadow-blue-200 dark:hover:shadow-blue-900/30 hover:-translate-y-0.15">
       <div className="bg-blue-50 dark:bg-blue-900/30 px-6 py-4">
         <div className="flex items-center">
           <div className="w-8 h-8 bg-blue-200 dark:bg-blue-800 rounded-lg flex items-center justify-center mr-3">
@@ -35,7 +42,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
               <div className="absolute -left-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
               <div className="absolute -right-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
-              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-blue-50 dark:bg-blue-900/30 rounded-full"></div>
+              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-blue-50
+               dark:bg-blue-900/30 rounded-full"></div>
             </div>
           </div>
 
@@ -54,8 +62,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
         <div className="flex justify-end">
           <Button 
-            onClick={onDemoClick}
             className="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm px-6 py-2.5 rounded-full font-medium transition-colors duration-200 shadow-sm hover:shadow-md cursor-pointer"
+            onClick={handleDemoButtonClick}
           >
             Demo
           </Button>

@@ -0,0 +1,20 @@
+export const Footer = () => {
+    return(
+      <div className="bg-white dark:bg-gray-900 py-12 px-6 border-t border-gray-200 dark:border-white">
+      <div className="max-w-7xl mx-auto text-center">
+        <p className="text-gray-500 dark:text-gray-400 text-sm mb-8">
+          Discover the power of open-source financial technology solutions
+        </p>
+        <div className="flex justify-center">
+          <img
+            src="/gazelle.svg"
+            alt="Mifos Logo"
+            width={80}
+            height={80}
+            className="opacity-80 dark:opacity-90"
+          />
+        </div>
+      </div>
+    </div>
+    )
+}
@@ -2,7 +2,8 @@ import { Home } from "lucide-react";
 
 export const SideNav = () => {
   return (
-    <div className="h-screen w-14 bg-white dark:bg-gray-900 flex flex-col items-center border-r-2 border-gray-200 dark:border-gray-700">
+    <div className="h-screen w-14 bg-white dark:bg-gray-900 flex flex-col items-center border-r-2 border-gray-200 
+    dark:border-gray-700">
       <div className="logo h-14 w-full flex items-center justify-center border-b-2 border-gray-200 dark:border-gray-700">
         <div className="p-1 rounded-full">
           <img

@@ -5,35 +5,23 @@ import App from "./App.tsx";
 import { SideNav } from "./components/Navigation/SideNav.tsx";
 import { TopNav } from "./components/Navigation/TopNav.tsx";
 import { ThemeProvider } from "./context/ThemeContext";
+import { Footer } from "./components/Footer/footer.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeProvider>
-      <div className="h-screen w-screen overflow-hidden bg-[#1579EB] dark:bg-gray-900">
+      <div className="h-screen w-screen overflow-hidden dark:bg-gray-900">
         <div className="fixed top-0 left-14 right-0 h-14 bg-[#1579EB] z-10">
           <TopNav title="Mifos Product Demo" />
         </div>
         <div className="fixed top-0 left-0 w-14 h-screen bg-white dark:bg-gray-900 z-10">
           <SideNav />
         </div>
-        <div className="ml-14 mt-14 h-[calc(100vh-3.5rem)] overflow-auto">
-          <App />
-          <div className="bg-white dark:bg-gray-900 py-12 px-6 border-t border-gray-200 dark:border-white">
-            <div className="max-w-7xl mx-auto text-center">
-              <p className="text-gray-500 dark:text-gray-400 text-sm mb-8">
-                Discover the power of open-source financial technology solutions
-              </p>
-              <div className="flex justify-center">
-                <img
-                  src="/gazelle.svg"
-                  alt="Mifos Logo"
-                  width={80}
-                  height={80}
-                  className="opacity-80 dark:opacity-90"
-                />
-              </div>
-            </div>
+        <div className="ml-14 mt-14 h-[calc(100vh-3.5rem)] overflow-auto flex flex-col">
+          <div className="flex-grow">
+            <App />
           </div>
+          <Footer />
         </div>
       </div>
     </ThemeProvider>

@@ -0,0 +1,56 @@
+import { ProductCard } from "@/components/Cards/product-card"
+import { products } from "@/data/productCardData";
+
+
+export const Home = () => {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900
+      dark:via-gray-900 dark:to-gray-800">
+       <div className="pt-16 pb-16 px-6">
+         <div className="max-w-7xl mx-auto text-center">
+           <div className="inline-flex items-center bg-blue-50 dark:bg-blue-900/30 text-blue-700
+            dark:text-blue-300 px-4 py-2 rounded-full text-sm font-medium mb-8">
+             <span className="w-2 h-2 bg-blue-400 dark:bg-blue-500 rounded-full mr-2"></span>
+             Product Demo Platform
+           </div>
+
+           <h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
+             Welcome to the Mifos
+             <br />
+             <span className="bg-gradient-to-r from-blue-600 to-blue-500 dark:from-blue-400 dark:to-blue-300 
+             bg-clip-text text-transparent">
+               Product Demo Explorer
+             </span>
+             <div className="flex justify-center mt-0.5">
+               <svg height="16" width="180" viewBox="0 0 180 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                 <path d="M2 8 Q 30 16, 60 8 T 120 8 T 178 8" stroke="#60a5fa" strokeWidth="3" fill="none" opacity="0.5"
+                  strokeLinecap="round"/>
+               </svg>
+             </div>
+           </h1>
+
+           <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed font-light">
+             Experience interactive demonstrations of our products — MifosX, Phee, and VNext. 
+             Explore comprehensive step-by-step guides designed to showcase the full potential of our financial technology solutions.
+           </p>
+         </div>
+       </div>
+
+       <div className="pb-24 px-6 pt-10">
+         <div className="max-w-7xl mx-auto">
+           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 justify-items-center">
+             {products.map((product, index) => (
+               <ProductCard
+                 key={index}
+                 title={product.title}
+                 description={product.description}
+               />
+             ))}
+           </div>
+         </div>
+       </div>
+
+
+     </div>
+    )
+}
@@ -0,0 +1,20 @@
+import { lazy, Suspense } from "react";
+import { useParams } from "react-router-dom";
+
+const demoComponentMap: Record<string, React.LazyExoticComponent<React.FC>> = {
+  mifosx: lazy(() => import("./mifosx")),
+  // phee: lazy(() => import("./phee")),
+  // vnext: lazy(() => import("./vnext")),
+};
+
+export const DemoList = () => {
+  const { product } = useParams();
+
+  const Component = product ? demoComponentMap[product] : null;
+
+  return (
+    <Suspense fallback={<div className="p-6 text-center">Loading demo...</div>}>
+      {Component ? <Component /> : <div className="p-6 text-center text-red-500">Invalid demo: {product}</div>}
+    </Suspense>
+  );
+};
@@ -0,0 +1,7 @@
+export default function MifosxDemos() {
+    return (
+        <div className="p-6 text-center">
+            <h1>MifosX Demo</h1>
+        </div>
+    )
+}
@@ -0,0 +1,12 @@
+import { DemoList } from "@/pages/demo/DemoList"
+import { Home } from "@/pages/Home"
+import { Route, Routes } from "react-router-dom"
+
+export const AppRoutes = ()=>{
+    return(
+    <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/demos/:product" element={<DemoList/>}/>
+    </Routes>
+    )
+}