Update shared components for new web design

docs/app/assets/tailwind-theme.css

@@ -1226,6 +1226,8 @@
     --animate-ellipse-3: ellipse-3 2400ms ease-out infinite;
     --animate-ellipse-4: ellipse-4 2400ms ease-out infinite;
     --animate-ellipse-reversed: ellipse-reversed 2400ms ease-out infinite;
+    --arrow-sweep-duration: 4s;
+    --animate-arrow-sweep: arrow-sweep var(--arrow-sweep-duration) linear infinite backwards;
     /* Radius */
     --radius-ui-xxs: calc(var(--radius) - 0.25rem);
     --radius-ui-xs: calc(var(--radius) - 0.125rem);
@@ -1237,6 +1239,7 @@
     /* Width */
     --layout-max-width: 81rem;
     --docs-layout-max-width: 69rem;
+    --landing-layout-max-width: 78.5rem;
 
     @keyframes accordion-down {
         from {
@@ -1631,6 +1634,20 @@
         }
     }
 
+    @keyframes arrow-sweep {
+        0% {
+            transform: translateX(-100%);
+        }
+
+        25% {
+            transform: translateX(200%);
+        }
+
+        100% {
+            transform: translateX(200%);
+        }
+    }
+
 
 }
 
@@ -2184,6 +2201,6 @@
     }
 
     body {
-        @apply isolate bg-slate-1 font-sans antialiased;
+        @apply isolate bg-secondary-1 font-sans antialiased;
     }
-}
+}

docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py

@@ -183,7 +183,7 @@ def ai_builder_section() -> rx.Component:
                 ),
                 class_name="grid grid-cols-1 lg:grid-cols-3 gap-12",
             ),
-            class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--docs-layout-max-width) mx-auto",
+            class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto",
         ),
         class_name="bg-gradient-to-b from-white-1 to-m-slate-1 dark:from-m-slate-11 dark:to-m-slate-12 w-full lg:pt-24 lg:pb-24 pb-10 max-xl:px-6 max-lg:pt-10",
     )

docs/app/reflex_docs/pages/docs_landing/views/divider.py

@@ -11,7 +11,7 @@ def divider(class_name: str = "") -> rx.Component:
             class_name="absolute top-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
         ),
         class_name=ui.cn(
-            "w-full h-[1px] bg-m-slate-4 dark:bg-m-slate-10 relative max-w-(--docs-layout-max-width) mx-auto",
+            "w-full h-[1px] bg-m-slate-4 dark:bg-m-slate-10 relative max-w-(--landing-layout-max-width) mx-auto",
             class_name,
         ),
     )

docs/app/reflex_docs/pages/docs_landing/views/enterprise.py

@@ -34,5 +34,5 @@ def enterprise_section() -> rx.Component:
             ),
             class_name="grid grid-cols-1 lg:grid-cols-2 border-t border-secondary-4 relative",
         ),
-        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--docs-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden",
+        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden",
     )

docs/app/reflex_docs/pages/docs_landing/views/framework.py

@@ -187,5 +187,5 @@ def framework() -> rx.Component:
             components_section(),
             class_name="flex flex-col lg:flex-row relative",
         ),
-        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--docs-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden",
+        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden",
     )

docs/app/reflex_docs/pages/docs_landing/views/hero.py

@@ -61,6 +61,6 @@ def hero() -> rx.Component:
             ),
         ),
         class_name=ui.cn(
-            "flex lg:flex-row flex-col max-w-(--docs-layout-max-width) mx-auto w-full max-lg:pb-10 max-xl:px-6",
+            "flex lg:flex-row flex-col max-w-(--landing-layout-max-width) mx-auto w-full max-lg:pb-10 max-xl:px-6",
         ),
     )

docs/app/reflex_docs/pages/docs_landing/views/hosting.py

@@ -47,5 +47,5 @@ def hosting_section() -> rx.Component:
             ),
             class_name="grid grid-cols-1 lg:grid-cols-2 border-t border-m-slate-4 dark:border-m-slate-10 relative",
         ),
-        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--docs-layout-max-width) mx-auto w-full justify-start max-xl:px-6 lg:mb-24 overflow-hidden",
+        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto w-full justify-start max-xl:px-6 lg:mb-24 overflow-hidden",
     )

