Story
Immersive storytelling block
Use motion-enabled cards to highlight components of the Lectromec experience: labs, methodologies, engineers.
VideoMetricsCTA
Component Library
Lectromec UI Components
A living reference of every reusable UI building block extracted from the Lectromec design system. Each component is self-contained and styled with the brand palette.
Typography
Eyebrow
Small uppercase tracking text used above headings throughout the site.
Certification Studio
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Text content |
className | string? | Additional CSS class |
Telemetry
VoltagePulseIndicator
Slim animated bar used to visualize EWIS health or CTA urgency with nominal, warning, and critical states.
Cabin Load
Engine Harness
Aft Bay
| Prop | Type | Description |
|---|---|---|
label | string? | Uppercase caption above the indicator |
value | number? | Fill amount between 0 and 1 (default 0.65) |
status | "nominal" | "warning" | "critical" | Color + glow variant |
Decor
WireConnector
Decorative connector/divider element for separating sections with the wire-harness metaphor.
Signal
Telemetry
| Prop | Type | Description |
|---|---|---|
label | string? | Optional uppercase text in the connector |
orientation | "horizontal" | "vertical" | Arranges the connector caps and line |
Process
MissionChecklist
Instrument-panel checklist for showing certification milestones with illuminated pins.
- Requirements Sync
Document EWIS deliverables and safety case boundaries.
- Wire Analysis
Model thermal/electrical loads and aging patterns.
- Lab Validation
High-voltage stress, abrasion, and arc-fault testing.
- Certification Report
Instrument-panel ready scoring plus mitigation actions.
| Prop | Type | Description |
|---|---|---|
steps | { id: string; title: string; detail?: string; status?: "complete" | "current" | "upcoming"; timestamp?: string }[] | Checklist entries |
Data Display
HarnessMapCard
Schematic-style card mapping aircraft zones with glowing status nodes and zone list.
Wire Coverage
Fleet Wire Coverage
Live feed from Lectromec Mission Control
- CockpitHUD, avionics bay, MCC panels
- Mid FuselageCabin service runs, ECS harness
- Aft SectionAPU harness, tailcone sensors
- Wing BoxFuel quantity probes, nav lights
| Prop | Type | Description |
|---|---|---|
title | string | Main heading for the card |
subtitle | string? | Optional supporting text |
zones | { id: string; name: string; description?: string; status?: "nominal" | "warning" | "critical" }[] | Aircraft zone data |
Navigation
InstrumentTabs
Tabset styled like cockpit gauges with live metrics and accessible keyboard controls.
EWIS load trending nominal with minor chafing near service panels.
| Prop | Type | Description |
|---|---|---|
tabs | { id: string; label: string; metric?: string; meta?: string; content: ReactNode }[] | Tab definitions |
defaultTab | string? | Initial active tab id |
Typography
SectionHeading
Eyebrow + heading combo used to introduce content sections.
Services
Glowing service lattice with layered CTAs.
| Prop | Type | Description |
|---|---|---|
eyebrow | string? | Optional eyebrow label above heading |
heading | string | Main heading text |
Actions
CTAButton
Primary amber gradient button with outline and secondary variants.
| Prop | Type | Description |
|---|---|---|
variant | "primary" | "outline" | "secondary" | Visual style variant |
children | ReactNode | Button label |
disabled | boolean? | Disable interaction |
Data Display
Chip & ChipRow
Pill-style tags for categories, specs, and metadata.
VideoMetricsCTAEnvironmentalWire
ASTM E84UL 94MIL-DTL-22759
| Prop | Type | Description |
|---|---|---|
filled | boolean? | Solid background instead of border |
chips (ChipRow) | string[] | Array of labels to render |
Data Display
StatTile
Glassmorphism tile with a label, large value, and description. Used in hero matrices.
Programs142
Aircraft & rotorcraft teams rely on Lectromec every year.
Tests2,350
Wire & cable tests completed with digital reporting.
Arc Events16
Critical anomalies detected this quarter.
| Prop | Type | Description |
|---|---|---|
label | string | Uppercase label above the value |
value | string | Large highlighted metric |
description | string? | Supporting text below value |
status | "default" | "nominal" | "warning" | "critical" | Applies voltage-state styling and pulse overlay |
Layout
GlassCard
Deep-space card with a sky-blue radial glow on hover.
Experience
Guided service pathways
Place visitors on curated journeys with toggles for Aerospace/Industrial.
SwitchersIndustries
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Card content |
Cards
ServiceCard
Numbered service item with title, description, and an arrow link footer.
EWIS Certification Pods
Embedded engineers bridging DER expectations and internal workflows.
Component Trials
Accelerated testing suites built around your program's protocols.
Aging Fleet Strategy
Predictive analytics and maintenance roadmaps.
| Prop | Type | Description |
|---|---|---|
id | string | Numeric identifier shown top-left |
title | string | Service name |
description | string | Brief description |
Cards
ResourceCard
Downloadable resource card with type label, description, and action button.
EWIS Certification Playbook
Step-by-step for program managers.
Inside the Lab
90-second overview.
Wire System Risk Indicators
Data-backed insights.
| Prop | Type | Description |
|---|---|---|
type | string | Amber-colored type label |
title | string | Resource name |
description | string | Brief description |
action | string | Button label |
onAction | () => void | Click handler |
Brand
PaletteBar
Sticky color palette bar displaying brand swatches with hex values and labels.
| Prop | Type | Description |
|---|---|---|
colors | { hex: string; label: string }[] | Array of palette colors |
Brand
ClientStrip
Horizontal grid of grayscale client logos that reveal color on hover.
| Prop | Type | Description |
|---|---|---|
clients | { src: string; alt: string }[] | Array of client logo images |
Layout
GridBackground
Fixed subtle grid overlay that gives pages the oscilloscope aesthetic. Already active on this page.
Look behind this content — the faint grid lines are rendered by <GridBackground />.
| Prop | Type | Description |
|---|---|---|
| No props — zero-config decorative element. | ||
Hero
HeroBanner
Full-width hero with background image, wire-trace grid overlay, heading, subtext, and CTA slot.
| Prop | Type | Description |
|---|---|---|
eyebrow | string? | Small uppercase label above the heading |
heading | string | Main hero heading |
subtext | string? | Supporting paragraph |
backgroundImage | string? | URL for the background image |
aside | ReactNode? | Content rendered beside the heading |
children | ReactNode? | CTA buttons / actions area |
Hero
PageBanner
Simplified subpage banner with a title and optional breadcrumb trail.
| Prop | Type | Description |
|---|---|---|
title | string | Page title displayed as H1 |
backgroundImage | string? | Background image URL |
breadcrumbs | { label: string; href?: string }[] | Breadcrumb trail items |
Feedback
AlertBanner
Dismissible announcement strip with wire-trace pulse allowing info, success, warning, and critical states.
| Prop | Type | Description |
|---|---|---|
message | string | Banner text |
href | string? | Optional link URL |
variant | "info" | "success" | "warning" | "critical" | "nominal" | Color variant |
dismissible | boolean? | Show dismiss button (default true) |
pulse | boolean? | Add moving voltage sweep overlay |
Layout
SpotlightGrid
Icon + label grid for highlighting key service areas. Icons glow on hover.
| Prop | Type | Description |
|---|---|---|
items | { icon: ReactNode; label: string; description?: string }[] | Array of spotlight items |
Cards
CalloutCard
Sidebar promotional card for white papers and downloads. Accent variant adds an amber left border.
| Prop | Type | Description |
|---|---|---|
icon | ReactNode? | Icon displayed at top |
title | string | Card heading |
description | string | Card body text |
features | string[]? | Bullet list of features |
actionLabel | string | Button / link label |
actionHref | string? | If set, renders as a link |
accent | boolean? | Amber left-border accent variant |
Cards
ArticleCard
Blog listing card with image, meta info, excerpt, tags, and hover lift effect.
| Prop | Type | Description |
|---|---|---|
title | string | Article headline |
excerpt | string | Short summary text |
date | string | Publication date |
author | string | Author name |
image | string? | Featured image URL |
href | string | Link destination |
tags | string[]? | Tag pills below excerpt |
Content
AuthorBio
Author block with avatar, name, title, bio, and optional email link.
Michael Traskos
President, Lectromec
Michael leads Lectromec's EWIS certification and testing programs with over 20 years of experience in aerospace wire system engineering.
info@lectromec.com| Prop | Type | Description |
|---|---|---|
name | string | Author name |
title | string | Role / job title |
bio | string | Short biography |
avatar | string? | Avatar image URL |
email | string? | Email address |
Content
Timeline
Vertical timeline with a wire-trace center line and alternating items with year badges.
1984
Lectromec founded as a wire system engineering consultancy.
1995
Expanded into EWIS testing with dedicated laboratory facilities.
2005
Achieved DER authorization for EWIS certification services.
2015
Launched digital reporting platform for wire test data.
2021
Opened expanded testing facility in Chantilly, Virginia.
| Prop | Type | Description |
|---|---|---|
items | { year: string; description: string }[] | Array of timeline entries |
Content
ContactInfo
Icon + label + value rows for displaying contact details.
🏠
Address4230 Lafayette Center Drive, Suite K, Chantilly, VA 20151
☎
Phone+1 703 263 7100
✉
Emailinfo@lectromec.com
| Prop | Type | Description |
|---|---|---|
items | { icon: ReactNode; label: string; value: string; href?: string }[] | Array of contact rows |
Layout
Divider
Wire-trace horizontal rule with a center connector node. Subtle variant omits the node.
Default variant:
Subtle variant:
| Prop | Type | Description |
|---|---|---|
variant | "default" | "subtle" | Visual style (default shows center node) |
Navigation
Tabs
Tab switcher with sky-blue active indicator. Useful for Aerospace/Industrial content sections.
New Platform Services
EWIS design and certification for new aircraft programs.
Existing Platform Services
Sustainment and modification support for legacy fleets.
| Prop | Type | Description |
|---|---|---|
tabs | { id: string; label: string; content: ReactNode }[] | Array of tab definitions |
defaultTab | string? | ID of initially active tab |
Navigation
Accordion
Expandable content sections with single or multi-open mode.
EWIS (Electrical Wiring Interconnection System) certification ensures that aircraft wiring systems meet FAA and EASA airworthiness requirements for safety, reliability, and maintainability.
Test turnaround depends on scope. Standard wire qualification testing takes 4-6 weeks, while expedited programs can be completed in 2-3 weeks with priority scheduling.
Yes. Lectromec tests to MIL-DTL, SAE AS, ASTM, IEC, and other international wire and cable specifications. We maintain accreditations recognized globally.
| Prop | Type | Description |
|---|---|---|
items | { id: string; title: string; content: ReactNode }[] | Accordion sections |
allowMultiple | boolean? | Allow multiple sections open (default false) |
Navigation
Pagination
Numbered page navigation with ellipsis for large page counts.
| Prop | Type | Description |
|---|---|---|
currentPage | number | Active page number |
totalPages | number | Total number of pages |
onPageChange | (page: number) => void | Page change callback |
Navigation
Breadcrumb
Navigation breadcrumb trail with sky-blue links.
| Prop | Type | Description |
|---|---|---|
items | { label: string; href?: string }[] | Breadcrumb items (last without href is current page) |
Navigation
SearchOverlay
Full-screen search overlay with input, category sidebar, and tag filters. Press Escape to close.
| Prop | Type | Description |
|---|---|---|
open | boolean | Whether the overlay is visible |
onClose | () => void | Close callback |
categories | string[]? | Category filter list |
popularTags | string[]? | Tag filter pills |
onSearch | (query: string) => void | Search input callback |
results | ReactNode? | Custom results content |