97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
|
|
type Service = {
|
|
slug: string;
|
|
title: string;
|
|
subtitle: string;
|
|
blurb: string;
|
|
whatWeDo: string[];
|
|
outcomes: string[];
|
|
iconName?: string;
|
|
image?: string;
|
|
};
|
|
|
|
type Props = {
|
|
service: Service;
|
|
index: number;
|
|
};
|
|
|
|
export default function ServiceSection({ service, index }: Props) {
|
|
const isReversed = index % 2 === 1;
|
|
|
|
return (
|
|
<section id={service.slug} className="py-16 sm:py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div
|
|
className={`grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 ${
|
|
isReversed ? "lg:[&>*:first-child]:order-2" : ""
|
|
}`}
|
|
>
|
|
{/* Text column */}
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
{service.image && (
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-navy mr-4">
|
|
<Image
|
|
src={service.image}
|
|
alt={service.title}
|
|
width={64}
|
|
height={64}
|
|
className="h-12 w-12 object-cover rounded"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="text-sm">{service.subtitle}</div>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">{service.title}</h2>
|
|
<p className="mt-3">{service.blurb}</p>
|
|
|
|
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 className="font-medium mb-2">What We Do</h3>
|
|
<ul className="list-disc pl-5 space-y-1">
|
|
{service.whatWeDo.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium mb-2">Outcomes</h3>
|
|
<ul className="list-disc pl-5 space-y-1">
|
|
{service.outcomes.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<a href={`/services/${service.slug}`} className="inline-block px-4 py-2 border rounded-md">
|
|
Learn More About {service.title}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Visual card */}
|
|
<div className="border rounded-xl p-8 flex flex-col items-center justify-center text-center">
|
|
{service.image && (
|
|
<div className="mb-6 h-80 w-80 border rounded-lg overflow-hidden">
|
|
<Image
|
|
src={service.image}
|
|
alt={service.title}
|
|
width={320}
|
|
height={320}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="text-lg font-medium">{service.title}</div>
|
|
<div className="text-sm text-gray-600">{service.subtitle}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|