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] 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"