feat: add full project - backend, frontend, docker, specs and configs

frontend/src/components/HeroSection.tsx

@@ -0,0 +1,103 @@
+interface HeroSectionProps {
+    headline: string
+    subheadline: string | null
+    ctaLabel: string
+    ctaUrl: string
+    isLoading?: boolean
+    backgroundImage?: string | null
+}
+
+export default function HeroSection({
+    headline,
+    subheadline,
+    ctaLabel,
+    ctaUrl,
+    isLoading = false,
+    backgroundImage,
+}: HeroSectionProps) {
+    if (isLoading) {
+        return (
+            <section
+                aria-label="Carregando hero"
+                className="relative min-h-[600px] flex items-center justify-center pt-14"
+                style={{
+                    background:
+                        'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.08) 0%, transparent 60%), #08090a',
+                }}
+            >
+                <div className="w-full max-w-[800px] mx-auto px-6 text-center animate-pulse">
+                    {/* Headline skeleton */}
+                    <div className="h-16 md:h-20 lg:h-24 bg-surface-secondary rounded-lg w-3/4 mx-auto mb-6" />
+                    {/* Subheadline skeleton */}
+                    <div className="h-6 bg-surface-secondary rounded w-1/2 mx-auto mb-3" />
+                    <div className="h-6 bg-surface-secondary rounded w-2/5 mx-auto mb-10" />
+                    {/* CTA skeleton */}
+                    <div className="h-11 bg-surface-secondary rounded w-36 mx-auto" />
+                </div>
+            </section>
+        )
+    }
+
+    return (
+        <section
+            aria-label="Hero principal"
+            className="relative min-h-[600px] flex items-center justify-center pt-14 overflow-hidden"
+            style={!backgroundImage ? {
+                background:
+                    'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.08) 0%, transparent 60%), #08090a',
+            } : undefined}
+        >
+            {/* Imagem de fundo */}
+            {backgroundImage && (
+                <>
+                    <img
+                        src={backgroundImage}
+                        alt=""
+                        aria-hidden="true"
+                        className="absolute inset-0 w-full h-full object-cover"
+                        onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
+                    />
+                    {/* Overlay escuro para legibilidade */}
+                    <div
+                        className="absolute inset-0"
+                        style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%)' }}
+                    />
+                </>
+            )}
+            <div className="w-full max-w-[800px] mx-auto px-6 text-center py-20 md:py-28">
+                <h1
+                    className="
+            text-[40px] md:text-[48px] lg:text-[72px]
+            font-medium text-textPrimary leading-tight
+            tracking-display-xl
+            mb-6
+          "
+                    style={{ fontFeatureSettings: '"cv01", "ss03"' }}
+                >
+                    {headline}
+                </h1>
+
+                {subheadline && (
+                    <p className="text-lg md:text-xl text-textSecondary font-light leading-relaxed mb-10 max-w-[560px] mx-auto">
+                        {subheadline}
+                    </p>
+                )}
+
+                <a
+                    href={ctaUrl}
+                    className="
+            inline-flex items-center justify-center
+            px-6 py-3
+            bg-brand-indigo hover:bg-accent-hover
+            text-white font-semibold text-sm
+            rounded transition-colors duration-200
+            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-violet focus-visible:ring-offset-2 focus-visible:ring-offset-mkt-black
+          "
+                    aria-label={ctaLabel}
+                >
+                    {ctaLabel}
+                </a>
+            </div>
+        </section>
+    )
+}