1// Spatial Design skill demos
 2export default {
 3  id: 'spatial-design',
 4  tabs: [
 5    {
 6      id: 'grid',
 7      label: 'Grid Systems',
 8      caption: 'Chaotic placement vs intentional grid alignment',
 9      before: `
10        <div class="spatial-demo spatial-grid-before">
11          <div class="spatial-card-item" style="width: 45%;">Card One</div>
12          <div class="spatial-card-item" style="width: 30%;">Card Two</div>
13          <div class="spatial-card-item" style="width: 55%;">Card Three</div>
14          <div class="spatial-card-item" style="width: 25%;">Card Four</div>
15        </div>
16      `,
17      after: `
18        <div class="spatial-demo spatial-grid-after">
19          <div class="spatial-card-item">Card One</div>
20          <div class="spatial-card-item">Card Two</div>
21          <div class="spatial-card-item">Card Three</div>
22          <div class="spatial-card-item">Card Four</div>
23        </div>
24      `
25    },
26    {
27      id: 'hierarchy',
28      label: 'Visual Weight',
29      caption: 'Equal weight vs clear visual priority',
30      beforeClass: 'spatial-demo spatial-hierarchy-before',
31      afterClass: 'spatial-demo spatial-hierarchy-after',
32      before: `
33        <div class="spatial-demo spatial-hierarchy-before">
34          <div class="spatial-h-title">Welcome Back</div>
35          <div class="spatial-h-subtitle">Dashboard</div>
36          <div class="spatial-h-cta">View Reports</div>
37          <div class="spatial-h-link">Settings</div>
38        </div>
39      `,
40      after: null // Uses CSS class toggle
41    },
42    {
43      id: 'whitespace',
44      label: 'Breathing Room',
45      caption: 'Cramped elements vs comfortable spacing',
46      beforeClass: 'spatial-demo spatial-whitespace-before',
47      afterClass: 'spatial-demo spatial-whitespace-after',
48      before: `
49        <div class="spatial-demo spatial-whitespace-before">
50          <div class="spatial-ws-title">Premium Plan</div>
51          <div class="spatial-ws-price">$29/mo</div>
52          <div class="spatial-ws-features">Unlimited projects • Priority support • Advanced analytics</div>
53          <button class="spatial-ws-btn">Upgrade Now</button>
54        </div>
55      `,
56      after: null // Uses CSS class toggle
57    }
58  ]
59};
60
61
62