mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 08:54:13 +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