feat: landing page + smart components
This commit is contained in:
Liyas Thomas
GitHub
@@ -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>
|
||||
142
components/landing/Package.vue
Normal file
142
components/landing/Package.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user