src/lib/share/Header.svelte

@@ -7,42 +7,52 @@
   import Button from "$lib/components/ui/button/button.svelte";
 </script>
 
-<header
-  class="fixed top-0 flex flex-col md:flex-row justify-between items-center p-3 w-full bg-background/85 backdrop-blur-xl border-b mb-32 z-50"
->
-  <div class="flex flex-col md:flex-row items-center mb-1 md:mb-0">
-    <button on:click={() => goto("/#")}>
-      <h1 class="text-2xl font-bold mr-5">
-        <i class="fa-solid fa-flask"></i> RhazesEMR
-      </h1>
-    </button>
-    <Button href="https://docs.rhazesemr.info" variant="link">
-      <h1 class="text-lg">Docs</h1>
-    </Button>
-    <Button onclick={() => goto("/download")} variant="link">
-      <h1 class="text-lg">Download</h1>
-    </Button>
-    <Button onclick={() => goto("/features")} variant="link">
-      <h1 class="text-lg">Features</h1>
-    </Button>
-    <Button onclick={() => goto("/about")} variant="link">
-      <h1 class="text-lg">About</h1>
-    </Button>
+<header class="fixed top-0 w-full z-50">
+  <div class="bg-red-500 w-full text-center py-1">
+    <button
+      class="text-sm text-white font-bold hover:underline cursor-pointer"
+      on:click={() => {
+        goto("/license");
+      }}>SOURCE CODE AVAILABILITY NOTICE - READ BEFORE INSTALLATION</button
+    >
   </div>
+  <div
+    class="flex flex-col md:flex-row justify-between items-center p-3 w-full bg-background/85 backdrop-blur-xl border-b"
+  >
+    <div class="flex flex-col md:flex-row items-center mb-1 md:mb-0">
+      <button on:click={() => goto("/#")}>
+        <h1 class="text-2xl font-bold md:mr-5">
+          <i class="fa-solid fa-flask"></i> RhazesEMR
+        </h1>
+      </button>
+      <Button href="https://docs.rhazesemr.info" variant="link">
+        <h1 class="text-lg">Docs</h1>
+      </Button>
+      <Button onclick={() => goto("/download")} variant="link">
+        <h1 class="text-lg">Download</h1>
+      </Button>
+      <Button onclick={() => goto("/features")} variant="link">
+        <h1 class="text-lg">Features</h1>
+      </Button>
+      <Button onclick={() => goto("/about")} variant="link">
+        <h1 class="text-lg">About</h1>
+      </Button>
+    </div>
 
-  <div class="flex items-center gap-2">
-    <Button
-      variant="outline"
-      size="icon"
-      href="https://bsky.app/profile/rhazesemr.bsky.social"
-    >
-      <i class="fa-brands fa-bluesky"></i>
-      <span class="sr-only">Bluesky</span>
-    </Button>
-    <Button variant="outline" size="icon" href="https://github.com/RhazesEMR">
-      <Github />
-      <span class="sr-only">Github</span>
-    </Button>
-    <LdModeSwitch />
+    <div class="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="icon"
+        href="https://bsky.app/profile/rhazesemr.bsky.social"
+      >
+        <i class="fa-brands fa-bluesky"></i>
+        <span class="sr-only">Bluesky</span>
+      </Button>
+      <Button variant="outline" size="icon" href="https://github.com/RhazesEMR">
+        <Github />
+        <span class="sr-only">Github</span>
+      </Button>
+      <LdModeSwitch />
+    </div>
   </div>
 </header>

src/routes/+page.svelte

@@ -2,32 +2,85 @@
   import { goto } from "$app/navigation";
 
   import Button from "$lib/components/ui/button/button.svelte";
-</script>
 
-<main class="flex flex-grow flex-col items-center mt-64 md:mt-32">
-  <img class="rounded-md" src="./favicon.png" alt="Logo" width="128" />
-  <p class="m-3 text-xl">Rhazes EMR</p>
-  <p class="m-3 text-center">
-    Modern and User-Friendly Electronic Medical Record
-  </p>
+  import * as Card from "$lib/components/ui/card";
 
