Created the HomepageFeatures component
This commit is contained in:
61
src/components/HomepageFeatures/index.js
Normal file
61
src/components/HomepageFeatures/index.js
Normal file
@ -0,0 +1,61 @@
|
||||
import clsx from 'clsx';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
{
|
||||
title: 'Connect',
|
||||
Svg: require('@site/static/img/connect.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Connect with 100+ other discord servers and hang out with them in our server!
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Gain Achievements',
|
||||
Svg: require('@site/static/img/achievements.svg').default,
|
||||
description: (
|
||||
<>
|
||||
It's fun! Gain XP and level up to unlock achievements and get access to more features!
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
Svg: require('@site/static/img/dashboard.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Our dashboard is easy to use and is designed to be user friendly!
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({Svg, title, description}) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img"/>
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<Heading as="h3">{title}</Heading>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
11
src/components/HomepageFeatures/styles.module.css
Normal file
11
src/components/HomepageFeatures/styles.module.css
Normal file
@ -0,0 +1,11 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
Reference in New Issue
Block a user