Skip to content

Commit

Permalink
feat: change home page UI (#55)
Browse files Browse the repository at this point in the history 
Signed-off-by: zhaoxinxin <[email protected]>
  • Loading branch information
@Liam-Zhao
Liam-Zhao authored Jan 25, 2024
1 parent 6891375 commit db9db9c
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 138 deletions.
239 changes: 122 additions & 117 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,142 +523,147 @@ export default function Home() {
</div>
</div>
</section>
<section className={clsx('row', styles.user)}>
<div className={styles.container}>
<div className={styles.userSkew}></div>
<div className={styles.userWrapper}>
<h1 className={styles.useTitle}>
<Translate>Who is</Translate>
<div className={styles.userTitleHighling}>
<Translate>Using</Translate>
</div>
<Translate>Dragonfly</Translate>
</h1>
<div className={styles.userCase}>
<dl className={styles.userShowCase}>
<div className={styles.showCaseWrapper}>
<h1 className={styles.showCaseContent}>
<Translate>Efficiency</Translate>
</h1>
</div>
<div className={styles.showCaseWrapper}>
<h1 className={styles.showCaseContent}>
<Translate>Stability</Translate>
</h1>
</div>
<div className={styles.showCaseWrapper}>
<h1 className={styles.showCaseContent}>
<Translate>Safety</Translate>
</h1>
<div className={styles.communitySkew}></div>
<section className={clsx('row', styles.user)}>
<div className={styles.userWrapper}>
<h1 className={styles.useTitle}>
<Translate>Who is</Translate>
<div className={styles.userTitleHighling}>
<Translate>Using</Translate>
</div>
</dl>
</div>
<div className={clsx('row', styles.userImageBox)}>
{UserList.map((item, index) => {
return (
<div className={styles.imageCard} key={index}>
<a href={item.herf} target="_blank" className={styles.userLink}>
<img className={styles.userImage} src={useBaseUrl(item.imgURL)} alt={item.alt} />
<div className={styles.userName}>{item.name}</div>
</a>
<Translate>Dragonfly</Translate>
</h1>
<div className={styles.userCase}>
<dl className={styles.userShowCase}>
<div className={styles.showCaseWrapper}>
<h1 className={styles.showCaseContent}>
<Translate>Efficiency</Translate>
</h1>
</div>
);
})}
<a href="mailto:[email protected]" className={styles.contactBox}>
<LottieContact />
<div className={styles.contact}>
<div>CONTACT US</div>
</div>
</a>
</div>
</div>
</section>
<section className={clsx('row', styles.community)}>
<div className={styles.communitySkew}></div>
<div className={styles.communityWrapper}>
<h1 className={styles.communityTitle}>
<Translate>Join the</Translate>
<div className={styles.userTitleHighling}>
<Translate>Community</Translate>
</div>
</h1>
<p className={styles.communitySubtitle}>
<Translate>
Engage with our ever-growing community to get the latest updates, product support, and more.
</Translate>
</p>
<div className={clsx('row', styles.communityCardInfo)}>
<div className={clsx('col col--4', styles.communityCardWrapper)}>
<div className={styles.communityCard}>
<div className={styles.communityContent}>
<img className={styles.communityIcon} src={useBaseUrl('img/icon/community-slack.svg')} />
<h3>Join Slack</h3>
<p className={styles.communityText}>
<Translate>Join our developer security community on Slack Channel.</Translate>
</p>
<div className={styles.showCaseWrapper}>
<h1 className={styles.showCaseContent}>
<Translate>Stability</Translate>
</h1>
</div>
<Link className={styles.communityButton} to="https://cloud-native.slack.com/messages/dragonfly/">
<img
className={styles.communityButtonIcon}
src={useBaseUrl('img/icon/community-slack-button.svg')}
alt="button logo"
/>
Slack Channel
</Link>
</div>
</div>
<div className={clsx('col col--4', styles.communityCardWrapper)}>
<div className={styles.communityCard}>
<div className={styles.communityContent}>
<img
className={styles.communityIcon}
src={useBaseUrl('img/icon/community-github.svg')}
alt="button logo"
/>
<h3>GitHub</h3>
<p className={styles.communityText}>
<Translate>Join our contributors in building the future of Dragonfly.</Translate>
</p>
<div className={styles.showCaseWrapper}>
<h1 className={styles.showCaseContent}>
<Translate>Safety</Translate>
</h1>
</div>
<Link className={styles.communityButton} to="https://github.com/dragonflyoss/Dragonfly2">
<img
className={styles.communityButtonIcon}
src={useBaseUrl('img/icon/community-github-button.svg')}
alt="button logo"
/>
Star →
</Link>
</div>
</dl>
</div>
<div className={clsx('col col--4', styles.communityCardWrapper)}>
<div className={styles.communityCard}>
<div className={styles.communityContent}>
<img className={styles.communityIcon} src={useBaseUrl('img/icon/community-problem.svg')} />
<h3>Dragonfly Improvement Proposals</h3>
<p className={styles.communityText}>
<Translate>Propose, discuss and debate ideas.</Translate>
</p>
<div className={clsx('row', styles.userImageBox)}>
{UserList.map((item, index) => {
return (
<div className={styles.imageCard} key={index}>
<a href={item.herf} target="_blank" className={styles.userLink}>
<img className={styles.userImage} src={useBaseUrl(item.imgURL)} alt={item.alt} />
<div className={styles.userName}>{item.name}</div>
</a>
</div>
);
})}
<a href="mailto:[email protected]" className={styles.contactBox}>
<LottieContact />
<div className={styles.contact}>
<div>CONTACT US</div>
</div>
<div className={clsx('row', styles.communityButtonContain)}>
<Link className={styles.communityButton} to="https://github.com/dragonflyoss/Dragonfly2/issues">
</a>
</div>
</div>
</section>
<section className={clsx('row', styles.community)}>
<div className={styles.communityWrapper}>
<h1 className={styles.communityTitle}>
<Translate>Join the</Translate>
<div className={styles.userTitleHighling}>
<Translate>Community</Translate>
</div>
</h1>
<p className={styles.communitySubtitle}>
<Translate>
Engage with our ever-growing community to get the latest updates, product support, and more.
</Translate>
</p>
<div className={clsx('row', styles.communityCardInfo)}>
<div className={clsx('col col--4', styles.communityCardWrapper)}>
<div className={styles.communityCard}>
<div className={styles.communityContent}>
<img className={styles.communityIcon} src={useBaseUrl('img/icon/community-slack.svg')} />
<h3>Join Slack</h3>
<p className={styles.communityText}>
<Translate>Join our developer security community on Slack Channel.</Translate>
</p>
</div>
<Link className={styles.communityButton} to="https://cloud-native.slack.com/messages/dragonfly/">
<img
className={styles.communityButtonIcon}
src={useBaseUrl('img/icon/community-issues-button.svg')}
src={useBaseUrl('img/icon/community-slack-button.svg')}
alt="button logo"
/>
Issues
Slack Channel
</Link>
<Link className={styles.communityButton} to="https://github.com/dragonflyoss/Dragonfly2/discussions">
</div>
</div>
<div className={clsx('col col--4', styles.communityCardWrapper)}>
<div className={styles.communityCard}>
<div className={styles.communityContent}>
<img
className={styles.communityIcon}
src={useBaseUrl('img/icon/community-github.svg')}
alt="button logo"
/>
<h3>GitHub</h3>
<p className={styles.communityText}>
<Translate>Join our contributors in building the future of Dragonfly.</Translate>
</p>
</div>
<Link className={styles.communityButton} to="https://github.com/dragonflyoss/Dragonfly2">
<img
className={styles.communityButtonIcon}
src={useBaseUrl('img/icon/community-discussions-button.svg')}
src={useBaseUrl('img/icon/community-github-button.svg')}
alt="button logo"
/>
Discussions
Star →
</Link>
</div>
</div>
<div className={clsx('col col--4', styles.communityCardWrapper)}>
<div className={styles.communityCard}>
<div className={styles.communityContent}>
<img className={styles.communityIcon} src={useBaseUrl('img/icon/community-problem.svg')} />
<h3>Dragonfly Improvement Proposals</h3>
<p className={styles.communityText}>
<Translate>Propose, discuss and debate ideas.</Translate>
</p>
</div>
<div className={clsx('row', styles.communityButtonContain)}>
<Link className={styles.communityButton} to="https://github.com/dragonflyoss/Dragonfly2/issues">
<img
className={styles.communityButtonIcon}
src={useBaseUrl('img/icon/community-issues-button.svg')}
/>
Issues
</Link>
<Link
className={styles.communityButton}
to="https://github.com/dragonflyoss/Dragonfly2/discussions"
>
<img
className={styles.communityButtonIcon}
src={useBaseUrl('img/icon/community-discussions-button.svg')}
/>
Discussions
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</Layout>
);
}
Expand Down
36 changes: 15 additions & 21 deletions src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,6 @@ a {
text-decoration: none !important;
}

