made it dark mode and finished restore page

README.md

@@ -2,11 +2,12 @@
 
 - [x] Replace model with controlnet and test it
   - [ ] Need to make sure to let replicate team know to keep it on when I launch
-- [ ] Make UI look nicer, maybe dark theme
+- [x] Make UI look nicer, maybe dark theme
+- [ ] Redo landing page, remove testimonials and either make it dark mode or use another lp
 - [ ] Add dropdown with what kind of room it is
 - [ ] Come up with 4 themes and add them to the restore page
 - [ ] Add ability to make the links sharable - look at Replicate's projects
-- [ ] Redo landing page, remove testimonials and either make it dark mode or use another lp
+- [ ] Try diff color pallets
 - [ ] Redo README
 
 # [RestorePhotos.io](https://restorephotos.io/)

components/Footer.tsx

@@ -2,22 +2,22 @@ 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">
-      <div>
+    <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 border-gray-500">
+      <div className="text-gray-500">
         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 hover:text-gray-300 underline-offset-2"
         >
           Replicate,{" "}
         </a>
         <a
           href="https://upload.io"
           target="_blank"
           rel="noreferrer"
-          className="font-bold hover:underline transition underline-offset-2"
+          className="font-bold hover:underline hover:text-gray-300 transition underline-offset-2"
         >
           Upload,{" "}
         </a>
@@ -26,7 +26,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 hover:text-gray-300 underline-offset-2"
         >
           Vercel.
         </a>
@@ -39,7 +39,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-gray-500 group-hover:fill-gray-300"
           >
             <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>
@@ -51,7 +51,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-gray-500 group-hover:fill-gray-300"
           >
             <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>

components/Header.tsx

@@ -3,32 +3,43 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
+    <header className="flex justify-between items-center w-full mt-5 border-b pb-7 sm:px-4 px-2 border-gray-500">
       <Link href="/" className="flex space-x-2">
         <Image
           alt="header text"
-          src="/imageIcon.png"
-          className="sm:w-14 sm:h-14 w-9 h-9"
-          width={36}
-          height={36}
+          src="/bed.svg"
+          className="sm:w-10 sm:h-10 w-9 h-9"
+          width={24}
+          height={24}
         />
-        <h1 className="sm:text-5xl text-3xl font-bold ml-2 tracking-tight">
+        <h1 className="sm:text-3xl text-xl font-bold ml-2 tracking-tight">
           roomGPT.io
         </h1>
       </Link>
       <a
-        href="https://vercel.com/templates/next.js/ai-photo-restorer"
+        className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-600 text-white px-5 py-2 text-sm shadow-md transition-colors hover:bg-gray-400 bg-gray-600 font-medium"
+        href="https://github.com/Nutlope/search-youtuber"
         target="_blank"
-        rel="noreferrer"
+        rel="noopener noreferrer"
       >
-        <Image
-          alt="Vercel Icon"
-          src="/vercelLogo.png"
-          className="sm:w-10 sm:h-[34px] w-8 h-[28px]"
-          width={32}
-          height={28}
-        />
+        <Github />
+        <p>Star on GitHub</p>
       </a>
     </header>
   );
 }
+
+function Github({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}

pages/_document.tsx

@@ -31,7 +31,7 @@ class MyDocument extends Document {
             content="https://restore-photos.vercel.app/og-image.png"
           />
         </Head>
-        <body>
+        <body className="bg-[#17181C] text-white">
           <Main />
           <NextScript />
         </body>

pages/index.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import SquigglyLines from "../components/SquigglyLines";
-import { Testimonials } from "../components/Testimonials";
 
 const Home: NextPage = () => {
   return (
@@ -82,7 +81,7 @@ const Home: NextPage = () => {
           </div>
         </div>
       </main>
-      <Testimonials />
+      {/* <Testimonials /> */}
       <Footer />
     </div>
   );

pages/restore.tsx

@@ -3,7 +3,6 @@ import { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import { useState } from "react";
-import CountUp from "react-countup";
 import { UploadDropzone } from "react-uploader";
 import { Uploader } from "uploader";
 import { CompareSlider } from "../components/CompareSlider";
@@ -23,11 +22,12 @@ const uploader = Uploader({
     ? process.env.NEXT_PUBLIC_UPLOAD_API_KEY
     : "free",
 });
+
 const options = {
   maxFileCount: 1,
   mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
   editor: { images: { crop: false } },
-  styles: { colors: { primary: "#000" } },
+  styles: { colors: { primary: "#4B5563" } }, // maybe experiment with diff colors
   onValidate: async (file: File): Promise<undefined | string> => {
     let isSafe = false;
     try {
@@ -96,8 +96,8 @@ const Home: NextPage = () => {
 
       <Header />
       <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 mt-4 sm:mb-0 mb-8">
-        <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 sm:text-6xl mb-5">
-          Generate your next room photo
+        <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-100 sm:text-6xl mb-5">
+          Generate your dream room
         </h1>
         <ResizablePanel>
           <AnimatePresence exitBeforeEnter>