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

Feature Grid default breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-26 20:43:57 -06:00
parent 646adba59d
commit 9e49c66611
10 changed files with 534 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ContentLockup.js
+81 -35
View File
@@ -9,58 +9,104 @@ const ContentLockup = ({
ctaText,
ctaHref,
buttonClassName = "",
variant = "hero",
linkText,
linkHref,
}) => {
// Variant-specific styling
const variantStyles = {
hero: {
container:
"flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",
textContainer:
"flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",
titleGroup: "flex flex-col xl:gap-0",
titleContainer:
"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
title:
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
subtitle:
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
description:
"font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]",
shape:
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
},
feature: {
container: "flex flex-col gap-[var(--spacing-scale-012)] relative z-10",
textContainer: "flex flex-col gap-[var(--spacing-scale-012)]",
titleGroup: "flex flex-col gap-[var(--spacing-scale-012)]",
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
title:
"font-bricolage-grotesque font-medium text-[32px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)]",
subtitle:
"font-space-grotesk font-normal text-[20px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)]",
description:
"font-inter font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-secondary)]",
shape:
"w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
},
};
const styles = variantStyles[variant] || variantStyles.hero;
return (
<div className="flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10">
<div className={styles.container}>
{/* Text content container */}
<div className="flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]">
{/* Title and subtitle group - no gap between them at xl */}
<div className="flex flex-col xl:gap-0">
<div className={styles.textContainer}>
{/* Title and subtitle group */}
<div className={styles.titleGroup}>
{/* Title container */}
<div className="flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center">
<h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
{title}
</h1>
<div className={styles.titleContainer}>
<h1 className={styles.title}>{title}</h1>
<img
src="assets/Shapes_1.svg"
alt="Decorative shapes"
className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"
className={styles.shape}
/>
</div>
{/* Subtitle */}
<h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
{subtitle}
</h2>
<h2 className={styles.subtitle}>{subtitle}</h2>
</div>
{/* Description - 20px gap from subtitle at xl */}
<p className="font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]">
{description}
</p>
{/* Description */}
{description && <p className={styles.description}>{description}</p>}
</div>
{/* Link for feature variant */}
{variant === "feature" && linkText && (
<a
href={linkHref || "#"}
className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors"
>
{linkText}
</a>
)}
{/* CTA Button */}
<div className="flex justify-start">
{/* Small button for xsm and sm breakpoints */}
<div className="block md:hidden">
<Button variant="primary" size="small">
{ctaText}
</Button>
{ctaText && (
<div className="flex justify-start">
{/* Small button for xsm and sm breakpoints */}
<div className="block md:hidden">
<Button variant="primary" size="small">
{ctaText}
</Button>
</div>
{/* Large button for md and lg breakpoints */}
<div className="hidden md:block xl:hidden">
<Button variant="primary" size="large" className={buttonClassName}>
{ctaText}
</Button>
</div>
{/* XLarge button for xl breakpoint */}
<div className="hidden xl:block">
<Button variant="primary" size="xlarge">
{ctaText}
</Button>
</div>
</div>
{/* Large button for md and lg breakpoints */}
<div className="hidden md:block xl:hidden">
<Button variant="primary" size="large" className={buttonClassName}>
{ctaText}
</Button>
</div>
{/* XLarge button for xl breakpoint */}
<div className="hidden xl:block">
<Button variant="primary" size="xlarge">
{ctaText}
</Button>
</div>
</div>
)}
</div>
);
};