80 lines
4.1 KiB
TypeScript
80 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { companyDetails } from '@/content/company';
|
|
import { ContactForm } from '../forms/ContactForm';
|
|
import { MapPin, Phone, Mail, Clock, FileText } from 'lucide-react';
|
|
|
|
export function ContactSection() {
|
|
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-16 lg:gap-24">
|
|
<div className="flex flex-col">
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-primary font-heading mb-6">
|
|
Porozmawiajmy o Twoim projekcie
|
|
</h2>
|
|
<p className="text-text-muted text-lg mb-12">
|
|
Jesteśmy do Twojej dyspozycji. Zadzwoń, napisz e-mail lub skorzystaj z formularza obok. Odpowiadamy najszybciej jak to możliwe, najczęściej w ciągu kilku godzin.
|
|
</p>
|
|
|
|
<div className="space-y-8 flex-grow">
|
|
<div className="flex items-start gap-4 group">
|
|
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
|
|
<Phone className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Zadzwoń do nas</p>
|
|
<a href={`tel:${companyDetails.phoneRaw}`} className="text-base font-bold text-primary hover:text-accent transition-colors font-heading">
|
|
{companyDetails.phone}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4 group">
|
|
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
|
|
<Mail className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Napisz e-mail</p>
|
|
<a href={`mailto:${companyDetails.email}`} className="text-base font-bold text-primary hover:text-accent transition-colors font-heading">
|
|
{companyDetails.email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4 group">
|
|
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
|
|
<MapPin className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Nasze biuro</p>
|
|
<div className="text-sm font-medium text-primary">
|
|
{companyDetails.name}<br />
|
|
{companyDetails.address.street}<br />
|
|
{companyDetails.address.zipCode} {companyDetails.address.city}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-8 border-t border-border">
|
|
<div className="flex items-start gap-3">
|
|
<Clock className="w-5 h-5 text-primary/60 mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-muted mb-1">Godziny pracy</p>
|
|
<p className="text-sm text-primary font-medium">{companyDetails.hours}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<FileText className="w-5 h-5 text-primary/60 mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-muted mb-1">Dane firmy</p>
|
|
<p className="text-sm text-primary font-medium">NIP: {companyDetails.nip}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-primary/5 rounded-[2.5rem] transform translate-x-4 translate-y-4 -z-10 hidden sm:block" />
|
|
<ContactForm />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|