enh: production readiness improvements

Author: marco-souza

public/_headers

@@ -0,0 +1,9 @@
+# Security headers served by Cloudflare Pages on all routes
+# See: https://developers.cloudflare.com/pages/configuration/headers/
+
+/*
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' https://static.cloudflareinsights.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

src/assets/og-image.png

@@ -4,7 +4,7 @@
  * Global charset, viewport, favicon, RSS, etc. stay in BaseHead.
  */
 import type { ImageMetadata } from 'astro';
-import FallbackImage from '@/assets/blog-placeholder-1.jpg';
+import FallbackImage from '@/assets/og-image.png';
 
 interface Props {
   title: string;

src/components/metadata/PageMetadata.astro

@@ -105,6 +105,11 @@ export const ui = {
     'footer.copyright': 'Todos os direitos reservados.',
     'layout.skipToContent': 'Pular para o conteúdo',
 
+    // ── 404 page ───────────────────────────────────────────────────────────────
+    '404.title': 'Ops! Essa página não existe.',
+    '404.message':
+      'Parece que você seguiu um link quebrado ou digitou um endereço errado. Volte ao início e continue navegando.',
+
     // ── Home page ─────────────────────────────────────────────────────────────
     'home.hero.eyebrow': 'PodCodar',
     'home.hero.headline': 'Educação em tecnologia, feita em comunidade',

src/data/og-default.ts

@@ -0,0 +1,34 @@
+---
+import Logo from '@/components/Logo.astro';
+import { LAYOUT_MAIN_FULL_WIDTH } from '@/consts';
+import { useTranslations } from '@/i18n/utils';
+import Layout from '@/layouts/Layout.astro';
+
+const t = useTranslations();
+
+const title = `404 — ${t('nav.home')}`;
+const description = t('404.message');
+---
+
+<Layout {title} {description} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
+  <section class="flex flex-1 flex-col items-center justify-center py-24 text-center">
+    <!-- PodCodar logo mark (larger, faded for visual interest) -->
+    <div class="mb-8 opacity-20" aria-hidden="true">
+      <Logo size="lg" showTitle={false} />
+    </div>
+
+    <!-- 404 error code -->
+    <p class="mb-4 text-8xl font-bold text-primary">404</p>
+
+    <!-- Message -->
+    <h1 class="mb-4 text-3xl font-bold">{t('404.title')}</h1>
+    <p class="mb-8 max-w-md text-base-content/70">{t('404.message')}</p>
+
+    <!-- Navigation links -->
+    <nav class="flex flex-wrap justify-center gap-4" aria-label="404 navigation">
+      <a href="/" class="btn btn-primary no-underline">{t('nav.home')}</a>
+      <a href="/blog/" class="btn btn-outline btn-primary no-underline">{t('nav.blog')}</a>
+      <a href="/join-us/" class="btn btn-outline btn-primary no-underline">{t('nav.join_us')}</a>
+    </nav>
+  </section>
+</Layout>

src/i18n/ui.ts

@@ -13,7 +13,7 @@ import {
   mission,
   projects,
 } from '@/data/marketing';
-import ogDefaultImage from '@/data/og-default';
+
 import { useTranslations } from '@/i18n/utils';
 import Layout from '@/layouts/Layout.astro';
 
@@ -22,7 +22,7 @@ const title = `${t('nav.about')} — ${SITE_TITLE}`;
 const description = t('about.hero.subtitle');
 ---
 
-<Layout {title} {description} image={ogDefaultImage} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
+<Layout {title} {description} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
   <!-- Hero Section -->
   <HeroSection
     eyebrow={t('about.hero.eyebrow')}

src/pages/404.astro

@@ -5,6 +5,7 @@ import HeroSection from '@/components/ui/HeroSection.astro';
 import InquiryCard from '@/components/ui/InquiryCard.astro';
 import SectionHeader from '@/components/ui/SectionHeader.astro';
 import { SITE_TITLE } from '@/consts';
+
 import { socialLinks } from '@/data/social-links';
 import { CONTACT_EMAIL } from '@/data/transparency';
 import { useTranslations } from '@/i18n/utils';

src/pages/about.astro

@@ -4,7 +4,7 @@ import DonationWidget from '@/components/donations/DonationWidget';
 import HeroSection from '@/components/ui/HeroSection.astro';
 import SectionHeader from '@/components/ui/SectionHeader.astro';
 import { LAYOUT_MAIN_FULL_WIDTH, SITE_TITLE } from '@/consts';
-import ogDefaultImage from '@/data/og-default';
+
 import { useTranslations } from '@/i18n/utils';
 import Layout from '@/layouts/Layout.astro';
 
@@ -13,7 +13,7 @@ const title = `${t('nav.contributing')} — ${SITE_TITLE}`;
 const description = t('contributing.hero.subtitle');
 ---
 
-<Layout {title} {description} image={ogDefaultImage} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
+<Layout {title} {description} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
   <!-- Hero Section -->
   <HeroSection
     eyebrow={t('contributing.hero.eyebrow')}

src/pages/contact.astro

@@ -7,7 +7,7 @@ import Section from '@/components/marketing/Section.astro';
 import TestimonialGrid from '@/components/marketing/TestimonialGrid.astro';
 import { LAYOUT_MAIN_FULL_WIDTH, SITE_DESCRIPTION, SITE_TITLE } from '@/consts';
 import { aboutCommunity, activities, howToHelp, mission, testimonials } from '@/data/marketing';
-import ogDefaultImage from '@/data/og-default';
+
 import { useTranslations } from '@/i18n/utils';
 import Layout from '@/layouts/Layout.astro';
 
@@ -22,7 +22,7 @@ const heroContent = {
 } as const;
 ---
 
-<Layout title={SITE_TITLE} description={SITE_DESCRIPTION} image={ogDefaultImage} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
+<Layout title={SITE_TITLE} description={SITE_DESCRIPTION} mainClass={LAYOUT_MAIN_FULL_WIDTH}>
   <Hero content={heroContent} />
   <Section id="mission" title={t('home.mission.title')} variant="muted">
     <div class="max-w-3xl space-y-4">