CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Make Feature Grid an HTML section

Browse Source
This commit is contained in:
adilallo
2025-08-27 10:29:32 -06:00
parent 580b7b16c1
commit e606d4b6a5
1 changed files with 58 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/FeatureGrid.js
+58 -60
View File
@@ -6,67 +6,65 @@ import MiniCard from "./MiniCard";
const FeatureGrid = ({ title, subtitle, className = "" }) => { const FeatureGrid = ({ title, subtitle, className = "" }) => {
return ( return (
<div className="p-0 lg:p-[var(--spacing-scale-064)]"> <section
<section className={`p-0 lg:p-[var(--spacing-scale-064)] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`}
className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`} aria-labelledby="feature-grid-headline"
aria-labelledby="feature-grid-headline" role="region"
role="region" tabIndex={-1}
tabIndex={-1} >
> <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
<div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]"> {/* Feature Content Lockup */}
{/* Feature Content Lockup */} <div className="lg:shrink lg:min-w-0">
<div className="lg:shrink lg:min-w-0"> <ContentLockup
<ContentLockup title={title}
title={title} subtitle={subtitle}
subtitle={subtitle} variant="feature"
variant="feature" linkText="Learn more"
linkText="Learn more" linkHref="#"
linkHref="#" />
/>
</div>
{/* MiniCard Grid */}
<div
className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0"
role="grid"
aria-label="Feature tools and services"
>
<MiniCard
backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
labelLine1="Decision-making"
labelLine2="support"
panelContent="assets/Feature_Support.png"
ariaLabel="Decision-making support tools"
href="#decision-making"
/>
<MiniCard
backgroundColor="bg-[#D1FFE2]"
labelLine1="Values alignment"
labelLine2="exercises"
panelContent="assets/Feature_Exercises.png"
ariaLabel="Values alignment exercises"
href="#values-alignment"
/>
<MiniCard
backgroundColor="bg-[#F4CAFF]"
labelLine1="Membership"
labelLine2="guidance"
panelContent="assets/Feature_Guidance.png"
ariaLabel="Membership guidance resources"
href="#membership-guidance"
/>
<MiniCard
backgroundColor="bg-[#CBDDFF]"
labelLine1="Conflict resolution"
labelLine2="tools"
panelContent="assets/Feature_Tools.png"
ariaLabel="Conflict resolution tools"
href="#conflict-resolution"
/>
</div>
</div> </div>
</section>
</div> {/* MiniCard Grid */}
<div
className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0"
role="grid"
aria-label="Feature tools and services"
>
<MiniCard
backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
labelLine1="Decision-making"
labelLine2="support"
panelContent="assets/Feature_Support.png"
ariaLabel="Decision-making support tools"
href="#decision-making"
/>
<MiniCard
backgroundColor="bg-[#D1FFE2]"
labelLine1="Values alignment"
labelLine2="exercises"
panelContent="assets/Feature_Exercises.png"
ariaLabel="Values alignment exercises"
href="#values-alignment"
/>
<MiniCard
backgroundColor="bg-[#F4CAFF]"
labelLine1="Membership"
labelLine2="guidance"
panelContent="assets/Feature_Guidance.png"
ariaLabel="Membership guidance resources"
href="#membership-guidance"
/>
<MiniCard
backgroundColor="bg-[#CBDDFF]"
labelLine1="Conflict resolution"
labelLine2="tools"
panelContent="assets/Feature_Tools.png"
ariaLabel="Conflict resolution tools"
href="#conflict-resolution"
/>
</div>
</div>
</section>
); );
}; };