docs/app/reflex_docs/pages/docs_landing/views/other.py

@@ -35,5 +35,5 @@ def other_section() -> rx.Component:
             faded_borders(),
             class_name="grid grid-cols-1 lg:grid-cols-2 border-t border-secondary-4 relative",
         ),
-        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--docs-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden",
+        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden",
     )

docs/app/reflex_docs/pages/docs_landing/views/self_hosting.py

@@ -34,5 +34,5 @@ def self_hosting_section() -> rx.Component:
             ),
             class_name="grid grid-cols-1 lg:grid-cols-2 border-t border-secondary-4 relative",
         ),
-        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--docs-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden max-lg:pt-10",
+        class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto w-full justify-start lg:mb-24 mb-10 max-xl:px-6 overflow-hidden max-lg:pt-10",
     )

docs/app/reflex_docs/templates/docpage/docpage.py

@@ -55,6 +55,40 @@ def footer_link_flex(heading: str, links):
     )
 
 
+def social_menu_item(icon: str, url: str, name: str) -> rx.Component:
+    return rx.el.elements.a(
+        marketing_button(
+            get_icon(icon, class_name="shrink-0"),
+            variant="ghost",
+            size="icon-sm",
+            class_name="text-m-slate-7 dark:text-m-slate-6",
+            native_button=False,
+        ),
+        href=url,
+        custom_attrs={"aria-label": "Social link for " + name},
+        target="_blank",
+    )
+
+
+def menu_socials() -> rx.Component:
+    from reflex_site_shared.constants import (
+        DISCORD_URL,
+        FORUM_URL,
+        GITHUB_URL,
+        LINKEDIN_URL,
+        TWITTER_URL,
+    )
+
+    return rx.box(
+        social_menu_item("twitter_footer", TWITTER_URL, "Twitter"),
+        social_menu_item("github_navbar", GITHUB_URL, "Github"),
+        social_menu_item("discord_navbar", DISCORD_URL, "Discord"),
+        social_menu_item("linkedin_footer", LINKEDIN_URL, "LinkedIn"),
+        social_menu_item("forum_footer", FORUM_URL, "Forum"),
+        class_name="flex flex-row items-center gap-2",
+    )
+
+
 def thumb_card(score: int, icon: str, label: str) -> rx.Component:
     return rx.el.button(
         ui.icon(
@@ -238,7 +272,6 @@ def link_pill(text: str, href: str) -> rx.Component:
 @rx.memo
 def docpage_footer(path: str):
     from reflex_site_shared.constants import FORUM_URL, ROADMAP_URL
-    from reflex_site_shared.views.footer import menu_socials
 
     return rx.el.footer(
         rx.box(

packages/reflex-site-shared/src/reflex_site_shared/components/icons.py

@@ -572,6 +572,28 @@
 circle = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><circle cx="8" cy="8" r="4" fill="currentColor"/></svg>
 """
 
+
+grok = """<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="currentColor"><path d="m9.29 15.274 7.953-5.905c.39-.29.948-.176 1.133.273.978 2.371.541 5.22-1.404 7.177-1.946 1.957-4.653 2.386-7.127 1.409l-2.702 1.258c3.876 2.665 8.584 2.006 11.525-.954 2.334-2.347 3.056-5.546 2.38-8.43l.007.006c-.98-4.237.24-5.93 2.741-9.394q.09-.123.178-.248l-3.29 3.31v-.011L9.287 15.275m-1.638 1.433c-2.783-2.673-2.303-6.81.07-9.195 1.756-1.765 4.633-2.486 7.144-1.427l2.696-1.252a7.8 7.8 0 0 0-1.823-1 8.92 8.92 0 0 0-9.72 1.967c-2.526 2.54-3.32 6.444-1.956 9.776 1.018 2.49-.651 4.252-2.334 6.03-.596.63-1.194 1.26-1.676 1.927l7.596-6.824"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
+"""
+
+claude = """<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="m4.666 15.947 4.677-2.616.078-.228-.078-.126h-.229l-.782-.048-2.673-.072-2.318-.096-2.245-.12-.566-.12-.53-.696.054-.348.476-.318.68.06 1.505.102 2.258.156 1.637.096 2.426.252h.385l.055-.156-.133-.096-.102-.096-2.336-1.578L4.377 8.23l-1.325-.96-.716-.486-.361-.456-.157-.996.65-.714.873.06.223.06.885.678 1.89 1.458 2.468 1.812.362.3.144-.102.018-.072-.162-.27-1.343-2.418-1.433-2.46-.638-1.02-.168-.612a3 3 0 0 1-.103-.72L6.224.31l.41-.132.987.132.416.36.614 1.398.993 2.202 1.541 2.994.452.888.24.822.09.252h.157v-.144l.127-1.686.235-2.07.228-2.664.079-.75.373-.9.74-.486.578.276.476.678-.066.438-.283 1.83-.554 2.868-.361 1.92h.21l.241-.24.975-1.29 1.638-2.04.722-.81.843-.894.542-.426h1.023l.753 1.116-.337 1.152-1.054 1.332-.873 1.128-1.252 1.68-.782 1.344.072.108.186-.018 2.83-.6 1.529-.276 1.824-.312.825.384.09.39-.325.798-1.95.48-2.288.456-3.408.804-.042.03.048.06 1.536.144.656.036h1.607l2.992.222.783.516.47.63-.079.48-1.204.612-1.625-.384-3.793-.9-1.3-.324h-.181v.108l1.084 1.056 1.986 1.788 2.486 2.304.127.57-.32.45-.336-.048-2.186-1.638-.842-.738-1.909-1.602h-.126v.168l.44.642 2.323 3.48.12 1.068-.168.348-.602.21-.662-.12-1.36-1.902-1.404-2.142-1.131-1.92-.139.078-.668 7.17-.313.366-.722.276-.602-.456-.32-.738.32-1.458.385-1.902.313-1.512.283-1.878.168-.624-.012-.042-.138.018-1.42 1.944-2.162 2.91-1.71 1.824-.41.162-.71-.366.067-.654.397-.582 2.366-3 1.427-1.86.92-1.074-.005-.156h-.054L4.094 18.52l-1.12.144-.482-.45.06-.738.23-.24 1.89-1.296z" fill="currentColor"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>"""
+
+openai = """<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0v24h24z" fill="#fff"/></mask><g mask="url(#a)"><path d="M9.205 8.736v-2.28c0-.192.072-.336.238-.432l4.543-2.64c.619-.36 1.356-.528 2.117-.528 2.854 0 4.662 2.232 4.662 4.608 0 .168 0 .36-.024.552l-4.71-2.784a.79.79 0 0 0-.856 0zm10.609 8.88v-5.448a.8.8 0 0 0-.429-.744l-5.97-3.504 1.95-1.128a.43.43 0 0 1 .476 0l4.544 2.64c1.308.768 2.188 2.4 2.188 3.984 0 1.824-1.07 3.504-2.76 4.2m-12.012-4.8-1.95-1.152c-.167-.096-.239-.24-.239-.432v-5.28c0-2.568 1.95-4.512 4.591-4.512 1 0 1.927.336 2.712.936L8.23 5.112a.8.8 0 0 0-.428.744zM12 15.264 9.205 13.68v-3.36L12 8.736l2.795 1.584v3.36zm1.796 7.296c-1 0-1.927-.336-2.712-.936l4.686-2.736a.8.8 0 0 0 .428-.744v-6.96l1.974 1.152c.167.096.238.24.238.432v5.28c0 2.568-1.974 4.512-4.614 4.512m-5.637-5.352-4.544-2.64c-1.308-.768-2.188-2.4-2.188-3.984 0-1.848 1.094-3.504 2.783-4.2v5.472c0 .336.143.576.428.744l5.947 3.48-1.95 1.128a.43.43 0 0 1-.476 0m-.262 3.936c-2.688 0-4.662-2.04-4.662-4.56 0-.192.024-.384.047-.576l4.686 2.736a.79.79 0 0 0 .856 0l5.97-3.48v2.28c0 .192-.07.336-.237.432l-4.543 2.64c-.619.36-1.356.528-2.117.528M13.796 24c2.878 0 5.28-2.064 5.827-4.8C22.287 18.504 24 15.984 24 13.416c0-1.68-.713-3.312-1.998-4.488a6.6 6.6 0 0 0 .19-1.512c0-3.432-2.759-6-5.946-6a5.6 5.6 0 0 0-1.88.312A5.94 5.94 0 0 0 10.205 0c-2.878 0-5.28 2.064-5.827 4.8C1.713 5.496 0 8.016 0 10.584c0 1.68.713 3.312 1.998 4.488a6.6 6.6 0 0 0-.19 1.512c0 3.432 2.759 6 5.946 6a5.6 5.6 0 0 0 1.88-.312A5.93 5.93 0 0 0 13.795 24" fill="currentColor"/></g></svg>
+"""
+
+gemini = """<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M15.684 0c-4.242 0-7.814 3.237-8.26 7.423C3.236 7.87 0 11.442 0 15.683 0 20.262 3.74 24 8.316 24c4.242 0 7.814-3.237 8.26-7.423C20.764 16.13 24 12.558 24 8.317 24 3.74 20.26 0 15.684 0m6.363 9.265a6.39 6.39 0 0 1-5.414 5.414V9.265zm-20.094 5.47A6.39 6.39 0 0 1 7.367 9.32v5.414zm12.726 1.898c-.446 3.125-3.181 5.47-6.363 5.47-3.181 0-5.916-2.345-6.363-5.47zm.056-1.898h-5.47v-5.47h5.47zm7.312-7.368H9.32c.446-3.125 3.181-5.47 6.363-5.47 3.237 0 5.916 2.345 6.363 5.47" fill="currentColor"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
+"""
+
+cursor = """<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.481 5.639 10.944.133a.99.99 0 0 0-.99 0L.415 5.639A.83.83 0 0 0 0 6.36v11.104c0 .297.159.573.416.721l9.538 5.507a.99.99 0 0 0 .99 0l9.538-5.507a.83.83 0 0 0 .416-.721V6.36a.83.83 0 0 0-.416-.721m-.599 1.166-9.207 15.947c-.062.108-.226.064-.226-.06V12.25a.59.59 0 0 0-.293-.507l-9.042-5.22c-.108-.063-.064-.227.06-.227h18.414a.34.34 0 0 1 .294.51" fill="currentColor"/></svg>"""
+
+arrow_turn = """<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 12.5h-2a4 4 0 0 1-4-4v-8m2 2-2-2-2 2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>"""
+
+reflex_small = """<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="14" rx="3.5" fill="currentColor"/><path d="M8.75 8.167v2.77c0 .081.065.147.146.147h1.458c.08 0 .146-.066.146-.146V8.313a.146.146 0 0 0-.146-.146zm-5.104-5.25a.146.146 0 0 0-.146.146v7.875c0 .08.065.146.146.146h1.458c.08 0 .146-.066.146-.146V8.313c0-.08.065-.146.146-.146H8.75v-1.75H5.396a.146.146 0 0 1-.146-.146V4.813c0-.08.065-.146.146-.146h3.208c.08 0 .146.065.146.146v1.604h1.604c.08 0 .146-.065.146-.146V3.063a.146.146 0 0 0-.146-.146z" fill="var(--secondary-1)"/></svg>"""
+
+docs = """<svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.558 14.333c.38 0 .717.001 1.034-.111q.098-.035.191-.08c.304-.146.541-.385.81-.656l3.188-3.205c.312-.312.588-.59.737-.952s.15-.755.149-1.197V5.816c0-1.188 0-2.146-.101-2.899-.105-.782-.328-1.44-.849-1.963S9.542.206 8.764.101C8.015 0 7.062 0 5.881 0S3.65 0 2.902.101C2.124.206 1.47.431.95.954S.205 2.135.101 2.917C0 3.67 0 4.627 0 5.816v3.049c0 1.022 0 1.847.076 2.503.079.678.247 1.26.642 1.752q.218.272.489.492c.49.397 1.068.565 1.743.645.653.076 1.591.076 2.608.076m4.763-5.502c-.038.092-.108.179-.52.593L6.73 12.51c-.356.357-.45.446-.57.482 0-.908 0-1.345.077-1.922.08-.6.253-1.105.654-1.507.401-.4.907-.573 1.507-.654.578-.078 1.01-.078 1.922-.078M9 3.833a.5.5 0 0 1-.5.5H3.167a.5.5 0 1 1 0-1H8.5a.5.5 0 0 1 .5.5M5.833 7a.5.5 0 0 0 0-1H3.167a.5.5 0 1 0 0 1z" fill="currentColor"/></svg>"""
+
+curved_line = """<svg width="27" height="35" viewBox="0 0 27 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.667 2.667a2.667 2.667 0 1 1-5.334 0 2.667 2.667 0 0 1 5.334 0M1 34.167a.5.5 0 0 1-1 0zm23-31.5v.5H12.5v-1H24zm-23.5 12H1v19.5H0v-19.5zm12-12v.5C6.149 3.167 1 8.316 1 14.667H0c0-6.904 5.596-12.5 12.5-12.5z" fill="currentColor"/></svg>"""
+
 ICONS = {
     # Socials
     "github": github,
@@ -663,6 +685,15 @@
     "sun_footer": sun_footer,
     "computer_footer": computer_footer,
     "circle": circle,
+    "grok": grok,
+    "claude": claude,
+    "openai": openai,
+    "gemini": gemini,
+    "arrow_turn": arrow_turn,
+    "reflex_small": reflex_small,
+    "docs": docs,
+    "cursor": cursor,
+    "curved_line": curved_line,
 }
 
 

packages/reflex-site-shared/src/reflex_site_shared/constants.py

@@ -34,7 +34,7 @@
     "REFLEX_DEV_WEB_GENERAL_FORM_FEEDBACK_WEBHOOK_URL", ""
 )
 RECENT_BLOGS_API_URL: str = os.environ.get(
-    "RECENT_BLOGS_API_URL", "https://reflex.dev/api/v1/recent-blogs"
+    "RECENT_BLOGS_API_URL", "https://reflex.dev/blog-api/api/v1/recent-blogs"
 )
 
 

packages/reflex-site-shared/src/reflex_site_shared/pages/page404.py

@@ -4,12 +4,6 @@
 from reflex_site_shared.components.blocks.flexdown import markdown_with_shiki
 from reflex_site_shared.templates.webpage import webpage
 
-contents = f"""
-# Page Not Found
-
-The page at `{rx.State.router.page.raw_path}` doesn't exist.
-"""
-
 
 @webpage(path="/404", title="Page Not Found · Reflex.dev", add_as_page=False)
 def page404():
@@ -19,6 +13,11 @@ def page404():
         The component.
     """
     return rx.box(
-        markdown_with_shiki(contents),
+        markdown_with_shiki("# Page Not Found"),
+        rx.el.p(
+            "The page at ",
+            rx.code(rx.State.router.page.raw_path, class_name="code-style"),
+            " doesn't exist.",
+        ),
         class_name="h-[80vh] w-full flex flex-col items-center justify-center",
     )

packages/reflex-site-shared/src/reflex_site_shared/views/cta_card.py

@@ -18,7 +18,7 @@ def cta_card():
     return rx.el.div(
         rx.el.div(
             rx.el.span(
-                "The Unified Platform to Build and Scale Enterprise Apps",
+                "The Platform to Build and Scale Enterprise Apps",
                 class_name="text-slate-12 lg:text-3xl text-2xl font-[575]",
             ),
             rx.el.span(
@@ -43,13 +43,13 @@ def cta_card():
                 ),
                 class_name="flex flex-row gap-4 items-center",
             ),
-            class_name="flex flex-col gap-6 justify-center max-w-[24.5rem]",
+            class_name="flex flex-col gap-6 justify-center max-w-[29.25rem]",
         ),
         rx.image(
-            f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/cta.svg",
+            f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/cta_gray_lines_2.svg",
             class_name="w-auto h-full pointer-events-none",
             loading="lazy",
             alt="CTA Card",
         ),
-        class_name="flex flex-row justify-between max-w-(--docs-layout-max-width) mx-auto w-full bg-white/96 dark:bg-m-slate-11 backdrop-blur-[16px] rounded-xl relative overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03)] dark:shadow-none dark:border dark:border-m-slate-9 pl-16 max-lg:hidden mb-12 mt-24",
+        class_name="flex flex-row justify-between max-w-(--landing-layout-max-width) mx-auto w-full bg-white/96 dark:bg-m-slate-11 backdrop-blur-[16px] rounded-xl relative overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03)] dark:shadow-none dark:border dark:border-m-slate-9 pl-16 max-lg:hidden mb-12 mt-24",
     )