landing-site/src/components/SecondaryFeatures.jsx

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