mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 17:04:15 +00:00
refactor: remove sections
This commit is contained in:
MAZE
parent
a514a364ec
commit
3f45be3942
3 changed files with 0 additions and 387 deletions
|
|
@ -1,82 +0,0 @@
|
||||||
---
|
|
||||||
import { Balancer } from 'react-wrap-balancer';
|
|
||||||
import { FaQuestion } from 'react-icons/fa/index';
|
|
||||||
|
|
||||||
import { Container } from '@/components/container';
|
|
||||||
import { count as soundCount } from '@/lib/sounds';
|
|
||||||
|
|
||||||
const count = soundCount();
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="about">
|
|
||||||
<Container>
|
|
||||||
<div class="iconContainer">
|
|
||||||
<div class="tail"></div>
|
|
||||||
<div class="icon">
|
|
||||||
<FaQuestion />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="title">What is Moodist?</h2>
|
|
||||||
<p class="desc">
|
|
||||||
<Balancer>
|
|
||||||
Moodist is a free and open-source ambient sound generator featuring <span
|
|
||||||
class="counter">{count} carefully curated sounds</span
|
|
||||||
>. Create your ideal atmosphere for relaxation, focus, or creativity
|
|
||||||
with this versatile tool.
|
|
||||||
</Balancer>
|
|
||||||
</p>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.about {
|
|
||||||
padding: 80px 0;
|
|
||||||
|
|
||||||
& .iconContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
& .tail {
|
|
||||||
width: 1px;
|
|
||||||
height: 75px;
|
|
||||||
background: linear-gradient(transparent, var(--color-neutral-300));
|
|
||||||
}
|
|
||||||
|
|
||||||
& .icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
font-size: var(--font-base);
|
|
||||||
background-color: var(--color-neutral-100);
|
|
||||||
border: 1px solid var(--color-neutral-300);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .title {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-family: var(--font-display);
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .desc {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 450px;
|
|
||||||
margin: 0 auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--color-foreground-subtle);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
& .counter {
|
|
||||||
color: var(--color-foreground);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
---
|
|
||||||
import { RiSparkling2Line } from 'react-icons/ri/index';
|
|
||||||
|
|
||||||
import { Container } from '@/components/container';
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="ready">
|
|
||||||
<Container>
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="iconContainer">
|
|
||||||
<div class="tail"></div>
|
|
||||||
<div class="icon">
|
|
||||||
<RiSparkling2Line />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="title">Are you ready?</h2>
|
|
||||||
<p class="desc">Create your calm oasis in seconds!</p>
|
|
||||||
<button class="button" id="button"> Use Moodist</button>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const button = document.getElementById('button');
|
|
||||||
|
|
||||||
button?.addEventListener('click', () => {
|
|
||||||
const app = document.getElementById('app');
|
|
||||||
|
|
||||||
app?.scrollIntoView(true);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.ready {
|
|
||||||
& .wrapper {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 20px 40px;
|
|
||||||
background: linear-gradient(transparent, var(--color-neutral-100));
|
|
||||||
border-radius: 0 0 20px 20px;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
width: 70%;
|
|
||||||
height: 1px;
|
|
||||||
content: '';
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
var(--color-neutral-300),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .iconContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
& .tail {
|
|
||||||
width: 1px;
|
|
||||||
height: 75px;
|
|
||||||
background: linear-gradient(transparent, var(--color-neutral-300));
|
|
||||||
}
|
|
||||||
|
|
||||||
& .icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
font-size: var(--font-md);
|
|
||||||
background-color: var(--color-neutral-100);
|
|
||||||
border: 1px solid var(--color-neutral-300);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .title {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-family: var(--font-display);
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .desc {
|
|
||||||
color: var(--color-foreground-subtle);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 120px;
|
|
||||||
height: 40px;
|
|
||||||
margin: 24px auto 0;
|
|
||||||
font-family: var(--font-heading);
|
|
||||||
font-size: var(--font-sm);
|
|
||||||
line-height: 0;
|
|
||||||
color: var(--color-neutral-200);
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: var(--color-neutral-950);
|
|
||||||
border: none;
|
|
||||||
border-radius: 100px;
|
|
||||||
outline: none;
|
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-neutral-800);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,184 +0,0 @@
|
||||||
---
|
|
||||||
import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
|
|
||||||
import { BsSoundwave, BsStars } from 'react-icons/bs/index';
|
|
||||||
import { RxMixerHorizontal } from 'react-icons/rx/index';
|
|
||||||
import { IoShareSocialSharp } from 'react-icons/io5/index';
|
|
||||||
import { FaQuestion } from 'react-icons/fa/index';
|
|
||||||
|
|
||||||
import { Balancer } from 'react-wrap-balancer';
|
|
||||||
|
|
||||||
import { Container } from '@/components/container';
|
|
||||||
import { count as soundCount } from '@/lib/sounds';
|
|
||||||
|
|
||||||
const count = soundCount();
|
|
||||||
|
|
||||||
const reasons = [
|
|
||||||
{
|
|
||||||
Icon: BiMoney,
|
|
||||||
body: 'Enjoy unlimited, cost-free access to our ambient sounds.',
|
|
||||||
id: 'free-access',
|
|
||||||
label: 'Free Access',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Icon: BiUserCircle,
|
|
||||||
body: 'Dive into tranquility without any sign-up requirements.',
|
|
||||||
id: 'no-registration',
|
|
||||||
label: 'No Registration',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Icon: BsSoundwave,
|
|
||||||
body: `Explore ${count} varied ambient sounds for every mood.`,
|
|
||||||
id: 'diverse-sounds',
|
|
||||||
label: 'Diverse Sounds',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Icon: RxMixerHorizontal,
|
|
||||||
body: 'Shape your ideal ambiance by blending different sounds.',
|
|
||||||
id: 'customizable-mixes',
|
|
||||||
label: 'Customizable Mixes',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Icon: BsStars,
|
|
||||||
body: 'Smooth and uninterrupted, focus on relaxation.',
|
|
||||||
id: 'seamless-experience',
|
|
||||||
label: 'Seamless Experience',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Icon: IoShareSocialSharp,
|
|
||||||
body: 'Easily share your favorite sounds for a connected experience.',
|
|
||||||
id: 'share-selections',
|
|
||||||
label: 'Share Selections',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Icon: BiLogoGithub,
|
|
||||||
body: 'Transparent and collaborative – built on open-source principles.',
|
|
||||||
id: 'open-source',
|
|
||||||
label: 'Open-Source',
|
|
||||||
link: {
|
|
||||||
label: 'Source Code',
|
|
||||||
url: 'https://github.com/remvze/moodist',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="why">
|
|
||||||
<Container>
|
|
||||||
<div class="iconContainer">
|
|
||||||
<div class="tail"></div>
|
|
||||||
<div class="icon">
|
|
||||||
<FaQuestion />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="title">Why use Moodist?</h2>
|
|
||||||
|
|
||||||
<div class="reasons">
|
|
||||||
{
|
|
||||||
reasons.map(reason => (
|
|
||||||
<div class="reason">
|
|
||||||
<div class="icon">
|
|
||||||
<reason.Icon />
|
|
||||||
</div>
|
|
||||||
<h3 class="label">{reason.label}</h3>
|
|
||||||
<p class="body">
|
|
||||||
<Balancer>{reason.body}</Balancer>
|
|
||||||
</p>
|
|
||||||
{reason.link && (
|
|
||||||
<a class="link" href={reason.link.url}>
|
|
||||||
{reason.link.label}
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.why {
|
|
||||||
padding-bottom: 80px;
|
|
||||||
|
|
||||||
& .iconContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
& .tail {
|
|
||||||
width: 1px;
|
|
||||||
height: 75px;
|
|
||||||
background: linear-gradient(transparent, var(--color-neutral-300));
|
|
||||||
}
|
|
||||||
|
|
||||||
& .icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
font-size: var(--font-base);
|
|
||||||
background-color: var(--color-neutral-100);
|
|
||||||
border: 1px solid var(--color-neutral-300);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .title {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-family: var(--font-display);
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .reasons {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
row-gap: 28px;
|
|
||||||
column-gap: 20px;
|
|
||||||
margin-top: 24px;
|
|
||||||
|
|
||||||
& .icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 auto 12px;
|
|
||||||
font-size: var(--font-md);
|
|
||||||
color: var(--color-foreground-subtle);
|
|
||||||
background: linear-gradient(var(--color-neutral-100), transparent);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .label {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-family: var(--font-heading);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .body {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 250px;
|
|
||||||
margin: 0 auto;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--color-foreground-subtle);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .link {
|
|
||||||
display: block;
|
|
||||||
margin-top: 8px;
|
|
||||||
font-size: var(--font-sm);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--color-foreground);
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Add table
Reference in a new issue