chore(website): port the rest of the layout

This commit is contained in:
Elian Doran 2025-09-26 23:24:28 +03:00
parent b3e1a79d40
commit 772d4ac5a1
No known key found for this signature in database
5 changed files with 39 additions and 35 deletions

View File

@ -8,9 +8,6 @@
<body>
<header>
<div class="content-wrapper">
<img src="./assets/icon-color.svg" width="300" height="300">&nbsp;<span>Trilium Notes</span>
<nav>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
@ -20,30 +17,6 @@
</div>
</header>
<section class="hero-section no-wrap">
<div class="content-wrapper">
<div class="title-section">
<h1>Organize your thoughts. Build your personal knowledge base.</h1>
<p>Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.</p>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
<span class="platform"></span>
</a>
</div>
<figure class="image"><img src="./assets/screenshot_desktop_win.png"></figure>
</div>
</section>
<footer>
<div class="content-wrapper">
<p>
© 2024-2025 <a href="https://github.com/eliandoran">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors">team</a>.<br>
© 2017-2024 <a href="https://github.com/zadam">zadam</a>.
</p>
</div>
</footer>
<script src="./script.ts"></script>
</body>
</html>

View File

@ -0,0 +1,12 @@
export default function Footer() {
return (
<footer>
<div class="content-wrapper">
<p>
© 2024-2025 <a href="https://github.com/eliandoran">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors">team</a>.<br />
© 2017-2024 <a href="https://github.com/zadam">zadam</a>.
</p>
</div>
</footer>
)
}

View File

@ -5,6 +5,9 @@ export function Header() {
return (
<header>
<div class="content-wrapper">
<img src="./src/assets/icon-color.svg" width="300" height="300" />&nbsp;<span>Trilium Notes</span>
<nav>
<a href="/" class={url == '/' && 'active'}>
Home
@ -13,6 +16,7 @@ export function Header() {
404
</a>
</nav>
</div>
</header>
);
}

View File

@ -4,6 +4,7 @@ import { Header } from './components/Header.jsx';
import { Home } from './pages/Home/index.jsx';
import { NotFound } from './pages/_404.jsx';
import './style.css';
import Footer from './components/Footer.js';
export function App() {
return (
@ -15,6 +16,7 @@ export function App() {
<Route default component={NotFound} />
</Router>
</main>
<Footer />
</LocationProvider>
);
}

View File

@ -5,6 +5,19 @@ import Section from '../../components/Section';
export function Home() {
return (
<>
<Section className="hero-section">
<div class="title-section">
<h1>Organize your thoughts. Build your personal knowledge base.</h1>
<p>Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.</p>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
<span class="platform"></span>
</a>
</div>
<figure class="image"><img src="./src/assets/screenshot_desktop_win.png" /></figure>
</Section>
<Section className="benefits" title="Benefits">
<div className="benefits-container">
<Card title="Note structure">Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy.</Card>