feat: make features page work
1
.gitattributes
vendored
@ -1 +1,2 @@
|
||||
*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
*.png filter=lfs diff=lfs merge=lfs -text
|
||||
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 131 B |
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 130 B |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 130 B |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 130 B |
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 131 B |
Before Width: | Height: | Size: 853 KiB After Width: | Height: | Size: 131 B |
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 131 B |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 132 B |
Before Width: | Height: | Size: 855 KiB After Width: | Height: | Size: 131 B |
BIN
src/assets/images/vikunja/features/gantt.png
(Stored with Git LFS)
Normal file
BIN
src/assets/images/vikunja/features/kanban.png
(Stored with Git LFS)
Normal file
BIN
src/assets/images/vikunja/features/list.png
(Stored with Git LFS)
Normal file
BIN
src/assets/images/vikunja/features/table.png
(Stored with Git LFS)
Normal file
BIN
src/assets/images/vikunja/features/task.png
(Stored with Git LFS)
Normal file
@ -5,7 +5,7 @@ interface Props {
|
||||
|
||||
const {heading} = Astro.props
|
||||
---
|
||||
<div class="mt-32">
|
||||
<div class="mt-32 mb-20">
|
||||
<h2 class="font-display text-3xl flex items-center justify-center">
|
||||
<slot name="header-icon"/>
|
||||
{heading}
|
35
src/components/features/FeatureImageSide.astro
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
import {Picture} from 'astro:assets'
|
||||
|
||||
interface Props {
|
||||
image: any,
|
||||
orientation?: 'right' | 'left'
|
||||
}
|
||||
|
||||
const {image, orientation: origOrientation} = Astro.props
|
||||
|
||||
const orientation = origOrientation ?? 'right'
|
||||
---
|
||||
<div class="md:flex items-center text-left mb-8 md:mb-32 my-8 gap-8">
|
||||
{orientation === 'left' ?
|
||||
<div class="w-full md:w-1/2 mt-4 md:mt-0">
|
||||
<Picture
|
||||
src={image}
|
||||
formats={['avif', 'webp']}
|
||||
class="object-contain object-top w-full"
|
||||
alt=""
|
||||
/>
|
||||
</div> : ''}
|
||||
<div class="w-full md:w-1/2">
|
||||
<slot/>
|
||||
</div>
|
||||
{orientation === 'right' ?
|
||||
<div class="w-full md:w-1/2 mt-4 md:mt-0">
|
||||
<Picture
|
||||
src={image}
|
||||
formats={['avif', 'webp']}
|
||||
class="object-contain object-top w-full"
|
||||
alt=""
|
||||
/>
|
||||
</div> : ''}
|
||||
</div>
|
41
src/components/features/FeatureSmall.astro
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
type Icon = 'label' | 'filter' | 'priority' | 'delegation' | 'attachment' | 'relation' | 'date' | 'share' | 'caldav'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
icon: Icon
|
||||
}
|
||||
|
||||
const {title, icon} = Astro.props
|
||||
|
||||
function getIcon(icon: Icon) : string {
|
||||
switch (icon) {
|
||||
case 'label':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>'
|
||||
case 'filter':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>'
|
||||
case 'priority':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
|
||||
case 'delegation':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>'
|
||||
case 'attachment':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
|
||||
case 'relation':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>'
|
||||
case 'date':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
|
||||
case 'share':
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg>'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
---
|
||||
<div class="mt-8">
|
||||
<h3 class="font-display text-2xl flex items-center">
|
||||
<Fragment set:html={getIcon(icon)}/>
|
||||
{title}
|
||||
</h3>
|
||||
<p class="pt-4">
|
||||
<slot/>
|
||||
</p>
|
||||
</div>
|
28
src/components/partials/CloudOrSelfHosted.astro
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
import Button from '../Button.astro'
|
||||
---
|
||||
<div class="flex items-center justify-center gap-8 mb-28">
|
||||
<div class="w-1/3">
|
||||
<p>
|
||||
Use the open-source version on your own server
|
||||
</p>
|
||||
|
||||
<Button href="/docs/installing" class="!mt-4">
|
||||
Get Started
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-300 text-gray-500 rounded-full p-2 text-sm">
|
||||
OR
|
||||
</div>
|
||||
|
||||
<div class="w-1/3">
|
||||
<p>
|
||||
Don't have a server or don't want to deal with it?
|
||||
</p>
|
||||
|
||||
<Button href="https://vikunja.cloud" class="!mt-4">
|
||||
Meet Vikunja Cloud
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
@ -1,10 +1,22 @@
|
||||
---
|
||||
import {Picture} from 'astro:assets'
|
||||
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
import FeatureCenter from '../components/features/FeatureCenter.astro'
|
||||
import FeatureImageSide from '../components/features/FeatureImageSide.astro'
|
||||
|
||||
import VikunjaTaskOverview from '../assets/images/vikunja/01-task-overview.png'
|
||||
import VikunjaFeatureTask from '../assets/images/vikunja/features/task.png'
|
||||
import VikunjaFeatureList from '../assets/images/vikunja/features/list.png'
|
||||
import VikunjaFeatureGantt from '../assets/images/vikunja/features/gantt.png'
|
||||
import VikunjaFeatureKanban from '../assets/images/vikunja/features/kanban.png'
|
||||
import VikunjaFeatureTable from '../assets/images/vikunja/features/table.png'
|
||||
import FeatureSmall from '../components/features/FeatureSmall.astro'
|
||||
import CloudOrSelfHosted from '../components/partials/CloudOrSelfHosted.astro'
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<main class="max-w-screen-xl mx-auto px-4 md:px-0">
|
||||
<Layout title="Features">
|
||||
<main class="max-w-screen-xl mx-auto px-4 md:px-0 text-center">
|
||||
<div class="pt-32 pb-8">
|
||||
<h1 class="text-3xl font-display">
|
||||
Think of Vikunja like the notebook you have with all your things to keep track of.
|
||||
@ -60,7 +72,7 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FeatureCenter class="mb-16" heading="Open Source">
|
||||
<FeatureCenter heading="Open Source">
|
||||
Vikunja is openly licensed under the
|
||||
<a href="http://code.vikunja.io/api/src/branch/main/LICENSE" class="underline" target="_blank"
|
||||
rel="noopener">AGPLv3</a>.
|
||||
@ -72,19 +84,16 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
And if you are a developer and know your way around Go or Vue.js, any help is appreciated.
|
||||
</FeatureCenter>
|
||||
|
||||
<FeatureCenter class="mb-16" heading="We will never look at your tasks.">
|
||||
We will never sell your grocery list or metadata.
|
||||
Because privacy matters.<br/>
|
||||
Don't take our word for it,
|
||||
<a href="https://code.vikunja.io" class="underline" target="_blank" rel="noopener">check it</a>!
|
||||
Vikunja is openly licensed under the AGPLv3.
|
||||
</FeatureCenter>
|
||||
|
||||
<div class="shadow-lg rounded mt-8">
|
||||
<x-image image="vikunja/01-task-overview"/>
|
||||
<div class="shadow-lg rounded mb-16">
|
||||
<Picture
|
||||
src={VikunjaTaskOverview}
|
||||
formats={['avif', 'webp']}
|
||||
class="object-contain object-top w-full"
|
||||
alt="Vikunja Task Overview"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FeatureCenter class="mb-32" heading="Built for speed.">
|
||||
<FeatureCenter heading="Built for speed.">
|
||||
<svg slot="header-icon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
@ -95,7 +104,7 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
ecause a productive tool should not get in your way.
|
||||
</FeatureCenter>
|
||||
|
||||
<x-feature-image-side orientation="left" image="vikunja/features/task">
|
||||
<FeatureImageSide orientation="left" image={VikunjaFeatureTask}>
|
||||
<h2 class="font-display text-2xl mt-4 md:mt-0 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -116,9 +125,9 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
Vikunja also lets you split a task in multiple subtasks for easy progress tracking and more
|
||||
satisfaction when crossing them off the list!
|
||||
</p>
|
||||
</x-feature-image-side>
|
||||
</FeatureImageSide>
|
||||
|
||||
<FeatureCenter class="mb-32" heading="Quick Add Magic">
|
||||
<FeatureCenter heading="Quick Add Magic">
|
||||
<svg slot="header-icon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
@ -139,7 +148,7 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
Vikunja allows you to view tasks in four different views - use whatever works best for you.
|
||||
</p>
|
||||
|
||||
<x-feature-image-side image="vikunja/features/list">
|
||||
<FeatureImageSide image={VikunjaFeatureList}>
|
||||
<h2 class="font-display text-2xl flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@ -154,9 +163,9 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
has
|
||||
to offer.
|
||||
</p>
|
||||
</x-feature-image-side>
|
||||
</FeatureImageSide>
|
||||
|
||||
<x-feature-image-side image="vikunja/features/gantt" orientation="left">
|
||||
<FeatureImageSide orientation="left" image={VikunjaFeatureGantt}>
|
||||
<h2 class="font-display text-2xl flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -169,9 +178,9 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
The Gantt Chart is perfect to get a timely overview of all tasks currently in-progress in a project.
|
||||
It allows for easy planning of deadlines and due dates.
|
||||
</p>
|
||||
</x-feature-image-side>
|
||||
</FeatureImageSide>
|
||||
|
||||
<x-feature-image-side image="vikunja/features/kanban">
|
||||
<FeatureImageSide image={VikunjaFeatureKanban}>
|
||||
<h2 class="font-display text-2xl flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -190,9 +199,9 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
All tasks can be added through the usual ways and will then show up in the kanban board where
|
||||
they can be easily rearranged and reordered.
|
||||
</p>
|
||||
</x-feature-image-side>
|
||||
</FeatureImageSide>
|
||||
|
||||
<x-feature-image-side image="vikunja/features/table" orientation="left">
|
||||
<FeatureImageSide orientation="left" image={VikunjaFeatureTable}>
|
||||
<h2 class="font-display text-2xl flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@ -206,9 +215,9 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
With the table view, you can see all task details of all your tasks.
|
||||
And you can even change what task attributes should be visible!
|
||||
</p>
|
||||
</x-feature-image-side>
|
||||
</FeatureImageSide>
|
||||
|
||||
<FeatureCenter class="Import your tasks from Todoist, Trello or Microsoft To-Do">
|
||||
<FeatureCenter heading="Import your tasks from Todoist, Trello or Microsoft To-Do">
|
||||
Because work does not happen in one tool only.
|
||||
</FeatureCenter>
|
||||
|
||||
@ -217,65 +226,61 @@ import FeatureCenter from '../components/partials/FeatureCenter.astro'
|
||||
<h2 class="font-display text-2xl mt-8">Other Features</h2>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4 md:mr-8">
|
||||
<x-feature-small title="Labels" icon="label">
|
||||
<FeatureSmall title="Labels" icon="label">
|
||||
Effortlessly mark tasks with a colorful label to find and group relevant tasks
|
||||
with a click!
|
||||
</x-feature-small>
|
||||
<x-feature-small title="Saved Filters" icon="filter">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="Saved Filters" icon="filter">
|
||||
Create a filter with only the tasks you care about. Save it once, use it always.
|
||||
</x-feature-small>
|
||||
<x-feature-small title="Priorities" icon="priority">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="Priorities" icon="priority">
|
||||
Know that feeling when you have a dozen things to do but can't decide on what
|
||||
to work next? Vikunja lets you quickly prioritize your tasks, so you'll always
|
||||
know on what to work next.
|
||||
</x-feature-small>
|
||||
<x-feature-small title="Delegation" icon="delegation">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="Delegation" icon="delegation">
|
||||
Assign tasks to other users or yourself so everyone always knows who is responsible for
|
||||
which task.
|
||||
</x-feature-small>
|
||||
<x-feature-small title="Attachments" icon="attachment">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="Attachments" icon="attachment">
|
||||
Attach files to tasks, so you can always have all related files for a task in one place!
|
||||
</x-feature-small>
|
||||
</FeatureSmall>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<x-feature-small title="Relations" icon="relation">
|
||||
<FeatureSmall title="Relations" icon="relation">
|
||||
Relate different tasks together - even if they're not in the same project! A relation can be
|
||||
multiple things, for example a subtask or blocking task.
|
||||
</x-feature-small>
|
||||
<x-feature-small title="Due dates" icon="date">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="Due dates" icon="date">
|
||||
Remember these tasks with a deadline coming up? Set a due date for a task and see all tasks
|
||||
with upcoming deadlines at once!
|
||||
</x-feature-small>
|
||||
<x-feature-small title="Share links" icon="share">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="Share links" icon="share">
|
||||
You can share a project with a link so that others can directly see or edit all tasks in a project
|
||||
but don't need to create an account. Share links have all the same rights management as
|
||||
sharing with users or teams.
|
||||
</x-feature-small>
|
||||
<x-feature-small title="CalDAV" icon="caldav">
|
||||
</FeatureSmall>
|
||||
<FeatureSmall title="CalDAV" icon="caldav">
|
||||
Vikunja comes with a calDAV-integration which lets you use the tools you already use and
|
||||
love.
|
||||
</x-feature-small>
|
||||
</FeatureSmall>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roadmap -->
|
||||
<FeatureCenter heading="We will never look at your tasks.">
|
||||
We will never sell your grocery list or metadata.
|
||||
Because privacy matters.<br/>
|
||||
Don't take our word for it,
|
||||
<a href="https://code.vikunja.io" class="underline" target="_blank" rel="noopener">check it</a>!
|
||||
Vikunja is openly licensed under the AGPLv3.
|
||||
</FeatureCenter>
|
||||
|
||||
<!-- TODO Roadmap -->
|
||||
|
||||
|
||||
<div class="py-20 flex items-center justify-center flex-col">
|
||||
@if(request()->input('from') === 'io')
|
||||
<h2 class="font-display text-2xl mb-4">Get Started</h2>
|
||||
<x-button href="https://vikunja.io/docs/installing/">Check out the docs</x-button>
|
||||
@else
|
||||
<h2 class="font-display text-2xl mb-4">Questions?</h2>
|
||||
<x-button href="mailto:{{ config('mail.contact_address') }}">Ask us!</x-button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="py-12">
|
||||
<div
|
||||
class="bg-hero-llamas bg-cover bg-no-repeat bg-center py-44 flex items-center justify-center flex-col shadow rounded">
|
||||
<h2 class="font-display text-3xl mb-4">Excited?</h2>
|
||||
<x-login-or-waitlist/>
|
||||
</div>
|
||||
<h2 class="font-display text-3xl mb-8">Get Started</h2>
|
||||
<CloudOrSelfHosted/>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
@ -18,6 +18,7 @@ import HeroLlama1 from '../assets/images/hero-llamas-small.jpg'
|
||||
import HeroLlama2 from '../assets/images/hero-llamas-2-small.jpg'
|
||||
import HeroLlama3 from '../assets/images/hero-llamas-3-small.jpg'
|
||||
import Button from '../components/Button.astro'
|
||||
import CloudOrSelfHosted from '../components/partials/CloudOrSelfHosted.astro'
|
||||
|
||||
const carouselImages = [
|
||||
{src: VikunjaTaskOverview, alt: ''},
|
||||
@ -50,31 +51,7 @@ const carouselImages = [
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center gap-8 mb-28">
|
||||
<div class="w-1/3">
|
||||
<p>
|
||||
Use the open-source version on your own server
|
||||
</p>
|
||||
|
||||
<Button href="/docs/installing" class="!mt-4">
|
||||
Get Started
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-300 text-gray-500 rounded-full p-2 text-sm">
|
||||
OR
|
||||
</div>
|
||||
|
||||
<div class="w-1/3">
|
||||
<p>
|
||||
Don't have a server or don't want to deal with it?
|
||||
</p>
|
||||
|
||||
<Button href="https://vikunja.cloud" class="!mt-4">
|
||||
Meet Vikunja Cloud
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CloudOrSelfHosted/>
|
||||
|
||||
<div class="w-full max-w-6xl">
|
||||
<div class="slider aspect-w-16 aspect-h-9 relative mt-8">
|
||||
|