refactor(ui): introduce landing page + minor fixes
This commit is contained in:
liyasthomas
@@ -1 +1 @@
|
||||
<svg width="2500" height="2432" viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="#161614"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>
|
||||
<svg width="2500" height="2432" viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="currentColor"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 726 B After Width: | Height: | Size: 746 B |
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section :id="label.toLowerCase()">
|
||||
<section :id="label.toLowerCase()" class="flex flex-col flex-1">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -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" },
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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':
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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" },
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex font-mono space-x-16 p-4">
|
||||
<div class="flex font-mono space-x-16 p-6">
|
||||
<div v-for="(stat, index) in stats" :key="`stat-${index}`">
|
||||
<span class="font-bold text-xl">
|
||||
{{ stat.count }}<span class="text-secondaryLight">+</span>
|
||||
@@ -18,7 +18,7 @@ export default {
|
||||
return {
|
||||
stats: [
|
||||
{ count: "350k", audience: "Developers" },
|
||||
{ count: "10k", audience: "Organizations" },
|
||||
{ count: "5k", audience: "Organizations" },
|
||||
{ count: "1m", audience: "Requests" },
|
||||
],
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="bg-primaryLight rounded flex flex-col mx-4 p-4">
|
||||
<div class="bg-primaryLight rounded flex flex-col mx-6 p-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="font-semibold my-4 text-center tracking-widest">
|
||||
EMPOWERING DEVELOPERS FROM
|
||||
|
||||
@@ -144,20 +144,22 @@
|
||||
class="overflow-auto hide-scrollbar"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<label for="websocket-message" class="font-semibold text-xs">
|
||||
{{ $t("message") }}
|
||||
</label>
|
||||
<input
|
||||
id="websocket-message"
|
||||
v-model="communication.input"
|
||||
name="message"
|
||||
type="text"
|
||||
:readonly="!connectionState"
|
||||
class="input md:rounded-bl-lg"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
@keyup.up="connectionState ? walkHistory('up') : null"
|
||||
@keyup.down="connectionState ? walkHistory('down') : null"
|
||||
/>
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<label for="websocket-message" class="font-semibold text-xs pb-4">
|
||||
{{ $t("message") }}
|
||||
</label>
|
||||
<input
|
||||
id="websocket-message"
|
||||
v-model="communication.input"
|
||||
name="message"
|
||||
type="text"
|
||||
:readonly="!connectionState"
|
||||
class="input"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
@keyup.up="connectionState ? walkHistory('up') : null"
|
||||
@keyup.down="connectionState ? walkHistory('down') : null"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
|
||||
@@ -10,23 +10,38 @@
|
||||
:animate-fill="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
<SmartLink
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('choose_language')"
|
||||
:label="`${
|
||||
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
||||
} ${$i18n.locales.find(({ code }) => code == $i18n.locale).name}`"
|
||||
/>
|
||||
class="font-medium focus:outline-none"
|
||||
>
|
||||
{{ `${$i18n.locales.find(({ code }) => code == $i18n.locale).name}` }}
|
||||
</SmartLink>
|
||||
</template>
|
||||
<SmartItem
|
||||
<nuxt-link
|
||||
v-for="(locale, index) in $i18n.locales.filter(
|
||||
({ code }) => code !== $i18n.locale
|
||||
)"
|
||||
:key="`locale-${index}`"
|
||||
:to="switchLocalePath(locale.code).toString()"
|
||||
:label="`${locale.country} ${locale.name}`"
|
||||
@click.native="$refs.language.tippy().hide()"
|
||||
/>
|
||||
:to="switchLocalePath(locale.code)"
|
||||
@click="$refs.language.tippy().hide()"
|
||||
>
|
||||
<SmartItem
|
||||
:label="`${getFlagEmoji(locale.country)} \xA0 ${locale.name}`"
|
||||
/>
|
||||
</nuxt-link>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getFlagEmoji(c) {
|
||||
return String.fromCodePoint(
|
||||
...[...c.toUpperCase()].map((x) => 0x1f1a5 + x.charCodeAt())
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -12593,6 +12593,7 @@
|
||||
"resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.21.tgz",
|
||||
"integrity": "sha512-kUmM8Y+PZpMpQ+B4AuOW9k2Pfx/mSupJtxOsLzmnHY2WqZUYRFccFn2RhzPAqt3Xb+sorK/badW2D4zNzqZz5w==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"bindings": "^1.5.0",
|
||||
"node-addon-api": "^1.7.1"
|
||||
@@ -29911,6 +29912,7 @@
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
|
||||
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col space-y-16">
|
||||
<LandingHero />
|
||||
<LandingStats />
|
||||
<LandingUsers />
|
||||
<LandingFeatures />
|
||||
<LandingCTA />
|
||||
|
||||
Reference in New Issue
Block a user