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

Hero Banner md breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-19 17:18:58 -06:00
parent 968d687bad
commit 1a9339479d
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ContentLockup.js
+5 -5
View File
@@ -4,28 +4,28 @@ import Button from "./Button";
const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => { const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => {
return ( return (
<div className="flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] relative z-10"> <div className="flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] relative z-10">
{/* Text content container */} {/* Text content container */}
<div className="flex flex-col"> <div className="flex flex-col">
{/* Title container */} {/* Title container */}
<div className="flex gap-[var(--spacing-scale-008)] items-center"> <div className="flex gap-[var(--spacing-scale-008)] items-center">
<h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] text-[var(--color-content-inverse-primary)]"> <h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] text-[var(--color-content-inverse-primary)]">
{title} {title}
</h1> </h1>
<img <img
src="/assets/Shapes_1.svg" src="/assets/Shapes_1.svg"
alt="Decorative shapes" alt="Decorative shapes"
className="w-[27.2px] h-[27.2px]" className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px]"
/> />
</div> </div>
{/* Subtitle */} {/* Subtitle */}
<h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] text-[var(--color-content-inverse-primary)]"> <h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] text-[var(--color-content-inverse-primary)]">
{subtitle} {subtitle}
</h2> </h2>
{/* Description */} {/* Description */}
<p className="font-inter font-[400] text-[18px] leading-[130%] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)]"> <p className="font-inter font-[400] text-[18px] leading-[130%] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)]">
{description} {description}
</p> </p>
</div> </div>
app/components/HeroBanner.js
+13 -11
View File
@@ -5,29 +5,31 @@ import HeroDecor from "./HeroDecor";
const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => { const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
return ( return (
<section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)]"> <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)]">
<div className="flex flex-col gap-[var(--spacing-scale-010)]"> <div className="flex flex-col gap-[var(--spacing-scale-010)]">
{/* Frame container for content */} {/* Frame container for content */}
<div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] relative overflow-hidden"> <div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
{/* DECORATIONS (behind content) */} {/* DECORATIONS (behind content) */}
<HeroDecor <HeroDecor
className="pointer-events-none absolute z-0 className="pointer-events-none absolute z-0
left-0 top-0 left-0 top-0
translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px]
w-[1540px] h-[645px] scale-[1.04]" w-[1540px] h-[645px] scale-[1.04]"
/> />
{/* Content lockup - Large variant */} {/* Content lockup - Large variant */}
<ContentLockup <div className="md:flex-1">
title={title} <ContentLockup
subtitle={subtitle} title={title}
description={description} subtitle={subtitle}
ctaText={ctaText} description={description}
ctaHref={ctaHref} ctaText={ctaText}
/> ctaHref={ctaHref}
/>
</div>
{/* Hero Image Container */} {/* Hero Image Container */}
<div className="w-full rounded-[8px] relative z-10"> <div className="w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10">
<img <img
src="/assets/HeroImage.png" src="/assets/HeroImage.png"
alt="Hero illustration" alt="Hero illustration"