Files
hoppscotch/packages/hoppscotch-app/components/landing/Hero.vue
2021-09-10 00:28:28 +05:30

73 lines
1.7 KiB
Vue

<template>
<div class="flex flex-col p-6 relative">
<div class="flex flex-col mt-16 items-center justify-center">
<h2
class="
font-bold
text-accent text-center
leading-none
tracking-tighter
text-4xl
md:text-6xl
lg:text-8xl
"
>
Open Source
</h2>
<h3
class="
font-extrabold
my-4
text-center text-secondaryDark
leading-none
tracking-tighter
text-3xl
md:text-4xl
lg:text-5xl
"
>
API Development Ecosystem
</h3>
<p class="my-4 text-lg text-center max-w-2xl">
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 space-x-4 my-8 justify-center items-center">
<ButtonPrimary
label="Get Started"
svg="arrow-right"
reverse
large
@click.native="showLogin = true"
/>
<ButtonSecondary
to="https://github.com/hoppscotch/hoppscotch"
blank
filled
outline
label="GitHub"
svg="github"
large
:shortcut="['30k Stars']"
/>
</div>
<LandingStats />
<LandingScreenshot />
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
export default defineComponent({
data() {
return {
showLogin: false,
}
},
})
</script>