UI revamp

apps/web/app/(main)/(page)/dashboard/Dashboard.tsx

@@ -0,0 +1,68 @@
+import { UserButton } from '@clerk/nextjs'
+import { Button } from '@/components/ui/button'
+import { GenerateImage } from '@/components/GenerateImage'
+import { Camera } from '@/components/Camera'
+import { Credits } from '@/components/navbar/Credits'
+import { Packs } from '@/components/Packs'
+import { Train } from '@/components/Train'
+import { Tabs, TabsTrigger, TabsContent, TabsList } from '@/components/ui/tabs'
+import Link from 'next/link'
+
+export const Dashboard = () => {
+	return (
+		<Tabs defaultValue="camera" className="flex-1 flex flex-col px-4 md:px-6 overflow-hidden">
+			<div className="flex items-center justify-between">
+				<h1 className="text-2xl font-serif">photo.ai</h1>
+
+				<div className="flex items-center justify-between">
+					<Button variant="ghost" size="sm" className="flex items-center gap-2 h-9">
+						<Link href="/purchases">Purchases</Link>
+					</Button>
+					<Credits />
+					<div className="flex items-center justify-between gap-6">
+						<div className="h-4 border border-secondary rounded-full" />
+						<UserButton />
+					</div>
+				</div>
+			</div>
+
+			<div className="flex-1 overflow-hidden pt-2">
+				<TabsContent value="camera" className="h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden focus-visible:ring-0">
+					<Camera />
+				</TabsContent>
+
+				<TabsContent value="generate" className="h-full focus-visible:ring-0">
+					<GenerateImage />
+				</TabsContent>
+
+				<TabsContent value="packs" className="h-full focus-visible:ring-0">
+					<Packs />
+				</TabsContent>
+
+				<TabsContent value="trains" className="h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden focus-visible:ring-0">
+					<Train />
+				</TabsContent>
+			</div>
+
+
+			<div className="p-4 flex justify-center">
+				<div className="flex gap-6 bg-zinc-300/50 dark:bg-zinc-100/10 p-2 rounded-full outline-6 outline-zinc-400/10 dark:outline-zinc-600/10 backdrop-blur-xl">
+					<TabsList className="bg-transparent border-none">
+						<TabsTrigger value="camera" className="rounded-full data-[state=active]:scale-110 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=active]:font-bold">
+							Gallery
+						</TabsTrigger>
+						<TabsTrigger value="generate" className="rounded-full data-[state=active]:scale-110 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=active]:font-bold">
+							Generate
+						</TabsTrigger>
+						<TabsTrigger value="packs" className="rounded-full data-[state=active]:scale-110 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=active]:font-bold">
+							Packs
+						</TabsTrigger>
+						<TabsTrigger value="trains" className="rounded-full data-[state=active]:scale-110 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=active]:font-bold">
+							Trains
+						</TabsTrigger>
+					</TabsList>
+				</div>
+			</div>
+		</Tabs>
+	)
+};

apps/web/app/(main)/(page)/dashboard/page.tsx

@@ -0,0 +1,54 @@
+import { ThemeToggle2 } from "@/components/ThemeToggle";
+import { SidebarGenerateImage } from "@/components/SidebarGenerateImage"
+import { redirect } from "next/navigation";
+import { auth } from "@clerk/nextjs/server";
+export const dynamic = "force-dynamic";
+import { ChevronDown } from "lucide-react";
+import { Dashboard } from "./Dashboard"
+
+export default async function Page() {
+	const { userId } = await auth();
+
+	if (!userId) {
+		redirect("/");
+	}
+
+	return (
+		<div className="flex h-screen w-full md:px-4 py-4 overflow-x-clip">
+			<div className="hidden md:flex w-[350px] flex-col bg-zinc-300/50 dark:bg-zinc-100/10 outline-6 outline-zinc-400/10 rounded-2xl overflow-hidden">
+				<div className="flex flex-col gap-2 h-full overflow-auto p-2">
+					<div className="p-2 bg-zinc-100 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl">
+						<div className="space-y-4 p-2">
+							<h1 className="text-lg font-medium">General Settings</h1>
+							<div className="space-y-1">
+								<label className="text-xs text-gray-400 uppercase">History</label>
+								<div className="flex items-center pt-2 justify-between rounded">
+									<span className="text-sm">Prompt History</span>
+									<ChevronDown className="h-4 w-4" />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="flex flex-col gap-2 h-full">
+						<div className="p-2 bg-zinc-100 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl">
+							<div className="space-y-4 p-2">
+								<h1 className="text-lg font-medium">Generate</h1>
+								<div className="space-y-2">
+									<SidebarGenerateImage />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="bg-zinc-100 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl flex jusitfy-end">
+						<ThemeToggle2 />
+					</div>
+				</div>
+			</div>
+
+			<Dashboard />
+		</div>
+
+	);
+}

