50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Clock, Banknote, MapPin } from 'lucide-react';
|
|
|
|
interface InfoHighlightsProps {
|
|
description: string;
|
|
highlights: {
|
|
icon: 'clock' | 'price' | 'map';
|
|
title: string;
|
|
description: string;
|
|
}[];
|
|
}
|
|
|
|
const iconMap = {
|
|
clock: Clock,
|
|
price: Banknote,
|
|
map: MapPin,
|
|
};
|
|
|
|
export const InfoHighlights = ({ description, highlights }: InfoHighlightsProps) => {
|
|
return (
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
<div className="lg:col-span-5">
|
|
<h2 className="text-3xl font-bold text-primary mb-6">Szybki montaż, jasne zasady</h2>
|
|
<p className="text-gray-600 text-lg leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-6">
|
|
{highlights.map((item, idx) => {
|
|
const Icon = iconMap[item.icon];
|
|
return (
|
|
<div key={idx} className="bg-gray-50 p-6 rounded-xl border border-gray-100 flex flex-col items-center text-center">
|
|
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mb-4 text-accent">
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="font-semibold text-primary mb-2">{item.title}</h3>
|
|
<p className="text-sm text-gray-500">{item.description}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|