-  <div class="flex flex-col md:flex-row">
-    <Button class="text-lg m-1 p-5" onclick={() => goto("/download")}
-      ><span class="fa-solid fa-download"></span>Download</Button
-    >
-    <Button
-      class="text-lg m-1 p-5"
-      variant="secondary"
-      href="https://git.rhazesemr.info"
-    >
-      <span class="fa-solid fa-code-branch"></span>Source Code</Button
-    >
-    <Button
-      class="text-lg m-1 p-5"
-      variant="secondary"
-      href="https://docs.rhazesemr.info"
-    >
-      <span class="fa-solid fa-book"></span>Documentation</Button
+  import { Sparkles, ExternalLink } from "lucide-svelte";
+
+  const features = [
+    {
+      title: "Patient Records Management",
+      description:
+        "Effortlessly manage comprehensive patient information in one secure location. Track medical histories, store diagnostic results, and access patient data instantly with our intuitive interface designed for healthcare professionals.",
+    },
+    {
+      title: "Security-First Architecture",
+      description:
+        "Protect sensitive patient data with our security-focused design. Our isolated database containers, encrypted connections, and role-based access controls ensure patient information remains private and secure.",
+    },
+    {
+      title: "Built-in AI Assistant",
+      description:
+        "Enhance clinical workflows with our integrated Saba AI assistant. Powered by Mistral's specialized 24B parameter model, this Arabic-fluent chatbot understands regional nuances and medical terminology to provide culturally relevant support for Middle Eastern healthcare contexts.",
+    },
+  ];
+</script>
+
+<main class="flex flex-grow flex-col items-center">
+  <div
+    class="w-full h-full bg-fixed relative bg-cover bg-center"
+    style="background-image: url('./banner.jpg');"
+  >
+    <div
+      class="flex flex-grow flex-col items-center pt-80 md:pt-32 pb-3 md:pb-8 backdrop-brightness-50 backdrop-blur-sm"
     >
