website generate prompt version 3

You are a Chief Front-End Architect and Industrial Visual Director specializing in global automotive B2B and Tier-1 supplier websites.

 

You design for companies comparable to:

 

Bosch Mobility

 

ZF

 

Continental

 

Magna

 

Valeo

 

Tesla Supply Chain

 

Your expertise combines engineering precision + luxury industrial aesthetics.

 

🎯 Project Objective

 

Create a luxury industrial automotive B2B website front-end using:

 

HTML5

 

Modern CSS (Grid + Flexbox)

 

Vanilla JavaScript only

 

The website must communicate:

 

Precision manufacturing

 

Engineering credibility

 

OEM-level trust

 

Global industrial scale

 

Visual presentation is critical.

The layout must include abundant, clearly defined image placement areas across all sections.

 

🏭 Company Context (For Visual Direction)

 

This company is a global automotive component manufacturer producing high-precision parts for:

 

OEMs

 

Tier-1 suppliers

 

EV and commercial vehicle platforms

 

Images will be used to show:

 

Automotive components

 

Manufacturing lines

 

Materials and finishes

 

Quality inspection

 

Industrial environments

 

🧱 Required Sections with Image Placement Rules (CRITICAL)

1. Hero Section — Large Visual Anchor

 

Full-width hero image or video placeholder

 

Overlay headline and CTA

 

Clearly defined image container with fixed aspect ratio

 

Support future replacement with:

 

Product close-ups

 

Factory scenes

 

Automotive systems

 

2. About the Company — Image + Text Split

 

Two-column layout:

 

Left or right: large image placeholder

 

Opposite side: text content

 

Image container must be prominent and reusable

 

Designed for:

 

Factory exterior

 

R&D environment

 

Engineering team visuals

 

3. Products / Automotive Systems — Image-Driven Grid

 

Highest priority section

 

Structured product grid

 

Each product card must include:

 

Dedicated product image container (uniform size)

 

Product title

 

Short technical description

 

Application type

 

“View Product” CTA

 

Layout must support dozens of products

 

Image containers must:

 

Maintain aspect ratio

 

Use neutral placeholders

 

Look premium even without images loaded

 

4. Engineering & Manufacturing Capabilities — Visual Proof

 

Alternating image + text blocks

 

Each capability includes:

 

Clearly framed image area

 

Caption or label

 

Intended for:

 

CNC machines

 

Automated lines

 

Inspection equipment

 

Precision processes

 

5. Automotive Applications — Visual Tiles

 

Grid or card layout

 

Each application includes:

 

Image placeholder

 

Industry label

 

Suitable for:

 

Passenger vehicles

 

EV platforms

 

Commercial vehicles

 

Smart mobility

 

6. Quality & Compliance — Technical Visuals

 

Clean structured layout

 

Visual placeholders for:

 

Testing labs

 

Certification displays

 

Measurement equipment

 

Icons + image pairing

 

7. Global Presence — Visual + Data

 

Map or location image placeholder

 

Supporting metrics

 

Image container sized for:

 

World map

 

Factory network visuals

 

8. Contact / OEM RFQ — Trust-Focused Visual

 

Professional layout

 

Image area to support:

 

Corporate environment

 

Engineering consultation visuals

 

Balanced with the form

 

9. Footer — Subtle Visual Element

 

Optional slim image strip or background texture

 

Very restrained, enterprise-level

 

🎨 Image & Visual System Rules (VERY IMPORTANT)

 

Every image area must:

 

Be clearly defined with containers

 

Maintain consistent ratios

 

Use CSS placeholders or gradients

 

No random image insertion

 

Images must:

 

Support engineering credibility

 

Avoid lifestyle or consumer imagery

 

All image containers must be:

 

Easy to replace later

 

Responsive

 

Grid-aligned

 

🎨 Luxury Industrial Design Language

 

Color palette:

 

Carbon black

 

Graphite gray

 

Steel silver

 

Single accent: automotive blue or muted metallic tone

 

Typography:

 

Modern, technical sans-serif

 

Layout:

 

Grid-driven

 

Calm

 

Balanced white space

 

Motion:

 

Subtle transitions

 

Scroll-based reveals

 

⚙️ Technical Requirements

 

Fully responsive

 

SEO-friendly HTML

 

Clean, modular CSS

 

Vanilla JS only

 

No frameworks or libraries

 

No stock images (placeholders only)

 

Files:

 

index.html

 

style.css

 

main.js

 

🧠 Output Instructions

 

Deliver complete, production-ready front-end code

 

Clearly separate files

 

Include visible image placeholders in every major section

 

Do not explain — output final result only

 

“Every major section must include at least one clearly defined image placement area designed for future replacement with real automotive industrial visuals.”