feat: polish release v2 experience (#6800)

apps/docs/src/components/pages/home/drag-and-drop/drag-and-drop-showcase.tsx

@@ -18,7 +18,16 @@ export const DragAndDropShowcase = () => {
           className={"rounded-3xl overflow-hidden border-8 border-red-500 border-solid"}
           style={{ aspectRatio: "17.6/9" }}
         >
-          <video className={"w-full"} src={video} autoPlay loop muted />
+          <video
+            className={"w-full"}
+            src={video}
+            controls
+            playsInline
+            preload="metadata"
+            aria-label="Silent demonstration of moving and resizing Homarr dashboard widgets"
+          >
+            <track kind="captions" src="/media/homepage-drag-and-drop.vtt" srcLang="en" label="English" />
+          </video>
         </div>
       </SectionContainer>
     </div>

apps/docs/src/components/pages/home/features/features.tsx

@@ -59,7 +59,7 @@ function FeatureComponent(props: Feature) {
           <props.icon size={40} />
         </div>
         <div>
-          <h3 className="text-2xl font-extrabold text-gray-700 dark:text-gray-300 m-0">{props.title}</h3>
+          <h2 className="text-2xl font-extrabold text-gray-700 dark:text-gray-300 m-0">{props.title}</h2>
           <p className="mb-0 text-base text-gray-500 dark:text-gray-400">{props.content}</p>
         </div>
       </div>

apps/docs/src/components/pages/home/hero/hero.tsx

@@ -49,11 +49,11 @@ export default function HomeHero() {
             <Link
               data-attr="Redirect to PikaPods"
               className={`button bg-neutral-900 button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800`}
-              to="https://www.pikapods.com/pods?run=homarr-v1"
+              to="https://www.pikapods.com/pods?run=homarr"
             >
               <div className={"flex items-center gap-5"}>
                 <img src={"/img/pictures/partner/pika-pods.svg"} alt={"Pika Pods logo"} height={20} />
-                <span className={"dark:text-gray-200"}>Host from $2.3/month</span>
+                <span className={"dark:text-gray-200"}>Host with PikaPods</span>
               </div>
             </Link>
           </div>

apps/docs/src/components/pages/home/integrations/available-integrations.tsx

@@ -24,7 +24,7 @@ export const AvailableIntegrations = () => {
               with tons of users, making Homarr reliable in big scale deployments too.
             </p>
           </div>
-          <div className={"rotate-12 w-1/2 hidden md:block argos-ignore"}>
+          <div className={"rotate-12 w-1/2 hidden md:block argos-ignore"} aria-hidden="true">
             <div className={"grid gap-12 grid-cols-3"}>
               {Array(countIconGroups)
                 .fill(0)
@@ -41,6 +41,7 @@ export const AvailableIntegrations = () => {
                           className={"rounded"}
                           key={`grid-column-${columnIndex}-scroll-1-${index}`}
                           src={icon}
+                          alt=""
                           width={50}
                           height={50}
                         />
@@ -52,6 +53,7 @@ export const AvailableIntegrations = () => {
                           className={"rounded"}
                           key={`grid-column-${columnIndex}-scroll-2-${index}`}
                           src={icon}
+                          alt=""
                           width={50}
                           height={50}
                         />