mirror of
https://github.com/feathersjs/feathers.git
synced 2025-12-08 19:46:22 +00:00
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 <a href="/api/databases/adapters.html">many supported out of the box</a> 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 href="/ecosystem/">a large ecosystem of plugins</a> 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>
|