forked from AkkomaGang/landing-site
125 lines
3.8 KiB
JavaScript
125 lines
3.8 KiB
JavaScript
import { useId } from 'react'
|
||
import Image from 'next/image'
|
||
import {
|
||
PencilSquareIcon,
|
||
PhotoIcon,
|
||
UserGroupIcon,
|
||
FaceSmileIcon,
|
||
SparklesIcon,
|
||
RocketLaunchIcon,
|
||
ChatBubbleLeftEllipsisIcon, TableCellsIcon, QuestionMarkCircleIcon
|
||
} from '@heroicons/react/20/solid'
|
||
import editing from '@/images/examples/editing.png'
|
||
import composingMedia from '@/images/examples/composing-media.png'
|
||
import reactions from '@/images/examples/reactions.png'
|
||
import mfm from '@/images/examples/mfm.png'
|
||
import replies from '@/images/examples/replies.png'
|
||
import quote from '@/images/examples/quote.png'
|
||
import masto from '@/images/examples/masto.png'
|
||
import polls from '@/images/examples/polls.png'
|
||
import speed from '@/images/examples/speed.png'
|
||
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,
|
||
image: composingMedia
|
||
},
|
||
{
|
||
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,
|
||
image: replies
|
||
},
|
||
{
|
||
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,
|
||
image: reactions
|
||
},
|
||
{
|
||
name: 'Post Misskey Markdown',
|
||
description:
|
||
'Create fancy animations with rich markup!',
|
||
icon: SparklesIcon,
|
||
image: mfm
|
||
},
|
||
{
|
||
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,
|
||
image: editing
|
||
},
|
||
{
|
||
name: 'Quote your friends',
|
||
description: 'Want to comment on a post, but not in the same thread? Quote it!',
|
||
icon: ChatBubbleLeftEllipsisIcon,
|
||
image: quote
|
||
},
|
||
{
|
||
name: 'Create polls',
|
||
description: 'Want to know what your friends think? Create a poll!',
|
||
icon: QuestionMarkCircleIcon,
|
||
image: polls
|
||
},
|
||
{
|
||
name: 'Use the Mastodon Frontend',
|
||
description: 'Got used to the multi-column layout? Use the Mastodon frontend! It just works (tm)',
|
||
icon: TableCellsIcon,
|
||
image: masto
|
||
},
|
||
{
|
||
name: 'Enjoy a substantial speed upgrade',
|
||
description:
|
||
'Akkoma is consistently 30-50% faster than Pleroma when handling common operations!',
|
||
icon: RocketLaunchIcon,
|
||
image: speed
|
||
},
|
||
]
|
||
|
||
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>
|
||
{ feature.image && (
|
||
<a href={feature.image.src} target={"_blank noreferrer"}>
|
||
<Image className={"rounded-xl pt-2 pb-0 mb-0"} src={feature.image} />
|
||
</a>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</Container>
|
||
</section>
|
||
)
|
||
}
|