mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 08:54:13 +00:00
feat: add hero section
This commit is contained in:
MAZE
parent
05d68e4de6
commit
dc33c2cf9c
9 changed files with 157 additions and 70 deletions
36
public/faded-logo.svg
Normal file
36
public/faded-logo.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<svg width="490" height="299" viewBox="0 0 490 299" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 0L0 100V298.626L100 198.626V0Z" fill="url(#paint0_linear_68_23)"/>
|
||||
<path d="M130 0L230 100V298.626L130 198.626V0Z" fill="url(#paint1_linear_68_23)"/>
|
||||
<path d="M260 100L360 0V198.626L260 298.626V100Z" fill="url(#paint2_linear_68_23)"/>
|
||||
<path d="M390 0L490 100V298.626L390 198.626V0Z" fill="url(#paint3_linear_68_23)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.12659" stop-color="#F4F4F5"/>
|
||||
<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
|
||||
<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
|
||||
<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
|
||||
<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.12659" stop-color="#F4F4F5"/>
|
||||
<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
|
||||
<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
|
||||
<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
|
||||
<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.12659" stop-color="#F4F4F5"/>
|
||||
<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
|
||||
<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
|
||||
<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
|
||||
<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.12659" stop-color="#F4F4F5"/>
|
||||
<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
|
||||
<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
|
||||
<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
|
||||
<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
5
src/components/container/container.module.css
Normal file
5
src/components/container/container.module.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.container {
|
||||
width: 85%;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
9
src/components/container/container.tsx
Normal file
9
src/components/container/container.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import styles from './container.module.css';
|
||||
|
||||
interface ContainerProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Container({ children }: ContainerProps) {
|
||||
return <div className={styles.container}>{children}</div>;
|
||||
}
|
||||
1
src/components/container/index.ts
Normal file
1
src/components/container/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Container } from './container';
|
||||
73
src/components/hero/hero.module.css
Normal file
73
src/components/hero/hero.module.css
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
.hero {
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
|
||||
& .logo {
|
||||
display: block;
|
||||
width: 65px;
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
|
||||
& .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);
|
||||
}
|
||||
|
||||
& .free {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid #2563eb;
|
||||
border-radius: 100px;
|
||||
margin: 20px auto 0;
|
||||
background-color: rgb(37 99 235 / 30%);
|
||||
font-size: var(--font-xsm);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #60a5fa, transparent);
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
27
src/components/hero/hero.tsx
Normal file
27
src/components/hero/hero.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { Container } from '@/components/container';
|
||||
|
||||
import styles from './hero.module.css';
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<div className={styles.hero}>
|
||||
<Container>
|
||||
<img
|
||||
alt="Faded Moodist Logo"
|
||||
className={styles.logo}
|
||||
src="/faded-logo.svg"
|
||||
/>
|
||||
|
||||
<div className={styles.title}>
|
||||
<div className={styles.left} />
|
||||
<h1>Moodist</h1>
|
||||
<div className={styles.right} />
|
||||
</div>
|
||||
|
||||
<p className={styles.desc}>Ambient background sounds for focus.</p>
|
||||
|
||||
<p className={styles.free}>100% Free</p>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/components/hero/index.ts
Normal file
1
src/components/hero/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Hero } from './hero';
|
||||
2
src/env.d.ts
vendored
2
src/env.d.ts
vendored
|
|
@ -1 +1,3 @@
|
|||
/// <reference types="astro/client" />
|
||||
|
||||
declare module '*.module.css';
|
||||
|
|
|
|||
|
|
@ -1,76 +1,9 @@
|
|||
---
|
||||
import Layout from '@/layouts/layout.astro';
|
||||
|
||||
import { Hero } from '@/components/hero';
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>Hello World</main>
|
||||
<Hero />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
width: 800px;
|
||||
max-width: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
margin: auto;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.astro-a {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -32px;
|
||||
left: 50%;
|
||||
width: 220px;
|
||||
height: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1em;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
background-image: var(--accent-gradient);
|
||||
background-position: 0%;
|
||||
background-size: 400%;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid rgb(var(--accent-light) 25%);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
background: linear-gradient(
|
||||
rgb(var(--accent-dark) 66%),
|
||||
rgb(var(--accent-dark) 33%)
|
||||
);
|
||||
}
|
||||
|
||||
.instructions code {
|
||||
padding: 0.3em 0.4em;
|
||||
border-radius: 4px;
|
||||
background: rgb(var(--accent-light) 12%);
|
||||
color: rgb(var(--accent-light));
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
padding: 0;
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue