docs: Semantic fixes and improvements for the main documentation page (#4576)

* Added missing alt text on logo in documentation

* Better to use CSS to do the uppercases

Some assistive technology can spell each letter instead of read the word, depends a lot on internals but it's better to prevent...

* Semantic fix - single paragraph instead of many + uppercase via CSS

Single sentence in single paragraph, using css instead

* React requires className instead of class...
This commit is contained in:
Bogdan Cerovac 2023-10-21 22:08:58 +02:00 committed by GitHub
parent f2c20f60f7
commit 5ead4af2dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -6,29 +6,31 @@ function HomepageHeader() {
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" />
<h1 className="md:text-6xl font-immich-title mb-10 text-immich-primary dark:text-immich-dark-primary">
IMMICH
<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">SELF-HOSTED BACKUP SOLUTION </p>
<p className="mb-1">FOR PHOTOS AND VIDEOS</p>
<p className="mb-1">ON MOBILE DEVICE</p>
<p className="mb-1 uppercase">
Self-hosted backup solution <span className="block"></span>
for photos and videos <span className="block"></span>
on mobile device
</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"
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"
to="docs/overview/introduction"
>
GET STARTED
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"
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"
to="https://demo.immich.app/"
>
DEMO PORTAL
Demo portal
</Link>
</div>