adilallo
83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
"use client";
|
|
|
|
import NumberedCard from "./NumberedCard";
|
|
import SectionHeader from "./SectionHeader";
|
|
import Button from "./Button";
|
|
|
|
const NumberedCards = ({ title, subtitle, cards }) => {
|
|
// Schema markup for SEO
|
|
const schemaData = {
|
|
"@context": "https://schema.org",
|
|
"@type": "HowTo",
|
|
name: title,
|
|
description: subtitle,
|
|
step: cards.map((card, index) => ({
|
|
"@type": "HowToStep",
|
|
position: index + 1,
|
|
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-scale-1200)] 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 <br />
|
|
CommunityRule
|
|
<br />
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NumberedCards;
|