fezcode
diff --git a/‎package-lock.json‎
Lines changed: 50 additions & 0 deletions b/‎package-lock.json‎
Lines changed: 50 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 1 addition & 0 deletions b/‎package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎public/apps/apps.json‎
Lines changed: 8 additions & 0 deletions b/‎public/apps/apps.json‎
Lines changed: 8 additions & 0 deletions
diff --git a/‎src/components/AnimatedRoutes.js‎
Lines changed: 17 additions & 0 deletions b/‎src/components/AnimatedRoutes.js‎
Lines changed: 17 additions & 0 deletions
@@ -13,6 +13,7 @@
     "diff-match-patch": "^1.0.5",
     "framer-motion": "^11.0.24",
     "front-matter": "^4.0.2",
+    "html2canvas": "^1.4.1",
     "marked": "^16.4.1",
     "piml": "^1.1.1",
     "qrcode.react": "^4.2.0",
 
@@ -454,6 +454,14 @@
         "description": "Generate CRON expressions visually and convert human-readable text to CRON.",
         "icon": "ClockIcon",
         "created_at": "2025-11-18T03:40:32+03:00"
+      },
+      {
+        "slug": "og-image-generator",
+        "to": "/apps/og-image-generator",
+        "title": "OG Image Generator",
+        "description": "Generate open graph images for your posts with generative art.",
+        "icon": "ImageSquareIcon",
+        "created_at": "2025-12-22T12:00:00+03:00"
       }
     ]
   },
 
@@ -143,6 +143,7 @@ const AtmosphereMixerPage = lazy(() => import('../pages/apps/AtmosphereMixerPage
 const TaskGridPage = lazy(() => import('../pages/apps/TaskGridPage'));
 const BlendLabPage = lazy(() => import('../pages/apps/BlendLabPage'));
 const AssetStudioPage = lazy(() => import('../pages/apps/AssetStudioPage'));
+const OgImageGeneratorPage = lazy(() => import('../pages/apps/OgImageGeneratorPage'));
 const PosterLoomPage = lazy(() => import('../pages/apps/PosterLoomPage'));
 const SymbolFlowPage = lazy(() => import('../pages/apps/SymbolFlowPage'));
 const RoadmapViewerPage = lazy(() => import('../pages/roadmap/FezzillaPage'));
@@ -1817,6 +1818,22 @@ const AnimatedRoutes = ({
             </motion.div>
           }
         />
+        <Route
+          path="/apps/og-image-generator"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <OgImageGeneratorPage />
+              </Suspense>
+            </motion.div>
+          }
+        />
         <Route
           path="/apps/poster-loom"
           element={