From 1a9339479d6409f1bd347e2b1a24d5fd2dc5db5d Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 19 Aug 2025 17:18:58 -0600
Subject: [PATCH] Hero Banner md breakpoint

---
 app/components/ContentLockup.js | 10 +++++-----
 app/components/HeroBanner.js    | 24 +++++++++++++-----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index cfe3662..6fcf9c3 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -4,28 +4,28 @@ import Button from "./Button";
 
 const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => {
   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 */}
       <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] 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}
           </h1>
           <img
             src="/assets/Shapes_1.svg"
             alt="Decorative shapes"
-            className="w-[27.2px] h-[27.2px]"
+            className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px]"
           />
         </div>
 
         {/* 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}
         </h2>
 
         {/* 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}
         </p>
       </div>
diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js
index 76d0225..e26a69d 100644
--- a/app/components/HeroBanner.js
+++ b/app/components/HeroBanner.js
@@ -5,29 +5,31 @@ 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)]">
+    <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)]">
         {/* 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) */}
           <HeroDecor
             className="pointer-events-none absolute z-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]"
           />
 
           {/* Content lockup - Large variant */}
-          <ContentLockup
-            title={title}
-            subtitle={subtitle}
-            description={description}
-            ctaText={ctaText}
-            ctaHref={ctaHref}
-          />
+          <div className="md:flex-1">
+            <ContentLockup
+              title={title}
+              subtitle={subtitle}
+              description={description}
+              ctaText={ctaText}
+              ctaHref={ctaHref}
+            />
+          </div>
 
           {/* 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
               src="/assets/HeroImage.png"
               alt="Hero illustration"