trilium/apps/website/src/routes/+page.svelte

<section class="hero bg-gray-50">
    <div class="container mx-auto pt-24 pb-24 px-4">
        <div class="flex flex-col md:flex-row items-center md:justify-between gap-12">
            <!-- Left: Text Content -->
            <div class="md:w-1/3">
                <h2 class="text-4xl font-bold mb-4">Trilium Notes</h2>
                <p class="text-lg mb-6 text-gray-700">Build your personal knowledge base with Trilium Notes</p>
                <div class="flex items-center gap-6">
                    <a href="#" class="download-button button py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
                        Download
                    </a>
                    <a href="#" class="font-medium text-violet-600 hover:underline">More platforms</a>
                </div>
            </div>

            <!-- Right: Screenshot -->
            <div class="md:w-2/3">
                <img src="screenshots/desktop-win.png" alt="Screenshot of the app on desktop Windows" class="w-full rounded-m shadow-md">
            </div>
        </div>
    </div>
</section>

<section class="mt-20 max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">Beyond Text: Smarter Note Types</h2>

    <div class="grid md:grid-cols-2 gap-10">
        <!-- Canvas Notes -->
        <div class="bg-white rounded-xl shadow overflow-hidden">
            <img src="/note-types/canvas.png" alt="Canvas Note Screenshot" class="w-full h-56 object-cover object-top">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Canvas Notes</h3>
                <p class="text-gray-600">Draw and arrange elements freely using an Excalidraw-powered canvas — ideal for diagrams, sketches, and visual planning.</p>
            </div>
        </div>

        <!-- Mermaid Diagrams -->
        <div class="bg-white rounded-xl shadow overflow-hidden">
            <img src="/note-types/mermaid.png" alt="Mermaid Diagram Screenshot" class="w-full h-56 object-cover object-top">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Mermaid Diagrams</h3>
                <p class="text-gray-600">Render flowcharts, Gantt charts, and sequence diagrams with Mermaid markdown syntax directly in your notes.</p>
            </div>
        </div>

        <!-- Geo Maps -->
        <div class="bg-white rounded-xl shadow overflow-hidden">
            <img src="/note-types/geo-map.png" alt="Geo Map Screenshot" class="w-full h-56 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Geo Maps</h3>
                <p class="text-gray-600">Plot locations and GPX tracks to visualize geography-linked notes and movement patterns on interactive maps.</p>
            </div>
        </div>

        <!-- Mind Maps -->
        <div class="bg-white rounded-xl shadow overflow-hidden">
            <img src="/note-types/mind-map.png" alt="Mind Map Screenshot" class="w-full h-56 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Mind Maps</h3>
                <p class="text-gray-600">Organize ideas visually using a drag-and-drop mind map editor powered by Mind Elixir.</p>
            </div>
        </div>
    </div>
</section>

<section class="mt-20 max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">Feature Highlights</h2>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Flexible Tree Structure</h3>
            <p class="text-gray-600">Organize notes in an arbitrarily deep tree. Notes can appear in multiple places via cloning.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Note Attributes & Scripting</h3>
            <p class="text-gray-600">Use note attributes to organize, query, and script advanced workflows.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Rich WYSIWYG Editor</h3>
            <p class="text-gray-600">Create notes with tables, images, math, and auto-formatted Markdown.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Source Code Friendly</h3>
            <p class="text-gray-600">Edit source code notes with syntax highlighting and a smooth experience.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Fast Navigation</h3>
            <p class="text-gray-600">Quickly move between notes with full-text search, backlinks, and hoisting.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Note Versioning</h3>
            <p class="text-gray-600">Track changes over time with seamless version history.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Strong Encryption</h3>
            <p class="text-gray-600">Secure notes individually with per-note encryption support.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Secure Authentication</h3>
            <p class="text-gray-600">Login via OpenID and TOTP for enhanced security.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Note Synchronization</h3>
            <p class="text-gray-600">Sync with your own server or use a 3rd party Trilium hosting provider.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Public Note Sharing</h3>
            <p class="text-gray-600">Easily publish and share notes on the web.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Visual Thinking Tools</h3>
            <p class="text-gray-600">Create relation maps, mind maps, and canvas-based sketches.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Geo Mapping</h3>
            <p class="text-gray-600">Visualize notes with pins and GPX tracks on maps.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Automation via REST API</h3>
            <p class="text-gray-600">Automate tasks and integrate with external tools using the REST API.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Advanced Scripting</h3>
            <p class="text-gray-600">Build powerful automations and workflows with scriptable notes.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Import & Export</h3>
            <p class="text-gray-600">Easily bring in data from Evernote or Markdown. Export content with flexibility.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Web Clipper</h3>
            <p class="text-gray-600">Save content from the web with the built-in web clipper.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Customizable UI</h3>
            <p class="text-gray-600">Tailor the interface with custom buttons, themes, and widgets.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Scales to 100k+ Notes</h3>
            <p class="text-gray-600">Trilium is built to handle massive knowledge bases without slowing down.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Mobile & Dark Mode</h3>
            <p class="text-gray-600">Touch-friendly mobile UI and full dark mode support included.</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Multilingual Interface</h3>
            <p class="text-gray-600">Available in English, German, Spanish, French, Romanian, and Chinese (simplified & traditional).</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-xl font-semibold mb-2">Metrics Dashboard</h3>
            <p class="text-gray-600">Track and visualize usage with built-in metrics and Grafana integration.</p>
        </div>
    </div>
</section>

<section class="bg-violet-50 py-16 mt-24">
    <div class="container mx-auto text-center px-4">
        <h2 class="text-3xl font-bold mb-4">Ready to get started with Trilium Notes?</h2>
        <p class="text-lg text-gray-700 mb-8">Build your personal knowledge base with powerful features and full privacy.</p>

        <div class="flex justify-center gap-6">
            <a href="#" class="py-3 px-6 bg-violet-600 text-white font-semibold rounded-full shadow hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
                Download Now
            </a>
        </div>
    </div>
</section>

<footer class="container bg-white mt-2 py-6 text-sm text-center text-gray-500">
    &copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/>    &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
</footer>