React Product Detail Page
The whole part page, assembled. ProductHeader sits on top with breadcrumbs, the mono part number, lifecycle + process chips, and a section tab row — and those tabs actually drive the panel below, switching between Overview, Specifications (a live SpecSheet), Ordering (volume price breaks), and Documents. Alongside runs a sticky buy box whose unit price steps down as you raise the quantity across the volume breaks, and the page closes with a related-parts grid of ProductCards. Click the header tabs, and change the quantity in the buy box to watch the price move.
AXM-330 Application SoC — Industrial
Quad Cortex-A53 application platform, silicon-proven on 16nm, built for industrial gateways and edge compute.
FCBGA-256 · Industrial · −40…+105 °C · RoHS / REACH
Overview
The AXM-330 pairs a quad-core application cluster with a deterministic real-time domain, hardware security, and a rich connectivity set — a single-chip platform for industrial gateways, protocol converters, and edge inference nodes.
Key features
- Quad Arm Cortex-A53 @ 1.2 GHz with 512 KB shared L2
- Hardware crypto (AES-256, SHA-2, TRNG) with secure boot
- Dual Gigabit Ethernet with IEEE 1588 timestamping
- −40 to +105 °C industrial junction range, AEC-Q100 in progress
Related parts
AXM-550 SoC — Safety
Adds a lock-step Cortex-R52 safety island with ASIL-D work products.
- Package
- FCBGA-676
- Safety
- ASIL-D ready
AXM-110 SoC — Entry
Dual-core entry platform for cost-sensitive designs.
- Package
- QFN-48
- Max freq
- 800 MHz
PMU-12C Companion PMIC
12-rail power-management IC matched to the AXM-330 power tree.
- Rails
- 12
- Package
- QFN-24
Installation
Composition
| Piece | Source | Role |
|---|---|---|
| ProductHeader | product-header | Breadcrumbs, PN/lifecycle chips, actions, section tabs |
| SpecSheet | spec-sheet | The Specifications panel (Min/Typ/Max groups, footnotes) |
| ProductCard | product-card | Related-parts grid |
| Button | button | Header actions, downloads, buy box |
| Buy box | inline | Volume-break pricing derived from quantity |
The header's onTabChange sets a local tab state that selects the panel; the buy box holds quantity and derives the unit price from the volume breaks. Everything else is presentational — replace the demo part, specs, and price breaks with your catalog data.