yintai-company-home/src/pages/Business/RuijingGroup.tsx

67 lines
2.5 KiB
TypeScript

import Banner from "@/components/Banner";
import SwiperCardSection from "@/components/layout/SwiperCardSection";
import HonorGrids from "@/components/layout/HonorGrids";
import ParagraphSection from "@/components/layout/ParagraphSection";
import Section from "@/components/layout/Section";
import StatsRow from "@/components/layout/StatsRow/StatsRow";
import { useStore } from "@/store";
import styles from "./RuijingGroup.module.css";
import ScrollReveal from "@/components/ScrollReveal";
export default function RuijingGroup() {
const appConfig = useStore((s) => s.appConfig);
const data = appConfig?.business?.ruijingGroup;
if (!data) return null;
const banner = data.banner;
const section1Data = data.section1Data;
const section2Data = data.section2Data;
const section3Data = data.section3Data;
const section4Data = data.section4Data;
const swiperCardData = section2Data
? {
title: section2Data.title,
cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
title: c.title,
content: c.content,
backgroundImage: c.backgroundImage,
})) ?? [],
}
: null;
return (
<div>
<Banner
title={banner?.title ?? ""}
desc={banner?.content}
titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
/>
{section1Data && <ParagraphSection data={section1Data} />}
{swiperCardData && <SwiperCardSection data={swiperCardData} />}
{section3Data && (
<Section
title={section3Data.title}
subtitle={section3Data.subtitle}
titleColor="#fff"
background="/images/bg-overview.png"
maskBackground="rgba(2,17,48,0.5)"
>
<ScrollReveal preset="slideUp" amount={0.2} delay={0.5}>
<div className={styles.businessFeatureContent}>{section3Data.content}</div>
</ScrollReveal>
{section3Data.statsData && (
<StatsRow data={section3Data.statsData} color="#fff" />
)}
</Section>
)}
{section4Data && <HonorGrids data={section4Data} />}
</div>
);
}