adilallo
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import NumberedCard from "./NumberedCard";
|
|
import SectionHeader from "./SectionHeader";
|
|
import Button from "./Button";
|
|
import { useSchemaData } from "../hooks";
|
|
|
|
interface Card {
|
|
text: string;
|
|
iconShape?: string;
|
|
iconColor?: string;
|
|
}
|
|
|
|
interface NumberedCardsProps {
|
|
title: string;
|
|
subtitle: string;
|
|
cards: Card[];
|
|
}
|
|
|
|
const NumberedCards = memo<NumberedCardsProps>(({ title, subtitle, cards }) => {
|
|
// Generate schema data using hook
|
|
const schemaData = useSchemaData({
|
|
type: "HowTo",
|
|
name: title,
|
|
description: subtitle,
|
|
steps: cards.map((card) => ({
|
|
name: card.text,
|
|
text: card.text,
|
|
})),
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
|
/>
|
|
<section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
|
|
<div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
|
|
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
|
|
{/* Section Header */}
|
|
<div>
|
|
<SectionHeader
|
|
title={title}
|
|
subtitle={subtitle}
|
|
titleLg="How CommunityRule helps"
|
|
/>
|
|
</div>
|
|
|
|
{/* Cards Container */}
|
|
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
|
|
{cards.map((card, index) => (
|
|
<NumberedCard
|
|
key={index}
|
|
number={index + 1}
|
|
text={card.text}
|
|
iconShape={card.iconShape}
|
|
iconColor={card.iconColor}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Call to Action Button */}
|
|
<div className="text-center sm:text-left lg:text-center">
|
|
{/* Default button for xsm and sm breakpoints */}
|
|
<div className="block lg:hidden">
|
|
<Button variant="default" size="large">
|
|
Create CommunityRule
|
|
</Button>
|
|
</div>
|
|
{/* Outlined button for lg and xlg breakpoints */}
|
|
<div className="hidden lg:block">
|
|
<Button variant="outlined" size="large">
|
|
See how it works
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
});
|
|
|
|
NumberedCards.displayName = "NumberedCards";
|
|
|
|
export default NumberedCards;
|