self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-06 06:07:29 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Alex
2024-10-03 13:33:36 +07:00
committed by GitHub
parent 0454863c1e
commit 68930cc42c
15 changed files with 497 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
docs/src/pages/index.tsx
View File

@ -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
</Link>
<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
Demo
</Link>
</div>
<img src="/img/immich-screenshots.webp" alt="screenshots" width={'70%'} />
<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>
<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,6 +90,13 @@ 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>
);
@ -61,13 +104,9 @@ function HomepageHeader() {
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>