116 lines
2.9 KiB
TypeScript
116 lines
2.9 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
import type { Metadata } from 'next';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Download Waggle',
|
|
description:
|
|
'Download status and installer availability for Waggle OS desktop.',
|
|
};
|
|
|
|
const HEADING = 'Download Waggle';
|
|
const STATUS =
|
|
'Windows and macOS installers are being prepared for the signed public release.';
|
|
const BODY =
|
|
'Until those installers are published, you can inspect the source repository or contact Egzakta for early access.';
|
|
const SOURCE_CTA = 'View source on GitHub';
|
|
const CONTACT_CTA = 'Request installer access';
|
|
|
|
const SOURCE_URL = 'https://github.com/marolinik/waggle-os';
|
|
const CONTACT_URL = 'mailto:hello@egzakta.com?subject=Waggle%20installer%20access';
|
|
|
|
export default function DownloadPage() {
|
|
return (
|
|
<main style={pageStyle}>
|
|
<section style={sectionStyle} aria-labelledby="download-heading">
|
|
<p style={eyebrowStyle}>Desktop app</p>
|
|
<h1 id="download-heading" style={h1Style}>
|
|
{HEADING}
|
|
</h1>
|
|
<p style={statusStyle}>{STATUS}</p>
|
|
<p style={bodyStyle}>{BODY}</p>
|
|
<div style={actionsStyle}>
|
|
<a href={SOURCE_URL} style={primaryLinkStyle}>
|
|
{SOURCE_CTA}
|
|
</a>
|
|
<a href={CONTACT_URL} style={secondaryLinkStyle}>
|
|
{CONTACT_CTA}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const pageStyle: CSSProperties = {
|
|
minHeight: '100vh',
|
|
padding: '120px 24px 80px',
|
|
background: 'var(--page, #0e0c07)',
|
|
color: 'var(--hive-100, #ece3d0)',
|
|
};
|
|
|
|
const sectionStyle: CSSProperties = {
|
|
maxWidth: 760,
|
|
margin: '0 auto',
|
|
};
|
|
|
|
const eyebrowStyle: CSSProperties = {
|
|
color: 'var(--honey-400, #f6c45a)',
|
|
fontSize: 12,
|
|
fontWeight: 700,
|
|
letterSpacing: '0.08em',
|
|
textTransform: 'uppercase',
|
|
marginBottom: 16,
|
|
};
|
|
|
|
const h1Style: CSSProperties = {
|
|
color: 'var(--hive-50, #f6f1e4)',
|
|
fontSize: 'clamp(36px, 7vw, 68px)',
|
|
lineHeight: 1,
|
|
margin: '0 0 24px',
|
|
};
|
|
|
|
const statusStyle: CSSProperties = {
|
|
color: 'var(--hive-100, #ece3d0)',
|
|
fontSize: 'clamp(18px, 2.4vw, 24px)',
|
|
lineHeight: 1.45,
|
|
margin: '0 0 14px',
|
|
maxWidth: 680,
|
|
};
|
|
|
|
const bodyStyle: CSSProperties = {
|
|
color: 'var(--hive-300, #948a73)',
|
|
fontSize: 16,
|
|
lineHeight: 1.7,
|
|
margin: '0 0 32px',
|
|
maxWidth: 640,
|
|
};
|
|
|
|
const actionsStyle: CSSProperties = {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 12,
|
|
};
|
|
|
|
const baseLinkStyle: CSSProperties = {
|
|
borderRadius: 8,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: 44,
|
|
padding: '0 18px',
|
|
fontWeight: 700,
|
|
textDecoration: 'none',
|
|
};
|
|
|
|
const primaryLinkStyle: CSSProperties = {
|
|
...baseLinkStyle,
|
|
background: 'var(--honey-500, #e9a52c)',
|
|
color: 'var(--hive-950, #0e0c07)',
|
|
};
|
|
|
|
const secondaryLinkStyle: CSSProperties = {
|
|
...baseLinkStyle,
|
|
border: '1px solid var(--line-soft, rgba(236, 227, 208, 0.14))',
|
|
color: 'var(--hive-100, #ece3d0)',
|
|
};
|