docs: face lift, botox x3 (#18184)

* chore: docs face lift

* logo and fonts

* docs: face lift, botox x3

* docs: face lift, botox x3

docs/docs/install/docker-compose.mdx

@@ -2,53 +2,13 @@
 sidebar_position: 30
 ---
 
-import CodeBlock from '@theme/CodeBlock';
-import ExampleEnv from '!!raw-loader!../../../docker/example.env';
-
 # Docker Compose [Recommended]
 
 Docker Compose is the recommended method to run Immich in production. Below are the steps to deploy Immich with Docker Compose.
 
-## Step 1 - Download the required files
+import DockerComposeSteps from '/docs/partials/_docker-compose-install-steps.mdx';
 
-Create a directory of your choice (e.g. `./immich-app`) to hold the `docker-compose.yml` and `.env` files.
-
-```bash title="Move to the directory you created"
-mkdir ./immich-app
-cd ./immich-app
-```
-
-Download [`docker-compose.yml`][compose-file] and [`example.env`][env-file] by running the following commands:
-
-```bash title="Get docker-compose.yml file"
-wget -O docker-compose.yml https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
-```
-
-```bash title="Get .env file"
-wget -O .env https://github.com/immich-app/immich/releases/latest/download/example.env
-```
-
-You can alternatively download these two files from your browser and move them to the directory that you created, in which case ensure that you rename `example.env` to `.env`.
-
-## Step 2 - Populate the .env file with custom values
-
-<CodeBlock language="bash" title="Default environmental variable content">
-  {ExampleEnv}
-</CodeBlock>
-
-- Populate `UPLOAD_LOCATION` with your preferred location for storing backup assets. It should be a new directory on the server with enough free space.
-- Consider changing `DB_PASSWORD` to a custom value. Postgres is not publicly exposed, so this password is only used for local authentication.
-  To avoid issues with Docker parsing this value, it is best to use only the characters `A-Za-z0-9`. `pwgen` is a handy utility for this.
-- Set your timezone by uncommenting the `TZ=` line.
-- Populate custom database information if necessary.
-
-## Step 3 - Start the containers
-
-From the directory you created in Step 1 (which should now contain your customized `docker-compose.yml` and `.env` files), run the following command to start Immich as a background service:
-
-```bash title="Start the containers"
-docker compose up -d
-```
+<DockerComposeSteps />
 
 :::info Docker version
 If you get an error such as `unknown shorthand flag: 'd' in -d` or `open <location of your .env file>: permission denied`, you are probably running the wrong Docker version. (This happens, for example, with the docker.io package in Ubuntu 22.04.3 LTS.) You can correct the problem by following the complete [Docker Engine install](https://docs.docker.com/engine/install/) procedure for your distribution, crucially the "Uninstall old versions" and "Install using the apt/rpm repository" sections. These replace the distro's Docker packages with Docker's official ones.
@@ -70,6 +30,3 @@ If you get an error `can't set healthcheck.start_interval as feature require Doc
 ## Next Steps
 
 Read the [Post Installation](/docs/install/post-install.mdx) steps and [upgrade instructions](/docs/install/upgrading.md).
-
-[compose-file]: https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
-[env-file]: https://github.com/immich-app/immich/releases/latest/download/example.env

docs/docs/overview/comparison.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 # Comparison

docs/docs/overview/quick-start.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 2
 ---
 
 # Quick start
@@ -10,11 +10,20 @@ to install and use it.
 
 ## Requirements
 
-Check the [requirements page](/docs/install/requirements) to get started.
+- A system with at least 4GB of RAM and 2 CPU cores.
+- [Docker](https://docs.docker.com/engine/install/)
+
+> For a more detailed list of requirements, see the [requirements page](/docs/install/requirements).
+
+---
 
 ## Set up the server
 
-Follow the [Docker Compose (Recommended)](/docs/install/docker-compose) instructions to install the server.
+import DockerComposeSteps from '/docs/partials/_docker-compose-install-steps.mdx';
+
+<DockerComposeSteps />
+
+---
 
 ## Try the web app
 
@@ -26,6 +35,8 @@ Try uploading a picture from your browser.
 
 <img src={require('./img/upload-button.webp').default} title="Upload button" />
 
+---
+
 ## Try the mobile app
 
 ### Download the Mobile App
@@ -56,6 +67,8 @@ You can select the **Jobs** tab to see Immich processing your photos.
 
 <img src={require('/docs/guides/img/jobs-tab.webp').default} title="Jobs tab" width={300} />
 
+---
+
 ## Review the database backup and restore process
 
 Immich has built-in database backups. You can refer to the
@@ -65,6 +78,8 @@ Immich has built-in database backups. You can refer to the
 The database only contains metadata and user information. You must setup manual backups of the images and videos stored in `UPLOAD_LOCATION`.
 :::
 
+---
+
 ## Where to go from here?
 
 You may decide you'd like to install the server a different way; the Install category on the left menu provides many options.

docs/docs/overview/welcome.mdx

@@ -2,9 +2,13 @@
 sidebar_position: 1
 ---
 
-# Introduction
+# Welcome to Immich
 
-<img src={require('./img/feature-panel.webp').default} alt="Immich - Self-hosted photos and videos backup tool" />
+<img
+  src={require('./img/social-preview-light.webp').default}
+  alt="Immich - Self-hosted photos and videos backup tool"
+  data-theme="light"
+/>
 
 ## Welcome!
 

docs/docs/partials/_docker-compose-install-steps.mdx

@@ -0,0 +1,43 @@
+import CodeBlock from '@theme/CodeBlock';
+import ExampleEnv from '!!raw-loader!../../../docker/example.env';
+
+### Step 1 - Download the required files
+
+Create a directory of your choice (e.g. `./immich-app`) to hold the `docker-compose.yml` and `.env` files.
+
+```bash title="Move to the directory you created"
+mkdir ./immich-app
+cd ./immich-app
+```
+
+Download [`docker-compose.yml`](https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml) and [`example.env`](https://github.com/immich-app/immich/releases/latest/download/example.env) by running the following commands:
+
+```bash title="Get docker-compose.yml file"
+wget -O docker-compose.yml https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
+```
+
+```bash title="Get .env file"
+wget -O .env https://github.com/immich-app/immich/releases/latest/download/example.env
+```
+
+You can alternatively download these two files from your browser and move them to the directory that you created, in which case ensure that you rename `example.env` to `.env`.
+
+### Step 2 - Populate the .env file with custom values
+
+<CodeBlock language="bash" title="Default environmental variable content">
+  {ExampleEnv}
+</CodeBlock>
+
+- Populate `UPLOAD_LOCATION` with your preferred location for storing backup assets. It should be a new directory on the server with enough free space.
+- Consider changing `DB_PASSWORD` to a custom value. Postgres is not publicly exposed, so this password is only used for local authentication.
+  To avoid issues with Docker parsing this value, it is best to use only the characters `A-Za-z0-9`. `pwgen` is a handy utility for this.
+- Set your timezone by uncommenting the `TZ=` line.
+- Populate custom database information if necessary.
+
+### Step 3 - Start the containers
+
+From the directory you created in Step 1 (which should now contain your customized `docker-compose.yml` and `.env` files), run the following command to start Immich as a background service:
+
+```bash title="Start the containers"
+docker compose up -d
+```

docs/docusaurus.config.js

@@ -95,7 +95,7 @@ const config = {
             position: 'right',
           },
           {
-            to: '/docs/overview/introduction',
+            to: '/docs/overview/welcome',
             position: 'right',
             label: 'Docs',
           },
@@ -124,6 +124,12 @@ const config = {
             label: 'Discord',
             position: 'right',
           },
+          {
+            type: 'html',
+            position: 'right',
+            value:
+              '<a href="https://buy.immich.app" target="_blank" class="no-underline hover:no-underline"><button class="buy-button bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-black rounded-xl">Buy Immich</button></a>',
+          },
         ],
       },
       footer: {
@@ -134,7 +140,7 @@ const config = {
             items: [
               {
                 label: 'Welcome',
-                to: '/docs/overview/introduction',
+                to: '/docs/overview/welcome',
               },
               {
                 label: 'Installation',

docs/src/css/custom.css

@@ -7,14 +7,22 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-body {
-  font-family: 'Be Vietnam Pro', serif;
-  font-optical-sizing: auto;
-  /* font-size: 1.125rem;
+@font-face {
+  font-family: 'Overpass';
+  src: url('/fonts/overpass/Overpass.ttf') format('truetype-variations');
+  font-weight: 1 999;
+  font-style: normal;
   ascent-override: 106.25%;
-  size-adjust: 106.25%; */
+  size-adjust: 106.25%;
+}
+
+@font-face {
+  font-family: 'Overpass Mono';
+  src: url('/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
+  font-weight: 1 999;
+  font-style: normal;
+  ascent-override: 106.25%;
+  size-adjust: 106.25%;
 }
 
 .breadcrumbs__link {
@@ -29,6 +37,7 @@ img {
 
 /* You can override the default Infima variables here. */
 :root {
+  font-family: 'Overpass', sans-serif;
   --ifm-color-primary: #4250af;
   --ifm-color-primary-dark: #4250af;
   --ifm-color-primary-darker: #4250af;
@@ -83,3 +92,12 @@ div[class*='navbar__items'] > li:has(a[class*='version-switcher-34ab39']) {
 code {
   font-weight: 600;
 }
+
+.buy-button {
+  padding: 8px 14px;
+  border: 1px solid transparent;
+  font-family: 'DM Sans', sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 0 5px 2px rgba(181, 206, 254, 0.4);
+}

docs/src/pages/index.tsx

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import { discordPath, discordViewBox } from '@site/src/components/svg-paths';
 import ThemedImage from '@theme/ThemedImage';
 import Icon from '@mdi/react';
-import { mdiAndroid } from '@mdi/js';
+
 function HomepageHeader() {
   return (
     <header>
@@ -13,11 +13,14 @@ function HomepageHeader() {
         <div className="w-full h-[120vh] absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
       </div>
       <section className="text-center pt-12 sm:pt-24 bg-immich-bg/50 dark:bg-immich-dark-bg/80">
-        <ThemedImage
-          sources={{ dark: 'img/logomark-dark.svg', light: 'img/logomark-light.svg' }}
-          className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
-          alt="Immich logo"
-        />
+        <a href="https://futo.org" target="_blank" rel="noopener noreferrer">
+          <ThemedImage
+            sources={{ dark: 'img/logomark-dark-with-futo.svg', light: 'img/logomark-light-with-futo.svg' }}
+            className="h-[125px] w-[125px] mb-2 antialiased rounded-none"
+            alt="Immich logo"
+          />
+        </a>
+
         <div className="mt-8">
           <p className="text-3xl md:text-5xl sm:leading-tight mb-1 font-extrabold text-black/90 dark:text-white px-4">
             Self-hosted{' '}
@@ -28,7 +31,7 @@ function HomepageHeader() {
             solution<span className="block"></span>
           </p>
 
-          <p className="max-w-1/4 m-auto mt-4 px-4">
+          <p className="max-w-1/4 m-auto mt-4 px-4 text-lg text-gray-700 dark:text-gray-100">
             Easily back up, organize, and manage your photos on your own server. Immich helps you
             <span className="sm:block"></span> browse, search and organize your photos and videos with ease, without
             sacrificing your privacy.
@@ -36,27 +39,21 @@ function HomepageHeader() {
         </div>
         <div className="flex flex-col sm:flex-row place-items-center place-content-center mt-9 gap-4 ">
           <Link
-            className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary dark:bg-immich-dark-primary rounded-xl no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold uppercase"
-            to="docs/overview/introduction"
+            className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary dark:bg-immich-dark-primary rounded-xl no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold"
+            to="docs/overview/quick-start"
           >
-            Get started
+            Get Started
           </Link>
 
           <Link
-            className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary/10 dark:bg-gray-300  rounded-xl hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
+            className="flex place-items-center place-content-center py-3 px-8 border bg-white/90 dark:bg-gray-300  rounded-xl hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold"
             to="https://demo.immich.app/"
           >
-            Demo
-          </Link>
-
-          <Link
-            className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary/10 dark:bg-gray-300  rounded-xl hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
-            to="https://immich.store"
-          >
-            Buy Merch
+            Open Demo
           </Link>
         </div>
-        <div className="my-12 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary">
+
+        <div className="my-8 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary">
           <Icon
             path={discordPath}
             viewBox={discordViewBox} /* viewBox may show an error in your IDE but it is normal. */
@@ -119,7 +116,7 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <div className="flex flex-col place-items-center text-center place-content-center dark:bg-immich-dark-bg py-8">
         <p>This project is available under GNU AGPL v3 license.</p>
-        <p className="text-xs">Privacy should not be a luxury</p>
+        <p className="text-sm">Privacy should not be a luxury</p>
       </div>
     </Layout>
   );

docs/src/pages/privacy-policy.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 function HomepageHeader() {
   return (

docs/static/_redirects

@@ -30,3 +30,4 @@
 /docs/guides/api-album-sync /docs/community-projects 307
 /docs/guides/remove-offline-files /docs/community-projects 307
 /milestones /roadmap 307
+/docs/overview/introduction /docs/overview/welcome 307