Level up the type definition from the parameters.

.example.env

@@ -3,3 +3,18 @@ REPLICATE_API_KEY=
 # Optional, if you're doing rate limiting
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
+
+# Optional, if you're planning to use Upload.io (you need to if you have 100+ uploads)
+NEXT_PUBLIC_UPLOAD_API_KEY=
+
+# Optional, if you want to add auth + DB
+NEXTAUTH_SECRET=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+DATABASE_URL=
+SHADOW_DATABASE_URL=
+NEXTAUTH_URL=
+
+# Pricing
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 .env
+
+# Scripts
+getUsersEmails.ts

README.md

@@ -1,6 +1,6 @@
 # [roomGPT.io](https://roomGPT.io)
 
-This project generates designs of your room with AI.
+roomGPT helps design rooms in seconds with AI.
 
 [![Room GPT](./public/screenshot.png)](https://roomGPT.io)
 
@@ -42,8 +42,21 @@ Then, run the application in the command line and it will be available at `http:
 npm run dev
 ```
 
+## Auth setup
+
+1. Use `openssl rand -base64 32` to generate NEXTAUTH_SECRET
+2. Add DB URL and SHADOW DB URL from Neon
+3. Create a new project in console.cloud.google.com
+4. Click configure consent screen in API credentials page and click external
+5. Add an app name, do not upload logo, add authorized domain
+6. Publish app
+7. Create credentials -> Oauth client ID
+8. Run npx prisma db push && prisma migrate dev && prisma generate
+
 ## One-Click Deploy
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Nutlope/roomGPT&env=REPLICATE_API_KEY&project-name=room-GPT&repo-name=roomGPT)
+> Note: You will need to configure auth by following the setup above by using Neon and next-auth and Stripe for payments in order to deploy with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Nutlope/roomGPT&env=REPLICATE_API_KEY,NEXTAUTH_SECRET,GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET,DATABASE_URL,SHADOW_DATABASE_URL,NEXTAUTH_URL&project-name=room-GPT&repo-name=roomGPT)

components/DropDown.tsx

@@ -17,7 +17,6 @@ interface DropDownProps {
   themes: themeType[] | roomType[];
 }
 
-// TODO: Change names since this is a generic dropdown now
 export default function DropDown({ theme, setTheme, themes }: DropDownProps) {
   return (
     <Menu as="div" className="relative block text-left">

components/Footer.tsx

@@ -8,24 +8,28 @@ export default function Footer() {
         <a
           href="https://replicate.com/"
           target="_blank"
-          rel="noreferrer"
           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 hover:text-gray-300 transition underline-offset-2"
         >
           Upload,{" "}
         </a>
+        <a
+          href="https://loops.so"
+          target="_blank"
+          className="font-bold hover:underline hover:text-gray-300 transition underline-offset-2"
+        >
+          Loops,{" "}
+        </a>
         and{" "}
         <a
           href="https://vercel.com/"
           target="_blank"
-          rel="noreferrer"
           className="font-bold hover:underline transition hover:text-gray-300 underline-offset-2"
         >
           Vercel.

components/Header.tsx

@@ -1,10 +1,16 @@
 import Image from "next/image";
 import Link from "next/link";
 
-export default function Header() {
+export default function Header({
+  photo,
+  email,
+}: {
+  photo?: string;
+  email?: string;
+}) {
   return (
     <header className="flex flex-col xs:flex-row justify-between items-center w-full mt-3 border-b pb-7 sm:px-4 px-2 border-gray-500 gap-2">
-      <Link href="/" className="flex space-x-2">
+      <Link href="/dream" className="flex space-x-2">
         <Image
           alt="header text"
           src="/bed.svg"
@@ -16,30 +22,43 @@ export default function Header() {
           roomGPT.io
         </h1>
       </Link>
-      <a
-        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/roomGPT"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Github />
-        <p>Star on GitHub</p>
-      </a>
+      {email ? (
+        <div className="flex items-center space-x-4">
+          <Link
+            href="/dashboard"
+            className="border-r border-gray-300 pr-4 flex space-x-2 hover:text-blue-400 transition"
+          >
+            <div>Dashboard</div>
+          </Link>
+          <Link
+            href="/buy-credits"
+            className="border-r border-gray-300 pr-4 flex space-x-2 hover:text-blue-400 transition"
+          >
+            <div>Buy Credits</div>
+            <div className="text-blue-500 bg-blue-200 rounded-full px-2 text-xs flex justify-center items-center font-bold">
+              New
+            </div>
+          </Link>
+          {photo ? (
+            <Image
+              alt="Profile picture"
+              src={photo}
+              className="w-10 rounded-full"
+              width={32}
+              height={28}
+            />
+          ) : (
+            <div className="w-10 h-10 rounded-full bg-white" />
+          )}
+        </div>
+      ) : (
+        <Link
+          className="flex max-w-fit items-center justify-center space-x-2 rounded-lg border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-400 bg-blue-600 font-medium transition"
+          href="/dream"
+        >
+          <p>Sign Up </p>
+        </Link>
+      )}
     </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>
-  );
-}

components/LoadingDots.tsx

@@ -1,23 +1,22 @@
-import styles from "../styles/loading-dots.module.css";
+import styles from '../styles/loading-dots.module.css';
 
-const LoadingDots = ({
-  color = "#000",
-  style = "small",
-}: {
-  color: string;
-  style: string;
-}) => {
-  return (
-    <span className={style == "small" ? styles.loading2 : styles.loading}>
-      <span style={{ backgroundColor: color }} />
-      <span style={{ backgroundColor: color }} />
-      <span style={{ backgroundColor: color }} />
-    </span>
-  );
+interface IProps {
+	color: string;
+	style: string;
+}
+
+const LoadingDots = ({ color = '#000', style = 'small' }: IProps) => {
+	return (
+		<span className={style == 'small' ? styles.loading2 : styles.loading}>
+			<span style={{ backgroundColor: color }} />
+			<span style={{ backgroundColor: color }} />
+			<span style={{ backgroundColor: color }} />
+		</span>
+	);
 };
 
 export default LoadingDots;
 
 LoadingDots.defaultProps = {
-  style: "small",
+	style: 'small',
 };

components/RoomGenerator.tsx

@@ -0,0 +1,36 @@
+import Image from "next/image";
+
+export function RoomGeneration({
+  original,
+  generated,
+}: {
+  original: string;
+  generated: string;
+}) {
+  return (
+    <div className="flex flex-col space-y-10 mt-4 mb-4 border px-8 pb-8 pt-2 border-gray-600 rounded-xl">
+      <div className="flex sm:space-x-8 sm:flex-row flex-col pb-5">
+        <div>
+          <h3 className="mb-1 font-medium text-lg">Original</h3>
+          <Image
+            alt="Original room"
+            src={original}
+            className="rounded-2xl h-full"
+            width={400}
+            height={400}
+          />
+        </div>
+        <div className="sm:mt-0 mt-8">
+          <h3 className="mb-1 font-medium text-lg">Generated</h3>
+          <Image
+            alt="Generated room"
+            width={400}
+            height={400}
+            src={generated}
+            className="rounded-2xl h-full sm:mt-0 mt-2"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

components/Testimonials.tsx

@@ -0,0 +1,136 @@
+import Image from "next/image";
+
+const testimonials = [
+  [
+    {
+      content: "So good! I need this right now. Congrats on the launch!",
+      link: "https://twitter.com/eveporcello/status/1631438728999899136",
+      author: {
+        name: "Eve Porcello",
+        role: "Engineer & Author",
+        image: "/eve.jpg",
+      },
+    },
+
+    {
+      content:
+        "Finally! Something to help me get over my indecisiveness when decorating my house!",
+      link: "https://twitter.com/arthur_dvorkin/status/1631402865209274369",
+      author: {
+        name: "Arthur Dvorkin",
+        role: "Engineer",
+        image: "/arthur.jpg",
+      },
+    },
+  ],
+  [
+    {
+      content:
+        "This is incredible, you don't need an interior designer anymore.",
+      link: "https://www.tiktok.com/@thenubians/video/7206088336044313861?q=roomgpt.io&t=1677909079689",
+      author: {
+        name: "Ade Dada",
+        role: "Startup Founder",
+        image: "/ade.jpeg",
+      },
+    },
+    {
+      content:
+        "I haven't changed my room layout for 5 years, but this app may change that. Great job.",
+      link: "https://twitter.com/RobAttfield/status/1631545265281974273",
+      author: {
+        name: "Rob Attfield",
+        role: "Software Engineer",
+        image: "/rob.jpg",
+      },
+    },
+  ],
+  [
+    {
+      content:
+        "This is fantastic. I've already decided on a new wall color from a generated image and repainting it is now my weekend project.",
+      link: "https://twitter.com/Music4UsAll/status/1631622608595607552",
+      author: {
+        name: "Music",
+        role: "Some dude on the internet",
+        image: "/music.jpg",
+      },
+    },
+    {
+      content: "🤯",
+      link: "https://twitter.com/github/status/1631821360619028482",
+      author: {
+        name: "GitHub",
+        role: "The one and only",
+        image: "/github.jpg",
+      },
+    },
+  ],
+];
+
+export function Testimonials() {
+  return (
+    <section
+      id="testimonials"
+      aria-label="What our customers are saying"
+      className="py-10"
+    >
+      <div className="mx-auto px-4 sm:px-6 lg:px-8 md:px-7">
+        <div className="mx-auto md:text-center">
+          <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-gray-300 sm:text-6xl">
+            Loved by many worldwide.
+          </h1>
+          <p className="mx-auto mt-6 max-w-xl text-lg sm:text-gray-400  text-gray-500 leading-7">
+            See what our over 1 million users are saying about the product.
+          </p>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-16 lg:max-w-none lg:grid-cols-3"
+        >
+          {testimonials.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
+                {column.map((testimonial, testimonialIndex) => (
+                  <li
+                    key={testimonialIndex}
+                    className="hover:scale-105 transition duration-300 ease-in-out "
+                  >
+                    <a href={testimonial.link} target="_blank" rel="noreferrer">
+                      <figure className="relative rounded-2xl bg-gray-600 p-6 shadow-xl shadow-slate-900/10">
+                        <blockquote className="relative">
+                          <p className="text-lg tracking-tight text-white">
+                            "{testimonial.content}"
+                          </p>
+                        </blockquote>
+                        <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
+                          <div>
+                            <div className="font-display text-base text-white">
+                              {testimonial.author.name}
+                            </div>
+                            <div className="mt-1 text-sm text-gray-400">
+                              {testimonial.author.role}
+                            </div>
+                          </div>
+                          <div className="overflow-hidden rounded-full bg-slate-50">
+                            <Image
+                              className="h-14 w-14 object-cover"
+                              src={testimonial.author.image}
+                              alt="picture of the testimonial author"
+                              width={56}
+                              height={56}
+                            />
+                          </div>
+                        </figcaption>
+                      </figure>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}