add example photos

src/components/Faqs.jsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-
+import Image from 'next/image'
 import { Container } from '@/components/Container'
 
 const faqs = [
@@ -9,11 +9,36 @@ const faqs = [
       answer:
         'An instance is one server running some fediverse software. It forms a network with all other instances, to create a social network'
     },
+    {
+        question: 'What is the fediverse?',
+        answer:
+            'The fediverse is a network of independent servers running different social media software, all communicating through the ActivityPub protocol. It is a decentralized network, where each server is independent and can be run by anyone.'
+    },
+    {
+        question: 'Why do I have to choose an instance?',
+        answer:
+         'For the same reason you need to choose an email provider (like gmail). You need a way to send activitypub data, and an instance lets you do that.'
+    }
+  ],
+  [
     {
       question: 'Why did you fork from Pleroma?',
       answer:
         'Long story. Boils down to not having faith that pleroma dev will ever recover. A longer-form explanation is available at https://coffee-and-dreams.uk/development/2022/06/24/akkoma.html',
     },
+    {
+      question: 'Why did you remove chats?',
+        answer:
+         'Chats were incredibly poorly implemented in pleroma, and added far more complexity to the codebase than they were worth. It is my view that real-time chats do not fall into the scope of an activitypub implementation, and should be handled by a separate service. I have no plans to add them back in.'
+    },
+    {
+        question: 'Is it possible to migrate to Akkoma from Pleroma?',
+        answer: 'Yes, entirely! Check the documentation for more info.'
+    },
+    {
+        question: 'Is it possible to migrate from Akkoma back to Pleroma?',
+        answer: 'Yes, although it\'s not as easy. You\'d have to roll back migrations, but all akkoma changes are 100% reversible and non-destructive.'
+    }
   ]
 ]
 

src/components/PrimaryFeatures.jsx

@@ -215,7 +215,10 @@ export function PrimaryFeatures() {
             authority. You can follow and talk with anyone else that has an account on any other fediverse
             service, and you can even host your own server if you want.
           </p>
-          <br />
+          <p className="mt-2 text-lg text-gray-400">
+            It implements the <a className={"text-blue-400"} href={"https://www.w3.org/TR/activitypub/"}>ActivityPub protocol</a>, a standard format for sharing data between servers.
+            This allows us to send text and media to any other service implementing ActivityPub.
+          </p>
           <p className="mt-2 text-lg text-gray-400">
             For those more familiar with the fediverse, Akkoma is a specialised fork of Pleroma.
             It is faster-paced in development and aligns itself more closely with Misskey than Pleroma mainline.
@@ -224,6 +227,9 @@ export function PrimaryFeatures() {
             It differentiates itself with a focus on custom expression, for example with custom emoji reactions,
             or Misskey-Flavoured Markdown.
           </p>
+          <p className="mt-2 text-lg text-gray-400">
+              In short: Akkoma is part of a distributed social network. Sorta like the child of twitter and email.
+          </p>
         </div>
         <div className={"items-center"}>
           <Image src={exampleApp} className={"justify-center align-center rounded-lg pt-10"}/>

src/components/SecondaryFeatures.jsx

@@ -1,6 +1,11 @@
 import { useId } from 'react'
+import Image from 'next/image'
 import { PencilSquareIcon, PhotoIcon, UserGroupIcon, FaceSmileIcon, SparklesIcon, RocketLaunchIcon } 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 { Container } from '@/components/Container'
 
 const features = [
@@ -9,30 +14,35 @@ const features = [
     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: 'Enjoy a substantial speed upgrade',
@@ -69,6 +79,11 @@ export function SecondaryFeatures() {
                 {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>