Skip to content

Commit

Permalink
Merge pull request #17 from sotopia-lab/landing-page
Browse files Browse the repository at this point in the history 
landing update with distinct user session
  • Loading branch information
@alexjyc
alexjyc authored Dec 24, 2024
2 parents a0ae1b8 + 6b57821 commit ed7c45a
Show file tree
Hide file tree
Showing 16 changed files with 968 additions and 548 deletions.
37 changes: 37 additions & 0 deletions frontend/app/error.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
"use client"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { useEffect } from "react";

export default function Error({
error,
reset,
}: {
error: string;
reset: () => void;
}) {
useEffect(() => {
console.error(error);
}, [error]);

return (
<div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
<div className="max-w-md w-full p-6">
<Alert variant="destructive">
<AlertTitle>Initialization Failed</AlertTitle>
<AlertDescription className="mt-2 space-y-4">
<p>{error}</p>
<Button
variant="outline"
onClick={reset}
className="w-full"
>
Try Again
</Button>
</AlertDescription>
</Alert>
</div>
</div>
);
}
120 changes: 51 additions & 69 deletions frontend/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,67 @@
@tailwind components;
@tailwind utilities;

body {
font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
}

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--foreground: 240 10% 3.9%;

--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--card-foreground: 240 10% 3.9%;

--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--popover-foreground: 240 10% 3.9%;

--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;

--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;

--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;

--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 224 71.4% 4.1%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--destructive-foreground: 0 0% 98%;

--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;

--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 210 20% 98%;
--primary-foreground: 220.9 39.3% 11%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;

--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;

--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;

--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;

--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;

--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 216 12.2% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--destructive-foreground: 0 0% 98%;

--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}

Expand Down
42 changes: 9 additions & 33 deletions frontend/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,6 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/sidebar";
import { CSSProperties } from 'react';

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
import { LoadingProvider } from '../context/loading-provider';

export const metadata: Metadata = {
title: "Cotomata",
Expand All @@ -23,26 +9,16 @@ export const metadata: Metadata = {

export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<SidebarProvider
style={{
"--sidebar-width": "3rem",
"--sidebar-width-mobile": "3rem",
} as CSSProperties}
>
<AppSidebar />
<main className="h-full w-full">
{children}
</main>
</SidebarProvider>
<html lang="en" className="dark">
<body>
<LoadingProvider>
{children}
</LoadingProvider>
</body>
</html>
);
}
}
15 changes: 15 additions & 0 deletions frontend/app/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Loader2 } from "lucide-react";

export default function Loading() {
return (
<div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
<div className="max-w-md p-6 text-center space-y-4">
<Loader2 className="h-12 w-12 animate-spin mx-auto text-primary" />
<h2 className="text-xl font-semibold">Initializing Cotomata...</h2>
<p className="text-muted-foreground">
This may take up to 5 minutes. Please wait while we set up your environment.
</p>
</div>
</div>
);
}
Loading

0 comments on commit ed7c45a

Please sign in to comment.