astriaai · anayatkhan1 · Jan 14, 2024 · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import Footer from "@/components/Footer";
+import { ThemeProvider } from "@/components/ThemeProvider";
 import Navbar from "@/components/Navbar";
 import { Toaster } from "@/components/ui/toaster";
 import "./globals.css";
@@ -11,18 +12,24 @@ export const metadata = {
 
 export default function RootLayout({ children }: any) {
   return (
-    <html lang="en">
-      <body className="min-h-screen flex flex-col">
-        <section>
-          <Suspense fallback={<div className="flex w-full px-4 lg:px-40 py-4 items-center border-b text-center gap-8 justify-between h-[69px]" />}>
-            <Navbar />
-          </Suspense>
-        </section>
-        <main className="flex flex-1 flex-col items-center py-16">
-          {children}
-        </main>
-        <Footer />
-        <Toaster />
+    <html lang="en" suppressHydrationWarning={true}>
+      <body className="flex flex-col min-h-screen">
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          <section>
+            <Suspense
+              fallback={
+                <div className="flex w-full px-4 lg:px-40 py-4 items-center border-b text-center gap-8 justify-between h-[69px]" />
+              }
+            >
+              <Navbar />
+            </Suspense>
+          </section>
+          <main className="flex flex-col items-center flex-1 py-16">
+            {children}
+          </main>
+          <Footer />
+          <Toaster />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -24,35 +24,35 @@ export default async function Index() {
 
   return (
     <div className="flex flex-col items-center pt-16">
-      <div className="flex flex-col lg:flex-row items-center gap-8 p-8 max-w-6xl w-full">
-        <div className="flex flex-col space-y-4 lg:w-1/2 w-full">
+      <div className="flex flex-col items-center w-full max-w-6xl gap-8 p-8 lg:flex-row">
+        <div className="flex flex-col w-full space-y-4 lg:w-1/2">
           <h1 className="text-5xl font-bold">
             Professional AI Headshots in minutes.
           </h1>
-          <p className="text-gray-600 text-lg">
+          <p className="text-lg text-gray-600 dark:text-gray-400">
             Elevate your online presence with HD headshots generated by our AI.
             Ideal for social profiles, resumes, and professional portfolios.
           </p>
           <div className="flex flex-col space-y-2">
             <Link href="/login">
-              <Button className="w-full lg:w-1/2">Get Your Headshots</Button>
+              <Button className="w-full lg:w-1/2 dark:text-gray-100">Get Your Headshots</Button>
             </Link>
-            <p className="text-sm text-gray-500 italic">
+            <p className="text-sm italic text-gray-700 dark:text-gray-500">
               Trusted by professionals worldwide. Quick and efficient.
             </p>
           </div>
-          <div className="mt-4 text-gray-500">
+          <div className="mt-4 text-gray-700 dark:text-gray-400">
             <span>Already a member? </span>
             <Link className="text-blue-600 hover:underline" href="/login">
               Sign In
             </Link>
           </div>
         </div>
-        <div className="lg:w-1/2 w-full mt-8 lg:mt-0">
+        <div className="w-full mt-8 lg:w-1/2 lg:mt-0">
           <img
             src={hero.src}
             alt="AI Headshot Illustration"
-            className="rounded-lg object-cover w-full h-full"
+            className="object-cover w-full h-full rounded-lg"
           />
         </div>
       </div>

diff --git a/components/ExplainerSection.tsx b/components/ExplainerSection.tsx
@@ -4,61 +4,61 @@ import result from "/public/result.png";
 
 export default function ExplainerSection() {
   return (
-    <div className="w-full max-w-6xl mt-16 p-8 bg-gray-100 rounded-lg space-y-8">
-      <h2 className="text-3xl font-bold text-center mb-8">How It Works</h2>
+    <div className="w-full max-w-6xl p-8 mt-16 space-y-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+      <h2 className="mb-8 text-3xl font-bold text-center">How It Works</h2>
 
       {/* Step 1: Upload your images */}
       <div className="space-y-4">
         <div className="flex items-center justify-center space-x-4">
-          <div className="text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full w-10 h-10 flex items-center justify-center">
+          <div className="flex items-center justify-center w-10 h-10 text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full">
             1
           </div>
           <h3 className="text-2xl font-semibold">Upload your images</h3>
         </div>
-        <p className="text-sm text-gray-600 text-center">
+        <p className="text-sm text-center text-gray-600 dark:text-gray-400">
           Upload 4+ high-quality selfies: front facing, 1 person in frame, no
           glasses or hats.
         </p>
         <img
           src={example.src}
           alt="AI Headshot example"
-          className="rounded-lg object-cover w-full md:w-3/4 lg:w-1/2 mx-auto"
+          className="object-cover w-full mx-auto rounded-lg md:w-3/4 lg:w-1/2"
         />
       </div>
 
       {/* Step 2: Train your model */}
       <div className="space-y-4">
         <div className="flex items-center justify-center space-x-4">
-          <div className="text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full w-10 h-10 flex items-center justify-center">
+          <div className="flex items-center justify-center w-10 h-10 text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full">
             2
           </div>
           <h3 className="text-2xl font-semibold">Our AI gets to work</h3>
         </div>
-        <p className="text-sm text-gray-600 text-center">
+        <p className="text-sm text-center text-gray-600 dark:text-gray-400">
           The AI magic takes ~20 minutes. You'll get an email when its ready!
         </p>
         <img
           src={blur.src}
           alt="AI Headshot blur"
-          className="rounded-lg object-cover w-full md:w-3/4 lg:w-1/2 mx-auto"
+          className="object-cover w-full mx-auto rounded-lg md:w-3/4 lg:w-1/2"
         />
       </div>
 
       {/* Step 3: Generate images */}
       <div className="space-y-4">
         <div className="flex items-center justify-center space-x-4">
-          <div className="text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full w-10 h-10 flex items-center justify-center">
+          <div className="flex items-center justify-center w-10 h-10 text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full">
             3
           </div>
           <h3 className="text-2xl font-semibold">Get amazing headshots</h3>
         </div>
-        <p className="text-sm text-gray-600 text-center">
+        <p className="text-sm text-center text-gray-600 dark:text-gray-400">
           Once your model is trained, we'll give you amazing headshots!
         </p>
         <img
           src={result.src}
           alt="AI Headshot result"
-          className="rounded-lg object-cover w-full md:w-3/4 lg:w-1/2 mx-auto"
+          className="object-cover w-full mx-auto rounded-lg md:w-3/4 lg:w-1/2"
         />
       </div>
     </div>

diff --git a/components/ModeToggle.tsx b/components/ModeToggle.tsx
@@ -0,0 +1,24 @@
+"use client";
+import { useTheme } from "next-themes";
+import { Button } from "./ui/button";
+import { Sun, Moon } from "lucide-react";
+import { Icon } from "@radix-ui/react-select";
+const ModeToggle = () => {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
+  return (
+    <>
+      {currentTheme === "dark" ? (
+        <Button variant="ghost" onClick={() => setTheme("light")}>
+          <Sun />
+        </Button>
+      ) : (
+        <Button variant="ghost" onClick={() => setTheme("dark")}>
+          <Moon />
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default ModeToggle;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,4 +1,5 @@
 import { AvatarIcon } from "@radix-ui/react-icons";
+import ModeToggle from "./ModeToggle";
 import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import {
@@ -31,16 +32,16 @@ export default async function Navbar() {
   const {
     data: credits,
   } = await supabase.from("credits").select("*").eq("user_id", user?.id ?? '').single()
-
+  
   return (
-    <div className="flex w-full px-4 lg:px-40 py-4 items-center border-b text-center gap-8 justify-between">
-      <div className="flex gap-2 h-full">
+    <div className="flex items-center justify-between w-full gap-8 px-4 py-4 text-center border-b lg:px-40">
+      <div className="flex h-full gap-2">
         <Link href="/">
           <h2 className="font-bold">Headshots AI</h2>
         </Link>
       </div>
       {user && (
-        <div className="hidden lg:flex flex-row gap-2">
+        <div className="flex-row hidden gap-2 lg:flex">
           <Link href="/overview">
             <Button variant={"ghost"}>Home</Button>
           </Link>
@@ -52,13 +53,14 @@ export default async function Navbar() {
         </div>
       )}
       <div className="flex gap-4 lg:ml-auto">
+        <ModeToggle />
         {!user && (
           <Link href="/login">
             <Button variant={"ghost"}>Login / Signup</Button>
           </Link>
         )}
         {user && (
-          <div className="flex flex-row gap-4 text-center align-middle justify-center">
+          <div className="flex flex-row justify-center gap-4 text-center align-middle">
             {stripeIsConfigured && (
               <ClientSideCredits creditsRow={credits ? credits : null} />
             )}
@@ -67,7 +69,7 @@ export default async function Navbar() {
                 <AvatarIcon height={24} width={24} className="text-primary" />
               </DropdownMenuTrigger>
               <DropdownMenuContent className="w-56">
-                <DropdownMenuLabel className="text-primary text-center overflow-hidden text-ellipsis">{user.email}</DropdownMenuLabel>
+                <DropdownMenuLabel className="overflow-hidden text-center text-primary text-ellipsis">{user.email}</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <form action="/auth/sign-out" method="post">
                   <Button

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
@@ -3,9 +3,9 @@ import { Button } from "./ui/button";
 
 export default function PricingSection() {
   return (
-    <div className="w-full max-w-6xl mt-16 mb-16 p-8 rounded-lg space-y-8">
-      <h2 className="text-3xl font-bold text-center mb-8">Pricing</h2>
-      <div className="flex flex-wrap justify-center lg:space-x-4 space-y-4 lg:space-y-0 items-stretch">
+    <div className="w-full max-w-6xl p-8 mt-16 mb-16 space-y-8 rounded-lg">
+      <h2 className="mb-8 text-3xl font-bold text-center">Pricing</h2>
+      <div className="flex flex-wrap items-stretch justify-center space-y-4 lg:space-x-4 lg:space-y-0">
         {pricingOptions.map((option, index) => (
           <div
             key={index}
@@ -15,13 +15,13 @@ export default function PricingSection() {
               <h3 className="text-2xl font-semibold text-center">
                 {option.title}
               </h3>
-              <p className="text-xl font-bold text-center mb-2">
+              <p className="mb-2 text-xl font-bold text-center">
                 {option.price}
               </p>
-              <p className="text-sm text-gray-600 text-center">
+              <p className="text-sm text-center text-gray-600 dark:text-gray-400">
                 {option.description}
               </p>
-              <ul className="space-y-2 mb-4 pl-4">
+              <ul className="pl-4 mb-4 space-y-2">
                 {option.features.map((feature, fIndex) => (
                   <li key={fIndex} className="flex items-center space-x-2">
                     <span className="text-green-500">✔</span>
@@ -53,7 +53,7 @@ const pricingOptions = [
       "4 AI Headshots",
     ],
     buttonText: "Choose Starter",
-    bgColor: "bg-white",
+    bgColor: "bg-white dark:bg-gray-800",
   },
   {
     title: "Basic",
@@ -64,7 +64,7 @@ const pricingOptions = [
       "12 AI Headshots",
     ],
     buttonText: "Choose Basic",
-    bgColor: "bg-blue-50",
+    bgColor: "bg-blue-50 dark:bg-gray-700",
   },
   {
     title: "Premium",
@@ -74,6 +74,6 @@ const pricingOptions = [
       "20 AI Headshots",
     ],
     buttonText: "Choose Premium",
-    bgColor: "bg-white",
+    bgColor: "bg-white dark:bg-gray-800",
   },
 ];
diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}