TerraConstructs Landing Page

A modern, neobrutalist landing page for TerraConstructs - the CDKTF L2 Constructs library that synthesizes to Terraform/OpenTofu.

🚀 Quick Start

Development

# Install dependencies
pnpm install

# Start Vite development server with hot reload
pnpm run dev

Visit: http://localhost:8080 (opens automatically)

Production Build

# Build optimized production bundles
pnpm run build

# Preview production build locally
pnpm run preview

📁 Project Structure

├── index.html              # Main HTML file
├── package.json           # Dependencies and scripts
├── vite.config.js         # Vite configuration
├── postcss.config.js      # PostCSS configuration
├── tailwind.config.js     # Tailwind CSS configuration
├── src/
│   ├── style.css          # Source CSS with Tailwind + custom styles
│   ├── main.js            # Main JavaScript entry point
│   ├── demo-section.js    # Demo orchestration (dropdown, run, badges, tour)
│   └── code-view.js       # Presents precomputed code HTML (editor/output)
├── public/
│   └── logos/             # Static logo assets
└── dist/                  # Built assets (generated by Vite)

🛠️ Development Commands

# Development
pnpm run dev             # Start Vite dev server with HMR
pnpm run build           # Build for production
pnpm run preview         # Preview production build locally
pnpm run clean           # Clean dist/ directory

🔒 Security

Content Security Policy (CSP)

• Development: CSP disabled for easier development
• Production: Nonce-based CSP with proper headers
• Headers: X-Frame-Options, X-Content-Type-Options, etc.

Best Practices

• No inline event handlers
• External resources from trusted CDNs only
• Proper HTTPS configuration in production
• Security headers across all deployment methods

🧪 Testing

Manual Testing

# Test different viewports
npm run dev
# Visit localhost:8080 and test mobile/desktop

Validation

• HTML: Valid semantic HTML5
• CSS: Tailwind classes, no unused CSS
• JS: ES2020+ syntax, no console errors
• A11y: Focus states, ARIA labels, semantic structure

📚 Documentation

• DEPLOYMENT.md - Production deployment guide
• SPEC.md - Original design specification
• deploy/*/README.md - Platform-specific deployment docs

🤝 Contributing

This landing page showcases TerraConstructs. For the main project:

• GitHub: https://github.com/terraconstructs/base
• Discord: https://discord.gg/gEu3D8hJGz
• Docs: https://constructs.dev/packages/terraconstructs

📄 License

Apache License 2.0 - see LICENSE