ICOMAT

# Build Industrial Manufacturing Website Landing Page

Recreate this modern industrial website landing page featuring a dramatic full-screen hero section with overlaid carbon fiber materials imagery. This design combines clean typography with high-contrast industrial photography to create a sophisticated technical aesthetic.

## Layout Structure

The page uses a full-viewport layout with a dark semi-transparent overlay containing the main content positioned over a background image. The navigation is minimal and positioned at the top right, while the main heading and supporting text are positioned in the lower left quadrant of the screen.

## Key Components

**Navigation Bar**: Clean horizontal navigation with logo on the left and menu items right-aligned. Items include "SOLUTIONS", "TECH", "INDUSTRIES", "THE COMPANY" and a prominent "BUILD MY FORMAT" call-to-action button with inverted styling.

**Hero Section**: Full-screen background image featuring industrial carbon fiber manufacturing equipment with three large black carbon fiber sheets prominently displayed. A dark gradient overlay (approximately 60% opacity) ensures text readability.

**Typography Hierarchy**: Large bold heading "Engineer without limits" with trademark symbol, positioned in bottom-left with ample white space. Supporting descriptive text appears in smaller weight in the upper-right area.

## Visual Styling

The design employs a high-contrast approach with white text on dark backgrounds. The carbon fiber imagery provides texture and industrial authenticity while the overlay maintains focus on the content. Typography is clean and modern with generous spacing.

## Responsive Behavior

On mobile devices, stack navigation items vertically or use a hamburger menu. Adjust hero text sizing and positioning to maintain readability across screen sizes. Ensure the background image scales appropriately while keeping focal elements visible.

## Dark Mode Considerations

This design already employs a dark aesthetic as the primary theme. Maintain the high contrast between light text and dark backgrounds. Consider slightly adjusting overlay opacity for true dark mode implementations.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Industrial Manufacturing Landing",
    "description": "Full-screen hero layout with industrial carbon fiber imagery and clean typography overlay"
  },
  "tokens": {
    "colors": {
      "primary-900": { "light": "#000000", "dark": "#000000" },
      "primary-800": { "light": "#1a1a1a", "dark": "#1a1a1a" },
      "neutral-50": { "light": "#ffffff", "dark": "#ffffff" },
      "neutral-200": { "light": "#e5e7eb", "dark": "#e5e7eb" },
      "neutral-400": { "light": "#9ca3af", "dark": "#9ca3af" },
      "overlay-dark": { "light": "rgba(0,0,0,0.6)", "dark": "rgba(0,0,0,0.7)" }
    },
    "typography": {
      "families": { 
        "sans": "Inter, system-ui, -apple-system, sans-serif" 
      },
      "sizes": { 
        "xs": "12px", 
        "sm": "14px", 
        "base": "16px", 
        "lg": "18px", 
        "xl": "20px", 
        "2xl": "24px", 
        "3xl": "30px",
        "4xl": "36px",
        "5xl": "48px",
        "6xl": "60px"
      },
      "weights": { 
        "normal": "400", 
        "medium": "500", 
        "semibold": "600", 
        "bold": "700" 
      },
      "lineHeights": { 
        "tight": "1.1", 
        "normal": "1.5", 
        "relaxed": "1.75" 
      },
      "letterSpacing": { 
        "tight": "-0.025em", 
        "normal": "0em", 
        "wide": "0.05em" 
      }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px", 
      "md": "16px", 
      "lg": "24px", 
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "4xl": "96px",
      "rationale": "8px base unit with consistent scale for industrial precision aesthetic"
    },
    "radii": {
      "none": "0px",
      "sm": "2px", 
      "md": "4px", 
      "lg": "8px", 
      "xl": "12px"
    },
    "shadows": {
      "sm": { "light": "0 1px 2px rgba(0,0,0,0.05)", "dark": "0 1px 2px rgba(0,0,0,0.5)" },
      "md": { "light": "0 4px 6px rgba(0,0,0,0.1)", "dark": "0 4px 6px rgba(0,0,0,0.6)" }
    }
  },
  "screens": [
    {
      "name": "IndustrialHeroLanding",
      "route": "/",
      "layout": "Full viewport height with background image, dark overlay, and positioned text content",
      "components": [
        {
          "name": "NavigationBar",
          "type": "header",
          "properties": {
            "background": "transparent",
            "padding": "tokens.spacing.lg",
            "position": "fixed top-0 w-full z-50"
          },
          "states": {
            "default": {
              "color": "tokens.colors.neutral-50"
            }
          }
        },
        {
          "name": "HeroBackground",
          "type": "section",
          "properties": {
            "backgroundImage": "industrial carbon fiber manufacturing scene",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
            "minHeight": "100vh",
            "position": "relative"
          }
        },
        {
          "name": "ContentOverlay",
          "type": "div",
          "properties": {
            "background": "tokens.colors.overlay-dark",
            "position": "absolute inset-0",
            "zIndex": "10"
          }
        },
        {
          "name": "MainHeading",
          "type": "h1",
          "properties": {
            "fontSize": "tokens.typography.sizes.6xl",
            "fontWeight": "tokens.typography.weights.bold",
            "color": "tokens.colors.neutral-50",
            "lineHeight": "tokens.typography.lineHeights.tight",
            "position": "absolute bottom-24 left-8 lg:left-16"
          }
        },
        {
          "name": "DescriptiveText",
          "type": "p",
          "properties": {
            "fontSize": "tokens.typography.sizes.lg",
            "fontWeight": "tokens.typography.weights.normal",
            "color": "tokens.colors.neutral-200",
            "maxWidth": "400px",
            "position": "absolute top-1/3 right-8 lg:right-16"
          }
        },
        {
          "name": "CallToActionButton",
          "type": "button",
          "properties": {
            "background": "tokens.colors.neutral-50",
            "color": "tokens.colors.primary-900",
            "padding": "tokens.spacing.sm tokens.spacing.lg",
            "fontSize": "tokens.typography.sizes.sm",
            "fontWeight": "tokens.typography.weights.medium",
            "border": "none",
            "borderRadius": "tokens.radii.sm"
          },
          "states": {
            "hover": {
              "background": "tokens.colors.neutral-200"
            }
          }
        }
      ]
    }
  ]
}
```
</design-specification>

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