Homepage improvements

screen.sh

@@ -1 +1,2 @@
+fuser -k 2323/tcp
 screen -S nova-web python web #uvicorn app:production --host 0.0.0.0 --port 2323 --access-log --use-colors --no-server-header --limit-max-requests 666

web/static/css/home.css

@@ -3,21 +3,47 @@ header {
   max-width: 800px;
   margin: 0 auto;
   font-size: 40px;
+  margin-bottom: 15rem;
 }
 header h1 {
   line-height: 4rem;
 }
 
-div.user-quotes {
+div.featured-box {
-  display: grid;
+  background: rgba(247, 154, 182, 0.1411764706);
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  border: 2px solid rgba(244, 90, 136, 0.3803921569);
-  grid-gap: 2rem;
+  border-radius: 5px;
+  padding: 2rem;
+  margin-block: 2rem;
+  display: flex;
+  vertical-align: middle;
 }
+div.featured-box:hover {
+  scale: 1.05;
+  filter: brightness(1.1) saturate(1.1);
+  box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569);
+}
+div.featured-box img {
+  height: 100px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+div.featured-box h2 {
+  vertical-align: middle;
+  margin-left: 1rem;
+  font-size: 2rem;
+  margin-block: 0;
+}
+div.featured-box h2 span {
+  color: #f45a88;
+}
+
 div.user-quotes div.user-quote__field {
+  margin-block: 2rem;
   padding-inline: 2rem;
   padding-block: 2rem;
   background: rgba(247, 154, 182, 0.1411764706);
-  border: 1px solid rgba(244, 90, 136, 0.3803921569);
+  border: 2px solid rgba(244, 90, 136, 0.3803921569);
   border-radius: 5px;
   position: relative;
   transition: all 200ms;
@@ -48,6 +74,8 @@ div.user-quotes div.user-quote__field img {
   position: absolute;
   top: 1rem;
   right: 1rem;
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
 }
 div.user-quotes div.user-quote__field span.user-quote__username {
   font-size: 1rem;

web/static/css/home.sass

@@ -4,20 +4,50 @@ header
     max-width: $main-width
     margin: 0 auto
     font-size: 40px
+    margin-bottom: 15rem
 
     h1
         line-height: 4rem
 
+div.featured-box
+    background: $primary-soft
+    border: 2px solid $primary-glow
+    border-radius: $edge
+    padding: 2rem
+    margin-block: 2rem
+    display: flex
+    vertical-align: middle
+
+
+    &:hover
+        scale: 1.05
+        filter: brightness(1.1) saturate(1.1)
+        box-shadow: 0 0 30px $primary-glow
+
+    img
+        height: 100px
+        object-fit: cover
+
+    h2
+        vertical-align: middle
+        margin-left: 1rem
+        font-size: 2rem
+        margin-block: 0
+
+        span
+            color: $primary-light
+
 div.user-quotes
-    display: grid
+    // display: grid
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
+    // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
-    grid-gap: 2rem
+    // grid-gap: 2rem
 
     div.user-quote__field
+        margin-block: 2rem
         padding-inline: 2rem
         padding-block: 2rem
         background: $primary-soft
-        border: 1px solid $primary-glow
+        border: 2px solid $primary-glow
         border-radius: $edge
         position: relative
         transition: all 200ms
@@ -50,6 +80,7 @@ div.user-quotes
             position: absolute
             top: 1rem
             right: 1rem
+            object-fit: scale-down
 
         span.user-quote__username
             font-size: 1rem

web/templates/index.html

@@ -4,58 +4,84 @@
 <header>
     <h1>Free Generative AI for <span class="special-gradient">Everyone</span></h1>
     <h3>Make AI Open Again</h3>
-    <a href="/go">
+    <a href="https://discord.nova-oss.com" target="_blank">
         <button class="special">
+            <i class="bi bi-discord"></i>
+            Join 1,300 Discord members
+        </button>
+    </a>
+    <a href="/go">
+        <button class="secondary">
             <i class="bi bi-arrow-right"></i>
             Get started
         </button>
     </a>
-    <a href="https://discord.nova-oss.com" target="_blank">
+    <a href="https://github.com/NovaOSS/nova-api" target="_blank">
         <button class="secondary">
-            Join our Discord
+            <i class="bi bi-github"></i>
+            Open Source
         </button>
     </a>
 </header>
 <main>
-    <h2>What users say</h2>
+    <h2>Look, mom, I'm famous!</h2>
+    <div class="featured-box" onclick="window.open('https://fmhy.pages.dev/ai', '_blank')">
+        <img src="https://fmhy.pages.dev/static/fmhy.ico">
+        <h2>Featured in <span>Free Media Heck Yeah</span></h2>
+        <p>"Nova AI - Free GPT-4 Tokens / API / Chat"</p>
+    </div>
+
+    <h2>Cherry-picked quotes</h2>
 
     <div class="user-quotes">
-        <div class="user-quote__field">
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1120037287300976640/1120037729644855427/1144279505981153302', '_blank')">
-            <a href="https://discord.com/channels/1120037287300976640/1120037729644855427/1145324231236780092" target="_blank">
+            <img src="https://i.ibb.co/dfWkyB3/86b4f6da0e44bf8545be937d66017b71.png">
-                <img src="https://cdn.discordapp.com/avatars/319792874696867840/5c31623f67962c7c689898a0517c4813.png?size=128">
+            <span class="user-quote__username">Krit</span>
-            </a>
-            <span class="user-quote__username">@perl404</span>
-            <p>I love the credit system in this API.</p>
-        </div>
-        
-        <div class="user-quote__field">
-            <a href="https://discord.com/channels/1120037287300976640/1120037729644855427/1145791262063075378" target="_blank">
-                <img src="https://cdn.discordapp.com/avatars/1126131609855332372/87c3c7138b751da3cccf641d078dff2b.png?size=128">
-            </a>
-            <span class="user-quote__username">@itsnot.david</span>
-            <p>Nova is good. I love it because [it's] free and easy.</p>
-        </div>
-
-        <div class="user-quote__field">
-            <a href="https://discord.com/channels/1120037287300976640/1120037729644855427/1144279505981153302" target="_blank">
-                <img src="https://cdn.discordapp.com/avatars/756585981787897956/86b4f6da0e44bf8545be937d66017b71.png?size=128">
-            </a>
-            <span class="user-quote__username">@mainkrit</span>
             <p>We can all agree that NovaAI is the best.</p>
         </div>
         
-        <div class="user-quote__field">
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1120037287300976640/1120037729644855427/1148559579890864178', '_blank')">
-            <a href="https://discord.com/channels/1120037287300976640/1120037729644855427/1143784944888447037" target="_blank">
+            <img src="https://i.ibb.co/p4TB2nm/f44610c370eec2b28ccc926e61fb86fe.png">
-                <img src="https://cdn.discordapp.com/avatars/1130410896896819211/b461ea5ea97a773d000300e4d978e24d.png?size=128">
+            <span class="user-quote__username">Tech With Anirudh</span>
-            </a>
+            <p>NovaOSS is really good, I mean really. The code's good. The website's good. The API's good.</p>
-            <span class="user-quote__username">@elephant_0000</span>
+        </div>
+        
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1120037287300976640/1120037729644855427/1145791262063075378', '_blank')">
+            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Femoji.gg%2Fassets%2Femoji%2F1129-discord.png&f=1&nofb=1&ipt=c507c1ea551b33c06e1f2bc2baa5f1d3eb29bca0d721db852876a86de198a944&ipo=images">
+            <span class="user-quote__username">David</span>
+            <p>Nova is good. I love it because [it's] free and easy.</p>
+        </div>
+        
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1117511140440821852/1149316497265660045/1149316515724787752', '_blank')">
+            <img src="https://i.ibb.co/XzDPQJs/image.png">
+            <span class="user-quote__username">Tolgchu (co-owner of PurGPT)</span>
+            <p>Would you like a fully open-source API including GPT-4-32k? It's even fully free and has 0% reverse engineering!</p>
+        </div>
+        
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1120753218071310346/1149291492335177818/1149293863597514772', '_blank')">
+            <img src="https://i.ibb.co/DGxdgWX/image.png">
+            <span class="user-quote__username">Koru (owner of Skailar)</span>
+            <p>Nova [is] an open source, ethically sourced (no reverse engineering, just like us) API with high limits and a big amount of available models.</p>
+        </div>
+        
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1120037287300976640/1120037729644855427/1145324231236780092', '_blank')">
+            <img src="https://i.ibb.co/DKDm8hg/image.png">
+            <span class="user-quote__username">Perl (owner of GeniusAI)</span>
+            <p>I love the credit system in this API.</p>
+        </div>
+        
+        <div class="user-quote__field" onclick="window.open('https://discord.com/channels/1120037287300976640/1120037729644855427/1143784944888447037', '_blank')">
+            <img src="https://i.ibb.co/9grjkW2/b461ea5ea97a773d000300e4d978e24d.png">
+            <span class="user-quote__username">Flying Elephant</span>
             <p>You are so excellent [...]. Thank you for your contributions.</p>
         </div>
     </div>
 
     <h6>
-        All these quotes are from our Discord server, none of these users are in our team or got any kind of rewards for saying that.
+        All these quotes are from our Discord server, none of these users are in our team or got any kind of rewards for
-        None of our users were asked to say that, they said it on their own. We just edited spelling, grammar and punctuation on these messages.
+        saying that.
+        None of our users were asked to say that, they said it on their own. We just edited spelling, grammar and
+        punctuation on these messages.
     </h6>
 </main>
 {% include 'parts/end.html' %}