You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.1 KiB
62 lines
2.1 KiB
import React from "react";
|
|
import type { AboutData } from "../types";
|
|
|
|
interface AboutSectionProps {
|
|
data: AboutData;
|
|
variant?: "dark" | "light";
|
|
titleOverride?: string;
|
|
contentOverride?: string;
|
|
}
|
|
|
|
export function AboutSection({
|
|
data,
|
|
variant = "dark",
|
|
titleOverride,
|
|
contentOverride,
|
|
}: AboutSectionProps) {
|
|
const isLight = variant === "light";
|
|
const sectionClasses = isLight
|
|
? "py-16 md:py-20 bg-[#f6f8fc]"
|
|
: "py-10 md:py-14 border-t border-[rgba(255,255,255,0.02)]";
|
|
|
|
const titleClasses = isLight
|
|
? "text-3xl md:text-[34px] mb-6 font-semibold text-[#0f1f39]"
|
|
: "text-lg md:text-xl mb-4 md:mb-[18px] text-white";
|
|
|
|
const paragraphClasses = isLight
|
|
? "text-base leading-relaxed text-[#4b5565] md:text-lg"
|
|
: "text-huilong-muted leading-relaxed";
|
|
|
|
const cardClasses = isLight
|
|
? "bg-white border border-[#dfe4ee] text-left shadow-[0_16px_32px_rgba(15,31,57,0.06)]"
|
|
: "bg-huilong-card border border-[rgba(255,255,255,0.03)]";
|
|
|
|
const cardTitleClasses = isLight ? "text-[#0f1f39]" : "text-white";
|
|
const cardContentClasses = isLight
|
|
? "text-sm text-[#4b5565] leading-relaxed"
|
|
: "text-huilong-muted text-sm";
|
|
|
|
const title = titleOverride ?? data.title;
|
|
const content = contentOverride ?? data.content;
|
|
|
|
return (
|
|
<section id="about" className={sectionClasses}>
|
|
<div className="mx-auto flex w-full max-w-[1200px] flex-col gap-8 px-4 md:px-6 lg:flex-row lg:items-start lg:gap-10">
|
|
<div className="flex-1">
|
|
<h2 className={titleClasses}>{title}</h2>
|
|
<p className={paragraphClasses}>{content}</p>
|
|
</div>
|
|
<div className="grid w-full max-w-[420px] grid-cols-1 gap-3 self-stretch lg:ml-auto">
|
|
{data.cards.map((card, idx) => (
|
|
<div key={idx} className={`rounded-2xl p-5 ${cardClasses}`}>
|
|
<h3 className={`mb-2 text-base font-semibold ${cardTitleClasses}`}>
|
|
{card.title}
|
|
</h3>
|
|
<p className={cardContentClasses}>{card.content}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|