Landing Page Components

<Hero
	badge="Open-source & free to try"
	buttons={{ href: '/console?signup', label: 'Start your blog' }}
>
	{#snippet title()}
		You Publish.<br /><span class="heading-small">(We'll handle the rest)</span>
	{/snippet}
	{#snippet subtitle()}
		Hyvor Blogs is our <span class="hds-marker">blogging platform</span>. It's
		<span class="hds-hl">fast</span>, <span class="hds-hl">simple</span>, and
		<span class="hds-hl">open-source</span>!
	{/snippet}
</Hero>

{#snippet title()}
	<Intl.T key="hero.title" params={{ hl: { element: 'span', props: { class: 'hds-hl' } } }} />
{/snippet}

{
	"hero.title": "You <hl>Publish</hl>."
}

<LogoStrip
	label="Trusted by 10,000+ websites & businesses"
	logos={[
		{ name: 'Elementor', src: '/customers/elementor.png' },
		{ name: 'Stanford University', src: '/customers/stanford.png', width: 125, height: 40 },
		{ name: 'ACCA', src: '/customers/acca.png', width: 44, height: 44, color: true },
		{ name: 'El Debate', src: '/customers/eldebate.png', width: 140, height: 28 }
	]}
/>

<FeatureSplit
	eyebrow="Post Editor"
	title="Write without friction"
	description="A clean, distraction-free editor with everything you need to write and format posts."
	bullets={[
		'Markdown shortcuts for all the formatting you need',
		'Paste, drag and drop, or pick images from Unsplash',
		'Syntax highlighting for 100+ languages'
	]}
	button={{ href: '/console?signup', label: 'Start writing' }}
	interactiveBullets
>
	{#snippet visual(activeBullet)}
		<div class="visual-placeholder hds-box">
			<IconImage size={40} />
			<span>Active bullet: {activeBullet + 1}</span>
		</div>
	{/snippet}
</FeatureSplit>

<FeatureSplit
	eyebrow="Optimizations"
	title="Built for speed"
	description="All official themes are optimized for speed."
>
	{#snippet bullets()}
		<div class="stats">
			<div><strong>99</strong><span>Lighthouse score</span></div>
			<div><strong>&lt;200ms</strong><span>Time to first byte</span></div>
		</div>
	{/snippet}
	{#snippet visual()}
		<div class="visual-placeholder hds-box">
			<IconImage size={40} />
		</div>
	{/snippet}
</FeatureSplit>

<Testimonials
	reviews={[
		{
			type: 'text',
			name: 'Lionel S.',
			role: 'Blogger',
			quote:
				'I need a simple, easy-to-use, fast, beautiful and mature blogging tool that resolves the WordPress bloat. Hyvor Blogs handles this beautifully.'
		},
		{
			type: 'video',
			name: 'Video testimonial',
			role: 'Coming soon'
		},
		{
			type: 'text',
			name: 'Manoj P.',
			role: 'Senior Application Engineer',
			quote:
				'The platform offers a seamless and user-friendly experience for both bloggers and readers. The customization options are extensive.'
		}
	]}
/>

<AllFeaturesAccordion
	categories={[
		{
			label: 'Post Editor',
			icon: IconPencil,
			color: 'var(--green)',
			features: [
				{
					icon: IconPencil,
					title: 'All the basics',
					description: 'Bold, italic, headings, lists, quotes, links, and more.'
				},
				{
					icon: IconImage,
					title: 'Images',
					description: 'Upload, paste, drag and drop, and more ways to add images.'
				}
			]
		},
		{
			label: 'Your Blog',
			icon: IconSignpost2,
			color: 'var(--blue)',
			features: [
				{ icon: IconTag, title: 'Tags', description: 'Organize your posts with tags.' },
				{
					icon: IconRss,
					title: 'Atom (RSS) Feed',
					description: 'Atom feeds are generated automatically.'
				}
			]
		}
	]}
/>

<div class="hds-container">
	<h2>Frequently asked questions</h2>
	<FAQ
		items={[
			{ q: 'Is there a free trial?', a: 'Yes, every plan starts with a 14-day free trial.' },
			{ q: 'Can I cancel anytime?', a: 'Yes, there are no long-term contracts.' },
			{
				q: 'Do you offer discounts?',
				a: 'Yes, see our <a href="/pricing">pricing page</a> for details.'
			}
		]}
	/>
</div>

<FullTrialSignup
	badge="Open-source & free to try"
	title="Start your blog today"
	description="Join hundreds of bloggers and businesses building with Hyvor Blogs."
	button={{ href: '/console?signup', label: 'Start your blog →' }}
/>

<FullTrialSignup
	accentColor="var(--red)"
	title="Start your blog today"
	button={{ href: '/console?signup', label: 'Start your blog →' }}
/>

<SpotlightSplit
	title="Enterprise-ready."
	description="Enterprise-grade security and compliance, without adding complexity to your publishing workflow."
	stats={['> 99.9% Uptime', 'Priority Support']}
	button={{ href: 'https://hyvor.com/enterprise', label: 'Contact Sales', external: true }}
	background="#574443"
>
	{#snippet content()}
		<div class="seal-grid">
			<GdprSeal />
			<CcpaSeal />
			<SsoSeal />
			<IsoSeal />
		</div>
	{/snippet}
</SpotlightSplit>

<SpotlightSplit
	title="Built by writers, for writers."
	description="Every part of the editor was shaped by feedback from people who publish daily."
	button={{ href: '/console?signup', label: 'Start writing' }}
	background="#2b2440"
	highlightColor="rgba(216, 200, 255, 0.9)"
	reverse
>
	{#snippet content()}
		<div class="quote hds-box">
			<IconQuote size={22} />
			<p>"The fastest editor I've used for long-form posts, by a wide margin."</p>
			<span>A Hyvor Blogs user</span>
		</div>
	{/snippet}
</SpotlightSplit>