From a394ceaef33f0fe93879a0092165fd632009b995 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 1 Aug 2025 13:53:43 -0600
Subject: [PATCH] Implemented small breakpoint

---
 app/components/Header.js | 9 ++-------
 app/components/Logo.js   | 8 ++++----
 app/globals.css          | 2 +-
 app/tailwind.css         | 7 +++++++
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/components/Header.js b/app/components/Header.js
index 43962c9..ae3fc91 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -12,8 +12,6 @@ export default function Header() {
           h-[40px]
           px-[var(--spacing-measures-spacing-016)]
           py-[var(--spacing-measures-spacing-008)]
-          sm:px-[var(--spacing-measures-spacing-032)]
-          sm:py-[var(--spacing-measures-spacing-012)]
           lg:px-[var(--spacing-measures-spacing-120,120px)]
           lg:py-[var(--spacing-measures-spacing-016,16px)]"
       >
@@ -22,11 +20,8 @@ export default function Header() {
           <div className="block sm:hidden">
             <Logo size="header" showText={false} />
           </div>
-          <div className="hidden sm:block lg:hidden">
-            <Logo size="header" showText={false} />
-          </div>
-          <div className="hidden lg:block">
-            <Logo size="headerLg" showText={false} />
+          <div className="hidden sm:block">
+            <Logo size="header" showText={true} />
           </div>
         </div>
 
diff --git a/app/components/Logo.js b/app/components/Logo.js
index 585fa0a..f4eee5a 100644
--- a/app/components/Logo.js
+++ b/app/components/Logo.js
@@ -9,11 +9,11 @@ export default function Logo({ size = "default", showText = true }) {
       iconSize: "w-[27.05px] h-[27.05px]",
     },
     header: {
-      containerHeight: "h-[14.24px]",
+      containerHeight: "h-[20.85px]",
       gap: "gap-[2.11px]",
-      textSize: "text-[18px]",
-      lineHeight: "leading-[22px]",
-      iconSize: "w-[22px] h-[22px]",
+      textSize: "text-[11.57px]",
+      lineHeight: "leading-[14px]",
+      iconSize: "w-[14.24px] h-[14.24px]",
     },
     headerLg: {
       containerHeight: "h-[36px]",
diff --git a/app/globals.css b/app/globals.css
index d13c9fc..4135e88 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,4 @@
-@import "./tailwind.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "./tailwind.css";
diff --git a/app/tailwind.css b/app/tailwind.css
index 07a9575..9d62218 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -6,6 +6,13 @@
 @import "tailwindcss";
 
 @theme inline {
+  /* Custom breakpoints */
+  --breakpoint-xsm: 429px;
+  --breakpoint-sm: 430px;
+  --breakpoint-md: 640px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 
   /* Reset default Tailwind configuration */
   --color-*: initial;