From db51122c2bc478f6d967bbaadf9e20b74c9a33ac Mon Sep 17 00:00:00 2001
From: taylanunver <taylanunver@hotmail.com>
Date: Sun, 15 Jan 2023 22:04:19 +0300
Subject: [PATCH 1/8] Added dark-mode

---
 components/Footer.tsx        | 10 ++++----
 components/Header.tsx        | 46 ++++++++++++++++++++++++-----------
 components/LoadingDots.tsx   |  4 ++-
 components/Testimonials.tsx  | 14 +++++------
 components/Toggle.tsx        | 12 ++++++---
 package-lock.json            |  2 +-
 pages/index.tsx              | 28 +++++++++++++++------
 pages/restore.tsx            | 47 +++++++++++++++++++++++++++---------
 public/lightbulb-regular.svg |  1 +
 styles/globals.css           |  9 +++++++
 tailwind.config.js           |  9 ++++---
 11 files changed, 128 insertions(+), 54 deletions(-)
 create mode 100644 public/lightbulb-regular.svg

diff --git a/components/Footer.tsx b/components/Footer.tsx
index bcda885..adfc622 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -2,14 +2,14 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="text-center h-16 sm:h-20 w-full sm:pt-2 pt-4 border-t mt-5 flex sm:flex-row flex-col justify-between items-center px-3 space-y-3 sm:mb-0 mb-3">
+    <footer className="text-center h-16 sm:h-20 w-full sm:pt-2 pt-4 border-t mt-5 flex sm:flex-row flex-col justify-between items-center px-3 space-y-3 sm:mb-0 mb-3 text-black dark:text-zinc-300">
       <div>
         Powered by{" "}
         <a
           href="https://replicate.com/"
           target="_blank"
           rel="noreferrer"
-          className="font-bold hover:underline transition underline-offset-2"
+          className="font-bold hover:underline transition underline-offset-2 text-black dark:text-zinc-100"
         >
           Replicate{" "}
         </a>
