This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Terraform Infrastructure Builder" tool. This tool aims to provide a highly intuitive and guided experience for generating production-ready Terraform configurations for cloud infrastructure.

Terraform Infrastructure Builder: Design & UX Specification

1. Introduction

The Terraform Infrastructure Builder is designed to democratize cloud infrastructure provisioning by enabling users to generate robust, secure, and best-practice-compliant Terraform configurations through a user-friendly interface. This eliminates the need for deep Terraform expertise for common infrastructure patterns, while still providing advanced options for seasoned professionals.

2. Core Objectives

• Simplicity: Provide an intuitive step-by-step workflow for infrastructure definition.
• Best Practices: Automatically incorporate cloud provider and Terraform best practices (e.g., security groups, naming conventions, module usage).
• Flexibility: Allow for customization and advanced configuration where needed.
• Visibility: Offer clear insights into the generated infrastructure and associated costs.
• Actionability: Produce ready-to-deploy Terraform code with clear instructions.
• Cloud Agnostic (Initial Focus AWS, Azure, GCP): Support major cloud providers with a consistent user experience.

3. Detailed Design Specifications

The builder will be a web-based application, structured around a modular, wizard-driven workflow.

3.1. Application Architecture

• Frontend: Modern JavaScript framework (e.g., React, Vue, Angular) for a dynamic and responsive user interface.
• Backend: API-driven service responsible for:

* User/Project management.

* Cloud provider API integration (for region/service discovery, best practices).

* Terraform module orchestration and generation logic.

* State management for user configurations.

* Cost estimation integration (if applicable).

• Terraform Engine: Utilizes pre-validated, modular Terraform code templates and configurations to ensure production readiness.

3.2. Key Modules & Features

1. Project & Workspace Management:

* Create, view, edit, and delete infrastructure projects.

* Each project represents a distinct Terraform root module.

* Version control integration (e.g., connect to Git repositories for output).

1. Cloud Provider Selection:

* Initial choice between AWS, Azure, GCP.

* Region/Availability Zone selection.

1. Networking (VPC/VNet/VCN) Configuration:

* Define primary CIDR block.

* Create public and private subnets across multiple Availability Zones.

* Configure Internet Gateways, NAT Gateways, VPNs, Peering connections.

* Route table management.

1. Compute Configuration:

* Virtual Machines (EC2/VMs):

* Instance type, OS image, CPU/RAM, storage.

* Associated subnets, security groups/NSGs.

* Auto Scaling Groups (min/max/desired capacity, scaling policies).

* User data/Cloud-init scripts.

* Containers (ECS/EKS/AKS/GKE):

* Cluster creation (type, size, node groups).

* Basic service/deployment definitions.

1. Storage Configuration:

* Object Storage (S3/GCS/Blob Storage):

* Bucket/Container creation, naming, versioning, encryption, lifecycle policies.

* Block Storage (EBS/Managed Disks):

* Volume size, type, encryption, attachment options.

* File Storage (EFS/Azure Files/Cloud Filestore):

* Basic file system creation and mounting options.

1. Database Configuration:

* Managed Databases (RDS/Cloud SQL/Azure SQL DB):

* Database engine, version, instance class, storage size, multi-AZ/HA.

* Security group/NSG association, backup policies.

* Initial database creation and user setup.

1. Load Balancing & CDN:

* Application Load Balancers (ALB/Application Gateway/HTTP(S) Load Balancing).

* Network Load Balancers (NLB/Standard Load Balancer/TCP/UDP Load Balancing).

* Target groups, listener rules.

* Basic CDN integration (CloudFront/Azure CDN/Cloud CDN).

1. Security & Compliance:

* Centralized Security Group/Network Security Group management (ingress/egress rules).

* IAM Roles/Service Accounts with least-privilege recommendations.

* Key Management Service (KMS/Key Vault/Cloud KMS) integration for encryption.

1. Review & Generation:

* Comprehensive summary of all selected resources and their configurations.

* Estimated monthly cost breakdown (optional, but highly desirable).

* Validation report highlighting potential issues or warnings.

* "Generate Terraform" button.

1. Output & Management:

