The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Industrial Robotics Company Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A one-page, steel-grey B2B site for [BRAND] Robotics, a maker of original industrial robot arms for [PRIMARY_USE]. The hero is a full-bleed factory-bay photograph with the arm as anchor and mono spec chips. Then: a four-stat band; tabbed spec sheets for three arms (TL-120, TL-190, TL-260) each paired with an original code-drawn SVG side-profile arm; four industry cards with proof lines; a full-width install band photo; an ROI calculator (operators and shifts sliders, local math from the selected arm, spelled out exactly); three case studies with photos; and a client-side demo-request form. Specs, prices and ROI outputs are invented samples, labeled as such.

- Audience: [AUDIENCE] evaluating capital equipment, plus hardware founders and automation integrators adapting the template for any spec-driven machine.
- Goal: Put hard numbers first — specs, proof, payback — and convert plant teams into demo requests through the #demo form.
- Tone: Industrial and precise. Short declarative sentences, engineering units, mono-labeled data. Confident without slogans; every claim is a labeled sample number.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from motion/react) (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/saira (OFL-1.1), @fontsource-variable/barlow (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One page: index.html at the project root with entry src/main.tsx. package.json scripts: dev 'vite', build 'tsc -b && vite build', preview 'vite preview'.
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Images live in public/images/ referenced as './images/<file>'. Keep dist/ under 6 MB.
  - Tailwind 3.4 through PostCSS, content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts extend colors (steel, panel, panel-2, line, chip, ink, slate, faint, orange, orange-deep, orange-tint), fontFamily display ['Saira Variable', 'system-ui', 'sans-serif'], sans ['Barlow Variable', 'system-ui', 'sans-serif'], mono ['IBM Plex Mono', 'ui-monospace', 'monospace'], maxWidth { container: '1180px' }, borderRadius { card: '6px', chip: '3px', btn: '4px', photo: '6px' }.
  - src/fonts.ts imports @fontsource-variable/saira (600,700), @fontsource-variable/barlow (400,500,600) and @fontsource/ibm-plex-mono (400.css, 500.css, 600.css); src/main.tsx imports src/fonts.ts and src/index.css. index.css holds the Tailwind layers, body background #ECEEF0 and color #1D2126, and a @media (prefers-reduced-motion: reduce) block shortening CSS animations and transitions to 0.01ms.
  - File layout: src/content.ts (all copy, arm specs, industries, cases, FAQ-free — typed), src/lib/brand.ts (brandSlug, emailDomain, companyName, address), src/lib/roi.ts (the ROI model as a pure function), src/components/ (Header.tsx, MobileMenu.tsx, Hero.tsx, StatBand.tsx, Arms.tsx, ArmProfile.tsx, Industries.tsx, InstallBand.tsx, RoiCalculator.tsx, Cases.tsx, DemoForm.tsx, Footer.tsx, Button.tsx, Reveal.tsx), src/App.tsx composing them in page order.
  - src/lib/roi.ts exports computeRoi({operators, shifts, hourlyRate, armPrice}) implementing exactly the math in the ROI section; the component never re-derives numbers. Hourly rate parses [LABOR_RATE] by stripping non-digits.
  - Reveal.tsx wraps sections in Motion whileInView fade-up (opacity 0 -> 1, y 20 -> 0, duration 0.6, ease [0.22, 1, 0.36, 1], viewport once with amount 0.2), unanimated when reduced motion is on. Wrap the app in MotionConfig reducedMotion='user'.
  - index.html: lang en, <meta name='theme-color' content='#ECEEF0'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[BRAND] Robotics — Arms for [PRIMARY_USE]</title>. public/favicon.svg is the logo mark (orange square with the white capsule-arm glyph).
  - Download the six images with the curl commands under Assets into public/images/ before building, and write ASSETS.md at the project root as described under Assets.

## Variables
- [BRAND] — Brand name (default: "Torvan"). Invented company name; the site brands itself '[BRAND] Robotics'. Never a real robotics company, and never a name or mark that evokes one.
- [AUDIENCE] — Who buys it (default: "plant managers at mid-size US factories"). Plural noun phrase. Used in the hero subhead, industries intro and demo-form copy.
- [PRIMARY_USE] — Main use case (default: "palletizing and machine tending"). Lowercase phrase for what the arms do all day; drives the hero, industries, cases and footer line. Swap for welding, dispensing, lab handling and rewrite the proof lines to match.
- [LABOR_RATE] — Sample labor rate (default: "$38"). Fully-loaded hourly rate used as the ROI calculator's default (digits after a currency symbol). A sample number the calculator labels as editable.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/industrial-robotics-company-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- steel `#ECEEF0` — Page background, light steel grey
- panel `#FFFFFF` — Cards, spec sheet, calculator, form
- panel-2 `#F6F7F8` — Inset areas, chips, footer base
- line `#D8DCE0` — Hairline borders and table rules
- chip `#F1F3F5` — Mono chip background
- ink `#1D2126` — Headings, primary text, drawn arm strokes
- slate `#4E565E` — Body copy
- faint `#8A939C` — Captions, mono labels, footnotes
- orange `#E8590C` — The safety accent: CTAs, active tab bar, joint rings, proof numbers, slider fills
- orange-deep `#C44908` — Hover and pressed states
- orange-tint `#FCE9DF` — Highlighted table rows, metric chips, focus tints

### Typography
- Display: H1 clamp(40px, 5vw, 64px) line-height 1.05 letter-spacing -0.01em weight 700; H2 clamp(28px, 3.4vw, 42px) weight 700; card and arm titles 20-22px weight 600: Saira Variable (OFL), weights 600/700
- Text: body 16px/1.6, subheads 17px, nav 14px, buttons 15px weight 600: Barlow Variable (OFL), weights 400/500/600
- Mono: spec chips, table keys, calculator values, section labels (11-12px, letter-spacing 0.12em, uppercase), captions: IBM Plex Mono (OFL), weights 400/500/600

### Layout & motion
- Spacing: 8px base. Container max-width 1180px with 24px side padding (20px below 640px). Sections 104px vertical padding on desktop, 76px on mobile. Section headers 48px below. Cards pad 24-28px; spec table rows 14px tall cells.
- Radius: Sharp industrial: cards and photos 6px; chips 3px; buttons and inputs 4px; slider tracks square. No pills anywhere.
- Motion: Arm tabs: the profile SVG and spec table crossfade (opacity 0 -> 1, 240ms) with the table rows staggering in 30ms apart; the active tab's orange left bar slides 200ms.
- Motion: ROI calculator: outputs tween between values (Motion animate on a motion value, 300ms, rounded display) as sliders move; slider tracks fill orange to the knob.
- Motion: Install band: the background photo translates 0 -> 6% over the band's scroll (parallax, transform only).
- Motion: Scroll reveals: fade up 20px, 0.6s, ease [0.22, 1, 0.36, 1], once, stagger 0.06-0.08s.
- Motion: prefers-reduced-motion: no crossfades (instant swap), no tweening (instant numbers), no parallax; sliders still work as direct manipulation.
- Imagery: Six generated photographs that read as one facility: clean modern factory bays, soft even daylight from skylights, polished concrete, cool grey and white machinery with small safety-orange accents; no people, no readable text, no logos anywhere in frame. The robot arms in photos are generic unbranded designs. On the page, the arms themselves are drawn as original SVG side profiles — capsule links, sphere joints, cream housing, orange joint rings — geometry invented for this template that deliberately resembles no real maker's arm.

## Pages & Sections
### Home (`index.html`)
1. **Content file and copy rules** — All copy in this prompt is written for the default values ([BRAND] = Torvan, [AUDIENCE] = plant managers at mid-size US factories, [PRIMARY_USE] = palletizing and machine tending, [LABOR_RATE] = $38). Put every string, arm spec, industry, case, chip, form label and footer link in src/content.ts and render from it; components contain no copy. If any variable value differs, rewrite every headline, subhead, industry proof line, case study and form intro so it is specific and believable for the new brand, audience and use case, keeping the same structure and item counts (3 arms, 4 industries, 3 cases, 3 calculator outputs). Derived values in src/lib/brand.ts: brandSlug = [BRAND] lowercased with non-alphanumeric runs replaced by '-'; emailDomain = brandSlug without hyphens + '.com' (torvan.com); companyName = [BRAND] + ' Robotics, Inc.'; address = '700 Foundry Row, Building C, Dayton, OH 45404' (rewrite for the new brand). Arm names stay TL-120 / TL-190 / TL-260 with the drawn geometry unless the builder invents a new line. Every number (specs, prices, payback, proof metrics) is an invented sample for the invented brand and stays labeled as sample data where the sections say so; no customer logos, no testimonials beyond the named invented case customers.
   Layout: No visual output. content.ts exports typed objects: brand, nav, hero, stats, arms (3, with specs and price), industries (4), cases (3), roiCopy, demo, footer. Section order: Header, Hero, Stat band, Arms, Industries, Install band, ROI calculator, Cases, Demo form, Footer.
2. **Header (shared, sticky)** — Left: logo mark + wordmark '[BRAND] ROBOTICS' (Saira 700, 16px, uppercase, letter-spacing 0.04em). Logo mark: 28px inline SVG — a safety-orange (#E8590C) square (radius 3) containing a white capsule-arm glyph: two rounded-rect links at an angle with two white joint dots, 2px strokes. Nav links (Barlow 500, 14px, #4E565E, hover #1D2126): Arms (#arms), Industries (#industries), ROI (#roi), Cases (#cases). Right: orange square-corner button 'Request a demo' (href #demo).
   Layout: Fixed top, height 66px, full width; inner container 1180px, padding-x 24px, flex justify-between items-center. Background #FFFFFF with a 1px bottom #D8DCE0 border at all times (no transparency state). Below 900px: nav hides; show the button (small) and a 40px icon button with Lucide Menu opening a full-width sheet from under the header (background #FFFFFF, border-bottom #D8DCE0) with the four links at 18px, 56px rows, plus a full-width 'Request a demo' button; X closes, Escape closes, link taps close it. Anchors scroll smoothly with a 74px offset.
   Motion: Sheet: Motion height/opacity 220ms ease-out. Nothing else moves.
3. **Hero: arm in a clean factory bay** — Kicker (mono 12px, uppercase, letter-spacing 0.14em, white/80): 'TORVAN ROBOTICS · [PRIMARY_USE]'. H1, two lines, white: 'The extra shift' / 'that never calls in.' Sub (18px, rgba(255,255,255,0.85), max-width 560px): 'Torvan arms handle palletizing and machine tending through all three shifts — installed over a weekend and paying for themselves in months, not years.' Buttons: orange 'Request a demo' (href #demo) and ghost 'Run the ROI math' (white 1.5px border, href #roi). Spec chips (mono 12px uppercase, white on rgba(255,255,255,0.14) with blur): 'REACH 1.9 M', 'PAYLOAD 12 KG', 'REPEAT ±0.02 MM'. Caption bottom-right (mono 11px, white/70): 'TL-190 IN CELL 3 — SAMPLE PHOTOGRAPH'.
   Layout: Full-viewport hero (min-height 90vh). Background: img hero-arm.webp absolute inset-0, object-fit cover, object-position center 40%; overlay linear-gradient(90deg, rgba(18,22,26,0.78) 0%, rgba(18,22,26,0.35) 45%, rgba(18,22,26,0.15) 100%). Content container 1180px, left-aligned, vertically centered (padding-top 120px, padding-bottom 96px): kicker, H1, sub, buttons in a left column (max-width 620px), spec chips in a row under the buttons (wrap on mobile). Mobile: H1 40px, chips wrap 3-across, caption hidden.
   Motion: Entry: kicker, H1, sub, buttons, chips fade up (y 20 -> 0, stagger 0.07s) after 80ms. Photo scales 1.04 -> 1 over 1.2s on load (once). REDUCED MOTION: everything renders in place.
4. **Stat band** — Four invented facts, mono values with labels: '3' / 'ARMS, ONE CONTROL STACK'; '40,000 H' / 'MEAN TIME BETWEEN FAILURES'; '±0.02 MM' / 'REPEATABILITY, TL-190'; '48 H' / 'TYPICAL INSTALL WEEKEND'. All sample values.
   Layout: Full-width band under the hero, background #1D2126, padding 36px 0. Container 1180px; four equal cells separated by 1px rgba(255,255,255,0.14) vertical lines. Value: IBM Plex Mono 600, 30px, #FFFFFF with the unit smaller (18px, #8A939C). Label: mono 11px uppercase, #8A939C, margin-top 6px. Mobile: 2x2 grid with a horizontal divider.
   Motion: Cells fade up stagger 0.07s when 30% in view (once). Numbers do not count up.
5. **Arms: tabbed spec sheets (#arms)** — Section label (mono 12px, uppercase, letter-spacing 0.14em, #8A939C): 'PRODUCT LINE'. H2: 'Three arms. No mystery in the numbers.' Sub (17px, #4E565E): 'Pick a model — the drawing and the sheet change together. Sample specs for the demo line; every number invented.' Tabs (vertical list): TL-120 COMPACT — 'tight cells between machines'; TL-190 GENERAL — 'palletizing and tending one line' (default active); TL-260 HEAVY — 'full-pallet work and press tending'. Spec table rows (mono key left, value right): TL-120 — REACH 1.2 M · PAYLOAD 6 KG · REPEATABILITY ±0.03 MM · FOOTPRINT 180×180 MM · CYCLE TIME 0.9 S · BEST FOR: TIGHT CELLS · PRICE $28,400 (sample); TL-190 — REACH 1.9 M · PAYLOAD 12 KG · REPEATABILITY ±0.02 MM · FOOTPRINT 220×220 MM · CYCLE TIME 1.1 S · BEST FOR: ONE LINE · PRICE $41,900 (sample); TL-260 — REACH 2.6 M · PAYLOAD 24 KG · REPEATABILITY ±0.05 MM · FOOTPRINT 300×300 MM · CYCLE TIME 1.6 S · BEST FOR: FULL PALLETS · PRICE $63,500 (sample). The PRICE row sits on an orange-tint background. Under the table: ghost button 'Get a quote on the TL-190' (text follows the active tab) linking to #demo, and a mono footnote 'SAMPLE SPECS — SWAP IN YOUR OWN BEFORE PUBLISHING'.
   Layout: Section padding 104px 0 (76px mobile), background #ECEEF0. Header left-aligned max-width 640px, margin-bottom 48px. Three-column grid (gap 28px; stacks below 900px): tabs column (span 3), arm drawing (span 5), spec table (span 4). TABS: vertical list; each row padding 14px 16px, 1px #D8DCE0 borders between rows, model name (Saira 600, 18px) + one-line role (14px, #4E565E); active row has a 3px orange left bar and #FCE9DF background. ARM DRAWING (ArmProfile.tsx): white panel, 1px #D8DCE0 border, radius 6px, padding 24px, the side-profile SVG centered, with a mono caption under it 'TL-190 · SIDE PROFILE · ORIGINAL GEOMETRY' (model follows the tab). SPEC TABLE: white panel, 1px #D8DCE0, radius 6px; rows 14px padding-y with 1px #D8DCE0 rules; key mono 11px uppercase #8A939C, value IBM Plex Mono 500 15px #1D2126 right-aligned; PRICE row background #FCE9DF with value in #C44908. ARM PROFILE SVG (viewBox 0 0 360 300) — original geometry, deliberately unlike any real maker's arm: floor shadow ellipse (180,268) rx120 ry14 fill rgba(29,34,38,0.10); base plate rect (120,252,120,12) rx3 fill #D8DCE0 stroke #1D2126 1.5; pedestal rounded rect (162,182,36,72) rx10 fill #F3EFE7 stroke #1D2126 1.5; shoulder sphere circle (180,170) r26 fill #F3EFE7 stroke #1D2126 1.5 with an #E8590C ring stroke 3 inset 4; upper-arm capsule: rounded rect w150 h34 rx17 (from the shoulder, rotated -40°) fill #F3EFE7 stroke #1D2126 1.5 with a 3px orange ring at its far end; elbow sphere r18 fill #F3EFE7 stroke #1D2126 1.5 with orange ring; forearm capsule w120 h26 rx13 rotated +25°, same treatment; wrist sphere r12 with orange ring; gripper: palm block rect w36 h22 rx4 and two parallel finger rects w8 h34 with 6px gaps, fill #1D2126. Link lengths scale per model: TL-120 ×0.75, TL-190 ×1.0, TL-260 ×1.3 (the pedestals and rings stay constant; the drawing re-centers itself).
   Motion: Tab change: profile and table crossfade (opacity 0 -> 1, 240ms); table rows stagger in 30ms apart; the active tab's orange bar slides 200ms; the ghost button label swaps with a 150ms fade. Hover on a tab row: background #F6F7F8. Reduced motion: instant swaps.
6. **Industries (#industries)** — Section label: 'WHERE THEY WORK'. H2: 'Four floors, four proof lines.' Sub: 'Sample outcomes from the demo line's story — invented, believable, labeled.' Cards: 1) Food & Beverage Packing (icon Package, chip 'END OF LINE') — 'Three cells took over end-of-line palletizing at a juice bottler; changeovers down 23%.' 2) Automotive Components (icon Car, chip 'PRESS TENDING') — 'A TL-260 feeds two press lines through the night shift at a stamping plant; scrap down 0.4 points.' 3) Electronics Assembly (icon Cpu, chip 'BOARD HANDLING') — 'TL-120 arms move boards between SMT lines — 11,000 cycles a day at ±0.03 mm.' 4) Metal Fabrication (icon Hammer, chip 'SAW TENDING') — 'Saw-tending cells run through lunch unattended; one operator now runs four saws.' Each proof number (23%, 0.4, 11,000, four) renders in orange.
   Layout: Section padding 104px 0, background #FFFFFF. Header left-aligned max-width 620px, margin-bottom 48px. Cards: 2x2 grid (gap 20px; single column below 900px). Card: background #F6F7F8, 1px #D8DCE0, radius 6px, padding 24px; top row: 40px icon square (ink icon on #FCE9DF, radius 3) + chip right (mono 10px on #F1F3F5); title (Saira 600, 20px, margin-top 14px); proof line (15px, #4E565E).
   Motion: Cards fade up stagger 0.07s (once). Hover: card border darkens to #8A939C. Nothing else.
7. **Install band (parallax photo)** — One line over a wide factory photo, centered: H2 white 'A cell lands on a Friday and runs Monday.' Sub line (mono 12px uppercase, white/80): '48 HOURS · TWO TECHS · YOUR FIRST PART PROVES IT'. No button.
   Layout: Full-bleed band, min-height 420px, position relative, overflow hidden. Background: img bay-wide.webp absolute cover, translateY driven by scroll (parallax); overlay linear-gradient(180deg, rgba(18,22,26,0.55), rgba(18,22,26,0.75)). Content centered, max-width 720px, padding 96px 24px: H2 (Saira 700, clamp(28px,3.4vw,44px), white), sub mono under it.
   Motion: Parallax: the photo translates 0 -> 6% of its height as the band crosses the viewport (rAF, transform only). Content fades up once. REDUCED MOTION: photo fixed, content in place.
8. **ROI calculator (#roi)** — Section label: 'THE ROI MATH'. H2: 'Two sliders. One payback number.' Sub: 'All math runs in your browser from sample rates — swap in your own before quoting anyone.' Left column, inputs: slider 'OPERATORS PER SHIFT' 1-8 (default 2), slider 'SHIFTS PER DAY' 1-3 (default 2); under them a mono line: 'LABOR RATE [LABOR_RATE]/H — SAMPLE DEFAULT, CHANGE IT IN ONE PLACE' and an active-arm chip: 'ARM: TL-190 · $41,900 SAMPLE' (follows the arms tab; TL-190 by default). Right column, outputs with mono labels: 'ANNUAL LABOR REPLACED' (big dollar figure), 'PAYBACK' (months, 1 decimal), '3-YEAR NET' (big dollar figure). Assumption chips under the outputs (mono 11px, #4E565E on #F1F3F5): '2080 H/YR', '70% UTILIZATION', '4%/YR UPKEEP', 'INTEGRATION $18,500/CELL + $2,400 TRAINING'. Footnote (13px, #8A939C): 'Sample math with invented rates. Default setup — 2 operators, 2 shifts, $38/h on the TL-190 — lands at roughly $221K replaced, 6.8-month payback and $531K three-year net.'
   Layout: Section padding 104px 0, background #ECEEF0. Header left-aligned max-width 640px, margin-bottom 48px. Calculator: one white panel, 1px #D8DCE0, radius 6px, two columns (gap 40px; stacks below 900px), padding 32px. Sliders: custom range inputs — track 4px #D8DCE0 with an orange fill to the knob (linear-gradient background sized by value), 22px square knob (#1D2126 with a 3px orange border), mono value chip right of each label. Outputs: three blocks stacked; value IBM Plex Mono 600, 40px, #1D2126 ('PAYBACK' unit ' MO' at 20px #8A939C); label mono 11px uppercase #8A939C above each. Chips wrap under the outputs.
   Motion: Sliders: fill updates live; outputs tween between old and new values (300ms, values rounded per format) whenever an input or the active arm changes. Reduced motion: instant updates. MATH (exact, in src/lib/roi.ts, pure function): rate = digits of [LABOR_RATE]; hours = operators * shifts * 2080; saved = hours * rate * 0.7; cells = operators; hardware = cells * armPrice; integration = cells * 18500 + 2400; total = hardware + integration; upkeep = 0.04 * hardware; netYear = saved - upkeep; paybackMonths = total / netYear * 12 (round 1 decimal); threeYearNet = 3 * netYear - total. Format dollars with thousands separators, no decimals; three-year net in full dollars.
9. **Case studies (#cases)** — Section label: 'FROM THE FLOOR'. H2: 'Three deployments, three numbers.' Card 1 — photo pallet-cells.webp, chip 'FOOD', 'Lakeline Foods' — '3 × TL-190, end-of-line palletizing. Changeovers down 23%; six open roles reassigned instead of hired.' Metric chip: '23% FASTER CHANGEOVERS'. Card 2 — photo conveyor-line.webp, chip 'STAMPING', 'Vantage Stamping' — '2 × TL-260 tending two press lines. Lights-out shifts within two months of install.' Metric chip: '0.4 PTS LESS SCRAP'. Card 3 — photo detail-gripper.webp, chip 'ELECTRONICS', 'Orin Circuits' — '4 × TL-120 moving boards between SMT lines, 11,000 cycles a day at ±0.03 mm.' Metric chip: '11,000 CYCLES/DAY'. Footnote under the grid (13px, #8A939C): 'Customers and outcomes are invented samples for the demo site.'
   Layout: Section padding 104px 0, background #FFFFFF. Header left-aligned, margin-bottom 48px. Cards: 3-column grid (gap 24px; single column below 900px). Card: background #F6F7F8, 1px #D8DCE0, radius 6px, overflow hidden; photo top aspect-ratio 4:3 (cover; detail-gripper.webp is square, crop center); body padding 20px: chip (mono 10px on #F1F3F5), customer name (Saira 600, 20px), two-line summary (15px, #4E565E), metric chip (mono 11px, #C44908 on #FCE9DF).
   Motion: Cards fade up stagger 0.07s (once). Hover: photo scales 1 -> 1.03 inside the frame. Reduced motion: static.
10. **Demo request (#demo)** — Left column: photo bay-detail.webp (4:3, orange 3px rule under it) with a mono caption 'CELL 3, DAYTON SHOWROOM — SAMPLE PHOTO'. Right column: section label 'SEE ONE RUN'. H2: 'Request a demo.' Body (16px, #4E565E): 'Thirty minutes on our floor or yours — [PRIMARY_USE], your parts, your cycle time. We will email within one business day to set it up.' Form fields (labels mono 11px uppercase): Name (text, required), Company (text, required), Work email (email, required), Process (select: Palletizing / Machine tending / Part inspection / Not sure yet), Notes (textarea, placeholder 'Part weight, cycle target, floor space — anything useful.'). Submit: orange button 'Request a demo'. Success panel: a 40px orange-tint square with an orange Check, heading 'Request noted', text 'Thanks — a note is on its way from hello@' + emailDomain + ' within one business day.' and a text button 'Send another request'. Errors: inline 'Required' / 'Enter a valid email address' in #C44908 under the fields, aria-invalid set.
   Layout: Section padding 104px 0, background #ECEEF0. Two columns: photo col-span-5 (sticky top 96px on desktop), form col-span-7 in a white panel (1px #D8DCE0, radius 6px, padding 32px). Fields 2-column grid (Name+Company, Email+Process, Notes full width); inputs background #FFFFFF, 1px #D8DCE0, radius 4px, padding 12px 14px, focus ring 2px orange. Mobile: photo above the form, not sticky.
   Motion: Panel fades up (once). Success fades and scales 0.98 -> 1 (220ms). The form calls preventDefault and only changes local state; nothing is sent.
11. **Footer** — Left: logo mark + '[BRAND] ROBOTICS', one line 'Industrial arms for [PRIMARY_USE].' and the address '700 Foundry Row, Building C, Dayton, OH 45404' with hello@ + emailDomain. Three link columns: Product (Arms #arms, Industries #industries, ROI #roi), Proof (Cases #cases, Demo #demo), Company (About, Service plans, Careers -> #top). Bottom row: '© ' + companyName on the left (no year, no date); right: text links Terms, Privacy (#top) and a 36px icon button with Lucide Mail (mailto). Then the optional [CREDIT] link if provided.
   Layout: Padding 64px 0 36px, background #F6F7F8, border-top 1px #D8DCE0. Container 1180px; grid 12 columns: brand block col-span-5, link columns col-span-2 each (heading Barlow 600 13px uppercase letter-spacing 0.08em; links 14px #4E565E hover #1D2126). Bottom row margin-top 48px, padding-top 20px, border-top 1px #D8DCE0, 13px #8A939C, flex justify-between. Mobile: brand block full width, link columns 2-column grid, bottom row stacks.
   Motion: None beyond link color transitions.

## Assets
- image: Six template images generated for this design (Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template), all one look: industrial photographs of clean skylit factory bays and unbranded machinery with small safety-orange accents, no people, no readable text, no logos. Download each with curl -L -o into public/images/ and reference as './images/<file>': https://media.vibefather.ai/assets/bb307245-6bbe-4ce1-95ab-6491c2ac1c4a/hero-arm.webp -> public/images/hero-arm.webp (hero background; alt 'A generic unbranded robot arm with cream housing and orange joint rings standing in a clean factory bay'); https://media.vibefather.ai/assets/bb307245-6bbe-4ce1-95ab-6491c2ac1c4a/bay-wide.webp -> public/images/bay-wide.webp (install band background; alt 'A wide empty factory bay with skylights and a line of machines'); https://media.vibefather.ai/assets/bb307245-6bbe-4ce1-95ab-6491c2ac1c4a/pallet-cells.webp -> public/images/pallet-cells.webp (case study 1; alt 'A robot arm placing plain boxes on a pallet inside a safety fence'); https://media.vibefather.ai/assets/bb307245-6bbe-4ce1-95ab-6491c2ac1c4a/conveyor-line.webp -> public/images/conveyor-line.webp (case study 2; alt 'A robot arm tending machines along a conveyor'); https://media.vibefather.ai/assets/bb307245-6bbe-4ce1-95ab-6491c2ac1c4a/detail-gripper.webp -> public/images/detail-gripper.webp (case study 3; alt 'Close view of a two-finger robotic gripper'); https://media.vibefather.ai/assets/bb307245-6bbe-4ce1-95ab-6491c2ac1c4a/bay-detail.webp -> public/images/bay-detail.webp (demo-request photo; alt 'A control cabinet and safety fence in a factory bay corner'). Six files total; do not substitute other images.
- image: Drawn in code, no bitmaps: the logo mark and public/favicon.svg (orange square, white capsule-arm glyph), and ArmProfile.tsx — the original side-profile arm SVG (capsule links, sphere joints, cream fill, orange rings, per-model scaling) whose geometry is specified in the Arms section. The drawn geometry is invented for this template; do not trace or approximate any real robot arm design.
- icon: lucide-react (ISC), imported per icon: Package, Car, Cpu, Hammer, Check, Menu, X, Mail, ArrowRight, Settings, Wrench, Factory. No brand logos, no Simple Icons.
- font: Install @fontsource-variable/saira, @fontsource-variable/barlow and @fontsource/ibm-plex-mono (all OFL-1.1) and import them in src/fonts.ts. Vite bundles the woff2 files into dist/.
- image: Write ASSETS.md at the project root with a table (path, source URL, author, license): one row per image in public/images/ with its media.vibefather.ai URL, author 'VibeFather', license 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template'; rows for the three Fontsource packages (OFL-1.1, https://fontsource.org) and lucide-react (Lucide contributors, ISC, https://lucide.dev); and a line noting the logo, favicon and arm profile drawing are original code-drawn art for this project.

## Don'ts
- No backend of any kind: no server code, API routes, databases, auth, email services, analytics or third-party APIs. The demo form calls preventDefault and only changes local UI state; the ROI calculator is pure local math; nothing is submitted or sent.
- No real robotics companies, product names, logos or arm designs anywhere — never name or evoke a real robot maker, and never draw an arm that imitates a recognizable industrial arm silhouette (bulky orange cabinets, square castings, red or yellow liveries). The drawn arm stays the original capsule-and-sphere geometry specified in the Arms section.
- Specs, prices, proof metrics and ROI outputs are invented samples; keep the sample labels and footnotes specified in the Arms, ROI and Cases sections, and never present them as certified or measured data.
- No safety or quality certifications claimed: no CE, UL, ISO or standards badges, marks or numbers anywhere.
- Photos show factory bays and machinery only — no people, no faces, no readable text or logos in frame; use exactly the six listed files, no stock photos, no placeholder-image services.
- Do not load fonts from fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts or any CDN. Self-host through the three Fontsource packages only. No commercial fonts.
- No CDN script or link tags; every script, style, font, icon and image is installed or downloaded into the project and bundled into dist/. Never hotlink the media.vibefather.ai URLs at runtime; download them first.
- No source maps in the production build (build.sourcemap false), and src/ is not copied into dist/.
- Relative asset paths (Vite base './', images as ./images/<file>). Internal links are hash anchors (#arms, #industries, #roi, #cases, #demo, #top) or ./index.html, never a bare directory or a leading slash.
- No dates or years anywhere on the site: no copyright year, no founded-in, no install or event dates. The footer copyright line carries only companyName.
- Do not use code or components from Aceternity UI, Tailwind Plus / Tailwind UI or any purchased template for the tabs, sliders, parallax or calculator. Re-implement everything as described here.
- Respect prefers-reduced-motion: no crossfades, tweening or parallax; sliders and the form keep working as direct interaction.
- Animate only transform and opacity on HTML elements; never animate width, height, top or left directly (slider fills use a background gradient, not an animated width).
- Must work at 1440x900 and 390x844 with zero console errors and no horizontal scroll; the ROI panel must fit one mobile screen without horizontal scrolling of its chips.
- Do not mention VibeFather anywhere in the site except the optional [CREDIT] footer link.

---
— Prompt by VibeFather · https://vibefather.ai/t/industrial-robotics-company-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.