Summary
Porsche design system
https://porsche-perfection-pds.lovable.appA one-page showcase for the 911 Turbo S, built entirely with @porsche-design-system/components-react. Every heading, button, table, and tag is a native PDS component; no custom CSS, no overrides. Dark theme throughout, fully responsive, with a hero section, key figures, feature highlights, technical specs, and an image carousel.
A practical demonstration of what vibe coding looks like when you constrain the AI to a real design system rather than letting it freestyle with Tailwind.
Anonymous Maker
Prompt(s) used to build this project
Build a stunning one-page React web app showcasing the Porsche 911 Turbo S using the official Porsche Design System v3.
## Setup
Install the package: `@porsche-design-system/components-react`
Wrap the entire app with `<PorscheDesignSystemProvider theme="dark">` from `@porsche-design-system/components-react`.
## Page structure (single scrollable page, dark theme throughout)
### 1. Navigation bar
- Fixed top bar with Porsche `<PCrest>` logo on the left and the model name "911 Turbo S" on the right using `<PText>`
- Use a frosted glass background style (`backdrop-filter: blur`)
### 2. Hero section — full viewport height
- Background: full-bleed image of the 911 Turbo S (use a reliable Unsplash URL for a Porsche 911)
- Overlay gradient from transparent to black at bottom
- `<PDisplay size="large">Porsche 911 Turbo S</PDisplay>` centered
- Tagline below using `<PText size="large">`: "The benchmark. Redefined."
- CTA: `<PButton variant="primary">Configure yours</PButton>` and `<PButton variant="secondary">Discover more</PButton>` side by side
### 3. Key figures section — 3 columns
Use CSS grid (3 equal columns). For each stat use a `<PDisplay>` for the number and `<PText>` for the label:
- 650 PS / Power output
- 2.7 s / 0–100 km/h
- 330 km/h / Top speed
### 4. Features section
Title: `<PHeading size="x-large">Engineered to Perfection</PHeading>`
3 feature cards side by side, each with:
- An icon using `<PIcon>` (use: "garage", "car", "performance" or closest available)
- A `<PHeading size="medium">` for title
- A `<PText>` for a 2-line description
Features to highlight: Twin-Turbo Flat-Six Engine / PDCC Sport Suspension / Porsche Traction Management
### 5. Specs table section
Title: `<PHeading>Technical Specifications</PHeading>`
Use `<PTable>` component with two columns (Specification / Value):
- Engine: 3.8-litre twin-turbo flat-six
- Power: 650 PS (478 kW)
- Torque: 800 Nm
- Transmission: 8-speed PDK
- Drive: All-wheel drive
- 0–100 km/h: 2.7 seconds
- Top Speed: 330 km/h
- Kerb Weight: 1,640 kg
### 6. Visual gallery strip
Full-width `<PCarousel>` with 3 images of the 911 Turbo S from Unsplash (search: "porsche 911 turbo"). Each slide is 100vw x 500px with object-fit: cover.
### 7. CTA section
Centered, dark background, full-width padding:
- `<PHeading>Your 911 Turbo S awaits.</PHeading>`
- `<PButton variant="primary" icon="arrow-right">Build & Price</PButton>`
### 8. Footer
- `<PDivider>` at top
- `<PCrest>` centered
- `<PText align="center" color="contrast-medium">© 2025 Dr. Ing. h.c. F. Porsche AG</PText>`
- A small `<PTag color="background-frosted">` badge reading: "Built with the Porsche Design System" with a link pointing to https://designsystem.porsche.com/v3/
## Design rules
- Theme: **dark** throughout (pass `theme="dark"` on PorscheDesignSystemProvider)
- Typography: exclusively use `<PDisplay>`, `<PHeading>`, `<PText>` — no raw h1/h2/p tags
- Spacing: use the PDS spacing scale (--p-spacing-* tokens) for all padding/margins
- No custom color overrides — use only PDS theme tokens
- All buttons must be `<PButton>` from PDS — no HTML buttons
- Fully responsive: single column on mobile, multi-column on desktop
- Smooth scroll behavior on the html element
Ready to build something amazing?
Start creating your own project with lovable.dev - the platform that makes web development simple and enjoyable.
Get started nowRecently added projects