first commit

src/app/produto/page.tsx

@@ -0,0 +1,93 @@
+import type { Metadata } from "next";
+import PageHero from "@/components/PageHero";
+import Section from "@/components/Section";
+import Card from "@/components/Card";
+import HUDPreviewSVG from "@/components/HUDPreviewSVG";
+import CTASection from "@/components/CTASection";
+import Button from "@/components/Button";
+import { PRODUCT_NAME } from "@/lib/constants";
+
+export const metadata: Metadata = {
+    title: "Produto",
+    description: `Descobre o ${PRODUCT_NAME}: óculos AR com HUD minimalista para métricas de corrida em tempo real.`,
+};
+
+export default function ProdutoPage() {
+    return (
+        <>
+            <PageHero
+                title={`Conhece o ${PRODUCT_NAME}`}
+                description="Um display heads-up desenhado especificamente para corrida de alta performance. Leve, discreto e construído para não interromper o teu fluxo."
+            >
+                <Button href="/contactos" trackEvent="produto_pedir_demo">
+                    Pedir demo
+                </Button>
+            </PageHero>
+
+            <Section muted>
+                <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
+                    O que vês no HUD
+                </h2>
+                <div className="grid md:grid-cols-2 gap-10">
+                    <div>
+                        <HUDPreviewSVG variant="pace" />
+                        <h3 className="text-xl font-bold mt-6 mb-2">Modo Pacing</h3>
+                        <p className="text-muted-foreground">
+                            Ritmo atual, ritmo-alvo, delta e splits. Tudo o que precisas para executar uma estratégia de prova perfeita.
+                        </p>
+                    </div>
+                    <div>
+                        <HUDPreviewSVG variant="power" />
+                        <h3 className="text-xl font-bold mt-6 mb-2">Modo Potência</h3>
+                        <p className="text-muted-foreground">
+                            Watts instantâneos, zona de treino e potência média. Gestão de esforço baseada em dados objetivos.
+                        </p>
+                    </div>
+                </div>
+            </Section>
+
+            <Section>
+                <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
+                    Características principais
+                </h2>
+                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {[
+                        {
+                            title: "Display não-intrusivo",
+                            desc: "HUD monocromático posicionado no canto do campo de visão. Vês os dados sem perder foco na estrada.",
+                        },
+                        {
+                            title: "Ultra-leve",
+                            desc: "Módulo HUD com menos de 30g. Desenhado para ser esquecido durante o uso.",
+                        },
+                        {
+                            title: "Resistente",
+                            desc: "Proteção contra suor, chuva e poeira. Construído para treinos em qualquer condição.",
+                        },
+                        {
+                            title: "Autonomia prolongada",
+                            desc: "Mais de 8 horas de utilização contínua. Suficiente para ultramaratonas.",
+                        },
+                        {
+                            title: "Compatível com sensores",
+                            desc: "Ligação a sensores de frequência cardíaca, potência e cadência via Bluetooth/ANT+.",
+                        },
+                        {
+                            title: "Personalizável",
+                            desc: "Escolhe as métricas que queres ver, o layout e os alertas. Configuração via app companion.",
+                        },
+                    ].map((feature, i) => (
+                        <Card key={i}>
+                            <h3 className="text-lg font-bold mb-2">{feature.title}</h3>
+                            <p className="text-sm text-muted-foreground leading-relaxed">
+                                {feature.desc}
+                            </p>
+                        </Card>
+                    ))}
+                </div>
+            </Section>
+
+            <CTASection />
+        </>
+    );
+}