zenn
082c6a9619
북마크·뉴스레터 CTA 마크다운 블록과 컴포넌트를 추가하고, Twitter/X URL은 공식 embed iframe으로 렌더링한다. Callout 강조선과 이미지 캡션 색을 테마 변수에 맞춘다. Co-authored-by: Cursor <cursoragent@cursor.com>
45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '뉴스레터에 가입하세요'
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: '새 글이 올라오면 받아보실 수 있어요.'
|
|
},
|
|
buttonLabel: {
|
|
type: String,
|
|
default: '구독하기'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: 'you@example.com'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="prose-signup prose-signup-card my-8 rounded-[12px] border border-[var(--site-line)] bg-[var(--site-panel-strong)] px-5 py-8 text-center sm:px-8">
|
|
<h3 class="prose-signup__title text-[clamp(1rem,0.95rem+0.25vw,1.125rem)] font-semibold leading-snug text-[var(--site-text)]">
|
|
{{ title }}
|
|
</h3>
|
|
<p class="prose-signup__desc mt-2 text-[15px] leading-7 text-[var(--site-muted)]">
|
|
{{ description }}
|
|
</p>
|
|
<form class="prose-signup__form mt-6 flex flex-col items-stretch gap-2.5 sm:flex-row sm:justify-center" action="#" @submit.prevent>
|
|
<input
|
|
class="site-input prose-signup__input min-h-[44px] w-full rounded-full px-4 text-sm sm:max-w-[300px] sm:flex-1"
|
|
type="email"
|
|
:placeholder="placeholder"
|
|
readonly
|
|
tabindex="-1"
|
|
aria-label="이메일"
|
|
>
|
|
<button class="site-accent-button prose-signup__submit min-h-[44px] shrink-0 rounded-full px-8 text-sm font-semibold" type="button">
|
|
{{ buttonLabel }}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</template>
|