feat(doc): new logo and screenshots (#7961)

* feat(doc): new logo and screenshots

* remove unused logo

* logo with text

* feature panel

* remove logo explaination

docs/docusaurus.config.js

@@ -88,11 +88,10 @@ const config = {
         },
       },
       navbar: {
-        title: 'IMMICH',
         logo: {
-          alt: 'Immich University Logo',
-          src: 'img/color-logo.png',
-          srcDark: 'img/logo.png',
+          alt: 'Immich Logo',
+          src: 'img/immich-logo-inline-light.png',
+          srcDark: 'img/immich-logo-inline-dark.png',
         },
         items: [
           {

docs/src/pages/index.tsx

@@ -1,23 +1,24 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
-
+import { useColorMode } from '@docusaurus/theme-common';
 function HomepageHeader() {
+  const { isDarkTheme } = useColorMode();
+
   return (
     <header>
-      <section className="text-center m-6 p-12 border border-red-400 rounded-[50px] bg-gray-100 dark:bg-immich-dark-gray">
-        <img src="img/immich-logo.svg" className="md:h-24 h-12 mb-2" alt="Immich logo" />
-        <h1 className="md:text-6xl font-immich-title mb-10 text-immich-primary dark:text-immich-dark-primary uppercase">
-          Immich
-        </h1>
-        <div className="font-thin sm:text-base md:text-2xl my-12 sm:leading-tight">
-          <p className="mb-1 uppercase">
-            Self-hosted backup solution <span className="block"></span>
-            for photos and videos <span className="block"></span>
-            on mobile device
+      <section className="text-center m-6 p-12 border border-red-400 rounded-[50px] bg-slate-200 dark:bg-immich-dark-gray">
+        <img
+          src={isDarkTheme ? 'img/immich-logo-stacked-dark.svg' : 'img/immich-logo-stacked-light.svg'}
+          className="md:h-60 h-12 mb-2 antialiased"
+          alt="Immich logo"
+        />
+        <div className="sm:text-base 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>
           </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"
@@ -42,9 +43,7 @@ function HomepageHeader() {
             Sponsor
           </a>
         </div>
-
-        <img src="/img/immich-screenshots.png" alt="screenshots" width={'85%'} />
-
+        <img src="/img/immich-screenshots.png" 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">