primevue-mirror/components/landing/FeaturesSection.vue

69 lines
6.2 KiB
Vue
Raw Normal View History

2022-09-06 13:53:29 +00:00
<template>
2024-05-18 08:15:45 +00:00
<section class="landing-features pt-20 pb-20">
2022-09-06 13:53:29 +00:00
<div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
2024-05-18 08:15:45 +00:00
<div class="mt-16 pl-8 pr-8 lg:pl-20 lg:pr-20">
<div class="features-container">
2024-05-18 08:15:45 +00:00
<div class="flex flex-wrap -mr-2 -ml-2 -mt-2">
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">80+ UI Components</div>
2023-10-10 15:20:54 +00:00
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
2023-04-07 09:51:28 +00:00
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Styled or Unstyled</div>
2023-10-11 17:47:54 +00:00
<p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
2023-04-07 09:51:28 +00:00
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Community</div>
2023-10-10 15:20:54 +00:00
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
2023-04-07 09:51:28 +00:00
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Accessibility</div>
2023-04-07 09:51:28 +00:00
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Enterprise Support</div>
2023-04-07 09:51:28 +00:00
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Mobile</div>
2023-04-07 09:51:28 +00:00
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Blocks</div>
2023-10-10 15:20:54 +00:00
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
2023-04-07 09:51:28 +00:00
</div>
2023-03-07 14:29:07 +00:00
</div>
2024-05-18 08:15:45 +00:00
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Typescript</div>
2023-04-07 09:51:28 +00:00
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div>
2023-03-07 14:29:07 +00:00
</div>
2022-09-06 13:53:29 +00:00
</div>
</div>
</div>
</section>
2022-09-14 14:26:41 +00:00
</template>