58 lines
2 KiB
TypeScript
58 lines
2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { offerings } from '../data/content';
|
||
|
|
import { ChevronRight } from 'lucide-react';
|
||
|
|
|
||
|
|
const OfferingCard = ({ offering, index }: { offering: any, index: number }) => {
|
||
|
|
const Icon = offering.icon;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
|
|
className="glass-card p-8 group hover:border-primary/30 transition-all duration-500"
|
||
|
|
>
|
||
|
|
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform duration-500">
|
||
|
|
<Icon size={28} />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-bold mb-4">{offering.title}</h3>
|
||
|
|
<p className="text-muted mb-8 leading-relaxed">
|
||
|
|
{offering.description}
|
||
|
|
</p>
|
||
|
|
<ul className="space-y-3">
|
||
|
|
{offering.points.map((point: string, i: number) => (
|
||
|
|
<li key={i} className="flex items-center text-sm text-foreground/80">
|
||
|
|
<ChevronRight className="text-primary mr-2" size={16} />
|
||
|
|
{point}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Offerings = () => {
|
||
|
|
return (
|
||
|
|
<section id="offerings" className="py-24 relative bg-surface/30">
|
||
|
|
<div className="container mx-auto px-6">
|
||
|
|
<div className="mb-16">
|
||
|
|
<h2 className="text-3xl md:text-5xl font-bold mb-6">Nasza Oferta</h2>
|
||
|
|
<p className="text-xl text-muted max-w-2xl">
|
||
|
|
Budujemy kompleksowe rozwiązania, które przekładają potencjał sztucznej inteligencji na realne wyniki biznesowe.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-2 gap-8">
|
||
|
|
{offerings.map((offering, index) => (
|
||
|
|
<OfferingCard key={offering.id} offering={offering} index={index} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Offerings;
|