diff --git a/PLAN.md b/PLAN.md
new file mode 100644
index 0000000..f32487c
--- /dev/null
+++ b/PLAN.md
@@ -0,0 +1,376 @@
+# STRUCT Static Site Improvement Plan
+
+## 📊 Current State Analysis
+
+### ✅ What's Working Well
+
+- Clean, dark theme that fits developer tools aesthetic
+- Basic responsive design with mobile viewport meta tag
+- Google Analytics integration (GTM)
+- Font Awesome icons for visual appeal
+- Simple, focused messaging
+- PayPal donation integration
+
+### ❌ Areas for Improvement
+
+- **Limited Visual Appeal**: No hero section, animations, or modern design elements
+- **Missing Key Content**: No installation guide, examples, or getting started section
+- **No Interactive Elements**: Static content with no engagement features
+- **Basic Typography**: Plain Arial font, limited visual hierarchy
+- **Missing Social Proof**: No GitHub stats, testimonials, or showcase
+- **No Demo Integration**: VHS tapes we created aren't showcased
+- **Limited SEO**: Basic meta tags, no Open Graph or structured data
+- **Basic Navigation**: Single page with no clear content organization
+
+## 🎯 Improvement Plan
+
+### Phase 1: Foundation & Content Enhancement
+
+#### 1.1 Modern Design System
+
+```css
+- Implement CSS custom properties for consistent theming
+- Add modern typography (Inter, Fira Code for code snippets)
+- Create a proper color palette with semantic naming
+- Implement dark/light theme toggle
+- Add smooth animations and transitions
+```
+
+#### 1.2 Enhanced Hero Section
+
+```html
+- Add animated background or subtle particles
+- Include prominent call-to-action buttons
+- Add GitHub star count and download stats
+- Feature a rotating showcase of key benefits
+- Include the main VHS demo (basic-usage.gif)
+```
+
+#### 1.3 Navigation & Structure
+
+```html
+- Add sticky navigation header
+- Implement smooth scroll navigation
+- Create distinct sections: Hero, Features, Demo, Installation, Examples
+- Add breadcrumb navigation
+- Include footer with links and social media
+```
+
+### Phase 2: Content & Functionality
+
+#### 2.1 Interactive Installation Guide
+
+```html
+- Step-by-step installation wizard
+- Copy-to-clipboard functionality for commands
+- Multiple installation methods (pip, Docker, binary)
+- Platform-specific instructions (Windows, macOS, Linux)
+- Installation verification steps
+```
+
+#### 2.2 Live Demo Integration
+
+```html
+- Embed VHS GIFs in an interactive carousel
+- Add demo selector (Basic Usage, YAML Config, Mappings, etc.)
+- Include before/after code examples
+- Add interactive playground (optional)
+```
+
+#### 2.3 Enhanced Features Section
+
+```html
+- Feature cards with icons and descriptions
+- Expandable details for each feature
+- Code examples for key features
+- Comparison with alternatives
+- Use case scenarios
+```
+
+### Phase 3: Advanced Features
+
+#### 3.1 Documentation Integration
+
+```html
+- Quick reference guide
+- API documentation preview
+- Link to full documentation
+- Search functionality
+- Getting started wizard
+```
+
+#### 3.2 Community & Social Proof
+
+```html
+- GitHub repository stats (stars, forks, contributors)
+- User testimonials or quotes
+- Showcase of projects built with STRUCT
+- Community links (Discord, Discussions)
+- Contributing guidelines
+```
+
+#### 3.3 Performance & SEO
+
+```html
+- Add comprehensive meta tags
+- Implement Open Graph and Twitter Cards
+- Add structured data (JSON-LD)
+- Optimize images and assets
+- Add sitemap and robots.txt
+- Implement service worker for offline support
+```
+
+## 🛠 Technical Implementation
+
+### Required Files Structure
+
+```
+site/
+├── index.html
+├── css/
+│ ├── main.css
+│ ├── components.css
+│ └── animations.css
+├── js/
+│ ├── main.js
+│ ├── github-stats.js
+│ └── demo-carousel.js
+├── images/
+│ ├── logo.svg
+│ ├── hero-bg.svg
+│ └── feature-icons/
+├── demos/
+│ └── [VHS GIFs copied from docs/vhs/]
+└── assets/
+ ├── fonts/
+ └── icons/
+```
+
+### Key Components to Build
+
+#### 1. Modern CSS Architecture
+
+```css
+/* CSS Custom Properties */
+:root {
+ --color-primary: #00d4ff;
+ --color-secondary: #ff6b6b;
+ --color-accent: #4ecdc4;
+ --color-bg-primary: #0a0a0a;
+ --color-bg-secondary: #1a1a1a;
+ --color-text-primary: #ffffff;
+ --color-text-secondary: #b0b0b0;
+ --font-sans: 'Inter', -apple-system, sans-serif;
+ --font-mono: 'Fira Code', monospace;
+}
+```
+
+#### 2. Interactive Components
+
+```javascript
+// GitHub Stats Integration
+async function fetchGitHubStats() {
+ const response = await fetch('https://api.github.com/repos/httpdss/struct');
+ const data = await response.json();
+ return {
+ stars: data.stargazers_count,
+ forks: data.forks_count,
+ openIssues: data.open_issues_count
+ };
+}
+
+// Demo Carousel
+class DemoCarousel {
+ constructor(element) {
+ this.element = element;
+ this.demos = [
+ { name: 'Basic Usage', gif: 'basic-usage.gif' },
+ { name: 'YAML Config', gif: 'yaml-config.gif' },
+ // ... other demos
+ ];
+ this.init();
+ }
+}
+```
+
+#### 3. Content Sections
+
+##### Hero Section
+
+```html
+
+
+
STRUCT
+
Automated Project Structure Generator
+
+
+
+
+
+
+
+```
+
+##### Features Grid
+
+```html
+
+
+
Why Choose STRUCT?
+
+
+
+
+
+
YAML Configuration
+
Define your project structure in simple, readable YAML files
+
+
+
+
+
+```
+
+##### Interactive Installation
+
+```html
+
+
+
Quick Installation
+
+ pip
+ Docker
+ Source
+
+
+
+
pip install git+https://github.com/httpdss/struct.git
+
+ Copy
+
+
+
+
+
+```
+
+## 📈 Success Metrics
+
+### User Experience
+
+- [ ] Reduced bounce rate (< 40%)
+- [ ] Increased time on page (> 2 minutes)
+- [ ] Higher conversion to GitHub repository
+- [ ] Improved mobile experience (90+ Lighthouse score)
+
+### Performance
+
+- [ ] Page load time < 2 seconds
+- [ ] Lighthouse Performance score > 90
+- [ ] Accessibility score > 95
+- [ ] SEO score > 90
+
+### Engagement
+
+- [ ] Increased GitHub stars
+- [ ] More documentation page visits
+- [ ] Higher demo video engagement
+- [ ] Improved user feedback
+
+## 🚀 Implementation Priority
+
+### High Priority (Week 1)
+
+1. Modern CSS architecture and design system
+2. Enhanced hero section with demo integration
+3. Interactive installation guide
+4. Mobile responsiveness improvements
+
+### Medium Priority (Week 2)
+
+1. Features showcase with examples
+2. Demo carousel with all VHS tapes
+3. GitHub stats integration
+4. SEO enhancements
+
+### Low Priority (Week 3)
+
+1. Advanced animations and micro-interactions
+2. Community showcase
+3. Performance optimizations
+4. Analytics and tracking improvements
+
+## 🎨 Design Inspiration
+
+### Color Palette
+
+```css
+--primary: #00ff88; /* Bright green for CTAs */
+--secondary: #0066ff; /* Blue for links */
+--accent: #ff6600; /* Orange for highlights */
+--bg-dark: #0a0a0a; /* Deep black background */
+--bg-card: #1a1a1a; /* Card backgrounds */
+--text-primary: #ffffff; /* Primary text */
+--text-secondary: #888; /* Secondary text */
+```
+
+### Typography Scale
+
+```css
+--text-xs: 0.75rem; /* 12px */
+--text-sm: 0.875rem; /* 14px */
+--text-base: 1rem; /* 16px */
+--text-lg: 1.125rem; /* 18px */
+--text-xl: 1.25rem; /* 20px */
+--text-2xl: 1.5rem; /* 24px */
+--text-3xl: 1.875rem; /* 30px */
+--text-4xl: 2.25rem; /* 36px */
+```
+
+## 📝 Content Strategy
+
+### Key Messages
+
+1. **"Automate Your Project Setup"** - Save time and ensure consistency
+2. **"YAML-Powered Simplicity"** - Easy to learn and use
+3. **"Enterprise-Ready"** - Reliable for teams and production use
+4. **"Extensible & Flexible"** - Adaptable to any project type
+
+### Call-to-Actions
+
+1. Primary: "Get Started" → Installation guide
+2. Secondary: "View Demo" → Demo carousel
+3. Tertiary: "Star on GitHub" → GitHub repository
+
+## 🔧 Development Tools Needed
+
+### Dependencies
+
+```json
+{
+ "clipboard": "^2.0.8",
+ "highlight.js": "^11.7.0",
+ "intersection-observer": "^0.12.2",
+ "smoothscroll-polyfill": "^0.4.4"
+}
+```
+
+### Build Process
+
+1. HTML minification
+2. CSS optimization and purging
+3. JavaScript bundling
+4. Image optimization
+5. Asset compression
+
+This plan provides a comprehensive roadmap for transforming the STRUCT static site into a modern, engaging, and effective landing page that showcases the tool's capabilities and drives user adoption.
diff --git a/docs/usage.md b/docs/usage.md
index 176b1aa..4473596 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -10,7 +10,7 @@ Run the script with the following command using one of the following subcommands
For more information, run the script with the `-h` or `--help` option (this is also available for each subcommand):
-
+
```sh
struct -h
diff --git a/docs/vhs/advanced-features.gif b/docs/vhs/advanced-features.gif
new file mode 100644
index 0000000..a4e6efe
Binary files /dev/null and b/docs/vhs/advanced-features.gif differ
diff --git a/docs/vhs/advanced-features.tape b/docs/vhs/advanced-features.tape
index 9d5bcdd..501c723 100644
--- a/docs/vhs/advanced-features.tape
+++ b/docs/vhs/advanced-features.tape
@@ -3,36 +3,58 @@ Output docs/vhs/advanced-features.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Create a test structure" Enter
-Type "mkdir -p existing-project && echo 'old content' > existing-project/README.md" Enter
-Sleep 1
-Type "" Enter
-Type "# Use dry-run to preview changes" Enter
-Type "struct generate --dry-run terraform/module ./existing-project" Enter
-Sleep 5
-Type "" Enter
-Type "# Validate a YAML configuration" Enter
-Type "cat > test-config.yaml << 'EOF'" Enter
-Type "files:" Enter
-Type " - test.txt:" Enter
-Type " content: 'Hello World'" Enter
-Type "EOF" Enter
-Sleep 2
-Type "struct validate test-config.yaml" Enter
-Sleep 3
-Type "" Enter
-Type "# Generate with backup strategy" Enter
-Type "struct generate --file-strategy=backup --backup=./backups terraform/module ./existing-project" Enter
-Sleep 5
-Type "" Enter
-Type "# Check backup was created" Enter
-Type "ls -la backups/ && echo && echo 'New content:' && head existing-project/README.md" Enter
-Sleep 3
+Type "# STRUCT Advanced Features Demo"
+Enter
+Sleep 1s
+
+Type "# Generate schema for VSCode autocompletion"
+Enter
+Type "mkdir -p .vscode"
+Enter
+Type "struct generate-schema --output .vscode/struct-schema.json"
+Enter
+Sleep 2s
+
+Type "# Show the generated schema"
+Enter
+Type "cat .vscode/struct-schema.json"
+Enter
+Sleep 3s
+
+Type "# Create config with remote content"
+Enter
+Type "cat > remote-demo.yaml << EOF"
+Enter
+Type "files:"
+Enter
+Type " - LICENSE:"
+Enter
+Type " file: https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt"
+Enter
+Type " - .gitignore:"
+Enter
+Type " file: https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Python.gitignore"
+Enter
+Type "EOF"
+Enter
+Sleep 2s
+
+Type "# Generate with remote content"
+Enter
+Type "struct generate remote-demo.yaml ./remote-project"
+Enter
+Sleep 3s
+
+Type "# Check what was downloaded"
+Enter
+Type "ls -la remote-project/"
+Enter
+Sleep 2s
+
+Type "# Advanced features make STRUCT incredibly powerful!"
+Enter
+Sleep 2s
\ No newline at end of file
diff --git a/docs/vhs/basic-usage.gif b/docs/vhs/basic-usage.gif
new file mode 100644
index 0000000..41ad376
Binary files /dev/null and b/docs/vhs/basic-usage.gif differ
diff --git a/docs/vhs/basic-usage.tape b/docs/vhs/basic-usage.tape
index 39a4e34..32ffb13 100644
--- a/docs/vhs/basic-usage.tape
+++ b/docs/vhs/basic-usage.tape
@@ -1,28 +1,47 @@
-Output docs/vhs/basic-usage.gif
+Output docs/vhs/usage.gif
-Set Theme "Monokai Vivid"
+Set Theme "Dracula"
Set FontSize 14
-Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
-Set Width 1400
-Set Height 800
+Set Width 1200
+Set Height 600
Set Shell "bash"
-Type "# Explore available structures" Enter
-Type "struct list" Enter
-Sleep 3
-Type "" Enter
-Type "# Get information about a specific structure" Enter
-Type "struct info terraform/module" Enter
-Sleep 5
-Type "" Enter
-Type "# Generate a simple project structure" Enter
-Type "struct generate terraform/module ./my-terraform-module" Enter
-Sleep 8
-Type "" Enter
-Type "# Verify the generated structure" Enter
-Type "tree my-terraform-module" Enter
-Sleep 5
+Type "# STRUCT - Basic Usage Demo"
+Enter
+Sleep 1s
+
+Type "# First, let's see what structures are available"
+Enter
+Sleep 500ms
+
+Type "struct list"
+Enter
+Sleep 2s
+
+Type "# Let's generate a simple Python project"
+Enter
+Sleep 500ms
+
+Type "struct generate project/python ./my-python-app"
+Enter
+Sleep 3s
+
+Type "# Check what was created"
+Enter
+Sleep 500ms
+
+Type "ls -la my-python-app/"
+Enter
+Sleep 2s
+
+Type "# View the project structure"
+Enter
+Sleep 500ms
+
+Type "tree my-python-app/ || find my-python-app/ -type f"
+Enter
+Sleep 2s
+
+Type "# That's it! STRUCT made it easy to bootstrap a project"
+Enter
+Sleep 1s
diff --git a/docs/vhs/install.gif b/docs/vhs/install.gif
new file mode 100644
index 0000000..45a7d5e
Binary files /dev/null and b/docs/vhs/install.gif differ
diff --git a/docs/vhs/install.tape b/docs/vhs/install.tape
index d874091..a8e1f04 100644
--- a/docs/vhs/install.tape
+++ b/docs/vhs/install.tape
@@ -4,22 +4,42 @@ Output docs/vhs/install.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Create python virtual environment and install struct" Enter
-Type "python3 -m venv .venv" Enter
-Sleep 5
-Type "source .venv/bin/activate" Enter
-Sleep 5
-Type "pip install git+https://github.com/httpdss/struct.git" Enter
-# Wait+Screen /Successfully/
-Sleep 20
-Type "# STRUCT is now installed and ready to use" Enter
-Type "struct list" Enter
-Sleep 10
+Type "# STRUCT Installation Demo"
+Enter
+Sleep 1s
+
+Type "# Create python virtual environment and install struct"
+Enter
+Type "python3 -m venv .venv"
+Enter
+Sleep 2s
+
+Type "source .venv/bin/activate"
+Enter
+Sleep 1s
+
+Type "# Install STRUCT from GitHub"
+Enter
+Type "pip install git+https://github.com/httpdss/struct.git"
+Enter
+Sleep 5s
+
+Type "# Verify installation"
+Enter
+Type "struct --help"
+Enter
+Sleep 2s
+
+Type "# Check available structures"
+Enter
+Type "struct list"
+Enter
+Sleep 3s
+
+Type "# STRUCT is now installed and ready to use!"
+Enter
+Sleep 2s
diff --git a/docs/vhs/mappings-demo.gif b/docs/vhs/mappings-demo.gif
new file mode 100644
index 0000000..38d537f
Binary files /dev/null and b/docs/vhs/mappings-demo.gif differ
diff --git a/docs/vhs/mappings-demo.tape b/docs/vhs/mappings-demo.tape
index f789aee..65707d9 100644
--- a/docs/vhs/mappings-demo.tape
+++ b/docs/vhs/mappings-demo.tape
@@ -3,52 +3,70 @@ Output docs/vhs/mappings-demo.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Create mappings file for environment variables" Enter
-Type "cat > mappings.yaml << 'EOF'" Enter
-Type "mappings:" Enter
-Type " environments:" Enter
-Type " dev:" Enter
-Type " database_url: 'postgres://localhost:5432/myapp_dev'" Enter
-Type " debug: true" Enter
-Type " prod:" Enter
-Type " database_url: 'postgres://prod-server:5432/myapp'" Enter
-Type " debug: false" Enter
-Type " teams:" Enter
-Type " devops: 'devops-team@company.com'" Enter
-Type " frontend: 'frontend-team@company.com'" Enter
-Type "EOF" Enter
-Sleep 2
-Type "" Enter
-Type "# Create structure that uses mappings" Enter
-Type "cat > app-config.yaml << 'EOF'" Enter
-Type "files:" Enter
-Type " - config/{{@ env @}}.json:" Enter
-Type " content: |" Enter
-Type " {" Enter
-Type " \"database_url\": \"{{@ mappings.environments[env].database_url @}}\"," Enter
-Type " \"debug\": {{@ mappings.environments[env].debug @}}," Enter
-Type " \"contact\": \"{{@ mappings.teams.devops @}}\"" Enter
-Type " }" Enter
-Type "variables:" Enter
-Type " - env:" Enter
-Type " description: 'Environment (dev/prod)'" Enter
-Type " type: string" Enter
-Type " default: 'dev'" Enter
-Type "EOF" Enter
-Sleep 3
-Type "" Enter
-Type "# Generate with mappings file" Enter
-Type "struct generate --mappings-file mappings.yaml app-config.yaml ./config-output" Enter
-Sleep 5
-Type "" Enter
-Type "# Check generated configuration" Enter
-Type "cat config-output/config/dev.json" Enter
-Sleep 3
+Type "# STRUCT Mappings Demo"
+Enter
+Sleep 1s
+
+Type "# Create a simple mapping file with team data"
+Enter
+Type "cat > team-mapping.yaml << EOF"
+Enter
+Type "mappings:"
+Enter
+Type " team_info:"
+Enter
+Type " backend:"
+Enter
+Type ' lead: "Alice Johnson"'
+Enter
+Type ' tech_stack: ["Python", "FastAPI", "PostgreSQL"]'
+Enter
+Type ' repo: "https://github.com/company/backend"'
+Enter
+Type "EOF"
+Enter
+Sleep 2s
+
+Type "# Create structure using mapping data"
+Enter
+Type "cat > project-with-mapping.yaml << EOF"
+Enter
+Type "mappings:"
+Enter
+Type " - team-mapping.yaml"
+Enter
+Type "files:"
+Enter
+Type " - README.md:"
+Enter
+Type " content: |"
+Enter
+Type " # Backend Team Project"
+Enter
+Type " Team Lead: Alice Johnson"
+Enter
+Type " Tech Stack: Python, FastAPI, PostgreSQL"
+Enter
+Type "EOF"
+Enter
+Sleep 2s
+
+Type "# Generate project for backend team"
+Enter
+Type "struct generate project-with-mapping.yaml ./backend-project"
+Enter
+Sleep 3s
+
+Type "# Check the generated README"
+Enter
+Type "cat backend-project/README.md"
+Enter
+Sleep 2s
+
+Type "# Mappings enable data-driven project generation!"
+Enter
+Sleep 2s
diff --git a/docs/vhs/multiple-mappings.gif b/docs/vhs/multiple-mappings.gif
new file mode 100644
index 0000000..b8361a7
Binary files /dev/null and b/docs/vhs/multiple-mappings.gif differ
diff --git a/docs/vhs/multiple-mappings.tape b/docs/vhs/multiple-mappings.tape
index 95fd4e0..341ba60 100644
--- a/docs/vhs/multiple-mappings.tape
+++ b/docs/vhs/multiple-mappings.tape
@@ -3,63 +3,102 @@ Output docs/vhs/multiple-mappings.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Create base mappings file" Enter
-Type "cat > base-mappings.yaml << 'EOF'" Enter
-Type "mappings:" Enter
-Type " common:" Enter
-Type " app_name: 'MyApp'" Enter
-Type " version: '1.0.0'" Enter
-Type " environments:" Enter
-Type " dev:" Enter
-Type " replicas: 1" Enter
-Type "EOF" Enter
-Sleep 2
-Type "" Enter
-Type "# Create environment-specific overrides" Enter
-Type "cat > prod-mappings.yaml << 'EOF'" Enter
-Type "mappings:" Enter
-Type " environments:" Enter
-Type " dev:" Enter
-Type " debug: true" Enter
-Type " prod:" Enter
-Type " replicas: 3" Enter
-Type " debug: false" Enter
-Type "EOF" Enter
-Sleep 2
-Type "" Enter
-Type "# Create deployment template" Enter
-Type "cat > deployment.yaml << 'EOF'" Enter
-Type "files:" Enter
-Type " - k8s/deployment.yaml:" Enter
-Type " content: |" Enter
-Type " apiVersion: apps/v1" Enter
-Type " kind: Deployment" Enter
-Type " metadata:" Enter
-Type " name: {{@ mappings.common.app_name @}}" Enter
-Type " spec:" Enter
-Type " replicas: {{@ mappings.environments[env].replicas @}}" Enter
-Type "variables:" Enter
-Type " - env:" Enter
-Type " description: 'Target environment'" Enter
-Type " default: 'dev'" Enter
-Type "EOF" Enter
-Sleep 3
-Type "" Enter
-Type "# Generate with multiple mappings files (deep merge)" Enter
-Type "struct generate \\" Enter
-Type " --mappings-file base-mappings.yaml \\" Enter
-Type " --mappings-file prod-mappings.yaml \\" Enter
-Type " deployment.yaml ./k8s-output" Enter
-Sleep 5
-Type "" Enter
-Type "# Check the merged result" Enter
-Type "cat k8s-output/k8s/deployment.yaml" Enter
-Sleep 3
+Type "# STRUCT Multiple Mappings Demo"
+Enter
+Sleep 1s
+
+Type "# Create company info mapping"
+Enter
+Type "cat > company-info.yaml << EOF"
+Enter
+Type "mappings:"
+Enter
+Type " company:"
+Enter
+Type ' name: "TechCorp Inc"'
+Enter
+Type ' website: "https://techcorp.com"'
+Enter
+Type ' license: "MIT"'
+Enter
+Type "EOF"
+Enter
+Sleep 1s
+
+Type "# Create environment mapping"
+Enter
+Type "cat > environments.yaml << EOF"
+Enter
+Type "mappings:"
+Enter
+Type " environments:"
+Enter
+Type " development:"
+Enter
+Type ' domain: "dev.techcorp.com"'
+Enter
+Type ' database: "postgres://dev-db:5432/app"'
+Enter
+Type " production:"
+Enter
+Type ' domain: "techcorp.com"'
+Enter
+Type ' database: "postgres://prod-db:5432/app"'
+Enter
+Type "EOF"
+Enter
+Sleep 1s
+
+Type "# Create project using multiple mappings"
+Enter
+Type "cat > multi-mapping-project.yaml << EOF"
+Enter
+Type "mappings:"
+Enter
+Type " - company-info.yaml"
+Enter
+Type " - environments.yaml"
+Enter
+Type "files:"
+Enter
+Type " - config/app.yaml:"
+Enter
+Type " content: |"
+Enter
+Type " app:"
+Enter
+Type " name: MyApp"
+Enter
+Type " company: TechCorp Inc"
+Enter
+Type " website: https://techcorp.com"
+Enter
+Type " environment:"
+Enter
+Type " domain: dev.techcorp.com"
+Enter
+Type " database: postgres://dev-db:5432/app"
+Enter
+Type "EOF"
+Enter
+Sleep 2s
+
+Type "# Generate for development environment"
+Enter
+Type "struct generate multi-mapping-project.yaml ./dev-app"
+Enter
+Sleep 3s
+
+Type "# View the generated config"
+Enter
+Type "cat dev-app/config/app.yaml"
+Enter
+Sleep 2s
+
+Type "# Multiple mappings provide powerful data composition!"
+Enter
+Sleep 2s
diff --git a/docs/vhs/remote-content.gif b/docs/vhs/remote-content.gif
new file mode 100644
index 0000000..a6a3ef2
Binary files /dev/null and b/docs/vhs/remote-content.gif differ
diff --git a/docs/vhs/remote-content.tape b/docs/vhs/remote-content.tape
index 96cda7c..31d01a7 100644
--- a/docs/vhs/remote-content.tape
+++ b/docs/vhs/remote-content.tape
@@ -3,38 +3,64 @@ Output docs/vhs/remote-content.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Create structure using remote content" Enter
-Type "cat > remote-demo.yaml << 'EOF'" Enter
-Type "files:" Enter
-Type " - .gitignore:" Enter
-Type " file: github://github/gitignore/main/Python.gitignore" Enter
-Type " - LICENSE:" Enter
-Type " file: https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt" Enter
-Type " - README.md:" Enter
-Type " content: |" Enter
-Type " # {{@ project_name @}}" Enter
-Type " " Enter
-Type " This project uses remote content from GitHub." Enter
-Type "variables:" Enter
-Type " - project_name:" Enter
-Type " description: 'Project name'" Enter
-Type " default: 'RemoteDemo'" Enter
-Type "EOF" Enter
-Sleep 3
-Type "" Enter
-Type "# Generate project with remote content" Enter
-Type "struct generate remote-demo.yaml ./remote-project" Enter
-Sleep 8
-Type "" Enter
-Type "# Check downloaded content" Enter
-Type "echo 'Generated files:' && ls -la remote-project/" Enter
-Type "echo && echo 'First few lines of .gitignore:' && head -10 remote-project/.gitignore" Enter
-Sleep 5
+Type "# STRUCT Remote Content Demo"
+Enter
+Sleep 1s
+
+Type "# Create configuration with remote files"
+Enter
+Type "cat > remote-example.yaml << EOF"
+Enter
+Type "files:"
+Enter
+Type " - .gitignore:"
+Enter
+Type " file: https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Python.gitignore"
+Enter
+Type " - LICENSE:"
+Enter
+Type " file: https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt"
+Enter
+Type " - README.md:"
+Enter
+Type " content: |"
+Enter
+Type " # Remote Content Demo"
+Enter
+Type " This project uses remote content from various sources."
+Enter
+Type "EOF"
+Enter
+Sleep 2s
+
+Type "# Generate project with remote content"
+Enter
+Type "struct generate remote-example.yaml ./remote-demo"
+Enter
+Sleep 4s
+
+Type "# Check downloaded files"
+Enter
+Type "ls -la remote-demo/"
+Enter
+Sleep 2s
+
+Type "# View the .gitignore from GitHub"
+Enter
+Type "head -10 remote-demo/.gitignore"
+Enter
+Sleep 2s
+
+Type "# View the LICENSE file"
+Enter
+Type "head -5 remote-demo/LICENSE"
+Enter
+Sleep 2s
+
+Type "# Remote content makes reusing existing resources easy!"
+Enter
+Sleep 2s
diff --git a/docs/vhs/schema-generation.gif b/docs/vhs/schema-generation.gif
new file mode 100644
index 0000000..1210687
Binary files /dev/null and b/docs/vhs/schema-generation.gif differ
diff --git a/docs/vhs/schema-generation.tape b/docs/vhs/schema-generation.tape
index fc5ff93..f762a91 100644
--- a/docs/vhs/schema-generation.tape
+++ b/docs/vhs/schema-generation.tape
@@ -3,28 +3,58 @@ Output docs/vhs/schema-generation.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Generate JSON schema for available structures" Enter
-Type "struct generate-schema" Enter
-Sleep 5
-Type "" Enter
-Type "# Save schema to file for IDE integration" Enter
-Type "struct generate-schema -o struct-schema.json" Enter
-Sleep 3
-Type "" Enter
-Type "# Check the generated schema" Enter
-Type "echo 'Schema file created:' && ls -la struct-schema.json" Enter
-Type "echo && echo 'Available structures in schema:' && jq -r '.definitions.PluginList.enum[]' struct-schema.json | head -10" Enter
-Sleep 5
-Type "" Enter
-Type "# Schema can be used in VS Code for autocompletion" Enter
-Type "echo 'Add to your .struct.yaml files for IDE support:'" Enter
-Type "echo '# yaml-language-server: \$schema=./struct-schema.json'" Enter
-Sleep 3
+Type "# STRUCT Schema Generation Demo"
+Enter
+Sleep 1s
+
+Type "# Generate JSON schema for VSCode autocompletion"
+Enter
+Type "struct generate-schema"
+Enter
+Sleep 3s
+
+Type "# Save schema to a file for VSCode"
+Enter
+Type "mkdir -p .vscode"
+Enter
+Type "struct generate-schema --output .vscode/struct-plugins.schema.json"
+Enter
+Sleep 2s
+
+Type "# View the generated schema"
+Enter
+Type "cat .vscode/struct-plugins.schema.json"
+Enter
+Sleep 3s
+
+Type "# Create VSCode settings to use the schema"
+Enter
+Type "cat > .vscode/settings.json << EOF"
+Enter
+Type "{"
+Enter
+Type ' "yaml.schemas": {'
+Enter
+Type ' "./.vscode/struct-plugins.schema.json": "*.struct.yaml"'
+Enter
+Type " }"
+Enter
+Type "}"
+Enter
+Type "EOF"
+Enter
+Sleep 2s
+
+Type "# Now VSCode will provide autocompletion for struct names!"
+Enter
+Type "# when you type 'struct:' in a .struct.yaml file"
+Enter
+Sleep 2s
+
+Type "# Schema generation enables better IDE support!"
+Enter
+Sleep 2s
diff --git a/docs/vhs/usage.gif b/docs/vhs/usage.gif
deleted file mode 100644
index c11e7b5..0000000
Binary files a/docs/vhs/usage.gif and /dev/null differ
diff --git a/docs/vhs/yaml-config.gif b/docs/vhs/yaml-config.gif
new file mode 100644
index 0000000..a478182
Binary files /dev/null and b/docs/vhs/yaml-config.gif differ
diff --git a/docs/vhs/yaml-config.tape b/docs/vhs/yaml-config.tape
index 003ede9..b2cabbd 100644
--- a/docs/vhs/yaml-config.tape
+++ b/docs/vhs/yaml-config.tape
@@ -3,37 +3,62 @@ Output docs/vhs/yaml-config.gif
Set Theme "Monokai Vivid"
Set FontSize 14
Set TypingSpeed 40ms
-Set WindowBar Colorful
-Set BorderRadius 8
-Set Margin 0
-Set Padding 10
Set Width 1400
Set Height 800
Set Shell "bash"
-Type "# Create a custom YAML configuration" Enter
-Type "cat > my-project.yaml << 'EOF'" Enter
-Type "files:" Enter
-Type " - README.md:" Enter
-Type " content: |" Enter
-Type " # {{@ project_name @}}" Enter
-Type " Welcome to my awesome project!" Enter
-Type " - src/main.py:" Enter
-Type " content: |" Enter
-Type " print('Hello from {{@ project_name @}}!')" Enter
-Type "" Enter
-Type "variables:" Enter
-Type " - project_name:" Enter
-Type " description: 'Name of your project'" Enter
-Type " type: string" Enter
-Type " default: 'MyProject'" Enter
-Type "EOF" Enter
-Sleep 2
-Type "" Enter
-Type "# Generate structure from YAML (note: file:// is automatic)" Enter
-Type "struct generate my-project.yaml ./output" Enter
-Sleep 5
-Type "" Enter
-Type "# Check the generated files" Enter
-Type "tree output && echo && cat output/README.md" Enter
-Sleep 5
+Type "# STRUCT YAML Configuration Demo"
+Enter
+Sleep 1s
+
+Type "# Create a simple project structure configuration"
+Enter
+Type "cat > my-project.yaml << EOF"
+Enter
+Type "files:"
+Enter
+Type " - README.md:"
+Enter
+Type " content: |"
+Enter
+Type " # My Project"
+Enter
+Type " Generated with STRUCT"
+Enter
+Type " - .gitignore:"
+Enter
+Type " file: https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Python.gitignore"
+Enter
+Type "EOF"
+Enter
+Sleep 3s
+
+Type "# Validate the configuration"
+Enter
+Type "struct validate my-project.yaml"
+Enter
+Sleep 2s
+
+Type "# Generate the project"
+Enter
+Type "struct generate my-project.yaml ./my-custom-project"
+Enter
+Sleep 3s
+
+Type "# Check the generated structure"
+Enter
+Type "ls -la my-custom-project/"
+Enter
+Sleep 2s
+
+Type "cat my-custom-project/README.md"
+Enter
+Sleep 2s
+
+Type "# YAML configuration makes STRUCT highly flexible!"
+Enter
+Sleep 2s
+Sleep 2s
+
+Type "# YAML configuration makes STRUCT highly flexible!" Enter
+Sleep 2s
diff --git a/site/css/advanced.css b/site/css/advanced.css
new file mode 100644
index 0000000..c5e4ea2
--- /dev/null
+++ b/site/css/advanced.css
@@ -0,0 +1,570 @@
+/* STRUCT Advanced Components CSS - Phase 2 */
+
+/* Search Functionality */
+.search-container {
+ position: relative;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.search-input {
+ width: 100%;
+ padding: var(--space-3) var(--space-4);
+ padding-left: var(--space-10);
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ color: var(--color-text-primary);
+ font-family: var(--font-sans);
+ font-size: var(--text-base);
+ transition: all var(--transition-fast);
+}
+
+.search-input:focus {
+ outline: none;
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
+}
+
+.search-icon {
+ position: absolute;
+ left: var(--space-3);
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--color-text-muted);
+ font-size: var(--text-lg);
+ pointer-events: none;
+}
+
+.search-results {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-lg);
+ z-index: var(--z-dropdown);
+ max-height: 400px;
+ overflow-y: auto;
+ margin-top: var(--space-2);
+}
+
+.search-result-item {
+ padding: var(--space-4);
+ border-bottom: 1px solid var(--color-border);
+ cursor: pointer;
+ transition: background-color var(--transition-fast);
+}
+
+.search-result-item:last-child {
+ border-bottom: none;
+}
+
+.search-result-item:hover {
+ background-color: var(--color-bg-tertiary);
+}
+
+.search-result-title {
+ font-size: var(--text-base);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-1);
+}
+
+.search-result-content {
+ font-size: var(--text-sm);
+ color: var(--color-text-secondary);
+ margin: 0;
+}
+
+.search-no-results {
+ padding: var(--space-4);
+ text-align: center;
+ color: var(--color-text-muted);
+ font-style: italic;
+}
+
+/* Advanced GitHub Stats */
+.github-stats-advanced {
+ margin: var(--space-12) 0;
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--space-4);
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.stat-card {
+ background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-6);
+ text-align: center;
+ transition: all var(--transition-normal);
+ position: relative;
+ overflow: hidden;
+}
+
+.stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
+ transition: left 0.5s ease;
+}
+
+.stat-card:hover::before {
+ left: 100%;
+}
+
+.stat-card:hover {
+ transform: translateY(-4px);
+ border-color: var(--color-primary);
+ box-shadow: var(--shadow-xl);
+}
+
+.stat-icon {
+ font-size: var(--text-3xl);
+ margin-bottom: var(--space-3);
+ display: block;
+}
+
+.stat-value {
+ font-size: var(--text-2xl);
+ font-weight: 700;
+ color: var(--color-primary);
+ display: block;
+ margin-bottom: var(--space-2);
+}
+
+.stat-label {
+ font-size: var(--text-sm);
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+
+/* Contributors Showcase */
+.contributors-showcase {
+ background-color: var(--color-bg-secondary);
+ border-radius: var(--radius-lg);
+ padding: var(--space-8);
+ margin: var(--space-12) 0;
+}
+
+.contributors-title {
+ text-align: center;
+ margin-bottom: var(--space-8);
+ color: var(--color-text-primary);
+}
+
+.contributors-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: var(--space-4);
+ margin-bottom: var(--space-6);
+}
+
+.contributor-card {
+ background-color: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ padding: var(--space-4);
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ transition: all var(--transition-normal);
+ position: relative;
+}
+
+.contributor-card:hover {
+ transform: translateY(-2px);
+ border-color: var(--color-primary);
+ box-shadow: var(--shadow-md);
+}
+
+.contributor-avatar {
+ width: 48px;
+ height: 48px;
+ border-radius: var(--radius-full);
+ border: 2px solid var(--color-border);
+ transition: border-color var(--transition-fast);
+}
+
+.contributor-card:hover .contributor-avatar {
+ border-color: var(--color-primary);
+}
+
+.contributor-info {
+ flex: 1;
+}
+
+.contributor-name {
+ font-size: var(--text-base);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-1);
+}
+
+.contributor-contributions {
+ font-size: var(--text-sm);
+ color: var(--color-text-secondary);
+ margin: 0;
+}
+
+.contributor-link {
+ color: var(--color-text-muted);
+ font-size: var(--text-lg);
+ transition: color var(--transition-fast);
+}
+
+.contributor-link:hover {
+ color: var(--color-primary);
+}
+
+/* Project Showcase */
+.project-showcase {
+ margin: var(--space-12) 0;
+}
+
+.showcase-title {
+ text-align: center;
+ margin-bottom: var(--space-8);
+ color: var(--color-text-primary);
+}
+
+.showcase-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: var(--space-6);
+}
+
+.showcase-card {
+ background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-6);
+ text-align: center;
+ transition: all var(--transition-normal);
+ position: relative;
+ overflow: hidden;
+}
+
+.showcase-card::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+ transform: scaleX(0);
+ transition: transform var(--transition-normal);
+}
+
+.showcase-card:hover::after {
+ transform: scaleX(1);
+}
+
+.showcase-card:hover {
+ transform: translateY(-8px);
+ box-shadow: var(--shadow-xl);
+}
+
+.showcase-icon {
+ font-size: var(--text-4xl);
+ margin-bottom: var(--space-4);
+}
+
+.showcase-name {
+ font-size: var(--text-xl);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-3);
+}
+
+.showcase-description {
+ color: var(--color-text-secondary);
+ margin-bottom: var(--space-4);
+ line-height: 1.6;
+}
+
+.showcase-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-2);
+ justify-content: center;
+}
+
+.showcase-tag {
+ background-color: var(--color-bg-primary);
+ color: var(--color-primary);
+ padding: var(--space-1) var(--space-2);
+ border-radius: var(--radius-sm);
+ font-size: var(--text-xs);
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+/* Demo Modal */
+.demo-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.9);
+ z-index: var(--z-modal);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ visibility: hidden;
+ transition: all var(--transition-normal);
+}
+
+.demo-modal.active {
+ opacity: 1;
+ visibility: visible;
+}
+
+.demo-modal-content {
+ position: relative;
+ max-width: 90vw;
+ max-height: 90vh;
+ background-color: var(--color-bg-secondary);
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ box-shadow: var(--shadow-xl);
+}
+
+.demo-modal-close {
+ position: absolute;
+ top: var(--space-4);
+ right: var(--space-4);
+ background: none;
+ border: none;
+ color: var(--color-text-primary);
+ font-size: var(--text-2xl);
+ cursor: pointer;
+ z-index: 1;
+ width: 40px;
+ height: 40px;
+ border-radius: var(--radius-full);
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: all var(--transition-fast);
+}
+
+.demo-modal-close:hover {
+ background-color: var(--color-primary);
+ color: var(--color-bg-primary);
+}
+
+.demo-modal-video {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.demo-modal-info {
+ padding: var(--space-6);
+ text-align: center;
+}
+
+.demo-modal-info h3 {
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-2);
+}
+
+.demo-modal-info p {
+ color: var(--color-text-secondary);
+ font-size: var(--text-sm);
+}
+
+/* Keyboard Shortcuts Modal */
+.shortcuts-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: var(--z-modal);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ visibility: hidden;
+ transition: all var(--transition-normal);
+}
+
+.shortcuts-modal.active {
+ opacity: 1;
+ visibility: visible;
+}
+
+.shortcuts-content {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-8);
+ max-width: 400px;
+ width: 90%;
+}
+
+.shortcuts-content h3 {
+ text-align: center;
+ margin-bottom: var(--space-6);
+ color: var(--color-text-primary);
+}
+
+.shortcuts-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+ margin-bottom: var(--space-6);
+}
+
+.shortcut-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--space-2) 0;
+}
+
+.shortcut-item kbd {
+ background-color: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ padding: var(--space-1) var(--space-2);
+ font-family: var(--font-mono);
+ font-size: var(--text-xs);
+ color: var(--color-text-primary);
+ margin: 0 var(--space-1);
+}
+
+.shortcut-item span {
+ color: var(--color-text-secondary);
+ font-size: var(--text-sm);
+}
+
+/* Enhanced Animations */
+.animate-on-scroll {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.6s ease-out;
+}
+
+.animate-on-scroll.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.stagger-item {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.4s ease-out;
+}
+
+.stagger-item.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Loading States */
+.skeleton {
+ background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+ border-radius: var(--radius-sm);
+}
+
+.stat-card.loading .stat-icon,
+.stat-card.loading .stat-value,
+.stat-card.loading .stat-label {
+ background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border) 50%, var(--color-bg-tertiary) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+ color: transparent;
+ border-radius: var(--radius-sm);
+}
+
+/* Progressive Enhancement */
+.no-js .search-container,
+.no-js .shortcuts-modal,
+.no-js .demo-modal {
+ display: none;
+}
+
+.js-enabled .enhanced-only {
+ display: block;
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-3);
+ }
+
+ .contributors-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .showcase-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .demo-modal-content {
+ max-width: 95vw;
+ margin: var(--space-4);
+ }
+
+ .shortcuts-content {
+ max-width: 95vw;
+ padding: var(--space-6);
+ }
+
+ .search-container {
+ max-width: 100%;
+ }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+ .stat-card,
+ .contributor-card,
+ .showcase-card {
+ border-width: 2px;
+ }
+
+ .search-input:focus {
+ border-width: 2px;
+ }
+}
+
+/* Print Styles */
+@media print {
+ .search-container,
+ .demo-modal,
+ .shortcuts-modal {
+ display: none;
+ }
+
+ .stat-card,
+ .contributor-card,
+ .showcase-card {
+ break-inside: avoid;
+ border: 1px solid #000;
+ }
+}
diff --git a/site/css/animations.css b/site/css/animations.css
new file mode 100644
index 0000000..b982ea7
--- /dev/null
+++ b/site/css/animations.css
@@ -0,0 +1,475 @@
+/* STRUCT Animations CSS */
+
+/* Keyframe Animations */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.05);
+ }
+}
+
+@keyframes glow {
+ 0%, 100% {
+ box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+ }
+ 50% {
+ box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
+ }
+}
+
+@keyframes gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+@keyframes typewriter {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+
+@keyframes blink {
+ 0%, 50% {
+ opacity: 1;
+ }
+ 51%, 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0px);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes bounce {
+ 0%, 20%, 53%, 80%, 100% {
+ transform: translate3d(0, 0, 0);
+ }
+ 40%, 43% {
+ transform: translate3d(0, -15px, 0);
+ }
+ 70% {
+ transform: translate3d(0, -7px, 0);
+ }
+ 90% {
+ transform: translate3d(0, -2px, 0);
+ }
+}
+
+@keyframes shake {
+ 0%, 100% {
+ transform: translateX(0);
+ }
+ 10%, 30%, 50%, 70%, 90% {
+ transform: translateX(-5px);
+ }
+ 20%, 40%, 60%, 80% {
+ transform: translateX(5px);
+ }
+}
+
+@keyframes loading {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+
+/* Animation Classes */
+.fade-in {
+ animation: fadeIn 0.6s ease-out forwards;
+}
+
+.slide-up {
+ animation: slideUp 0.4s ease-out forwards;
+}
+
+.slide-in-left {
+ animation: slideInLeft 0.5s ease-out forwards;
+}
+
+.slide-in-right {
+ animation: slideInRight 0.5s ease-out forwards;
+}
+
+.pulse {
+ animation: pulse 2s ease-in-out infinite;
+}
+
+.glow {
+ animation: glow 3s ease-in-out infinite;
+}
+
+.gradient-animation {
+ background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
+ background-size: 400% 400%;
+ animation: gradient 15s ease infinite;
+}
+
+.typewriter {
+ overflow: hidden;
+ border-right: 2px solid var(--color-primary);
+ white-space: nowrap;
+ animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
+}
+
+.float {
+ animation: float 3s ease-in-out infinite;
+}
+
+.spin {
+ animation: spin 1s linear infinite;
+}
+
+.bounce {
+ animation: bounce 2s infinite;
+}
+
+.shake {
+ animation: shake 0.5s ease-in-out;
+}
+
+.loading-animation {
+ background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+}
+
+/* Hover Animations */
+.hover-lift:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-lg);
+ transition: all var(--transition-normal);
+}
+
+.hover-scale:hover {
+ transform: scale(1.05);
+ transition: transform var(--transition-fast);
+}
+
+.hover-rotate:hover {
+ transform: rotate(5deg);
+ transition: transform var(--transition-normal);
+}
+
+.hover-glow:hover {
+ box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
+ transition: box-shadow var(--transition-normal);
+}
+
+.hover-blur:hover {
+ filter: blur(1px);
+ transition: filter var(--transition-fast);
+}
+
+/* Scroll Animations */
+.scroll-reveal {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 0.6s ease-out;
+}
+
+.scroll-reveal.revealed {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.scroll-reveal-left {
+ opacity: 0;
+ transform: translateX(-50px);
+ transition: all 0.6s ease-out;
+}
+
+.scroll-reveal-left.revealed {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.scroll-reveal-right {
+ opacity: 0;
+ transform: translateX(50px);
+ transition: all 0.6s ease-out;
+}
+
+.scroll-reveal-right.revealed {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+/* Staggered Animations */
+.stagger-1 {
+ animation-delay: 0.1s;
+}
+
+.stagger-2 {
+ animation-delay: 0.2s;
+}
+
+.stagger-3 {
+ animation-delay: 0.3s;
+}
+
+.stagger-4 {
+ animation-delay: 0.4s;
+}
+
+.stagger-5 {
+ animation-delay: 0.5s;
+}
+
+.stagger-6 {
+ animation-delay: 0.6s;
+}
+
+/* Hero Section Specific Animations */
+.hero-title {
+ animation: fadeIn 1s ease-out 0.5s both;
+}
+
+.hero-subtitle {
+ animation: fadeIn 1s ease-out 0.8s both;
+}
+
+.hero-actions {
+ animation: fadeIn 1s ease-out 1.1s both;
+}
+
+/* Feature Cards Animation */
+.feature-card {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.6s ease-out;
+}
+
+.feature-card.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.feature-card:nth-child(1) { animation-delay: 0.1s; }
+.feature-card:nth-child(2) { animation-delay: 0.2s; }
+.feature-card:nth-child(3) { animation-delay: 0.3s; }
+.feature-card:nth-child(4) { animation-delay: 0.4s; }
+.feature-card:nth-child(5) { animation-delay: 0.5s; }
+.feature-card:nth-child(6) { animation-delay: 0.6s; }
+
+/* Code Block Animations */
+.code-block {
+ position: relative;
+ overflow: hidden;
+}
+
+.code-block::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
+ transition: left 0.5s ease;
+}
+
+.code-block:hover::before {
+ left: 100%;
+}
+
+/* Button Ripple Effect */
+.btn {
+ position: relative;
+ overflow: hidden;
+}
+
+.btn::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.2);
+ transform: translate(-50%, -50%);
+ transition: width 0.3s ease, height 0.3s ease;
+}
+
+.btn:active::before {
+ width: 300px;
+ height: 300px;
+}
+
+/* Navigation Animation */
+.navbar {
+ transform: translateY(-100%);
+ animation: slideDown 0.5s ease-out 0.2s both;
+}
+
+@keyframes slideDown {
+ from {
+ transform: translateY(-100%);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+/* Loading States */
+.btn.loading {
+ pointer-events: none;
+ opacity: 0.7;
+}
+
+.btn.loading::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 16px;
+ height: 16px;
+ margin: -8px 0 0 -8px;
+ border: 2px solid transparent;
+ border-top-color: currentColor;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ .scroll-reveal,
+ .scroll-reveal-left,
+ .scroll-reveal-right {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+/* Dark/Light Theme Transitions */
+@media (prefers-color-scheme: light) {
+ :root {
+ transition: background-color 0.3s ease, color 0.3s ease;
+ }
+}
+
+/* Focus Animations */
+.btn:focus,
+.tab-button:focus,
+.demo-tab:focus {
+ animation: pulse 0.3s ease-in-out;
+}
+
+/* Success/Error States */
+.success {
+ animation: bounce 0.6s ease-in-out;
+}
+
+.error {
+ animation: shake 0.5s ease-in-out;
+}
+
+/* Particle Animation for Hero Background */
+@keyframes particle-float {
+ 0%, 100% {
+ transform: translateY(0px) rotate(0deg);
+ opacity: 0.3;
+ }
+ 50% {
+ transform: translateY(-20px) rotate(180deg);
+ opacity: 0.8;
+ }
+}
+
+.hero::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image:
+ radial-gradient(2px 2px at 20px 30px, rgba(0, 255, 136, 0.3), transparent),
+ radial-gradient(2px 2px at 40px 70px, rgba(0, 102, 255, 0.3), transparent),
+ radial-gradient(1px 1px at 90px 40px, rgba(255, 102, 0, 0.3), transparent);
+ background-size: 100px 100px;
+ animation: particle-float 20s ease-in-out infinite;
+ pointer-events: none;
+}
diff --git a/site/css/components.css b/site/css/components.css
new file mode 100644
index 0000000..8c12fab
--- /dev/null
+++ b/site/css/components.css
@@ -0,0 +1,631 @@
+/* STRUCT Components CSS */
+
+/* Navigation Bar */
+.navbar {
+ position: sticky;
+ top: 0;
+ z-index: var(--z-sticky);
+ background: rgba(10, 10, 10, 0.95);
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid var(--color-border);
+ padding: var(--space-4) 0;
+}
+
+.navbar-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-8); /* Add proper spacing between sections */
+}
+
+.navbar-brand {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ font-weight: 700;
+ font-size: var(--text-xl);
+ color: var(--color-primary);
+ flex-shrink: 0; /* Prevent logo from shrinking */
+}
+
+.navbar-nav {
+ display: flex;
+ gap: var(--space-6);
+ list-style: none;
+ margin-left: auto; /* Push navigation to the right side */
+ margin-right: var(--space-4); /* Add space before search/theme toggle */
+}
+
+.navbar-nav a {
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ transition: color var(--transition-fast);
+}
+
+.navbar-nav a:hover {
+ color: var(--color-primary);
+}
+
+/* Buttons */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
+ padding: var(--space-3) var(--space-6);
+ border: none;
+ border-radius: var(--radius-md);
+ font-family: var(--font-sans);
+ font-size: var(--text-base);
+ font-weight: 500;
+ line-height: 1;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+.btn:focus {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+.btn-primary {
+ background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+ color: var(--color-bg-primary);
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+}
+
+.btn-secondary {
+ background-color: transparent;
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover {
+ background-color: var(--color-bg-secondary);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+
+.btn-ghost {
+ background-color: transparent;
+ color: var(--color-text-secondary);
+}
+
+.btn-ghost:hover {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-primary);
+}
+
+.btn-lg {
+ padding: var(--space-4) var(--space-8);
+ font-size: var(--text-lg);
+}
+
+.btn-sm {
+ padding: var(--space-2) var(--space-4);
+ font-size: var(--text-sm);
+}
+
+/* Cards */
+.card {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-6);
+ transition: all var(--transition-normal);
+}
+
+.card:hover {
+ border-color: var(--color-primary);
+ box-shadow: var(--shadow-lg);
+ transform: translateY(-4px);
+}
+
+.card-header {
+ margin-bottom: var(--space-4);
+}
+
+.card-title {
+ font-size: var(--text-xl);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-2);
+}
+
+.card-description {
+ color: var(--color-text-secondary);
+ margin-bottom: 0;
+}
+
+.card-content {
+ margin-bottom: var(--space-4);
+}
+
+.card-footer {
+ border-top: 1px solid var(--color-border);
+ padding-top: var(--space-4);
+ margin-top: var(--space-4);
+}
+
+/* Hero Section */
+.hero {
+ background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
+ padding: var(--space-20) 0;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ radial-gradient(circle at 20% 20%, var(--color-primary) 0%, transparent 50%),
+ radial-gradient(circle at 80% 80%, var(--color-secondary) 0%, transparent 50%);
+ opacity: 0.1;
+ pointer-events: none;
+}
+
+.hero-content {
+ position: relative;
+ z-index: 1;
+}
+
+.hero-title {
+ font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
+ font-weight: 700;
+ margin-bottom: var(--space-6);
+ background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.hero-subtitle {
+ font-size: var(--text-xl);
+ color: var(--color-text-secondary);
+ max-width: 600px;
+ margin: 0 auto var(--space-8);
+}
+
+.hero-actions {
+ display: flex;
+ gap: var(--space-4);
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+/* Installation Tabs */
+.installation-tabs {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+}
+
+.tab-buttons {
+ display: flex;
+ background-color: var(--color-bg-tertiary);
+ border-bottom: 1px solid var(--color-border);
+}
+
+.tab-button {
+ flex: 1;
+ padding: var(--space-4);
+ background: none;
+ border: none;
+ color: var(--color-text-secondary);
+ font-family: var(--font-sans);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+ border-right: 1px solid var(--color-border);
+}
+
+.tab-button:last-child {
+ border-right: none;
+}
+
+.tab-button.active {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-primary);
+}
+
+.tab-button:hover:not(.active) {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-text-primary);
+}
+
+.tab-content {
+ padding: var(--space-6);
+}
+
+.tab-pane {
+ display: none;
+}
+
+.tab-pane.active {
+ display: block;
+}
+
+/* Code Block with Copy Button */
+.code-block {
+ position: relative;
+ margin: var(--space-4) 0;
+}
+
+.code-block pre {
+ margin: 0;
+ padding-right: var(--space-12);
+}
+
+.copy-button {
+ position: absolute;
+ top: var(--space-2);
+ right: var(--space-2);
+ background-color: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ color: var(--color-text-secondary);
+ padding: var(--space-2);
+ border-radius: var(--radius-sm);
+ cursor: pointer;
+ font-size: var(--text-xs);
+ transition: all var(--transition-fast);
+}
+
+.copy-button:hover {
+ background-color: var(--color-primary);
+ color: var(--color-bg-primary);
+}
+
+/* Feature Grid */
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: var(--space-6);
+ margin: var(--space-12) 0;
+}
+
+.feature-card {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-6);
+ text-align: center;
+ transition: all var(--transition-normal);
+}
+
+.feature-card:hover {
+ border-color: var(--color-primary);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.feature-icon {
+ font-size: var(--text-4xl);
+ margin-bottom: var(--space-4);
+ color: var(--color-primary);
+}
+
+.feature-title {
+ font-size: var(--text-xl);
+ font-weight: 600;
+ margin-bottom: var(--space-3);
+ color: var(--color-text-primary);
+}
+
+.feature-description {
+ color: var(--color-text-secondary);
+ line-height: 1.6;
+}
+
+/* GitHub Stats */
+.github-stats {
+ display: flex;
+ gap: var(--space-4);
+ justify-content: center;
+ flex-wrap: wrap;
+ margin: var(--space-8) 0;
+}
+
+.stat-item {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ padding: var(--space-4) var(--space-6);
+ text-align: center;
+ min-width: 120px;
+}
+
+.stat-value {
+ font-size: var(--text-2xl);
+ font-weight: 700;
+ color: var(--color-primary);
+ display: block;
+}
+
+.stat-label {
+ font-size: var(--text-sm);
+ color: var(--color-text-secondary);
+ margin-top: var(--space-1);
+}
+
+/* Demo Carousel */
+.demo-carousel {
+ position: relative;
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ margin: var(--space-8) 0;
+}
+
+.demo-tabs {
+ display: flex;
+ background-color: var(--color-bg-tertiary);
+ border-bottom: 1px solid var(--color-border);
+ overflow-x: auto;
+}
+
+.demo-tab {
+ padding: var(--space-3) var(--space-4);
+ background: none;
+ border: none;
+ color: var(--color-text-secondary);
+ font-family: var(--font-sans);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+ white-space: nowrap;
+ border-right: 1px solid var(--color-border);
+}
+
+.demo-tab:last-child {
+ border-right: none;
+}
+
+.demo-tab.active {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-primary);
+}
+
+.demo-tab:hover:not(.active) {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-text-primary);
+}
+
+.demo-content {
+ padding: var(--space-6);
+ text-align: center;
+}
+
+.demo-content-item {
+ display: none;
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+.demo-content-item.active {
+ display: block;
+}
+
+.demo-video {
+ max-width: 100%;
+ border-radius: var(--radius-md);
+ margin: var(--space-4) 0;
+}
+
+/* Footer */
+.footer {
+ background-color: var(--color-bg-secondary);
+ border-top: 1px solid var(--color-border);
+ padding: var(--space-12) 0 var(--space-8);
+ margin-top: var(--space-20);
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: var(--space-8);
+ margin-bottom: var(--space-8);
+}
+
+.footer-section h3 {
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-4);
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section li {
+ margin-bottom: var(--space-2);
+}
+
+.footer-section a {
+ color: var(--color-text-secondary);
+ transition: color var(--transition-fast);
+}
+
+.footer-section a:hover {
+ color: var(--color-primary);
+}
+
+.footer-bottom {
+ border-top: 1px solid var(--color-border);
+ padding-top: var(--space-6);
+ text-align: center;
+ color: var(--color-text-muted);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .navbar-nav {
+ display: none;
+ }
+
+ .hero-actions {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .btn {
+ width: 100%;
+ max-width: 300px;
+ }
+
+ .tab-buttons {
+ flex-direction: column;
+ }
+
+ .tab-button {
+ border-right: none;
+ border-bottom: 1px solid var(--color-border);
+ }
+
+ .tab-button:last-child {
+ border-bottom: none;
+ }
+
+ .github-stats {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .stat-item {
+ min-width: 200px;
+ }
+}
+
+/* Loading States */
+.loading {
+ opacity: 0.6;
+ pointer-events: none;
+}
+
+.skeleton {
+ background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+
+/* Utilities for JavaScript Components */
+.fade-in {
+ animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.slide-up {
+ animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+ from {
+ transform: translateY(10px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+/* Responsive Navigation */
+@media (max-width: 1024px) {
+ .navbar-content {
+ gap: var(--space-6); /* Reduce gap on tablets */
+ }
+
+ .navbar-nav {
+ gap: var(--space-4); /* Reduce menu item spacing */
+ margin-right: var(--space-3);
+ }
+}
+
+@media (max-width: 768px) {
+ .navbar {
+ padding: var(--space-3) 0; /* Reduce navbar height on mobile */
+ }
+
+ .navbar-content {
+ gap: var(--space-4); /* Further reduce gap on mobile */
+ flex-wrap: nowrap; /* Prevent wrapping */
+ }
+
+ .navbar-brand {
+ font-size: var(--text-lg); /* Slightly smaller logo text */
+ gap: var(--space-2);
+ }
+
+ .navbar-nav {
+ gap: var(--space-3); /* Tighter spacing on mobile */
+ margin-right: var(--space-2);
+ }
+
+ .navbar-nav a {
+ font-size: var(--text-sm); /* Smaller menu text */
+ padding: var(--space-2) 0; /* Add vertical padding for better touch targets */
+ }
+}
+
+@media (max-width: 640px) {
+ .navbar-content {
+ gap: var(--space-3);
+ }
+
+ .navbar-nav {
+ gap: var(--space-2);
+ margin-right: var(--space-1);
+ }
+
+ /* Hide some menu items on very small screens if needed */
+ .navbar-nav li:nth-child(n+4) {
+ display: none;
+ }
+}
+
+@media (max-width: 480px) {
+ .navbar-brand {
+ font-size: var(--text-base);
+ }
+
+ .navbar-nav {
+ gap: var(--space-1);
+ }
+
+ /* Show only essential menu items */
+ .navbar-nav li:nth-child(n+3) {
+ display: none;
+ }
+}
diff --git a/site/css/main.css b/site/css/main.css
new file mode 100644
index 0000000..9f0c6c3
--- /dev/null
+++ b/site/css/main.css
@@ -0,0 +1,341 @@
+/* STRUCT Modern Static Site - Main CSS */
+
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500&display=swap');
+
+/* CSS Custom Properties - Design System */
+:root {
+ /* Colors */
+ --color-primary: #00ff88;
+ --color-secondary: #0066ff;
+ --color-accent: #ff6600;
+ --color-bg-primary: #0a0a0a;
+ --color-bg-secondary: #1a1a1a;
+ --color-bg-tertiary: #2a2a2a;
+ --color-text-primary: #ffffff;
+ --color-text-secondary: #b0b0b0;
+ --color-text-muted: #888888;
+ --color-border: #333333;
+ --color-success: #00ff88;
+ --color-warning: #ffaa00;
+ --color-error: #ff4444;
+
+ /* Typography */
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-mono: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace;
+
+ /* Font Sizes */
+ --text-xs: 0.75rem; /* 12px */
+ --text-sm: 0.875rem; /* 14px */
+ --text-base: 1rem; /* 16px */
+ --text-lg: 1.125rem; /* 18px */
+ --text-xl: 1.25rem; /* 20px */
+ --text-2xl: 1.5rem; /* 24px */
+ --text-3xl: 1.875rem; /* 30px */
+ --text-4xl: 2.25rem; /* 36px */
+ --text-5xl: 3rem; /* 48px */
+ --text-6xl: 3.75rem; /* 60px */
+
+ /* Spacing */
+ --space-1: 0.25rem; /* 4px */
+ --space-2: 0.5rem; /* 8px */
+ --space-3: 0.75rem; /* 12px */
+ --space-4: 1rem; /* 16px */
+ --space-5: 1.25rem; /* 20px */
+ --space-6: 1.5rem; /* 24px */
+ --space-8: 2rem; /* 32px */
+ --space-10: 2.5rem; /* 40px */
+ --space-12: 3rem; /* 48px */
+ --space-16: 4rem; /* 64px */
+ --space-20: 5rem; /* 80px */
+
+ /* Border Radius */
+ --radius-sm: 0.25rem; /* 4px */
+ --radius-md: 0.5rem; /* 8px */
+ --radius-lg: 0.75rem; /* 12px */
+ --radius-xl: 1rem; /* 16px */
+ --radius-full: 9999px;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+
+ /* Transitions */
+ --transition-fast: 0.15s ease-in-out;
+ --transition-normal: 0.3s ease-in-out;
+ --transition-slow: 0.5s ease-in-out;
+
+ /* Z-index */
+ --z-dropdown: 1000;
+ --z-sticky: 1020;
+ --z-fixed: 1030;
+ --z-modal: 1040;
+ --z-popover: 1050;
+ --z-tooltip: 1060;
+}
+
+/* Reset and Base Styles */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+ font-size: 16px;
+}
+
+body {
+ font-family: var(--font-sans);
+ font-size: var(--text-base);
+ line-height: 1.6;
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-primary);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 600;
+ line-height: 1.2;
+ margin-bottom: var(--space-4);
+ color: var(--color-text-primary);
+}
+
+h1 { font-size: var(--text-6xl); }
+h2 { font-size: var(--text-4xl); }
+h3 { font-size: var(--text-2xl); }
+h4 { font-size: var(--text-xl); }
+h5 { font-size: var(--text-lg); }
+h6 { font-size: var(--text-base); }
+
+p {
+ margin-bottom: var(--space-4);
+ color: var(--color-text-secondary);
+}
+
+a {
+ color: var(--color-secondary);
+ text-decoration: none;
+ transition: color var(--transition-fast);
+}
+
+a:hover {
+ color: var(--color-primary);
+}
+
+/* Code Typography */
+code, pre {
+ font-family: var(--font-mono);
+ font-size: var(--text-sm);
+}
+
+code {
+ background-color: var(--color-bg-secondary);
+ padding: var(--space-1) var(--space-2);
+ border-radius: var(--radius-sm);
+ color: var(--color-primary);
+}
+
+pre {
+ background-color: var(--color-bg-secondary);
+ padding: var(--space-4);
+ border-radius: var(--radius-md);
+ overflow-x: auto;
+ border: 1px solid var(--color-border);
+}
+
+pre code {
+ background: none;
+ padding: 0;
+ color: var(--color-text-primary);
+}
+
+/* Layout */
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 var(--space-4);
+}
+
+.container-fluid {
+ width: 100%;
+ padding: 0 var(--space-4);
+}
+
+/* Responsive containers */
+@media (min-width: 640px) {
+ .container, .container-fluid {
+ padding: 0 var(--space-6);
+ }
+}
+
+@media (min-width: 1024px) {
+ .container, .container-fluid {
+ padding: 0 var(--space-8);
+ }
+}
+
+/* Grid System */
+.grid {
+ display: grid;
+ gap: var(--space-6);
+}
+
+.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (min-width: 768px) {
+ .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+ .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+ .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (min-width: 1024px) {
+ .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+ .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+ .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+
+/* Flexbox Utilities */
+.flex {
+ display: flex;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.gap-4 {
+ gap: var(--space-4);
+}
+
+.gap-6 {
+ gap: var(--space-6);
+}
+
+.gap-8 {
+ gap: var(--space-8);
+}
+
+/* Spacing Utilities */
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-8 { margin-bottom: var(--space-8); }
+.mb-12 { margin-bottom: var(--space-12); }
+
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-8 { margin-top: var(--space-8); }
+.mt-12 { margin-top: var(--space-12); }
+
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
+
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+
+/* Text Utilities */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-muted { color: var(--color-text-muted); }
+
+.font-mono { font-family: var(--font-mono); }
+.font-sans { font-family: var(--font-sans); }
+
+/* Background Utilities */
+.bg-primary { background-color: var(--color-bg-primary); }
+.bg-secondary { background-color: var(--color-bg-secondary); }
+.bg-tertiary { background-color: var(--color-bg-tertiary); }
+
+/* Border Utilities */
+.border { border: 1px solid var(--color-border); }
+.border-t { border-top: 1px solid var(--color-border); }
+.border-b { border-bottom: 1px solid var(--color-border); }
+
+.rounded { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* Animation Utilities */
+.transition {
+ transition: all var(--transition-normal);
+}
+
+.hover\:scale-105:hover {
+ transform: scale(1.05);
+}
+
+.hover\:shadow-lg:hover {
+ box-shadow: var(--shadow-lg);
+}
+
+/* Visibility */
+.hidden {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .md\:block {
+ display: block;
+ }
+
+ .md\:hidden {
+ display: none;
+ }
+}
+
+@media (min-width: 1024px) {
+ .lg\:block {
+ display: block;
+ }
+
+ .lg\:hidden {
+ display: none;
+ }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--color-border);
+ border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--color-text-muted);
+}
diff --git a/site/css/phase3.css b/site/css/phase3.css
new file mode 100644
index 0000000..ead4dc4
--- /dev/null
+++ b/site/css/phase3.css
@@ -0,0 +1,921 @@
+/* Phase 3: Advanced Features & Documentation Integration */
+
+/* ===== DOCUMENTATION INTEGRATION ===== */
+
+/* Quick Reference Guide */
+.quick-reference {
+ margin: 4rem 0;
+ padding: 0;
+}
+
+.quick-reference-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.quick-reference-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.reference-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-bottom: 3rem;
+}
+
+.reference-card {
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ padding: 2rem;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.reference-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+}
+
+.reference-card:hover::before {
+ transform: scaleX(1);
+}
+
+.reference-card:hover {
+ transform: translateY(-4px);
+ border-color: var(--color-primary);
+ box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1);
+}
+
+.reference-card-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1.5rem;
+}
+
+.reference-icon {
+ font-size: 1.5rem;
+ color: var(--color-primary);
+ margin-right: 1rem;
+}
+
+.reference-card-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin: 0;
+}
+
+.reference-content {
+ margin-bottom: 1.5rem;
+}
+
+.reference-item {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 1rem;
+ padding: 0.75rem;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 8px;
+ border-left: 3px solid var(--color-primary);
+}
+
+.reference-item-icon {
+ color: var(--color-primary);
+ margin-right: 0.75rem;
+ margin-top: 0.125rem;
+ flex-shrink: 0;
+}
+
+.reference-item-content {
+ flex: 1;
+}
+
+.reference-item-title {
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+ color: var(--color-text-primary);
+}
+
+.reference-item-description {
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ line-height: 1.4;
+}
+
+.reference-code {
+ background: rgba(0, 0, 0, 0.4);
+ padding: 0.5rem;
+ border-radius: 4px;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ color: var(--color-primary);
+ margin-top: 0.5rem;
+ overflow-x: auto;
+}
+
+/* API Documentation Preview */
+.api-preview {
+ margin: 4rem 0;
+ padding: 0;
+}
+
+.api-preview-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.api-preview-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.api-tabs {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 2rem;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.api-tab {
+ background: none;
+ border: none;
+ color: var(--color-text-secondary);
+ font-size: 1rem;
+ font-weight: 500;
+ padding: 1rem 2rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+}
+
+.api-tab.active {
+ color: var(--color-primary);
+}
+
+.api-tab.active::after {
+ content: '';
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: var(--color-primary);
+}
+
+.api-tab:hover {
+ color: var(--color-primary);
+}
+
+.api-content {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.api-panel {
+ display: none;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ padding: 2rem;
+}
+
+.api-panel.active {
+ display: block;
+ animation: fadeIn 0.3s ease;
+}
+
+.api-section {
+ margin-bottom: 2rem;
+}
+
+.api-section-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: var(--color-text-primary);
+}
+
+.api-method {
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ padding: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.api-method-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.api-method-type {
+ background: var(--color-primary);
+ color: var(--color-bg-primary);
+ padding: 0.25rem 0.75rem;
+ border-radius: 4px;
+ font-weight: 600;
+ font-size: 0.75rem;
+ margin-right: 1rem;
+}
+
+.api-method-name {
+ font-family: var(--font-mono);
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.api-method-description {
+ color: var(--color-text-secondary);
+ margin-bottom: 1rem;
+ line-height: 1.6;
+}
+
+.api-code-block {
+ background: rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 6px;
+ padding: 1rem;
+ font-family: var(--font-mono);
+ font-size: 0.875rem;
+ color: var(--color-text-primary);
+ overflow-x: auto;
+ position: relative;
+}
+
+.api-code-copy {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ color: var(--color-text-secondary);
+ padding: 0.5rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.api-code-copy:hover {
+ background: rgba(255, 255, 255, 0.2);
+ color: var(--color-text-primary);
+}
+
+/* Getting Started Wizard */
+.getting-started-wizard {
+ margin: 4rem 0;
+ padding: 0;
+}
+
+.wizard-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.wizard-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.wizard-container {
+ max-width: 900px;
+ margin: 0 auto;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 16px;
+ padding: 3rem;
+ position: relative;
+}
+
+.wizard-progress {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 3rem;
+ position: relative;
+}
+
+.wizard-progress::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: var(--color-border);
+ z-index: 1;
+}
+
+.wizard-progress-line {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ height: 2px;
+ background: var(--color-primary);
+ z-index: 2;
+ transition: width 0.5s ease;
+}
+
+.wizard-step {
+ background: var(--color-bg-primary);
+ border: 2px solid var(--color-border);
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ color: var(--color-text-secondary);
+ position: relative;
+ z-index: 3;
+ transition: all 0.3s ease;
+}
+
+.wizard-step.active {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+ background: rgba(0, 255, 136, 0.1);
+}
+
+.wizard-step.completed {
+ border-color: var(--color-primary);
+ background: var(--color-primary);
+ color: var(--color-bg-primary);
+}
+
+.wizard-content {
+ min-height: 300px;
+}
+
+.wizard-panel {
+ display: none;
+}
+
+.wizard-panel.active {
+ display: block;
+ animation: slideInRight 0.3s ease;
+}
+
+.wizard-panel-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: var(--color-text-primary);
+}
+
+.wizard-panel-description {
+ color: var(--color-text-secondary);
+ margin-bottom: 2rem;
+ line-height: 1.6;
+}
+
+.wizard-options {
+ display: grid;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.wizard-option {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ padding: 1.5rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ user-select: none;
+}
+
+.wizard-option * {
+ pointer-events: none; /* Ensure clicks bubble up to the option */
+}
+
+.wizard-option:hover {
+ border-color: var(--color-primary);
+ background: rgba(0, 255, 136, 0.05);
+ transform: translateY(-2px);
+}
+
+.wizard-option.selected {
+ border-color: var(--color-primary);
+ background: rgba(0, 255, 136, 0.1);
+}
+
+.wizard-option-title {
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ color: var(--color-text-primary);
+}
+
+.wizard-option-description {
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+}
+
+.wizard-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 2rem;
+}
+
+.wizard-btn {
+ background: var(--color-primary);
+ border: none;
+ color: var(--color-bg-primary);
+ padding: 0.75rem 2rem;
+ border-radius: 8px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.wizard-btn:hover {
+ background: var(--color-primary-dark);
+ transform: translateY(-2px);
+}
+
+.wizard-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.wizard-btn-secondary {
+ background: transparent;
+ border: 1px solid var(--color-border);
+ color: var(--color-text-secondary);
+}
+
+.wizard-btn-secondary:hover {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+ background: rgba(0, 255, 136, 0.05);
+}
+
+/* ===== COMMUNITY & SOCIAL PROOF ===== */
+
+/* Community Section */
+.community {
+ margin: 4rem 0;
+ padding: 4rem 0;
+ background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 102, 255, 0.05));
+ border-radius: 20px;
+ position: relative;
+ overflow: hidden;
+}
+
+.community::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(circle at 20% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 80% 20%, rgba(0, 102, 255, 0.1) 0%, transparent 50%);
+}
+
+.community-content {
+ position: relative;
+ z-index: 1;
+}
+
+.community-header {
+ text-align: center;
+ margin-bottom: 4rem;
+}
+
+.community-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.community-subtitle {
+ font-size: 1.25rem;
+ color: var(--color-text-secondary);
+ max-width: 600px;
+ margin: 0 auto;
+ line-height: 1.6;
+}
+
+.community-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-bottom: 3rem;
+}
+
+.community-card {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 16px;
+ padding: 2rem;
+ text-align: center;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.community-card:hover {
+ transform: translateY(-8px);
+ border-color: var(--color-primary);
+ box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1);
+}
+
+.community-card-icon {
+ font-size: 3rem;
+ color: var(--color-primary);
+ margin-bottom: 1rem;
+}
+
+.community-card-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: var(--color-text-primary);
+}
+
+.community-card-description {
+ color: var(--color-text-secondary);
+ margin-bottom: 1.5rem;
+ line-height: 1.6;
+}
+
+.community-card-action {
+ background: var(--color-primary);
+ color: var(--color-bg-primary);
+ text-decoration: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 8px;
+ font-weight: 600;
+ display: inline-block;
+ transition: all 0.3s ease;
+}
+
+.community-card-action:hover {
+ background: var(--color-primary-dark);
+ transform: translateY(-2px);
+}
+
+/* Testimonials */
+.testimonials {
+ margin: 4rem 0;
+}
+
+.testimonials-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.testimonials-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.testimonials-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 2rem;
+}
+
+.testimonial {
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 16px;
+ padding: 2rem;
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.testimonial::before {
+ content: '"';
+ position: absolute;
+ top: -10px;
+ left: 20px;
+ font-size: 4rem;
+ color: var(--color-primary);
+ opacity: 0.3;
+ font-family: serif;
+}
+
+.testimonial:hover {
+ transform: translateY(-4px);
+ border-color: var(--color-primary);
+ box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1);
+}
+
+.testimonial-content {
+ margin-bottom: 1.5rem;
+ font-style: italic;
+ color: var(--color-text-primary);
+ line-height: 1.7;
+ font-size: 1.1rem;
+}
+
+.testimonial-author {
+ display: flex;
+ align-items: center;
+}
+
+.testimonial-avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 1rem;
+ border: 2px solid var(--color-primary);
+}
+
+.testimonial-info {
+ flex: 1;
+}
+
+.testimonial-name {
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 0.25rem;
+}
+
+.testimonial-role {
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+}
+
+/* Project Showcase */
+.project-showcase {
+ margin: 4rem 0;
+}
+
+.showcase-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.showcase-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.showcase-filters {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-bottom: 3rem;
+}
+
+.showcase-filter {
+ background: transparent;
+ border: 1px solid var(--color-border);
+ color: var(--color-text-secondary);
+ padding: 0.5rem 1.5rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 500;
+}
+
+.showcase-filter.active,
+.showcase-filter:hover {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+ background: rgba(0, 255, 136, 0.1);
+}
+
+.showcase-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 2rem;
+}
+
+.showcase-project {
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 16px;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ position: relative;
+}
+
+.showcase-project:hover {
+ transform: translateY(-8px);
+ border-color: var(--color-primary);
+ box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1);
+}
+
+.showcase-project-image {
+ width: 100%;
+ height: 200px;
+ background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 3rem;
+ color: var(--color-bg-primary);
+ position: relative;
+ overflow: hidden;
+}
+
+.showcase-project-image::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+ transform: translateX(-100%);
+ transition: transform 0.6s ease;
+}
+
+.showcase-project:hover .showcase-project-image::before {
+ transform: translateX(100%);
+}
+
+.showcase-project-content {
+ padding: 2rem;
+}
+
+.showcase-project-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ color: var(--color-text-primary);
+}
+
+.showcase-project-description {
+ color: var(--color-text-secondary);
+ margin-bottom: 1.5rem;
+ line-height: 1.6;
+}
+
+.showcase-project-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.showcase-project-tag {
+ background: rgba(0, 255, 136, 0.1);
+ color: var(--color-primary);
+ padding: 0.25rem 0.75rem;
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 500;
+}
+
+.showcase-project-links {
+ display: flex;
+ gap: 1rem;
+}
+
+.showcase-project-link {
+ color: var(--color-primary);
+ text-decoration: none;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ transition: all 0.3s ease;
+}
+
+.showcase-project-link:hover {
+ color: var(--color-primary-dark);
+ transform: translateY(-2px);
+}
+
+.showcase-project-link i {
+ margin-right: 0.5rem;
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+
+@media (max-width: 768px) {
+ .reference-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .api-tabs {
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .api-tab {
+ padding: 0.75rem 1rem;
+ font-size: 0.875rem;
+ }
+
+ .wizard-container {
+ padding: 2rem 1rem;
+ }
+
+ .wizard-progress {
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .community-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .testimonials-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .showcase-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .showcase-filters {
+ justify-content: flex-start;
+ }
+}
+
+/* ===== ANIMATIONS ===== */
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* ===== PERFORMANCE OPTIMIZATIONS ===== */
+
+/* Critical rendering path optimizations */
+.reference-card,
+.api-panel,
+.wizard-panel,
+.community-card,
+.testimonial,
+.showcase-project {
+ contain: layout style paint;
+}
+
+/* GPU acceleration for animations */
+.reference-card,
+.community-card,
+.testimonial,
+.showcase-project {
+ will-change: transform;
+}
+
+.reference-card:not(:hover),
+.community-card:not(:hover),
+.testimonial:not(:hover),
+.showcase-project:not(:hover) {
+ will-change: auto;
+}
diff --git a/site/demos/advanced-features.gif b/site/demos/advanced-features.gif
new file mode 100644
index 0000000..a4e6efe
Binary files /dev/null and b/site/demos/advanced-features.gif differ
diff --git a/site/demos/basic-usage.gif b/site/demos/basic-usage.gif
new file mode 100644
index 0000000..41ad376
Binary files /dev/null and b/site/demos/basic-usage.gif differ
diff --git a/site/demos/install.gif b/site/demos/install.gif
new file mode 100644
index 0000000..45a7d5e
Binary files /dev/null and b/site/demos/install.gif differ
diff --git a/site/demos/mappings-demo.gif b/site/demos/mappings-demo.gif
new file mode 100644
index 0000000..38d537f
Binary files /dev/null and b/site/demos/mappings-demo.gif differ
diff --git a/site/demos/multiple-mappings.gif b/site/demos/multiple-mappings.gif
new file mode 100644
index 0000000..b8361a7
Binary files /dev/null and b/site/demos/multiple-mappings.gif differ
diff --git a/site/demos/remote-content.gif b/site/demos/remote-content.gif
new file mode 100644
index 0000000..a6a3ef2
Binary files /dev/null and b/site/demos/remote-content.gif differ
diff --git a/site/demos/schema-generation.gif b/site/demos/schema-generation.gif
new file mode 100644
index 0000000..1210687
Binary files /dev/null and b/site/demos/schema-generation.gif differ
diff --git a/site/demos/yaml-config.gif b/site/demos/yaml-config.gif
new file mode 100644
index 0000000..a478182
Binary files /dev/null and b/site/demos/yaml-config.gif differ
diff --git a/site/images/favicon.svg b/site/images/favicon.svg
new file mode 100644
index 0000000..f6e9ecc
--- /dev/null
+++ b/site/images/favicon.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/index.html b/site/index.html
index 41c6b43..a16a407 100644
--- a/site/index.html
+++ b/site/index.html
@@ -12,109 +12,100 @@
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-M4X52F2D');
+
STRUCT - Automated Project Structure Generator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ max-width: 800px; -->
@@ -122,44 +113,491 @@
-
-
-
- Welcome to the official website of STRUCT. Generate your project structures effortlessly using YAML
- configurations.
-
-
-
- Features
-
- YAML Configuration: Define your project structure in a simple YAML file.
- Template Variables: Use placeholders and custom filters for dynamic content.
- Custom File Permissions: Set permissions directly from the YAML configuration.
- Remote Content Fetching: Include content from remote sources effortlessly.
- File Handling Strategies: Choose from overwrite, skip, append, rename, or backup options.
-
- Dry Run: Preview actions without making changes.
- Configuration Validation: Validate your YAML file before execution.
- Verbose Logging: Access detailed logs for debugging and monitoring.
+
+
+
+
+
+
+
+
+
+
STRUCT
+
+ Powerful, flexible tool for automating project structure creation through YAML configurations.
+ Generate consistent project layouts, boilerplate code, and configurations with template variables.
+
+
+
+
+
+
+
+
+
+
+
+
✨ Key Features
+
+
+
📝
+
YAML-Based Configuration
+
+ Define project structures in simple, readable YAML files with intuitive syntax and validation.
+
+
+
+
🔧
+
Template Variables
+
+ Dynamic content with Jinja2 templating, interactive prompts, and custom filters for flexibility.
+
+
+
+
🌐
+
Remote Content
+
+ Fetch files from GitHub, HTTP/HTTPS, S3, and Google Cloud Storage with automatic content handling.
+
+
+
+
🛡️
+
Smart File Handling
+
+ Multiple strategies for managing existing files: overwrite, skip, backup, append, and more.
+
+
+
+
🪝
+
Automation Hooks
+
+ Pre and post-generation shell commands for complete workflow automation and integration.
+
+
+
+
🎯
+
Dry Run Mode
+
+ Preview changes before applying them with detailed output and validation checks.
+
+
+
+
+
+
+
+
+
+
🚀 Quick Installation
+
+
+ pip install
+ Docker
+ From Source
+
+
+
+
Install via pip
+
+
Copy
+
# Install from GitHub
+pip install git+https://github.com/httpdss/struct.git
+
+# Verify installation
+struct --version
+
+
+ Requires Python 3.8+ and pip. This is the recommended installation method for most users.
+
+
+
+
Run with Docker
+
+
Copy
+
# Pull and run with Docker
+docker run -v $(pwd):/workdir ghcr.io/httpdss/struct:main generate my-config.yaml ./output
+
+# Create an alias for easier usage
+alias struct='docker run -v $(pwd):/workdir ghcr.io/httpdss/struct:main'
+
+
+ Perfect for CI/CD environments and when you don't want to install Python locally.
+
+
+
+
Install from Source
+
+
Copy
+
# Clone the repository
+git clone https://github.com/httpdss/struct.git
+cd struct
+
+# Install in development mode
+pip install -e .
+
+# Run tests
+python -m pytest tests/
+
+
+ For contributors and users who want the latest development features.
+
+
+
+
+
+
+
+
+
+
+
🎬 Interactive Demos
+
+
+ Basic Usage
+ YAML Config
+ Mappings
+ Remote Content
+ Advanced Features
+
+
+
+
Basic Project Generation
+
+
+ See how easy it is to generate a complete project structure with a simple YAML configuration.
+
+
+
+
YAML Configuration
+
+
+ Learn how to write effective YAML configurations with variables and templates.
+
+
+
+
External Mappings
+
+
+ Discover how to use external data mappings for dynamic project generation.
+
+
+
+
Remote Content Fetching
+
+
+ See how to fetch templates and content from GitHub, HTTP URLs, and cloud storage.
+
+
+
+
Advanced Features
+
+
+ Explore hooks, validation, dry-run mode, and other advanced capabilities.
+
+
+
+
+
+
+
+
+
+
+
⚡ Quick Start
+
+
+
+
+
+
Copy
+
# my-project.yaml
+files:
+ - README.md:
+ content: |
+ # {{@ project_name @}}
+ Generated with STRUCT
+
+folders:
+ - src/:
+ struct: project/python
+
+variables:
+ - project_name:
+ description: "Project name"
+ type: string
+
+
+
+
+
+
+
+
Copy
+
# Generate structure
+struct generate my-project.yaml ./my-app
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📚 Documentation
+
+
+
+
+
+ Installation guides, quick start tutorials, and basic usage examples to get you up and running.
+
+
+
+
+
+
+
+
+ Complete YAML configuration reference, template variables, and file handling strategies.
+
+
+
+
+
+
+
+
+ Real-world examples, templates, and practical use cases for various project types.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+