feat: rebrand landing page to match dobetternorge.no
- Add sticky navy nav with logo-header.webp, Legal Tools badge, lang switcher, red CTA - Replace showcase-hero with full-bleed dark hero (Crimson Pro, IBM Plex Mono, stat pills) - Redesign tool cards: 3-col grid, 178px illustrated SVG art per card (7 unique illustrations) - Add lt-trust 3-col strip and lt-access navy gate panel - Rebuild footer with 3-col navy layout matching main site - Add Crimson Pro / Roboto / IBM Plex Mono Google Fonts via <link> + @import - CSS: new lt-* variables, all new landing component styles appended to tools.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -46,6 +46,23 @@ if (isset($_GET['sso']) && !dbnToolsIsAuthenticated()) {
|
||||
$tools = dbnToolsLaunchedTools($uiLang);
|
||||
$langPath = '/';
|
||||
$toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode($returnPath);
|
||||
|
||||
// SVG illustrations for each tool card (navy bg, brand palette)
|
||||
$toolSvgs = [
|
||||
'transcribe' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><line x1="0" y1="44" x2="480" y2="44" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><line x1="0" y1="89" x2="480" y2="89" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><line x1="0" y1="134" x2="480" y2="134" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><path d="M0,89 C10,89 12,112 20,112 C28,112 30,66 38,66 C46,66 48,132 56,132 C64,132 66,46 74,46 C82,46 84,124 92,124 C100,124 102,72 110,72 C118,72 120,108 128,108 C136,108 138,86 148,89" fill="none" stroke="#f4c542" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M332,89 C342,89 344,70 352,70 C360,70 362,112 370,112 C378,112 380,58 388,58 C396,58 398,120 406,120 C414,120 416,76 424,76 C432,76 434,102 442,102 C450,102 452,84 462,86 C470,87 472,89 480,89" fill="none" stroke="#f4c542" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="217" y="33" width="46" height="68" rx="23" fill="none" stroke="white" stroke-width="2.5" opacity="0.88"/><line x1="226" y1="57" x2="254" y2="57" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><line x1="226" y1="68" x2="254" y2="68" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><line x1="226" y1="79" x2="254" y2="79" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><path d="M203,84 Q203,122 240,122 Q277,122 277,84" fill="none" stroke="white" stroke-width="2.5" opacity="0.84"/><line x1="240" y1="122" x2="240" y2="148" stroke="white" stroke-width="2.5" opacity="0.84"/><line x1="221" y1="148" x2="259" y2="148" stroke="white" stroke-width="2.5" opacity="0.84"/></svg>',
|
||||
|
||||
'timeline' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><rect x="400" y="0" width="80" height="178" fill="rgba(186,12,47,0.07)"/><line x1="38" y1="89" x2="445" y2="89" stroke="rgba(244,197,66,0.42)" stroke-width="2"/><circle cx="38" cy="89" r="4" fill="rgba(244,197,66,0.38)"/><polyline points="439,82 449,89 439,96" fill="none" stroke="rgba(244,197,66,0.42)" stroke-width="2" stroke-linejoin="round"/><line x1="94" y1="89" x2="94" y2="58" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="94" cy="89" r="7" fill="#f4c542"/><text x="94" y="48" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.58)">JAN</text><line x1="175" y1="89" x2="175" y2="120" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="175" cy="89" r="6" fill="rgba(255,255,255,0.76)"/><text x="175" y="138" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.55)">MAR</text><line x1="256" y1="89" x2="256" y2="50" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="256" cy="89" r="11" fill="#ba0c2f" opacity="0.92"/><circle cx="256" cy="89" r="5" fill="white" opacity="0.94"/><text x="256" y="40" text-anchor="middle" font-family="monospace" font-size="10" fill="#f4c542">HEARING</text><line x1="336" y1="89" x2="336" y2="120" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="336" cy="89" r="6" fill="rgba(255,255,255,0.76)"/><text x="336" y="138" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.55)">AUG</text><line x1="406" y1="89" x2="406" y2="58" stroke="rgba(255,255,255,0.18)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="406" cy="89" r="8" fill="none" stroke="rgba(244,197,66,0.46)" stroke-width="2" stroke-dasharray="4,2"/><text x="406" y="48" text-anchor="middle" font-family="monospace" font-size="10" fill="rgba(255,255,255,0.32)">PENDING</text></svg>',
|
||||
|
||||
'redact' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g opacity="0.09" stroke="white" stroke-width="1"><line x1="44" y1="38" x2="138" y2="38"/><line x1="44" y1="52" x2="112" y2="52"/><line x1="44" y1="66" x2="124" y2="66"/><line x1="44" y1="80" x2="100" y2="80"/><line x1="44" y1="110" x2="130" y2="110"/><line x1="44" y1="124" x2="106" y2="124"/></g><rect x="155" y="21" width="176" height="140" rx="4" fill="rgba(0,0,0,0.18)"/><rect x="152" y="18" width="176" height="140" rx="4" fill="#fff" opacity="0.97"/><path d="M296,18 L328,18 L296,50 Z" fill="rgba(0,32,91,0.09)"/><line x1="296" y1="18" x2="296" y2="50" stroke="rgba(0,32,91,0.14)" stroke-width="1"/><line x1="296" y1="50" x2="328" y2="50" stroke="rgba(0,32,91,0.14)" stroke-width="1"/><line x1="168" y1="38" x2="286" y2="38" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="50" x2="264" y2="50" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="168" y="62" width="136" height="12" rx="2" fill="#111"/><rect x="168" y="82" width="82" height="12" rx="2" fill="#111"/><line x1="257" y1="88" x2="294" y2="88" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="104" x2="290" y2="104" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="168" y="116" width="114" height="12" rx="2" fill="#111"/><line x1="289" y1="122" x2="302" y2="122" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="138" x2="280" y2="138" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="150" x2="244" y2="150" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="338" y="120" width="42" height="11" rx="4" fill="#ba0c2f" transform="rotate(-40 359 125)"/><rect x="338" y="120" width="9" height="11" rx="3" fill="rgba(244,197,66,0.28)" transform="rotate(-40 359 125)"/><polygon points="318,147 326,139 330,143 322,151" fill="#ba0c2f"/></svg>',
|
||||
|
||||
'barnevernet' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><rect x="0" y="0" width="480" height="8" fill="rgba(186,12,47,0.22)"/><rect x="0" y="170" width="480" height="8" fill="rgba(186,12,47,0.22)"/><rect x="147" y="22" width="196" height="142" rx="4" fill="rgba(0,0,0,0.18)"/><rect x="144" y="19" width="196" height="142" rx="4" fill="#fff" opacity="0.97"/><rect x="144" y="19" width="196" height="28" rx="4" fill="#00205b"/><rect x="144" y="38" width="196" height="9" fill="#00205b"/><line x1="160" y1="31" x2="224" y2="31" stroke="rgba(255,255,255,0.60)" stroke-width="2"/><line x1="160" y1="39" x2="202" y2="39" stroke="rgba(255,255,255,0.28)" stroke-width="1.5"/><line x1="160" y1="61" x2="318" y2="61" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="73" x2="296" y2="73" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="85" x2="306" y2="85" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="97" x2="278" y2="97" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="112" x2="318" y2="112" stroke="rgba(0,32,91,0.11)" stroke-width="1"/><line x1="160" y1="122" x2="298" y2="122" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="134" x2="284" y2="134" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><circle cx="298" cy="138" r="26" fill="none" stroke="rgba(186,12,47,0.68)" stroke-width="2.5"/><circle cx="298" cy="138" r="20" fill="none" stroke="rgba(186,12,47,0.35)" stroke-width="1"/><line x1="286" y1="138" x2="310" y2="138" stroke="rgba(186,12,47,0.65)" stroke-width="3"/><line x1="298" y1="126" x2="298" y2="150" stroke="rgba(186,12,47,0.65)" stroke-width="3"/><circle cx="274" cy="118" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="282" cy="112" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="291" cy="110" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="300" cy="110" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="309" cy="112" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="318" cy="118" r="1.4" fill="rgba(186,12,47,0.50)"/></svg>',
|
||||
|
||||
'advocate' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><radialGradient id="adv_g" cx="50%" cy="40%" r="55%"><stop offset="0%" stop-color="rgba(244,197,66,0.11)"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><rect width="480" height="178" fill="#00205b"/><rect width="480" height="178" fill="url(#adv_g)"/><line x1="240" y1="22" x2="240" y2="158" stroke="rgba(255,255,255,0.84)" stroke-width="3" stroke-linecap="round"/><line x1="126" y1="68" x2="354" y2="68" stroke="rgba(255,255,255,0.84)" stroke-width="3" stroke-linecap="round"/><circle cx="240" cy="68" r="6" fill="#f4c542"/><circle cx="240" cy="22" r="5" fill="#f4c542"/><path d="M214,158 L266,158 L240,128 Z" fill="rgba(255,255,255,0.82)"/><line x1="126" y1="68" x2="126" y2="118" stroke="rgba(255,255,255,0.60)" stroke-width="1.8"/><line x1="354" y1="68" x2="354" y2="106" stroke="rgba(255,255,255,0.60)" stroke-width="1.8"/><path d="M100,118 Q126,132 152,118" fill="none" stroke="rgba(255,255,255,0.80)" stroke-width="2.5" stroke-linecap="round"/><line x1="100" y1="118" x2="152" y2="118" stroke="rgba(255,255,255,0.24)" stroke-width="1"/><path d="M328,106 Q354,120 380,106" fill="none" stroke="rgba(255,255,255,0.80)" stroke-width="2.5" stroke-linecap="round"/><line x1="328" y1="106" x2="380" y2="106" stroke="rgba(255,255,255,0.24)" stroke-width="1"/><circle cx="118" cy="116" r="7" fill="rgba(244,197,66,0.58)"/><circle cx="134" cy="117" r="7" fill="rgba(244,197,66,0.38)"/><rect x="346" y="100" width="17" height="11" rx="2" fill="rgba(255,255,255,0.38)"/><rect x="366" y="99" width="11" height="12" rx="2" fill="rgba(255,255,255,0.24)"/></svg>',
|
||||
|
||||
'deep-research' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g stroke="rgba(244,197,66,0.24)" stroke-width="1.5" fill="none"><line x1="88" y1="48" x2="178" y2="88"/><line x1="88" y1="48" x2="88" y2="138"/><line x1="88" y1="138" x2="178" y2="88"/><line x1="178" y1="88" x2="268" y2="48"/><line x1="178" y1="88" x2="268" y2="138"/><line x1="268" y1="48" x2="268" y2="138"/><line x1="268" y1="48" x2="358" y2="68"/><line x1="268" y1="138" x2="358" y2="128"/></g><circle cx="88" cy="48" r="10" fill="rgba(244,197,66,0.68)"/><circle cx="88" cy="138" r="8" fill="rgba(255,255,255,0.46)"/><circle cx="178" cy="88" r="13" fill="#f4c542"/><circle cx="268" cy="48" r="9" fill="rgba(255,255,255,0.46)"/><circle cx="268" cy="138" r="8" fill="rgba(244,197,66,0.56)"/><circle cx="358" cy="68" r="9" fill="rgba(255,255,255,0.38)"/><circle cx="358" cy="128" r="8" fill="rgba(244,197,66,0.46)"/><circle cx="358" cy="88" r="44" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="3"/><line x1="392" y1="122" x2="424" y2="154" stroke="rgba(255,255,255,0.55)" stroke-width="4" stroke-linecap="round"/><circle cx="350" cy="80" r="6" fill="rgba(244,197,66,0.88)"/><circle cx="370" cy="96" r="5" fill="rgba(255,255,255,0.78)"/><line x1="350" y1="80" x2="370" y2="96" stroke="rgba(244,197,66,0.46)" stroke-width="1.5"/></svg>',
|
||||
|
||||
'corpus' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g stroke="rgba(244,197,66,0.28)" stroke-width="1.5" fill="none"><line x1="286" y1="54" x2="376" y2="36"/><line x1="286" y1="89" x2="390" y2="89"/><line x1="286" y1="124" x2="376" y2="143"/></g><circle cx="382" cy="36" r="16" fill="rgba(244,197,66,0.15)" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><circle cx="396" cy="89" r="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.22)" stroke-width="1.5"/><circle cx="382" cy="143" r="16" fill="rgba(186,12,47,0.14)" stroke="rgba(186,12,47,0.34)" stroke-width="1.5"/><text x="382" y="40" text-anchor="middle" font-family="monospace" font-size="8" fill="rgba(244,197,66,0.72)">ECHR</text><text x="396" y="93" text-anchor="middle" font-family="monospace" font-size="7" fill="rgba(255,255,255,0.52)">LOV</text><text x="382" y="147" text-anchor="middle" font-family="monospace" font-size="7" fill="rgba(255,200,200,0.52)">BVJ</text><ellipse cx="196" cy="40" rx="78" ry="13" fill="rgba(0,18,56,0.94)" stroke="rgba(244,197,66,0.68)" stroke-width="1.5"/><rect x="118" y="40" width="156" height="26" fill="rgba(0,14,46,0.96)"/><ellipse cx="196" cy="66" rx="78" ry="13" fill="rgba(0,12,40,0.96)" stroke="rgba(244,197,66,0.48)" stroke-width="1.5"/><text x="196" y="58" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(244,197,66,0.62)">220K PASSAGES</text><ellipse cx="196" cy="78" rx="78" ry="13" fill="rgba(0,28,76,0.94)" stroke="rgba(255,255,255,0.36)" stroke-width="1.5"/><rect x="118" y="78" width="156" height="26" fill="rgba(0,12,46,0.96)"/><ellipse cx="196" cy="104" rx="78" ry="13" fill="rgba(0,10,38,0.96)" stroke="rgba(255,255,255,0.26)" stroke-width="1.5"/><text x="196" y="96" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(255,255,255,0.46)">QDRANT + AZURE</text><ellipse cx="196" cy="116" rx="78" ry="13" fill="rgba(186,12,47,0.18)" stroke="rgba(186,12,47,0.48)" stroke-width="1.5"/><rect x="118" y="116" width="156" height="20" fill="rgba(100,4,18,0.14)"/><ellipse cx="196" cy="136" rx="78" ry="13" fill="rgba(80,3,14,0.20)" stroke="rgba(186,12,47,0.32)" stroke-width="1.5"/><text x="196" y="130" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(255,170,170,0.48)">NOMIC EMBED</text></svg>',
|
||||
];
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="<?= htmlspecialchars($uiLang) ?>">
|
||||
@@ -60,10 +77,13 @@ $toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode($re
|
||||
<meta property="og:description" content="<?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?>">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://tools.dobetternorge.no/">
|
||||
<meta name="theme-color" content="#f6f2ea">
|
||||
<meta name="theme-color" content="#00205B">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;700&display=swap">
|
||||
<link rel="stylesheet" href="assets/css/tools.css">
|
||||
</head>
|
||||
<body data-authenticated="<?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>">
|
||||
<body data-authenticated="<?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>" class="<?= dbnToolsIsAuthenticated() ? 'lt-app' : 'lt-landing' ?>">
|
||||
<script>
|
||||
window.DBN_TOOLS_AUTHENTICATED = <?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>;
|
||||
window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
|
||||
@@ -122,78 +142,100 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
|
||||
</section>
|
||||
</main>
|
||||
<?php else: ?>
|
||||
<main id="publicLanding" class="showcase-page dbn-public-tools">
|
||||
<header class="showcase-header">
|
||||
<div class="showcase-header-inner">
|
||||
<div class="showcase-brand">
|
||||
<p class="eyebrow"><?= htmlspecialchars(dbnToolsT('landing_kicker', $uiLang)) ?></p>
|
||||
<h1 class="showcase-title"><?= htmlspecialchars(dbnToolsT('landing_title', $uiLang)) ?></h1>
|
||||
<p class="showcase-tagline"><?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?></p>
|
||||
</div>
|
||||
<div class="showcase-header-actions">
|
||||
<nav class="shell-lang-switcher" aria-label="Language">
|
||||
<main id="publicLanding" class="dbn-public-tools">
|
||||
|
||||
<header class="lt-nav">
|
||||
<a href="https://dobetternorge.no" class="lt-nav__brand">
|
||||
<picture>
|
||||
<source srcset="https://dobetternorge.no/assets/images/brand/logo-header.webp" type="image/webp">
|
||||
<img class="lt-nav__logo" src="https://dobetternorge.no/assets/images/brand/logo-header.png" alt="Do Better Norge" width="140" height="36" loading="eager">
|
||||
</picture>
|
||||
<span class="lt-nav__badge">Legal Tools</span>
|
||||
</a>
|
||||
<div class="lt-nav__right">
|
||||
<nav class="shell-lang-switcher" aria-label="Language">
|
||||
<?php foreach (dbnToolsSupportedLanguages() as $langCode): ?>
|
||||
<a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode . '&return=' . urlencode($returnPath)) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a>
|
||||
<a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode . '&return=' . urlencode($returnPath)) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
<a href="#access" class="cta-button"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
</div>
|
||||
</nav>
|
||||
<a href="#access" class="lt-nav__cta"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="landing-hero">
|
||||
<div class="landing-hero__copy">
|
||||
<p class="manifesto-eyebrow"><?= htmlspecialchars(dbnToolsT('manifesto_eyebrow', $uiLang)) ?></p>
|
||||
<h2><?= htmlspecialchars(dbnToolsT('manifesto_title', $uiLang)) ?></h2>
|
||||
<p><?= htmlspecialchars(dbnToolsT('manifesto_sub', $uiLang)) ?></p>
|
||||
</div>
|
||||
<div class="landing-hero__stats">
|
||||
<div><strong>23</strong><span><?= htmlspecialchars(dbnToolsT('stat_echr', $uiLang)) ?></span></div>
|
||||
<div><strong>1,731</strong><span><?= htmlspecialchars(dbnToolsT('stat_tribunal', $uiLang)) ?></span></div>
|
||||
<div><strong>20+</strong><span><?= htmlspecialchars(dbnToolsT('stat_pending', $uiLang)) ?></span></div>
|
||||
<section class="lt-hero">
|
||||
<div class="lt-hero__inner">
|
||||
<p class="lt-hero__kicker">AI Legal Tools · Norway · Free for members</p>
|
||||
<h1 class="lt-hero__title"><?= htmlspecialchars(dbnToolsT('landing_title', $uiLang)) ?></h1>
|
||||
<p class="lt-hero__body"><?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?></p>
|
||||
<div class="lt-hero__stats">
|
||||
<div class="lt-hero__stat">
|
||||
<strong>23</strong>
|
||||
<span><?= htmlspecialchars(dbnToolsT('stat_echr', $uiLang)) ?></span>
|
||||
</div>
|
||||
<div class="lt-hero__stat">
|
||||
<strong>1,731</strong>
|
||||
<span><?= htmlspecialchars(dbnToolsT('stat_tribunal', $uiLang)) ?></span>
|
||||
</div>
|
||||
<div class="lt-hero__stat">
|
||||
<strong>20+</strong>
|
||||
<span><?= htmlspecialchars(dbnToolsT('stat_pending', $uiLang)) ?></span>
|
||||
</div>
|
||||
<div class="lt-hero__stat">
|
||||
<strong>220K</strong>
|
||||
<span>Legal passages indexed</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#tools" class="lt-hero__cta-link">Explore tools ↓</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cap-section">
|
||||
<div class="section-inner">
|
||||
<p class="eyebrow"><?= htmlspecialchars(dbnToolsT('tools_title', $uiLang)) ?></p>
|
||||
<div class="cap-grid cap-grid--six">
|
||||
<?php foreach ($tools as $item): ?>
|
||||
<article class="cap-card">
|
||||
<span class="cap-label"><?= htmlspecialchars($item['badge']) ?></span>
|
||||
<h3><?= htmlspecialchars($item['label']) ?></h3>
|
||||
<p><?= htmlspecialchars($item['description']) ?></p>
|
||||
</article>
|
||||
<section class="lt-tools" id="tools">
|
||||
<div class="lt-tools__header">
|
||||
<p class="lt-tools__eyebrow"><?= htmlspecialchars(dbnToolsT('tools_title', $uiLang)) ?></p>
|
||||
<h2 class="lt-tools__title">Built for families navigating a complex system.</h2>
|
||||
<p class="lt-tools__sub">Seven purpose-built AI tools — from audio transcription to deep legal research. Every tool processes your documents in memory and discards them when you’re done.</p>
|
||||
</div>
|
||||
<div class="lt-grid">
|
||||
<?php foreach ($tools as $slug => $item): ?>
|
||||
<a class="lt-card" href="#access" data-tool="<?= htmlspecialchars($slug) ?>">
|
||||
<div class="lt-card__art" aria-hidden="true">
|
||||
<?= $toolSvgs[$slug] ?? '' ?>
|
||||
</div>
|
||||
<div class="lt-card__body">
|
||||
<p class="lt-card__badge"><?= htmlspecialchars($item['badge']) ?></p>
|
||||
<h3 class="lt-card__title"><?= htmlspecialchars($item['label']) ?></h3>
|
||||
<p class="lt-card__desc"><?= htmlspecialchars($item['description']) ?></p>
|
||||
<span class="lt-card__arrow">Get access →</span>
|
||||
</div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="lt-trust">
|
||||
<div class="lt-trust__grid">
|
||||
<div class="lt-trust__item">
|
||||
<h3><?= htmlspecialchars(dbnToolsT('cause_title', $uiLang)) ?></h3>
|
||||
<p><?= htmlspecialchars(dbnToolsT('cause_text', $uiLang)) ?></p>
|
||||
</div>
|
||||
<div class="lt-trust__item">
|
||||
<h3><?= htmlspecialchars(dbnToolsT('privacy_title', $uiLang)) ?></h3>
|
||||
<p><?= htmlspecialchars(dbnToolsT('privacy_text', $uiLang)) ?></p>
|
||||
</div>
|
||||
<div class="lt-trust__item">
|
||||
<h3><?= htmlspecialchars(dbnToolsT('source_title', $uiLang)) ?></h3>
|
||||
<p><?= htmlspecialchars(dbnToolsT('source_text', $uiLang)) ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="evidence-section">
|
||||
<div class="section-inner evidence-inner">
|
||||
<article>
|
||||
<h2><?= htmlspecialchars(dbnToolsT('cause_title', $uiLang)) ?></h2>
|
||||
<p><?= htmlspecialchars(dbnToolsT('cause_text', $uiLang)) ?></p>
|
||||
</article>
|
||||
<article>
|
||||
<h2><?= htmlspecialchars(dbnToolsT('privacy_title', $uiLang)) ?></h2>
|
||||
<p><?= htmlspecialchars(dbnToolsT('privacy_text', $uiLang)) ?></p>
|
||||
</article>
|
||||
<article>
|
||||
<h2><?= htmlspecialchars(dbnToolsT('source_title', $uiLang)) ?></h2>
|
||||
<p><?= htmlspecialchars(dbnToolsT('source_text', $uiLang)) ?></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="access" class="access-section" aria-labelledby="accessTitle">
|
||||
<div class="gate-panel">
|
||||
<p class="eyebrow">Do Better Norge</p>
|
||||
<h2 id="accessTitle"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></h2>
|
||||
<p class="gate-copy"><?= htmlspecialchars(dbnToolsT('member_note', $uiLang)) ?></p>
|
||||
<a class="google-access-button" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
<section id="access" class="lt-access" aria-labelledby="ltAccessTitle">
|
||||
<div class="lt-access__inner">
|
||||
<p class="lt-access__eyebrow">Do Better Norge</p>
|
||||
<h2 class="lt-access__title" id="ltAccessTitle"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></h2>
|
||||
<p class="lt-access__note"><?= htmlspecialchars(dbnToolsT('member_note', $uiLang)) ?></p>
|
||||
<a class="lt-access-btn" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
<p class="gate-copy"><a href="https://dobetternorge.no/register.php"><?= htmlspecialchars(dbnToolsT('register', $uiLang)) ?></a></p>
|
||||
|
||||
<details class="fallback-login">
|
||||
<summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary>
|
||||
<form id="passcodeForm" class="passcode-form">
|
||||
@@ -209,6 +251,7 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<?php endif; ?>
|
||||
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
||||
|
||||
Reference in New Issue
Block a user