diff --git a/public/faded-logo.svg b/public/faded-logo.svg new file mode 100644 index 0000000..1e1eaaf --- /dev/null +++ b/public/faded-logo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/container/container.module.css b/src/components/container/container.module.css new file mode 100644 index 0000000..2e7732b --- /dev/null +++ b/src/components/container/container.module.css @@ -0,0 +1,5 @@ +.container { + width: 85%; + max-width: 550px; + margin: 0 auto; +} diff --git a/src/components/container/container.tsx b/src/components/container/container.tsx new file mode 100644 index 0000000..836b1f8 --- /dev/null +++ b/src/components/container/container.tsx @@ -0,0 +1,9 @@ +import styles from './container.module.css'; + +interface ContainerProps { + children: React.ReactNode; +} + +export function Container({ children }: ContainerProps) { + return
{children}
; +} diff --git a/src/components/container/index.ts b/src/components/container/index.ts new file mode 100644 index 0000000..7872edd --- /dev/null +++ b/src/components/container/index.ts @@ -0,0 +1 @@ +export { Container } from './container'; diff --git a/src/components/hero/hero.module.css b/src/components/hero/hero.module.css new file mode 100644 index 0000000..ca7600e --- /dev/null +++ b/src/components/hero/hero.module.css @@ -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%); + } + } +} diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx new file mode 100644 index 0000000..e289a70 --- /dev/null +++ b/src/components/hero/hero.tsx @@ -0,0 +1,27 @@ +import { Container } from '@/components/container'; + +import styles from './hero.module.css'; + +export function Hero() { + return ( +
+ + Faded Moodist Logo + +
+
+

Moodist

+
+
+ +

Ambient background sounds for focus.

+ +

100% Free

+ +
+ ); +} diff --git a/src/components/hero/index.ts b/src/components/hero/index.ts new file mode 100644 index 0000000..1e9ccae --- /dev/null +++ b/src/components/hero/index.ts @@ -0,0 +1 @@ +export { Hero } from './hero'; diff --git a/src/env.d.ts b/src/env.d.ts index f964fe0..4015fda 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1,3 @@ /// + +declare module '*.module.css'; diff --git a/src/pages/index.astro b/src/pages/index.astro index 45e8b5b..0aaa2ac 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,76 +1,9 @@ --- import Layout from '@/layouts/layout.astro'; + +import { Hero } from '@/components/hero'; --- -
Hello World
+ - -