Merge pull request #45 from Nutlope/pricing-3

Pricing 3

.example.env

@@ -14,3 +14,7 @@ GOOGLE_CLIENT_SECRET=
 DATABASE_URL=
 SHADOW_DATABASE_URL=
 NEXTAUTH_URL=
+
+# Pricing
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=

README.md

@@ -1,12 +1,12 @@
 # [roomGPT.io](https://roomGPT.io)
 
-This project generates new designs of your room with AI.
+This project generates new designs of your room with AI
 
 [![Room GPT](./public/screenshot.png)](https://roomGPT.io)
 
 ## How it works
 
-It uses an ML model called [ControlNet](https://github.com/lllyasviel/ControlNet) to generate variations of rooms. This application gives you the ability to upload a photo of any room, which will send it through this ML Model using a Next.js API route, and return your generated room. The ML Model is hosted on [Replicate](https://replicate.com) and [Upload](https://upload.io) is used for image storage.
+It uses an ML model called [ControlNet](https://github.com/lllyasviel/ControlNet) to generate variations of rooms. This application gives you the ability to upload a photo of any room, which will send it through this ML Model using a Next.js API route, and return your generated room. The ML Model is hosted on [Replicate](https://replicate.com) and [Upload](https://upload.io) is used for image storage. [Loops](https://loops.so/) is used for emails.
 
 ## Running Locally
 
@@ -59,4 +59,4 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 
 [![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)
 
-> Note: You will need to configure auth by following the setup above by using Neon and next-auth
+> Note: You will need to configure auth by following the setup above by using Neon and next-auth and payments

components/Footer.tsx

@@ -21,6 +21,14 @@ export default function Footer() {
         >
           Upload,{" "}
         </a>
+        <a
+          href="https://loops.so"
+          target="_blank"
+          rel="noreferrer"
+          className="font-bold hover:underline hover:text-gray-300 transition underline-offset-2"
+        >
+          Loops,{" "}
+        </a>
         and{" "}
         <a
           href="https://vercel.com/"

components/Header.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 export default function Header({ photo }: { photo?: 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,17 +16,20 @@ export default function Header({ photo }: { photo?: string }) {
           roomGPT.io
         </h1>
       </Link>
-      {/* TODO: Eventually add a dropdown where folks can click to logout and buy credits */}
-      {/* TODO: Maybe add another link to purchase credits next to dashboard */}
-      {/* TODO: Also add "see previous generations in our new dashboard" note */}
       {photo ? (
         <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>
-            <div className="text-blue-500 bg-blue-200 rounded-full px-2 text-xs flex justify-center items-center font-semibold">
+          </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>
@@ -39,31 +42,13 @@ export default function Header({ photo }: { photo?: string }) {
           />
         </div>
       ) : (
-        <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"
+        <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"
         >
-          <Github />
-          <p>Star on GitHub</p>
-        </a>
+          <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/Testimonials.tsx

@@ -81,7 +81,7 @@ export function Testimonials() {
             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 92,000+ users are saying about the product.
+            See what our over 1 million users are saying about the product.
           </p>
         </div>
         <ul