vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add fadein anim

pull/4572/head
Cagatay Civici 2023-10-14 02:05:14 +03:00
parent dcc4681364
commit c9e9fb78b7
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pages/landing/FeaturesSection.vue
View File

@ -6,56 +6,56 @@
<div class="features-container">
<div class="grid">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">80+ UI Components</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Styled or Unstyled</div>
<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>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Community</div>
<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>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Enterprise Support</div>
<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>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Blocks</div>
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<div v-animate="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>

12
pages/landing/HeroSection.vue
View File

@ -20,7 +20,7 @@
<div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
<div class="flex">
<div class="flex flex-column w-6 gap-5 pt-8 pr-3">
<div class="box p-4">
<div class="box p-4 fadein animation-duration-500">
<span class="text-secondary font-medium block mb-3">Balance</span>
<div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
@ -40,10 +40,10 @@
<span class="text-secondary font-medium block mt-5 mb-3">Order Date</span>
<Calendar v-model="dateValue" :showWeek="true" class="w-full" />
</div>
<div class="box p-4">
<div class="box p-4 fadein animation-duration-500">
<Chart type="line" :data="chartData" :options="chartOptions" />
</div>
<div class="box p-4">
<div class="box p-4 fadein animation-duration-500">
<div class="flex align-items-center">
<Chip label="Vue" class="mr-2 font-medium" />
<Chip label="Typescript" class="mr-2 font-medium" />
@ -58,7 +58,7 @@
</div>
</div>
<div class="flex flex-column w-6 gap-5 pl-3">
<div class="box p-4">
<div class="box p-4 fadein animation-duration-500">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan.png" alt="Watch" class="w-14rem" />
</div>
@ -71,7 +71,7 @@
</div>
<Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
</div>
<div class="box p-4 w-full">
<div class="box p-4 fadein animation-duration-500">
<ul class="list-none p-0 m-0">
<li class="flex mb-3">
<span class="mr-3">
@ -103,7 +103,7 @@
</li>
</ul>
</div>
<div class="box p-4">
<div class="box p-4 fadein animation-duration-500">
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
</div>
</div>