mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 08:54:13 +00:00
refactor: turn hero into Astro component
This commit is contained in:
MAZE
parent
9398ae0edd
commit
77f9fcc50e
5 changed files with 115 additions and 119 deletions
114
src/components/hero.astro
Normal file
114
src/components/hero.astro
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
---
|
||||
import { Balancer } from 'react-wrap-balancer';
|
||||
|
||||
import { Container } from '@/components/container';
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
const count = soundCount();
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
<Container>
|
||||
<img
|
||||
alt="Faded Moodist Logo"
|
||||
class="logo"
|
||||
height={45}
|
||||
src="/logo.svg"
|
||||
width={45}
|
||||
/>
|
||||
|
||||
<div class="title">
|
||||
<div class="left"></div>
|
||||
<h1>Moodist</h1>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
|
||||
<p class="desc">
|
||||
<Balancer>Ambient sounds for focus and calm.</Balancer>
|
||||
</p>
|
||||
|
||||
<p class="sounds">{count} Sounds</p>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
padding: 140px 0 60px;
|
||||
text-align: center;
|
||||
|
||||
& .logo {
|
||||
display: block;
|
||||
width: 45px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
& .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 15px;
|
||||
|
||||
& div {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
|
||||
&.left {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-300)
|
||||
);
|
||||
}
|
||||
|
||||
&.right {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-neutral-300),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-2xlg);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
& .desc {
|
||||
margin-top: 5px;
|
||||
color: var(--color-foreground-subtle);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
& .sounds {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 100px;
|
||||
margin: 20px auto 0;
|
||||
background-color: var(--color-neutral-100);
|
||||
font-size: var(--font-xsm);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
transparent
|
||||
);
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
.hero {
|
||||
padding: 140px 0 60px;
|
||||
text-align: center;
|
||||
|
||||
& .logo {
|
||||
display: block;
|
||||
width: 45px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
& .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 15px;
|
||||
|
||||
& div {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
|
||||
&.left {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-300)
|
||||
);
|
||||
}
|
||||
|
||||
&.right {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-neutral-300),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-2xlg);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
& .desc {
|
||||
margin-top: 5px;
|
||||
color: var(--color-foreground-subtle);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
& .sounds {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 100px;
|
||||
margin: 20px auto 0;
|
||||
background-color: var(--color-neutral-100);
|
||||
font-size: var(--font-xsm);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
transparent
|
||||
);
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { useMemo } from 'react';
|
||||
|
||||
import { Balancer } from 'react-wrap-balancer';
|
||||
|
||||
import { Container } from '@/components/container';
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
import styles from './hero.module.css';
|
||||
|
||||
export function Hero() {
|
||||
const count = useMemo(soundCount, []);
|
||||
|
||||
return (
|
||||
<div className={styles.hero}>
|
||||
<Container>
|
||||
<img
|
||||
alt="Faded Moodist Logo"
|
||||
className={styles.logo}
|
||||
height={45}
|
||||
src="/logo.svg"
|
||||
width={45}
|
||||
/>
|
||||
|
||||
<div className={styles.title}>
|
||||
<div className={styles.left} />
|
||||
<h1>Moodist</h1>
|
||||
<div className={styles.right} />
|
||||
</div>
|
||||
|
||||
<p className={styles.desc}>
|
||||
<Balancer>Ambient sounds for focus and calm.</Balancer>
|
||||
</p>
|
||||
|
||||
<p className={styles.sounds}>{count} Sounds</p>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { Hero } from './hero';
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
import Layout from '@/layouts/layout.astro';
|
||||
import Hero from '@/components/hero.astro';
|
||||
import Footer from '@/components/footer.astro';
|
||||
import AboutSection from '@/components/sections/about.astro';
|
||||
import WhySection from '@/components/sections/why.astro';
|
||||
import ReadySection from '@/components/sections/ready.astro';
|
||||
|
||||
import { Hero } from '@/components/hero';
|
||||
import { App } from '@/components/app';
|
||||
---
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue