forked from AkkomaGang/landing-site
79 lines
2.4 KiB
React
79 lines
2.4 KiB
React
|
import { useId } from 'react'
|
|||
|
|
import { PencilSquareIcon, PhotoIcon, UserGroupIcon, FaceSmileIcon, SparklesIcon, RocketLaunchIcon } from '@heroicons/react/20/solid'
|
|||
|
|
|
|||
|
|
import { Container } from '@/components/Container'
|
|||
|
|
|
|||
|
|
const features = [
|
|||
|
|
{
|
|||
|
|
name: 'Post statuses, with photos',
|
|||
|
|
description:
|
|||
|
|
'With unlimited attachments per post, you can share photos, videos, and more.',
|
|||
|
|
icon: PhotoIcon,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Follow people anywhere on the fediverse',
|
|||
|
|
description:
|
|||
|
|
'Keep up with your friends and collect them into lists to customise what posts you see!',
|
|||
|
|
icon: UserGroupIcon,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'React to your friends’ posts',
|
|||
|
|
description:
|
|||
|
|
'Have something to say, but not something you can put into words? React to posts with emojis!',
|
|||
|
|
icon: FaceSmileIcon,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Post Misskey Markdown',
|
|||
|
|
description:
|
|||
|
|
'Create fancy animations with rich markup!',
|
|||
|
|
icon: SparklesIcon,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Edit your posts, as many times as you want',
|
|||
|
|
description:
|
|||
|
|
'There\'s no limit to how many times you can edit your posts, so you can make sure they\'re perfect!',
|
|||
|
|
icon: PencilSquareIcon,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Enjoy a substantial speed upgrade',
|
|||
|
|
description:
|
|||
|
|
'Akkoma is consistently 30-50% faster than Pleroma when handling common operations!',
|
|||
|
|
icon: RocketLaunchIcon,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export function SecondaryFeatures() {
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
id="secondary-features"
|
|||
|
|
aria-label="Features for building a portfolio"
|
|||
|
|
className="py-20 sm:py-32"
|
|||
|
|
>
|
|||
|
|
<Container>
|
|||
|
|
<div className="mx-auto max-w-2xl sm:text-center">
|
|||
|
|
<h2 className="text-3xl font-medium tracking-tight text-gray-900">
|
|||
|
|
What can I do with Akkoma?
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
<ul
|
|||
|
|
role="list"
|
|||
|
|
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
|
|||
|
|
>
|
|||
|
|
{features.map((feature) => (
|
|||
|
|
<li
|
|||
|
|
key={feature.name}
|
|||
|
|
className="rounded-2xl border border-gray-200 p-8"
|
|||
|
|
>
|
|||
|
|
<feature.icon className="h-8 w-8" />
|
|||
|
|
<h3 className="mt-6 font-semibold text-gray-900">
|
|||
|
|
{feature.name}
|
|||
|
|
</h3>
|
|||
|
|
<p className="mt-2 text-gray-700">{feature.description}</p>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</Container>
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|