From 3e15b5d7456b6849f2da3cd101b24a2ade71793b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Sebasti=C3=A1n=20Mendoza?= <cebo_052000@hotmail.com>
Date: Wed, 20 Mar 2024 15:05:17 -0500
Subject: [PATCH 1/2] feat: add sticky behavior to pricing options container

---
 apps/marketing/src/app/(marketing)/layout.tsx               | 3 ++-
 apps/marketing/src/components/(marketing)/pricing-table.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/layout.tsx b/apps/marketing/src/app/(marketing)/layout.tsx
index a7c599b36..75c2d177c 100644
--- a/apps/marketing/src/app/(marketing)/layout.tsx
+++ b/apps/marketing/src/app/(marketing)/layout.tsx
@@ -38,7 +38,8 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
     <div
       className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
-        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
+        'overflow-y-auto overflow-x-hidden':
+          pathname && !['/singleplayer', '/pricing'].includes(pathname),
       })}
     >
       <div
diff --git a/apps/marketing/src/components/(marketing)/pricing-table.tsx b/apps/marketing/src/components/(marketing)/pricing-table.tsx
index 2cd6eec00..75d7f113a 100644
--- a/apps/marketing/src/components/(marketing)/pricing-table.tsx
+++ b/apps/marketing/src/components/(marketing)/pricing-table.tsx
@@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <div className="flex items-center justify-center gap-x-6">
+      <div className="bg-background sticky top-32 flex items-center justify-center gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"

From 24852f3c684942fd3a4c25bf0f45456ed4fc5657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Sebasti=C3=A1n=20Mendoza?= <cebo_052000@hotmail.com>
Date: Sun, 24 Mar 2024 19:07:26 -0500
Subject: [PATCH 2/2] feat: modify periods menu horizontal alignment on mobile

---
 apps/marketing/src/components/(marketing)/pricing-table.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/pricing-table.tsx b/apps/marketing/src/components/(marketing)/pricing-table.tsx
index 75d7f113a..b34173ba1 100644
--- a/apps/marketing/src/components/(marketing)/pricing-table.tsx
+++ b/apps/marketing/src/components/(marketing)/pricing-table.tsx
@@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <div className="bg-background sticky top-32 flex items-center justify-center gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static">
+      <div className="bg-background sticky top-32 flex items-center justify-end gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static lg:justify-center">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"
@@ -40,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'MONTHLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -63,7 +63,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'YEARLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>