Enerblock

Apply this industrial modern website design to your existing project with a bold coral/red theme and sophisticated layout structure.

## Layout Structure

Create a full-screen hero section with a distinctive two-panel layout. The left panel contains the main content area with large typography and descriptive text, while the right panel features a prominent geometric logo element. Below the main content area, include a full-width image section showing architectural/industrial imagery.

## Visual Hierarchy

The design uses a strong typographic hierarchy with an extra-large heading "Next-Gen Buildings" as the primary focal point. Position a company logo in the top-left corner, with navigation elements aligned to the top-right. Include small label text ("SYSTEM" and "EST 2025") positioned strategically within the layout for brand credibility.

## Key Components

**Header Navigation**: Implement a minimal top navigation bar with a hamburger menu button and contact link, both using contrasting background treatments - the menu button on a lighter background, the contact button on a dark background with an arrow icon.

**Hero Content Panel**: Design a large text block area with bold sans-serif typography for the main heading and a refined sans-serif font for the descriptive text below.

**Logo Element**: Create a three-dimensional geometric logo mark using isometric black shapes that appear to float above the coral background, positioned in the right panel.

**Image Section**: Include a full-width architectural image showing modern construction elements with a cool blue-gray color palette to contrast with the warm coral theme.

## Responsive Behavior

Ensure the two-panel layout stacks vertically on mobile devices, with the logo element repositioning above or below the text content. The navigation should remain functional with the hamburger menu expanding to show navigation options on smaller screens.

## Design Specification

<design-specification>
```jsonc
{
  "project": {
    "name": "Industrial Modern Website",
    "description": "Bold coral-themed website with geometric branding and architectural imagery"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#FF6B4A", "dark": "#FF6B4A" },
      "primary-600": { "light": "#E55A42", "dark": "#E55A42" },
      "secondary-500": { "light": "#1A1A1A", "dark": "#1A1A1A" },
      "neutral-50": { "light": "#FAFAFA", "dark": "#0A0A0A" },
      "neutral-900": { "light": "#1A1A1A", "dark": "#FAFAFA" },
      "accent-blue": { "light": "#64748B", "dark": "#64748B" }
    },
    "typography": {
      "families": { 
        "sans": "Inter, system-ui, sans-serif",
        "display": "Montserrat, system-ui, sans-serif"
      },
      "sizes": { 
        "sm": "14px", 
        "base": "16px", 
        "lg": "18px", 
        "xl": "20px", 
        "2xl": "24px", 
        "3xl": "32px",
        "4xl": "48px",
        "5xl": "64px"
      },
      "weights": { 
        "normal": "400", 
        "medium": "500", 
        "semibold": "600", 
        "bold": "700",
        "black": "900"
      },
      "lineHeights": { 
        "tight": "1.1", 
        "normal": "1.5", 
        "relaxed": "1.75" 
      }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px", 
      "md": "16px", 
      "lg": "24px", 
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "rationale": "Generous spacing scale for modern, breathable layouts"
    },
    "radii": {
      "sm": "4px",
      "md": "8px", 
      "lg": "12px",
      "xl": "16px"
    },
    "shadows": {
      "sm": { "light": "0 2px 4px rgba(0,0,0,0.1)", "dark": "0 2px 4px rgba(0,0,0,0.3)" },
      "md": { "light": "0 4px 8px rgba(0,0,0,0.15)", "dark": "0 4px 8px rgba(0,0,0,0.4)" }
    }
  },
  "screens": [
    {
      "name": "Industrial Hero Landing",
      "route": "/",
      "layout": "Two-panel hero layout with image footer",
      "components": [
        {
          "name": "Header Navigation",
          "type": "navigation",
          "properties": {
            "background": "transparent",
            "position": "absolute",
            "top": "tokens.spacing.lg",
            "padding": "tokens.spacing.md"
          }
        },
        {
          "name": "Company Logo",
          "type": "brand-mark",
          "properties": {
            "fontSize": "tokens.typography.sizes.lg",
            "fontWeight": "tokens.typography.weights.bold",
            "color": "tokens.colors.secondary-500"
          }
        },
        {
          "name": "Menu Button",
          "type": "button",
          "properties": {
            "background": "rgba(255, 255, 255, 0.2)",
            "border": "1px solid rgba(255, 255, 255, 0.3)",
            "borderRadius": "tokens.radii.sm",
            "padding": "tokens.spacing.sm tokens.spacing.md"
          },
          "states": {
            "hover": {
              "background": "rgba(255, 255, 255, 0.3)"
            }
          }
        },
        {
          "name": "Contact Button",
          "type": "button",
          "properties": {
            "background": "tokens.colors.secondary-500",
            "color": "tokens.colors.neutral-50",
            "borderRadius": "tokens.radii.sm",
            "padding": "tokens.spacing.sm tokens.spacing.md"
          }
        },
        {
          "name": "Main Heading",
          "type": "heading",
          "properties": {
            "fontSize": "tokens.typography.sizes.5xl",
            "fontWeight": "tokens.typography.weights.black",
            "lineHeight": "tokens.typography.lineHeights.tight",
            "color": "tokens.colors.secondary-500"
          }
        },
        {
          "name": "Geometric Logo Mark",
          "type": "graphic-element",
          "properties": {
            "width": "200px",
            "height": "200px",
            "fill": "tokens.colors.secondary-500",
            "transform": "perspective isometric view"
          }
        },
        {
          "name": "Descriptive Text",
          "type": "paragraph",
          "properties": {
            "fontSize": "tokens.typography.sizes.xl",
            "lineHeight": "tokens.typography.lineHeights.relaxed",
            "color": "tokens.colors.secondary-500",
            "maxWidth": "400px"
          }
        },
        {
          "name": "Hero Background",
          "type": "section",
          "properties": {
            "background": "tokens.colors.primary-500",
            "minHeight": "70vh",
            "display": "grid",
            "gridTemplateColumns": "1fr 1fr"
          }
        },
        {
          "name": "Architectural Image",
          "type": "image-section",
          "properties": {
            "background": "tokens.colors.accent-blue",
            "height": "30vh",
            "objectFit": "cover"
          }
        }
      ]
    }
  ]
}
```
</design-specification>

The design emphasizes bold typography, strategic use of whitespace, and a sophisticated coral color palette balanced with industrial imagery. Focus on precise spacing and alignment to achieve the clean, professional aesthetic shown in the design.

Copy this prompt and paste it into your AI coding assistant to build this design.