docs: update adminforthLandingPage

Author: yaroslav8765

adminforth/documentation/src/css/custom.css

@@ -207,8 +207,8 @@ pre code:has(.code-block-diff-remove-line) {
 .laptop .theme_switcher {
   position: absolute;
   cursor: pointer;
-  top: 2.56vw;
-  right: 5.28vw;
+  top: 2.84vw;
+  right: 5.98vw;
   width: 2vw;
   height: 2vw;
   font-size: 1.5vw;

adminforth/documentation/src/pages/index.module.css

@@ -32,3 +32,22 @@
 }
 
 
+.card-demo {
+  max-width: 500px;
+}
+
+.cardsWrapper {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(300px, 500px));
+  gap: 4rem;
+  justify-content: center;
+  padding: 1rem;
+
+  @media (max-width: 1200px) {
+    grid-template-columns: repeat(2, minmax(300px, 500px));
+  }
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(1, minmax(300px, 500px));
+  }
+
+}

adminforth/documentation/src/pages/index.tsx

@@ -44,7 +44,7 @@ const images = [
     original: require('@site/static/img/previews/2fa_plugin.png').default,
     title: '2FA Plugin - secure your admin panel',
     link: '/docs/tutorial/Plugins/TwoFactorsAuth/',
-    description: 'RFC 6238-Compliant TOTP-Based 2FA will add additional security layer to your admin panel'
+    description: 'RFC 6238-Compliant TOTP-Based 2FA will add additional security layer to your admin panel. Also supports passkeys'
   },
   {
     original: require('@site/static/img/previews/dark.png').default,
@@ -105,7 +105,13 @@ const images = [
     title: 'AI Translation Plugin - translate your admin and External apps',
     link: '/docs/tutorial/Plugins/i18n/',
     description: 'Use LLMs to translate any external apps (Mobile, Nuxt, etc.) OR/AND admin panel with minimal effort. Any language supported'
-  }
+  },
+  {
+    original: require('@site/static/img/previews/bulk-ai-flow.png').default,
+    title: 'Bulk AI Plugin - generate data for your resources',
+    link: '/docs/tutorial/Plugins/bulk-ai-flow/',
+    description: 'Use LLMs to fill records with generated data or images. For example, generate product descriptions based on product name and image or generate products images'
+  },
 ];
 
 
@@ -201,13 +207,7 @@ export default function Home(): JSX.Element {
         What it can do for you
       </Heading>
 
-        <div style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '4rem',
-          justifyContent: 'center',
-          padding: '1rem',
-        }}>
+        <div className={styles.cardsWrapper}>
           {images.map((item, index) => (
             <div className="card-demo" key={`feature${index}`}>
               <div className="card shadow--md" style={{