Reorganize components

2026-02-05 22:37:00 -07:00
parent db3c0274f6
commit 6f178e934f
61 changed files with 45 additions and 44 deletions
@@ -0,0 +1,66 @@
+"use client";
+
+import { memo } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
+import ContentLockup from "../../type/ContentLockup";
+import HeroDecor from "./HeroDecor";
+import { getAssetPath } from "../../../../lib/assetUtils";
+
+interface HeroBannerProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  ctaText?: string;
+  ctaHref?: string;
+}
+
+const HeroBanner = memo<HeroBannerProps>(
+  ({ title, subtitle, description, ctaText, ctaHref }) => {
+    const t = useTranslation();
+    const imageAlt = t("heroBanner.imageAlt");
+
+    return (
+      <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
+        <div className="flex flex-col gap-[var(--spacing-scale-010)]">
+          {/* Frame container for content */}
+          <div className="bg-[var(--color-surface-inverse-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
+            {/* DECORATIONS (behind content) */}
+            <HeroDecor
+              className="pointer-events-none absolute z-0
+                        left-0 top-0
+                        translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px]
+                        w-[1540px] h-[645px] scale-[1.04]"
+            />
+
+            {/* Content lockup - Large variant */}
+            <div className="md:flex-1">
+              <ContentLockup
+                title={title}
+                subtitle={subtitle}
+                description={description}
+                ctaText={ctaText}
+                ctaHref={ctaHref}
+                buttonClassName="shrink-0 whitespace-nowrap min-w-[280px]"
+              />
+            </div>
+
+            {/* Hero Image Container */}
+            <div className="w-full h-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
+              <img
+                src={getAssetPath("assets/HeroImage.png")}
+                alt={imageAlt}
+                className="w-full h-auto"
+                loading="eager"
+                fetchPriority="high"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
+
+HeroBanner.displayName = "HeroBanner";
+
+export default HeroBanner;