feat(doc): new homepage design and font

docs/docusaurus.config.js

@@ -78,8 +78,6 @@ const config = {
       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: {

docs/src/css/custom.css

@@ -7,11 +7,11 @@
 @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;
 }
 
 img {
@@ -29,6 +29,7 @@ img {
   --ifm-color-primary-lightest: #4250af;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-background-color: #f9f8fb;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -40,10 +41,11 @@ 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);
 }
 
 div[class^='announcementBar_'] {
   min-height: 2rem;
+  background-color: #2b3336;
+  color: white;
 }

docs/src/pages/index.tsx

@@ -7,41 +7,74 @@ function HomepageHeader() {
 
   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="left-0 top-[calc(45%)] w-screen h-screen absolute -z-10">
         <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.png' : 'img/logomark-light.png'}
+          className="h-full w-full mb-2 antialiased -z-10"
           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="w-screen h-screen 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/logomark-dark.png' : 'img/logomark-light.png'}
+          className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
+          alt="Immich logo"
+        />
+        <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 ">
           <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>
+        <img
+          src={isDarkTheme ? '/img/screenshot-dark.webp' : '/img/screenshot-light.webp'}
+          alt="screenshots"
+          className="w-[95%] lg:w-[85%] xl:w-[70%] 2xl:w-[50%] "
+        />
 
-          <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="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.png' : 'img/logomark-light.png'}
+          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 +87,23 @@ function HomepageHeader() {
             </a>
           </div>
         </div>
+
+        <img
+          src={isDarkTheme ? '/img/app-qrcode-dark.svg' : '/img/app-qrcode-light.svg'}
+          alt="app qr code"
+          width={'150px'}
+          className="shadow-lg p-3 my-8"
+        />
       </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>

docs/tailwind.config.js

@@ -11,13 +11,13 @@ module.exports = {
       colors: {
         // Light Theme
         'immich-primary': '#4250af',
-        'immich-bg': 'white',
+        'immich-bg': '#f9f8fb',
         'immich-fg': 'black',
         'immich-gray': '#F6F6F4',
 
         // Dark Theme
         'immich-dark-primary': '#adcbfa',
-        'immich-dark-bg': 'black',
+        'immich-dark-bg': '#070a14',
         'immich-dark-fg': '#e5e7eb',
         'immich-dark-gray': '#212121',
       },