update homepage image + configure clerk theme to match next theme

package.json

@@ -30,6 +30,7 @@
 	},
 	"dependencies": {
 		"@clerk/nextjs": "^4.29.5",
+		"@clerk/themes": "^1.7.9",
 		"@hookform/resolvers": "^3.3.4",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-label": "^2.0.2",

src/app/Providers.tsx

@@ -4,24 +4,26 @@ import { PropsWithChildren } from "react";
 import { ConvexReactClient } from "convex/react";
 import { ClerkProvider, useAuth } from "@clerk/nextjs";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
-import { ThemeProvider } from "./theme-provider";
+import { dark } from "@clerk/themes";
+import { useTheme } from "next-themes";
 
 const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
 export default function Providers({ children }: PropsWithChildren) {
+	const { theme, systemTheme } = useTheme();
+
 	return (
 		<ClerkProvider
 			publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
+			appearance={{
+				baseTheme:
+					theme === "dark" || (theme === "system" && systemTheme === "dark")
+						? dark
+						: undefined,
+			}}
 		>
 			<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
-				<ThemeProvider
-					attribute="class"
-					defaultTheme="system"
-					enableSystem
-					disableTransitionOnChange
-				>
-					{children}
-				</ThemeProvider>
+				{children}
 			</ConvexProviderWithClerk>
 		</ClerkProvider>
 	);

src/app/create/page.tsx

@@ -3,9 +3,17 @@ import JobForm from "@/components/JobForm";
 export default function Create() {
 	return (
 		<main className="h-svh pt-24 container ">
-			<section className="pt-24">
-				<div className="max-w-screen-xl px-4 lg:gap-8 xl:gap-0 lg:py-16">
-					<JobForm />
+			<section>
+				<div className="max-w-screen-xl px-4 lg:gap-8 xl:gap-0 py-8">
+					<div className="mr-auto place-self-center">
+						<h1 className="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
+							Generate your perfect job with just a few skills
+						</h1>
+						<p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
+							Use the form below and let A.I do all the heavey lifting.
+						</p>
+						<JobForm />
+					</div>
 				</div>
 			</section>
 		</main>

src/app/explore/page.tsx

@@ -4,13 +4,13 @@ export default function Explore() {
 	return (
 		<main className="h-svh pt-24 container ">
 			<section>
-				<div className="max-w-screen-xl px-4 lg:gap-8 xl:gap-0 py-16">
+				<div className="max-w-screen-xl px-4 lg:gap-8 xl:gap-0 py-8">
 					<div className="mr-auto place-self-center">
 						<h1 className="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
-							Find your perfect job with just a few skills
+							Explore all of the jobs you have created.
 						</h1>
 						<p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
-							Input your skills and we&apos;ll find the perfect job for you.
+							Look back on some of your previous creations.
 						</p>
 						<Jobs />
 					</div>

src/app/header.tsx

@@ -4,12 +4,14 @@ import ThemeToggle from "@/components/ThemeToggle";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { SignedIn, UserButton, SignedOut, SignInButton } from "@clerk/nextjs";
-import { Briefcase } from "lucide-react";
+import { useQuery } from "convex/react";
+import { Briefcase, Loader2 } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { api } from "../../convex/_generated/api";
 
 export default function Header() {
-	const path = usePathname();
+	const jobs = useQuery(api.queries.getJobs);
+
 	return (
 		<header className="flex justify-between items-center p-4 border-b-2 border-gray-100 dark:border-gray-800 fixed z-50 w-full bg-background dark:text-white">
 			<Link
@@ -19,7 +21,10 @@ export default function Header() {
 				<Briefcase className="text-orange-500" /> What&apos;s my job?
 			</Link>
 			<div className="flex gap-4">
-				<Link href="/explore" className="cursor-pointer">
+				<Link href="/explore" className="cursor-pointer flex gap-2">
+					{jobs?.some((job) => job.status === "pending") && (
+						<Loader2 className="animate-spin h-5 w-5 m-auto" />
+					)}{" "}
 					Explore
 				</Link>
 				<Link href="/create" className="cursor-pointer">

src/app/layout.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import Providers from "./Providers";
 import Header from "./header";
+import { ThemeProvider } from "./ThemeProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,10 +20,17 @@ export default function RootLayout({
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<body className={inter.className}>
-				<Providers>
-					<Header />
-					{children}
-				</Providers>
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="system"
+					enableSystem
+					disableTransitionOnChange
+				>
+					<Providers>
+						<Header />
+						{children}
+					</Providers>
+				</ThemeProvider>
 			</body>
 		</html>
 	);

src/app/page.tsx

@@ -1,11 +1,12 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import Image from "next/image";
 
 export default function Home() {
 	return (
-		<main className="h-svh container">
-			<section className="pt-24">
-				<div className="max-w-screen-xl px-4 lg:gap-8 xl:gap-0 py-16">
+		<main className="h-svh">
+			<section className="pt-24 container">
+				<div className="grid grid-cols-1 sm:grid-cols-2 max-w-screen-xl px-4 lg:gap-8 xl:gap-0 py-8">
 					<div className="mr-auto place-self-center">
 						<h1 className="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
 							Find your perfect job with just a few skills
@@ -14,10 +15,28 @@ export default function Home() {
 							Input your skills and we&apos;ll find the perfect job for you.
 						</p>
 						<Button asChild>
-							<Link href="/create">Get started</Link>
+							<Link href="/explore">Get started</Link>
 						</Button>
 					</div>
-					<div className="hidden lg:mt-0 lg:col-span-5 lg:flex"></div>
+					<div className="order-first sm:order-last">
+						<Image
+							src="/jobs.png"
+							alt="People jon hunting"
+							width={600}
+							height={300}
+							priority
+						/>
+					</div>
+				</div>
+			</section>
+			<section className="bg-secondary mt-16">
+				<div className="container px-4 py-16">
+					<p className="mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
+						Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum eaque
+						sequi deleniti esse odio? Veniam officiis officia deserunt similique
+						repellat ratione, perspiciatis, minima blanditiis provident
+						doloremque, et iste unde! Corporis.
+					</p>
 				</div>
 			</section>
 		</main>

src/components/JobCard/JobCard.tsx

@@ -9,50 +9,51 @@ import { getImageUrl } from "@/lib/utils";
 
 export default function JobCard({ job, result }: JobCardProps) {
 	return (
-		<Card className="h-full relative z-0">
-			{job.status === "pending" ? (
-				<div className="flex flex-col items-center justify-center h-full w-full">
-					<div>
-						<Loader2 className="animate-spin h-100 w-100 m-auto" />
-						Generating top job based on skills...
+		<article className="h-full">
+			<Card className="h-full relative z-0">
+				{job.status === "pending" ? (
+					<div className="flex flex-col items-center justify-center h-full w-full">
+						<div>
+							<Loader2 className="animate-spin h-100 w-100 m-auto" />
+							Generating top job based on skills...
+						</div>
 					</div>
-				</div>
-			) : (
-				<>
-					<Image
-						src={getImageUrl(job.imageId)}
-						alt={`An image of a ${result.jobTitle || "job"}`}
-						width={400}
-						height={300}
-						className="w-full h-full object-cover object-top absolute top-0 left-0 z-0"
-					/>
-					<div className="w-full h-full object-cover object-top absolute top-0 left-0 z-10 bg-black opacity-70"></div>
-					<div className="relative z-10">
-						<CardHeader className="!mb-0">
-							<h1 className="text-xl font-semibold">
-								{result?.jobTitle || ""}
-							</h1>
-						</CardHeader>
-						<CardContent>
-							{!!job.skills.length && (
-								<div className="mb-4 flex gap-2">
-									{job.skills.split(",").map((skill) => (
-										<Badge variant="default" key={skill}>
-											{skill}
-										</Badge>
-									))}
-								</div>
-							)}
-							{job.status === "failed" && <JobListFailed job={job} />}
-							{job.status === "completed" && (
-								<div>
-									<p>{result?.jobDescription || ""}</p>
-								</div>
-							)}
-						</CardContent>
-					</div>
-				</>
-			)}
-		</Card>
+				) : (
+					<>
+						<Image
+							src={getImageUrl(job.imageId)}
+							alt={`An image of a ${result.jobTitle || "job"}`}
+							width={400}
+							height={300}
+							className="w-full h-full object-cover object-top absolute top-0 left-0 z-0"
+							priority
+						/>
+						<div className="w-full h-full object-cover object-top absolute top-0 left-0 z-10 bg-white dark:bg-black opacity-80"></div>
+						<div className="relative z-10">
+							<CardHeader className="!mb-0">
+								<h1 className="text-xl font-semibold">
+									{result?.jobTitle || ""}
+								</h1>
+							</CardHeader>
+							<CardContent>
+								{!!job.skills.length && (
+									<div className="mb-4 flex gap-2 flex-wrap">
+										{job.skills.split(",").map((skill) => (
+											<Badge variant="outline" key={skill}>
+												{skill}
+											</Badge>
+										))}
+									</div>
+								)}
+								{job.status === "failed" && <JobListFailed job={job} />}
+								{job.status === "completed" && (
+									<p className="text-sm">{result?.jobDescription || ""}</p>
+								)}
+							</CardContent>
+						</div>
+					</>
+				)}
+			</Card>
+		</article>
 	);
 }

src/components/JobForm/JobForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSession, useUser } from "@clerk/nextjs";
+import { useSession } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "convex/react";
 import React from "react";
@@ -49,34 +49,28 @@ export default function JobForm() {
 	};
 
 	return (
-		<div>
-			<h1 className="text-3xl font-bold mb-4">
-				Generate a new job matched by your skills
-			</h1>
-			<p></p>
-			<Card className="p-5 max-w-[500px]">
-				<Form {...form}>
-					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-						<FormField
-							control={form.control}
-							name="skills"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Skills</FormLabel>
-									<FormControl>
-										<Input placeholder="Add some skills..." {...field} />
-									</FormControl>
-									<FormDescription className="text-xs italic">
-										Comma seperated list of all the skills you have.
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<Button type="submit">Submit</Button>
-					</form>
-				</Form>
-			</Card>
-		</div>
+		<Card className="p-5 max-w-[500px]">
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+					<FormField
+						control={form.control}
+						name="skills"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Skills</FormLabel>
+								<FormControl>
+									<Input placeholder="Add some skills..." {...field} />
+								</FormControl>
+								<FormDescription className="text-xs italic">
+									Comma seperated list of all the skills you have.
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit">Submit</Button>
+				</form>
+			</Form>
+		</Card>
 	);
 }

src/components/JobList/JobList.tsx

@@ -20,7 +20,7 @@ export default function JobList({ jobs }: JobListProps) {
 				</div>
 			)}
 			{!!jobs?.length && (
-				<ul className="grid grid-cols-2 gap-5">
+				<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
 					{jobs?.map((job) => {
 						const result: JobCardResult = JSON.parse(job?.result || "{}");