feat: update accordion layout to 2:1 column ratio

- Change grid from 2 columns to 3 columns (lg:grid-cols-3)
- Left column (description + code) now spans 2 columns (lg:col-span-2) = 2/3 width
- Right column (live preview) spans 1 column (lg:col-span-1) = 1/3 width
- Maintains responsive design with single column on mobile
- Better space allocation for content-heavy left side vs visual preview

This gives more space to the description and code content while keeping
the live preview frame appropriately sized for the mobile frame display.

Author: mmaxence

src/components/ui/LivePreview.tsx

@@ -17,8 +17,8 @@ const LivePreview = ({ title, children, className = '' }: LivePreviewProps) => {
       </h5>
       <div className="flex justify-center">
         {/* Mobile Frame with 9:16 ratio (vertical phone) */}
-        <div className="w-[200px] bg-black rounded-[1.5rem] p-1 shadow-2xl">
-          <div className="bg-muted/20 rounded-[1.25rem] h-[400px] flex items-center justify-center" style={{ aspectRatio: '9/16' }}>
+        <div className="bg-black rounded-[1.5rem] p-1 shadow-2xl">
+          <div className="rounded-[1.25rem] h-[400px] flex items-center justify-center" style={{ aspectRatio: '9/18' }}>
             {children ? (
               <div className="w-full h-full flex items-center justify-center">
                 {children}

src/components/ui/PatternAccordion.tsx

@@ -66,9 +66,9 @@ const PatternAccordion = ({ patterns, className = '' }: PatternAccordionProps) =
                 className="overflow-hidden"
               >
                 <div className="px-4 pb-4">
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                     {/* Left Column - Description, Tags, and Code */}
-                    <div className="space-y-4">
+                    <div className="space-y-4 lg:col-span-2">
                       {/* Description */}
                       <div className="space-y-3">
                         <h5 className="text-sm font-medium text-white">
@@ -101,7 +101,9 @@ const PatternAccordion = ({ patterns, className = '' }: PatternAccordionProps) =
                     </div>
 
                     {/* Right Column - Live Preview */}
-                    <LivePreview title={pattern.title} />
+                    <div className="lg:col-span-1">
+                      <LivePreview title={pattern.title} />
+                    </div>
                   </div>
                 </div>
               </motion.div>