community-rule/app/components/sections/HeroBanner/HeroBanner.view.tsx

"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import Rule from "../../cards/Rule";
import ContentLockup from "../../type/ContentLockup";
import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
import HeroDecor from "./HeroDecor";
import type { HeroBannerViewProps } from "./HeroBanner.types";

function HeroBannerView({
  title,
  subtitle,
  description,
  facilitatorCta,
  facilitatorHref,
  createRuleCta,
  onCreateRule,
  ruleTitle,
  ruleDescription,
  ruleCategories,
}: HeroBannerViewProps) {
  return (
    <section
      className="bg-transparent px-[var(--space-200)] sm:px-[var(--space-250)] md:px-[var(--space-400)] lg:px-[var(--space-600)] xl:px-[var(--space-1200)]"
      data-figma-node="18477-15473"
    >
      <div className="flex flex-col gap-[var(--space-250)]">
        <div className="relative flex flex-col gap-[var(--space-600)] overflow-hidden rounded-tl-none rounded-tr-[var(--radius-400)] rounded-br-[var(--radius-400)] rounded-bl-[var(--radius-400)] bg-[var(--color-surface-invert-brand-primary)] p-[var(--space-300)] sm:p-[var(--space-400)] md:gap-[var(--space-1200)] md:p-[var(--space-1800)] lg:flex-row lg:items-center lg:gap-[var(--space-1200)] lg:px-[var(--space-1800)] lg:py-[var(--space-1200)] xl:py-[var(--space-1800)]">
          <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]"
          />

          <div className="relative z-10 flex w-full flex-col gap-[var(--space-150)] sm:gap-[var(--space-300)] md:gap-[var(--space-500)] lg:flex-1">
            <ContentLockup
              title={title}
              subtitle={subtitle}
              description={description}
            />
            <div className="relative z-10 flex justify-start">
              <div className="lg:hidden">
                <div className="md:hidden">
                  <Button
                    buttonType="filled"
                    palette="inverse"
                    size="small"
                    href={facilitatorHref}
                  >
                    {facilitatorCta}
                  </Button>
                </div>
                <div className="hidden md:block">
                  <Button
                    buttonType="filled"
                    palette="inverse"
                    size="large"
                    href={facilitatorHref}
                  >
                    {facilitatorCta}
                  </Button>
                </div>
              </div>
              <div className="hidden lg:block">
                <div className="xl:hidden">
                  <Button
                    buttonType="filled"
                    palette="inverse"
                    size="large"
                    onClick={onCreateRule}
                  >
                    {createRuleCta}
                  </Button>
                </div>
                <div className="hidden xl:block">
                  <Button
                    buttonType="filled"
                    palette="inverse"
                    size="xlarge"
                    onClick={onCreateRule}
                  >
                    {createRuleCta}
                  </Button>
                </div>
              </div>
            </div>
          </div>

          <div className="relative z-10 flex w-full justify-center lg:w-[568px] lg:shrink-0">
            <Rule
              title={ruleTitle}
              description={ruleDescription}
              expanded
              size="L"
              fluidWidth
              interactive={false}
              hideCategoryAddButton
              descriptionAtBottom
              backgroundColor="bg-[var(--color-surface-invert-brand-primary)]"
              className="w-full max-w-[568px] gap-[12px] rounded-[var(--radius-300)] lg:gap-[16px] lg:rounded-[var(--radius-500)]"
              categories={ruleCategories}
              icon={
                // eslint-disable-next-line @next/next/no-img-element -- decorative brand mark beside the title
                <img
                  src={getAssetPath(ASSETS.LOGO)}
                  alt=""
                  width={88}
                  height={88}
                  className="size-full object-contain brightness-0"
                  role="presentation"
                />
              }
            />
          </div>
        </div>
      </div>
    </section>
  );
}

HeroBannerView.displayName = "HeroBannerView";

export default memo(HeroBannerView);