Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-09-29 15:30:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

style: add gradient background

Browse Source
This commit is contained in:
MAZE 2023-11-01 15:27:08 +03:30
parent 8cceb6ecd1
commit 77fed0308a
2 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/sections/ready/ready.module.css
View File

@ -1,4 +1,27 @@
.ready {
& .wrapper {
position: relative;
padding: 0 20px 40px;
border-radius: 0 0 20px 20px;
background: linear-gradient(transparent, var(--color-neutral-100));
&::after {
position: absolute;
bottom: 0;
left: 50%;
width: 70%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-300),
transparent
);
content: '';
transform: translateX(-50%);
}
}
& .iconContainer {
display: flex;
flex-direction: column;

22
src/components/sections/ready/ready.tsx
View File

@ -8,18 +8,20 @@ export function Ready() {
return (
<div className={styles.ready}>
<Container>
<div className={styles.iconContainer}>
<div className={styles.tail} />
<div className={styles.icon}>
<RiSparkling2Line />
<div className={styles.wrapper}>
<div className={styles.iconContainer}>
<div className={styles.tail} />
<div className={styles.icon}>
<RiSparkling2Line />
</div>
</div>
</div>
<h2 className={styles.title}>Are you ready?</h2>
<p className={styles.desc}>Create your calm oasis in seconds!</p>
<a className={styles.button} href="#app">
Use Moodist
</a>
<h2 className={styles.title}>Are you ready?</h2>
<p className={styles.desc}>Create your calm oasis in seconds!</p>
<a className={styles.button} href="#app">
Use Moodist
</a>
</div>
</Container>
</div>
);