From af986c9ba3fbc0a56f0e2f3e2e7906d35e15ac23 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 19 Aug 2025 22:36:50 -0600
Subject: [PATCH] Hero Banner xl breakpoint

---
 app/components/ContentLockup.js | 60 +++++++++++++++++++++------------
 app/components/HeroBanner.js    |  2 +-
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index e7dbb85..85f59f5 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -6,35 +6,53 @@ const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => {
   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">
       {/* Text content container */}
-      <div className="flex flex-col">
-        {/* Title container */}
-        <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] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] text-[var(--color-content-inverse-primary)]">
-            {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]"
-          />
+      <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">
+          {/* 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>
+            <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]"
+            />
+          </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>
         </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] text-[var(--color-content-inverse-primary)]">
-          {subtitle}
-        </h2>
-
-        {/* Description */}
-        <p className="font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]">
+        {/* Description - 20px gap from subtitle at xl */}
+        <p className="font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]">
           {description}
         </p>
       </div>
 
       {/* CTA Button */}
       <div className="flex justify-start">
-        <Button variant="primary" size="small">
-          {ctaText}
-        </Button>
+        {/* 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">
+            {ctaText}
+          </Button>
+        </div>
+        {/* XLarge button for xl breakpoint */}
+        <div className="hidden xl:block">
+          <Button variant="primary" size="xlarge">
+            {ctaText}
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js
index 98b9d0e..b57dadb 100644
--- a/app/components/HeroBanner.js
+++ b/app/components/HeroBanner.js
@@ -5,7 +5,7 @@ import HeroDecor from "./HeroDecor";
 
 const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
   return (
-    <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)]">
+    <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
       <div className="flex flex-col gap-[var(--spacing-scale-010)]">
         {/* Frame container for content */}
         <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)] lg:py-[var(--spacing-scale-096)] lg:px-[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">