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

Feature Grid #13

Merged
an.di merged 17 commits from adilallo/component/FeatureGrid into main 2025-08-28 20:30:26 +00:00
Conversation 0 Commits 17 Files Changed 21
+53 -47
2 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b789dc595e - Show all commits
app/components/ContentLockup.js
+7 -5
View File
@@ -59,11 +59,13 @@ const ContentLockup = ({
{/* Title container */}
<div className={styles.titleContainer}>
<h1 className={styles.title}>{title}</h1>
<img
src="assets/Shapes_1.svg"
alt="Decorative shapes"
className={styles.shape}
/>
{variant === "hero" && (
<img
src="assets/Shapes_1.svg"
alt="Decorative shapes"
className={styles.shape}
/>
)}
</div>
{/* Subtitle */}
app/components/FeatureGrid.js
+46 -42
View File
@@ -6,50 +6,54 @@ import MiniCard from "./MiniCard";
const FeatureGrid = ({ title, subtitle, className = "" }) => {
return (
<section
className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-048)] bg-transparent ${className}`}
aria-labelledby="feature-grid-headline"
role="region"
>
<div className="max-w-[1200px] mx-auto gap-[var(--spacing-scale-048)]">
{/* Feature Content Lockup */}
<ContentLockup
title={title}
subtitle={subtitle}
variant="feature"
linkText="Learn more"
linkHref="#"
/>
<div className="p-0 lg:p-[var(--spacing-scale-064)]">
<section
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)] ${className}`}
aria-labelledby="feature-grid-headline"
role="region"
>
<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 */}
<div className="lg:shrink lg:min-w-0">
<ContentLockup
title={title}
subtitle={subtitle}
variant="feature"
linkText="Learn more"
linkHref="#"
/>
</div>
{/* MiniCard Grid */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)]">
<MiniCard
backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
labelLine1="Decision-making"
labelLine2="support"
panelContent="assets/Feature_Support.png"
/>
<MiniCard
backgroundColor="bg-[#D1FFE2]"
labelLine1="Values alignment"
labelLine2="exercises"
panelContent="assets/Feature_Exercises.png"
/>
<MiniCard
backgroundColor="bg-[#F4CAFF]"
labelLine1="Membership"
labelLine2="guidance"
panelContent="assets/Feature_Guidance.png"
/>
<MiniCard
backgroundColor="bg-[#CBDDFF]"
labelLine1="Conflict resolution"
labelLine2="tools"
panelContent="assets/Feature_Tools.png"
/>
{/* 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">
<MiniCard
backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
labelLine1="Decision-making"
labelLine2="support"
panelContent="assets/Feature_Support.png"
/>
<MiniCard
backgroundColor="bg-[#D1FFE2]"
labelLine1="Values alignment"
labelLine2="exercises"
panelContent="assets/Feature_Exercises.png"
/>
<MiniCard
backgroundColor="bg-[#F4CAFF]"
labelLine1="Membership"
labelLine2="guidance"
panelContent="assets/Feature_Guidance.png"
/>
<MiniCard
backgroundColor="bg-[#CBDDFF]"
labelLine1="Conflict resolution"
labelLine2="tools"
panelContent="assets/Feature_Tools.png"
/>
</div>
</div>
</div>
</section>
</section>
</div>
);
};