forked from AkkomaGang/landing-site
79 lines
2.4 KiB
JavaScript
79 lines
2.4 KiB
JavaScript
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>
|
||
)
|
||
}
|