* Downloadable .zip file containing:

main.tf (or modular .tf files).

* variables.tf

* outputs.tf

* versions.tf

* README.md with deployment instructions (terraform init, plan, apply).

* Option to push generated code directly to a connected Git repository.

* Instructions for setting up cloud provider credentials.

4. Wireframe Descriptions

The user interface will follow a multi-step wizard pattern, complemented by visual aids and contextual information.

4.1. Dashboard / Project Selection

• Layout: Left sidebar for navigation (Dashboard, Projects, Templates, Settings). Main content area for project list.
• Elements:

* "Create New Project" button (prominent).

* Table/Card view of existing projects: Project Name, Cloud Provider, Last Modified, Status (e.g., "Draft", "Generated"), Actions (Edit, View Output, Delete).

* Search and filter options for projects.

• Interaction: Clicking "Create New Project" initiates the wizard. Clicking an existing project allows editing or viewing generated output.

4.2. Step 1: Project & Cloud Provider Setup

• Layout: Centered form with a progress indicator at the top (e.g., "1/7: Provider Setup").
• Elements:

* Project Name input field.

* Cloud Provider dropdown (AWS, Azure, Google Cloud).

* Region dropdown (dynamically populated based on provider).

* Optional: "Use Template" dropdown (e.g., "2-Tier Web App", "Data Lake Foundation").

* "Next" button.

• Interaction: Selecting a provider will update available regions.

4.3. Step 2: Networking Configuration

• Layout: Two-column layout. Left: Configuration forms. Right: Visual topology diagram.
• Elements:

* VPC/VNet: CIDR Block input, name.

* Subnets: "Add Subnet" button. For each subnet: Name, CIDR, Type (Public/Private), Availability Zone dropdown.

* Gateways: Checkboxes for Internet Gateway, NAT Gateway (with instance type/subnet selection), VPN (basic config).

* Visualizer: A dynamic diagram showing the VPC, subnets, and gateways as they are configured. Lines connecting resources.

• Interaction: Adding subnets updates the visualizer. Input validation for CIDR overlaps.

4.4. Step 3: Compute Configuration

• Layout: Tabbed interface for VM Instances, Load Balancers, Container Clusters. Each tab has a list of configured resources and an "Add New" button.
• Elements (VM Instances Tab):

* "Add VM Instance" button.

* Form for VM: Name, Instance Type, OS Image, Count, Subnet dropdown, Security Group dropdown (with "Create New Security Group" option), User Data text area.

* For Auto Scaling Group: Min/Max/Desired capacity, scaling policies.

• Interaction: Selecting a subnet filters available security groups. Creating a new security group temporarily opens a modal.

4.5. Step 4: Storage Configuration

• Layout: Similar to Compute, with tabs for Object Storage, Block Storage, File Storage.
• Elements (Object Storage Tab):

* "Add Bucket" button.

* Form for Bucket: Name, Versioning (checkbox), Encryption (dropdown), Lifecycle Rules (add rule button).

• Interaction: Adding lifecycle rules opens a sub-form.

4.6. Step 5: Database Configuration

• Layout: List of databases with "Add Database" button.
• Elements:

* Form for Database: Engine, Version, Instance Class, Storage Size, Multi-AZ (checkbox), Subnet Group, Security Group, Master Username/Password.

• Interaction: Subnet Group dropdown dynamically created based on selected subnets in Step 2.

4.7. Step 6: Security Configuration (Centralized)

• Layout: Table view of all Security Groups/Network Security Groups identified/created, with options to edit ingress/egress rules.
• Elements:

* Table: SG Name, Associated Resources, Ingress Rules (summary), Egress Rules (summary), Actions (Edit Rules).

* Edit Rules Modal: Add/Remove rules (Protocol, Port, Source/Destination CIDR/SG).

• Interaction: Editing rules in the modal updates the table summary.

4.8. Step 7: Review & Generate

• Layout: Full-width summary view, broken down by resource type (Networking, Compute, Storage, etc.).
• Elements:

* Collapsible sections for each resource category, showing a high-level summary of configured items.

* "Estimated Cost" section (if implemented).

