diff --git a/.env b/.env deleted file mode 100644 index 349063e..0000000 --- a/.env +++ /dev/null @@ -1,3 +0,0 @@ -POSTGRES_URL="" -NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZmFjdHVhbC1saWdlci0xMi5jbGVyay5hY2NvdW50cy5kZXYk -CLERK_SECRET_KEY=sk_test_67aglhtMoQwtdV5sRzkpCDE4F8S2nWyyGVW5XQAJ6o \ No newline at end of file diff --git a/public/hristudio_laptop.png b/public/hristudio_laptop.png new file mode 100644 index 0000000..cc4f83b Binary files /dev/null and b/public/hristudio_laptop.png differ diff --git a/src/app/icon.tsx b/src/app/icon.tsx new file mode 100644 index 0000000..94a723f --- /dev/null +++ b/src/app/icon.tsx @@ -0,0 +1,46 @@ +import { ImageResponse } from "next/og"; + +export const runtime = "edge"; +export const contentType = "image/svg+xml"; +export const size = { + width: 32, + height: 32, +}; + +export default function Icon() { + return new ImageResponse( + ( +
+ + + + + + + + +
+ ), + { + ...size, + } + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4f933df..3214f67 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,9 +3,20 @@ import { } from '@clerk/nextjs'; import { Inter } from 'next/font/google'; import './globals.css'; +import { Metadata } from 'next'; const inter = Inter({ subsets: ['latin'] }); +export const metadata: Metadata = { + title: 'HRIStudio', + description: 'A platform for managing human-robot interaction studies', + icons: { + icon: [ + { url: '/icon', type: 'image/svg+xml' }, + ], + }, +}; + export default function RootLayout({ children, }: { diff --git a/src/app/page.tsx b/src/app/page.tsx index b5cf829..735071d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,38 +1,100 @@ 'use client'; -import { SignedIn, SignedOut, SignInButton, SignOutButton, UserButton, useUser } from "@clerk/nextjs"; +import { SignedIn, SignedOut, SignInButton, SignOutButton, UserButton } from "@clerk/nextjs"; import { Button } from "~/components/ui/button"; -import { useEffect, useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { BotIcon } from "lucide-react"; +import { Logo } from "~/components/logo"; export default function Home() { - const { user, isLoaded } = useUser(); // Get user information and loading state - const [loading, setLoading] = useState(true); - - useEffect(() => { - if (isLoaded) { - setLoading(false); - } - }, [isLoaded]); - - if (loading) { - return
Loading...
; // Show a loading state while fetching user data - } - return ( -
-

Welcome to HRIStudio

- - - - - - - -

Signed in as: {user?.emailAddresses[0].emailAddress}

{/* Display user's email */} - - - - +
+ {/* Navigation Bar */} + + + {/* Hero Section */} +
+
+

+ Streamline Your HRI Research +

+

+ A comprehensive platform for designing, executing, and analyzing Wizard-of-Oz experiments in human-robot interaction studies. +

+
+ + + + + + + + + +
+
+
+ HRIStudio Interface +
+
+ + {/* Features Section */} +
+
+
+

Visual Experiment Design

+

+ Create and configure experiments using an intuitive drag-and-drop interface without extensive coding. +

+
+
+

Real-time Control

+

+ Execute experiments with synchronized views for wizards and observers, enabling seamless collaboration. +

+
+
+

Comprehensive Analysis

+

+ Record, playback, and analyze experimental data with built-in annotation and export tools. +

+
+
+
); -} +} \ No newline at end of file diff --git a/src/components/logo.tsx b/src/components/logo.tsx new file mode 100644 index 0000000..856e3ca --- /dev/null +++ b/src/components/logo.tsx @@ -0,0 +1,36 @@ +import { BotIcon } from "lucide-react"; +import Link from "next/link"; +import { cn } from "~/lib/utils"; + +interface LogoProps { + href?: string; + className?: string; + iconClassName?: string; + textClassName?: string; +} + +export function Logo({ + href = "/", + className, + iconClassName, + textClassName +}: LogoProps) { + return ( + + + + HRI + Studio + + + ); +} \ No newline at end of file diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index f5f4a65..3bca8ca 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -18,6 +18,7 @@ import { useState } from "react" import { Button } from "~/components/ui/button" import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "~/components/ui/sheet" import { cn } from "~/lib/utils" +import { Logo } from "~/components/logo" const navItems = [ { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, @@ -34,14 +35,6 @@ export function Sidebar() { const [isOpen, setIsOpen] = useState(false) const { user } = useUser() - const HRIStudioLogo = () => ( - - - HRI - Studio - - ) - const SidebarContent = () => (