9cf5cea3ba
- Redesigned configurator page with split-screen interface - Left: Large visual preview with sticky positioning - Right: Premium white controls container with form steps - Added complete configurator wizard (5 steps) - Updated hero CTA to "Zelf ontwerpen" - Configured Shadcn UI with Slate theme - Added layout components (Navbar, Footer) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
export function AboutTeaser() {
|
|
return (
|
|
<section className="border-t border-border bg-muted/40 py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="grid items-center gap-12 lg:grid-cols-2">
|
|
{/* Text */}
|
|
<div>
|
|
<p className="mb-2 text-sm font-semibold uppercase tracking-widest text-brand-blue">
|
|
Over Proinn
|
|
</p>
|
|
<h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">
|
|
Vakmanschap sinds de eerste las
|
|
</h2>
|
|
<p className="mb-4 leading-relaxed text-muted-foreground">
|
|
Bij Proinn draait alles om staal. Onze werkplaats combineert
|
|
traditioneel vakmanschap met moderne technieken om producten te
|
|
leveren die niet alleen functioneel zijn, maar ook esthetisch
|
|
verantwoord.
|
|
</p>
|
|
<p className="mb-8 leading-relaxed text-muted-foreground">
|
|
Van industriële stalen deuren tot op maat gemaakte kozijnen — wij
|
|
denken mee, ontwerpen en produceren alles in eigen huis.
|
|
</p>
|
|
<Button asChild variant="outline" size="lg">
|
|
<Link href="/contact">
|
|
Neem Contact Op
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Image */}
|
|
<div className="relative aspect-[4/3] overflow-hidden rounded-lg">
|
|
<Image
|
|
src="/images/about.jpg"
|
|
alt="Proinn werkplaats — stalen deuren productie"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
{/* Accent corner */}
|
|
<div className="absolute bottom-0 left-0 h-1.5 w-24 bg-brand-orange" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|