Files

72 lines
3.1 KiB
TypeScript

import React from 'react';
import Image from 'next/image';
import { SectionHeading } from '../common/SectionHeading';
import { CheckCircle2 } from 'lucide-react';
import { companyDetails } from '@/content/company';
export function AboutStory() {
return (
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
{/* Lewa: Obraz */}
<div className="relative">
<div className="relative aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl">
<Image
src="/images/about/about-story.webp"
alt="Zespół firmy w trakcie pracy"
fill
className="object-cover"
/>
</div>
{/* Ozdobny element zaufania */}
<div className="absolute -bottom-8 -right-8 bg-white p-6 rounded-2xl shadow-xl hidden md:block">
<div className="flex items-center gap-4">
<div className="flex-shrink-0 w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center">
<span className="text-2xl font-extrabold text-accent font-heading">
{companyDetails.stats.find(s => s.label.includes("doświadczenia"))?.value || "15+"}
</span>
</div>
<div>
<p className="font-bold text-primary font-heading text-lg leading-none mb-1">Lat na rynku</p>
<p className="text-sm text-text-muted">Doświadczenie i zaufanie</p>
</div>
</div>
</div>
</div>
{/* Prawa: Tekst */}
<div>
<SectionHeading
eyebrow="Nasza Historia"
title="Budujemy komfort od fundamentów aż po dach"
align="left"
/>
<div className="prose prose-lg text-text-muted mt-8 mb-10">
<p>
Firma {companyDetails.name} powstała z pasji do nowoczesnych technologii oraz chęci dostarczania kompleksowych usług dla domów i firm. Zaczynaliśmy jako niewielka, dwuosobowa ekipa specjalizująca się w instalacjach HVAC. Dziś jesteśmy liderem w regionie, realizując setki zaawansowanych projektów instalacyjnych rocznie.
</p>
<p>
Naszym celem jest upraszczanie życia naszym klientom. Zamiast szukać oddzielnych fachowców od hydrauliki, klimatyzacji i wykończeń, u nas otrzymujesz całościowe wsparcie z gwarancją jakości.
</p>
</div>
<ul className="space-y-4">
{[
"Certyfikowani instalatorzy z uprawnieniami F-Gaz",
"Dbałość o czystość podczas prac montażowych",
"Gwarancja i szybki serwis na terenie miasta i okolic",
"Pomoc w uzyskiwaniu dofinansowań"
].map((point, idx) => (
<li key={idx} className="flex items-start gap-3">
<CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
<span className="text-primary font-medium">{point}</span>
</li>
))}
</ul>
</div>
</div>
</section>
);
}