+      <img class="rounded-md" src="./favicon.png" alt="Logo" width="128" />
+      <p class="m-3 text-xl text-white">Rhazes EMR</p>
+      <p class="m-3 text-center text-white">
+        Modern and User-Friendly Electronic Medical Record
+      </p>
+
+      <div class="flex flex-col md:flex-row">
+        <Button class="text-lg m-1 p-5" onclick={() => goto("/download")}
+          ><span class="fa-solid fa-download"></span>Download</Button
+        >
+        <Button
+          class="text-lg m-1 p-5"
+          variant="secondary"
+          href="https://git.rhazesemr.info"
+        >
+          <span class="fa-solid fa-code-branch"></span>Source Code</Button
+        >
+        <Button
+          class="text-lg m-1 p-5"
+          variant="secondary"
+          href="https://docs.rhazesemr.info"
+        >
+          <span class="fa-solid fa-book"></span>Documentation</Button
+        >
+      </div>
+    </div>
+  </div>
+
+  <div class="m-3 mt-10 text-4xl flex items-center">
+    <Sparkles size={52} />
+    <p class="px-2">Features</p>
+    <Sparkles size={52} />
+  </div>
+
+  <div class="flex flex-wrap justify-center mt-5 max-w-4xl">
+    {#each features as feature}
+      <Card.Root class="m-2">
+        <Card.Content class="flex">
+          <div class="">
+            <h1 class="mb-5 text-3xl">{feature.title}</h1>
+            <p>{feature.description}</p>
+          </div>
+        </Card.Content>
+      </Card.Root>
+    {/each}
+    <Button variant="link" onclick={() => goto("/features")}
+      >See more<ExternalLink />
+    </Button>
   </div>
 </main>

src/routes/about/+page.svelte

@@ -2,7 +2,7 @@
   import { Info } from "lucide-svelte";
 </script>
 
-<main class="flex flex-grow flex-col items-center mt-64 md:mt-28">
+<main class="flex flex-grow flex-col items-center mt-80 md:mt-32">
   <div class="m-3 text-4xl flex items-center animate-bounce">
     <Info size={52} />
     <p class="px-2">About</p>

src/routes/download/+page.svelte

@@ -8,21 +8,23 @@
   let win_release = {
     title: "Windows Installer",
     description: "RhazesEMR Desktop Client for Windows",
-    msi: "",
-    exe: "",
+    msi: "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client_0.0.1_x64_en-US.msi/download",
+    exe: "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client_0.0.1_x64-setup.exe/download",
   };
 
   let mac_release = {
     title: "MacOS Installer",
     description: "RhazesEMR Desktop Client for MacOS",
+    dmg: "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client_0.0.1_aarch64.dmg/download",
   };
 
   let linux_release = {
     title: "Linux Installer",
     description: "RhazesEMR Desktop Client for Linux",
-    deb: "",
-    rpm: "",
-    appimage: "",
+    deb: "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client_0.0.1_amd64.deb/download",
+    rpm: "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client-0.0.1-1.x86_64.rpm/download",
+    appimage:
+      "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client_0.0.1_amd64.AppImage/download",
   };
 
   let ios_release = {
@@ -33,13 +35,13 @@
   let android_release = {
     title: "Android Installer",
     description: "RhazesEMR Mobile Client for Android",
-    apk: "",
+    apk: "https://sourceforge.net/projects/rhazesemr/files/v0.0.1-dev/rhazesemr-client-0.0.1-universal.apk/download",
   };
 
   let github_release = "https://github.com/RhazesEMR/rhazesemr-client/releases";
 </script>
 
-<main class="flex flex-grow flex-col items-center mt-64 md:mt-28">
+<main class="flex flex-grow flex-col items-center mt-80 md:mt-32">
   <div class="m-3 text-4xl flex items-center animate-bounce">
     <Download size={52} />
     <p class="px-2">Download</p>
@@ -56,17 +58,14 @@
       </Card.Header>
       <Card.Content class="grid gap-4">
         <div class="flex justify-center pb-4">
-          <i class="animate-pulse fa-brands fa-windows text-9xl"></i>
+          <i class="fa-brands fa-windows text-9xl"></i>
+        </div>
+        <div class="flex flex-grow justify-center">
+          <Button class="w-1/2 mr-1" href={win_release.exe}>
+            <Download /> EXE
+          </Button>
+          <Button class="w-1/2" href={win_release.msi}><Download /> MSI</Button>
         </div>
-        <!-- <div class="flex flex-grow justify-center"> <Button class="w-1/2 mr-1" href={win_release.exe}> <Download /> EXE </Button> <Button class="w-1/2" href={win_release.msi}> <Download /> MSI </Button> </div> -->
-        <button
-          onclick={() =>
-            toast.warning("Not available yet", {
-              description: "this release is still in need for further testing",
-            })}
-        >
-          <Button class="w-full" disabled>Coming soon...</Button>
-        </button>
       </Card.Content>
       <Card.Footer>
         <Button class="w-full" variant="secondary" href={github_release}
@@ -82,17 +81,11 @@
       </Card.Header>
       <Card.Content class="grid gap-4">
         <div class="flex justify-center pt-4">
-          <i class="animate-pulse fa-brands fa-android text-9xl"></i>
+          <i class="fa-brands fa-android text-9xl"></i>
         </div>
-        <!-- <Button class="w-full" href={android_release.apk}> <Download /> APK </Button> -->
-        <button
-          onclick={() =>
-            toast.warning("Not available yet", {
-              description: "this release is still in need for further testing",
-            })}
-        >
-          <Button class="w-full" disabled>Coming soon...</Button>
-        </button>
+        <Button class="w-full" href={android_release.apk}>
+          <Download /> APK
+        </Button>
       </Card.Content>
       <Card.Footer>
         <Button class="w-full" variant="secondary" href={github_release}
@@ -108,17 +101,19 @@
       </Card.Header>
       <Card.Content class="grid gap-4">
         <div class="flex justify-center pt-2 pb-2">
-          <i class="animate-pulse fa-brands fa-linux text-9xl"></i>
+          <i class="fa-brands fa-linux text-9xl"></i>
+        </div>
+        <div class="flex flex-grow justify-center">
+          <Button class="w-1/3 mr-1" href={linux_release.deb}>
+            <Download /> DEB
+          </Button>
+          <Button class="w-1/3 mr-1" href={linux_release.rpm}>
+            <Download /> RPM
+          </Button>
+          <Button class="w-1/3" href={linux_release.appimage}>
+            <Download /> AppImage
+          </Button>
         </div>
-        <!-- <div class="flex flex-grow justify-center"> <Button class="w-1/3 mr-1" href={linux_release.deb}> <Download /> DEB </Button> <Button class="w-1/3 mr-1" href={linux_release.rpm}> <Download /> RPM </Button> <Button class="w-1/3" href={linux_release.appimage}> <Download /> AppImage </Button> </div> -->
-        <button
-          onclick={() =>
-            toast.warning("Not available yet", {
-              description: "this release is still in need for further testing",
-            })}
-        >
-          <Button class="w-full" disabled>Coming soon...</Button>
-        </button>
       </Card.Content>
       <Card.Footer>
         <Button class="w-full" variant="secondary" href={github_release}
@@ -134,16 +129,9 @@
       </Card.Header>
       <Card.Content class="grid gap-4">
         <div class="flex justify-center pt-2 pb-2">
-          <i class="animate-pulse fa-brands fa-apple text-9xl"></i>
+          <i class="fa-brands fa-apple text-9xl"></i>
         </div>
-        <button
-          onclick={() =>
-            toast.warning("Not available yet", {
-              description: "this release is still in need for further testing",
-            })}
-        >
-          <Button class="w-full" disabled>Coming soon...</Button>
-        </button>
+        <Button class="w-full" href={mac_release.dmg}><Download /> DMG</Button>
       </Card.Content>
       <Card.Footer>
         <Button class="w-full" variant="secondary" href={github_release}

src/routes/features/+page.svelte

@@ -47,7 +47,7 @@
   ];
 </script>
 
-<main class="flex flex-col items-center mt-64 md:mt-28">
+<main class="flex flex-col items-center mt-80 md:mt-32">
   <div class="m-3 text-4xl flex items-center animate-bounce">
     <Sparkles size={52} />
     <p class="px-2">Features</p>

src/routes/license/+page.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { Info } from "lucide-svelte";
+</script>
+
+<main class="flex flex-grow flex-col items-center mt-80 md:mt-32">
+  <div class="m-3 text-4xl flex items-center">
+    <p class="px-2">NOTICE REGARDING SOURCE CODE AVAILABILITY</p>
+  </div>
+
+  <div>
+    <p class="text-lg max-w-4xl p-5">
+      This pre-alpha version of RhazesEMR Client is being distributed free of
+      charge for academic evaluation purposes only. While the final release will
+      be licensed under GPL as free and open source software, this preliminary
+      version is currently proprietary and NOT covered by GPL terms.
+    </p>
+
+    <ol class="list-decimal list-inside space-y-2 max-w-4xl px-5">
+      <li>
+        This binary release is intended exclusively for professors and
+        evaluators involved in graduation assessment
+      </li>
+      <li>
+        The source code for this version is not publicly available at this time
+        When RhazesEMR reaches production status, it will be released as paid
+        software under GPL licensing, which will include full access to the
+        source code as required by GPL terms.
+      </li>
+    </ol>
+    <p class="text-lg max-w-4xl p-5">
+      All rights reserved for this pre-alpha version.
+    </p>
+  </div>
+</main>