landing-site/src/components/SecondaryFeatures.jsx
2022-11-10 03:34:45 +00:00

125 lines
3.8 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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>
)
}