updating navbar buttons

frontend-nextjs/app/components/Nav/LeftNavbarButtons.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Hospital, Sparkle, ChevronDown, Dog, Bird, Hop, Wand, Plus, Blocks, Gamepad2 } from "lucide-react";
+import { Home, Sparkle, ChevronDown, Dog, Bird, Hop, Plus, Blocks, Gamepad2 } from "lucide-react";
 import {
     DropdownMenuSeparator,
     DropdownMenu,
@@ -34,21 +34,21 @@ export default function LeftNavbarButtons({ user }: LeftNavbarButtonsProps) {
 
     return (
         <div className="flex flex-row gap-4 sm:gap-10 items-center">
-            <a className="flex flex-row gap-3 items-center" href="/">
-                <Wand size={ICON_SIZE} />
-                <p
-                    className={`flex items-center font-silkscreen text-xl text-stone-800 dark:text-stone-100 relative`}
-                >
-{shouldShowHospital ? (
-                      <>
-                        <span>Elato | <span className="text-cyan-700">{firstWordOfHospital}</span></span>
-                        <span className="absolute -top-3 -right-3 text-cyan-700"><Plus size={12} strokeWidth={3} /></span>
-                      </>
-                    ) : (
-                      <span>Elato</span>
-                    )}
+        <Button
+            variant="outline"
+            className="flex flex-row gap-2 items-center px-4 py-2 rounded-lg"
+            asChild
+            aria-label="Go to Home page"
+            title="Click to go to Home page"
+        >
+            <a href="https://www.elatoai.com">
+                <Home size={18} className="mr-1" />
+                <p className="flex items-center font-silkscreen text-xl">
+                    <span>Elato</span>
                 </p>
+                <span className="text-xl">👾</span>
             </a>
-        </div>
+        </Button>
+    </div>
     );
 }

frontend-nextjs/app/components/Nav/NavbarButtons.tsx

@@ -45,13 +45,20 @@ const NavbarButtons: React.FC<NavbarButtonsProps> = ({
                     className="ml-4"
                     // className="bg-nav-bar rounded-full px-3"
                 >
-                    <Button
+                     <Button
                         size="sm"
-                        variant={"ghost"}
-                        className="flex bg-nav-bar border-0 sm:mr-2 flex-row gap-2 items-center rounded-full"
+                        variant={isMobile ? "ghost" : "outline"}
+                        className="flex bg-nav-bar border-0 sm:mr-2 sm:border flex-row gap-2 items-center rounded-full"
                     >
                         <FaGithub className="text-xl" />
                         <p className="hidden sm:flex font-normal">GitHub</p>
+                        <Separator
+                            orientation="vertical"
+                            className="hidden sm:flex"
+                        />
+                        <p className="hidden sm:flex text-xs font-normal">
+                            {stars?.toLocaleString() ?? 347}
+                        </p>
                     </Button>
                 </Link>
             )}

frontend-nextjs/app/page.tsx

@@ -9,6 +9,7 @@ import { CreateCharacterShowcase } from "./components/LandingPage/CreateCharacte
 import ProductsSection from "./components/LandingPage/ProductsSection";
 import Image from "next/image";
 import { fetchGithubStars } from "./actions";
+import YoutubeDemo from "./components/LandingPage/YoutubeDemo";
 
 export default async function LandingPage() {
   const supabase = createClient();
@@ -114,7 +115,7 @@ export default async function LandingPage() {
             </div>
           </div>
         </section>
-
+        <YoutubeDemo caption="Elato AI ESP32-S3 Demo" />
         {/* Products Section */}
         <ProductsSection />