upd patterns

Author: alexy-os

index.html

@@ -282,11 +282,15 @@ <h3 class="text-xs font-semibold text-slate-600 dark:text-slate-400">Layout Patt
               </div>
 
               <div class="pattern-item bg-white p-3 rounded border border-slate-200 dark:bg-slate-800 dark:border-slate-700" data-pattern="columns">
-                <div class="aspect-[2/1] bg-slate-100 dark:bg-slate-700 rounded flex items-center justify-center gap-2">
-                  <div class="w-1/3 h-1/2 bg-blue-500/20 border-2 border-dashed border-blue-500 rounded"></div>
-                  <div class="w-1/3 h-1/2 bg-blue-500/20 border-2 border-dashed border-blue-500 rounded"></div>
+                <div class="aspect-[2/1] bg-slate-100 dark:bg-slate-700 rounded flex flex-col gap-2 p-2">
+                  <div class="w-full h-1/2 bg-blue-500/20 border-2 border-dashed border-blue-500 rounded"></div>
+                  <div class="flex gap-2 h-1/2">
+                    <div class="w-1/3 h-full bg-blue-500/20 border-2 border-dashed border-blue-500 rounded"></div>
+                    <div class="w-1/3 h-full bg-blue-500/20 border-2 border-dashed border-blue-500 rounded"></div>
+                    <div class="w-1/3 h-full bg-blue-500/20 border-2 border-dashed border-blue-500 rounded"></div>
+                  </div>
                 </div>
-                <div class="mt-2 text-xs text-slate-600 dark:text-slate-400">Two Columns</div>
+                <div class="mt-2 text-xs text-slate-600 dark:text-slate-400">Features Layout</div>
               </div>
             </div>
           </div>

src/pattern-manager.js

@@ -51,22 +51,34 @@ export class PatternManager {
         template: `
 <section class="w-full py-16 lg:py-32">
   <div class="container mx-auto px-4 md:px-6 lg:px-8">
-    <div class="grid grid-cols-1 gap-8 items-center lg:grid-cols-2">
-      <div data-canvas="col1" class="aspect-video relative border-2 border-dashed border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-lg">
-        <div class="absolute inset-0 grid grid-cols-6 gap-4 pointer-events-none">
-          ${Array(6).fill('<div class="grid-guides h-full bg-slate-100 dark:bg-slate-900/20"></div>').join('')}
+    <div class="flex flex-col gap-10">
+      <div data-canvas="main" class="w-full min-h-[12rem] relative border-2 border-dashed border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-lg">
+        <div class="absolute inset-0 grid grid-cols-12 gap-4 pointer-events-none">
+          ${Array(12).fill('<div class="grid-guides h-full bg-slate-100 dark:bg-slate-900/20"></div>').join('')}
         </div>
       </div>
-      <div data-canvas="col2" class="aspect-video relative border-2 border-dashed border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-lg">
-        <div class="absolute inset-0 grid grid-cols-6 gap-4 pointer-events-none">
-          ${Array(6).fill('<div class="grid-guides h-full bg-slate-100 dark:bg-slate-900/20"></div>').join('')}
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div data-canvas="col1" class="aspect-square relative border-2 border-dashed border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-lg">
+          <div class="absolute inset-0 grid grid-cols-6 gap-4 pointer-events-none">
+            ${Array(6).fill('<div class="grid-guides h-full bg-slate-100 dark:bg-slate-900/20"></div>').join('')}
+          </div>
+        </div>
+        <div data-canvas="col2" class="aspect-square relative border-2 border-dashed border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-lg">
+          <div class="absolute inset-0 grid grid-cols-6 gap-4 pointer-events-none">
+            ${Array(6).fill('<div class="grid-guides h-full bg-slate-100 dark:bg-slate-900/20"></div>').join('')}
+          </div>
+        </div>
+        <div data-canvas="col3" class="aspect-square relative border-2 border-dashed border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-lg">
+          <div class="absolute inset-0 grid grid-cols-6 gap-4 pointer-events-none">
+            ${Array(6).fill('<div class="grid-guides h-full bg-slate-100 dark:bg-slate-900/20"></div>').join('')}
+          </div>
         </div>
       </div>
     </div>
   </div>
 </section>
         `,
-        canvases: ['col1', 'col2']
+        canvases: ['main', 'col1', 'col2', 'col3']
       }
     };