apps/web/app/train/page.tsx → apps/web/app/(main)/(page)/train/page.tsx

@@ -22,7 +22,7 @@ import { UploadModal } from "@/components/ui/upload"
 import { useState } from "react"
 import { TrainModelInput } from "common/inferred"
 import axios from "axios"
-import { BACKEND_URL } from "../config"
+import { BACKEND_URL } from "@/app/config"
 import { useRouter } from "next/navigation"
 import { useAuth } from "@clerk/nextjs"
 
@@ -152,4 +152,4 @@ export default function Train() {
             </Card>
         </div>
     )
-}
+}

apps/web/app/globals.css

@@ -4,6 +4,12 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@theme {
+   --font-*: initial;
+   --font-sans: "Inter";
+   --font-serif: "Instrument Serif";
+}
+
 @keyframes blob {
   0% {
     transform: translate(0px, 0px) scale(1);
@@ -173,6 +179,12 @@
   }
 }
 
+@layer utilities {
+  .z-index{
+    @apply z-0 group-hover:z-10
+  }
+}
+
 @layer base {
   :root {
     --sidebar-background: 0 0% 98%;

apps/web/app/layout.tsx

@@ -1,25 +1,27 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-import { Appbar } from "@/components/Appbar";
+import { Inter, Instrument_Serif, Roboto } from "next/font/google";
 import { Providers } from "@/components/providers/Providers";
-import { Footer } from "@/components/Footer";
+import { meta } from "@/lib/constants";
 import Script from "next/script";
+import { cn } from "@/lib/utils";
+
+import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
+const inter = Inter({
+   variable: "--font-inter",
+   subsets: ["latin"],
+   weight: "300" 
 });
 
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+const instrumentSerif = Instrument_Serif({
+   variable: "--font-instrument-serif",
+   subsets: ["latin"],
+   weight: "400" 
 });
 
 export const metadata: Metadata = {
-  title: "100xPhoto - AI-Powered Photo Enhancement",
-  description:
-    "Transform your photos with AI-powered enhancement and editing tools.",
+  title: meta.title,
+  description: meta.description
 };
 
 export default function RootLayout({
@@ -36,15 +38,11 @@ export default function RootLayout({
           strategy="beforeInteractive"
         />
       </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} min-h-screen bg-background font-sans antialiased`}
-      >
+      <body className={cn("antialiased", inter.variable, instrumentSerif.variable)}>
         <Providers>
-          <div className="relative flex min-h-screen flex-col">
-            <Appbar />
-            <main className="flex-1">{children}</main>
-            <Footer />
-          </div>
+           <main className="relative">
+	     {children}
+	   </main>
         </Providers>
       </body>
     </html>

apps/web/app/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Hero } from "@/components/home/Hero";
+import { Landing } from "@/components/landing/Landing";
 import { useAuth } from "@/hooks/useAuth";
 import { redirect } from "next/navigation";
 
@@ -9,9 +9,5 @@ export default function Home() {
   if (user) {
     redirect("/dashboard");
   }
-  return (
-    <div>
-      <Hero />
-    </div>
-  );
+  return <Landing />;
 }