Adjust Appearance of top bar

frontend/src/app/[locale]/PaneDemoImages.tsx

@@ -67,16 +67,13 @@ export default function DemoImages({ messages }: Props) {
           </Tabs>
         </div>
 
-        <div
+        <div className="flex justify-center w-full lg:w-7/12 p-4">
-          className="flex justify-center w-full lg:w-7/12"
-          style={{ height: "32rem" }}
-        >
           <Image
-            isBlurred
             src={currentImage.src}
             alt={currentImage.alt}
             shadow="md"
-            className="max-w-full max-h-full"
+            height={500}
+            className="max-w-full"
           />
         </div>
       </div>

frontend/src/app/[locale]/PaneMainTitle.tsx

@@ -37,46 +37,44 @@ export default function MainTitle({ locale }: Props) {
       </h4>
 
       <div className="mt-5">
-        <Button color="primary" radius="full">
+        <Link href={`/projects/`} locale={locale}>
-          <Link href={`/projects/`} locale={locale}>
+          <Button color="primary" radius="full" className="px-0">
             {t("demo")}
-          </Link>
+          </Button>
-        </Button>
+        </Link>
 
-        <Button
+        <NextUiLink
-          color="primary"
+          isExternal
-          variant="bordered"
+          href="https://kimatata.github.io/TestPlat/docs/getstarted/selfhost"
-          radius="full"
+          aria-label="docs"
-          className="ms-2"
         >
-          <NextUiLink
+          <Button
-            isExternal
+            color="primary"
-            href="https://kimatata.github.io/TestPlat/docs/getstarted/selfhost"
+            variant="bordered"
-            aria-label="docs"
+            radius="full"
-            showAnchorIcon
+            className="ms-2"
-            anchorIcon={<MoveUpRight size={12} className="ms-1" />}
+            endContent={<MoveUpRight size={12} />}
           >
             {t("get_started")}
-          </NextUiLink>
+          </Button>
-        </Button>
+        </NextUiLink>
 
-        <Button
+        <NextUiLink
-          color="primary"
+          size="sm"
-          variant="bordered"
+          isExternal
-          radius="full"
+          href="https://github.com/kimatata/TestPlat"
-          className="ms-2"
+          aria-label="Github"
         >
-          <NextUiLink
+          <Button
-            size="sm"
+            color="primary"
-            isExternal
+            variant="bordered"
-            href="https://github.com/kimatata/TestPlat"
+            radius="full"
-            aria-label="Github"
+            className="ms-2"
-            showAnchorIcon
+            endContent={<MoveUpRight size={12} />}
-            anchorIcon={<MoveUpRight size={12} className="ms-1" />}
           >
             GitHub
-          </NextUiLink>
+          </Button>
-        </Button>
+        </NextUiLink>
       </div>
     </div>
   );

frontend/src/app/[locale]/page.tsx

@@ -1,5 +1,4 @@
 import { useTranslations } from "next-intl";
-import { title, subtitle } from "@/components/primitives";
 import { Divider } from "@nextui-org/react";
 import PaneMainTitle from "./PaneMainTitle";
 import PaneMainFeatures from "./PaneMainFeatures";