feat(home): seção Sobre com prova por ponto, contato por oferta e hero com a Lavação 047 na tela larga

app/components/About.tsx

@@ -1,48 +1,42 @@
-import Link from "next/link";
 import profilePhoto from "@/public/edev.jpg";
 import { DrawLine } from "./animations/DrawLine";
 import { LazyRevealImage } from "./animations/LazyRevealImage";
 import { textLink } from "./button-styles";
 import "./conversion.css";
+import HoverPrefetchLink from "./HoverPrefetchLink";
 import { Reveal } from "./Reveal";
 import { Section } from "./Section";
 
+/**
+ * Os três pontos da seção, cada um com a prova que o sustenta. A ideia de que quem conversa com você é quem desenvolve
+ * aparece só no primeiro cartão: antes ela se repetia em cinco textos ("Sem intermediários", "Uma pessoa cuida",
+ * "Quem responde pelo projeto", "Você acompanha as decisões" e "Você fala com quem desenvolve", que segue só no hero).
+ */
 const STORY_DATA = [
   {
-    label: "Acompanhamento",
-    title: "Sem intermediários entre o pedido e o sistema",
+    label: "Quem desenvolve",
+    title: "Quem conversa com você escreve o código",
     content:
-      "Você acompanha as decisões ao longo da entrega e sabe quem responde por cada parte do projeto.",
+      "A mesma pessoa entende o problema, decide a estrutura e desenvolve o sistema, do começo ao fim.",
+    proof:
+      "Na Apolo Energia, desde 2022, desenvolvo aplicações web e mobile, APIs e integrações com dispositivos IoT para as rotinas internas.",
   },
   {
     label: "Sem começar do zero",
     title: "Aproveito o que você já tem",
     content:
       "Antes de mexer em um sistema que já está em uso, vejo o que existe e combino com você o que vem primeiro. Nem todo problema exige começar de novo.",
+    proof:
+      "Na revisão, você recebe o que dá para aproveitar e o que é melhor refazer, com o motivo de cada parte.",
+    link: { href: "/ia", label: "Ver como funciona a revisão" },
   },
   {
     label: "Depois da entrega",
     title: "Do código ao sistema no ar",
     content:
       "Colocar no ar, corrigir falhas, documentar e manter o sistema entram no planejamento desde o começo, junto com as funcionalidades.",
-  },
-];
-
-const PROFILE_POINTS = [
-  {
-    title: "Solução do tamanho do seu problema",
-    description:
-      "Escolho o que resolve o seu caso, sem complicar além do necessário.",
-  },
-  {
-    title: "Tudo funcionando junto",
-    description:
-      "A tela, os dados e os equipamentos são ligados para trabalhar como uma coisa só.",
-  },
-  {
-    title: "Quem responde pelo projeto",
-    description:
-      "Uma só pessoa decide a estrutura e desenvolve o sistema, do começo ao fim.",
+    proof:
+      "Já entregue para SEV Moda Íntima, Lavação 047, SC Plus Aquicultura e AS Serviços.",
   },
 ];
 
@@ -55,7 +49,7 @@ export default function About() {
       id="about"
       eyebrow="Quem conduz o projeto"
       title="Evandro Fonseca Junior"
-      description="Engenheiro da computação; desde 2022 desenvolvo aplicações web e mobile, APIs e integrações com dispositivos IoT para as rotinas internas da Apolo Energia. Você acompanha as decisões técnicas ao longo da entrega."
+      description="Engenheiro da computação e desenvolvedor de software, com projetos entregues para empresas."
       disableChildrenAnimation
       aside={
         <div className="mt-sp-4 ds-metric whitespace-nowrap" data-reel="left">
@@ -64,7 +58,8 @@ export default function About() {
         </div>
       }
     >
-      <div className="ds-grid-2 items-stretch">
+      {/* items-start: o cartão do retrato tem a altura do próprio conteúdo, e não a das três colunas de texto; no desktop ele acompanha a rolagem */}
+      <div className="ds-grid-2 items-start">
         <div className="flex flex-col gap-sp-6">
           {STORY_DATA.map((step, index) => (
             <Reveal
@@ -81,6 +76,18 @@ export default function About() {
                 <p className="ds-copy" data-reel="right">
                   {step.content}
                 </p>
+                <p className="mt-sp-4 border-t border-[var(--border)] pt-sp-3 font-display text-[15px] leading-6 text-[var(--ink)]">
+                  <span className="font-semibold">Na prática: </span>
+                  {step.proof}
+                </p>
+                {step.link && (
+                  <HoverPrefetchLink
+                    href={step.link.href}
+                    className={`${textLink} self-start text-[var(--ink-80)]`}
+                  >
+                    {step.link.label}
+                  </HoverPrefetchLink>
+                )}
               </article>
             </Reveal>
           ))}
@@ -90,24 +97,25 @@ export default function About() {
           y={20}
           duration={0.8}
           delay={cardDelay(STORY_DATA.length)}
-          className="h-full"
+          className="lg:sticky lg:top-28"
         >
-          <article className="ds-card cv-press cv-lift h-full">
-            <div className="flex items-center gap-sp-5">
+          <article className="ds-card cv-press cv-lift">
+            <figure>
               <LazyRevealImage
                 src={profilePhoto}
-                alt="Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software em Garuva, SC"
-                className="aspect-square w-28 shrink-0 overflow-hidden rounded-[6px] border border-[var(--border)] sm:w-32"
-                imageClassName="object-cover"
-                sizes="128px"
+                alt="Retrato de Evandro Fonseca Junior"
+                className="aspect-[4/3] w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
+                imageClassName="object-cover object-[50%_25%]"
+                sizes="(min-width: 1024px) 50vw, 100vw"
               />
-              <div className="min-w-0">
-                <div className="ds-kicker">Da ideia ao sistema no ar</div>
-                <h3 className="ds-card-title !mt-sp-2">
-                  Uma pessoa cuida do sistema inteiro
-                </h3>
-              </div>
-            </div>
+              <figcaption className="mt-sp-3 font-display text-[15px] leading-6 text-[var(--ink-80)]">
+                Evandro Fonseca Junior · Engenheiro da computação · Garuva, SC
+              </figcaption>
+            </figure>
+            <div className="ds-kicker mt-sp-6">Do que eu cuido</div>
+            <h3 className="ds-card-title !mt-sp-2">
+              Tela, dados e equipamentos
+            </h3>
             <DrawLine delay={0.05} />
             <p className="ds-copy" data-reel="top">
               Cuido da tela que sua equipe usa, dos dados por trás dela e,
@@ -115,25 +123,12 @@ export default function About() {
               sistema. Ver tudo junto ajuda a decidir o que construir, o que
               conectar e o que dá para aproveitar.
             </p>
-            <div className="mt-sp-6 space-y-sp-4" data-reel-stagger="bottom">
-              {PROFILE_POINTS.map((point) => (
-                <div
-                  key={point.title}
-                  className="border-t border-[var(--border)] pt-sp-4"
-                >
-                  <div className="text-[15px] font-medium tracking-[0.02em]">
-                    {point.title}
-                  </div>
-                  <p className="ds-copy !mt-sp-2">{point.description}</p>
-                </div>
-              ))}
-            </div>
-            <Link
+            <HoverPrefetchLink
               href="/curriculo"
               className={`${textLink} mt-sp-4 text-[var(--ink-80)]`}
             >
               Ver trajetória completa
-            </Link>
+            </HoverPrefetchLink>
           </article>
         </Reveal>
       </div>