Merge pull request #62 from pranav-deshmukh/dev

Refactored the demo loading logic to reduce redundancy and simplify component structure.

Author: DavidH-1

src/pages/Home.tsx

@@ -15,15 +15,12 @@ export const Home = () => {
                             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
+                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
-                </span>{' '}
                 <span className="relative inline-block text-blue-600 dark:text-blue-300">
                   Demo
                   <div className="absolute left-0 right-0 -bottom-2 flex justify-center">
@@ -54,10 +51,10 @@ export const Home = () => {
               </h1>
 
               <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl leading-relaxed font-light mb-8 mx-auto lg:mx-0">
-                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.
+                Experience interactive demonstrations of our products and
+                platform. Explore comprehensive step-by-step guides designed to
+                showcase the full potential of our financial technology
+                solutions.
               </p>
 
               <a

src/pages/demo-list/DemoList.tsx

@@ -1,26 +1,18 @@
-import { lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
 
-const demoComponentMap: Record<string, React.LazyExoticComponent<React.FC>> = {
-  mifosx: lazy(() => import('./mifosx')),
-  phee: lazy(() => import('./phee')),
-  vnext: lazy(() => import('./vnext')),
-  platform_demos: lazy(() => import('./platform-demos')),
-};
+const PlatformDemos = lazy(() => import('./platform-demos'));
+const ProductDemos = lazy(() => import('./product-demos'));
 
 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 />
+      {product === 'platform_demos' ? (
+        <PlatformDemos />
       ) : (
-        <div className="p-6 text-center text-red-500">
-          Invalid demo: {product}
-        </div>
+        <ProductDemos product={product as 'mifosx' | 'phee' | 'vnext'} />
       )}
     </Suspense>
   );

src/pages/demo-list/phee.tsx

@@ -31,7 +31,11 @@ interface DemoData {
 
 const columnHelper = createColumnHelper<DemoData>();
 
-export default function MifosXDemos() {
+type ProductDemosProps = {
+  product: 'mifosx' | 'phee' | 'vnext';
+};
+
+export default function ProductDemos({ product }: ProductDemosProps) {
   const navigate = useNavigate();
   const NavigateToDemo = (id: string, demoName: string) => {
     const demoSlug = slugify(demoName, { lower: true });
@@ -110,12 +114,13 @@ export default function MifosXDemos() {
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-12">
           <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-            MifosX Demo Center
+            {product.toUpperCase()} Demo Center
           </h1>
           <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Explore guided walkthroughs of key flows in the MifosX application.
-            Each demo provides an interactive experience to help you understand
-            our platform's capabilities.
+            Explore guided walkthroughs of key flows in the{' '}
+            {product.toUpperCase()} application. Each demo provides an
+            interactive experience to help you understand our platform's
+            capabilities.
           </p>
         </div>