Nine To Five

Implement this modern architectural studio hero section design featuring a prominent geometric logo with intersecting orange/red structural beams against a teal gradient background.

## Layout Structure

Create a full-viewport hero section with a subtle teal gradient background. Position "NINE TO FIVE STUDIO ARCHITECTS" text across the top in bright yellow, evenly spaced. Center a large geometric logo in the middle featuring stylized yellow bar chart elements. Place location and social media information in the bottom corners using small yellow text.

## Key Visual Elements

The hero uses a striking color palette of bright yellow (#FFFF00) text against teal-blue gradients with dramatic orange-red structural beam overlays. The central logo consists of geometric yellow bars arranged like a bar chart or building blocks. Large intersecting beams in orange-red tones with industrial riveted textures create depth and architectural reference.

## Typography & Spacing

Use bold, condensed sans-serif typography for maximum impact. Header text should be large and spaced evenly across the viewport width. Logo elements use thick, geometric letterforms. Footer information uses much smaller text maintaining the yellow color scheme. Implement generous whitespace to let elements breathe.

## Responsive Behavior

Scale the geometric logo proportionally on smaller screens while maintaining its central position. Stack header text vertically on mobile if needed. Ensure beam overlays remain visually striking but don't obscure content on any screen size.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Architectural Studio Hero",
    "description": "Modern hero section with geometric logo, industrial beams, and bold typography on gradient background"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#FFFF00", "dark": "#FFFF00" },
      "background-start": { "light": "#4A90A4", "dark": "#4A90A4" },
      "background-end": { "light": "#5B9AA0", "dark": "#5B9AA0" },
      "accent-orange": { "light": "#E67E22", "dark": "#E67E22" },
      "accent-red": { "light": "#C0392B", "dark": "#C0392B" },
      "accent-dark-red": { "light": "#8B0000", "dark": "#8B0000" },
      "neutral-500": { "light": "#6B7280", "dark": "#9CA3AF" }
    },
    "typography": {
      "families": { "sans": "Arial, Helvetica, system-ui, sans-serif" },
      "sizes": { 
        "xs": "12px", 
        "sm": "14px", 
        "base": "16px", 
        "lg": "18px", 
        "xl": "24px", 
        "2xl": "36px", 
        "3xl": "48px",
        "4xl": "64px",
        "5xl": "96px"
      },
      "weights": { "normal": "400", "bold": "700", "black": "900" },
      "lineHeights": { "tight": "0.9", "normal": "1.0", "relaxed": "1.2" },
      "letterSpacing": { "tight": "-0.05em", "normal": "0em", "wide": "0.1em", "wider": "0.2em" }
    },
    "spacing": {
      "xs": "4px", 
      "sm": "8px", 
      "md": "16px", 
      "lg": "24px", 
      "xl": "32px", 
      "2xl": "48px", 
      "3xl": "64px",
      "4xl": "96px",
      "rationale": "Generous spacing scale for architectural, minimalist aesthetic"
    },
    "radii": {
      "none": "0px",
      "sm": "2px",
      "md": "4px"
    },
    "shadows": {
      "lg": { "light": "0 10px 15px -3px rgba(0, 0, 0, 0.1)", "dark": "0 10px 15px -3px rgba(0, 0, 0, 0.3)" },
      "beam": { "light": "0 8px 16px rgba(139, 0, 0, 0.3)", "dark": "0 8px 16px rgba(139, 0, 0, 0.5)" }
    }
  },
  "screens": [
    {
      "name": "ArchitecturalHero",
      "route": "/",
      "layout": "Full viewport hero with centered logo, header text row, and corner annotations",
      "components": [
        {
          "name": "HeroContainer",
          "type": "section",
          "properties": {
            "background": "linear-gradient(135deg, tokens.colors.background-start, tokens.colors.background-end)",
            "height": "100vh",
            "position": "relative",
            "overflow": "hidden"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "HeaderTextRow",
          "type": "header",
          "properties": {
            "position": "absolute",
            "top": "tokens.spacing.2xl",
            "width": "100%",
            "display": "flex",
            "justifyContent": "space-between",
            "padding": "0 tokens.spacing.xl",
            "color": "tokens.colors.primary-500",
            "fontSize": "tokens.typography.sizes.2xl",
            "fontWeight": "tokens.typography.weights.black",
            "letterSpacing": "tokens.typography.letterSpacing.wider"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "CentralLogo",
          "type": "div",
          "properties": {
            "position": "absolute",
            "top": "50%",
            "left": "50%",
            "transform": "translate(-50%, -50%)",
            "color": "tokens.colors.primary-500",
            "fontSize": "tokens.typography.sizes.5xl",
            "fontWeight": "tokens.typography.weights.black",
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center",
            "gap": "tokens.spacing.md"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "GeometricBars",
          "type": "div",
          "properties": {
            "display": "grid",
            "gridTemplateColumns": "repeat(6, 1fr)",
            "gap": "tokens.spacing.sm",
            "marginBottom": "tokens.spacing.lg",
            "height": "120px",
            "width": "300px"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "IntersectingBeams",
          "type": "div",
          "properties": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "width": "100%",
            "height": "100%",
            "pointerEvents": "none",
            "zIndex": "1"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "LeftBeam",
          "type": "div",
          "properties": {
            "position": "absolute",
            "top": "0",
            "left": "-10%",
            "width": "60%",
            "height": "40px",
            "background": "linear-gradient(45deg, tokens.colors.accent-dark-red, tokens.colors.accent-red, tokens.colors.accent-orange)",
            "transform": "rotate(-15deg)",
            "transformOrigin": "left center",
            "boxShadow": "tokens.shadows.beam"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "RightBeam",
          "type": "div",
          "properties": {
            "position": "absolute",
            "top": "20%",
            "right": "-5%",
            "width": "50%",
            "height": "35px",
            "background": "linear-gradient(-45deg, tokens.colors.accent-orange, tokens.colors.accent-red)",
            "transform": "rotate(25deg)",
            "transformOrigin": "right center"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "BottomInfo",
          "type": "footer",
          "properties": {
            "position": "absolute",
            "bottom": "tokens.spacing.lg",
            "width": "100%",
            "display": "flex",
            "justifyContent": "space-between",
            "padding": "0 tokens.spacing.xl",
            "color": "tokens.colors.primary-500",
            "fontSize": "tokens.typography.sizes.xs",
            "fontWeight": "tokens.typography.weights.normal"
          },
          "states": {
            "default": {}
          }
        }
      ]
    }
  ]
}
```
</design-specification>

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