juxscript 1.0.113 → 1.0.115

package/create/index.jux

@@ -7,41 +7,44 @@ LandingLayout();
 // 2. Header: Logo & Nav
 Element('logo', { tag: 'h2' })
     .text('JUX STUDIO')
-    .style('margin: 0; padding: 25px 40px; font-weight: 800; letter-spacing: -1px; display: flex; align-items: center; height: 100%; box-sizing: border-box;')
+    .className('jux-typo-brand')
     .render('landing-layout-0-0');
 
 // 3. Hero Section
 const hero = Element('hero-content', { tag: 'div' })
-    .style('display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; background: #f8f9fa;')
+    .className('jux-section-center')
     .render('landing-layout-1-0');
 
 Element('hero-h1', { tag: 'h1' })
     .text('Build Web Apps. Simply.')
-    .style('font-size: 4rem; margin: 0 0 20px 0; font-weight: 900; background: linear-gradient(45deg, #111, #555); -webkit-background-clip: text; -webkit-text-fill-color: transparent;')
+    .className('jux-typo-display')
     .render('hero-content');
 
 Element('hero-p', { tag: 'p' })
     .text('No complex build steps. No magic. Just standard JavaScript components.')
-    .style('font-size: 1.5rem; color: #666; max-width: 600px; line-height: 1.5;')
+    .className('jux-typo-lead')
     .render('hero-content');
 
 Element('cta-btn', { tag: 'button' })
     .text('Get Started')
-    .style('margin-top: 30px; padding: 15px 40px; font-size: 1.2rem; background: #000; color: #fff; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s;')
+    .className('jux-btn-primary')
     .render('hero-content');
 
 // 4. Features Section (Nested Content)
 const featuresWrapper = Element('features-wrapper', { tag: 'div' })
-    .style('max-width: 1000px; margin: 60px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 0 20px;')
+    .className('jux-grid-responsive')
     .render('landing-layout-2-0');
 
 // Component Showcase within Landing Page
 const listDemo = Element('list-demo-card', { tag: 'div' })
-    .style('background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;')
+    .className('jux-card')
     .render('features-wrapper');
 
 Element('list-label', { tag: 'h3' }).text('Interactive Components').render('list-demo-card');
-Element('list-desc', { tag: 'p' }).text('Try dragging or sorting this list:').style('color:#666; margin-bottom:20px;').render('list-demo-card');
+Element('list-desc', { tag: 'p' })
+    .text('Try dragging or sorting this list:')
+    .style('color: var(--color-text-secondary); margin-bottom: 20px;')
+    .render('list-demo-card');
 
 List('feature-list', { items: ['Zero Config', 'Standard Web APIs', 'Hot Reloading', 'TypeScript Ready'] })
     .listType('unordered')
@@ -57,15 +60,18 @@ const cardData = [
 
 cardData.forEach((f, i) => {
     const card = Element(`card-${i}`, { tag: 'div' })
-        .style('background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;')
+        .className('jux-card')
         .render('features-wrapper');
 
     Element(`ct-${i}`, { tag: 'h3' }).text(f.title).render(`card-${i}`);
-    Element(`cd-${i}`, { tag: 'p' }).text(f.desc).style('color: #666; line-height: 1.6;').render(`card-${i}`);
+    Element(`cd-${i}`, { tag: 'p' })
+        .text(f.desc)
+        .style('color: var(--color-text-secondary); line-height: var(--line-height-normal);')
+        .render(`card-${i}`);
 });
 
 // 5. Footer
 const footer = Element('footer-content', { tag: 'div' })
     .html('© 2025 Jux Project. Open Source.')
-    .style('display:flex; align-items:center; justify-content:center; height:100%; background:#111; color:#666;')
+    .className('jux-layout-footer')
     .render('landing-layout-3-0');