From 42ce183510261ad912ca4e9d237aecabd4843058 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 2 Jul 2021 05:01:29 +0000
Subject: [PATCH] feat: landing page + smart components

---
 components/app/Globe.vue       |  82 -------------------
 components/landing/Package.vue | 142 +++++++++++++++++++++++++++++++++
 2 files changed, 142 insertions(+), 82 deletions(-)
 delete mode 100644 components/app/Globe.vue
 create mode 100644 components/landing/Package.vue

diff --git a/components/app/Globe.vue b/components/app/Globe.vue
deleted file mode 100644
index 13f50fe6b..000000000
--- a/components/app/Globe.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div id="globe" class="w-full"></div>
-</template>
-
-<script>
-import ThreeGlobe from "three-globe"
-import * as THREE from "three"
-import geojson from "~/assets/geojson/ne_110m_admin_0_countries.geojson"
-import texture from "~/assets/images/texture.png"
-
-export default {
-  data() {
-    return {
-      globe: null,
-      cube: null,
-      renderer: null,
-      scene: null,
-      camera: null,
-      tbControls: null,
-      arcsData: [...Array(40).keys()].map(() => ({
-        startLat: (Math.random() - 0.5) * 180,
-        startLng: (Math.random() - 0.5) * 360,
-        endLat: (Math.random() - 0.5) * 180,
-        endLng: (Math.random() - 0.5) * 360,
-        color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
-          Math.round(Math.random() * 3)
-        ],
-      })),
-    }
-  },
-
-  mounted() {
-    this.init()
-    this.animate()
-  },
-
-  methods: {
-    init() {
-      const container = document.getElementById("globe")
-
-      this.globe = new ThreeGlobe()
-        .globeImageUrl(texture)
-        .atmosphereColor("#aaaaaa")
-        .arcsData(this.arcsData)
-        .arcColor("color")
-        .arcDashLength(1)
-        .arcDashGap(5)
-        .arcStroke(1)
-        .arcDashInitialGap(() => Math.random() * 5)
-        .arcDashAnimateTime(2000)
-        .hexPolygonsData(geojson.features)
-        .hexPolygonResolution(3)
-        .hexPolygonMargin(0.5)
-        .hexPolygonColor(() => `#aaaaaa`)
-
-      this.renderer = new THREE.WebGLRenderer({
-        alpha: true,
-      })
-      this.renderer.setSize(container.clientWidth, container.clientHeight)
-
-      container.appendChild(this.renderer.domElement)
-
-      this.scene = new THREE.Scene()
-      this.scene.background = null
-      this.scene.add(this.globe)
-      this.scene.add(new THREE.AmbientLight(0xffffff))
-      this.scene.add(new THREE.DirectionalLight(0xffffff, 0.8))
-
-      this.camera = new THREE.PerspectiveCamera()
-      this.camera.aspect = container.clientWidth / container.clientHeight
-      this.camera.updateProjectionMatrix()
-      this.camera.position.z = 300
-    },
-
-    animate() {
-      this.renderer.render(this.scene, this.camera)
-      requestAnimationFrame(this.animate)
-      this.globe.rotation.y -= 0.005
-    },
-  },
-}
-</script>
diff --git a/components/landing/Package.vue b/components/landing/Package.vue
new file mode 100644
index 000000000..3446b2596
--- /dev/null
+++ b/components/landing/Package.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="flex flex-col p-4">
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div
+        class="inline-flex flex-col transition border rounded-lg border-divider"
+      >
+        <div class="flex flex-col p-8">
+          <p class="font-semibold tracking-widest text-accent">API</p>
+          <h3
+            class="
+              max-w-xl
+              my-4
+              text-4xl
+              font-semibold
+              leading-tight
+              tracking-tight
+              transition
+              text-secondaryDark
+            "
+          >
+            Powerful and easy-to-use APIs
+          </h3>
+          <p class="my-4 text-lg md:w-4/5">
+            We agonize over the right abstractions so your teams don’t need to
+            stitch together disparate systems or spend months integrating
+            payments functionality.
+          </p>
+          <div class="flex mt-4">
+            <ButtonPrimary
+              to="https://docs.kooli.tech/guides"
+              label="Read the docs"
+              icon="chevron_right"
+              reverse
+            />
+          </div>
+        </div>
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <div
+            v-for="(api, index) in apis"
+            :key="`api-${index}`"
+            class="inline-flex flex-col p-8"
+          >
+            <i class="text-3xl material-icons text-accent">{{ api.icon }}</i>
+            <div class="flex-grow">
+              <h2
+                class="
+                  mt-4
+                  mb-2
+                  text-lg
+                  font-semibold
+                  transition
+                  text-secondaryDark
+                "
+              >
+                {{ api.title }}
+              </h2>
+              <p>
+                {{ api.description }}
+              </p>
+              <p class="mt-2">
+                <SmartLink :to="api.link.target" class="link">
+                  {{ api.link.title }}
+                  <i class="material-icons">chevron_right</i>
+                </SmartLink>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="
+          inline-flex
+          flex-col
+          p-4
+          transition
+          border
+          rounded-lg
+          border-divider
+          bg-primaryLight
+        "
+      >
+        <div class="flex">
+          <div class="w-3 h-3 mr-2 bg-red-500 rounded-full"></div>
+          <div class="w-3 h-3 mr-2 bg-yellow-500 rounded-full"></div>
+          <div class="w-3 h-3 bg-green-500 rounded-full"></div>
+        </div>
+        <div class="flex flex-1 p-4 overflow-auto whitespace-pre">
+          <pre>
+/*
+ ** TailwindCSS Configuration File
+ **
+ ** Docs: https://tailwindcss.com/docs/configuration
+ ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+ */
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  experimental: "all",
+  dark: "class",
+  corePlugins: {
+    float: false,
+    clear: false,
+    transitionDelay: false,
+    skew: false,
+  },
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      apis: [
+        {
+          icon: "layers",
+          title: "Tools for every stack",
+          description:
+            "We offer client and server libraries in everything from React, PHP to .NET and iOS.",
+          link: {
+            title: "See libraries",
+            target: "https://docs.kooli.tech/api",
+          },
+        },
+        {
+          icon: "extension",
+          title: "Prebuilt integrations",
+          description:
+            "Use integrations for systems like Shopify, PayPal, and more.",
+          link: { title: "Explore partners", target: "/about/integrations" },
+        },
+      ],
+    }
+  },
+}
+</script>