60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import styles from "./About.module.css";
|
|
import Banner from "@/components/Banner";
|
|
import { useStore } from "@/store";
|
|
import ScrollReveal from "@/components/ScrollReveal";
|
|
|
|
const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
|
|
|
|
export default function About() {
|
|
const appConfig = useStore((s) => s.appConfig);
|
|
const overview = appConfig?.about?.overview;
|
|
|
|
const banner = overview?.banner;
|
|
const section1Data = overview?.section1Data?.items ?? [];
|
|
|
|
const getLinkPath = (item: any) => {
|
|
if(item.path.includes("{id}")) {
|
|
return item.path.replace("{id}", item.label);
|
|
}
|
|
return item.path;
|
|
}
|
|
return (
|
|
<div>
|
|
<Banner
|
|
title={banner?.title ?? ""}
|
|
desc={banner?.content}
|
|
backgroundImage={banner?.backgroundImage}
|
|
/>
|
|
|
|
{section1Data.map((item: { title: string; content?: string; backgroundImage?: string; links?: { label: string; path: string }[] }, index: number) => (
|
|
<section
|
|
key={index}
|
|
className={`${styles.section} ${index % 2 === 1 ? styles.sectionRight : ""}`}
|
|
style={{
|
|
backgroundImage: `url(${item.backgroundImage}), ${FALLBACK_GRADIENT}`,
|
|
}}
|
|
>
|
|
<div
|
|
className={`${styles.content} ${index % 2 === 1 ? styles.contentRight : ""}`}
|
|
>
|
|
<ScrollReveal preset="slideUp">
|
|
<div className={styles.textBox}>
|
|
<h2 className={styles.title}>{item.title}</h2>
|
|
<p className={styles.desc}>{item.content}</p>
|
|
<div className={styles.links}>
|
|
{item.links?.map((link: { label: string; path: string }) => (
|
|
<span key={link.label}>
|
|
<Link to={getLinkPath(link)}>{link.label}</Link>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|