From 5ead4af2dcd33f7210e1d3aba0cb274d3e755236 Mon Sep 17 00:00:00 2001
From: Bogdan Cerovac <BogdanCerovac@users.noreply.github.com>
Date: Sat, 21 Oct 2023 22:08:58 +0200
Subject: [PATCH] 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...
---
 docs/src/pages/index.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 529a04ebc7..72159f51ce 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -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>