99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import type {
|
|
FourQuestionTone,
|
|
FourQuestionsViewProps,
|
|
} from "./FourQuestions.types";
|
|
|
|
const TONE_CLASS: Record<FourQuestionTone, string> = {
|
|
yellow: "bg-[var(--color-surface-invert-brand-secondary)]",
|
|
teal: "bg-[var(--color-surface-invert-brand-teal)]",
|
|
lavender: "bg-[var(--color-surface-invert-brand-lavender)]",
|
|
red: "bg-[var(--color-surface-invert-brand-red)]",
|
|
};
|
|
|
|
function FourQuestionsView({
|
|
heading,
|
|
cards,
|
|
wishHeading,
|
|
wishParagraphs,
|
|
statsHeading,
|
|
statsSource,
|
|
stats,
|
|
}: FourQuestionsViewProps) {
|
|
return (
|
|
<section
|
|
data-figma-node="24230:852"
|
|
className="flex flex-col gap-11 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-16 lg:gap-14 lg:px-[var(--space-2400)] lg:py-20"
|
|
aria-labelledby="about-four-questions-heading"
|
|
>
|
|
<h2
|
|
id="about-four-questions-heading"
|
|
className="max-w-[768px] font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl"
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<ul className="m-0 grid list-none grid-cols-1 gap-4 p-0 md:grid-cols-2 md:gap-6">
|
|
{cards.map((card) => (
|
|
<li
|
|
key={card.question}
|
|
className={`flex flex-col gap-3 rounded-[var(--radius-300)] p-6 lg:gap-4 lg:rounded-[var(--radius-500)] lg:p-8 ${TONE_CLASS[card.tone]}`}
|
|
>
|
|
<h3 className="font-bricolage-grotesque text-display-xs text-[var(--color-content-invert-primary)]">
|
|
{card.question}
|
|
</h3>
|
|
<p className="font-inter text-paragraph-s text-[var(--color-content-invert-tertiary)] lg:text-paragraph-m">
|
|
{card.line}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex max-w-[736px] flex-col gap-6">
|
|
<h2 className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl">
|
|
{wishHeading}
|
|
</h2>
|
|
<div className="flex flex-col gap-[1lh]">
|
|
{wishParagraphs.map((paragraph) => (
|
|
<p
|
|
key={paragraph}
|
|
className="font-inter text-paragraph-m text-[var(--color-content-default-secondary)] lg:text-paragraph-l"
|
|
>
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex flex-col gap-2 lg:gap-3">
|
|
<h3 className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)]">
|
|
{statsHeading}
|
|
</h3>
|
|
<p className="font-inter text-paragraph-s text-[var(--color-content-default-tertiary)] lg:text-paragraph-m">
|
|
{statsSource}
|
|
</p>
|
|
</div>
|
|
<dl className="m-0 flex flex-col pt-0 lg:flex-row lg:gap-16 lg:pt-10">
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.value}
|
|
className="flex flex-col gap-2.5 border-t border-[var(--color-border-default-secondary)] py-6 lg:flex-1 lg:gap-4 lg:border-t-0 lg:py-0"
|
|
>
|
|
<dt className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)] lg:text-display-xl">
|
|
{stat.value}
|
|
</dt>
|
|
<dd className="m-0 font-inter text-paragraph-s text-[var(--color-content-default-secondary)] lg:text-paragraph-m">
|
|
{stat.line}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
FourQuestionsView.displayName = "FourQuestionsView";
|
|
|
|
export default memo(FourQuestionsView);
|