* "Validation Report" section (list of warnings/errors, e.g., "Missing security group for DB").

* "Back" and "Generate Terraform" buttons.

• Interaction: Users can click on a resource summary to jump back to the relevant configuration step. "Generate Terraform" button initiates backend processing.

4.9. Output View

• Layout: Code editor area, download button, Git integration section.
• Elements:

* Code Editor: Displays main.tf by default, with tabs for variables.tf, outputs.tf, versions.tf. Syntax highlighting.

* "Download All Files (.zip)" button.

* "Push to Git Repository" section: Connect to GitHub/GitLab/Bitbucket, select repository, commit message input, "Push" button.

* "Next Steps" instructions: terraform init, terraform plan, terraform apply commands.

• Interaction: Users can copy code snippets or download the entire project.

5. Color Palettes

A professional, clean, and modern aesthetic will be adopted, using a palette that is easy on the eyes and provides good contrast for accessibility.

• Primary Brand Color: #007BFF (A vibrant, trustworthy blue - common for tech/SaaS)
• Secondary Accent Color: #28A745 (A clear green for success, positive actions)
• Tertiary Accent Color: #FFC107 (A warm yellow for warnings, emphasis)
• Danger/Error Color: #DC3545 (A strong red for errors, destructive actions)
• Neutral Palette:

* Text: #343A40 (Dark charcoal for primary text)

* Subtle Text/Icons: #6C757D (Medium gray for secondary text, disabled states)

* Borders/Dividers: #DEE2E6 (Light gray for subtle separation)

* Backgrounds:

* #F8F9FA (Very light gray for main content areas)

