ENG-8904: Update footer

assets/tailwind-theme.css

@@ -1120,8 +1120,8 @@
         0 1px 1px 0 rgba(0, 0, 0, 0.01),
         0 0 0 1px #FFF inset;
     --shadow-card-dark: 0 0 0 1px var(--m-slate-9, #2A3037);
-    --text-xs: 0.75rem;
-    --text-xs--line-height: 1rem;
+    --text-xs: 0.8125rem;
+    --text-xs--line-height: 1.25rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: 1.5rem;
     --text-base: 1rem;

pcweb/components/icons/icons.py

@@ -540,6 +540,32 @@
 
 markdown = """<svg width="27" height="16" viewBox="0 0 27 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M24.337 0q-.027 0-.052.026H2.168q-.47 0-.875.22Q.888.469.627.832q-.444.676-.34 1.48v11.975q.027.467.288.844t.626.584q.653.365 1.437.26V16l22.012-.026a1.63 1.63 0 0 0 .849-.286q.378-.259.587-.623.366-.624.261-1.429h.026l-.026-11.922a1.6 1.6 0 0 0-.287-.818 2.2 2.2 0 0 0-.626-.61A2.6 2.6 0 0 0 24.336 0m-.105 1.247h.053q.314 0 .522.13a.6.6 0 0 1 .222.168q.065.091.065.247l.026 11.844v.078q.052.415-.13.753a.6.6 0 0 1-.17.195.42.42 0 0 1-.248.065l-21.934.026h-.079a1.14 1.14 0 0 1-.73-.13.6.6 0 0 1-.223-.168.4.4 0 0 1-.065-.247V2.312l-.026-.104a.9.9 0 0 1 .143-.65q.196-.285.483-.285h21.856zM4.048 3.767v8.493h2.506V7.377l2.507 3.116 2.507-3.116v4.883h2.507V3.766h-2.507L9.06 6.883 6.554 3.766zm14.414 0V8.13h-2.507l3.76 4.13 3.76-4.13h-2.507V3.766z" fill="currentColor"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h27v16H0z"/></clipPath></defs></svg>"""
 
+twitter_footer = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8.03906 1.16699C9.49939 1.16698 10.6464 1.16673 11.542 1.28711C12.4598 1.4105 13.1886 1.6681 13.7607 2.24023C14.3329 2.81236 14.5905 3.54123 14.7139 4.45898C14.8342 5.35454 14.834 6.50163 14.834 7.96191V8.03809C14.834 9.49839 14.8342 10.6455 14.7139 11.541C14.5905 12.4588 14.3329 13.1876 13.7607 13.7598C13.1886 14.3319 12.4598 14.5895 11.542 14.7129C10.6464 14.8333 9.49938 14.833 8.03906 14.833H7.96289C6.50261 14.833 5.35552 14.8333 4.45996 14.7129C3.5422 14.5895 2.81334 14.3319 2.24121 13.7598C1.66908 13.1876 1.41148 12.4588 1.28809 11.541C1.16771 10.6454 1.16796 9.49841 1.16797 8.03809V7.96191C1.16796 6.50161 1.16771 5.35455 1.28809 4.45898C1.41148 3.54121 1.66908 2.81237 2.24121 2.24023C2.81334 1.66811 3.54219 1.4105 4.45996 1.28711C5.35553 1.16674 6.5026 1.16698 7.96289 1.16699H8.03906ZM4.66797 4.16699C4.4802 4.16699 4.30814 4.27227 4.22266 4.43945C4.13733 4.60656 4.15286 4.80685 4.2627 4.95898L6.80859 8.48535L4.31445 10.9795C4.11919 11.1748 4.11919 11.4913 4.31445 11.6865C4.50972 11.8818 4.82623 11.8818 5.02148 11.6865L7.40137 9.30664L9.07715 11.626C9.17115 11.7561 9.32187 11.833 9.48242 11.833H11.334C11.5217 11.833 11.6938 11.7277 11.7793 11.5605C11.8646 11.3935 11.8491 11.1931 11.7393 11.041L9.19336 7.51465L11.6875 5.02051C11.8828 4.82525 11.8827 4.50874 11.6875 4.31348C11.4922 4.11821 11.1757 4.11821 10.9805 4.31348L8.60059 6.69336L6.9248 4.37402C6.83082 4.24389 6.68006 4.16702 6.51953 4.16699H4.66797Z" fill="currentColor"/>
+</svg>"""
+
+linkedin_footer = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8.03906 14.833C9.49937 14.833 10.6464 14.8333 11.542 14.7129C12.4598 14.5895 13.1886 14.3319 13.7607 13.7598C14.3329 13.1876 14.5905 12.4588 14.7139 11.541C14.8342 10.6455 14.834 9.49839 14.834 8.03809V7.96191C14.834 6.50161 14.8342 5.35455 14.7139 4.45898C14.5905 3.54121 14.3329 2.81237 13.7607 2.24023C13.1886 1.6681 12.4598 1.4105 11.542 1.28711C10.6464 1.16674 9.49936 1.16698 8.03906 1.16699H7.96289C6.50259 1.16698 5.35553 1.16674 4.45996 1.28711C3.54219 1.4105 2.81334 1.6681 2.24121 2.24023C1.66908 2.81237 1.41148 3.54121 1.28809 4.45898C1.16771 5.35455 1.16796 6.5016 1.16797 7.96191V8.03809C1.16796 9.4984 1.16771 10.6454 1.28809 11.541C1.41148 12.4588 1.66908 13.1876 2.24121 13.7598C2.81334 14.3319 3.54219 14.5895 4.45996 14.7129C5.35553 14.8333 6.50259 14.833 7.96289 14.833H8.03906ZM4.66797 5.5C4.20802 5.49979 3.83514 5.12695 3.83496 4.66699C3.83496 4.20689 4.20791 3.83322 4.66797 3.83301H4.6748C5.13474 3.83336 5.50781 4.20697 5.50781 4.66699C5.50764 5.12686 5.13463 5.49965 4.6748 5.5H4.66797ZM11.3359 12C10.9677 12 10.6689 11.7012 10.6689 11.333V8.66699C10.6689 7.93072 10.0722 7.33318 9.33594 7.33301C8.59956 7.33301 8.00293 7.93061 8.00293 8.66699L8.00293 11.333C8.00293 11.7011 7.70398 11.9998 7.33594 12C6.96775 12 6.66895 11.7012 6.66895 11.333L6.66895 6.66699C6.66895 6.2988 6.96775 6 7.33594 6C7.60593 6.00013 7.83866 6.16072 7.94336 6.3916C8.34858 6.14309 8.82575 6 9.33594 6C10.8085 6.00018 12.0029 7.19434 12.0029 8.66699V11.333C12.0029 11.7011 11.704 11.9998 11.3359 12ZM4.66895 12C4.30084 11.9999 4.00293 11.7011 4.00293 11.333L4.00293 7C4.00293 6.63187 4.30084 6.33311 4.66895 6.33301C5.03705 6.33311 5.33594 6.63187 5.33594 7L5.33594 11.333C5.33594 11.7011 5.03705 11.9999 4.66895 12Z" fill="currentColor"/>
+</svg>"""
+
+forum_footer = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M6.83594 10.8413C6.83594 8.60735 8.72276 6.8335 11.0026 6.8335C13.2825 6.8335 15.1693 8.60735 15.1693 10.8413C15.1693 11.9116 14.7328 12.8811 14.0286 13.5961C13.9997 13.6255 13.984 13.6521 13.9773 13.6689C13.9756 13.6734 13.9747 13.6764 13.9743 13.6782C14.02 13.9139 14.1219 14.1318 14.2685 14.3122C14.3798 14.4491 14.4107 14.6345 14.3498 14.8C14.289 14.9656 14.1454 15.0869 13.972 15.1192C13.3302 15.2385 12.666 15.1309 12.097 14.8283C12.0267 14.7909 11.9802 14.7663 11.9458 14.7491C11.9136 14.7544 11.8699 14.7625 11.8042 14.7749C11.5399 14.8245 11.2715 14.8494 11.0023 14.8491C8.72258 14.8489 6.83594 13.0751 6.83594 10.8413Z" fill="currentColor"/>
+  <path d="M7.33594 0.833496C3.76757 0.833496 0.835938 3.60685 0.835938 7.07353C0.835938 8.73607 1.51352 10.2437 2.61101 11.3582C2.76477 11.5143 2.80634 11.6658 2.78734 11.7673C2.7035 12.207 2.514 12.6152 2.23864 12.9539C2.12736 13.0907 2.09644 13.2761 2.15728 13.4417C2.21813 13.6073 2.36173 13.7286 2.53517 13.7609C3.51317 13.9428 4.52687 13.7788 5.3957 13.3168C5.50674 13.2577 5.58644 13.2154 5.64827 13.1845C5.68824 13.1645 5.70822 13.1545 5.72405 13.1496C5.73988 13.1447 5.74128 13.1445 5.74128 13.1445C5.75395 13.1428 5.76873 13.1426 5.78532 13.1452C5.85108 13.1542 5.94007 13.1708 6.0829 13.1976C6.24319 13.2277 6.36119 13.0552 6.29215 12.9074C5.99988 12.282 5.83594 11.5841 5.83594 10.8413C5.83594 8.01226 8.21427 5.8335 11.0026 5.8335C11.7521 5.8335 12.472 5.99093 13.1241 6.27611C13.4565 6.4215 13.6227 6.49419 13.7172 6.41775C13.8118 6.34132 13.7792 6.18205 13.7142 5.86352C13.1259 2.98339 10.4777 0.833496 7.33594 0.833496Z" fill="currentColor"/>
+</svg>"""
+
+moon_footer = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.00826 1.36183C7.12791 1.51752 7.14537 1.72883 7.05288 1.90203C6.66358 2.63113 6.44268 3.46391 6.44268 4.34976C6.44268 7.2243 8.77295 9.55458 11.6475 9.55458C12.5333 9.55458 13.3661 9.33368 14.0952 8.94438C14.2684 8.85189 14.4797 8.86934 14.6354 8.989C14.7911 9.10865 14.8623 9.30835 14.8175 9.49953C14.1011 12.5565 11.358 14.8332 8.08198 14.8332C4.26132 14.8332 1.16406 11.7359 1.16406 7.91527C1.16406 4.63923 3.44077 1.89616 6.49773 1.17971C6.6889 1.13491 6.8886 1.20615 7.00826 1.36183Z" fill="currentColor"/>
+</svg>"""
+
+sun_footer = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M4.33203 7.99967C4.33203 5.97463 5.97365 4.33301 7.9987 4.33301C10.0237 4.33301 11.6654 5.97463 11.6654 7.99967C11.6654 10.0247 10.0237 11.6663 7.9987 11.6663C5.97365 11.6663 4.33203 10.0247 4.33203 7.99967Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.16107 1.99984C7.16107 1.5396 7.53417 1.1665 7.9944 1.1665H8.00039C8.46063 1.1665 8.83372 1.5396 8.83372 1.99984C8.83372 2.46007 8.46063 2.83317 8.00039 2.83317H7.9944C7.53417 2.83317 7.16107 2.46007 7.16107 1.99984ZM11.4033 3.75716C11.4033 3.29693 11.7764 2.92383 12.2366 2.92383H12.2426C12.7028 2.92383 13.0759 3.29693 13.0759 3.75716C13.0759 4.2174 12.7028 4.5905 12.2426 4.5905H12.2366C11.7764 4.5905 11.4033 4.2174 11.4033 3.75716ZM2.92012 3.75749C2.92012 3.29725 3.29322 2.92415 3.75346 2.92415H3.75944C4.21968 2.92415 4.59277 3.29725 4.59277 3.75749C4.59277 4.21772 4.21968 4.59082 3.75944 4.59082H3.75346C3.29322 4.59082 2.92012 4.21772 2.92012 3.75749ZM1.16406 8.00023C1.16406 7.53999 1.53716 7.16689 1.9974 7.16689H2.00338C2.46362 7.16689 2.83671 7.53999 2.83671 8.00023C2.83671 8.46046 2.46362 8.83356 2.00338 8.83356H1.9974C1.53716 8.83356 1.16406 8.46046 1.16406 8.00023ZM13.1581 8.00023C13.1581 7.53999 13.5312 7.16689 13.9914 7.16689H13.9974C14.4576 7.16689 14.8307 7.53999 14.8307 8.00023C14.8307 8.46046 14.4576 8.83356 13.9974 8.83356H13.9914C13.5312 8.83356 13.1581 8.46046 13.1581 8.00023ZM2.92012 12.2425C2.92012 11.7823 3.29322 11.4092 3.75346 11.4092H3.75944C4.21968 11.4092 4.59277 11.7823 4.59277 12.2425C4.59277 12.7028 4.21968 13.0758 3.75944 13.0758H3.75346C3.29322 13.0758 2.92012 12.7028 2.92012 12.2425ZM11.4029 12.2428C11.4029 11.7826 11.776 11.4095 12.2362 11.4095H12.2422C12.7024 11.4095 13.0755 11.7826 13.0755 12.2428C13.0755 12.7031 12.7024 13.0762 12.2422 13.0762H12.2362C11.776 13.0762 11.4029 12.7031 11.4029 12.2428ZM7.16146 13.9998C7.16146 13.5396 7.53456 13.1665 7.99479 13.1665H8.00078C8.46102 13.1665 8.83411 13.5396 8.83411 13.9998C8.83411 14.4601 8.46102 14.8332 8.00078 14.8332H7.99479C7.53456 14.8332 7.16146 14.4601 7.16146 13.9998Z" fill="currentColor"/>
+</svg>"""
+
+computer_footer = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66797 10.0002C6.66797 9.63197 6.96645 9.3335 7.33464 9.3335H8.66797C9.03616 9.3335 9.33464 9.63197 9.33464 10.0002C9.33464 10.3684 9.03616 10.6668 8.66797 10.6668H7.33464C6.96645 10.6668 6.66797 10.3684 6.66797 10.0002Z" fill="currentColor"/>
+  <path d="M9.37207 0.666992C10.4331 0.666982 11.2825 0.666772 11.9609 0.738281C12.659 0.811908 13.2527 0.967495 13.7705 1.33008C14.1209 1.57541 14.4256 1.8801 14.6709 2.23047C15.0335 2.7483 15.1891 3.34194 15.2627 4.04004C15.3342 4.71845 15.334 5.56792 15.334 6.62891V6.7041C15.334 7.76509 15.3342 8.61456 15.2627 9.29297C15.1891 9.99122 15.0335 10.5856 14.6709 11.1035C14.4256 11.4537 14.1207 11.7587 13.7705 12.0039C13.2528 12.3663 12.6589 12.5211 11.9609 12.5947C11.3138 12.6629 10.5111 12.6659 9.51758 12.666C9.5059 12.7659 9.49909 12.8662 9.50098 12.9658C9.5068 13.2736 9.51005 13.4276 9.80176 13.7139C10.0934 13.9999 10.3572 14 10.8848 14H11.334C11.7022 14 12.001 14.2988 12.001 14.667C12.0008 15.035 11.7021 15.333 11.334 15.333H4.66797C4.29989 15.333 4.00115 15.035 4.00098 14.667C4.00098 14.2988 4.29978 14 4.66797 14H5.11719C5.64471 14 5.9086 13.9999 6.2002 13.7139C6.4919 13.4276 6.49516 13.2736 6.50098 12.9658C6.50286 12.8661 6.49509 12.766 6.4834 12.666C5.49036 12.6659 4.68793 12.6629 4.04102 12.5947C3.34306 12.5211 2.7492 12.3663 2.23145 12.0039C1.88121 11.7587 1.57634 11.4537 1.33105 11.1035C0.968403 10.5856 0.812872 9.99122 0.739258 9.29297C0.667749 8.61456 0.667959 7.7651 0.667969 6.7041V6.62891C0.667959 5.56791 0.667749 4.71845 0.739258 4.04004C0.812885 3.34194 0.968471 2.7483 1.33105 2.23047C1.57639 1.8801 1.88108 1.57541 2.23145 1.33008C2.74928 0.967495 3.34291 0.811908 4.04102 0.738281C4.71943 0.666772 5.56889 0.666982 6.62988 0.666992H9.37207ZM6.66797 2C5.56069 2 4.78193 2.00121 4.18164 2.06445C3.59328 2.12647 3.25295 2.24206 2.99609 2.42188C2.77313 2.57799 2.57897 2.77215 2.42285 2.99512C2.24304 3.25198 2.12745 3.5923 2.06543 4.18066C2.00219 4.78095 2.00098 5.55972 2.00098 6.66699C2.00098 7.77431 2.00216 8.55305 2.06543 9.15332C2.12744 9.74134 2.24316 10.0811 2.42285 10.3379C2.57897 10.5608 2.77314 10.755 2.99609 10.9111C3.25297 11.091 3.59318 11.2075 4.18164 11.2695C4.78192 11.3328 5.56074 11.333 6.66797 11.333H9.33398C10.4412 11.333 11.22 11.3328 11.8203 11.2695C12.4088 11.2075 12.749 11.091 13.0059 10.9111C13.2288 10.755 13.423 10.5608 13.5791 10.3379C13.7588 10.0811 13.8745 9.74134 13.9365 9.15332C13.9998 8.55305 14.001 7.77431 14.001 6.66699C14.001 5.55972 13.9998 4.78095 13.9365 4.18066C13.8745 3.5923 13.7589 3.25198 13.5791 2.99512C13.423 2.77215 13.2288 2.57799 13.0059 2.42188C12.749 2.24206 12.4087 2.12647 11.8203 2.06445C11.22 2.00121 10.4413 2 9.33398 2H6.66797Z" fill="currentColor"/>
+</svg>"""
 ICONS = {
     # Socials
     "github": github,
@@ -624,6 +650,12 @@
     "link_blog": link_blog,
     "reddit_blog": reddit_blog,
     "markdown": markdown,
+    "twitter_footer": twitter_footer,
+    "linkedin_footer": linkedin_footer,
+    "forum_footer": forum_footer,
+    "moon_footer": moon_footer,
+    "sun_footer": sun_footer,
+    "computer_footer": computer_footer,
 }
 
 

pcweb/pages/about/__init__.py

@@ -11,7 +11,6 @@
     square_logo,
     team,
 )
