refactor(ui): introduce landing page + minor fixes

assets/icons/google.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M118.2 208.3c19.9-60.3 76.5-103.6 143.7-103.6 36.1 0 68.6 12.8 94.3 33.7L430.5 64C385.2 24.4 327 0 261.8 0 160.9 0 74 57.6 32.3 141.9l85.9 66.4z" fill="#ea4335"/><path d="M348 384.3c-23.3 15-52.8 23-86.2 23-66.9 0-123.3-43-143.4-102.9l-86.2 65.4C73.9 454.3 160.8 512 261.8 512c62.6 0 122.4-22.2 167.1-64L348 384.3z" fill="#34a853"/><path d="M428.9 448c46.8-43.7 77.2-108.7 77.2-192 0-15.1-2.3-31.4-5.8-46.5H261.8v98.9h137.3c-6.8 33.3-25 59-51.1 75.9l80.9 63.7z" fill="#4a90e2"/><path d="M118.4 304.4c-5.1-15.2-7.9-31.4-7.9-48.4 0-16.7 2.7-32.7 7.6-47.7l-85.9-66.4C15.1 176.2 5.8 214.9 5.8 256c0 40.9 9.5 79.6 26.4 113.8l86.2-65.4z" fill="#fbbc05"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M118.2 208.3c19.9-60.3 76.5-103.6 143.7-103.6 36.1 0 68.6 12.8 94.3 33.7L430.5 64C385.2 24.4 327 0 261.8 0 160.9 0 74 57.6 32.3 141.9l85.9 66.4z" fill="currentColor"/><path d="M348 384.3c-23.3 15-52.8 23-86.2 23-66.9 0-123.3-43-143.4-102.9l-86.2 65.4C73.9 454.3 160.8 512 261.8 512c62.6 0 122.4-22.2 167.1-64L348 384.3z" fill="currentColor"/><path d="M428.9 448c46.8-43.7 77.2-108.7 77.2-192 0-15.1-2.3-31.4-5.8-46.5H261.8v98.9h137.3c-6.8 33.3-25 59-51.1 75.9l80.9 63.7z" fill="currentColor"/><path d="M118.4 304.4c-5.1-15.2-7.9-31.4-7.9-48.4 0-16.7 2.7-32.7 7.6-47.7l-85.9-66.4C15.1 176.2 5.8 214.9 5.8 256c0 40.9 9.5 79.6 26.4 113.8l86.2-65.4z" fill="currentColor"/></svg>

assets/scss/styles.scss

@@ -177,6 +177,7 @@ hr {
 .input,
 .select {
   @apply flex;
+  @apply flex-1;
   @apply w-full;
   @apply px-4;
   @apply py-2;
@@ -184,7 +185,9 @@ hr {
   @apply truncate;
   @apply rounded-lg;
   @apply font-semibold;
-  @apply border-2;
+  @apply font-mono;
+  @apply text-xs;
+  @apply border;
   @apply border-divider;
   @apply transition;
   @apply focus:outline-none;

components/app/Section.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()">
+  <section :id="label.toLowerCase()" class="flex flex-col flex-1">
     <slot></slot>
   </section>
 </template>

components/app/Sidenav.vue

@@ -19,12 +19,13 @@ export default {
   data() {
     return {
       primaryNavigation: [
-        { target: "index", icon: "home", title: "Home" },
+        { target: "index", icon: "apps", title: "App" },
         { target: "realtime", icon: "language", title: "Realtime" },
         { target: "graphql", icon: "code", title: "GraphQL" },
-        { target: "doc", icon: "book", title: "Docs" },
+        { target: "documentation", icon: "book", title: "Doc" },
         { target: "profile", icon: "person", title: "Profile" },
         { target: "settings", icon: "settings", title: "Settings" },
+        { target: "home", icon: "home", title: "Home" },
       ],
     }
   },

components/button/Primary.vue

@@ -16,11 +16,11 @@
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
         : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
-      label ? 'px-3' : 'px-2',
+      label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
-      { 'px-4 py-4 text-lg': large },
+      { 'px-6 py-4 text-lg': large },
       { 'shadow-lg hover:shadow-xl': shadow },
       {
         'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':

components/landing/CTA.vue

@@ -41,32 +41,32 @@ export default {
       ctas: [
         {
           icon: "layers",
-          title: "API Documentation",
+          title: "Feature",
           description:
             "Get up and running with Kooli in as little as 10 minutes.",
           link: {
-            title: "API reference",
-            target: "https://docs.kooli.tech/api",
+            title: "Feature",
+            target: "https://docs.hoppscotch.io/api",
           },
         },
         {
           icon: "local_library",
-          title: "Guides",
+          title: "Feature",
           description:
             "Explore and start integrating Kooli's products and tools.",
           link: {
-            title: "Guides and resources",
-            target: "https://docs.kooli.tech/guides",
+            title: "Feature",
+            target: "https://docs.hoppscotch.io/guides",
           },
         },
         {
           icon: "local_library",
-          title: "Guides",
+          title: "Feature",
           description:
             "Explore and start integrating Kooli's products and tools.",
           link: {
-            title: "Guides and resources",
-            target: "https://docs.kooli.tech/guides",
+            title: "Feature",
+            target: "https://docs.hoppscotch.io/guides",
           },
         },
       ],

components/landing/Features.vue

@@ -46,44 +46,44 @@ export default {
       features: [
         {
           icon: "offline_bolt",
-          title: "SaaS Executives",
+          title: "Feature",
           description:
-            "Unblock your barriers to new markets to sell software globally, to companies of all sizes, at all different price points, and increase your revenue growth with Kooli’s SaaS Commerce Platform.",
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
           link: { title: "Learn more", target: "/settings" },
         },
         {
           icon: "stars",
-          title: "Product Managers",
+          title: "Feature",
           description:
-            "Don’t let your billing stack hold you back. Everything you need to grow your SaaS business. Subscription billing, payments, taxes and more, in one unified platform.",
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
           link: { title: "Learn more", target: "/settings" },
         },
         {
           icon: "supervised_user_circle",
-          title: "Creators",
+          title: "Feature",
           description:
-            "Kooli is for artists and creators: writers, designers, software developers, musicians, educators, filmmakers, and anyone in-between. If you make stuff, you can sell that stuff.",
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
           link: { title: "Learn more", target: "/settings" },
         },
         {
           icon: "build_circle",
-          title: "Developers",
+          title: "Feature",
           description:
-            "Focus on building, not billing. Save the blood, sweat and tears for your software development, not your billing stack, with Paddle’s subscription and commerce platform.",
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
           link: { title: "Learn more", target: "/settings" },
         },
         {
           icon: "monetization_on",
-          title: "Finance",
+          title: "Feature",
           description:
-            "All your payments, subscriptions, taxes, invoices, SaaS metrics, and more in one place. Integrate your product, CRM, and accounting with only one tool, not dozens.",
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
           link: { title: "Learn more", target: "/settings" },
         },
         {
           icon: "group_work",
-          title: "Enterprise",
+          title: "Feature",
           description:
-            "Accept payments in 135+ currencies to better serve your international customers with a single integration. No international business entity required. Fees exclude GST.",
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
           link: { title: "Learn more", target: "/settings" },
         },
       ],

components/landing/Footer.vue

@@ -1,25 +1,16 @@
 <template>
-  <footer class="flex flex-col p-4">
+  <footer class="flex flex-col p-6">
     <nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
       <div class="flex flex-col space-y-2">
-        <span>
-          <AppLogo class="h-8" />
-        </span>
-        <span class="font-bold"> Hoppscotch </span>
-        <SmartChangeLanguage />
-        <ul class="space-y-2">
+        <h4 class="font-semibold my-2">Hoppscotch</h4>
+        <ul class="space-y-4">
           <li>
-            <SmartAnchor label="Terms" to="/about/terms" class="footer-nav" />
+            <SmartChangeLanguage />
           </li>
           <li>
-            <SmartAnchor
-              label="Privacy"
-              to="/about/privacy"
-              class="footer-nav"
-            />
+            <SmartColorModePicker />
           </li>
         </ul>
-        <SmartColorModePicker />
       </div>
       <div class="flex flex-col space-y-2">
         <h4 class="font-semibold my-2">Solutions</h4>
@@ -77,72 +68,84 @@ export default {
       navigation: {
         solutions: [
           {
-            name: "SaaS",
-            link: "/settings",
+            name: "RESTful",
+            link: "/",
           },
           {
-            name: "Products",
-            link: "/settings",
+            name: "WebSocket",
+            link: "/realtime",
           },
           {
-            name: "Creators",
-            link: "/settings",
+            name: "SSE",
+            link: "/realtime",
           },
           {
-            name: "Developers",
-            link: "/settings",
+            name: "Socket.IO",
+            link: "/realtime",
           },
           {
-            name: "Finance",
-            link: "/settings",
+            name: "MQTT",
+            link: "/realtime",
           },
           {
-            name: "Enterprise",
-            link: "/settings",
+            name: "GraphQL",
+            link: "/graphql",
           },
         ],
         platform: [
           {
-            name: "Payments",
-            link: "/settings",
+            name: "API Designing",
+            link: "/",
           },
           {
-            name: "Subscriptions",
-            link: "/settings",
+            name: "API Development",
+            link: "/",
           },
           {
-            name: "API",
-            link: "https://docs.kooli.tech/api",
+            name: "API Testing",
+            link: "/",
           },
           {
-            name: "Guides",
-            link: "https://docs.kooli.tech/guides",
+            name: "API Deployment",
+            link: "/",
+          },
+          {
+            name: "API Documentation",
+            link: "/documentation",
+          },
+          {
+            name: "Integrations",
+            link: "/",
           },
         ],
         company: [
           {
             name: "About",
-            link: "/about",
+            link: "/",
           },
           {
-            name: "Jobs",
-            link: "/about/jobs",
-          },
-          {
-            name: "Integrations",
-            link: "/about/integrations",
+            name: "Careers",
+            link: "/careers",
           },
           {
             name: "Support",
-            link: "",
+            link: "/",
           },
           {
             name: "Contact",
-            link: "/about/contact",
+            link: "/",
           },
           {
             name: "Blog",
-            link: "https://blog.kooli.tech",
+            link: "https://blog.hoppscotch.io",
+          },
+          {
+            name: "Community",
+            link: "/",
+          },
+          {
+            name: "Open Source",
+            link: "https://github.com/hoppscotch",
           },
         ],
       },
@@ -153,6 +156,8 @@ export default {
 
 <style lang="scss" scoped>
 .footer-nav {
+  @apply text-xs;
+
   &:hover,
   &:focus {
     @apply text-secondaryDark;

components/landing/Hero.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex p-4 relative">
-    <div class="my-16 max-w-3xl z-10 relative">
+  <div class="flex flex-col p-6 relative md:flex-row">
+    <div class="my-16 max-w-2xl z-10 relative">
       <h2
         class="
           font-semibold
@@ -14,37 +14,48 @@
       >
         Open Source
       </h2>
-      <h3
-        class="
-          font-mono font-semibold
-          my-4
-          text-secondaryDark text-3xl
-          md:text-4xl
-          lg:text-4xl
-        "
-      >
+      <h3 class="my-4 text-secondaryDark text-3xl md:text-4xl lg:text-4xl">
         API Development Ecosystem
       </h3>
-      <p class="my-4 text-lg text-secondaryLight max-w-4/5">
-        Millions of developers and companies build, ship, and maintain their
-        APIs on Hoppscotch — the largest and most advanced development platform
-        in the world.
+      <p class="my-4 text-lg">
+        Thousands of developers and companies build, ship, and maintain their
+        APIs on Hoppscotch — the transparent and most flexible API development
+        ecosystem in the world.
       </p>
-      <div class="flex my-8 items-center">
+      <div class="flex space-x-4 my-8 items-center">
         <ButtonPrimary
-          label="Dashboard"
-          icon="chevron_right"
-          class="my-4"
-          large
+          label="Get Started"
+          icon="arrow_forward"
+          rounded
           reverse
+          @click.native="showLogin = true"
+        />
+        <ButtonSecondary
+          to="https://github.com/hoppscotch/hoppscotch"
+          blank
+          outline
+          label="GitHub"
+          svg="github"
+          large
+          rounded
+          :shortcuts="['30k']"
         />
-        <ButtonSecondary label="Dashboard" icon="chevron_right" />
-        <ButtonPrimary label="GitHub" svg="github" large rounded />
-        <AppGitHubStarButton size="large" />
       </div>
+      <LandingStats />
     </div>
     <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
       <LandingGlobe class="h-64 w-full lg:h-full sm:h-72 md:h-96" />
     </div>
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      showLogin: false,
+    }
+  },
+}
+</script>