Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Improvements: Design Optimization for Homepage Components #682 #683

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+407 −240
Open

UI Improvements: Design Optimization for Homepage Components #682 #683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 26 additions & 30 deletions src/components/about/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,36 @@ import "./styles.scss";
export default function About() {
return (
<SectionContainer className="aboutContainer">
<div className={"row"}>
<div className={"profile"}>
<img className={"portrait"} src="img/avatar.png"></img>
<div className={"portraitTitle"}>
<h3 className={"name"}>KubeEdge</h3>
<h3 className={"jobTitle"}>
<div className="about-content">
{/* Left Side - Logo with Title & Tagline */}
<div className="logo-container">
<img
className="kubeedge-logo"
src="img/avatar.png"
alt="KubeEdge Logo"
/>
<h1 className="profile-name">KubeEdge</h1>
<h3 className="profile-title">
<Translate>Kubernetes Native Edge Computing Framework</Translate>
</h3>
</div>

{/* Right Side - Single Paragraph with Wider Layout */}
<div className="about-description">
<div className="text-box">
<p>
<Translate>
Kubernetes Native Edge Computing Framework
KubeEdge is an open-source system that extends Kubernetes'
native container orchestration capabilities to edge hosts. It
provides fundamental infrastructure for networking, application
deployment, and metadata synchronization between cloud and edge.
Our goal is to create an open platform for Edge computing,
extending containerized orchestration capabilities to edge hosts
while ensuring seamless synchronization between cloud and edge.
</Translate>
</h3>
</p>
</div>
</div>
<div className={"description"}>
<p>
<Translate>
KubeEdge is an open source system for extending native
containerized application orchestration capabilities to hosts at
Edge. It is built upon kubernetes and provides fundamental
infrastructure support for network, application deployment and
metadata synchronization between cloud and edge. KubeEdge is
licensed under Apache 2.0. and free for personal or commercial use
absolutely. We welcome contributors!
</Translate>
</p>
<p>
<Translate>
Our goal is to make an open platform to enable Edge computing,
extending native containerized application orchestration
capabilities to hosts at Edge, which is built upon kubernetes and
provides fundamental infrastructure support for network, app
deployment and metadata synchronization between cloud and edge.
</Translate>
</p>
</div>
</div>
</SectionContainer>
);
Expand Down
183 changes: 114 additions & 69 deletions src/components/about/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,122 @@
.aboutContainer {
background-color: rgb(247, 247, 247);

@media screen {
@media (max-width: 992px) {
.sectionContainerInner {
.row {
.profile {
flex: 0 0 100%;
max-width: 100%;
}
}
}
}
@media (max-width: 768px) {
.sectionContainerInner {
.row {
.profile {
flex: 0 0 100%;
max-width: 100%;
}
}
}
}
background: linear-gradient(
135deg,
#eef2f3,
#d1d8e0
); /* Soft gradient background */
padding: 5rem 2rem;
display: flex;
justify-content: center;
}

/* About Content */
.about-content {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
gap: 5rem;
max-width: 1200px; /* Increased max width */
}

/* Left Side - Logo with Title & Tagline */
.logo-container {
flex: 0.4;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.kubeedge-logo {
width: 200px; /* Increased Size */
height: 200px;
object-fit: contain;
transition: transform 0.3s ease-in-out;
}

/* Logo Hover Effect */
.kubeedge-logo:hover {
transform: scale(1.1);
}

/* Profile Text */
.profile-name {
font-size: 2.7rem;
font-weight: bold;
color: #2c3e50;
margin-top: 1rem;
}

.profile-title {
font-size: 1.3rem;
font-weight: 400;
color: #555;
}

/* Right Side - Wider Single Paragraph */
.about-description {
flex: 1;
display: flex;
justify-content: center;
max-width: 700px; /* Increased Width */
}

/* Text Box - Professional Styling */
.text-box {
background: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 15px;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.15);
font-size: 1.2rem;
color: #333;
line-height: 1.8;
font-family: "Inter", sans-serif; /* Professional font */
font-weight: 400;
text-align: justify;
max-width: 750px;
}

/* Dark Mode */
html[data-theme="dark"] {
.aboutContainer {
background: linear-gradient(135deg, #1c1e22, #2a2d33);
}

.profile-name {
color: #ddd;
}

.profile-title {
color: #bbb;
}

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
margin-right: -15px;
margin-left: -15px;

.profile {
flex: 0 0 33.333333%;
max-width: 33.333333%;
text-align: center;
padding: 0px 10px 30px;
position: relative;
}

.portrait {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
object-fit: cover;
}

.description {
flex: 0 0 66.666667%;
max-width: 66.666667%;
font-size: 1.2rem;
}

.name {
font-size: 2em;
font-weight: 400;
margin: 20px 0 10px 0;
}

.jobTitle {
font-size: 1rem;
font-weight: 300;
margin: 0px 0 10px 0;
}
.text-box {
background: rgba(45, 47, 51, 0.95);
color: #eee;
}
}

/* Responsive Design */
@media (max-width: 768px) {
.about-content {
flex-direction: column;
text-align: center;
gap: 2rem;
}

html[data-theme='dark'] {
.aboutContainer {
background-color: #242526;
.about-description {
flex-direction: column;
gap: 1rem;
max-width: 100%;
}

.kubeedge-logo {
width: 160px;
height: 160px;
}
}

.text-box {
text-align: center;
}
}
22 changes: 15 additions & 7 deletions src/components/blogPost/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,36 @@ export default function BlogPost() {
return (
<SectionContainer className="blogPostContainer">
<div className="row">
{/* Left Section - Title and View All */}
<div className="left">
<h1>
<h1 className="newsTitle">
<Translate>Recent News</Translate>
</h1>
<a onClick={() => history.push("blog")}>
<a onClick={() => history.push("blog")} className="viewAll">
<Translate>View All</Translate>
</a>
</div>

{/* Right Section - Blog Posts */}
<div className="right">
{blogPosts.slice(0, 3).map((item, index) => (
<div key={index} className="viewBlogContainer">
<h3 onClick={() => history.push(item.metadata.permalink)}>
<h3
className="blogTitle"
onClick={() => history.push(item.metadata.permalink)}
>
{item.metadata.title}
</h3>
{item.metadata?.frontMatter?.summary && (
<p>{item.metadata?.frontMatter.summary}</p>
<p className="blogSummary">
{item.metadata?.frontMatter.summary}
</p>
)}
<div className="info">
<div className="author">
{(item.metadata?.authors || []).map((item) => (
<a href={item.url} target="_blank">
{item.name}
{(item.metadata?.authors || []).map((author) => (
<a href={author.url} target="_blank">
{author.name}
</a>
))}
</div>
Expand Down
Loading