Add Electron release flow and intro website download updates

Author: SM Engine Builder

.gitignore

@@ -0,0 +1,22 @@
+# Node modules and build output (not sent to GitHub)
+node_modules/
+dist/
+dist-*/
+package-lock.json
+
+# Trash and logs
+trash-files/
+*.log
+.DS_Store
+
+# IDE
+.vscode/local/
+.vscode/settings.json
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env
+.env.local

SM-Engine-intro-website/DESIGN_UPDATES.md

@@ -0,0 +1,283 @@
+# SM Engine Website - Professional Light Theme Redesign
+
+## 🎨 Design Transformation Summary
+
+The SM-Engine-intro-website has been completely redesigned with a professional, minimalist aesthetic inspired by luxury brands like Zara. The redesign focuses on **light colors**, **smooth GSAP animations**, and a **premium user experience**.
+
+---
+
+## 📊 Color Palette Update
+
+### Previous Dark Theme
+- Background: `#07111f` (Navy Blue)
+- Panel: `#0b1628` (Dark Blue)
+- Text: `#e5eefb` (Light Blue-Gray)
+- Accent: `#4cc9f0` (Cyan)
+- Gold: `#f6c66d` (Bright Gold)
+
+### New Light Professional Theme ✨
+- **Background**: `#ffffff` (Pure White)
+- **Soft Background**: `#f9f7f4` (Warm Cream)
+- **Light Gray**: `#f5f3f0` (Subtle Beige)
+- **Text Primary**: `#1a1a1a` (Deep Black)
+- **Text Secondary**: `#6b6b6b` (Muted Gray)
+- **Accent**: `#2d2d2d` (Dark Charcoal)
+- **Gold**: `#c4a66d` (Warm Gold)
+
+### Color Accents by Section
+- **Features**: Amber/Orange (`#f59e0b`, `#d97706`)
+- **Workspaces**: Blue (`#3b82f6`, `#1e40af`)
+- **Showcase**: Purple (`#a855f7`, `#7c3aed`)
+- **Roadmap**: Green (`#10b981`, `#047857`)
+
+---
+
+## 🎬 GSAP Animation Enhancements
+
+### Core Animations Implemented
+
+#### 1. **Page Load Animations**
+- Header slides down with opacity fade-in (0.9s, power3.out)
+- Hero section elements fade up with staggered delays
+- Headings animate with translateY effect
+- Paragraphs cascade with 0.03s delays
+- Navigation links slide in from left
+
+#### 2. **Dropdown Menu Animations**
+- Smooth panel appearance/disappearance (0.25s-0.3s)
+- translateY transition from 12px below
+- Easing: power2.out for elegant feel
+
+#### 3. **Card Hover Effects**
+- Cards lift on hover (translateY: -8px)
+- Enhanced box-shadow on interaction
+- Smooth return on mouse leave (0.3s)
+
+#### 4. **Hero Visual Element**
+- Floating animation loop (5s duration, sine.inOut)
+- Subtle y-axis movement (-12px, +0 range)
+- Creates breathing effect
+
+#### 5. **Dark Mode Toggle** (If Implemented)
+- Background color smooth transition (0.3s)
+- Header state changes seamlessly
+
+#### 6. **Page Transitions**
+- Fade out on page unload
+- Fade in on page load
+- Creates continuity across navigation
+
+#### 7. **Mobile Menu**
+- Accordion-style expand/collapse
+- Auto height adjustment
+- Smooth opacity transitions
+
+---
+
+## 📁 Updated Files
+
+### HTML Pages
+- ✅ `index.html` - Complete redesign with all animations
+- ✅ `features.html` - Light theme with feature cards
+- ✅ `workspaces.html` - Workspace showcase redesigned
+- ✅ `roadmap.html` - Timeline view with light colors
+- ✅ `download.html` - Download page refreshed
+- ✅ `showcase.html` - Gallery with professional layout
+
+### CSS Styling
+- ✅ `styles.css` - Complete color system overhaul
+  - New CSS variables for light theme
+  - GSAP animation keyframes (fadeInUp, slideInLeft, scaleIn, floatIn)
+  - Enhanced hover states
+  - Professional card styling
+  - Improved typography hierarchy
+
+### JavaScript
+- ✅ `script.js` - Advanced GSAP animations
+  - ScrollTrigger integration ready
+  - Smooth dropdown interactions
+  - Card hover animations
+  - Mobile menu animations
+  - Page transition effects
+  - Heading and paragraph staggered animations
+
+---
+
+## 🎯 Design Features
+
+### Typography
+- **Font**: InterLocal (sans-serif) + JetBrainsMonoLocal (mono)
+- **Hierarchy**: Clear h1→h2→h3→p structure
+- **Spacing**: Improved line-height for readability
+
+### Layout
+- Maximum width: 7xl (80rem)
+- Responsive padding: 4px - 8px (small to large screens)
+- Grid-based spacing system
+- Consistent gap system (4px, 6px, 8px)
+
+### Interactive Elements
+- Button styling: Dark background → Light hover
+- Links: Smooth color transitions
+- Cards: Subtle elevation on interaction
+- Borders: Thin, barely visible (opacity: 8-12%)
+
+### Visual Hierarchy
+- Primary CTAs: Dark slate backgrounds
+- Secondary CTAs: Light borders with hover fill
+- Icon containers: Colored light backgrounds (amber, blue, purple)
+- Badges: Colored light backgrounds with dark text
+
+---
+
+## 🚀 Performance Optimizations
+
+### GSAP Benefits
+- GPU-accelerated animations (transform + opacity only)
+- Timeline management for coordinated effects
+- Automatic cleanup and garbage collection
+- Minimal DOM repaints
+
+### CSS Improvements
+- Efficient use of CSS custom properties (variables)
+- Backdrop-filter with 12-14px blur
+- Box-shadow optimization
+- Smooth 220ms-420ms transitions for UI changes
+
+---
+
+## 🌟 Professional Design Elements
+
+### Zara-Inspired Features
+✨ **Minimalism**: Plenty of whitespace, reduced visual clutter  
+✨ **Typography**: Large, bold headlines with generous spacing  
+✨ **Color Reserve**: Limited palette with purposeful accents  
+✨ **Photography**: Clean, well-framed product images  
+✨ **Consistency**: Unified design language across all pages  
+✨ **Responsiveness**: Mobile-first approach with fluid layouts  
+
+### Luxury Brand Characteristics
+- High-contrast text on light backgrounds
+- Subtle gradients and textures
+- Professional sans-serif typography
+- Generous whitespace
+- Smooth, purposeful animations
+- Clear visual hierarchy
+
+---
+
+## 📱 Responsive Design
+
+### Breakpoints Maintained
+- Mobile: < 768px
+- Tablet: 768px - 1024px
+- Desktop: > 1024px
+
+### Adaptive Features
+- Grid layouts shift from 1→2→3 columns
+- Font sizes scale appropriately
+- Padding/margin adjust by screen size
+- Touch-friendly interactive areas (40px minimum)
+
+---
+
+## ✅ Testing Checklist
+
+- [x] Light colors apply across all pages
+- [x] GSAP animations load without errors
+- [x] Header navigation dropdown works smoothly
+- [x] Mobile menu animates properly
+- [x] Page transitions are smooth
+- [x] Card hover effects visible
+- [x] All links are accessible
+- [x] Footer displays correctly
+- [x] Responsive on mobile/tablet/desktop
+- [x] Form elements styled appropriately
+
+---
+
+## 🎨 Color System Guide
+
+### Usage Examples
+```html
+<!-- Primary CTA -->
+<a class="bg-slate-950 text-white">Download</a>
+
+<!-- Secondary CTA -->
+<a class="border border-slate-300 text-slate-900">Learn More</a>
+
+<!-- Feature Icon -->
+<span class="bg-amber-100 text-amber-700">✓</span>
+
+<!-- Muted Text -->
+<p class="text-slate-600">Description text</p>
+
+<!-- Active State -->
+<nav class="text-slate-950 bg-slate-50">Current Page</nav>
+```
+
+---
+
+## 🔄 Browser Support
+
+- Chrome/Edge: Full support
+- Firefox: Full support (GSAP compatible)
+- Safari: Full support (GPU acceleration)
+- Mobile browsers: Full responsive support
+
+---
+
+## 📖 How to Customize
+
+### Change Color Theme
+Edit `styles.css` root variables:
+```css
+:root {
+    --sm-bg: #ffffff;
+    --sm-text: #1a1a1a;
+    --sm-accent: #2d2d2d;
+    /* Update other colors as needed */
+}
+```
+
+### Adjust Animation Speed
+Edit `script.js` animation durations:
+```javascript
+gsap.from(headerBar, {
+    duration: 0.9, // Increase for slower animation
+    ease: "power3.out"
+});
+```
+
+### Modify Tailwind Colors
+Update the tailwind config in HTML `<script>` tags:
+```javascript
+tailwind = {
+    config: {
+        theme: {
+            extend: {
+                colors: {
+                    // Add custom colors here
+                }
+            }
+        }
+    }
+};
+```
+
+---
+
+## 📞 Support Notes
+
+For future updates, maintain:
+1. Light background with high contrast text
+2. Smooth GSAP animations for interactions
+3. Professional card-based layout
+4. Minimalist design philosophy
+5. Consistent spacing and typography
+
+---
+
+**Design Date**: April 2026  
+**Version**: 2.0 (Professional Light Theme)  
+**Status**: ✅ Production Ready