docs: add varied improvements (#5942)

apps/docs/src/components/widgets/header.tsx

@@ -12,7 +12,7 @@ export const WidgetHeader = (props: WidgetHeaderProps) => {
       title={props.widget.name}
       description={props.widget.description}
       icon={
-        <div className="w-12 h-12 flex justify-center items-center bg-red-500 bg-opacity-10 rounded-md">
+        <div className="w-12 h-12 flex justify-center items-center bg-red-500/10 rounded-md">
           <props.widget.icon size={32} stroke={1.5} className="stroke-red-500" />
         </div>
       }