.container {
width: 100vw;
height: 80%;
position: absolute;
left: 50%;
top: 30%;
transform: translate3d(-50%, -15%, 0);
z-index: 5;
}

.heroHeader {
position: relative;
height: 100%;
Expand Down Expand Up @@ -494,21 +484,26 @@ a {

.developmentSkew {
position: absolute;
top: 0%;
left: -25rem;
width: 50rem;
height: 50rem;
top: -10%;
left: -35%;
width: 80%;
height: 100%;
border-radius: 50%;
background-image: url(../../static/img/background.svg);
z-index: 2;
}

.container {
position: relative;
overflow: hidden;
}

.userSkew {
position: absolute;
top: 0%;
right: -25rem;
width: 50rem;
height: 50rem;
right: -35%;
width: 80%;
height: 70%;
border-radius: 50%;
background-image: url(../../static/img/background.svg);
z-index: 2;
Expand All @@ -517,9 +512,9 @@ a {
.communitySkew {
position: absolute;
left: 0;
bottom: -25rem;
width: 60rem;
height: 50rem;
bottom: -40%;
width: 50%;
height: 100%;
border-radius: 50%;
background-image: url(../../static/img/background.svg);
z-index: 2;
Expand Down Expand Up @@ -819,7 +814,6 @@ a {
margin: 0;
position: relative;
background-image: linear-gradient(180deg, #eefff5, #fff);
overflow: hidden;
}

.userWrapper {
Expand Down

0 comments on commit db9db9c

Please sign in to comment.