Skip to content

Commit f98a7de

Browse files
quanruquanru
authored
feat: adjust platform card title placement (#1701)
* feat(site): adjust platform card title placement * feat(banner): replace static images with video banners for light and dark themes * feat(banner): update video sources and posters for light and dark themes * fix(icon): remove playback indicators from playback report SVG
1 parent 4af51bf commit f98a7de

File tree

5 files changed

+39
-31
lines changed

5 files changed

+39
-31
lines changed

‎apps/site/docs/public/banner-dark.png‎

-171 KB
Binary file not shown.

‎apps/site/docs/public/banner-light.png‎

-62.9 KB
Binary file not shown.

‎apps/site/docs/public/icon/playback-report.svg‎

Lines changed: 1 addition & 3 deletions
Loading

‎apps/site/theme/components/Banner.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,19 +69,29 @@ export function Banner() {
6969
{/* Right Image */}
7070
<div className="w-full lg:w-[786px] flex justify-center lg:justify-end">
7171
<div className="dark:hidden w-full h-full flex items-center justify-center">
72-
<img
73-
src="/banner-light.png"
74-
alt="Midscene banner"
72+
<video
73+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene-banner-light.mp4"
74+
poster="https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene-banner-light.png"
7575
className="w-full max-w-[780px]"
76-
loading="lazy"
76+
autoPlay
77+
muted
78+
loop
79+
playsInline
80+
controls={false}
81+
preload="auto"
7782
/>
7883
</div>
7984
<div className="hidden dark:flex w-full h-full items-center justify-center">
80-
<img
81-
src="/banner-dark.png"
82-
alt="Midscene banner"
85+
<video
86+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene-banner-dark.mp4"
87+
poster="https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene-banner-dark.png"
8388
className="w-full max-w-[780px]"
84-
loading="lazy"
89+
autoPlay
90+
muted
91+
loop
92+
playsInline
93+
controls={false}
94+
preload="auto"
8595
/>
8696
</div>
8797
</div>

‎apps/site/theme/components/FeatureSections.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,9 @@ export function FeatureSections() {
6464
{/* Web Card */}
6565
<TiltCard
6666
href={tUrl(t('platformWebLink'))}
67-
className="w-full md:w-[381px] md:h-[368px] flex flex-col gap-y-4 justify-between group cursor-pointer"
67+
className="w-full md:w-[381px] md:h-[368px] flex flex-col group cursor-pointer"
6868
>
69-
<p className="font-sans font-medium text-xl md:text-2xl leading-6 text-black dark:text-white">
70-
{t('platformWeb')}
71-
</p>
72-
<div className="flex flex-col gap-[17px]">
69+
<div className="flex flex-col gap-[17px] h-full">
7370
<div className="rounded-2xl w-full h-[120px] md:h-[264px] flex items-center justify-center group-hover:bg-gray-200 dark:group-hover:bg-[#252525] transition-all duration-200 border-2 border-transparent group-hover:border-[#0555FF] overflow-hidden">
7471
<div
7572
className="dark:hidden w-full h-full flex items-center justify-center bg-cover bg-center rounded-2xl"
@@ -100,6 +97,9 @@ export function FeatureSections() {
10097
/>
10198
</div>
10299
</div>
100+
<p className="font-sans font-medium text-xl md:text-2xl leading-6 text-black dark:text-white">
101+
{t('platformWeb')}
102+
</p>
103103
<div className="font-sans text-sm md:text-base font-normal leading-5 md:leading-6 text-black/70 dark:text-white/70">
104104
{t('platformWebDesc')}
105105
</div>
@@ -109,12 +109,9 @@ export function FeatureSections() {
109109
{/* iOS Card */}
110110
<TiltCard
111111
href={tUrl(t('platformIOSLink'))}
112-
className="w-full md:w-[381px] md:h-[368px] flex flex-col gap-4 md:gap-6 group cursor-pointer"
112+
className="w-full md:w-[381px] md:h-[368px] flex flex-col group cursor-pointer"
113113
>
114-
<p className="font-sans text-xl md:text-2xl font-medium leading-6 text-black dark:text-white">
115-
{t('platformIOS')}
116-
</p>
117-
<div className="flex flex-col gap-[17px]">
114+
<div className="flex flex-col gap-[17px] h-full">
118115
<div className="rounded-2xl w-full h-[120px] md:h-[264px] flex justify-center items-center group-hover:bg-gray-200 dark:group-hover:bg-[#252525] transition-all duration-200 border-2 border-transparent group-hover:border-[#0555FF] overflow-hidden">
119116
<div
120117
className="dark:hidden w-full h-full flex items-center justify-center bg-cover bg-center rounded-2xl"
@@ -145,6 +142,9 @@ export function FeatureSections() {
145142
/>
146143
</div>
147144
</div>
145+
<p className="font-sans text-xl md:text-2xl font-medium leading-6 text-black dark:text-white">
146+
{t('platformIOS')}
147+
</p>
148148
<div className="text-sm md:text-base font-normal font-sans leading-5 md:leading-6 text-black/70 dark:text-white/70">
149149
{t('platformIOSDesc')}
150150
</div>
@@ -157,12 +157,9 @@ export function FeatureSections() {
157157
{/* Android Card */}
158158
<TiltCard
159159
href={tUrl(t('platformAndroidLink'))}
160-
className="w-full md:w-[381px] md:h-[368px] flex flex-col gap-y-4 justify-between group cursor-pointer"
160+
className="w-full md:w-[381px] md:h-[368px] flex flex-col group cursor-pointer"
161161
>
162-
<p className="font-sans font-medium text-xl md:text-2xl leading-6 text-black dark:text-white">
163-
{t('platformAndroid')}
164-
</p>
165-
<div className="flex flex-col gap-y-[17px]">
162+
<div className="flex flex-col gap-y-[17px] h-full">
166163
<div className="rounded-2xl w-full h-[120px] md:h-[264px] flex justify-center items-center group-hover:bg-gray-200 dark:group-hover:bg-[#252525] transition-all duration-200 border-2 border-transparent group-hover:border-[#0555FF] overflow-hidden">
167164
<div
168165
className="dark:hidden w-full h-full flex items-center justify-center bg-cover bg-center rounded-2xl"
@@ -193,6 +190,9 @@ export function FeatureSections() {
193190
/>
194191
</div>
195192
</div>
193+
<p className="font-sans font-medium text-xl md:text-2xl leading-6 text-black dark:text-white">
194+
{t('platformAndroid')}
195+
</p>
196196
<div className="font-sans text-sm md:text-base font-normal leading-5 md:leading-6 text-black/70 dark:text-white/70">
197197
{t('platformAndroidDesc')}
198198
</div>
@@ -202,12 +202,9 @@ export function FeatureSections() {
202202
{/* Any Interface Card */}
203203
<TiltCard
204204
href={tUrl(t('platformAnyInterfaceLink'))}
205-
className="w-full md:w-[381px] md:h-[368px] flex flex-col gap-y-4 justify-between group cursor-pointer"
205+
className="w-full md:w-[381px] md:h-[368px] flex flex-col group cursor-pointer"
206206
>
207-
<p className="font-sans font-medium text-xl md:text-2xl leading-6 text-black dark:text-white">
208-
{t('platformAnyInterface')}
209-
</p>
210-
<div className="flex flex-col gap-y-[17px]">
207+
<div className="flex flex-col gap-y-[17px] h-full">
211208
<div className="rounded-2xl w-full h-[120px] md:h-[264px] flex justify-center items-center group-hover:bg-gray-200 dark:group-hover:bg-[#252525] transition-all duration-200 border-2 border-transparent group-hover:border-[#0555FF] overflow-hidden">
212209
<div
213210
className="dark:hidden w-full h-full flex items-center justify-center bg-cover bg-center rounded-2xl"
@@ -238,6 +235,9 @@ export function FeatureSections() {
238235
/>
239236
</div>
240237
</div>
238+
<p className="font-sans font-medium text-xl md:text-2xl leading-6 text-black dark:text-white">
239+
{t('platformAnyInterface')}
240+
</p>
241241
<div className="font-sans text-sm md:text-base font-normal leading-5 md:leading-6 text-black/70 dark:text-white/70">
242242
{t('platformAnyInterfaceDesc')}
243243
</div>

0 commit comments

Comments
 (0)