@@ -2,46 +2,82 @@ import React from 'react';
22import Link from '@docusaurus/Link' ;
33import Layout from '@theme/Layout' ;
44import { useColorMode } from '@docusaurus/theme-common' ;
5+ import { discordPath } from '@site/src/components/svg-paths' ;
6+ import Icon from '@mdi/react' ;
57function HomepageHeader ( ) {
68 const { isDarkTheme } = useColorMode ( ) ;
79
810 return (
911 < header >
10- < section className = "text-center m-6 p-12 border border-red-400 rounded-[50px] bg-slate-200 dark:bg-immich-dark-gray" >
12+ < div className = "top-[calc(12%)] md:top-[calc(30%)] h-screen w-full absolute -z-10" >
13+ < img src = { 'img/immich-logo.svg' } className = "h-[110%] w-[110%] mb-2 antialiased -z-10" alt = "Immich logo" />
14+ < div className = "w-full h-[120vh] absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent" > </ div >
15+ </ div >
16+ < section className = "text-center pt-12 sm:pt-24 bg-immich-bg/50 dark:bg-immich-dark-bg/80" >
1117 < img
12- src = { isDarkTheme ? 'img/immich-logo-stacked- dark.svg' : 'img/immich-logo-stacked -light.svg' }
13- className = "md:h-60 h-44 mb-2 antialiased rounded-none"
18+ src = { isDarkTheme ? 'img/logomark- dark.svg' : 'img/logomark -light.svg' }
19+ className = "h-[115px] w-[115px] mb-2 antialiased rounded-none"
1420 alt = "Immich logo"
1521 />
16- < div className = "sm:text-2xl text-lg md:text-4xl mb-12 sm:leading-tight" >
17- < p className = "mb-1 font-medium text-immich-primary dark:text-immich-dark-primary" >
18- Self-hosted photo and < span className = "block" > </ span >
19- video management solution< span className = "block" > </ span >
22+ < div className = "mt-8" >
23+ < p className = "text-3xl md:text-5xl sm:leading-tight mb-1 font-extrabold text-black/90 dark:text-white px-4" >
24+ Self-hosted{ ' ' }
25+ < span className = "text-immich-primary dark:text-immich-dark-primary" >
26+ photo and < span className = "block" > </ span >
27+ video management{ ' ' }
28+ </ span >
29+ solution< span className = "block" > </ span >
30+ </ p >
31+
32+ < p className = "max-w-1/4 m-auto mt-4 px-4" >
33+ Easily back up, organize, and manage your photos on your own server. Immich helps you
34+ < span className = "sm:block" > </ span > browse, search and organize your photos and videos with ease, without
35+ sacrificing your privacy.
2036 </ p >
2137 </ div >
22- < div className = "flex flex-col sm:flex-row place-items-center place-content-center mt-9 mb-16 gap-4 " >
38+
39+ < div className = "flex flex-col sm:flex-row place-items-center place-content-center mt-9 gap-4 " >
2340 < Link
24- 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"
41+ 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"
2542 to = "docs/overview/introduction"
2643 >
2744 Get started
2845 </ Link >
2946
3047 < Link
31- 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"
48+ 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"
3249 to = "https://demo.immich.app/"
3350 >
34- Demo portal
51+ Demo
3552 </ Link >
53+ </ div >
3654
37- < Link
38- 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"
39- to = "https://discord.immich.app"
40- >
41- Discord
42- </ Link >
55+ < div className = "my-12 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary" >
56+ < Icon path = { discordPath } size = { 1 } />
57+ < Link to = "https://discord.immich.app/" > Join our Discord</ Link >
58+ </ div >
59+ < img
60+ src = { isDarkTheme ? '/img/screenshot-dark.webp' : '/img/screenshot-light.webp' }
61+ alt = "screenshots"
62+ className = "w-[95%] lg:w-[85%] xl:w-[70%] 2xl:w-[60%] "
63+ />
64+
65+ < div className = "mx-[25%] m-auto my-14 md:my-28" >
66+ < hr className = "border bg-gray-500 dark:bg-gray-400" />
67+ </ div >
68+
69+ < img
70+ src = { isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg' }
71+ className = "h-[115px] w-[115px] mb-2 antialiased rounded-none"
72+ alt = "Immich logo"
73+ />
74+
75+ < div >
76+ < p className = "font-bold text-2xl md:text-5xl " > Download mobile app</ p >
77+ < p className = "text-lg" >
78+ Download Immich app and start backing up your photos and videos securely to your own server
79+ </ p >
4380 </ div >
44- < img src = "/img/immich-screenshots.webp" alt = "screenshots" width = { '70%' } />
4581 < div className = "flex flex-col sm:flex-row place-items-center place-content-center mt-4 gap-1" >
4682 < div className = "h-24" >
4783 < a href = "https://play.google.com/store/apps/details?id=app.alextran.immich" >
@@ -54,20 +90,23 @@ function HomepageHeader() {
5490 </ a >
5591 </ div >
5692 </ div >
93+
94+ < img
95+ src = { isDarkTheme ? '/img/app-qr-code-dark.svg' : '/img/app-qr-code-light.svg' }
96+ alt = "app qr code"
97+ width = { '150px' }
98+ className = "shadow-lg p-3 my-8 dark:bg-immich-dark-bg "
99+ />
57100 </ section >
58101 </ header >
59102 ) ;
60103}
61104
62105export default function Home ( ) : JSX . Element {
63106 return (
64- < Layout
65- title = "Home"
66- description = "immich Self-hosted photo and video backup solution directly from your mobile phone "
67- noFooter = { true }
68- >
107+ < Layout title = "Home" description = "Self-hosted photo and video management solution" noFooter = { true } >
69108 < HomepageHeader />
70- < div className = "flex flex-col place-items-center place-content-center" >
109+ < div className = "flex flex-col place-items-center text-center place-content-center dark:bg-immich-dark-bg py-8 " >
71110 < p > This project is available under GNU AGPL v3 license.</ p >
72111 < p className = "text-xs" > Privacy should not be a luxury</ p >
73112 </ div >
0 commit comments