Skip to content

Commit 53a4776

Browse files
suqin9suqin9
committed
Modify the style of the homepage, add hardware pages, and video tutorial pages
Signed-off-by: suqin9 <18851443631@163.com>
1 parent 6c444d9 commit 53a4776

File tree

17 files changed

+516
-137
lines changed

17 files changed

+516
-137
lines changed

‎docusaurus.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,16 @@ const config = {
157157
},
158158
{ to: "/case-studies", label: "Case Studies", position: "left" },
159159
{ to: "/partners", label: "Partners", position: "left"},
160+
{
161+
label: 'HardwareList',
162+
to: '/hardware-list',
163+
position: 'left',
164+
},
165+
{
166+
label: 'VideotTutorials',
167+
to: '/video-tutorials',
168+
position: 'left',
169+
},
160170
{
161171
type: "dropdown",
162172
label: "Community",

‎src/components/HardwareCard/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
3+
export default function HardwareCard({ name, image, description, link }) {
4+
return (
5+
<div
6+
className="hardware-card"
7+
onClick={() => window.open(link, "_blank")}
8+
>
9+
<img src={image} alt={name} className="hardware-image" />
10+
<div className="hardware-info">
11+
<h3>{name}</h3>
12+
<p>{description}</p>
13+
<a href={link} target="_blank" rel="noopener noreferrer">
14+
View More
15+
</a>
16+
</div>
17+
</div>
18+
);
19+
}

‎src/components/PartnerCard/index.js‎

Lines changed: 75 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,98 @@
11
import React, { useState } from 'react';
22

3-
export default function PartnerCard({ name, product, description, link }) {
4-
const [expanded, setExpanded] = useState(false);
3+
export default function PartnerCard({ name, logo, product, description, link }) {
4+
const [hovered, setHovered] = useState(false);
55

66
return (
77
<div
8+
onMouseEnter={() => setHovered(true)}
9+
onMouseLeave={() => setHovered(false)}
10+
onClick={() => window.open(link, '_blank')}
811
style={{
9-
border: '1px solid #e0e0e0',
10-
borderRadius: '12px',
11-
padding: '20px',
12+
position: 'relative',
13+
borderRadius: '20px',
14+
padding: '24px',
1215
margin: '10px',
1316
width: '100%',
14-
maxWidth: '400px',
15-
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
17+
maxWidth: '380px',
18+
height: hovered ? '360px' : '260px', // 加高
19+
background: 'rgba(255, 255, 255, 0.7)',
20+
backdropFilter: 'blur(12px)',
21+
WebkitBackdropFilter: 'blur(12px)',
22+
boxShadow: hovered
23+
? '0 16px 32px rgba(0, 0, 0, 0.15)'
24+
: '0 6px 12px rgba(0, 0, 0, 0.08)',
1625
display: 'flex',
1726
flexDirection: 'column',
18-
backgroundColor: '#fff',
27+
alignItems: 'center', //子元素居中
28+
justifyContent: 'flex-start',
29+
cursor: 'pointer',
30+
overflow: 'hidden',
31+
transition: 'all 0.4s cubic-bezier(0.22, 1, 0.36, 1)',
32+
transform: hovered ? 'scale(1.05)' : 'scale(1)',
1933
}}
2034
>
21-
<div>
22-
<h3 style={{ margin: '0 0 10px 0' }}>{name}</h3>
23-
<h4 style={{ margin: '0 0 10px 0', color: '#555' }}>{product}</h4>
24-
<p
35+
{/* Name */}
36+
<h3 style={{
37+
margin: '10px 0 5px 0',
38+
fontSize: '32px',
39+
fontWeight: '700',
40+
color: '#0084FF',
41+
textAlign: 'center',
42+
}}>
43+
{name}
44+
</h3>
45+
46+
{/* Logo图片 */}
47+
{logo && (
48+
<img
49+
src={logo}
50+
alt={`${name} logo`}
2551
style={{
26-
fontSize: '14px',
27-
color: '#666',
28-
lineHeight: '1.6',
29-
overflow: expanded ? 'visible' : 'hidden',
30-
display: '-webkit-box',
31-
WebkitLineClamp: expanded ? 'none' : 3,
32-
WebkitBoxOrient: 'vertical',
52+
width: '150px',
53+
height: '75px',
54+
objectFit: 'contain',
55+
margin: '5px 0', // 上下留空
3356
}}
34-
>
35-
{description}
36-
</p>
37-
{description.length > 120 && (
38-
<button
39-
onClick={() => setExpanded(!expanded)}
40-
style={{
41-
marginTop: '4px',
42-
background: 'none',
43-
border: 'none',
44-
color: '#0078e7',
45-
cursor: 'pointer',
46-
fontSize: '14px',
47-
padding: 0,
48-
}}
49-
>
50-
{expanded ? 'Collapse' : 'Expand'}
51-
</button>
52-
)}
53-
</div>
57+
/>
58+
)}
59+
60+
{/* Product */}
61+
<h4 style={{
62+
margin: '10px 0 0 0',
63+
fontSize: '16px',
64+
fontWeight: '400',
65+
color: '#000000',
66+
textAlign: 'center',
67+
}}>
68+
{product}
69+
</h4>
5470

55-
<div style={{ marginTop: '8px' }}>
56-
<a
57-
href={link}
58-
target="_blank"
59-
rel="noopener noreferrer"
71+
{/* 蒙版 */}
72+
{hovered && (
73+
<div
6074
style={{
61-
padding: '8px 16px',
62-
backgroundColor: '#0078e7',
75+
position: 'absolute',
76+
top: 0,
77+
left: 0,
78+
right: 0,
79+
bottom: 0,
80+
background: 'rgba(0, 0, 0, 0.7)',
6381
color: '#fff',
64-
textDecoration: 'none',
65-
borderRadius: '6px',
82+
display: 'flex',
83+
alignItems: 'center',
84+
justifyContent: 'center',
85+
padding: '20px',
86+
textAlign: 'center',
6687
fontSize: '14px',
88+
lineHeight: '1.8',
89+
overflowY: 'auto',
90+
borderRadius: '20px',
6791
}}
6892
>
69-
Visit Website
70-
</a>
71-
</div>
93+
{description}
94+
</div>
95+
)}
7296
</div>
7397
);
7498
}

‎src/components/VideoCard/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
3+
export default function VideoCard({ title, link, image }) {
4+
return (
5+
<div
6+
style={{
7+
borderRadius: '16px',
8+
overflow: 'hidden',
9+
backgroundColor: '#ffffff',
10+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
11+
transition: 'transform 0.3s ease',
12+
cursor: 'pointer',
13+
}}
14+
onClick={() => window.open(link, '_blank')}
15+
onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.03)')}
16+
onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
17+
>
18+
{image && (
19+
<img
20+
src={image}
21+
alt={title}
22+
style={{
23+
width: '100%',
24+
height: '160px',
25+
objectFit: 'cover',
26+
display: 'block',
27+
}}
28+
/>
29+
)}
30+
<div style={{ padding: '16px' }}>
31+
<h4 style={{ fontSize: '16px', fontWeight: 'bold', color: '#0078E7' }}>
32+
{title}
33+
</h4>
34+
<p style={{ fontSize: '14px', color: '#666', marginTop: '8px' }}>
35+
Click to watch
36+
</p>
37+
</div>
38+
</div>
39+
);
40+
}

‎src/components/about/index.js‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,39 @@ import "./styles.scss";
66
export default function About() {
77
return (
88
<SectionContainer className="aboutContainer">
9-
<div className={"row"}>
10-
<div className={"profile"}>
11-
<img className={"portrait"} src="img/avatar.png"></img>
12-
<div className={"portraitTitle"}>
13-
<h3 className={"name"}>KubeEdge</h3>
14-
<h3 className={"jobTitle"}>
9+
<div className="about-grid">
10+
{/* 左边部分：标题 + 描述 */}
11+
<div className="about-left">
12+
<div className="about-title">
13+
<h3 className="name">KubeEdge</h3>
14+
<h3 className="jobTitle">
15+
<Translate>Kubernetes Native Edge Computing Framework</Translate>
16+
</h3>
17+
</div>
18+
<div className="description">
19+
<p>
1520
<Translate>
16-
Kubernetes Native Edge Computing Framework
21+
KubeEdge is an open source system for extending native
22+
containerized application orchestration capabilities to hosts at
23+
Edge. It is built upon kubernetes and provides fundamental
24+
infrastructure support for network, application deployment and
25+
metadata synchronization between cloud and edge. KubeEdge is
26+
licensed under Apache 2.0 and free for personal or commercial use.
1727
</Translate>
18-
</h3>
28+
</p>
29+
<p>
30+
<Translate>
31+
Our goal is to make an open platform to enable Edge computing,
32+
extending native containerized application orchestration
33+
capabilities to hosts at Edge, which is built upon Kubernetes.
34+
</Translate>
35+
</p>
1936
</div>
2037
</div>
21-
<div className={"description"}>
22-
<p>
23-
<Translate>
24-
KubeEdge is an open source system for extending native
25-
containerized application orchestration capabilities to hosts at
26-
Edge. It is built upon kubernetes and provides fundamental
27-
infrastructure support for network, application deployment and
28-
metadata synchronization between cloud and edge. KubeEdge is
29-
licensed under Apache 2.0. and free for personal or commercial use
30-
absolutely. We welcome contributors!
31-
</Translate>
32-
</p>
33-
<p>
34-
<Translate>
35-
Our goal is to make an open platform to enable Edge computing,
36-
extending native containerized application orchestration
37-
capabilities to hosts at Edge, which is built upon kubernetes and
38-
provides fundamental infrastructure support for network, app
39-
deployment and metadata synchronization between cloud and edge.
40-
</Translate>
41-
</p>
38+
39+
{/* 右边部分：头像图片 */}
40+
<div className="about-right">
41+
<img className="portrait" src="img/avatar.png" alt="KubeEdge Logo" />
4242
</div>
4343
</div>
4444
</SectionContainer>

0 commit comments

Comments
 (0)