feat(website): responsive / mobile layouts
Make the marketing site mobile-friendly across every page and section. Desktop appearance is unchanged; all breakpoint logic targets <=768px. - Fluid section padding via clamp(); equal grids use auto-fit/minmax, asymmetric grids stack to one column via scoped-CSS media queries - Nav: real hamburger menu on mobile (links, lang toggle, login, CTA) - ProductMockup: scales the whole dashboard to fit (zoom) instead of reflowing its internals into a tall stack - Lower oversized heading clamp() minimums so titles no longer overflow at ~390px (hero, page headers, final CTA, brand cover/chapter) - HowItWorks: row-gap when steps stack so node markers clear the text - Compare + partners tables: stacked rows now label each value with its column (Dezky vs hyperscaler / CSP) instead of an ambiguous header - Footer columns, tiers, calculator and tables stack cleanly on mobile
This commit is contained in:
Ronni Baslund
@@ -13,7 +13,7 @@ const route = useRoute()
|
||||
|
||||
<template>
|
||||
<LandingPageHeader :label="copy.pages.comingSoonKicker" :title="title" :intro="body" />
|
||||
<LandingContainer pad="48px 64px 160px">
|
||||
<LandingContainer pad="clamp(32px, 5vw, 48px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 160px)">
|
||||
<LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
||||
</LandingContainer>
|
||||
</template>
|
||||
|
||||
@@ -8,15 +8,15 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section :style="{ background: t.bg, color: t.fg }">
|
||||
<LandingContainer pad="140px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 140px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.compare.label" />
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '80px', alignItems: 'end', marginBottom: '56px' }">
|
||||
<div class="compare-intro-grid" :style="{ display: 'grid', gap: '80px', alignItems: 'end', marginBottom: '56px' }">
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.compare.heading }}</h2>
|
||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '17px', lineHeight: 1.6, maxWidth: '460px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.compare.lede }}</p>
|
||||
</div>
|
||||
|
||||
<div :style="{ border: `1px solid ${t.borderStrong}` }">
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', background: t.fg, color: t.bg }">
|
||||
<div :style="{ border: `1px solid ${t.borderStrong}`, overflowX: 'auto' }">
|
||||
<div class="compare-table-grid compare-header" :style="{ display: 'grid', background: t.fg, color: t.bg }">
|
||||
<div :style="{ padding: '20px 28px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.6 }">kategori</div>
|
||||
<div :style="{ padding: '20px 28px', display: 'flex', alignItems: 'center', gap: '10px', borderLeft: `1px solid ${t.fgDim}` }">
|
||||
<BrandNodeMark :size="18" :fg="t.bg" :accent="t.signal" />
|
||||
@@ -26,21 +26,79 @@ const copy = useCopy()
|
||||
</div>
|
||||
<div
|
||||
v-for="(row, i) in copy.compare.rows" :key="i"
|
||||
class="compare-table-grid"
|
||||
:style="{
|
||||
display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
|
||||
display: 'grid',
|
||||
borderTop: `1px solid ${t.border}`,
|
||||
background: i % 2 === 0 ? t.bg : t.bgAlt,
|
||||
fontFamily: '\'Inter\', sans-serif', fontSize: '15px',
|
||||
}"
|
||||
>
|
||||
<div :style="{ padding: '22px 28px', color: t.fgMuted }">{{ row[0] }}</div>
|
||||
<div :style="{ padding: '22px 28px', color: t.fg, fontWeight: 600, borderLeft: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', gap: '10px' }">
|
||||
<span :style="{ width: '4px', height: '4px', background: t.signal, borderRadius: '999px', flexShrink: 0 }" />
|
||||
{{ row[1] }}
|
||||
<div class="cmp-cat" :style="{ padding: '22px 28px', color: t.fgMuted }">{{ row[0] }}</div>
|
||||
<div class="cmp-val" :style="{ padding: '22px 28px', color: t.fg, fontWeight: 600, borderLeft: `1px solid ${t.border}` }">
|
||||
<span class="cmp-key" :style="{ color: t.fgMuted }">{{ copy.compare.cols[0] }}</span>
|
||||
<span :style="{ display: 'flex', alignItems: 'center', gap: '10px' }">
|
||||
<span :style="{ width: '4px', height: '4px', background: t.signal, borderRadius: '999px', flexShrink: 0 }" />
|
||||
{{ row[1] }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="cmp-val" :style="{ padding: '22px 28px', color: t.fgMuted, borderLeft: `1px solid ${t.border}` }">
|
||||
<span class="cmp-key" :style="{ color: t.fgMuted }">{{ copy.compare.cols[1] }}</span>
|
||||
{{ row[2] }}
|
||||
</div>
|
||||
<div :style="{ padding: '22px 28px', color: t.fgMuted, borderLeft: `1px solid ${t.border}` }">{{ row[2] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.compare-intro-grid {
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
}
|
||||
|
||||
.compare-table-grid {
|
||||
grid-template-columns: 1.2fr 1fr 1fr;
|
||||
}
|
||||
|
||||
/* The per-cell column label only appears once the table stacks on mobile. */
|
||||
.cmp-key {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.compare-intro-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px !important;
|
||||
}
|
||||
|
||||
.compare-table-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Header row is redundant once each value is labelled inline. */
|
||||
.compare-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Category becomes the card title; values drop the column divider + tighten. */
|
||||
.cmp-cat {
|
||||
font-weight: 600;
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
.cmp-val {
|
||||
border-left: none !important;
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 14px !important;
|
||||
}
|
||||
.cmp-key {
|
||||
display: block;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@ withDefaults(defineProps<{
|
||||
pad?: string
|
||||
max?: number
|
||||
}>(), {
|
||||
pad: '120px 64px',
|
||||
pad: 'clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)',
|
||||
max: 1280,
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -9,7 +9,7 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section :style="{ background: t.bg, color: t.fg }">
|
||||
<LandingContainer pad="140px 64px" :max="960">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 140px) clamp(20px, 5vw, 64px)" :max="960">
|
||||
<LandingSectionLabel :label="copy.faq.label" />
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.faq.heading }}</h2>
|
||||
<div :style="{ marginTop: '56px' }">
|
||||
|
||||
@@ -11,14 +11,14 @@ const copy = useCopy()
|
||||
<div :style="{ position: 'absolute', right: '-180px', bottom: '-180px', opacity: 0.05 }">
|
||||
<BrandNodeMark :size="640" :fg="C.carbon" :accent="C.signal" />
|
||||
</div>
|
||||
<LandingContainer pad="140px 64px">
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(48px, 6vw, 96px)', letterSpacing: '-0.04em', lineHeight: 0.98, margin: 0, color: C.bone, textWrap: 'balance', maxWidth: '900px' }">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 140px) clamp(20px, 5vw, 64px)">
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(32px, 6vw, 96px)', letterSpacing: '-0.04em', lineHeight: 0.98, margin: 0, color: C.bone, textWrap: 'balance', maxWidth: '900px' }">
|
||||
<template v-for="(part, i) in copy.finalCta.heading" :key="i">
|
||||
<template v-if="typeof part === 'string'">{{ part }} </template>
|
||||
<span v-else :style="{ color: C.signal }">{{ part.hl }}</span>
|
||||
</template>
|
||||
</h2>
|
||||
<div :style="{ marginTop: '28px', maxWidth: '520px', fontFamily: '\'Inter\', sans-serif', fontSize: '19px', color: 'rgba(244,243,238,0.7)' }">{{ copy.finalCta.sub }}</div>
|
||||
<div :style="{ marginTop: '28px', maxWidth: 'min(100%, 520px)', fontFamily: '\'Inter\', sans-serif', fontSize: '19px', color: 'rgba(244,243,238,0.7)' }">{{ copy.finalCta.sub }}</div>
|
||||
<div :style="{ marginTop: '40px' }">
|
||||
<button :style="{
|
||||
background: C.signal, color: C.carbon, border: 'none',
|
||||
|
||||
@@ -23,8 +23,9 @@ function onLink(e: MouseEvent, href: string) {
|
||||
|
||||
<template>
|
||||
<footer :style="{ background: C.bone, color: C.carbon, borderTop: `1px solid ${t.border}` }">
|
||||
<LandingContainer pad="80px 64px 40px">
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: '48px' }">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 80px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 40px)">
|
||||
<!-- Lockup + 4 link columns: desktop 1.4fr repeat(4,1fr), mobile stack -->
|
||||
<div class="footer-main-grid">
|
||||
<div>
|
||||
<BrandNodeLockup :scale="0.75" :fg="C.carbon" :accent="C.signal" />
|
||||
<div :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.6)', maxWidth: '280px', lineHeight: 1.5 }">{{ copy.footer.tagline }}</div>
|
||||
@@ -34,20 +35,24 @@ function onLink(e: MouseEvent, href: string) {
|
||||
<div>{{ copy.footer.legal.addr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(col, i) in copy.footer.cols" :key="i">
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '18px' }">{{ col[0] }}</div>
|
||||
<div :style="{ display: 'flex', flexDirection: 'column', gap: '12px' }">
|
||||
<NuxtLink
|
||||
v-for="(link, j) in col[1]" :key="j" :to="link[1]"
|
||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.78)' }"
|
||||
@click="onLink($event, link[1])"
|
||||
>{{ link[0] }}</NuxtLink>
|
||||
<!-- Four link columns reflow: 2 per row on tablet, 1 on small mobile -->
|
||||
<div class="footer-link-columns">
|
||||
<div v-for="(col, i) in copy.footer.cols" :key="i">
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '18px' }">{{ col[0] }}</div>
|
||||
<div :style="{ display: 'flex', flexDirection: 'column', gap: '12px' }">
|
||||
<NuxtLink
|
||||
v-for="(link, j) in col[1]" :key="j" :to="link[1]"
|
||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.78)' }"
|
||||
@click="onLink($event, link[1])"
|
||||
>{{ link[0] }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{
|
||||
marginTop: '64px', paddingTop: '28px', borderTop: `1px solid ${t.border}`,
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '24px',
|
||||
flexWrap: 'wrap',
|
||||
fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)',
|
||||
}">
|
||||
<div>{{ copy.footer.copyright }}</div>
|
||||
@@ -62,3 +67,39 @@ function onLink(e: MouseEvent, href: string) {
|
||||
</LandingContainer>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Desktop: lockup column (1.4fr) + one cell that spans the four link columns (4fr) */
|
||||
.footer-main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 4fr;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
/* The four link columns always live in their own sub-grid so they can reflow
|
||||
independently: 4 across on desktop, 2 on tablet, 1 on small mobile. */
|
||||
.footer-link-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Stack lockup on top, link columns below */
|
||||
.footer-main-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Two columns on tablet/large mobile, collapses to 1 on narrow phones */
|
||||
.footer-link-columns {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.footer-link-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,8 +23,8 @@ const brush = {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section :style="{ background: t.bg, color: t.fg, paddingTop: '80px' }">
|
||||
<LandingContainer pad="60px 64px 0">
|
||||
<section :style="{ background: t.bg, color: t.fg, paddingTop: 'clamp(40px, 6vw, 80px)' }">
|
||||
<LandingContainer pad="clamp(40px, 5vw, 60px) clamp(20px, 5vw, 64px) 0">
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '56px' }">
|
||||
<span :style="{ width: '6px', height: '6px', borderRadius: '999px', background: t.signal, boxShadow: `0 0 0 4px ${t.signal}33` }" />
|
||||
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em', whiteSpace: 'nowrap' }">{{ copy.hero.eyebrow }}</span>
|
||||
@@ -32,7 +32,7 @@ const brush = {
|
||||
|
||||
<h1 :style="{
|
||||
fontFamily: '\'Inter Tight\', \'Inter\', sans-serif',
|
||||
fontWeight: 600, fontSize: 'clamp(56px, 7.2vw, 112px)', letterSpacing: '-0.04em',
|
||||
fontWeight: 600, fontSize: 'clamp(38px, 7.2vw, 112px)', letterSpacing: '-0.04em',
|
||||
lineHeight: 0.96, margin: 0, textWrap: 'balance', color: t.fg,
|
||||
}">
|
||||
<template v-for="(part, i) in headline" :key="i">
|
||||
@@ -61,7 +61,7 @@ const brush = {
|
||||
</div>
|
||||
</LandingContainer>
|
||||
|
||||
<LandingContainer pad="80px 64px 120px">
|
||||
<LandingContainer pad="clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 120px)">
|
||||
<LandingProductMockup />
|
||||
</LandingContainer>
|
||||
</section>
|
||||
|
||||
@@ -8,10 +8,10 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section :style="{ background: t.bg, color: t.fg }">
|
||||
<LandingContainer pad="120px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.how.label" />
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.how.heading }}</h2>
|
||||
<div :style="{ marginTop: '80px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '0', position: 'relative' }">
|
||||
<div class="how-steps" :style="{ marginTop: '80px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', position: 'relative' }">
|
||||
<div
|
||||
v-for="(step, i) in copy.how.steps" :key="i"
|
||||
:style="{ padding: '40px 36px 0 0', borderTop: `1px solid ${t.borderStrong}`, position: 'relative' }"
|
||||
@@ -29,3 +29,12 @@ const copy = useCopy()
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Timeline steps touch (gap 0) when side-by-side. When they stack on mobile,
|
||||
add a row gap so each step's top node marker clears the previous step's text. */
|
||||
.how-steps { gap: 0; }
|
||||
@media (max-width: 768px) {
|
||||
.how-steps { row-gap: 52px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
// Sticky top nav with logo, anchor links, language toggle, login + demo CTA.
|
||||
// Ported from landing-sections.jsx Nav (light mode, production subset).
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { APP_URL } from '~/utils/landingTokens'
|
||||
import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor, goToSection } from '~/composables/useLanding'
|
||||
@@ -11,6 +11,8 @@ const copy = useCopy()
|
||||
const lang = useLang()
|
||||
const route = useRoute()
|
||||
|
||||
const mobileOpen = ref(false)
|
||||
|
||||
const items = computed(() => [
|
||||
{ label: copy.value.nav.product, href: '/#suite' },
|
||||
{ label: copy.value.nav.security, href: '/#sovereignty' },
|
||||
@@ -32,6 +34,12 @@ function onNav(e: MouseEvent, href: string) {
|
||||
e.preventDefault()
|
||||
scrollToAnchor(href.slice(href.indexOf('#')))
|
||||
}
|
||||
mobileOpen.value = false
|
||||
}
|
||||
|
||||
function onMobileLink(e: MouseEvent, href: string) {
|
||||
onNav(e, href)
|
||||
mobileOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -43,7 +51,8 @@ function onNav(e: MouseEvent, href: string) {
|
||||
borderBottom: `1px solid ${t.border}`,
|
||||
}">
|
||||
<div :style="{
|
||||
maxWidth: '1280px', margin: '0 auto', padding: '18px 64px',
|
||||
maxWidth: '1280px', margin: '0 auto',
|
||||
padding: `18px clamp(20px, 5vw, 64px)`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
}">
|
||||
<NuxtLink to="/" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click="onLogo">
|
||||
@@ -51,7 +60,8 @@ function onNav(e: MouseEvent, href: string) {
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontWeight: 600, fontSize: '16px', letterSpacing: '-0.02em', color: t.fg }">dezky</div>
|
||||
</NuxtLink>
|
||||
|
||||
<nav :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
|
||||
<!-- Desktop nav cluster — hidden on mobile via scoped CSS -->
|
||||
<nav class="nav-desktop" :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
|
||||
<NuxtLink
|
||||
v-for="(it, i) in items" :key="i" :to="it.href"
|
||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted, letterSpacing: '-0.005em' }"
|
||||
@@ -59,7 +69,8 @@ function onNav(e: MouseEvent, href: string) {
|
||||
>{{ it.label }}</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
|
||||
<!-- Desktop CTA cluster — hidden on mobile via scoped CSS -->
|
||||
<div class="nav-desktop" :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
|
||||
<button
|
||||
:style="{
|
||||
background: 'transparent', border: `1px solid ${t.border}`,
|
||||
@@ -72,6 +83,110 @@ function onNav(e: MouseEvent, href: string) {
|
||||
<a :href="APP_URL" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
|
||||
<LandingBtn variant="primary" @click="goToSection('#final-cta', route.path)">{{ copy.nav.cta }} →</LandingBtn>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger — visible only on mobile via scoped CSS -->
|
||||
<button
|
||||
class="nav-hamburger"
|
||||
:aria-label="mobileOpen ? 'Close menu' : 'Open menu'"
|
||||
:aria-expanded="mobileOpen"
|
||||
:style="{
|
||||
flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
|
||||
gap: '5px', background: 'transparent', border: 'none', cursor: 'pointer',
|
||||
padding: '6px', borderRadius: '4px',
|
||||
}"
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
>
|
||||
<!-- Three bar lines; top/bottom rotate to X when open -->
|
||||
<span :style="{
|
||||
display: 'block', width: '22px', height: '2px',
|
||||
background: t.fg, borderRadius: '2px',
|
||||
transition: 'transform 0.2s, opacity 0.2s',
|
||||
transform: mobileOpen ? 'translateY(7px) rotate(45deg)' : 'none',
|
||||
}" />
|
||||
<span :style="{
|
||||
display: 'block', width: '22px', height: '2px',
|
||||
background: t.fg, borderRadius: '2px',
|
||||
transition: 'opacity 0.2s',
|
||||
opacity: mobileOpen ? 0 : 1,
|
||||
}" />
|
||||
<span :style="{
|
||||
display: 'block', width: '22px', height: '2px',
|
||||
background: t.fg, borderRadius: '2px',
|
||||
transition: 'transform 0.2s, opacity 0.2s',
|
||||
transform: mobileOpen ? 'translateY(-7px) rotate(-45deg)' : 'none',
|
||||
}" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile dropdown panel — JS-toggled, SSR-safe (visibility is CSS-controlled above 768px) -->
|
||||
<div
|
||||
v-if="mobileOpen"
|
||||
class="nav-mobile-panel"
|
||||
:style="{
|
||||
background: 'rgba(250,250,247,0.97)',
|
||||
borderTop: `1px solid ${t.border}`,
|
||||
padding: '24px clamp(20px, 5vw, 64px) 32px',
|
||||
display: 'flex', flexDirection: 'column', gap: '0',
|
||||
}"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="(it, i) in items" :key="i" :to="it.href"
|
||||
:style="{
|
||||
fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fgMuted,
|
||||
letterSpacing: '-0.005em', padding: '14px 0',
|
||||
borderBottom: `1px solid ${t.border}`,
|
||||
display: 'block',
|
||||
}"
|
||||
@click="onMobileLink($event, it.href)"
|
||||
>{{ it.label }}</NuxtLink>
|
||||
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '14px', paddingTop: '24px', flexWrap: 'wrap' }">
|
||||
<button
|
||||
:style="{
|
||||
background: 'transparent', border: `1px solid ${t.border}`,
|
||||
color: t.fgMuted, fontSize: '11px', padding: '6px 10px', borderRadius: '4px',
|
||||
fontFamily: '\'JetBrains Mono\', monospace', letterSpacing: '0.06em', textTransform: 'uppercase',
|
||||
whiteSpace: 'nowrap',
|
||||
}"
|
||||
@click="toggleLang()"
|
||||
>{{ lang === 'da' ? 'da · en' : 'en · da' }}</button>
|
||||
<a
|
||||
:href="APP_URL"
|
||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }"
|
||||
@click="mobileOpen = false"
|
||||
>{{ copy.nav.login }}</a>
|
||||
<LandingBtn variant="primary" @click="() => { goToSection('#final-cta', route.path); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Desktop clusters: visible by default, hidden on mobile */
|
||||
.nav-desktop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Hamburger: hidden by default, shown on mobile */
|
||||
.nav-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile panel: always rendered when v-if is true, but constrained to mobile */
|
||||
@media (max-width: 768px) {
|
||||
.nav-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure the mobile panel is not shown on desktop even if somehow open */
|
||||
@media (min-width: 769px) {
|
||||
.nav-mobile-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@ const copy = useCopy()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LandingContainer pad="120px 64px 0">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px) 0">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
:style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: '8px' }"
|
||||
@@ -24,7 +24,7 @@ const copy = useCopy()
|
||||
|
||||
<h1 :style="{
|
||||
fontFamily: '\'Inter Tight\', \'Inter\', sans-serif', fontWeight: 600,
|
||||
fontSize: 'clamp(40px, 5.4vw, 76px)', letterSpacing: '-0.035em', lineHeight: 1.0,
|
||||
fontSize: 'clamp(30px, 5.4vw, 76px)', letterSpacing: '-0.035em', lineHeight: 1.0,
|
||||
margin: 0, textWrap: 'balance', color: t.fg, maxWidth: '900px',
|
||||
}">{{ title }}</h1>
|
||||
|
||||
|
||||
@@ -41,10 +41,15 @@ const annual = computed(() => monthly.value * 12)
|
||||
const dkk = new Intl.NumberFormat('da-DK', { style: 'currency', currency: 'DKK', maximumFractionDigits: 0 })
|
||||
const fmtMonthly = computed(() => dkk.format(monthly.value))
|
||||
const fmtAnnual = computed(() => dkk.format(annual.value))
|
||||
|
||||
// Expose theme border color to scoped CSS via v-bind() so media-query-driven
|
||||
// border direction changes (left on desktop, top on mobile) can still use the
|
||||
// reactive theme value without window reads.
|
||||
const borderColor = computed(() => t.value.border)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
|
||||
<div class="calc-grid" :style="{ display: 'grid', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
|
||||
<!-- Controls -->
|
||||
<div :style="{ padding: '36px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '28px', justifyContent: 'center' }">
|
||||
<div>
|
||||
@@ -74,7 +79,7 @@ const fmtAnnual = computed(() => dkk.format(annual.value))
|
||||
</div>
|
||||
|
||||
<!-- Output -->
|
||||
<div :style="{ padding: '36px', background: t.bgAlt, borderLeft: `1px solid ${t.border}`, display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
|
||||
<div class="calc-output" :style="{ padding: '36px', background: t.bgAlt, display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.monthlyLabel }}</div>
|
||||
<div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(40px, 5vw, 60px)', letterSpacing: '-0.03em', lineHeight: 1.0, color: t.fg, marginTop: '8px' }">{{ fmtMonthly }}</div>
|
||||
<div :style="{ marginTop: '20px', paddingTop: '20px', borderTop: `1px solid ${t.border}`, fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted }">
|
||||
@@ -83,3 +88,24 @@ const fmtAnnual = computed(() => dkk.format(annual.value))
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Desktop: two equal columns; output panel has a left divider. */
|
||||
.calc-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.calc-output {
|
||||
border-left: 1px solid v-bind(borderColor);
|
||||
}
|
||||
|
||||
/* Mobile: stack to single column; swap left divider to a top divider. */
|
||||
@media (max-width: 768px) {
|
||||
.calc-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.calc-output {
|
||||
border-left: none;
|
||||
border-top: 1px solid v-bind(borderColor);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@ const initial = computed(() => (props.name[0] ?? '').toUpperCase())
|
||||
<template>
|
||||
<div :style="{
|
||||
background: bg, border: `1px solid ${border}`, borderRadius: '4px',
|
||||
padding: '20px 22px', display: 'flex', alignItems: 'center', gap: '16px',
|
||||
padding: '20px 22px', display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap',
|
||||
opacity: placeholder ? 0.55 : 1,
|
||||
borderStyle: placeholder ? 'dashed' : 'solid',
|
||||
}">
|
||||
@@ -28,7 +28,7 @@ const initial = computed(() => (props.name[0] ?? '').toUpperCase())
|
||||
fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 700,
|
||||
fontSize: '22px', color: '#FFF', letterSpacing: '-0.02em', flexShrink: 0,
|
||||
}">{{ initial }}</div>
|
||||
<div :style="{ flex: 1 }">
|
||||
<div :style="{ flex: 1, minWidth: 0 }">
|
||||
<div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '17px', color: fg, letterSpacing: '-0.02em' }">{{ name }}</div>
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(0,0,0,0.5)', marginTop: '2px' }">{{ subtitle }}</div>
|
||||
</div>
|
||||
|
||||
@@ -8,9 +8,9 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section id="pricing" :style="{ background: t.bgAlt, color: t.fg, borderTop: `1px solid ${t.border}`, borderBottom: `1px solid ${t.border}`, scrollMarginTop: '72px' }">
|
||||
<LandingContainer pad="120px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.pricing.label" />
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }">
|
||||
<div class="pricing-grid" :style="{ display: 'grid', gap: '80px', alignItems: 'center' }">
|
||||
<div>
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.pricing.heading }}</h2>
|
||||
<div :style="{ marginTop: '28px', maxWidth: '520px' }">
|
||||
@@ -23,7 +23,7 @@ const copy = useCopy()
|
||||
<div :style="{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: '6px', padding: '36px 36px' }">
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.1em', textTransform: 'uppercase' }">{{ copy.pricing.teaser }}</div>
|
||||
<div :style="{ display: 'flex', alignItems: 'baseline', gap: '12px', marginTop: '12px' }">
|
||||
<span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontSize: '96px', fontWeight: 600, letterSpacing: '-0.045em', lineHeight: 1, color: t.fg }">{{ copy.pricing.price }}</span>
|
||||
<span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontSize: 'clamp(56px, 10vw, 96px)', fontWeight: 600, letterSpacing: '-0.045em', lineHeight: 1, color: t.fg }">{{ copy.pricing.price }}</span>
|
||||
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '13px', color: t.fgMuted }">{{ copy.pricing.unit }}</span>
|
||||
</div>
|
||||
<div :style="{ height: '1px', background: t.border, margin: '28px 0' }" />
|
||||
@@ -33,3 +33,14 @@ const copy = useCopy()
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pricing-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,9 +7,9 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section :style="{ background: t.bg, color: t.fg }">
|
||||
<LandingContainer pad="120px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.problem.label" />
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '80px' }">
|
||||
<div class="problem-grid" :style="{ display: 'grid', gap: '80px' }">
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.problem.heading }}</h2>
|
||||
<div :style="{ display: 'flex', flexDirection: 'column', gap: '18px', paddingTop: '12px' }">
|
||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, maxWidth: '620px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.problem.p1 }}</p>
|
||||
@@ -19,3 +19,14 @@ const copy = useCopy()
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.problem-grid {
|
||||
grid-template-columns: 1fr 1.4fr;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.problem-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,13 +2,47 @@
|
||||
// Stylized customer-portal dashboard shown under the hero. Illustrative only —
|
||||
// labels are intentionally Danish in both languages. Ported from
|
||||
// landing-sections.jsx ProductMockup (light mode).
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { C } from '~/utils/landingTokens'
|
||||
import { useTheme, useDark } from '~/composables/useLanding'
|
||||
|
||||
const t = useTheme()
|
||||
const dark = useDark()
|
||||
|
||||
// The mockup is a fixed-layout dashboard. On desktop it runs fluid/full-width;
|
||||
// when the available width drops below its comfortable design width we scale
|
||||
// the WHOLE thing down (CSS zoom reflows, so no height hacks) instead of
|
||||
// reflowing the internal dashboard — keeps it a recognisable mini-dashboard on
|
||||
// phones. SSR-safe: renders at zoom 1 on the server, recomputes after mount.
|
||||
const DESIGN_W = 760
|
||||
const frame = ref<HTMLElement | null>(null)
|
||||
const zoom = ref(1)
|
||||
const frameWidth = ref('100%')
|
||||
let ro: ResizeObserver | null = null
|
||||
|
||||
function recompute() {
|
||||
const parent = frame.value?.parentElement
|
||||
if (!parent) return
|
||||
const w = parent.clientWidth
|
||||
if (w >= DESIGN_W) {
|
||||
zoom.value = 1
|
||||
frameWidth.value = '100%'
|
||||
} else {
|
||||
frameWidth.value = `${DESIGN_W}px`
|
||||
zoom.value = Math.max(0.4, w / DESIGN_W)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
recompute()
|
||||
const parent = frame.value?.parentElement
|
||||
if (parent && typeof ResizeObserver !== 'undefined') {
|
||||
ro = new ResizeObserver(recompute)
|
||||
ro.observe(parent)
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => ro?.disconnect())
|
||||
|
||||
const m = computed(() => ({
|
||||
bg: dark.value ? '#171715' : '#FFFFFF',
|
||||
border: dark.value ? 'rgba(255,255,255,0.08)' : 'rgba(10,10,10,0.08)',
|
||||
@@ -39,10 +73,11 @@ const recent: [string, string, string][] = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="{
|
||||
<div ref="frame" :style="{
|
||||
background: m.bg, border: `1px solid ${m.border}`, borderRadius: '8px',
|
||||
boxShadow: dark ? '0 40px 80px rgba(0,0,0,0.5)' : '0 30px 80px rgba(10,10,10,0.08)',
|
||||
overflow: 'hidden',
|
||||
width: frameWidth, zoom,
|
||||
}">
|
||||
<!-- Window chrome -->
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '14px 18px', borderBottom: `1px solid ${m.border}` }">
|
||||
@@ -52,7 +87,7 @@ const recent: [string, string, string][] = [
|
||||
<div :style="{ marginLeft: '16px', padding: '4px 12px', background: m.subtle, borderRadius: '4px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: m.muted }">app.dezky.eu / dashboard</div>
|
||||
</div>
|
||||
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '460px' }">
|
||||
<div class="mockup-body" :style="{ display: 'grid', minHeight: '460px' }">
|
||||
<!-- Sidebar -->
|
||||
<div :style="{ borderRight: `1px solid ${m.border}`, padding: '20px 0' }">
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0 20px', marginBottom: '24px' }">
|
||||
@@ -84,8 +119,8 @@ const recent: [string, string, string][] = [
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div :style="{ padding: '28px 32px' }">
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }">
|
||||
<div :style="{ padding: 'clamp(16px, 4vw, 28px) clamp(16px, 4vw, 32px)' }">
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: '8px' }">
|
||||
<div>
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase' }">indbakke</div>
|
||||
<div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '28px', color: m.fg, marginTop: '6px', letterSpacing: '-0.02em' }">god morgen, anne</div>
|
||||
@@ -95,7 +130,7 @@ const recent: [string, string, string][] = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="{ marginTop: '24px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }">
|
||||
<div :style="{ marginTop: '24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 120px), 1fr))', gap: '12px' }">
|
||||
<div v-for="(s, i) in stats" :key="i" :style="{ padding: '16px 18px', background: m.subtle, borderRadius: '4px' }">
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '10px', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase' }">{{ s[2] }}</div>
|
||||
<div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontSize: '28px', fontWeight: 600, color: m.fg, marginTop: '4px' }">{{ s[1] }}</div>
|
||||
@@ -107,8 +142,8 @@ const recent: [string, string, string][] = [
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '10px', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '12px' }">seneste · indbakke</div>
|
||||
<div
|
||||
v-for="(r, i) in recent" :key="i"
|
||||
class="mockup-mail-row"
|
||||
:style="{
|
||||
display: 'grid', gridTemplateColumns: '200px 1fr 60px',
|
||||
padding: '12px 0', borderTop: i === 0 ? `1px solid ${m.border}` : 'none',
|
||||
borderBottom: `1px solid ${m.border}`,
|
||||
fontFamily: '\'Inter\', sans-serif', fontSize: '13px', alignItems: 'center',
|
||||
@@ -123,3 +158,15 @@ const recent: [string, string, string][] = [
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Fixed dashboard layout — the whole mockup is scaled to fit on small screens
|
||||
(see the zoom logic in <script>), so the internal grid stays desktop-shaped. */
|
||||
.mockup-body {
|
||||
grid-template-columns: 220px 1fr;
|
||||
}
|
||||
.mockup-mail-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,7 @@ const labelParts = computed(() => {
|
||||
|
||||
<template>
|
||||
<section id="sovereignty" :style="{ background: t.invert, color: t.invertFg, scrollMarginTop: '72px' }">
|
||||
<LandingContainer pad="140px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 140px) clamp(20px, 5vw, 64px)">
|
||||
<div :style="{
|
||||
display: 'flex', alignItems: 'center', gap: '14px',
|
||||
paddingBottom: '24px', marginBottom: '56px',
|
||||
@@ -37,7 +37,7 @@ const labelParts = computed(() => {
|
||||
<span>—</span>
|
||||
<span>{{ labelParts.text }}</span>
|
||||
</div>
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '96px' }">
|
||||
<div class="sovereignty-main-grid" :style="{ display: 'grid', gap: '96px' }">
|
||||
<div>
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.invertFg }">{{ copy.sovereignty.heading }}</h2>
|
||||
<div :style="{ marginTop: '36px', display: 'flex', flexDirection: 'column', gap: '18px', maxWidth: '540px' }">
|
||||
@@ -47,8 +47,9 @@ const labelParts = computed(() => {
|
||||
<div :style="{ paddingTop: '8px' }">
|
||||
<div
|
||||
v-for="(row, i) in copy.sovereignty.checks" :key="i"
|
||||
class="sovereignty-check-row"
|
||||
:style="{
|
||||
display: 'grid', gridTemplateColumns: '1fr 1.4fr', padding: '20px 0',
|
||||
display: 'grid', padding: '20px 0',
|
||||
borderTop: i === 0 ? `1px solid ${rule18}` : 'none',
|
||||
borderBottom: `1px solid ${rule10}`,
|
||||
fontFamily: '\'Inter\', sans-serif', fontSize: '14px', alignItems: 'baseline',
|
||||
@@ -62,3 +63,23 @@ const labelParts = computed(() => {
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sovereignty-main-grid {
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
}
|
||||
|
||||
.sovereignty-check-row {
|
||||
grid-template-columns: 1fr 1.4fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sovereignty-main-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sovereignty-check-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,17 +8,18 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section id="stack" :style="{ background: t.bg, color: t.fg, scrollMarginTop: '72px' }">
|
||||
<LandingContainer pad="140px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 140px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.stack.label" />
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '80px', alignItems: 'end', marginBottom: '56px' }">
|
||||
<div class="stack-intro-grid" :style="{ display: 'grid', gap: '80px', alignItems: 'end', marginBottom: '56px' }">
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.stack.heading }}</h2>
|
||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '480px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.stack.lede }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="(row, i) in copy.stack.rows" :key="i"
|
||||
class="stack-row-grid"
|
||||
:style="{
|
||||
display: 'grid', gridTemplateColumns: '1.1fr 1.6fr 1.3fr',
|
||||
display: 'grid',
|
||||
gap: '24px', padding: '24px 0',
|
||||
borderTop: i === 0 ? `1px solid ${t.borderStrong}` : 'none',
|
||||
borderBottom: `1px solid ${t.border}`,
|
||||
@@ -33,3 +34,23 @@ const copy = useCopy()
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stack-intro-grid {
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
}
|
||||
|
||||
.stack-row-grid {
|
||||
grid-template-columns: 1.1fr 1.6fr 1.3fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stack-intro-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stack-row-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,13 +8,13 @@ const copy = useCopy()
|
||||
|
||||
<template>
|
||||
<section id="suite" :style="{ background: t.bgAlt, color: t.fg, borderTop: `1px solid ${t.border}`, borderBottom: `1px solid ${t.border}`, scrollMarginTop: '72px' }">
|
||||
<LandingContainer pad="120px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.suite.label" />
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '80px', alignItems: 'end', marginBottom: '64px' }">
|
||||
<div class="suite-intro-grid" :style="{ display: 'grid', gap: '80px', alignItems: 'end', marginBottom: '64px' }">
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.suite.heading }}</h2>
|
||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '520px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.suite.lede }}</p>
|
||||
</div>
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '0', border: `1px solid ${t.border}` }">
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))', gap: '0', border: `1px solid ${t.border}` }">
|
||||
<div
|
||||
v-for="(card, i) in copy.suite.cards" :key="i"
|
||||
:style="{
|
||||
@@ -49,3 +49,15 @@ const copy = useCopy()
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.suite-intro-grid {
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.suite-intro-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -30,12 +30,12 @@ const partnerCards = computed(() =>
|
||||
|
||||
<template>
|
||||
<section id="whitelabel" :style="{ background: sectionBg, color: t.fg, borderTop: `1px solid ${t.border}`, borderBottom: `1px solid ${t.border}`, scrollMarginTop: '72px' }">
|
||||
<LandingContainer pad="120px 64px">
|
||||
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)">
|
||||
<LandingSectionLabel :label="copy.whitelabel.label" />
|
||||
<div :style="{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '80px', alignItems: 'start' }">
|
||||
<div class="whitelabel-grid" :style="{ display: 'grid', gap: 'clamp(40px, 5vw, 80px)', alignItems: 'start' }">
|
||||
<div>
|
||||
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.whitelabel.heading }}</h2>
|
||||
<div :style="{ marginTop: '32px', maxWidth: '520px' }">
|
||||
<div :style="{ marginTop: '32px', maxWidth: 'min(100%, 520px)' }">
|
||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '640px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.whitelabel.lede }}</p>
|
||||
</div>
|
||||
<div :style="{ marginTop: '32px', display: 'flex', flexDirection: 'column', gap: '12px' }">
|
||||
@@ -65,3 +65,14 @@ const partnerCards = computed(() =>
|
||||
</LandingContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.whitelabel-grid {
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.whitelabel-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user