fix: update aspect ratios in ai-landing-card component

documentation/src/refine-theme/ai-landing-card.tsx

@@ -1,17 +1,20 @@
+import { useColorMode } from "@docusaurus/theme-common";
 import clsx from "clsx";
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
+
 export const AiLandingCard = ({
   imageUrl,
   title,
   description,
+  imageClassName,
 }: {
   imageUrl: {
     dark: string;
     light: string;
   };
   title: string;
   description: string;
+  imageClassName?: string;
 }) => {
   const { colorMode } = useColorMode();
   const isDarkTheme = colorMode === "dark";
@@ -47,7 +50,11 @@ export const AiLandingCard = ({
               "h-auto",
               "w-full",
               "max-w-[624px]",
-              "aspect-[352/208]",
+              "aspect-[576/336]",
+              "landing-sm:aspect-[624/364]",
+              "landing-md:aspect-[404/236]",
+              "landing-lg:aspect-[556/288]",
+              imageClassName,
             )}
           />
         </div>

documentation/src/refine-theme/ai-landing-hero.tsx

@@ -72,7 +72,7 @@ export const AiLandingHero = ({
           >
             AI Coding agents
           </div>
-          <div>for building web apps.</div>
+          <div>for building internal software.</div>
         </h2>
         <p
           className={clsx(
@@ -89,6 +89,7 @@ export const AiLandingHero = ({
         <JoinWaitlist className={clsx("mt-6 landing-md:mt-12", "mx-0")} />
       </div>
       <video
+        key={colorMode}
         className={clsx(
           "z-[2]",
           "absolute",
@@ -101,15 +102,29 @@ export const AiLandingHero = ({
           "landing-lg:w-[556px]",
           "object-cover",
         )}
-        src={
-          isDarkTheme
-            ? "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-dark.webm"
-            : "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-light.webm"
-        }
-        autoPlay
-        muted
-        loop
-      />
+        autoPlay={true}
+        muted={true}
+        loop={true}
+        playsInline={true}
+        controls={false}
+      >
+        <source
+          type='video/mp4; codecs="hvc1"'
+          src={
+            isDarkTheme
+              ? "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-dark.mov"
+              : "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-light.mov"
+          }
+        />
+        <source
+          type="video/webm;"
+          src={
+            isDarkTheme
+              ? "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-dark.webm"
+              : "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-light.webm"
+          }
+        />
+      </video>
     </div>
   );
 };

documentation/src/refine-theme/ai-landing-manage-with-ease-scale-with-confidence.tsx

@@ -104,6 +104,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({
             }}
             title="Best developer experience"
             description="Web based IDE featuring blazing fast live previews, file editor and powerful conversation tools including rollbacks."
+            imageClassName={clsx("landing-lg:!aspect-[352/208]")}
           />
           <AiLandingCard
             imageUrl={{
@@ -113,6 +114,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({
             }}
             title="1-Click deployments"
             description="Deploy your project to Netlify with single click, without requiring a Netlify account or prior setup."
+            imageClassName={clsx("landing-lg:!aspect-[352/208]")}
           />
           <AiLandingCard
             imageUrl={{
@@ -122,6 +124,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({
             }}
             title="Your preference of UI framework"
             description="Works with MUI or Ant Design. Tailwind support coming soon."
+            imageClassName={clsx("landing-lg:!aspect-[352/208]")}
           />
         </div>
       </div>

documentation/src/refine-theme/ai-landing-step-three.css

@@ -49,6 +49,7 @@
   color: #26d97f;
   transform: translateX(110%);
   opacity: 0;
+  will-change: transform, opacity;
 }
 
 .ai-landing-step-three-header b::before {
@@ -101,6 +102,7 @@
   border-radius: 2px;
   background: rgba(108, 119, 147, 0.1);
   transition: top 1s ease-in-out;
+  will-change: top;
 }
 
 .ai-landing-step-three-table
@@ -196,6 +198,7 @@
   b.ai-landing-step-three-border-radius-changed {
   border-radius: 2px 2px 2px 2px;
   animation: ai-landing-step-three-borderradius 1s ease-out forwards;
+  will-change: border-radius;
 }
 
 .ai-landing-step-three-table
@@ -204,6 +207,7 @@
   opacity: 0;
   text-align: right;
   overflow: hidden;
+  will-change: width, opacity;
 }
 
 .ai-landing-step-three-table
@@ -250,6 +254,7 @@
   left: 0;
   right: 0;
   top: calc(114px + 304px - 20px);
+  will-change: transform, opacity;
 }
 
 .ai-landing-step-three-directions b {
@@ -267,6 +272,7 @@
   color: #26d97f;
   transform: translateX(-50%) translateY(100%);
   opacity: 0;
+  will-change: transform, opacity;
 }
 
 .ai-landing-step-three-directions b.ai-landing-step-three-direction-up {

documentation/src/refine-theme/ai-landing-step-three.tsx

@@ -12,6 +12,65 @@ type Row = {
   amountValue: number;
 };
 
+const initialRows: Row[] = [
+  {
+    id: "144526",
+    customer: "Rita McClure",
+    amount: "$3.600,00",
+    date: "25.03.2025",
+    amountValue: 3600,
+  },
+  {
+    id: "169220",
+    customer: "Michael Ferry",
+    amount: "$4.000,00",
+    date: "20.03.2025",
+    amountValue: 4000,
+  },
+  {
+    id: "136388",
+    customer: "Jerome Gerhold",
+    amount: "$4.800,00",
+    date: "12.03.2025",
+    amountValue: 4800,
+  },
+  {
+    id: "157345",
+    customer: "Janis Ferry",
+    amount: "$4.250,00",
+    date: "21.03.2025",
+    amountValue: 4250,
+  },
+  {
+    id: "119065",
+    customer: "Hugo Hackett",
+    amount: "$2.250,00",
+    date: "16.03.2025",
+    amountValue: 2250,
+  },
+  {
+    id: "181854",
+    customer: "Toby Haag",
+    amount: "$3.750,00",
+    date: "27.02.2025",
+    amountValue: 3750,
+  },
+  {
+    id: "124806",
+    customer: "Nichole Lueilwitz",
+    amount: "$1.500,00",
+    date: "24.03.2025",
+    amountValue: 1500,
+  },
+  {
+    id: "197532",
+    customer: "Martin Franci",
+    amount: "$3.900,00",
+    date: "11.03.2025",
+    amountValue: 3900,
+  },
+];
+
 export const AiLandingStepThree = () => {
   const { colorMode } = useColorMode();
   const { sm, md, lg, xl } = useTWBreakpoints({ variant: "landing" });
@@ -22,65 +81,6 @@ export const AiLandingStepThree = () => {
   const [showActionsColumn, setShowActionsColumn] = useState(false);
   const [borderRadiusChanged, setBorderRadiusChanged] = useState(false);
 
-  const initialRows: Row[] = [
-    {
-      id: "144526",
-      customer: "Rita McClure",
-      amount: "$3.600,00",
-      date: "25.03.2025",
-      amountValue: 3600,
-    },
-    {
-      id: "169220",
-      customer: "Michael Ferry",
-      amount: "$4.000,00",
-      date: "20.03.2025",
-      amountValue: 4000,
-    },
-    {
-      id: "136388",
-      customer: "Jerome Gerhold",
-      amount: "$4.800,00",
-      date: "12.03.2025",
-      amountValue: 4800,
-    },
-    {
-      id: "157345",
-      customer: "Janis Ferry",
-      amount: "$4.250,00",
-      date: "21.03.2025",
-      amountValue: 4250,
-    },
-    {
-      id: "119065",
-      customer: "Hugo Hackett",
-      amount: "$2.250,00",
-      date: "16.03.2025",
-      amountValue: 2250,
-    },
-    {
-      id: "181854",
-      customer: "Toby Haag",
-      amount: "$3.750,00",
-      date: "27.02.2025",
-      amountValue: 3750,
-    },
-    {
-      id: "124806",
-      customer: "Nichole Lueilwitz",
-      amount: "$1.500,00",
-      date: "24.03.2025",
-      amountValue: 1500,
-    },
-    {
-      id: "197532",
-      customer: "Martin Franci",
-      amount: "$3.900,00",
-      date: "11.03.2025",
-      amountValue: 3900,
-    },
-  ];
-
   const [rows, setRows] = useState<Row[]>(initialRows);
 
   useEffect(() => {