v1 of landing page is done

blackteawing · Feb 21, 2023 · 9f1fca2 · 9f1fca2
1 parent 3b52551
commit 9f1fca2
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -3,12 +3,13 @@
 - [x] Replace model with controlnet and test it
   - [ ] Need to make sure to let replicate team know to keep it on when I launch
 - [x] Make UI look nicer, maybe dark theme
-- [ ] Redo landing page, remove testimonials and either make it dark mode or use another lp
+- [x] Redo landing page, remove testimonials and either make it dark mode or use another lp
 - [ ] Add dropdown with what kind of room it is
+- [ ] Some visual indication that it takes ~25s
 - [ ] Come up with 4 themes and add them to the restore page
 - [ ] Add ability to make the links sharable - look at Replicate's projects
-- [ ] Try diff color pallets
 - [ ] Redo README
+- [ ] Add gradient / Try diff color pallets
 
 # [RestorePhotos.io](https://restorephotos.io/)
 

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="flex justify-between items-center w-full mt-5 border-b pb-7 sm:px-4 px-2 border-gray-500">
+    <header className="flex justify-between items-center w-full mt-3 border-b pb-7 sm:px-4 px-2 border-gray-500">
       <Link href="/" className="flex space-x-2">
         <Image
           alt="header text"
@@ -17,7 +17,7 @@ export default function Header() {
         </h1>
       </Link>
       <a
-        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"
+        className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-500 bg-blue-600 font-medium transition"
         href="https://github.com/Nutlope/search-youtuber"
         target="_blank"
         rel="noopener noreferrer"

diff --git a/components/SquigglyLines.tsx b/components/SquigglyLines.tsx
@@ -3,7 +3,7 @@ export default function SquigglyLines() {
     <svg
       aria-hidden="true"
       viewBox="0 0 418 42"
-      className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
+      className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-500/60"
       preserveAspectRatio="none"
     >
       <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -10,71 +10,58 @@ const Home: NextPage = () => {
   return (
     <div className="flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
       <Head>
-        <title>Face Photo Restorer</title>
+        <title>roomGPT</title>
       </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-20 mt-20">
         <a
           href="https://twitter.com/nutlope/status/1626074563481051136"
           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 border-gray-700 rounded-lg py-2 px-4 text-gray-400 text-sm mb-5 transition duration-300 ease-in-out"
         >
-          Used by over <span className="font-semibold">200,000</span> happy
-          users
+          See the announcement on <span className="text-blue-600">Twitter</span>
         </a>
-        <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-slate-900 sm:text-7xl">
-          Restoring old photos{" "}
-          <span className="relative whitespace-nowrap text-[#3290EE]">
+        <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-gray-300 sm:text-7xl">
+          Generating dream rooms{" "}
+          <span className="relative whitespace-nowrap text-blue-600">
             <SquigglyLines />
             <span className="relative">using AI</span>
           </span>{" "}
           for everyone.
         </h1>
-
-        <p className="mx-auto mt-12 max-w-xl text-lg text-slate-700 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 className="mx-auto mt-12 max-w-xl text-lg text-gray-500 leading-7">
+          Take a picture of your room and see how your room looks in different
+          themes. 100% free – get inspiration for your dream room today.
         </p>
-        <div className="flex justify-center space-x-4">
-          <a
-            className="bg-white rounded-xl text-black font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-gray-100 border"
-            href="https://youtu.be/FRQtFDDrUXQ"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Learn how it's built
-          </a>
-
-          <Link
-            className="bg-black rounded-xl text-white font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-black/80"
-            href="/restore"
-          >
-            Restore your photos
-          </Link>
-        </div>
+        <Link
+          className="bg-blue-600 rounded-xl text-white font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-blue-500 transition"
+          href="/restore"
+        >
+          Generate your dream room
+        </Link>
         <div className="flex justify-between items-center w-full flex-col sm:mt-10 mt-6">
           <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 className="flex sm:space-x-8 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">Original Room</h2>
                 <Image
                   alt="Original photo of my bro"
-                  src="/michael.jpg"
-                  className="w-96 h-96 rounded-2xl"
+                  src="/original-pic.jpg"
+                  className="w-full h-96 rounded-2xl"
                   width={400}
                   height={400}
                 />
               </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">Generated Room</h2>
                 <Image
                   alt="Restored photo of my bro"
                   width={400}
                   height={400}
-                  src="/michael-new.jpg"
-                  className="w-96 h-96 rounded-2xl sm:mt-0 mt-2"
+                  src="/generated-pic.png"
+                  className="w-full h-96 rounded-2xl sm:mt-0 mt-2"
                 />
               </div>
             </div>

diff --git a/pages/restore.tsx b/pages/restore.tsx
@@ -13,8 +13,6 @@ import ResizablePanel from "../components/ResizablePanel";
 import Toggle from "../components/Toggle";
 import appendNewToName from "../utils/appendNewToName";
 import downloadPhoto from "../utils/downloadPhoto";
-import NSFWPredictor from "../utils/nsfwCheck";
-import va from "@vercel/analytics";
 
 // Configuration for the uploader
 const uploader = Uploader({
@@ -27,19 +25,7 @@ const options = {
   maxFileCount: 1,
   mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
   editor: { images: { crop: false } },
-  styles: { colors: { primary: "#4B5563" } }, // maybe experiment with diff colors
-  onValidate: async (file: File): Promise<undefined | string> => {
-    let isSafe = false;
-    try {
-      isSafe = await NSFWPredictor.isSafeImg(file);
-      if (!isSafe) va.track("NSFW Image blocked");
-    } catch (error) {
-      console.error("NSFW predictor threw an error", error);
-    }
-    return isSafe
-      ? undefined
-      : "Detected a NSFW image which is not allowed. If this was a mistake, please contact me at [email protected]";
-  },
+  styles: { colors: { primary: "#2563EB" } }, // maybe experiment with diff colors
 };
 
 const Home: NextPage = () => {
@@ -90,14 +76,14 @@ const Home: NextPage = () => {
   return (
     <div className="flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
       <Head>
-        <title>Restore Photos</title>
+        <title>roomGPT</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <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-100 sm:text-6xl mb-5">
-          Generate your dream room
+          Generate your <span className="text-blue-600">dream</span> room
         </h1>
         <ResizablePanel>
           <AnimatePresence exitBeforeEnter>

diff --git a/public/generated-pic.png b/public/generated-pic.png
diff --git a/public/generatedpic.png b/public/generatedpic.png
diff --git a/public/original-pic.jpg b/public/original-pic.jpg
diff --git a/utils/nsfwCheck.ts b/utils/nsfwCheck.ts