edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add icon list block and a fun happy placeholder piggy

Browse Source
This commit is contained in:
elisejakob
2024-05-10 17:46:10 +02:00
parent b721eefb02
commit 33db0be06b
4 changed files with 143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/components/blocks/IconListBlock.tsx Normal file
View File

@ -0,0 +1,75 @@
import styles from "./iconListBlock.module.scss";
export const IconListBlock = ({ block }: any) => {
return (
<div className={styles.iconListBlock}>
<ul className={styles.iconList}>
<li className={styles.iconListItem}>
<div className={styles.icon}>
<img src="/assets/icons/neufneuf.svg" />
</div>
<div className={styles.text}>
<h2>Et viktig poeng i denne lista</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
molestie tortor a interdum blandit. Sed ac purus sit amet libero
posuere molestie.
</p>
</div>
</li>
<li className={styles.iconListItem}>
<div className={styles.icon}>
<img src="/assets/icons/neufneuf.svg" />
</div>
<div className={styles.text}>
<h2>Et viktig poeng i denne lista</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
molestie tortor a interdum blandit. Sed ac purus sit amet libero
posuere molestie.
</p>
</div>
</li>
<li className={styles.iconListItem}>
<div className={styles.icon}>
<img src="/assets/icons/neufneuf.svg" />
</div>
<div className={styles.text}>
<h2>Et viktig poeng i denne lista</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
molestie tortor a interdum blandit. Sed ac purus sit amet libero
posuere molestie.
</p>
</div>
</li>
<li className={styles.iconListItem}>
<div className={styles.icon}>
<img src="/assets/icons/neufneuf.svg" />
</div>
<div className={styles.text}>
<h2>Et viktig poeng i denne lista</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
molestie tortor a interdum blandit. Sed ac purus sit amet libero
posuere molestie.
</p>
</div>
</li>
<li className={styles.iconListItem}>
<div className={styles.icon}>
<img src="/assets/icons/neufneuf.svg" />
</div>
<div className={styles.text}>
<h2>Et viktig poeng i denne lista</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
molestie tortor a interdum blandit. Sed ac purus sit amet libero
posuere molestie.
</p>
</div>
</li>
</ul>
</div>
);
};

60
web/src/components/blocks/iconListBlock.module.scss Normal file
View File

@ -0,0 +1,60 @@
.iconListBlock {
margin: 5rem auto;
max-width: 68rem;
}
.iconList {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
}
.iconListItem {
display: flex;
align-items: flex-start;
gap: 1.6rem;
&:nth-of-type(3n+1) {
.icon {
background: var(--color-goldenBeige);
}
}
&:nth-of-type(3n+2) {
.icon {
background: var(--color-neufPink);
}
}
&:nth-of-type(3n+3) {
.icon {
background: var(--color-goldenOrange);
}
}
}
.text {
margin-bottom: 1rem;
h2 {
font-size: var(--font-size-lead);
margin: .5rem 0;
}
}
.icon {
flex: none;
width: 3.4rem;
height: 3.4rem;
background: var(--color-goldenBeige);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
}
}

2
web/src/components/general/Body.tsx
View File

@ -1,9 +1,11 @@
import { FeaturedBlock } from "../blocks/FeaturedBlock";
import { IconListBlock } from "../blocks/IconListBlock";
import styles from "./body.module.scss";
export const Body = () => {
return (
<>
<IconListBlock />
<FeaturedBlock />
<FeaturedBlock />
<div className={styles.body}>