* `

As a professional deliverable for the "Terraform Infrastructure Builder" workflow, this document outlines the comprehensive design specifications, wireframe descriptions, color palettes, and UX recommendations for a robust and intuitive platform. The goal is to enable users to generate production-ready Terraform configurations for cloud infrastructure efficiently and reliably.

Terraform Infrastructure Builder: Design Specifications

1. Project Overview

The Terraform Infrastructure Builder is a web-based application designed to simplify and accelerate the process of generating production-grade Terraform configurations for various cloud providers. It will provide a guided, interactive experience, enabling users to define their desired infrastructure components (VPC, compute, storage, databases, networking) through a user-friendly interface, which then translates these selections into executable Terraform code.

2. Functional Requirements

2.1. Core Infrastructure Configuration

• Cloud Provider Selection:

* Ability to select target cloud provider (e.g., AWS, Azure, GCP).

* Provider-specific resource options and validations.

• Region/Availability Zone Selection:

* Define the primary and secondary regions for infrastructure deployment.

* Select specific Availability Zones within chosen regions.

• Virtual Private Cloud (VPC) / Virtual Network Configuration:

* Define VPC CIDR blocks.

* Create public and private subnets, specifying CIDR blocks for each.

* Configure Internet Gateways, NAT Gateways, and VPN Gateways.

* Define Route Tables and their associations.

* Support for VPC peering configurations.

• Compute Resources (Instances/VMs):

* Select instance types (e.g., t3.medium, m5.large).

* Choose operating system images (AMIs, marketplace images).

* Configure instance count, auto-scaling groups, and launch configurations.

* Define user data/bootstrapping scripts.

* Attach/detach Elastic IP addresses.

* Integrate with Load Balancers (ALB, NLB, ELB).

• Storage Services:

* Block Storage (e.g., EBS, Managed Disks):

* Specify volume type (gp2, io1, st1), size, IOPS.

* Enable encryption.

* Attach to compute instances.

* Object Storage (e.g., S3, Blob Storage):

* Create buckets/containers, specify names, regions.

* Configure access policies (ACLs, Bucket Policies).

* Enable versioning, logging, encryption (SSE-S3, KMS).

* Lifecycle management rules.

• Database Services (e.g., RDS, Aurora, Cloud SQL, Cosmos DB):

* Select database engine (MySQL, PostgreSQL, SQL Server, Oracle, MongoDB, Cassandra).

* Configure instance class, storage size, and IOPS.

* Define multi-AZ deployment, read replicas.

* Set master username and password.

* Configure backup retention, snapshots, and encryption.

* Specify security group access.

• Networking & Security:

* Security Groups / Network Security Groups:

* Define ingress/egress rules (ports, protocols, source/destination CIDRs).

* Associate with instances, load balancers, databases.

* Network ACLs (NACLs):

* Define inbound/outbound rules (ports, protocols, source/destination CIDRs, allow/deny).

* DNS Services (e.g., Route 53, Cloud DNS):

* Create hosted zones.

* Define A, CNAME, MX, TXT records.

* Configure routing policies (simple, weighted, latency, failover).

• Module Management:

* Pre-built Module Library: Access to a curated library of battle-tested Terraform modules for common patterns (e.g., ECS cluster, EKS cluster, serverless functions).

* Custom Module Integration: Ability to upload or link to custom Terraform modules from Git repositories.

• Output Generation:

* Generate a complete set of Terraform .tf files (main.tf, variables.tf, outputs.tf, versions.tf, providers.tf).

* Option to download generated files as a .zip archive.

* Option to push directly to a configured Git repository.

• Configuration Validation:

* Syntactic Validation: Real-time checking for Terraform syntax errors.

* Semantic Validation: Check for logical inconsistencies and adherence to cloud provider best practices (e.g., required parameters, valid CIDR ranges).

• Terraform State Management Integration:

* Support for configuring remote state backends (e.g., S3, Azure Blob Storage, Terraform Cloud).

* Option to integrate with Terraform Cloud workspaces.

2.2. User Experience & Collaboration

• Project Management:

* Create, view, edit, and delete infrastructure projects.

* Version history for project configurations.

• Role-Based Access Control (RBAC):

* Define user roles (e.g., Admin, Editor, Viewer) with granular permissions.

• Audit Logging:

* Track all changes made to infrastructure configurations.

• Cost Estimation (Optional but highly recommended):

* Provide real-time estimated costs based on selected resources (e.g., using terraform plan output or cloud provider APIs).

3. Non-Functional Requirements

• Performance:

* Rapid generation of Terraform configurations (within seconds).

* Responsive UI with minimal latency.

• Scalability:

* Ability to handle complex infrastructure configurations with hundreds of resources.

* Support for a growing number of users and projects.

• Security:

* Secure authentication and authorization mechanisms (e.g., OAuth2, SAML).

* Data encryption at rest and in transit for sensitive configuration data.

* Adherence to industry best practices for web application security (OWASP Top 10).

* Least privilege access for API integrations with cloud providers.

• Reliability:

* High availability of the builder application.

* Robust error handling and informative error messages.

* Automated backups of project configurations.

• Maintainability:

* Modular and well-documented codebase.

* Easy to update and extend with new cloud resources and providers.

• Usability:

* Intuitive and guided user interface.

* Clear and concise documentation and help text.

• Compatibility:

* Support for multiple Terraform versions.

* Compatibility with major cloud provider APIs (AWS, Azure, GCP).

• Observability:

* Comprehensive logging and monitoring of application health and usage.

Wireframe Descriptions

The following wireframe descriptions outline the key screens and interactions within the Terraform Infrastructure Builder, focusing on a multi-step wizard approach for complex configurations.

1. Dashboard / Project Overview

• Layout: Left sidebar for navigation, main content area for project listings.
• Elements:

* Header: Application logo, user profile/settings, "New Project" button.

* Sidebar: "Dashboard", "Projects", "Modules", "Integrations", "Settings".

* Project List: Table or card view showing existing projects. Columns: Project Name, Cloud Provider, Region, Last Modified, Status (e.g., Draft, Generated), Actions (Edit, View Code, Delete).

* "Create New Project" Button: Prominently displayed, leading to the "Cloud Provider Selection" screen.

• Interaction: Click on a project to view/edit its configuration. Click "New Project" to start a new build.

2. Cloud Provider & Region Selection (Step 1 of N)

• Layout: Centered content area with a clear progress indicator (e.g., "Step 1 of 6: Select Provider").
• Elements:

* Cloud Provider Cards: Interactive cards for AWS, Azure, GCP, etc., with their respective logos.

* Region Selector: Dropdown or multi-select component to choose primary and secondary deployment regions.

* "Next" Button: Enabled after selections are made.

* "Back" / "Cancel" Buttons: For navigation.

• Interaction: User clicks on a cloud provider card, then selects one or more regions.

3. VPC / Networking Configuration (Step 2 of N)

• Layout: Tabbed interface or accordion for different networking components (VPC, Subnets, Gateways, Route Tables, NACLs).
• Elements:

* VPC Definition: Input fields for VPC Name, CIDR Block.

* Subnet Configuration:

* Table with rows for each subnet.

* Input fields: Subnet Name, CIDR Block, Availability Zone, Type (Public/Private).

* Buttons to "Add Subnet" or "Delete Subnet".

* Visual representation (diagram) of subnets within the VPC.

* Gateway Configuration: Checkboxes/toggles for Internet Gateway, NAT Gateway, VPN Gateway.

* Security Groups: List of existing SGs, "Add New Security Group" button, detailed ingress/egress rule editor.

• Interaction: Users define network topology, add rules, and see real-time validation feedback.

4. Compute Resources Configuration (Step 3 of N)

• Layout: Card-based system for adding compute instances or auto-scaling groups.
• Elements:

* "Add Compute Resource" Button: Opens a modal or expands a section.

* Compute Resource Card (for each defined resource):

* Resource Name, Instance Type, AMI/OS, Count/Min/Max (for ASG).

* Associated VPC/Subnet, Security Groups.

* "Edit", "Duplicate", "Delete" actions.

* Detailed Configuration Form (in modal/expanded section):

* Dropdowns for Instance Type, AMI.

* Sliders/inputs for desired capacity, min/max for ASG.

* Text area for User Data script.

* Multi-select for Security Groups.

* Dropdown for Key Pair.

* Checkboxes for public IP, monitoring, etc.

• Interaction: Users add, configure, and manage their compute instances or auto-scaling groups.

5. Storage & Database Configuration (Step 4 of N)

• Layout: Similar to compute, using cards or dedicated sections for different storage and database types.
• Elements:

* "Add Storage Resource" / "Add Database Instance" Buttons.

* Storage Card (e.g., S3 Bucket, EBS Volume):

* Resource Name, Type, Size, Encryption Status.

* "Edit", "Delete" actions.

* Database Card (e.g., RDS Instance, Aurora Cluster):

* Resource Name, Engine, Instance Class, Multi-AZ, Storage.

* "Edit", "Delete" actions.

* Detailed Configuration Forms:

* Dropdowns for engine, instance class, storage type.

* Inputs for size, username, password.

* Checkboxes for Multi-AZ, encryption, backups.

* Security Group association.

• Interaction: Users define and configure their storage and database requirements.

6. Review & Generate (Step 5 of N)

• Layout: Summary page, potentially with collapsible sections for each infrastructure component.
• Elements:

* Summary Cards: Each card (VPC, Compute, Storage, DB) provides a high-level overview of configurations made in previous steps.

* "Edit" Button: Within each summary card, to jump back to the relevant configuration step.

* Cost Estimate Display: Prominently displayed (if feature enabled).

* "Generate Terraform Code" Button: Main call to action.

* "Back" / "Save Draft" Buttons.

• Interaction: Users review their entire configuration before initiating code generation.

7. Generated Code View & Download (Step 6 of N)

• Layout: Code editor-like interface occupying the main content area.
• Elements:

* File Tabs: For main.tf, variables.tf, outputs.tf, providers.tf, versions.tf.

* Code Editor: Syntax-highlighted display of the generated Terraform code.

* "Download All (.zip)" Button: To download the entire configuration.

* "Push to Git" Button: (If VCS integration configured) to push

Step 3 of 3: Finalize Design Assets for Terraform Infrastructure Builder

This document outlines the detailed design specifications, wireframe descriptions, color palette, and user experience (UX) recommendations for a hypothetical "PantheraHive Terraform Infrastructure Builder" application. This application serves as a user-friendly interface to generate, review, and manage production-ready Terraform configurations for cloud infrastructure, aligning with the overall workflow goal of building robust cloud environments.

1. Introduction to the PantheraHive Terraform Infrastructure Builder

The PantheraHive Terraform Infrastructure Builder is envisioned as a powerful, intuitive web-based application designed to abstract the complexities of writing Terraform code directly. It empowers users – from DevOps engineers to cloud architects – to visually design and configure their cloud infrastructure, generating validated and production-ready Terraform configurations.

Workflow Context: This "finalize_design_assets" step focuses on the user interface and experience design of this builder application itself, which will then facilitate the creation of the Terraform configurations as described in the overall workflow.

Target Audience:

• DevOps Engineers
• Cloud Architects
• Software Developers with cloud responsibilities
• IT Operations Teams

Core Goals for the UI/UX:

• Simplicity & Intuition: Make complex cloud infrastructure design accessible.
• Efficiency: Reduce the time and effort required to author Terraform configurations.
• Accuracy & Reliability: Minimize human error through guided inputs and real-time validation.
• Clarity & Transparency: Provide clear visual representations and direct access to generated code.
• Scalability: Support a wide range of cloud resources and configurations.
• Collaboration: Facilitate team-based infrastructure development.

2. Detailed Design Specifications

2.1 Application Name & Branding

• Application Name: PantheraHive Terraform Builder
• Branding: Incorporate PantheraHive's existing brand identity (if available), focusing on professionalism, reliability, and innovation.

2.2 Key Features & Functionality (UI-Centric)

• Cloud Provider Agnostic Design: Initially focus on one provider (e.g., AWS), with an architecture to easily extend to others (Azure, GCP).
• Guided Project Creation: A step-by-step wizard for new infrastructure projects.
• Visual Infrastructure Designer: An interactive canvas or diagram view for network topology and resource placement.
• Resource Configuration Forms: Detailed, context-sensitive forms for configuring individual cloud resources (VPC, EC2, S3, RDS, etc.).
• Real-time Validation: Instant feedback on configuration errors and best practice violations.
• Terraform Code Preview: A dedicated pane to view the generated main.tf, variables.tf, outputs.tf files in real-time.
• Code Export & Download: Options to download the generated Terraform files.
• Version Control Integration: Direct commit/pull request functionality for Git repositories (e.g., GitHub, GitLab, Bitbucket).
• Module & Template Library: Browse, import, and manage custom or pre-built Terraform modules.
• Project Dashboard: Overview of existing infrastructure projects, their status, and quick actions.
• Audit Trail & Activity Logs: Track changes and user actions within a project.

2.3 System Requirements (Implicit for UI)

• Modern web browser compatibility (Chrome, Firefox, Edge, Safari).
• Responsive design for various screen sizes (desktop primary, tablet secondary).

3. Wireframe Descriptions

The application will follow a standard dashboard and wizard-based interaction model, providing clear navigation and progressive disclosure of information.

3.1 Global Navigation & Layout

• Header:

* PantheraHive Logo (Left)

* Application Title: "Terraform Builder"

* Search Bar (Optional, for resources/projects)

* User Profile/Settings (Right)

* Notifications Icon

• Sidebar Navigation (Left):

* Dashboard (Home)

* Projects

* Modules Library

* Templates

* Settings

* Help/Documentation

3.2 Key Screens & Interactions

A. Dashboard / Project Overview Screen

• Layout: Main content area with a "Create New Project" prominent button.
• Content:

* List/Card view of "My Projects". Each card displays:

* Project Name

* Cloud Provider

* Last Modified Date

* Status (e.g., "Draft", "Generated", "Deployed" - if deployment features are added later)

* Action buttons (Edit, View Code, Download, Delete).

* "Getting Started" section for new users (optional).

* "Recent Activity" feed.

• Interaction: Clicking on a project card opens the project's configuration view.

B. New Project Wizard (Step-by-Step Configuration)

This wizard guides users through the essential infrastructure setup. A progress indicator (e.g., numbered steps, breadcrumbs) will be visible throughout.

• Step 1: Project Details & Cloud Provider

* Fields: Project Name, Description, Cloud Provider (Dropdown: AWS, Azure, GCP), Region (Dropdown, dependent on provider).

* Validation: Required fields, unique project name.

* Navigation: "Next" button.

• Step 2: Network Configuration (VPC/VNet)

* Section 1: VPC/VNet Details

* Fields: VPC Name, CIDR Block (e.g., 10.0.0.0/16), DNS Support (Toggle), Tenancy (Dropdown).

* Visual Aid: A simple diagram showing the VPC with its CIDR block.

* Section 2: Subnet Configuration

* Table/List View: Add/Remove Subnets.

* Fields per Subnet: Name, Availability Zone (Dropdown), CIDR Block (auto-suggested based on VPC, with manual override), Public/Private (Toggle).

* Visual Aid: Subnets appearing within the VPC diagram as they are added.

* Section 3: Internet Gateway / NAT Gateway (Optional)

* Toggles to enable/disable.

* Basic configuration fields if enabled.

* Navigation: "Previous", "Next" buttons.

• Step 3: Compute Configuration (e.g., EC2 Instances, VMs)

* Layout: A list/card view for adding multiple compute instances or groups.

* "Add Compute Instance" Dialog/Form:

* Fields: Instance Name, Instance Type (Dropdown), AMI/Image (Searchable Dropdown), Count, Key Pair (Dropdown/Upload), Security Groups (Multi-select), Subnet (Dropdown), User Data (Textarea), Tags (Key-Value pairs).

* Advanced Options (Collapsible): EBS Volumes, IAM Role, Monitoring.

* Interaction: Users can add multiple instances/groups, edit existing ones.

* Navigation: "Previous", "Next" buttons.

• Step 4: Storage Configuration (e.g., S3 Buckets, EBS Volumes, Azure Blob Storage)

* Layout: Sections for different storage types (Object, Block, File).

* Section: Object Storage (e.g., S3 Bucket)

* Fields: Bucket Name, Region, ACL, Versioning (Toggle), Encryption (Dropdown), Lifecycle Rules (Optional).

* "Add Bucket" button.

* Section: Block Storage (e.g., EBS Volumes)

* Fields: Volume Name, Size (GB), Type (Dropdown), IOPS (if applicable), Encryption, Attached To (Dropdown - linking to compute instances).

* "Add Volume" button.

* Navigation: "Previous", "Next" buttons.

• Step 5: Database Configuration (e.g., RDS, Azure SQL Database)

* Layout: A list/card view for adding multiple database instances.

* "Add Database" Dialog/Form:

* Fields: DB Instance Name, Engine (Dropdown), Version (Dropdown), Instance Class, Storage (GB), Username, Password, Subnet Group (Dropdown), Security Groups (Multi-select), Multi-AZ (Toggle), Backup Retention.

* Interaction: Users can add multiple DB instances.

* Navigation: "Previous", "Next" buttons.

• Step 6: Review & Generate

* Layout: Two main panes: Configuration Summary (Left) and Terraform Code Preview (Right).

* Configuration Summary: A collapsible tree view or categorized list of all configured resources and their key attributes.

* Terraform Code Preview:

* Syntax-highlighted code editor displaying main.tf, variables.tf, outputs.tf, etc.

* Tabbed interface for different .tf files.

* Read-only (for preview), with a "Copy to Clipboard" button.

* Actions:

* "Download Terraform Files" button (downloads a ZIP archive).

* "Commit to Git" button (triggers a modal for Git repository details).

* "Save Draft" button.

* Navigation: "Previous" button.

C. Resource Editor / Detailed View (for existing projects)

• Layout: Similar to wizard steps, but focused on a single resource or category.
• Features: Allows editing of individual resource properties, adding/removing resources within a project.
• Real-time Code Update: Changes in the form immediately reflect in the Terraform Code Preview pane.

4. Color Palette

A professional, tech-oriented color palette will be used, balancing corporate branding with clarity and readability.

• Primary Brand Color: #007BFF (A vibrant, trustworthy blue - common in tech, can be replaced by PantheraHive's primary blue)
• Secondary Accent Color: #28A745 (A confident green for success, positive actions)
• Tertiary Accent Color: #FFC107 (An energetic yellow/orange for warnings, highlights)

• Neutral Colors:

* Background: `#F8F9FA