118 lines
4.5 KiB
TypeScript
118 lines
4.5 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { caseStudies, siteName, siteUrl } from "@/lib/site-content";
|
|
import HeroBackground from "@/app/components/cinematic/HeroBackground";
|
|
import MagneticButton from "@/app/components/cinematic/MagneticButton";
|
|
|
|
export const metadata: Metadata = {
|
|
title: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
|
|
description:
|
|
"Cases selecionados em engenharia de software, Next.js, IoT, integracoes e software para contextos criticos. Portfolio tecnico com foco em clareza, performance e execucao.",
|
|
alternates: {
|
|
canonical: `${siteUrl}/cases`,
|
|
},
|
|
openGraph: {
|
|
title: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
|
|
description:
|
|
"Cases selecionados em engenharia de software, Next.js, IoT, integracoes e software para contextos criticos.",
|
|
url: `${siteUrl}/cases`,
|
|
siteName,
|
|
type: "website",
|
|
},
|
|
};
|
|
|
|
export default function CasesPage() {
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@graph": [
|
|
{
|
|
"@type": "CollectionPage",
|
|
"@id": `${siteUrl}/cases#page`,
|
|
name: "Cases de engenharia de software",
|
|
url: `${siteUrl}/cases`,
|
|
description:
|
|
"Colecao de cases em Next.js, IoT, integracoes e software para operacoes criticas.",
|
|
},
|
|
{
|
|
"@type": "ItemList",
|
|
itemListElement: caseStudies.map((caseStudy, index) => ({
|
|
"@type": "ListItem",
|
|
position: index + 1,
|
|
name: caseStudy.title,
|
|
url: caseStudy.demoUrl ?? caseStudy.githubUrl ?? `${siteUrl}/cases`,
|
|
})),
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<main>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
|
|
<section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
|
|
<HeroBackground />
|
|
<div className="ds-section-shell relative z-10">
|
|
<div className="max-w-[860px]">
|
|
<p className="ds-eyebrow">Selected work</p>
|
|
<h1 className="ds-section-title max-w-[14ch] text-balance text-white">
|
|
Cases em software, Next.js, integracoes e produtos conectados.
|
|
</h1>
|
|
<p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
|
|
Esta pagina organiza projetos com leitura mais indexavel e comercial, conectando stack,
|
|
contexto tecnico e tipo de problema resolvido.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="ds-section">
|
|
<div className="ds-section-shell">
|
|
<div className="ds-grid-2">
|
|
{caseStudies.map((caseStudy) => (
|
|
<article key={caseStudy.id} className="ds-card">
|
|
<div className="ds-kicker">{caseStudy.title}</div>
|
|
<h2 className="ds-card-title">{caseStudy.subtitle}</h2>
|
|
<p className="ds-copy">{caseStudy.summary}</p>
|
|
<p className="mt-sp-4 text-[13px] leading-7 text-[var(--meta)]">
|
|
{caseStudy.impact}
|
|
</p>
|
|
<ul className="ds-tags mt-sp-6">
|
|
{caseStudy.stack.map((item) => (
|
|
<MagneticButton key={item} as="li" className="ds-tag" strength={0.15}>
|
|
{item}
|
|
</MagneticButton>
|
|
))}
|
|
</ul>
|
|
<div className="mt-sp-6 flex flex-wrap gap-sp-3">
|
|
{caseStudy.demoUrl ? (
|
|
<MagneticButton as="a" href={caseStudy.demoUrl} className="ds-link ds-link-accent" target="_blank" rel="noreferrer" strength={0.25}>
|
|
Abrir projeto
|
|
</MagneticButton>
|
|
) : null}
|
|
{caseStudy.githubUrl ? (
|
|
<MagneticButton as="a" href={caseStudy.githubUrl} className="ds-link ds-link-muted" target="_blank" rel="noreferrer" strength={0.2}>
|
|
Ver codigo
|
|
</MagneticButton>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-sp-10 flex flex-wrap gap-sp-3">
|
|
<MagneticButton as="a" href="/servicos" className="ds-link ds-link-accent" strength={0.25}>
|
|
Ver servicos
|
|
</MagneticButton>
|
|
<MagneticButton as="a" href="/#contact" className="ds-link ds-link-muted" strength={0.2}>
|
|
Ir para contato
|
|
</MagneticButton>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|