Skip to content

Commit d9585d9

Browse files
alicanerdurmazalicanerdurmaz
authored
fix: update aspect ratios in ai-landing-card component (#6747)
1 parent 917c223 commit d9585d9

File tree

5 files changed

+102
-71
lines changed

5 files changed

+102
-71
lines changed

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1+
import { useColorMode } from "@docusaurus/theme-common";
12
import clsx from "clsx";
23
import React from "react";
3-
import { useColorMode } from "@docusaurus/theme-common";
4+
45
export const AiLandingCard = ({
56
imageUrl,
67
title,
78
description,
9+
imageClassName,
810
}: {
911
imageUrl: {
1012
dark: string;
1113
light: string;
1214
};
1315
title: string;
1416
description: string;
17+
imageClassName?: string;
1518
}) => {
1619
const { colorMode } = useColorMode();
1720
const isDarkTheme = colorMode === "dark";
@@ -47,7 +50,11 @@ export const AiLandingCard = ({
4750
"h-auto",
4851
"w-full",
4952
"max-w-[624px]",
50-
"aspect-[352/208]",
53+
"aspect-[576/336]",
54+
"landing-sm:aspect-[624/364]",
55+
"landing-md:aspect-[404/236]",
56+
"landing-lg:aspect-[556/288]",
57+
imageClassName,
5158
)}
5259
/>
5360
</div>

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

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const AiLandingHero = ({
7272
>
7373
AI Coding agents
7474
</div>
75-
<div>for building web apps.</div>
75+
<div>for building internal software.</div>
7676
</h2>
7777
<p
7878
className={clsx(
@@ -89,6 +89,7 @@ export const AiLandingHero = ({
8989
<JoinWaitlist className={clsx("mt-6 landing-md:mt-12", "mx-0")} />
9090
</div>
9191
<video
92+
key={colorMode}
9293
className={clsx(
9394
"z-[2]",
9495
"absolute",
@@ -101,15 +102,29 @@ export const AiLandingHero = ({
101102
"landing-lg:w-[556px]",
102103
"object-cover",
103104
)}
104-
src={
105-
isDarkTheme
106-
? "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-dark.webm"
107-
: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-light.webm"
108-
}
109-
autoPlay
110-
muted
111-
loop
112-
/>
105+
autoPlay={true}
106+
muted={true}
107+
loop={true}
108+
playsInline={true}
109+
controls={false}
110+
>
111+
<source
112+
type='video/mp4; codecs="hvc1"'
113+
src={
114+
isDarkTheme
115+
? "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-dark.mov"
116+
: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-light.mov"
117+
}
118+
/>
119+
<source
120+
type="video/webm;"
121+
src={
122+
isDarkTheme
123+
? "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-dark.webm"
124+
: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/ai-landing-page/ai-hero-video-light.webm"
125+
}
126+
/>
127+
</video>
113128
</div>
114129
);
115130
};

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({
104104
}}
105105
title="Best developer experience"
106106
description="Web based IDE featuring blazing fast live previews, file editor and powerful conversation tools including rollbacks."
107+
imageClassName={clsx("landing-lg:!aspect-[352/208]")}
107108
/>
108109
<AiLandingCard
109110
imageUrl={{
@@ -113,6 +114,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({
113114
}}
114115
title="1-Click deployments"
115116
description="Deploy your project to Netlify with single click, without requiring a Netlify account or prior setup."
117+
imageClassName={clsx("landing-lg:!aspect-[352/208]")}
116118
/>
117119
<AiLandingCard
118120
imageUrl={{
@@ -122,6 +124,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({
122124
}}
123125
title="Your preference of UI framework"
124126
description="Works with MUI or Ant Design. Tailwind support coming soon."
127+
imageClassName={clsx("landing-lg:!aspect-[352/208]")}
125128
/>
126129
</div>
127130
</div>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
color: #26d97f;
5050
transform: translateX(110%);
5151
opacity: 0;
52+
will-change: transform, opacity;
5253
}
5354

5455
.ai-landing-step-three-header b::before {
@@ -101,6 +102,7 @@
101102
border-radius: 2px;
102103
background: rgba(108, 119, 147, 0.1);
103104
transition: top 1s ease-in-out;
105+
will-change: top;
104106
}
105107

106108
.ai-landing-step-three-table
@@ -196,6 +198,7 @@
196198
b.ai-landing-step-three-border-radius-changed {
197199
border-radius: 2px 2px 2px 2px;
198200
animation: ai-landing-step-three-borderradius 1s ease-out forwards;
201+
will-change: border-radius;
199202
}
200203

201204
.ai-landing-step-three-table
@@ -204,6 +207,7 @@
204207
opacity: 0;
205208
text-align: right;
206209
overflow: hidden;
210+
will-change: width, opacity;
207211
}
208212

209213
.ai-landing-step-three-table
@@ -250,6 +254,7 @@
250254
left: 0;
251255
right: 0;
252256
top: calc(114px + 304px - 20px);
257+
will-change: transform, opacity;
253258
}
254259

255260
.ai-landing-step-three-directions b {
@@ -267,6 +272,7 @@
267272
color: #26d97f;
268273
transform: translateX(-50%) translateY(100%);
269274
opacity: 0;
275+
will-change: transform, opacity;
270276
}
271277

272278
.ai-landing-step-three-directions b.ai-landing-step-three-direction-up {

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

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,65 @@ type Row = {
1212
amountValue: number;
1313
};
1414

15+
const initialRows: Row[] = [
16+
{
17+
id: "144526",
18+
customer: "Rita McClure",
19+
amount: "$3.600,00",
20+
date: "25.03.2025",
21+
amountValue: 3600,
22+
},
23+
{
24+
id: "169220",
25+
customer: "Michael Ferry",
26+
amount: "$4.000,00",
27+
date: "20.03.2025",
28+
amountValue: 4000,
29+
},
30+
{
31+
id: "136388",
32+
customer: "Jerome Gerhold",
33+
amount: "$4.800,00",
34+
date: "12.03.2025",
35+
amountValue: 4800,
36+
},
37+
{
38+
id: "157345",
39+
customer: "Janis Ferry",
40+
amount: "$4.250,00",
41+
date: "21.03.2025",
42+
amountValue: 4250,
43+
},
44+
{
45+
id: "119065",
46+
customer: "Hugo Hackett",
47+
amount: "$2.250,00",
48+
date: "16.03.2025",
49+
amountValue: 2250,
50+
},
51+
{
52+
id: "181854",
53+
customer: "Toby Haag",
54+
amount: "$3.750,00",
55+
date: "27.02.2025",
56+
amountValue: 3750,
57+
},
58+
{
59+
id: "124806",
60+
customer: "Nichole Lueilwitz",
61+
amount: "$1.500,00",
62+
date: "24.03.2025",
63+
amountValue: 1500,
64+
},
65+
{
66+
id: "197532",
67+
customer: "Martin Franci",
68+
amount: "$3.900,00",
69+
date: "11.03.2025",
70+
amountValue: 3900,
71+
},
72+
];
73+
1574
export const AiLandingStepThree = () => {
1675
const { colorMode } = useColorMode();
1776
const { sm, md, lg, xl } = useTWBreakpoints({ variant: "landing" });
@@ -22,65 +81,6 @@ export const AiLandingStepThree = () => {
2281
const [showActionsColumn, setShowActionsColumn] = useState(false);
2382
const [borderRadiusChanged, setBorderRadiusChanged] = useState(false);
2483

25-
const initialRows: Row[] = [
26-
{
27-
id: "144526",
28-
customer: "Rita McClure",
29-
amount: "$3.600,00",
30-
date: "25.03.2025",
31-
amountValue: 3600,
32-
},
33-
{
34-
id: "169220",
35-
customer: "Michael Ferry",
36-
amount: "$4.000,00",
37-
date: "20.03.2025",
38-
amountValue: 4000,
39-
},
40-
{
41-
id: "136388",
42-
customer: "Jerome Gerhold",
43-
amount: "$4.800,00",
44-
date: "12.03.2025",
45-
amountValue: 4800,
46-
},
47-
{
48-
id: "157345",
49-
customer: "Janis Ferry",
50-
amount: "$4.250,00",
51-
date: "21.03.2025",
52-
amountValue: 4250,
53-
},
54-
{
55-
id: "119065",
56-
customer: "Hugo Hackett",
57-
amount: "$2.250,00",
58-
date: "16.03.2025",
59-
amountValue: 2250,
60-
},
61-
{
62-
id: "181854",
63-
customer: "Toby Haag",
64-
amount: "$3.750,00",
65-
date: "27.02.2025",
66-
amountValue: 3750,
67-
},
68-
{
69-
id: "124806",
70-
customer: "Nichole Lueilwitz",
71-
amount: "$1.500,00",
72-
date: "24.03.2025",
73-
amountValue: 1500,
74-
},
75-
{
76-
id: "197532",
77-
customer: "Martin Franci",
78-
amount: "$3.900,00",
79-
date: "11.03.2025",
80-
amountValue: 3900,
81-
},
82-
];
83-
8484
const [rows, setRows] = useState<Row[]>(initialRows);
8585

8686
useEffect(() => {

0 commit comments

Comments
 (0)