feat(doc): new homepage design and font (immich-app#13084)

x24git · Oct 3, 2024 · 68930cc · 68930cc
1 parent 0454863
commit 68930cc
Show file tree

Hide file tree

Showing 15 changed files with 496 additions and 44 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -72,14 +72,9 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      colorMode: {
-        defaultMode: 'dark',
-      },
       announcementBar: {
         id: 'site_announcement_immich',
         content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use it as <strong>the only way</strong> to store your photos and videos!`,
-        backgroundColor: '#593f00',
-        textColor: '#ffefc9',
         isCloseable: false,
       },
       docs: {

diff --git a/docs/src/components/community-guides.tsx b/docs/src/components/community-guides.tsx
@@ -52,20 +52,20 @@ const guides: CommunityGuidesProps[] = [
 
 function CommunityGuide({ title, description, url }: CommunityGuidesProps): JSX.Element {
   return (
-    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl p-4">
+    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl px-4 py-6">
       <div className="flex flex-col gap-2">
-        <p className="m-0 items-start flex gap-2">
+        <p className="m-0 items-start flex gap-2 text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">
           <span>{title}</span>
         </p>
 
         <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{description}</p>
-        <p className="m-0 text-sm text-gray-600 dark:text-gray-300">
+        <p className="m-0 text-sm text-gray-600 dark:text-gray-300 my-4">
           <a href={url}>{url}</a>
         </p>
       </div>
       <div className="flex">
         <Link
-          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300  rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
+          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300 rounded-xl text-sm hover:no-underline text-immich-primary dark:text-immich-dark-bg font-semibold"
           to={url}
         >
           View Guide

diff --git a/docs/src/components/community-projects.tsx b/docs/src/components/community-projects.tsx
@@ -87,23 +87,23 @@ const projects: CommunityProjectProps[] = [
 
 function CommunityProject({ title, description, url }: CommunityProjectProps): JSX.Element {
   return (
-    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl p-4">
+    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl px-4 py-6">
       <div className="flex flex-col gap-2">
-        <p className="m-0 items-start flex gap-2">
+        <p className="m-0 items-start flex gap-2 text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">
           <span>{title}</span>
         </p>
 
         <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{description}</p>
-        <p className="m-0 text-sm text-gray-600 dark:text-gray-300">
+        <p className="m-0 text-sm text-gray-600 dark:text-gray-300 my-4">
           <a href={url}>{url}</a>
         </p>
       </div>
       <div className="flex">
         <Link
-          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300  rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
+          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300 rounded-xl text-sm hover:no-underline text-immich-primary dark:text-immich-dark-bg font-semibold"
           to={url}
         >
-          View Project
+          View Link
         </Link>
       </div>
     </section>

diff --git a/docs/src/components/svg-paths.ts b/docs/src/components/svg-paths.ts
@@ -0,0 +1,2 @@
+export const discordPath =
+  'M 9.1367188 3.8691406 C 9.1217187 3.8691406 9.1067969 3.8700938 9.0917969 3.8710938 C 8.9647969 3.8810937 5.9534375 4.1403594 4.0234375 5.6933594 C 3.0154375 6.6253594 1 12.073203 1 16.783203 C 1 16.866203 1.0215 16.946531 1.0625 17.019531 C 2.4535 19.462531 6.2473281 20.102859 7.1113281 20.130859 L 7.1269531 20.130859 C 7.2799531 20.130859 7.4236719 20.057594 7.5136719 19.933594 L 8.3886719 18.732422 C 6.0296719 18.122422 4.8248594 17.086391 4.7558594 17.025391 C 4.5578594 16.850391 4.5378906 16.549563 4.7128906 16.351562 C 4.8068906 16.244563 4.9383125 16.189453 5.0703125 16.189453 C 5.1823125 16.189453 5.2957188 16.228594 5.3867188 16.308594 C 5.4157187 16.334594 7.6340469 18.216797 11.998047 18.216797 C 16.370047 18.216797 18.589328 16.325641 18.611328 16.306641 C 18.702328 16.227641 18.815734 16.189453 18.927734 16.189453 C 19.059734 16.189453 19.190156 16.243562 19.285156 16.351562 C 19.459156 16.549563 19.441141 16.851391 19.244141 17.025391 C 19.174141 17.087391 17.968375 18.120469 15.609375 18.730469 L 16.484375 19.933594 C 16.574375 20.057594 16.718094 20.130859 16.871094 20.130859 L 16.886719 20.130859 C 17.751719 20.103859 21.5465 19.463531 22.9375 17.019531 C 22.9785 16.947531 23 16.866203 23 16.783203 C 23 12.073203 20.984172 6.624875 19.951172 5.671875 C 18.047172 4.140875 15.036203 3.8820937 14.908203 3.8710938 C 14.895203 3.8700938 14.880188 3.8691406 14.867188 3.8691406 C 14.681188 3.8691406 14.510594 3.9793906 14.433594 4.1503906 C 14.427594 4.1623906 14.362062 4.3138281 14.289062 4.5488281 C 15.548063 4.7608281 17.094141 5.1895937 18.494141 6.0585938 C 18.718141 6.1975938 18.787437 6.4917969 18.648438 6.7167969 C 18.558438 6.8627969 18.402188 6.9433594 18.242188 6.9433594 C 18.156188 6.9433594 18.069234 6.9200937 17.990234 6.8710938 C 15.584234 5.3800938 12.578 5.3046875 12 5.3046875 C 11.422 5.3046875 8.4157187 5.3810469 6.0117188 6.8730469 C 5.9327188 6.9210469 5.8457656 6.9433594 5.7597656 6.9433594 C 5.5997656 6.9433594 5.4425625 6.86475 5.3515625 6.71875 C 5.2115625 6.49375 5.2818594 6.1985938 5.5058594 6.0585938 C 6.9058594 5.1905937 8.4528906 4.7627812 9.7128906 4.5507812 C 9.6388906 4.3147813 9.5714062 4.1643437 9.5664062 4.1523438 C 9.4894063 3.9813438 9.3217188 3.8691406 9.1367188 3.8691406 z M 12 7.3046875 C 12.296 7.3046875 14.950594 7.3403125 16.933594 8.5703125 C 17.326594 8.8143125 17.777234 8.9453125 18.240234 8.9453125 C 18.633234 8.9453125 19.010656 8.8555 19.347656 8.6875 C 19.964656 10.2405 20.690828 12.686219 20.923828 15.199219 C 20.883828 15.143219 20.840922 15.089109 20.794922 15.037109 C 20.324922 14.498109 19.644687 14.191406 18.929688 14.191406 C 18.332687 14.191406 17.754078 14.405437 17.330078 14.773438 C 17.257078 14.832437 15.505 16.21875 12 16.21875 C 8.496 16.21875 6.7450313 14.834687 6.7070312 14.804688 C 6.2540312 14.407687 5.6742656 14.189453 5.0722656 14.189453 C 4.3612656 14.189453 3.6838438 14.494391 3.2148438 15.025391 C 3.1658438 15.080391 3.1201719 15.138266 3.0761719 15.197266 C 3.3091719 12.686266 4.0344375 10.235594 4.6484375 8.6835938 C 4.9864375 8.8525938 5.3657656 8.9433594 5.7597656 8.9433594 C 6.2217656 8.9433594 6.6724531 8.8143125 7.0644531 8.5703125 C 9.0494531 7.3393125 11.704 7.3046875 12 7.3046875 z M 8.890625 10.044922 C 7.966625 10.044922 7.2167969 10.901031 7.2167969 11.957031 C 7.2167969 13.013031 7.965625 13.869141 8.890625 13.869141 C 9.815625 13.869141 10.564453 13.013031 10.564453 11.957031 C 10.564453 10.900031 9.815625 10.044922 8.890625 10.044922 z M 15.109375 10.044922 C 14.185375 10.044922 13.435547 10.901031 13.435547 11.957031 C 13.435547 13.013031 14.184375 13.869141 15.109375 13.869141 C 16.034375 13.869141 16.783203 13.013031 16.783203 11.957031 C 16.783203 10.900031 16.033375 10.044922 15.109375 10.044922 z';
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -7,11 +7,12 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+@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');
 
 html,
 button {
-  font-family: 'Overpass', sans-serif;
+  font-family: 'Be Vietnam Pro', sans-serif;
+  font-optical-sizing: auto;
 }
 
 img {
@@ -27,7 +28,6 @@ img {
   --ifm-color-primary-light: #4250af;
   --ifm-color-primary-lighter: #4250af;
   --ifm-color-primary-lightest: #4250af;
-  --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
@@ -40,10 +40,28 @@ img {
   --ifm-color-primary-light: #d5e4fc;
   --ifm-color-primary-lighter: #e9f1fe;
   --ifm-color-primary-lightest: #ffffff;
-  --ifm-background-color: #000000;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-background-color: #000000;
 }
 
 div[class^='announcementBar_'] {
   min-height: 2rem;
+  background-color: #2b3336;
+  color: white;
+}
+
+.menu__link {
+  padding: 10px;
+  padding-left: 16px;
+  border-radius: 10px;
+  font-size: 15px;
+}
+
+.menu__list-item-collapsible {
+  border-radius: 10px;
+  font-size: 15px;
+}
+
+code {
+  font-weight: 600;
 }
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -2,46 +2,82 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import { useColorMode } from '@docusaurus/theme-common';
+import { discordPath } from '@site/src/components/svg-paths';
+import Icon from '@mdi/react';
 function HomepageHeader() {
   const { isDarkTheme } = useColorMode();
 
   return (
     <header>
-      <section className="text-center m-6 p-12 border border-red-400 rounded-[50px] bg-slate-200 dark:bg-immich-dark-gray">
+      <div className="top-[calc(12%)]  md:top-[calc(30%)] h-screen w-full absolute -z-10">
+        <img src={'img/immich-logo.svg'} className="h-[110%] w-[110%] mb-2 antialiased -z-10" alt="Immich logo" />
+        <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">
         <img
-          src={isDarkTheme ? 'img/immich-logo-stacked-dark.svg' : 'img/immich-logo-stacked-light.svg'}
-          className="md:h-60 h-44 mb-2 antialiased rounded-none"
+          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
+          className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
           alt="Immich logo"
         />
-        <div className="sm:text-2xl text-lg md:text-4xl mb-12 sm:leading-tight">
-          <p className="mb-1 font-medium text-immich-primary dark:text-immich-dark-primary">
-            Self-hosted photo and <span className="block"></span>
-            video management solution<span className="block"></span>
+        <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{' '}
+            <span className="text-immich-primary dark:text-immich-dark-primary">
+              photo and <span className="block"></span>
+              video management{' '}
+            </span>
+            solution<span className="block"></span>
+          </p>
+
+          <p className="max-w-1/4 m-auto mt-4 px-4">
+            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.
           </p>
         </div>
-        <div className="flex flex-col sm:flex-row place-items-center place-content-center mt-9 mb-16 gap-4 ">
+
+        <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-full no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold uppercase"
+            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"
           >
             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-full 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-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://demo.immich.app/"
           >
-            Demo portal
+            Demo
           </Link>
+        </div>
 
-          <Link
-            className="flex place-items-center place-content-center py-3 px-8 border bg-immich-dark-primary dark:bg-immich-primary  rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
-            to="https://discord.immich.app"
-          >
-            Discord
-          </Link>
+        <div className="my-12 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary">
+          <Icon path={discordPath} size={1} />
+          <Link to="https://discord.immich.app/">Join our Discord</Link>
+        </div>
+        <img
+          src={isDarkTheme ? '/img/screenshot-dark.webp' : '/img/screenshot-light.webp'}
+          alt="screenshots"
+          className="w-[95%] lg:w-[85%] xl:w-[70%] 2xl:w-[60%] "
+        />
+
+        <div className="mx-[25%] m-auto my-14 md:my-28">
+          <hr className="border bg-gray-500 dark:bg-gray-400" />
+        </div>
+
+        <img
+          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
+          className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
+          alt="Immich logo"
+        />
+
+        <div>
+          <p className="font-bold text-2xl md:text-5xl ">Download mobile app</p>
+          <p className="text-lg">
+            Download Immich app and start backing up your photos and videos securely to your own server
+          </p>
         </div>
-        <img src="/img/immich-screenshots.webp" alt="screenshots" width={'70%'} />
         <div className="flex flex-col sm:flex-row place-items-center place-content-center mt-4 gap-1">
           <div className="h-24">
             <a href="https://play.google.com/store/apps/details?id=app.alextran.immich">
@@ -54,20 +90,23 @@ function HomepageHeader() {
             </a>
           </div>
         </div>
+
+        <img
+          src={isDarkTheme ? '/img/app-qr-code-dark.svg' : '/img/app-qr-code-light.svg'}
+          alt="app qr code"
+          width={'150px'}
+          className="shadow-lg p-3 my-8 dark:bg-immich-dark-bg "
+        />
       </section>
     </header>
   );
 }
 
 export default function Home(): JSX.Element {
   return (
-    <Layout
-      title="Home"
-      description="immich Self-hosted photo and video backup solution directly from your mobile phone "
-      noFooter={true}
-    >
+    <Layout title="Home" description="Self-hosted photo and video management solution" noFooter={true}>
       <HomepageHeader />
-      <div className="flex flex-col place-items-center place-content-center">
+      <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>
       </div>