@@ -18,7 +18,7 @@ export default function Footer() {
           href="https://vercel.com/"
           target="_blank"
           rel="noreferrer"
-          className="font-bold hover:underline transition underline-offset-2"
+          className="font-bold hover:underline transition underline-offset-2 text-black dark:text-zinc-100"
         >
           Vercel.
         </a>
@@ -31,7 +31,7 @@ export default function Footer() {
         >
           <svg
             aria-hidden="true"
-            className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+            className="h-6 w-6 fill-slate-500 dark:fill-zinc-300 group-hover:fill-slate-700 dark:group-hover:fill-zinc-500"
           >
             <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
           </svg>
@@ -43,7 +43,7 @@ export default function Footer() {
         >
           <svg
             aria-hidden="true"
-            className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+            className="h-6 w-6 fill-slate-500 dark:fill-zinc-300 group-hover:fill-slate-700 dark:group-hover:fill-zinc-500"
           >
             <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
           </svg>
diff --git a/components/Header.tsx b/components/Header.tsx
index 1e6a8a8..b02502a 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -12,23 +12,41 @@ export default function Header() {
           width={36}
           height={36}
         />
-        <h1 className="sm:text-5xl text-3xl font-bold ml-2 tracking-tight">
+        <h1 className="sm:text-5xl text-3xl font-bold ml-2 text-black dark:text-white tracking-tight">
           restorePhotos.io
         </h1>
       </Link>
-      <a
-        href="https://vercel.com/templates/next.js/ai-photo-restorer"
-        target="_blank"
-        rel="noreferrer"
-      >
-        <Image
-          alt="Vercel Icon"
-          src="/vercelLogo.png"
-          className="sm:w-10 sm:h-[34px] w-8 h-[28px]"
-          width={32}
-          height={28}
-        />
-      </a>
+      <div className="flex justify-between sm:w-32 sm:h-[34px] w-20 h-[28px]">
+        <a
+          className="cursor-pointer"
+          onClick={() => {
+            const html = document.querySelector("html");
+            html?.classList.toggle("dark");
+            localStorage.setItem("dark", "true");
+          }}
+        >
+          <Image
+            alt="Dark mode toggle"
+            src="/lightbulb-regular.svg"
+            className="sm:w-10 sm:h-[34px] w-8 h-[28px] dark:invert"
+            width={32}
+            height={28}
+          />
+        </a>
+        <a
+          href="https://vercel.com/templates/next.js/ai-photo-restorer"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Image
+            alt="Vercel Icon"
+            src="/vercelLogo.png"
+            className="sm:w-10 sm:h-[34px] w-8 h-[28px] dark:invert"
+            width={32}
+            height={28}
+          />
+        </a>
+      </div>
     </header>
   );
 }
diff --git a/components/LoadingDots.tsx b/components/LoadingDots.tsx
index d47a743..b630ce6 100644
--- a/components/LoadingDots.tsx
+++ b/components/LoadingDots.tsx
@@ -1,7 +1,9 @@
 import styles from "../styles/loading-dots.module.css";
 
 const LoadingDots = ({
-  color = "#000",
+  color = document.querySelector("html")?.classList.contains("dark")
+    ? "#ddf"
+    : "#000",
   style = "small",
 }: {
   color: string;
diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index cdffbcd..9b1c18a 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -78,10 +78,10 @@ export function Testimonials() {
     >
       <div className="mx-auto px-4 sm:px-6 lg:px-8">
         <div className="mx-auto md:text-center">
-          <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 sm:text-6xl">
+          <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 dark:text-zinc-200 sm:text-6xl">
             Loved by many worldwide.
           </h1>
-          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7">
+          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 dark:text-zinc-400 leading-7">
             See what our 30,000+ users are saying about the product.
           </p>
         </div>
@@ -98,18 +98,18 @@ export function Testimonials() {
                     className="hover:scale-105 transition duration-300 ease-in-out"
                   >
                     <a href={testimonial.link} target="_blank" rel="noreferrer">
-                      <figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
+                      <figure className="relative rounded-2xl bg-white dark:bg-zinc-800 p-6 shadow-xl shadow-zinc-900/10 dark:shadow-black/10">
                         <blockquote className="relative">
-                          <p className="text-lg tracking-tight text-slate-900">
+                          <p className="text-lg tracking-tight text-slate-900 dark:text-slate-100">
                             "{testimonial.content}"
                           </p>
                         </blockquote>
-                        <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
+                        <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 dark:border-zinc-100/10 pt-6">
                           <div>
-                            <div className="font-display text-base text-slate-900">
+                            <div className="font-display text-base text-slate-900 dark:text-zinc-100">
                               {testimonial.author.name}
                             </div>
-                            <div className="mt-1 text-sm text-slate-500">
+                            <div className="mt-1 text-sm text-slate-500 dark:text-zinc-300">
                               {testimonial.author.role}
                             </div>
                           </div>
diff --git a/components/Toggle.tsx b/components/Toggle.tsx
index 5f1151f..74d133a 100644
--- a/components/Toggle.tsx
+++ b/components/Toggle.tsx
@@ -19,7 +19,9 @@ export default function Toggle({
       <div className="flex items-center">
         <span
           className={`text-sm mr-3 font-medium ${
-            !sideBySide ? "text-gray-900" : "text-gray-500"
+            !sideBySide
+              ? "text-gray-900 dark:text-zinc-600"
+              : "text-gray-400 dark:text-zinc-200"
           }`}
         >
           Side by Side
@@ -28,7 +30,9 @@ export default function Toggle({
           checked={sideBySide}
           onChange={setSideBySide}
           className={classNames(
-            sideBySide ? "bg-black" : "bg-gray-200",
+            sideBySide
+              ? "bg-black dark:bg-zinc-700"
+              : "bg-gray-200 dark:bg-zinc-200",
             "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none "
           )}
         >
@@ -43,7 +47,9 @@ export default function Toggle({
         <Switch.Label as="span" className="ml-3">
           <span
             className={`text-sm font-medium ${
-              sideBySide ? "text-gray-900" : "text-gray-500"
+              sideBySide
+                ? "text-gray-900 dark:text-zinc-600"
+                : "text-gray-400 dark:text-zinc-200"
             } `}
           >
             Compare
diff --git a/package-lock.json b/package-lock.json
index 7883b56..501b89a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "restorephotos",
+  "name": "restorePhotos",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/pages/index.tsx b/pages/index.tsx
index a06b119..168fbbd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,6 +8,16 @@ import SquigglyLines from "../components/SquigglyLines";
 import { Testimonials } from "../components/Testimonials";
 
 const Home: NextPage = () => {
+  if (
+    typeof window === "object" &&
+    (localStorage.getItem("dark") === "true" ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches &&
+        !localStorage.getItem("dark")))
+  ) {
+    document.querySelector("html")?.classList.add("dark");
+  } else if (typeof window === "object") {
+    document.querySelector("html")?.classList.remove("dark");
+  }
   return (
     <div className="flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
       <Head>
@@ -15,17 +25,17 @@ const Home: NextPage = () => {
       </Head>
 
       <Header />
-      <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 sm:mt-28 mt-20">
+      <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 sm:mt-28 mt-2">
         <a
           href="https://twitter.com/nutlope/status/1613654741216813056"
           target="_blank"
           rel="noreferrer"
-          className="border rounded-2xl py-1 px-4 text-slate-500 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out"
+          className="border rounded-2xl py-1 px-4 text-slate-500 dark:text-zinc-300 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out"
         >
           Used by over <span className="font-semibold">30,000</span> happy
           customers
         </a>
-        <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-slate-900 sm:text-7xl">
+        <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-slate-900 dark:text-zinc-100 sm:text-7xl">
           Restoring old photos{" "}
           <span className="relative whitespace-nowrap text-[#3290EE]">
             <SquigglyLines />
@@ -34,12 +44,12 @@ const Home: NextPage = () => {
           for everyone.
         </h1>
 
-        <p className="mx-auto mt-12 max-w-xl text-lg text-slate-700 leading-7">
+        <p className="mx-auto mt-12 max-w-xl text-lg text-slate-700 dark:text-slate-200 leading-7">
           Have old and blurry face photos? Let our AI restore them so those
           memories can live on. 100% free – restore your photos today.
         </p>
         <Link
-          className="bg-black rounded-xl text-white font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-black/80"
+          className="bg-black dark:bg-zinc-200 rounded-xl text-white dark:text-black font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-black/80 dark:hover:bg-zinc-200/80"
           href="/restore"
         >
           Restore your photos &rarr;
@@ -48,7 +58,9 @@ const Home: NextPage = () => {
           <div className="flex flex-col space-y-10 mt-4 mb-16">
             <div className="flex sm:space-x-2 sm:flex-row flex-col">
               <div>
-                <h2 className="mb-1 font-medium text-lg">Original Photo</h2>
+                <h2 className="mb-1 font-medium text-lg dark:text-zinc-200">
+                  Original Photo
+                </h2>
                 <Image
                   alt="Original photo of my bro"
                   src="/michael.jpg"
@@ -58,7 +70,9 @@ const Home: NextPage = () => {
                 />
               </div>
               <div className="sm:mt-0 mt-8">
-                <h2 className="mb-1 font-medium text-lg">Restored Photo</h2>
+                <h2 className="mb-1 font-medium text-lg dark:text-zinc-200">
+                  Restored Photo
+                </h2>
                 <Image
                   alt="Restored photo of my bro"
                   width={400}
diff --git a/pages/restore.tsx b/pages/restore.tsx
index ac36a1c..84d6d04 100644
--- a/pages/restore.tsx
+++ b/pages/restore.tsx
@@ -25,10 +25,20 @@ const options = {
   maxFileCount: 1,
   mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
   editor: { images: { crop: false } },
-  styles: { colors: { primary: "#000" } },
+  styles: {
+    colors: {
+      primary: "#000",
+    },
+  },
 };
 
 const Home: NextPage = () => {
+  if (typeof window === "object" && localStorage.getItem("dark") === "true") {
+    window.document.querySelector("html")?.classList.add("dark");
+  } else if (typeof window === "object") {
+    window.document.querySelector("html")?.classList.remove("dark");
+  }
+
   const [originalPhoto, setOriginalPhoto] = useState<string | null>(null);
   const [restoredImage, setRestoredImage] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
@@ -86,22 +96,22 @@ const Home: NextPage = () => {
           href="https://nutlope.substack.com"
           target="_blank"
           rel="noreferrer"
-          className="border rounded-2xl py-1 px-4 text-slate-500 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out"
+          className="border rounded-2xl py-1 px-4 text-slate-500 dark:text-zinc-300 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out"
         >
           Want to support this project? Subscribe to{" "}
           <span className="font-semibold">my newsletter</span>.
         </a>
-        <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 sm:text-6xl mb-5">
+        <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 dark:text-zinc-100 sm:text-6xl mb-5">
           Restore any face photo
         </h1>
-        <p className="text-slate-500">
+        <p className="text-slate-500 dark:text-zinc-300">
           {" "}
           {/* Obtained this number from Vercel: based on how many serverless invocations happened. Can automate later */}
           <CountUp start={10000} end={38044} duration={2} separator="," />{" "}
           photos generated and counting.
         </p>
         <ResizablePanel>
-          <AnimatePresence exitBeforeEnter>
+          <AnimatePresence mode="wait">
             <motion.div className="flex justify-between items-center w-full flex-col mt-4">
               <Toggle
                 className={`${restoredLoaded ? "visible" : "invisible"} mb-6`}
@@ -127,7 +137,9 @@ const Home: NextPage = () => {
               {restoredImage && originalPhoto && !sideBySide && (
                 <div className="flex sm:space-x-4 sm:flex-row flex-col">
                   <div>
-                    <h2 className="mb-1 font-medium text-lg">Original Photo</h2>
+                    <h2 className="mb-1 font-medium text-lg text-black dark:text-zinc-100">
+                      Original Photo
+                    </h2>
                     <Image
                       alt="original photo"
                       src={originalPhoto}
@@ -137,7 +149,9 @@ const Home: NextPage = () => {
                     />
                   </div>
                   <div className="sm:mt-0 mt-8">
-                    <h2 className="mb-1 font-medium text-lg">Restored Photo</h2>
+                    <h2 className="mb-1 font-medium text-lg text-black dark:text-zinc-100">
+                      Restored Photo
+                    </h2>
                     <a href={restoredImage} target="_blank" rel="noreferrer">
                       <Image
                         alt="restored photo"
@@ -154,16 +168,25 @@ const Home: NextPage = () => {
               {loading && (
                 <button
                   disabled
-                  className="bg-black rounded-full text-white font-medium px-4 pt-2 pb-3 mt-8 hover:bg-black/80 w-40"
+                  className="bg-black dark:bg-zinc-700 rounded-full text-white font-medium px-4 pt-2 pb-3 mt-8 hover:bg-black/80 dark:hover:bg-zinc-700/80 w-40"
                 >
                   <span className="pt-4">
-                    <LoadingDots color="white" style="large" />
+                    <LoadingDots
+                      color={
+                        document
+                          .querySelector("html")
+                          ?.classList.contains("dark")
+                          ? "black"
+                          : "white"
+                      }
+                      style="large"
+                    />
                   </span>
                 </button>
               )}
               {error && (
                 <div
-                  className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl mt-8"
+                  className="bg-red-100 dark:bg-zinc-800 border border-red-400 dark:border-red-900 text-red-700 dark:text-red-200 px-4 py-3 rounded-xl mt-8"
                   role="alert"
                 >
                   <span className="block sm:inline">{error}</span>
@@ -178,7 +201,7 @@ const Home: NextPage = () => {
                       setRestoredLoaded(false);
                       setError(null);
                     }}
-                    className="bg-black rounded-full text-white font-medium px-4 py-2 mt-8 hover:bg-black/80 transition"
+                    className="bg-black dark:bg-zinc-700 rounded-full text-white font-medium px-4 py-2 mt-8 hover:bg-black/80 dark:hover:bg-zinc-700/80 transition"
                   >
                     Upload New Photo
                   </button>
@@ -191,7 +214,7 @@ const Home: NextPage = () => {
                         appendNewToName(photoName!)
                       );
                     }}
-                    className="bg-white rounded-full text-black border font-medium px-4 py-2 mt-8 hover:bg-gray-100 transition"
+                    className="bg-white dark:bg-zinc-300 rounded-full text-black dark:text-zinc-900 border border-white dark:border-zinc-300 font-medium px-4 py-2 mt-8 hover:bg-gray-100 dark:hover:bg-zinc-400 transition"
                   >
                     Download Restored Photo
                   </button>
diff --git a/public/lightbulb-regular.svg b/public/lightbulb-regular.svg
new file mode 100644
index 0000000..9a15f75
--- /dev/null
+++ b/public/lightbulb-regular.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM192 0C90.02 .3203 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.8 289.2 .0039 192 0zM288.4 260.1c-15.66 17.85-35.04 46.3-49.05 75.89h-94.61c-14.01-29.59-33.39-58.04-49.04-75.88C75.24 236.8 64 206.1 64 175.1C64 113.3 112.1 48.25 191.1 48C262.6 48 320 105.4 320 175.1C320 206.1 308.8 236.8 288.4 260.1zM176 80C131.9 80 96 115.9 96 160c0 8.844 7.156 16 16 16S128 168.8 128 160c0-26.47 21.53-48 48-48c8.844 0 16-7.148 16-15.99S184.8 80 176 80z"/></svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c9..2e19eff 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  transition-property: background-color;
+  transition-duration: 0.5s;
+  transition-timing-function: ease;
+}
+.dark {
+  @apply bg-zinc-900;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 95b7c46..28619ea 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+  darkMode: "class",
+};

From 67c39e41c96942023c0c1fe319521b257769c640 Mon Sep 17 00:00:00 2001
From: taylanunver <taylanunver@hotmail.com>
Date: Sun, 15 Jan 2023 22:14:55 +0300
Subject: [PATCH 2/8] Updated number that changed while I was working

---
 components/Testimonials.tsx | 2 +-
 pages/index.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index 9b1c18a..a1fecae 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -82,7 +82,7 @@ export function Testimonials() {
             Loved by many worldwide.
           </h1>
           <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 dark:text-zinc-400 leading-7">
-            See what our 30,000+ users are saying about the product.
+            See what our 40,000+ users are saying about the product.
           </p>
         </div>
         <ul
diff --git a/pages/index.tsx b/pages/index.tsx
index 168fbbd..0c7b680 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
           rel="noreferrer"
           className="border rounded-2xl py-1 px-4 text-slate-500 dark:text-zinc-300 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out"
         >
-          Used by over <span className="font-semibold">30,000</span> happy
+          Used by over <span className="font-semibold">40,000</span> happy
           customers
         </a>
         <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-slate-900 dark:text-zinc-100 sm:text-7xl">

From 346870955bc0bc9145d2b88affcee7fbced414da Mon Sep 17 00:00:00 2001
From: taylanunver <taylanunver@hotmail.com>
Date: Sun, 15 Jan 2023 22:18:30 +0300
Subject: [PATCH 3/8] Trying to resolve conflict caused by updating while
 working

---
 components/Testimonials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index a1fecae..910501b 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -81,7 +81,7 @@ export function Testimonials() {
           <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 dark:text-zinc-200 sm:text-6xl">
             Loved by many worldwide.
           </h1>
-          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 dark:text-zinc-400 leading-7">
+          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7 dark:text-zinc-400">
             See what our 40,000+ users are saying about the product.
           </p>
         </div>

From 04f8a08c8a48d700f937b63fba8e6dd406c64aa0 Mon Sep 17 00:00:00 2001
From: taylanunver <taylanunver@hotmail.com>
Date: Sun, 15 Jan 2023 22:20:12 +0300
Subject: [PATCH 4/8] Testimonial file causing conflict issues

---
 components/Testimonials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index 910501b..78c0782 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -81,7 +81,7 @@ export function Testimonials() {
           <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 dark:text-zinc-200 sm:text-6xl">
             Loved by many worldwide.
           </h1>
-          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7 dark:text-zinc-400">
+          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7">
             See what our 40,000+ users are saying about the product.
           </p>
         </div>

From 57b579b86768591418964608fcb398f005c0c223 Mon Sep 17 00:00:00 2001
From: taylanunver <taylanunver@hotmail.com>
Date: Sun, 15 Jan 2023 22:21:52 +0300
Subject: [PATCH 5/8] Corrected color of testimonials user count

---
 components/Testimonials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index 78c0782..910501b 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -81,7 +81,7 @@ export function Testimonials() {
           <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 dark:text-zinc-200 sm:text-6xl">
             Loved by many worldwide.
           </h1>
-          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7">
+          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7 dark:text-zinc-400">
             See what our 40,000+ users are saying about the product.
           </p>
         </div>

From 7003d898106e16fe4b2ea33dd971a568bf698d36 Mon Sep 17 00:00:00 2001
From: Taylan <taylanunver@hotmail.com>
Date: Sun, 5 Feb 2023 16:05:02 +0300
Subject: [PATCH 6/8] Switch moved to footer & changed numbers

---
 components/Footer.tsx        | 17 ++++++++++++++
 components/Header.tsx        | 44 +++++++++++-------------------------
 components/Testimonials.tsx  |  2 +-
 pages/index.tsx              |  2 +-
 pages/restore.tsx            |  2 +-
 public/lightbulb-regular.svg |  1 -
 6 files changed, 33 insertions(+), 35 deletions(-)
 delete mode 100644 public/lightbulb-regular.svg

diff --git a/components/Footer.tsx b/components/Footer.tsx
index adfc622..c3d40ef 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 
 export default function Footer() {
   return (
@@ -24,6 +25,22 @@ export default function Footer() {
         </a>
       </div>
       <div className="flex space-x-4 pb-4 sm:pb-0">
+        <a
+          className="cursor-pointer group"
+          onClick={() => {
+            const html = document.querySelector("html");
+            html?.classList.toggle("dark");
+            localStorage.setItem("dark", "true");
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 384 512"
+            className="h-6 w-6 p-[2px] fill-slate-500 dark:fill-zinc-300 group-hover:fill-slate-700 dark:group-hover:fill-zinc-500"
+          >
+            <path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM192 0C90.02 .3203 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.8 289.2 .0039 192 0zM288.4 260.1c-15.66 17.85-35.04 46.3-49.05 75.89h-94.61c-14.01-29.59-33.39-58.04-49.04-75.88C75.24 236.8 64 206.1 64 175.1C64 113.3 112.1 48.25 191.1 48C262.6 48 320 105.4 320 175.1C320 206.1 308.8 236.8 288.4 260.1zM176 80C131.9 80 96 115.9 96 160c0 8.844 7.156 16 16 16S128 168.8 128 160c0-26.47 21.53-48 48-48c8.844 0 16-7.148 16-15.99S184.8 80 176 80z" />
+          </svg>
+        </a>
         <Link
           href="https://twitter.com/nutlope"
           className="group"
diff --git a/components/Header.tsx b/components/Header.tsx
index b02502a..f984b3f 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -16,37 +16,19 @@ export default function Header() {
           restorePhotos.io
         </h1>
       </Link>
-      <div className="flex justify-between sm:w-32 sm:h-[34px] w-20 h-[28px]">
-        <a
-          className="cursor-pointer"
-          onClick={() => {
-            const html = document.querySelector("html");
-            html?.classList.toggle("dark");
-            localStorage.setItem("dark", "true");
-          }}
-        >
-          <Image
-            alt="Dark mode toggle"
-            src="/lightbulb-regular.svg"
-            className="sm:w-10 sm:h-[34px] w-8 h-[28px] dark:invert"
-            width={32}
-            height={28}
-          />
-        </a>
-        <a
-          href="https://vercel.com/templates/next.js/ai-photo-restorer"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Image
-            alt="Vercel Icon"
-            src="/vercelLogo.png"
-            className="sm:w-10 sm:h-[34px] w-8 h-[28px] dark:invert"
-            width={32}
-            height={28}
-          />
-        </a>
-      </div>
+      <a
+        href="https://vercel.com/templates/next.js/ai-photo-restorer"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Image
+          alt="Vercel Icon"
+          src="/vercelLogo.png"
+          className="sm:w-10 sm:h-[34px] w-8 h-[28px] dark:invert"
+          width={32}
+          height={28}
+        />
+      </a>
     </header>
   );
 }
diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index 910501b..f2574a2 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -82,7 +82,7 @@ export function Testimonials() {
             Loved by many worldwide.
           </h1>
           <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7 dark:text-zinc-400">
-            See what our 40,000+ users are saying about the product.
+            See what our 100,000+ users are saying about the product.
           </p>
         </div>
         <ul
diff --git a/pages/index.tsx b/pages/index.tsx
index 0c7b680..e58fe35 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
           rel="noreferrer"
           className="border rounded-2xl py-1 px-4 text-slate-500 dark:text-zinc-300 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out"
         >
-          Used by over <span className="font-semibold">40,000</span> happy
+          Used by over <span className="font-semibold">100,000</span> happy
           customers
         </a>
         <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-slate-900 dark:text-zinc-100 sm:text-7xl">
diff --git a/pages/restore.tsx b/pages/restore.tsx
index 84d6d04..4f68322 100644
--- a/pages/restore.tsx
+++ b/pages/restore.tsx
@@ -107,7 +107,7 @@ const Home: NextPage = () => {
         <p className="text-slate-500 dark:text-zinc-300">
           {" "}
           {/* Obtained this number from Vercel: based on how many serverless invocations happened. Can automate later */}
-          <CountUp start={10000} end={38044} duration={2} separator="," />{" "}
+          <CountUp start={50000} end={174851} duration={2} separator="," />{" "}
           photos generated and counting.
         </p>
         <ResizablePanel>
diff --git a/public/lightbulb-regular.svg b/public/lightbulb-regular.svg
deleted file mode 100644
index 9a15f75..0000000
--- a/public/lightbulb-regular.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM192 0C90.02 .3203 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.8 289.2 .0039 192 0zM288.4 260.1c-15.66 17.85-35.04 46.3-49.05 75.89h-94.61c-14.01-29.59-33.39-58.04-49.04-75.88C75.24 236.8 64 206.1 64 175.1C64 113.3 112.1 48.25 191.1 48C262.6 48 320 105.4 320 175.1C320 206.1 308.8 236.8 288.4 260.1zM176 80C131.9 80 96 115.9 96 160c0 8.844 7.156 16 16 16S128 168.8 128 160c0-26.47 21.53-48 48-48c8.844 0 16-7.148 16-15.99S184.8 80 176 80z"/></svg>
\ No newline at end of file

From 001a08af2139c1f5d3d1028c06bfbb51f97e11c0 Mon Sep 17 00:00:00 2001
From: Taylan <taylanunver@hotmail.com>
Date: Sun, 5 Feb 2023 16:14:26 +0300
Subject: [PATCH 7/8] conflicts with main because of comment differences

---
 pages/restore.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/restore.tsx b/pages/restore.tsx
index 4f68322..a0ab4cb 100644
--- a/pages/restore.tsx
+++ b/pages/restore.tsx
@@ -106,7 +106,7 @@ const Home: NextPage = () => {
         </h1>
         <p className="text-slate-500 dark:text-zinc-300">
           {" "}
-          {/* Obtained this number from Vercel: based on how many serverless invocations happened. Can automate later */}
+          {/* Obtained this number from Vercel: based on how many serverless invocations happened. */}
           <CountUp start={50000} end={174851} duration={2} separator="," />{" "}
           photos generated and counting.
         </p>

From 49ac23e3f3748323319a3ce50cd3e31c850e4909 Mon Sep 17 00:00:00 2001
From: taylanunver <taylanunver@hotmail.com>
Date: Sun, 5 Feb 2023 16:26:07 +0300
Subject: [PATCH 8/8] fixed bug with mode storage

---
 components/Footer.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index c3d40ef..cbe6a2b 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -30,7 +30,11 @@ export default function Footer() {
           onClick={() => {
             const html = document.querySelector("html");
             html?.classList.toggle("dark");
-            localStorage.setItem("dark", "true");
+            if (localStorage.getItem("dark") === "true") {
+              localStorage.setItem("dark", "false");
+            } else {
+              localStorage.setItem("dark", "true");
+            }
           }}
         >
           <svg