fix(docs): restore media centering and full-width intro image

Author: waleedlatif1

apps/docs/components/ui/image.tsx

@@ -25,7 +25,8 @@ export function Image({
     <NextImage
       className={cn(
         'overflow-hidden rounded-xl border border-border object-cover',
-        enableLightbox && 'transition-opacity group-hover:opacity-95',
+        enableLightbox &&
+          'cursor-pointer transition-opacity group-hover:opacity-95 group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2',
         className
       )}
       alt={alt}
@@ -41,7 +42,7 @@ export function Image({
           type='button'
           onClick={openLightbox}
           aria-label={`Open ${alt} in media viewer`}
-          className='group block w-full cursor-pointer rounded-xl p-0 text-left'
+          className='group contents'
         >
           {image}
         </button>

apps/docs/components/ui/video.tsx

@@ -45,7 +45,11 @@ export function Video({
       playsInline={playsInline}
       width={width}
       height={height}
-      className={cn(className, enableLightbox && 'transition-opacity group-hover:opacity-[0.97]')}
+      className={cn(
+        className,
+        enableLightbox &&
+          'cursor-pointer transition-opacity group-hover:opacity-[0.97] group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2'
+      )}
       src={getAssetUrl(src)}
     />
   )
@@ -57,7 +61,7 @@ export function Video({
           type='button'
           onClick={openLightbox}
           aria-label={`Open ${src} in media viewer`}
-          className='group block w-full cursor-pointer rounded-xl p-0 text-left'
+          className='group contents'
         >
           {video}
         </button>

apps/docs/content/docs/en/introduction/index.mdx

@@ -10,13 +10,13 @@ import { FAQ } from '@/components/ui/faq'
 
 Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Create agents visually with the workflow builder, conversationally through Mothership, or programmatically with the API. Connect AI models, databases, APIs, and 1,000+ business tools to build agents that automate real work — from chatbots and compliance agents to data pipelines and ITSM automation.
 
-<div className="flex justify-center">
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
   <Image
     src="/static/introduction.png"
     alt="Sim visual workflow canvas"
     width={700}
     height={450}
-    className="my-6"
+    className="w-full"
   />
 </div>