adilallo
117 lines
4.4 KiB
JavaScript
117 lines
4.4 KiB
JavaScript
"use client";
|
|
|
|
import Button from "./Button";
|
|
|
|
const ContentLockup = ({
|
|
title,
|
|
subtitle,
|
|
description,
|
|
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={styles.container}>
|
|
{/* Text content container */}
|
|
<div className={styles.textContainer}>
|
|
{/* Title and subtitle group */}
|
|
<div className={styles.titleGroup}>
|
|
{/* Title container */}
|
|
<div className={styles.titleContainer}>
|
|
<h1 className={styles.title}>{title}</h1>
|
|
{variant === "hero" && (
|
|
<img
|
|
src="assets/Shapes_1.svg"
|
|
alt="Decorative shapes"
|
|
className={styles.shape}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<h2 className={styles.subtitle}>{subtitle}</h2>
|
|
</div>
|
|
|
|
{/* 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 */}
|
|
{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>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContentLockup;
|