styling updates + videos + logo

frontend/apps/artcraft-website/src/app/app.tsx

@@ -1,9 +1,10 @@
 import { Route, Routes } from "react-router-dom";
 import Landing from "../pages/landing/landing";
-
+import Navbar from "../components/navbar/navbar";
 export function App() {
   return (
-    <div>
+    <div className="relative">
+      <Navbar />
       {/* <div role="navigation">
         <ul>
           <li>

frontend/apps/artcraft-website/src/components/navbar/navbar.tsx

@@ -0,0 +1,88 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { faBars } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button } from "@storyteller/ui-button";
+
+const navigation = [{ name: "Home", href: "#", current: true }];
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Navbar() {
+  return (
+    <Disclosure
+      as="nav"
+      className="z-20 sticky top-0 left-0 w-full bg-[#101014]/70 backdrop-blur-lg"
+    >
+      <div className="mx-auto max-w-[1920px] sm:px-6 lg:px-8 px-6 md:px-16 xl:px-32">
+        <div className="flex h-16 justify-between">
+          <div className="flex">
+            <div className="flex shrink-0 items-center">
+              <img
+                alt="ArtCraft"
+                src="/images/artcraft-logo.png"
+                className="h-7 w-auto"
+              />
+            </div>
+            <div className="hidden md:ml-6 md:flex md:items-center md:space-x-4">
+              {navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  aria-current={item.current ? "page" : undefined}
+                  className={classNames(
+                    item.current
+                      ? "bg-gray-900 text-white"
+                      : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                    "rounded-md px-3 py-2 text-sm font-medium"
+                  )}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </div>
+          <div className="flex items-center">
+            <div className="hidden md:ml-4 md:flex md:shrink-0 md:items-center">
+              <Button>Download</Button>
+            </div>
+            <div className="mr-2 -ml-2 flex items-center md:hidden">
+              {/* Mobile menu button */}
+              <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset">
+                <span className="absolute -inset-0.5" />
+                <span className="sr-only">Open main menu</span>
+                <FontAwesomeIcon icon={faBars} />
+              </DisclosureButton>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DisclosurePanel className="md:hidden">
+        <div className="space-y-1 px-2 pt-2 pb-3 sm:px-3">
+          {navigation.map((item) => (
+            <DisclosureButton
+              key={item.name}
+              as="a"
+              href={item.href}
+              aria-current={item.current ? "page" : undefined}
+              className={classNames(
+                item.current
+                  ? "bg-gray-900 text-white"
+                  : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                "block rounded-md px-3 py-2 text-base font-medium"
+              )}
+            >
+              {item.name}
+            </DisclosureButton>
+          ))}
+        </div>
+      </DisclosurePanel>
+    </Disclosure>
+  );
+}

frontend/apps/artcraft-website/src/config/downloads.ts

@@ -0,0 +1,4 @@
+export const DOWNLOAD_LINKS = {
+  WINDOWS: "https://getartcraft.com/", // Replace with actual Windows download link
+  MACOS: "https://getartcraft.com/", // Replace with actual MacOS download link
+} as const;

frontend/apps/artcraft-website/src/pages/landing/landing.tsx

@@ -1,9 +1,39 @@
 import { Button } from "@storyteller/ui-button";
-import { faApple } from "@fortawesome/free-brands-svg-icons";
+import { faApple, faWindows } from "@fortawesome/free-brands-svg-icons";
 import { faDesktop } from "@fortawesome/pro-solid-svg-icons";
-import { isMobile } from "react-device-detect";
+import { isMobile, isWindows, isMacOs } from "react-device-detect";
+import { useRef, useState } from "react";
+import { DOWNLOAD_LINKS } from "../../config/downloads";
 
 const Landing = () => {
+  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const videos = [
+    "/videos/artcraft-canvas-demo.mp4",
+    "/videos/artcraft-3d-demo.mp4",
+  ];
+
+  const handleVideoEnd = () => {
+    if (videoRef.current) {
+      const nextIndex = (currentVideoIndex + 1) % videos.length;
+      setCurrentVideoIndex(nextIndex);
+      videoRef.current.src = videos[nextIndex];
+      videoRef.current.play();
+    }
+  };
+
+  const handleDownload = () => {
+    const downloadLink = isWindows
+      ? DOWNLOAD_LINKS.WINDOWS
+      : isMacOs
+      ? DOWNLOAD_LINKS.MACOS
+      : null;
+    if (downloadLink) {
+      window.open(downloadLink, "_blank");
+    }
+  };
+
   const features = [
     {
       title: "Lorem ipsum dolor sit",
@@ -39,12 +69,12 @@ const Landing = () => {
             <div className="max-w-2xl">
               <div className="mb-6">
                 <span className="text-lg font-semibold uppercase tracking-widest text-gray-400">
-                  MIRA
+                  ArtCraft
                 </span>
               </div>
 
               <h1 className="mb-6 font-bold leading-tight lg:text-6xl">
-                Realtime AI editor.
+                AI editor.
                 <br />
                 On your local machine.
               </h1>
@@ -57,22 +87,30 @@ const Landing = () => {
 
               <div className="flex flex-col gap-4 sm:flex-row">
                 <Button
-                  disabled={isMobile}
-                  icon={isMobile ? faDesktop : faApple}
+                  className="rounded-lg px-5 py-3.5 text-md"
+                  disabled={isMobile || (!isWindows && !isMacOs)}
+                  icon={isMobile ? faDesktop : isWindows ? faWindows : faApple}
+                  onClick={handleDownload}
                 >
-                  {isMobile ? "Download on desktop" : "Download for MacOS"}
+                  {isMobile
+                    ? "Download on desktop"
+                    : isWindows
+                    ? "Download for Windows"
+                    : isMacOs
+                    ? "Download for MacOS"
+                    : "Not available on your device"}
                 </Button>
-                <button className="w-full transform rounded-lg border border-white/30 px-8 py-4 font-semibold transition hover:scale-105 hover:bg-white/10 sm:w-auto">
-                  Learn more
-                </button>
               </div>
             </div>
           </div>
           <div className="col-span-12 mt-12 aspect-video w-full transform overflow-hidden rounded-xl border border-white/[16%] bg-transparent md:mt-16 xl:col-span-9 xl:col-start-4 xl:mt-0">
-            <img
-              src="/images/landing_hero.png"
-              alt="AI Video Creation"
+            <video
+              ref={videoRef}
+              muted
+              autoPlay
               className="h-full w-full object-cover object-top opacity-90"
+              onEnded={handleVideoEnd}
+              src={videos[currentVideoIndex]}
             />
           </div>
         </div>

frontend/apps/artcraft-website/src/styles.css

@@ -6,5 +6,6 @@
   body {
     font-family: "Source Sans 3", sans-serif;
     color: #ffffff;
+    background-color: #101014;
   }
 }