added gradient on the homepage

nnajiabraham · Feb 24, 2023 · d7a337a · d7a337a
1 parent 16f32c3
commit d7a337a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -11,28 +11,22 @@
 - [x] Tweet out a screenshot for hype
 - [x] Let replicate team know to keep it on when I launch
 - [x] Test it out locally + in prod to make sure it works properly
+- [x] Add gradient for roomGPT
+- [ ] Refactor code in general (maybe use react-hook-form)
 - [ ] Test out other models and tweak params to obtain optimal results
-- [ ] /restore UI update: Make all dropdowns same length, make sure original image isn't stretches, re-align toggle
+  - [ ] Play around with the scale input - 16 seems good
+- [ ] /restore UI update: Make all dropdowns same length, make sure original image isn't stretches
   - [ ] Email upload.io about changing the background for that thing
   - [ ] Maybe switch to 768 generations
-- [ ] Send it to team/ai channel for feedback
-- [ ] I don't like that it's low quality.
+- [ ] Mobile styles
+- [ ] Some visual indication that it takes ~25s
 
 ## Todos v1.5
 
-- [ ] Some visual indication that it takes ~25s
 - [ ] Sharability features - look at Replicate's project for inspo
   - [ ] Add ability to generate shareable links
   - [ ] Also use dynamic OGs to make this work as well
-- [ ] Launch on Twitter
-
-## Todos v2
-
-- [ ] Play around with the scale input - 16 seems good
-- [ ] Refactor all inputs into react-hook-form
-- [ ] Figure out how to customize upload.io more
 - [ ] Add a carousel of generated rooms using my image gallery
-- [ ] Add gradient / Try diff color pallets for roomGPT
 
 # [roomGPT.io](https://roomGPT.io)
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -10,11 +10,11 @@ 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>roomGPT</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-20 mt-20">
+      <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 sm:mt-20 mt-20 background-gradient">
         <a
           href="https://twitter.com/nutlope/status/1626074563481051136"
           target="_blank"

diff --git a/pages/restore.tsx b/pages/restore.tsx
@@ -81,7 +81,7 @@ 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>roomGPT</title>
+        <title>RoomGPT</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@media (min-width: 400px) {
+  .background-gradient::before {
+    background: radial-gradient(
+      20% 50% at 50% 50%,
+      rgba(71, 127, 247, 0.376) 0%,
+      rgba(37, 38, 44, 0) 100%
+    );
+    z-index: -10;
+    content: "";
+    position: absolute;
+    inset: 0px;
+    transform: scale(1);
+    pointer-events: none;
+  }
+}