mirror of
https://github.com/feathersjs/feathers.git
synced 2025-12-08 19:46:22 +00:00
ae85fa216f
* feat(docs) new docs site started * Minor page edits * feat(footer) fix spacing * empty guides template Co-authored-by: daffl <daff@neyeon.com>
58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import HomeFeatureCard from './HomeFeatureGridCard.vue'
|
|
|
|
const cards = [
|
|
{
|
|
title: 'Fast',
|
|
imgSrc: '/img/feature-icons/Fast_Icon.svg',
|
|
description:
|
|
'Leveraging a unique architecture, Feathers lets you focus on building your APIs and real-time applications quickly. You automatically get scalable HTTP and real-time APIs and stay prepared for whatever else the future might bring.',
|
|
},
|
|
{
|
|
title: 'Universal',
|
|
imgSrc: '/img/feature-icons/Universal_Icon.svg',
|
|
description:
|
|
'Feathers can be used with NodeJS, in the browser, with React Native or with any other API client. You can use any database with many supported out of the box and connect your API seamlessly to any frontend framework.',
|
|
},
|
|
{
|
|
title: 'Flexible',
|
|
imgSrc: '/img/feature-icons/Flexible_Icon.svg',
|
|
description:
|
|
'Built for TypeScript, Feathers provides the structure to create complex applications but is flexible enough to not be in the way. With a large ecosystem of plugins you can include exactly what you need. No more, no less.',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-secondary text-center pt-18 overflow-hidden">
|
|
<h2 class="text-xl lg:text-2xl font-bold">See what makes Feathers special</h2>
|
|
|
|
<div class="feature-grid flex md:flex-row flex-wrap justify-center relative mt-12">
|
|
<HomeFeatureCard
|
|
v-for="card in cards"
|
|
class="w-72 m-6"
|
|
:key="card.title"
|
|
:title="card.title"
|
|
:img-src="card.imgSrc"
|
|
:description="card.description"
|
|
/>
|
|
</div>
|
|
|
|
<div class="bg-base-100 h-64 relative -mt-64"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
/* Adds the white arc behind the cards */
|
|
.feature-grid::before {
|
|
background-color: var(--vp-c-bg);
|
|
border-radius: 50%;
|
|
bottom: 0;
|
|
content: '';
|
|
height: 300px;
|
|
position: absolute;
|
|
width: 150%;
|
|
z-index: 2;
|
|
}
|
|
</style>
|