Refactor site header, heroes, and design system

components/dashboard/sidebar.tsx

@@ -32,7 +32,7 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
         <Link
           href={item.href}
           className={cn(
-            "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+            "flex items-center gap-3 rounded-nested px-3 py-2 text-sm transition-colors",
             item.active
               ? "bg-primary text-primary-foreground"
               : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -51,7 +51,7 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
   return (
     <div className="flex h-full flex-col bg-sidebar/40">
       <div className="flex items-center gap-3 px-4 py-5">
-        <div className="overflow-hidden rounded-xl border border-border/70 bg-background shadow-sm">
+        <div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={iconSrc || "/favicon.ico"}