MERSI

Apply this sophisticated interior design portfolio layout to your existing React/Next.js project. The design features a split-screen composition with a semi-transparent overlay card system that creates visual depth and hierarchy.

## Layout Structure

Create a full-viewport layout with two main sections: a left image panel showing architectural details (wooden frames, textural surfaces) and a right interior panel displaying modern furniture and storage. The central focal point is a translucent sage green overlay card containing project metadata.

## Key Components

**Hero Split Layout**: Implement a two-column grid where the left side displays close-up architectural photography and the right shows interior space photography. Both images should fill their respective viewport sections with subtle parallax or depth effects.

**Overlay Information Card**: Position a semi-transparent card at the center intersection of the split layout. The card should have a muted sage green background with subtle transparency, containing project title "Emyre", category "Residential", stylized "MPS" logo treatment, year "2025", and location "Paris 8". Include a small directional arrow icon in the top-right corner.

**Navigation Header**: Place a minimal top navigation bar with the "MEPSI" logo on the left and navigation items (PROJECTS, AGENCE, PROCESS, SHOP, CONTACT, INSTAGRAM) aligned right. Use clean typography with adequate spacing.

## Visual Styling

The color palette centers around warm neutrals, sage green accents, and natural wood tones. Typography should be modern and minimal with varying weights for hierarchy. The overlay card requires subtle backdrop blur effects and carefully balanced opacity to maintain readability while preserving the underlying imagery.

## Responsive Behavior

On mobile breakpoints, stack the split layout vertically with the overlay card repositioning to maintain visual balance. The navigation should collapse to a hamburger menu pattern.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Interior Portfolio Split Layout",
    "description": "Split-screen architectural portfolio with translucent overlay information card and sophisticated navigation"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#8FA68E", "dark": "#7A8F79" },
      "primary-200": { "light": "#B8C8B7", "dark": "#9BAA9A" },
      "neutral-50": { "light": "#FAFAFA", "dark": "#1A1A1A" },
      "neutral-100": { "light": "#F5F5F5", "dark": "#262626" },
      "neutral-200": { "light": "#E5E5E5", "dark": "#404040" },
      "neutral-800": { "light": "#262626", "dark": "#E5E5E5" },
      "neutral-900": { "light": "#171717", "dark": "#FAFAFA" },
      "accent-100": { "light": "#F0F4F0", "dark": "#1F2A1F" },
      "overlay-sage": { "light": "rgba(143, 166, 142, 0.85)", "dark": "rgba(122, 143, 121, 0.85)" }
    },
    "typography": {
      "families": { "sans": "Inter, system-ui, sans-serif" },
      "sizes": { "xs": "11px", "sm": "13px", "base": "15px", "lg": "18px", "xl": "22px", "2xl": "28px", "3xl": "36px" },
      "weights": { "light": "300", "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
      "lineHeights": { "tight": "1.2", "normal": "1.5", "relaxed": "1.7" },
      "letterSpacing": { "tight": "-0.02em", "normal": "0em", "wide": "0.08em", "wider": "0.15em" }
    },
    "spacing": {
      "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px",
      "rationale": "Geometric progression with emphasis on comfortable touch targets and visual breathing room"
    },
    "radii": {
      "sm": "6px", "md": "12px", "lg": "16px", "xl": "24px"
    },
    "shadows": {
      "subtle": { "light": "0 1px 3px rgba(0,0,0,0.05)", "dark": "0 1px 3px rgba(0,0,0,0.3)" },
      "overlay": { "light": "0 8px 32px rgba(0,0,0,0.12)", "dark": "0 8px 32px rgba(0,0,0,0.5)" }
    }
  },
  "screens": [
    {
      "name": "PortfolioSplitHero",
      "route": "/portfolio-detail",
      "layout": "Full viewport split into two equal vertical sections with central overlay card",
      "components": [
        {
          "name": "NavigationHeader",
          "type": "header",
          "properties": {
            "background": "transparent",
            "position": "fixed",
            "width": "full",
            "padding": "tokens.spacing.lg tokens.spacing.xl",
            "zIndex": "50"
          },
          "states": {
            "default": { "color": "tokens.colors.neutral-900" },
            "scrolled": { "background": "tokens.colors.neutral-50", "backdropBlur": "md" }
          }
        },
        {
          "name": "LogoMark",
          "type": "text",
          "properties": {
            "fontSize": "tokens.typography.sizes.lg",
            "fontWeight": "tokens.typography.weights.bold",
            "letterSpacing": "tokens.typography.letterSpacing.wider"
          }
        },
        {
          "name": "NavigationList",
          "type": "nav",
          "properties": {
            "display": "flex",
            "gap": "tokens.spacing.xl",
            "fontSize": "tokens.typography.sizes.sm",
            "fontWeight": "tokens.typography.weights.normal",
            "letterSpacing": "tokens.typography.letterSpacing.wide"
          }
        },
        {
          "name": "SplitImagePanel",
          "type": "section",
          "properties": {
            "width": "50%",
            "height": "100vh",
            "overflow": "hidden",
            "position": "relative"
          }
        },
        {
          "name": "ArchitecturalImage",
          "type": "image",
          "properties": {
            "width": "full",
            "height": "full",
            "objectFit": "cover",
            "filter": "saturate(0.9) contrast(1.1)"
          }
        },
        {
          "name": "OverlayInfoCard",
          "type": "article",
          "properties": {
            "position": "absolute",
            "left": "50%",
            "top": "50%",
            "transform": "translate(-50%, -50%)",
            "background": "tokens.colors.overlay-sage",
            "padding": "tokens.spacing.xl",
            "borderRadius": "tokens.radii.md",
            "backdropBlur": "sm",
            "boxShadow": "tokens.shadows.overlay",
            "minWidth": "280px",
            "textAlign": "center"
          }
        },
        {
          "name": "ProjectTitle",
          "type": "h1",
          "properties": {
            "fontSize": "tokens.typography.sizes.2xl",
            "fontWeight": "tokens.typography.weights.light",
            "color": "tokens.colors.neutral-900",
            "marginBottom": "tokens.spacing.sm"
          }
        },
        {
          "name": "CategoryLabel",
          "type": "span",
          "properties": {
            "fontSize": "tokens.typography.sizes.sm",
            "fontWeight": "tokens.typography.weights.medium",
            "color": "tokens.colors.neutral-800",
            "letterSpacing": "tokens.typography.letterSpacing.wide"
          }
        },
        {
          "name": "LogoTreatment",
          "type": "div",
          "properties": {
            "fontSize": "tokens.typography.sizes.3xl",
            "fontWeight": "tokens.typography.weights.bold",
            "color": "tokens.colors.neutral-900",
            "margin": "tokens.spacing.lg 0",
            "letterSpacing": "tokens.typography.letterSpacing.tight"
          }
        },
        {
          "name": "MetadataGrid",
          "type": "div",
          "properties": {
            "display": "grid",
            "gridTemplateColumns": "1fr 1fr",
            "gap": "tokens.spacing.md",
            "marginTop": "tokens.spacing.lg"
          }
        }
      ]
    }
  ]
}
```
</design-specification>

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