105 lines
4.1 KiB
TypeScript
105 lines
4.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { HOME_SECTION, HOME_SECTION_HEADING } from '@/lib/portal-presentation';
|
|
|
|
const steps = [
|
|
{
|
|
key: 'explorar',
|
|
title: '1. Explorar',
|
|
description: 'Identifique o sector, território e oportunidade.',
|
|
href: '/oportunidades',
|
|
alt: 'Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.',
|
|
},
|
|
{
|
|
key: 'preparar',
|
|
title: '2. Preparar',
|
|
description: 'Conheça o percurso e organize os documentos.',
|
|
href: '/como-investir',
|
|
alt: 'Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.',
|
|
},
|
|
{
|
|
key: 'acompanhar',
|
|
title: '3. Acompanhar',
|
|
description: 'Envie o pedido e acompanhe o protocolo.',
|
|
href: '/balcao-virtual',
|
|
alt: 'Empreendedor consulta um pedido no computador portátil numa secretária de escritório.',
|
|
},
|
|
];
|
|
|
|
function StepImage({ name, alt }: { name: string; alt: string }) {
|
|
const [fallback, setFallback] = useState(0);
|
|
const base = `/images/investment-steps/${name}`;
|
|
|
|
return (
|
|
<div className="aspect-video w-full shrink-0 overflow-hidden bg-slate-100">
|
|
{fallback < 2 ? (
|
|
<img
|
|
src={`${base}${fallback ? '-fallback' : ''}.webp`}
|
|
srcSet={
|
|
fallback
|
|
? undefined
|
|
: `${base}-480.webp 480w, ${base}.webp 960w`
|
|
}
|
|
sizes="(min-width: 1152px) 357px, (min-width: 768px) 33vw, 100vw"
|
|
alt={alt}
|
|
width={960}
|
|
height={540}
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="h-full w-full object-cover object-center"
|
|
onError={() =>
|
|
setFallback((current) => Math.min(current + 1, 2))
|
|
}
|
|
/>
|
|
) : (
|
|
<span
|
|
role="img"
|
|
aria-label={alt}
|
|
className="flex h-full items-center justify-center px-4 text-center text-sm text-slate-600"
|
|
>
|
|
Imagem indisponível
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function InvestmentSteps() {
|
|
return (
|
|
<section
|
|
aria-labelledby="investment-steps-heading"
|
|
className={`${HOME_SECTION} space-y-4`}
|
|
>
|
|
<h2 id="investment-steps-heading" className={HOME_SECTION_HEADING}>
|
|
Como Investir
|
|
</h2>
|
|
<div className="grid gap-5 md:grid-cols-3">
|
|
{steps.map((step) => (
|
|
<a
|
|
key={step.key}
|
|
href={step.href}
|
|
aria-labelledby={`step-${step.key}-title`}
|
|
aria-describedby={`step-${step.key}-description`}
|
|
className="flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-colors hover:border-[#ed1c24] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#ed1c24]"
|
|
>
|
|
<StepImage name={step.key} alt={step.alt} />
|
|
<div className="space-y-1.5 p-4">
|
|
<h3
|
|
id={`step-${step.key}-title`}
|
|
className="text-lg leading-6 font-bold text-slate-900"
|
|
>
|
|
{step.title}
|
|
</h3>
|
|
<p
|
|
id={`step-${step.key}-description`}
|
|
className="text-sm leading-5 text-slate-600"
|
|
>
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|