homepage improvements

zeondev · May 27, 2024 · 43c05ce · 43c05ce
1 parent 8d778ed
commit 43c05ce
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 26 deletions.
diff --git a/assets/images/developers.png b/assets/images/developers.png
diff --git a/assets/images/fullcustomization.png b/assets/images/fullcustomization.png
diff --git a/assets/images/optionalaccount.png b/assets/images/optionalaccount.png
diff --git a/assets/images/themes.png b/assets/images/themes.png
diff --git a/index.html b/index.html
@@ -6,11 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pluto</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap"
-      rel="stylesheet"
-    />
+      rel="stylesheet" />
     <link rel="stylesheet" href="style.css" />
     <script>
       // loading indicator
@@ -26,36 +25,32 @@
         loader.remove();
       });
     </script>
-    <meta property="og:title" content="Pluto • The web OS for your browser." />
+    <meta property="og:title" content="Pluto • The web OS that runs in your browser." />
     <meta
       property="og:description"
-      content="Welcome to Pluto, a “web operating system” focused on productivity, security and privacy."
-    />
+      content="Welcome to Pluto, a “web operating system” focused on productivity, security and privacy." />
     <meta property="og:type" content="article" />
     <meta property="og:url" content="https://pluto.zeon.dev" />
     <meta
       property="og:image"
-      content="https://pluto.zeon.dev/assets/images/banner.png"
-    />
+      content="https://pluto.zeon.dev/assets/images/banner.png" />
     <meta name="twitter:site" content="My Website" />
-    <meta name="twitter:title" content="Pluto • The web OS for your browser." />
+    <meta name="twitter:title" content="Pluto • The web OS that runs in your browser." />
     <meta
       name="twitter:description"
-      content="Welcome to Pluto, a “web operating system” focused on productivity, security and privacy."
-    />
+      content="Welcome to Pluto, a “web operating system” focused on productivity, security and privacy." />
     <meta name="twitter:card" content="summary_large_image" />
     <meta
       name="twitter:image:src"
-      content="https://pluto.zeon.dev/assets/images/banner.png"
-    />
+      content="https://pluto.zeon.dev/assets/images/banner.png" />
     <meta name="theme-color" content="#6c9dff" />
     <meta name="darkreader-lock" />
   </head>
 
   <body>
     <nav class="navbar">
       <div class="left">
-        <a href="" class="logo">
+        <a href class="logo">
           <em>pluto</em>
         </a>
       </div>
@@ -69,14 +64,14 @@
     <article class="sections-container">
       <section class="section">
         <div class="center">
-          <h1 class="big">The <span class="t">web OS</span> for your browser.</h1>
+          <h1 class="big">The <span class="t">web OS</span> that runs in your
+            browser.</h1>
           <p class="semi-big">
             Welcome to Pluto, a &ldquo;web operating system&rdquo; focused on
             productivity, security and privacy.
           </p>
-          <a href="https://pluto-app.zeon.dev" class="btn primary"
-            >Get Started</a
-          >
+          <a href="https://pluto-app.zeon.dev" class="btn primary">Get
+            Started</a>
         </div>
       </section>
       <section class="section">
@@ -100,7 +95,7 @@ <h2 class="big">Full customization</h2>
             You can change the look and feel of Pluto to match your preference.
           </p>
         </div>
-        <img src="./assets/images/themes.png" />
+        <img src="./assets/images/fullcustomization.png" />
       </section>
       <section class="section">
         <div class="mw">
@@ -109,31 +104,70 @@ <h2 class="big">Privacy first</h2>
             Pluto is designed with privacy in mind.
             <br />
             We do not track you or your data.
+            <br />
+            Your files stay all on-device and don't reach a
+            cloud server.
           </p>
         </div>
         <img src="./assets/images/security.png" />
       </section>
       <section class="section">
         <div class="mw">
-          <h2 class="big">Testimonials</h2>
+          <h2 class="big">Optional online service</h2>
+          <p class="semi-big">
+            Unlike our competitors, you don't need to log in to an account to
+            use Pluto.
+            <br />
+            All of the features in first-party apps work without an account.
+            <br />
+          </p>
         </div>
-        <div class="secondary">
+        <img src="./assets/images/optionalaccount.png" />
+        <span class="midsmall">* Third party apps may require a logged in
+          account to access more
+          features.</span>
+      </section>
+      <section class="section">
+        <div class="mw">
+          <h2 class="big">Built for developers</h2>
           <p class="semi-big">
+            Developers can easily make apps for Pluto in just minutes!
+            <br />
+            No need to memorize the APIs, there is built-in documentation for
+            you!
+          </p>
+        </div>
+        <img src="./assets/images/developers.png" />
+      </section>
+      <section class="section">
+        <div class="mw">
+          <h2 class="big" style="text-align: left">Testimonials</h2>
+          <p class="semi-big" style="text-align: left;">
             &ldquo;This is so awesome!&rdquo;
             <br />
-            &mdash; Ayanbadin
+            &ndash; Ayanbadin
             <br /><br />
-            &ldquo;Looks great, runs great, very big future ahead!&rdquo;<br />&mdash;
+            &ldquo;Looks great, runs great, very big future
+            ahead!&rdquo;<br />&ndash;
             Charles Welland <br /><br />
             &ldquo;I've used Pluto for multiple of my projects, I've used them
             as software props when it comes to video projects. Developing an app
             is very easy - getting an idea from head to code is very neat as you
             do it in one environment only. I've once used just Pluto to listen
             to my favorite artists and code my next project - and it's a game
             changer not breaking the immersion of a system like this.&rdquo;
-            <br />&mdash; SkySorcerer <br /><br />
-
+            <br />&ndash; SkySorcerer
+          </p>
+        </div>
+      </section>
+      <section class="section">
+        <div class="center">
+          <h1 class="big">What are you waiting for?</h1>
+          <p class="semi-big">
+            Try out Pluto today!
           </p>
+          <a href="https://pluto-app.zeon.dev" class="btn primary">Get
+            Started</a>
         </div>
       </section>
       <footer class="footer">

diff --git a/style.css b/style.css
@@ -90,6 +90,12 @@ a {
   cursor: var(--cursor-pointer), auto;
 }
 
+.midsmall {
+  flex-basis: 100%;
+  text-align: center !important;
+  opacity: 0.6;
+}
+
 @media (max-width: 550px) {
   .navbar .right {
     margin-right: 26px;
@@ -242,7 +248,7 @@ article a:hover {
 .footer {
   padding: 10px;
   text-align: center;
-  background-color: hsl(219, 28%, 12%);
+  background-color: hsl(219, 30%, 9%);
 }
 
 body,