-from pcweb.pages.framework.views.footer_index import footer_index
 from pcweb.templates.marketing_page import marketing_page
 
 
@@ -35,8 +34,6 @@ def about_page() -> rx.Component:
             hiring(),
             team(),
             news(),
-            divider(),
-            footer_index(),
             class_name="flex flex-col relative justify-center items-center w-full",
         ),
         class_name="flex flex-col w-full relative h-full justify-center items-center",

pcweb/pages/blog/blog.py

@@ -96,44 +96,51 @@ def newsletter_input() -> rx.Component:
     )
 
 
-def card_content(meta: dict, path: str) -> rx.Component:
-    return rx.el.div(
-        rx.el.a(
-            rx.el.div(
-                rx.image(
-                    src=meta["image"],
-                    loading="eager",
-                    custom_attrs={"fetchPriority": "high"},
-                    alt="Image preview for blog post: " + str(meta["title"]),
-                    class_name="group-hover:scale-105 w-full h-full transition-transform duration-150 ease-out object-top object-cover",
-                ),
-                class_name="relative flex-shrink-0 border-slate-5 border-b border-solid w-full h-[19.5rem] overflow-hidden",
+def card_inner(meta: dict, path: str) -> rx.Component:
+    return rx.el.a(
+        rx.el.div(
+            rx.image(
+                src=meta["image"],
+                loading="eager",
+                custom_attrs={"fetchPriority": "high"},
+                alt="Image preview for blog post: " + str(meta["title"]),
+                class_name="group-hover:scale-105 w-full h-full transition-transform duration-150 ease-out object-top object-cover",
             ),
-            rx.el.div(
-                rx.el.span(
-                    meta["title"],
-                    class_name="text-2xl font-[575] text-m-slate-12 dark:text-m-slate-3 mb-4",
-                ),
-                rx.el.p(
-                    meta["description"],
-                    class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475] mb-6",
-                ),
-                rx.el.span(
-                    meta["author"],
-                    class_name="text-m-slate-12 dark:text-m-slate-3 text-sm font-[525] mt-auto",
-                ),
-                class_name="flex flex-col w-full h-full pb-12 px-12",
+            class_name="relative flex-shrink-0 border-slate-5 border-b border-solid w-full h-[17.5rem] overflow-hidden",
+        ),
+        rx.el.div(
+            rx.el.span(
+                meta["title"],
+                class_name="text-2xl font-[575] text-m-slate-12 dark:text-m-slate-3 mb-4 line-clamp-3",
+            ),
+            rx.el.p(
+                meta["description"],
+                class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475] mb-6 line-clamp-3",
+            ),
+            rx.el.span(
+                meta["author"],
+                class_name="text-m-slate-12 dark:text-m-slate-3 text-sm font-[525] mt-auto",
             ),
-            to=path,
-            class_name="flex flex-col gap-10 rounded-xl backdrop-blur-[16px] [box-shadow:0_-2px_2px_1px_rgba(0,_0,_0,_0.02),_0_1px_1px_0_rgba(0,_0,_0,_0.08),_0_4px_8px_0_rgba(0,_0,_0,_0.03)] bg-white-1 dark:bg-m-slate-11 overflow-hidden group h-full",
+            class_name="flex flex-col w-full h-full pb-8 px-8",
         ),
+        to=path,
+        class_name="flex flex-col gap-8 rounded-xl backdrop-blur-[16px] [box-shadow:0_-2px_2px_1px_rgba(0,_0,_0,_0.02),_0_1px_1px_0_rgba(0,_0,_0,_0.08),_0_4px_8px_0_rgba(0,_0,_0,_0.03)] bg-white-1 dark:bg-m-slate-11 overflow-hidden group h-full",
+    )
+
+
+def card_content(meta: dict, path: str, class_name: str = "") -> rx.Component:
+    return rx.el.div(
+        card_inner(meta, path),
         display=rx.cond(
             (blog_filter_cs.value == "All")
             | (blog_filter_cs.value == meta.get("tag", "")),
             "block",
             "none",
         ),
-        class_name="relative border-y border-m-slate-4 dark:border-m-slate-10 lg:odd:border-r lg:even:border-l lg:even:before:content-[''] lg:even:before:absolute lg:even:before:w-12 lg:even:before:-left-12 lg:even:before:top-0 lg:even:before:bottom-0 lg:even:before:border-y lg:even:before:border-m-slate-4 lg:dark:even:before:border-m-slate-10",
+        class_name=ui.cn(
+            "relative border-y border-m-slate-4 dark:border-m-slate-10 lg:before:absolute lg:before:w-[calc(2rem+2px)] lg:before:-left-[calc(2rem+1px)] lg:before:-top-[0.5px] lg:before:-bottom-[0.5px] lg:before:border-y lg:before:border-m-slate-4 lg:dark:before:border-m-slate-10 lg:max-xl:odd:border-r lg:max-xl:even:border-l lg:max-xl:even:before:content-[''] xl:[&:nth-child(3n+1)]:border-r xl:[&:nth-child(3n+2)]:border-l xl:[&:nth-child(3n+2)]:border-r xl:[&:nth-child(3n+2)]:before:content-[''] xl:[&:nth-child(3n)]:border-l xl:[&:nth-child(3n)]:before:content-['']",
+            class_name,
+        ),
     )
 
 
@@ -161,7 +168,7 @@ def component_grid() -> rx.Component:
         rx.el.div(
             class_name="absolute -bottom-24 -right-px w-px h-24 bg-gradient-to-b from-current to-transparent text-m-slate-4 dark:text-m-slate-10"
         ),
-        class_name="grid lg:grid-cols-2 grid-cols-1 lg:border border-m-slate-4 dark:border-m-slate-10 w-full gap-x-12 gap-y-12 lg:gap-y-24 relative py-24",
+        class_name="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 lg:border border-m-slate-4 dark:border-m-slate-10 w-full gap-x-8 gap-y-8 lg:gap-y-24 relative py-24 lg:mb-48 mb-24",
     )