From de115936f1879f4db57ec0a5fc3bb38a6d4cdd24 Mon Sep 17 00:00:00 2001
From: Obrempong-1 <obrempong.kow@gmail.com>
Date: Tue, 20 Oct 2026 03:06:46 +0000
Subject: [PATCH 1/2] fixes

---
 app/admin/EntryForm.tsx           | 130 +++++-
 app/admin/MarkdownEditor.tsx      | 506 -----------------------
 app/admin/RichEditor.tsx          | 394 ++++++++++++++++++
 app/contribute/ContributeForm.tsx |   4 +-
 app/globals.css                   | 100 +++++
 lib/admin/collections.ts          | 128 ++++++
 lib/admin/markdown-blocks.ts      |  57 ---
 lib/admin/tiptap-document.ts      | 224 ++++++++++
 lib/markdownComponents.tsx        |  42 +-
 package-lock.json                 | 658 ++++++++++++++++++++++++++++++
 package.json                      |   4 +
 11 files changed, 1662 insertions(+), 585 deletions(-)
 delete mode 100644 app/admin/MarkdownEditor.tsx
 create mode 100644 app/admin/RichEditor.tsx
 delete mode 100644 lib/admin/markdown-blocks.ts
 create mode 100644 lib/admin/tiptap-document.ts

diff --git a/app/admin/EntryForm.tsx b/app/admin/EntryForm.tsx
index c83d1f7..f8cb79b 100644
--- a/app/admin/EntryForm.tsx
+++ b/app/admin/EntryForm.tsx
@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { AlertCircle, Check, Lock, RotateCcw, Save, Trash2, X } from 'lucide-react';
 import StarSpinner from '@/components/ui/StarSpinner';
-import type { CollectionSpec, FieldSpec } from '@/lib/admin/collections';
+import type { CollectionSpec, FieldSection, FieldSpec } from '@/lib/admin/collections';
 import type { EntryDetail, FieldValue, RefOption } from '@/lib/admin/entries';
 import ImagePicker from './ImagePicker';
-import MarkdownEditor from './MarkdownEditor';
+import RichEditor from './RichEditor';
 import LocationPicker from './LocationPicker';
 import { buildSlug } from '@/lib/admin/slug';
 
@@ -40,6 +40,28 @@ function blankValues(collection: CollectionSpec): Record<string, FieldValue> {
     return values;
 }
 
+function isEmpty(value: FieldValue): boolean {
+    if (value === null || value === undefined) return true;
+    if (typeof value === 'string') return value.trim() === '';
+    if (Array.isArray(value)) return value.length === 0;
+    return false;
+}
+
+function formSections(collection: CollectionSpec): FieldSection[] {
+    if (!collection.sections || collection.sections.length === 0) {
+        return [{ title: '', fields: collection.fields.map((field) => field.id) }];
+    }
+
+    const placed = new Set(collection.sections.flatMap((section) => section.fields));
+    const leftover = collection.fields
+        .filter((field) => !placed.has(field.id))
+        .map((field) => field.id);
+
+    return leftover.length > 0
+        ? [...collection.sections, { title: 'Everything else', fields: leftover }]
+        : collection.sections;
+}
+
 const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
     const [values, setValues] = useState(detail.values);
     const [urls, setUrls] = useState(detail.assetUrls);
@@ -49,6 +71,7 @@ const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
     const [saved, setSaved] = useState(false);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [deleting, setDeleting] = useState(false);
+    const [missing, setMissing] = useState<string[]>([]);
     const router = useRouter();
 
     const slugSources = collection.slugFrom ?? (collection.titleField ? [collection.titleField] : []);
@@ -67,6 +90,7 @@ const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
 
     const set = (id: string, value: FieldValue) => {
         setSaved(false);
+        setMissing((current) => (current.includes(id) ? current.filter((item) => item !== id) : current));
         setValues((current) => {
             const next = { ...current, [id]: value };
             if (!slugTouched && slugSources.includes(id)) {
@@ -110,6 +134,26 @@ const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
     };
 
     const handleSave = async () => {
+        const empties = collection.fields
+            .filter((field) => field.required && field.id !== 'slug' && isEmpty(values[field.id]))
+            .map((field) => field.id);
+
+        if (empties.length > 0) {
+            const first = collection.fields.find((field) => field.id === empties[0]);
+            setMissing(empties);
+            setSaved(false);
+            setError(
+                empties.length === 1
+                    ? `Please fill in "${first?.label}" before saving.`
+                    : `${empties.length} boxes still need filling in. The first is "${first?.label}".`
+            );
+            document
+                .getElementById(`field-${empties[0]}`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            return;
+        }
+
+        setMissing([]);
         setSaving(true);
         setError('');
 
@@ -224,18 +268,20 @@ const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
                 return (
                     <div className="rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm">
                         <p className="flex items-center gap-2 font-medium text-amber-900">
-                            <Lock className="w-4 h-4" /> This one has to be edited in Contentful
+                            <Lock className="w-4 h-4" /> This one can only be changed in Contentful
                         </p>
                         <p className="text-amber-800 mt-1">
-                            It contains {locked}, which this simple editor cannot show without
-                            breaking it. Everything else on this page still saves normally.
+                            It has something in it ({locked}) that this editor cannot show, and
+                            showing it wrongly would break it. The editor here handles headings,
+                            bold, italics, lists, quotes, links, lines and photos. Your changes to
+                            everything else on this page still save normally.
                         </p>
                     </div>
                 );
             }
 
             return (
-                <MarkdownEditor
+                <RichEditor
                     value={typeof value === 'string' ? value : ''}
                     onChange={(next) => set(field.id, next)}
                     rows={field.id === 'blogContent' ? 18 : 8}
@@ -249,7 +295,7 @@ const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
 
         if (field.kind === 'markdown') {
             return (
-                <MarkdownEditor
+                <RichEditor
                     value={typeof value === 'string' ? value : ''}
                     onChange={(next) => set(field.id, next)}
                     rows={8}
@@ -417,18 +463,68 @@ const EntryForm = ({ collection, detail, refOptions }: EntryFormProps) => {
         );
     };
 
-    return (
-        <div className="flex flex-col gap-6">
-            {collection.fields.map((field) => (
-                <div key={field.id}>
-                    <label className="block font-medium mb-1">
-                        {field.label}
-                        {field.required && <span className="text-red-500 ml-1">*</span>}
-                    </label>
-                    {field.hint && <p className="text-sm text-gray-500 mb-2">{field.hint}</p>}
+    const byId = new Map(collection.fields.map((field) => [field.id, field]));
+
+    const renderLabelled = (field: FieldSpec) => {
+        const notFilled = missing.includes(field.id);
+
+        return (
+            <div key={field.id} id={`field-${field.id}`} className="scroll-mt-24">
+                <label className="mb-1 flex flex-wrap items-baseline gap-x-2 font-medium">
+                    {field.label}
+                    {field.required ? (
+                        <span
+                            className={`text-xs font-semibold ${
+                                notFilled ? 'text-red-600' : 'text-gray-500'
+                            }`}
+                        >
+                            Needed
+                        </span>
+                    ) : (
+                        <span className="text-xs font-normal text-gray-400">Optional</span>
+                    )}
+                </label>
+                {field.hint && <p className="mb-2 text-sm text-gray-500">{field.hint}</p>}
+                <div
+                    className={
+                        notFilled ? 'rounded-xl ring-2 ring-red-400 ring-offset-2 ring-offset-white' : undefined
+                    }
+                >
                     {renderField(field)}
                 </div>
-            ))}
+                {notFilled && (
+                    <p className="mt-1.5 text-sm font-medium text-red-600">
+                        This one is needed before you can save.
+                    </p>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div className="flex flex-col gap-6">
+            {formSections(collection).map((section, index) => {
+                const fields = section.fields
+                    .map((id) => byId.get(id))
+                    .filter((field): field is FieldSpec => Boolean(field));
+                if (fields.length === 0) return null;
+
+                return (
+                    <section key={section.title || index} className="flex flex-col gap-5">
+                        {section.title && (
+                            <div className="border-b border-gray-200 pb-2">
+                                <h2 className="font-header text-base font-bold tracking-wide text-[#252638] uppercase">
+                                    {section.title}
+                                </h2>
+                                {section.intro && (
+                                    <p className="mt-1 text-sm text-gray-500">{section.intro}</p>
+                                )}
+                            </div>
+                        )}
+                        {fields.map(renderLabelled)}
+                    </section>
+                );
+            })}
 
             <div className="sticky bottom-0 -mx-4 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3 bg-gradient-to-t from-white via-white to-white/80 backdrop-blur-sm">
                 <div className="rounded-2xl border border-gray-200 bg-white shadow-lg shadow-black/5 p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-3">
diff --git a/app/admin/MarkdownEditor.tsx b/app/admin/MarkdownEditor.tsx
deleted file mode 100644
index e060e7b..0000000
--- a/app/admin/MarkdownEditor.tsx
+++ /dev/null
@@ -1,506 +0,0 @@
-'use client';
-import { useEffect, useRef, useState } from 'react';
-import NextImage from 'next/image';
-import {
-    Bold,
-    Italic,
-    Heading2,
-    Heading3,
-    List,
-    ListOrdered,
-    Quote,
-    Link2,
-    Minus,
-    Eye,
-    Pencil,
-    ImagePlus,
-    ChevronUp,
-    ChevronDown,
-    X,
-} from 'lucide-react';
-import { MAX_ORIGINAL_BYTES, resizeForHero } from '@/lib/admin/resize';
-import { ASSET_LINE, IMAGE_LINE, type Block, nextKey, parseBlocks, serializeBlocks } from '@/lib/admin/markdown-blocks';
-
-const thumbUrl = (url: string) => (url.startsWith('//') ? `https:${url}` : url);
-
-interface MarkdownEditorProps {
-    value: string;
-    onChange: (value: string) => void;
-    rows?: number;
-    assetUrls: Record<string, string>;
-    onAssetUploaded: (id: string, url: string) => void;
-    onError: (message: string) => void;
-    allowImages?: boolean;
-    uploadPath?: string;
-}
-
-type Action =
-    | { kind: 'wrap'; before: string; after: string; placeholder: string }
-    | { kind: 'line'; prefix: string; placeholder: string }
-    | { kind: 'numbered'; placeholder: string }
-    | { kind: 'link' }
-    | { kind: 'divider' };
-
-const TOOLS: { label: string; Icon: typeof Bold; action: Action }[] = [
-    { label: 'Bold', Icon: Bold, action: { kind: 'wrap', before: '**', after: '**', placeholder: 'bold text' } },
-    { label: 'Italic', Icon: Italic, action: { kind: 'wrap', before: '_', after: '_', placeholder: 'italic text' } },
-    { label: 'Big heading', Icon: Heading2, action: { kind: 'line', prefix: '## ', placeholder: 'Heading' } },
-    { label: 'Small heading', Icon: Heading3, action: { kind: 'line', prefix: '### ', placeholder: 'Heading' } },
-    { label: 'Bullet list', Icon: List, action: { kind: 'line', prefix: '- ', placeholder: 'List item' } },
-    { label: 'Numbered list', Icon: ListOrdered, action: { kind: 'numbered', placeholder: 'List item' } },
-    { label: 'Quote', Icon: Quote, action: { kind: 'line', prefix: '> ', placeholder: 'Quote' } },
-    { label: 'Link', Icon: Link2, action: { kind: 'link' } },
-    { label: 'Divider', Icon: Minus, action: { kind: 'divider' } },
-];
-
-const MarkdownEditor = ({
-    value,
-    onChange,
-    rows = 12,
-    assetUrls,
-    onAssetUploaded,
-    onError,
-    allowImages = true,
-    uploadPath = '/api/admin/upload',
-}: MarkdownEditorProps) => {
-    const [blocks, setBlocks] = useState<Block[]>(() => parseBlocks(value));
-    const [preview, setPreview] = useState(false);
-    const [uploading, setUploading] = useState(false);
-    const [activeBlock, setActiveBlock] = useState(0);
-
-    const emitted = useRef(value);
-    const areas = useRef(new Map<number, HTMLTextAreaElement>());
-
-    useEffect(() => {
-        if (value === emitted.current) return;
-        emitted.current = value;
-        setBlocks(parseBlocks(value));
-    }, [value]);
-
-    const commit = (next: Block[]) => {
-        setBlocks(next);
-        const markdown = serializeBlocks(next);
-        emitted.current = markdown;
-        onChange(markdown);
-    };
-
-    const setText = (key: number, text: string) => {
-        commit(blocks.map((block) => (block.kind === 'text' && block.key === key ? { ...block, text } : block)));
-    };
-
-    const moveBlock = (index: number, direction: -1 | 1) => {
-        const target = index + direction;
-        if (target < 0 || target >= blocks.length) return;
-        const next = [...blocks];
-        [next[index], next[target]] = [next[target], next[index]];
-        commit(next);
-    };
-
-    const removeBlock = (index: number) => {
-        const next = blocks.filter((_, i) => i !== index);
-        commit(next.length > 0 ? next : [{ key: nextKey(), kind: 'text', text: '' }]);
-    };
-
-    const apply = (action: Action) => {
-        const block = blocks[activeBlock] ?? blocks.find((candidate) => candidate.kind === 'text');
-        if (!block || block.kind !== 'text') return;
-
-        const element = areas.current.get(block.key);
-        const text = block.text;
-        const start = element ? element.selectionStart : text.length;
-        const end = element ? element.selectionEnd : text.length;
-        const selected = text.slice(start, end);
-
-        let replacement = '';
-        let cursorStart = start;
-        let cursorEnd = end;
-
-        if (action.kind === 'wrap') {
-            const inner = selected || action.placeholder;
-            replacement = `${action.before}${inner}${action.after}`;
-            cursorStart = start + action.before.length;
-            cursorEnd = cursorStart + inner.length;
-        } else if (action.kind === 'line' || action.kind === 'numbered') {
-            const lineStart = text.lastIndexOf('\n', start - 1) + 1;
-            const body = selected || action.placeholder;
-            const prefixed = body
-                .split('\n')
-                .map((line, index) =>
-                    action.kind === 'numbered' ? `${index + 1}. ${line}` : `${action.prefix}${line}`
-                )
-                .join('\n');
-            const needsBreak = lineStart === start && start > 0 && text[start - 1] !== '\n';
-            replacement = `${needsBreak ? '\n' : ''}${prefixed}`;
-            cursorStart = start + replacement.length - body.length;
-            cursorEnd = cursorStart + body.length;
-        } else if (action.kind === 'link') {
-            const inner = selected || 'link text';
-            replacement = `[${inner}](https://)`;
-            cursorStart = start + inner.length + 4;
-            cursorEnd = cursorStart + 8;
-        } else {
-            const needsBreak = start > 0 && text[start - 1] !== '\n';
-            replacement = `${needsBreak ? '\n' : ''}\n---\n`;
-            cursorStart = start + replacement.length;
-            cursorEnd = cursorStart;
-        }
-
-        setText(block.key, text.slice(0, start) + replacement + text.slice(end));
-
-        requestAnimationFrame(() => {
-            const area = areas.current.get(block.key);
-            if (!area) return;
-            area.focus();
-            area.setSelectionRange(cursorStart, cursorEnd);
-        });
-    };
-
-    const addImage = async (file: File | null | undefined) => {
-        if (!file) return;
-        onError('');
-
-        if (!file.type.startsWith('image/')) {
-            onError(`"${file.name}" is not a photo.`);
-            return;
-        }
-        if (file.size > MAX_ORIGINAL_BYTES) {
-            onError(`"${file.name}" is too big. Please pick a smaller photo.`);
-            return;
-        }
-
-        setUploading(true);
-        try {
-            const resized = await resizeForHero(file);
-            const body = new FormData();
-            body.append('file', resized);
-
-            const res = await fetch(uploadPath, { method: 'POST', body });
-            if (!res.ok) {
-                const payload = await res.json().catch(() => ({}));
-                throw new Error(payload.message ?? 'That photo could not be added.');
-            }
-
-            const asset = await res.json();
-            onAssetUploaded(asset.id, asset.url);
-
-            const imageBlock: Block = { key: nextKey(), kind: 'image', id: asset.id };
-            const active = blocks[activeBlock];
-            const next = [...blocks];
-
-            if (active && active.kind === 'text') {
-                const area = areas.current.get(active.key);
-                const caret = area ? area.selectionStart : active.text.length;
-                next.splice(
-                    activeBlock,
-                    1,
-                    { key: active.key, kind: 'text', text: active.text.slice(0, caret) },
-                    imageBlock,
-                    { key: nextKey(), kind: 'text', text: active.text.slice(caret) }
-                );
-            } else {
-                const at = Math.min(activeBlock + 1, blocks.length);
-                next.splice(at, 0, imageBlock);
-                if (!next.some((block, index) => index > at && block.kind === 'text')) {
-                    next.push({ key: nextKey(), kind: 'text', text: '' });
-                }
-            }
-            commit(next);
-        } catch (error) {
-            onError(error instanceof Error ? error.message : 'That photo could not be added.');
-        }
-        setUploading(false);
-    };
-
-    return (
-        <div className="rounded-lg border border-gray-300 bg-white overflow-hidden">
-            <div className="flex items-center gap-0.5 flex-wrap border-b border-gray-200 bg-gray-50 px-2 py-1.5">
-                {TOOLS.map(({ label, Icon, action }) => (
-                    <button
-                        key={label}
-                        type="button"
-                        title={label}
-                        aria-label={label}
-                        disabled={preview}
-                        onClick={() => apply(action)}
-                        className="p-2 rounded-md hover:bg-white hover:shadow-sm text-gray-600 hover:text-black cursor-pointer disabled:opacity-30 disabled:cursor-default"
-                    >
-                        <Icon className="w-4 h-4" />
-                    </button>
-                ))}
-
-                {allowImages && (
-                <label
-                    title="Add a photo where your cursor is"
-                    aria-label="Add a photo where your cursor is"
-                    className={`p-2 rounded-md hover:bg-white hover:shadow-sm text-gray-600 hover:text-black ${
-                        preview || uploading ? 'opacity-30' : 'cursor-pointer'
-                    }`}
-                >
-                    <ImagePlus className="w-4 h-4" />
-                    <input
-                        type="file"
-                        accept="image/*"
-                        className="hidden"
-                        disabled={preview || uploading}
-                        onChange={(event) => {
-                            addImage(event.target.files?.[0]);
-                            event.target.value = '';
-                        }}
-                    />
-                </label>
-                )}
-
-                {uploading && <span className="text-xs text-gray-500 px-2">Adding photo...</span>}
-
-                <button
-                    type="button"
-                    onClick={() => setPreview((current) => !current)}
-                    className="ml-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold text-gray-600 hover:bg-white hover:shadow-sm hover:text-black cursor-pointer"
-                >
-                    {preview ? <Pencil className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
-                    {preview ? 'Write' : 'Preview'}
-                </button>
-            </div>
-
-            {preview ? (
-                <div className="px-4 py-3 min-h-40 text-[15px] leading-relaxed">
-                    <MarkdownPreview source={value} assetUrls={assetUrls} />
-                </div>
-            ) : (
-                <div className="flex flex-col divide-y divide-gray-100">
-                    {value.includes('\\') && (
-                        <p className="px-4 py-2 text-xs text-gray-500 bg-amber-50/60">
-                            A backslash before a character (like <code>\\*</code>) just means &ldquo;show
-                            this character as-is&rdquo;. Leave them in place and they will not appear on the website.
-                        </p>
-                    )}
-                    {blocks.map((block, index) =>
-                        block.kind === 'text' ? (
-                            <textarea
-                                key={block.key}
-                                ref={(element) => {
-                                    if (element) areas.current.set(block.key, element);
-                                    else areas.current.delete(block.key);
-                                }}
-                                value={block.text}
-                                onChange={(event) => setText(block.key, event.target.value)}
-                                onFocus={() => setActiveBlock(index)}
-                                rows={Math.max(3, Math.min(rows, block.text.split('\n').length + 1))}
-                                placeholder={blocks.length === 1 ? 'Write here...' : undefined}
-                                className="w-full px-4 py-3 text-base outline-none resize-y leading-relaxed"
-                            />
-                        ) : (
-                            <div key={block.key} className="p-3 bg-gray-50/60">
-                                <div className="flex items-start gap-3">
-                                    <span className="relative block w-32 h-24 shrink-0 rounded-lg overflow-hidden bg-gray-200">
-                                        {assetUrls[block.id] || block.url ? (
-                                            <NextImage
-                                                src={`${thumbUrl(assetUrls[block.id] || block.url || '')}?w=256&h=192&fit=fill&fm=jpg&q=70`}
-                                                alt=""
-                                                fill
-                                                className="object-cover"
-                                                sizes="128px"
-                                                unoptimized
-                                            />
-                                        ) : (
-                                            <span className="absolute inset-0 grid place-items-center text-xs text-gray-500">
-                                                Photo
-                                            </span>
-                                        )}
-                                    </span>
-
-                                    <div className="min-w-0 flex-1">
-                                        <p className="text-sm font-medium">Photo in the article</p>
-                                        <p className="text-xs text-gray-500 mt-0.5">
-                                            It appears here, between the text above and below.
-                                        </p>
-                                    </div>
-
-                                    <div className="flex items-center gap-0.5 shrink-0">
-                                        <button
-                                            type="button"
-                                            aria-label="Move photo up"
-                                            onClick={() => moveBlock(index, -1)}
-                                            disabled={index === 0}
-                                            className="p-1.5 rounded-md hover:bg-white disabled:opacity-25 cursor-pointer"
-                                        >
-                                            <ChevronUp className="w-4 h-4" />
-                                        </button>
-                                        <button
-                                            type="button"
-                                            aria-label="Move photo down"
-                                            onClick={() => moveBlock(index, 1)}
-                                            disabled={index === blocks.length - 1}
-                                            className="p-1.5 rounded-md hover:bg-white disabled:opacity-25 cursor-pointer"
-                                        >
-                                            <ChevronDown className="w-4 h-4" />
-                                        </button>
-                                        <button
-                                            type="button"
-                                            aria-label="Remove photo"
-                                            onClick={() => removeBlock(index)}
-                                            className="p-1.5 rounded-md hover:bg-white cursor-pointer"
-                                        >
-                                            <X className="w-4 h-4" />
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        )
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-
-const inline = (text: string) =>
-    text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<span class="underline decoration-[#FFBE00] decoration-2">$1</span>')
-        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-        .replace(/_([^_]+)_/g, '<em>$1</em>')
-        .replace(/`([^`]+)`/g, '<code class="bg-gray-100 rounded px-1">$1</code>');
-
-const MarkdownPreview = ({
-    source,
-    assetUrls,
-}: {
-    source: string;
-    assetUrls: Record<string, string>;
-}) => {
-    if (!source.trim()) {
-        return <p className="text-gray-400">Nothing written yet.</p>;
-    }
-
-    const blocks: React.ReactNode[] = [];
-    const lines = source.replace(/\r\n/g, '\n').split('\n');
-    let index = 0;
-    let key = 0;
-
-    while (index < lines.length) {
-        const line = lines[index].trim();
-
-        if (line === '') {
-            index += 1;
-            continue;
-        }
-
-        const assetLine = line.match(ASSET_LINE);
-        const directLine = assetLine ? null : line.match(IMAGE_LINE);
-        if (assetLine || directLine) {
-            const url = assetLine ? assetUrls[assetLine[2]] : thumbUrl(directLine![2]);
-            blocks.push(
-                url ? (
-                    <span key={key++} className="block relative w-full max-w-sm aspect-4/3 my-4 rounded-lg overflow-hidden bg-gray-100">
-                        <NextImage
-                            src={`${url}?w=640&h=480&fit=fill&fm=jpg&q=70`}
-                            alt=""
-                            fill
-                            className="object-cover"
-                            sizes="384px"
-                            unoptimized
-                        />
-                    </span>
-                ) : (
-                    <span key={key++} className="block text-sm text-gray-400 my-3">Photo</span>
-                )
-            );
-            index += 1;
-            continue;
-        }
-
-        if (/^-{3,}$/.test(line)) {
-            blocks.push(<hr key={key++} className="my-4 border-gray-200" />);
-            index += 1;
-            continue;
-        }
-
-        const heading = line.match(/^(#{1,6})\s+(.*)$/);
-        if (heading) {
-            const size = heading[1].length <= 2 ? 'text-xl' : 'text-lg';
-            blocks.push(
-                <p
-                    key={key++}
-                    className={`${size} font-bold font-header text-[#252638] mt-4 mb-2`}
-                    dangerouslySetInnerHTML={{ __html: inline(heading[2]) }}
-                />
-            );
-            index += 1;
-            continue;
-        }
-
-        if (/^>\s?/.test(line)) {
-            const quoted: string[] = [];
-            while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
-                quoted.push(lines[index].trim().replace(/^>\s?/, ''));
-                index += 1;
-            }
-            blocks.push(
-                <blockquote
-                    key={key++}
-                    className="border-l-4 border-[#FFBE00] pl-3 italic text-gray-600 my-3"
-                    dangerouslySetInnerHTML={{ __html: inline(quoted.join(' ')) }}
-                />
-            );
-            continue;
-        }
-
-        const bullet = /^[-*+]\s+(.*)$/;
-        const numbered = /^\d+[.)]\s+(.*)$/;
-
-        if (bullet.test(line) || numbered.test(line)) {
-            const ordered = numbered.test(line);
-            const pattern = ordered ? numbered : bullet;
-            const items: string[] = [];
-
-            while (index < lines.length) {
-                const match = lines[index].trim().match(pattern);
-                if (!match) break;
-                items.push(match[1]);
-                index += 1;
-            }
-
-            const ListTag = ordered ? 'ol' : 'ul';
-            blocks.push(
-                <ListTag
-                    key={key++}
-                    className={`${ordered ? 'list-decimal' : 'list-disc'} pl-6 my-3 flex flex-col gap-1`}
-                >
-                    {items.map((item, itemIndex) => (
-                        <li key={itemIndex} dangerouslySetInnerHTML={{ __html: inline(item) }} />
-                    ))}
-                </ListTag>
-            );
-            continue;
-        }
-
-        const paragraph: string[] = [];
-        while (index < lines.length && lines[index].trim() !== '') {
-            const candidate = lines[index].trim();
-            if (
-                /^#{1,6}\s/.test(candidate) ||
-                /^>\s?/.test(candidate) ||
-                bullet.test(candidate) ||
-                numbered.test(candidate) ||
-                /^-{3,}$/.test(candidate)
-            ) {
-                break;
-            }
-            paragraph.push(candidate);
-            index += 1;
-        }
-        blocks.push(
-            <p
-                key={key++}
-                className="mb-3 text-gray-700"
-                dangerouslySetInnerHTML={{ __html: inline(paragraph.join(' ')) }}
-            />
-        );
-    }
-
-    return <>{blocks}</>;
-};
-
-export default MarkdownEditor;
diff --git a/app/admin/RichEditor.tsx b/app/admin/RichEditor.tsx
new file mode 100644
index 0000000..e0dc1f7
--- /dev/null
+++ b/app/admin/RichEditor.tsx
@@ -0,0 +1,394 @@
+'use client';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import NextImage from 'next/image';
+import {
+    Bold,
+    Italic,
+    Heading2,
+    Heading3,
+    List,
+    ListOrdered,
+    Quote,
+    Link2,
+    Minus,
+    ImagePlus,
+    Trash2,
+} from 'lucide-react';
+import {
+    EditorContent,
+    Node,
+    NodeViewWrapper,
+    ReactNodeViewRenderer,
+    useEditor,
+    type NodeViewProps,
+} from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { Placeholder } from '@tiptap/extensions';
+import { MAX_ORIGINAL_BYTES, resizeForHero } from '@/lib/admin/resize';
+import { documentToMarkdown, markdownToDocument } from '@/lib/admin/richtext';
+import { ASSET_IMAGE, documentToTipTap, tipTapToDocument, type TipTapDoc } from '@/lib/admin/tiptap-document';
+
+const thumbUrl = (url: string) => (url.startsWith('//') ? `https:${url}` : url);
+
+const AssetUrls = createContext<Record<string, string>>({});
+
+const AssetImageView = ({ node, deleteNode, selected }: NodeViewProps) => {
+    const urls = useContext(AssetUrls);
+    const id = node.attrs.assetId as string;
+    const url = urls[id];
+
+    return (
+        <NodeViewWrapper
+            className={`relative my-4 inline-block w-full max-w-sm overflow-hidden rounded-xl border-2 ${
+                selected ? 'border-[#FFBE00]' : 'border-transparent'
+            }`}
+            data-drag-handle
+        >
+            <span className="relative block aspect-4/3 w-full bg-gray-100">
+                {url ? (
+                    <NextImage
+                        src={`${thumbUrl(url)}?w=640&h=480&fit=fill&fm=jpg&q=70`}
+                        alt=""
+                        fill
+                        className="object-cover"
+                        sizes="384px"
+                        unoptimized
+                    />
+                ) : (
+                    <span className="absolute inset-0 grid place-items-center text-sm text-gray-500">
+                        Photo
+                    </span>
+                )}
+            </span>
+
+            <button
+                type="button"
+                onClick={() => deleteNode()}
+                aria-label="Remove this photo"
+                title="Remove this photo"
+                className="absolute right-2 top-2 inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-white/95 px-2.5 py-1.5 text-xs font-semibold text-red-700 shadow-sm hover:bg-white"
+            >
+                <Trash2 className="h-3.5 w-3.5" />
+                Remove
+            </button>
+        </NodeViewWrapper>
+    );
+};
+
+const AssetImage = Node.create({
+    name: ASSET_IMAGE,
+    group: 'block',
+    atom: true,
+    draggable: true,
+    addAttributes: () => ({ assetId: { default: '' } }),
+    parseHTML: () => [{ tag: 'div[data-asset-id]' }],
+    renderHTML: ({ HTMLAttributes }) => [
+        'div',
+        { 'data-asset-id': HTMLAttributes.assetId as string },
+    ],
+    addNodeView: () => ReactNodeViewRenderer(AssetImageView),
+});
+
+interface RichEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    rows?: number;
+    assetUrls: Record<string, string>;
+    onAssetUploaded: (id: string, url: string) => void;
+    onError: (message: string) => void;
+    allowImages?: boolean;
+    uploadPath?: string;
+    placeholder?: string;
+}
+
+const toMarkdown = (doc: TipTapDoc) => documentToMarkdown(tipTapToDocument(doc));
+const toEditorDoc = (markdown: string) => documentToTipTap(markdownToDocument(markdown));
+
+const RichEditor = ({
+    value,
+    onChange,
+    rows = 8,
+    assetUrls,
+    onAssetUploaded,
+    onError,
+    allowImages = true,
+    uploadPath = '/api/admin/upload',
+    placeholder = 'Write here...',
+}: RichEditorProps) => {
+    const [uploading, setUploading] = useState(false);
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [linkWords, setLinkWords] = useState('');
+    const [linkAddress, setLinkAddress] = useState('');
+
+    const emitted = useRef(value);
+
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: [
+            StarterKit.configure({
+                codeBlock: false,
+                strike: false,
+                hardBreak: false,
+                heading: { levels: [1, 2, 3, 4, 5, 6] },
+                link: { openOnClick: false, autolink: false, HTMLAttributes: { rel: 'noreferrer' } },
+            }),
+            AssetImage,
+            Placeholder.configure({ placeholder }),
+        ],
+        content: toEditorDoc(value),
+        editorProps: {
+            attributes: {
+                class: 'admin-prose outline-none px-4 py-3',
+                style: `min-height: ${Math.max(6, rows) * 1.6}rem`,
+            },
+        },
+        onUpdate: ({ editor: instance }) => {
+            const markdown = toMarkdown(instance.getJSON() as TipTapDoc);
+            emitted.current = markdown;
+            onChange(markdown);
+        },
+    });
+
+    useEffect(() => {
+        if (!editor || value === emitted.current) return;
+        emitted.current = value;
+        editor.commands.setContent(toEditorDoc(value), { emitUpdate: false });
+    }, [editor, value]);
+
+    if (!editor) return null;
+
+    const openLink = () => {
+        const { from, to } = editor.state.selection;
+        setLinkWords(editor.state.doc.textBetween(from, to, ' '));
+        setLinkAddress((editor.getAttributes('link').href as string) ?? '');
+        setLinkOpen(true);
+    };
+
+    const applyLink = () => {
+        const address = linkAddress.trim();
+        if (!address) return;
+
+        const href = /^(https?:|mailto:|tel:|\/|#)/i.test(address) ? address : `https://${address}`;
+        const { from, to, empty } = editor.state.selection;
+        const selected = editor.state.doc.textBetween(from, to, ' ');
+        const words = linkWords.trim();
+        const linked = (text: string) => [
+            { type: 'text', text, marks: [{ type: 'link', attrs: { href } }] },
+        ];
+
+        if (empty) {
+            editor.chain().focus().insertContent(linked(words || address)).run();
+        } else if (words && words !== selected) {
+            editor.chain().focus().insertContent(linked(words)).run();
+        } else {
+            editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
+        }
+
+        setLinkOpen(false);
+    };
+
+    const removeLink = () => {
+        editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        setLinkOpen(false);
+    };
+
+    const addPhoto = async (file: File | null | undefined) => {
+        if (!file) return;
+        onError('');
+
+        if (!file.type.startsWith('image/')) {
+            onError(`"${file.name}" is not a photo.`);
+            return;
+        }
+        if (file.size > MAX_ORIGINAL_BYTES) {
+            onError(`"${file.name}" is too big. Please pick a smaller photo.`);
+            return;
+        }
+
+        setUploading(true);
+        try {
+            const body = new FormData();
+            body.append('file', await resizeForHero(file));
+
+            const res = await fetch(uploadPath, { method: 'POST', body });
+            if (!res.ok) {
+                const payload = await res.json().catch(() => ({}));
+                throw new Error(payload.message ?? 'That photo could not be added.');
+            }
+
+            const asset = await res.json();
+            onAssetUploaded(asset.id, asset.url);
+            editor
+                .chain()
+                .focus()
+                .insertContent({ type: ASSET_IMAGE, attrs: { assetId: asset.id } })
+                .run();
+        } catch (error) {
+            onError(error instanceof Error ? error.message : 'That photo could not be added.');
+        }
+        setUploading(false);
+    };
+
+    return (
+        <AssetUrls.Provider value={assetUrls}>
+            <div className="overflow-hidden rounded-lg border border-gray-300 bg-white focus-within:border-black">
+                <div className="flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50 px-2 py-1.5">
+                    <Tool
+                        label="Bold"
+                        Icon={Bold}
+                        active={editor.isActive('bold')}
+                        onClick={() => editor.chain().focus().toggleBold().run()}
+                    />
+                    <Tool
+                        label="Italic"
+                        Icon={Italic}
+                        active={editor.isActive('italic')}
+                        onClick={() => editor.chain().focus().toggleItalic().run()}
+                    />
+                    <Tool
+                        label="Heading"
+                        Icon={Heading2}
+                        active={editor.isActive('heading', { level: 2 })}
+                        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                    />
+                    <Tool
+                        label="Smaller heading"
+                        Icon={Heading3}
+                        active={editor.isActive('heading', { level: 3 })}
+                        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+                    />
+                    <Tool
+                        label="Bullet list"
+                        Icon={List}
+                        active={editor.isActive('bulletList')}
+                        onClick={() => editor.chain().focus().toggleBulletList().run()}
+                    />
+                    <Tool
+                        label="Numbered list"
+                        Icon={ListOrdered}
+                        active={editor.isActive('orderedList')}
+                        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                    />
+                    <Tool
+                        label="Quote"
+                        Icon={Quote}
+                        active={editor.isActive('blockquote')}
+                        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+                    />
+                    <Tool label="Link" Icon={Link2} active={editor.isActive('link')} onClick={openLink} />
+                    <Tool
+                        label="Line"
+                        Icon={Minus}
+                        onClick={() => editor.chain().focus().setHorizontalRule().run()}
+                    />
+
+                    {allowImages && (
+                        <label
+                            className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-semibold text-gray-700 hover:bg-white hover:text-black hover:shadow-sm ${
+                                uploading ? 'opacity-40' : 'cursor-pointer'
+                            }`}
+                        >
+                            <ImagePlus className="h-4 w-4" />
+                            {uploading ? 'Adding photo...' : 'Photo'}
+                            <input
+                                type="file"
+                                accept="image/*"
+                                className="hidden"
+                                disabled={uploading}
+                                onChange={(event) => {
+                                    addPhoto(event.target.files?.[0]);
+                                    event.target.value = '';
+                                }}
+                            />
+                        </label>
+                    )}
+                </div>
+
+                {linkOpen && (
+                    <div className="flex flex-col gap-2 border-b border-gray-200 bg-amber-50/60 px-4 py-3">
+                        <label className="text-xs font-semibold text-gray-700">
+                            Words people will see
+                            <input
+                                type="text"
+                                value={linkWords}
+                                onChange={(event) => setLinkWords(event.target.value)}
+                                placeholder="Read the handbook"
+                                className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-normal outline-none focus:border-black"
+                            />
+                        </label>
+                        <label className="text-xs font-semibold text-gray-700">
+                            Web address
+                            <input
+                                type="text"
+                                value={linkAddress}
+                                onChange={(event) => setLinkAddress(event.target.value)}
+                                onKeyDown={(event) => {
+                                    if (event.key === 'Enter') {
+                                        event.preventDefault();
+                                        applyLink();
+                                    }
+                                }}
+                                placeholder="gesaknust.com/handbook"
+                                className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-normal outline-none focus:border-black"
+                            />
+                        </label>
+                        <div className="flex flex-wrap items-center gap-2 pt-1">
+                            <button
+                                type="button"
+                                onClick={applyLink}
+                                disabled={linkAddress.trim() === ''}
+                                className="cursor-pointer rounded-lg bg-black px-3.5 py-2 text-xs font-semibold text-white disabled:opacity-40"
+                            >
+                                Add link
+                            </button>
+                            {editor.isActive('link') && (
+                                <button
+                                    type="button"
+                                    onClick={removeLink}
+                                    className="cursor-pointer rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-xs font-semibold text-gray-700 hover:border-black"
+                                >
+                                    Remove link
+                                </button>
+                            )}
+                            <button
+                                type="button"
+                                onClick={() => setLinkOpen(false)}
+                                className="cursor-pointer rounded-lg px-2 py-2 text-xs font-semibold text-gray-500 hover:text-black"
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                <EditorContent editor={editor} />
+            </div>
+        </AssetUrls.Provider>
+    );
+};
+
+const Tool = ({
+    label,
+    Icon,
+    active,
+    onClick,
+}: {
+    label: string;
+    Icon: typeof Bold;
+    active?: boolean;
+    onClick: () => void;
+}) => (
+    <button
+        type="button"
+        onClick={onClick}
+        aria-pressed={active}
+        className={`inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-semibold hover:bg-white hover:shadow-sm ${
+            active ? 'bg-white text-black shadow-sm' : 'text-gray-700 hover:text-black'
+        }`}
+    >
+        <Icon className="h-4 w-4" />
+        {label}
+    </button>
+);
+
+export default RichEditor;
diff --git a/app/contribute/ContributeForm.tsx b/app/contribute/ContributeForm.tsx
index 6d448cf..6194418 100644
--- a/app/contribute/ContributeForm.tsx
+++ b/app/contribute/ContributeForm.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { Camera, Check, Plus, X, Send } from 'lucide-react';
 import StarSpinner from '@/components/ui/StarSpinner';
-import MarkdownEditor from '@/app/admin/MarkdownEditor';
+import RichEditor from '@/app/admin/RichEditor';
 import { MAX_ORIGINAL_BYTES, resizeForHero } from '@/lib/admin/resize';
 import type { Writer } from '@/lib/contribute/session';
 
@@ -310,7 +310,7 @@ const ContributeForm = ({
                 <p className="text-sm text-gray-500 mb-2">
                     Write it here. Use the buttons for headings, bold, lists and photos.
                 </p>
-                <MarkdownEditor
+                <RichEditor
                     value={body}
                     onChange={setBody}
                     rows={16}
diff --git a/app/globals.css b/app/globals.css
index ccf2ccc..070f861 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -208,3 +208,103 @@
     transparent 100%
   );
 }
+
+.admin-prose {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--color-gray-700, #364153);
+}
+.admin-prose:focus {
+  outline: none;
+}
+.admin-prose > * + * {
+  margin-top: 0.85rem;
+}
+.admin-prose h2,
+.admin-prose h3 {
+  font-family: var(--font-header, inherit);
+  font-weight: 700;
+  color: #252638;
+  margin-top: 1.5rem;
+}
+.admin-prose h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #252638;
+}
+.admin-prose h2 {
+  font-size: 1.35rem;
+}
+.admin-prose h3 {
+  font-size: 1.15rem;
+}
+.admin-prose h4,
+.admin-prose h5,
+.admin-prose h6 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #252638;
+}
+.admin-prose strong {
+  font-weight: 700;
+  color: #252638;
+}
+.admin-prose em {
+  font-style: italic;
+}
+.admin-prose u {
+  text-decoration: underline;
+}
+.admin-prose a {
+  color: #252638;
+  text-decoration: underline;
+  text-decoration-color: #ffbe00;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+.admin-prose ul,
+.admin-prose ol {
+  padding-left: 1.5rem;
+}
+.admin-prose ul {
+  list-style: disc;
+}
+.admin-prose ol {
+  list-style: decimal;
+}
+.admin-prose li {
+  padding-left: 0.25rem;
+}
+.admin-prose li + li {
+  margin-top: 0.25rem;
+}
+.admin-prose li > p {
+  margin: 0;
+}
+.admin-prose blockquote {
+  border-left: 4px solid #ffbe00;
+  padding-left: 0.85rem;
+  font-style: italic;
+  color: var(--color-gray-600, #4a5565);
+}
+.admin-prose code {
+  background: var(--color-gray-100, #f3f4f6);
+  border-radius: 0.25rem;
+  padding: 0.1rem 0.3rem;
+  font-size: 0.9em;
+}
+.admin-prose hr {
+  border: 0;
+  border-top: 1px solid var(--color-gray-200, #e5e7eb);
+  margin: 1.25rem 0;
+}
+.admin-prose p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--color-gray-400, #99a1af);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+.admin-prose .ProseMirror-selectednode {
+  outline: none;
+}
diff --git a/lib/admin/collections.ts b/lib/admin/collections.ts
index eeef911..bd1516c 100644
--- a/lib/admin/collections.ts
+++ b/lib/admin/collections.ts
@@ -24,6 +24,13 @@ export type FieldKind =
   | "tagWords"
   | "select";
 
+export interface FieldSection {
+  title: string;
+
+  intro?: string;
+  fields: string[];
+}
+
 export interface FieldSpec {
   id: string;
   label: string;
@@ -58,6 +65,8 @@ export interface CollectionSpec {
   orderable?: boolean;
 
   generated?: boolean;
+
+  sections?: FieldSection[];
   fields: FieldSpec[];
 }
 
@@ -71,6 +80,22 @@ export const COLLECTIONS: CollectionSpec[] = [
     hint: "Articles on the blog",
     titleField: "title",
     thumbField: "headerImage",
+    sections: [
+      {
+        title: "The basics",
+        fields: ["title", "hook", "headerImage", "author", "datePublished"],
+      },
+      {
+        title: "The article",
+        intro: "Write it the way you want it to read. The buttons above the box do headings, bold, lists, links and photos.",
+        fields: ["blogContent"],
+      },
+      {
+        title: "Helping people find it",
+        intro: "Optional. Tags group it with similar articles; the web address is made from the title unless you change it.",
+        fields: ["tags", "slug"],
+      },
+    ],
     fields: [
       { id: "title", label: "Title", kind: "text", required: true },
       { id: "hook", label: "Short summary", kind: "text", required: true, hint: "One line shown under the title in listings." },
@@ -104,6 +129,21 @@ export const COLLECTIONS: CollectionSpec[] = [
     hint: "Upcoming and past events",
     titleField: "title",
     thumbField: "eventImage",
+    sections: [
+      {
+        title: "The basics",
+        fields: ["title", "description", "eventImage"],
+      },
+      {
+        title: "When and where",
+        intro: "The map pin is what people tap for directions, so set it even when the venue is obvious.",
+        fields: ["eventDate", "venueInPlainEnglish", "venue", "onlineLink"],
+      },
+      {
+        title: "Helping people find it",
+        fields: ["slug"],
+      },
+    ],
     fields: [
       { id: "title", label: "Event name", kind: "text" },
       { id: "description", label: "Description", kind: "longtext", required: true },
@@ -131,6 +171,22 @@ export const COLLECTIONS: CollectionSpec[] = [
     slugFollowsTitle: true,
     thumbField: "image",
     singleton: true,
+    sections: [
+      {
+        title: "The basics",
+        fields: ["name", "role", "image"],
+      },
+      {
+        title: "About them",
+        intro: "A few paragraphs shown on their page.",
+        fields: ["description"],
+      },
+      {
+        title: "Links",
+        intro: "Fill in what you have. Leave the rest blank and they just will not show.",
+        fields: ["linkedinUrl", "slug"],
+      },
+    ],
     fields: [
       { id: "name", label: "Their name", kind: "text", required: true },
       { id: "role", label: "What they do", kind: "text", hint: "For example: Telecommunications Engineering student." },
@@ -203,6 +259,26 @@ export const COLLECTIONS: CollectionSpec[] = [
     slugFrom: ["fullName", "academicYear"],
     slugUrl: "gesaknust.com/executives/",
     thumbField: "officialImage",
+    sections: [
+      {
+        title: "The basics",
+        fields: ["fullName", "executivePositionHeld", "academicYear", "officialImage", "programmeOfStudy"],
+      },
+      {
+        title: "Their profile page",
+        intro: "All optional. Writing a biography is what gives this person a page of their own.",
+        fields: ["quote", "bio", "achievements", "portfolioImages"],
+      },
+      {
+        title: "Links and contact",
+        intro: "Fill in what you have. Leave the rest blank and they just will not show.",
+        fields: ["primarySocialLink", "portfolioLink", "linkedInUrl", "instagramUrl", "xUrl", "email"],
+      },
+      {
+        title: "Helping people find them",
+        fields: ["slug"],
+      },
+    ],
     fields: [
       { id: "fullName", label: "Full name", kind: "text", required: true },
       { id: "executivePositionHeld", label: "Position", kind: "text", required: true },
@@ -229,6 +305,21 @@ export const COLLECTIONS: CollectionSpec[] = [
     hint: "Clubs and societies",
     titleField: "clubName",
     thumbField: "clubLogo",
+    sections: [
+      {
+        title: "The basics",
+        fields: ["clubName", "clubLogo", "description", "clubType"],
+      },
+      {
+        title: "About the club",
+        intro: "A longer write-up shown on the club's own page.",
+        fields: ["aboutclub"],
+      },
+      {
+        title: "Link and how it shows up",
+        fields: ["clubLink", "isFeatured", "isActivelyRecruitingMembers"],
+      },
+    ],
     fields: [
       { id: "clubName", label: "Club name", kind: "text", required: true },
       { id: "clubLogo", label: "Logo", kind: "image", required: true },
@@ -254,6 +345,22 @@ export const COLLECTIONS: CollectionSpec[] = [
     hint: "Engineering departments",
     titleField: "name",
     thumbField: "deptLogo",
+    sections: [
+      {
+        title: "The basics",
+        fields: ["name", "deptAbbreviation", "deptLogo"],
+      },
+      {
+        title: "What this department is about",
+        intro: "Three short write-ups. They appear as the About, Mission and Vision tabs on the department's page.",
+        fields: ["about", "vision", "mission"],
+      },
+      {
+        title: "How people reach them",
+        intro: "Fill in what you have. Leave the rest blank and they just will not show.",
+        fields: ["deptPhone", "deptEmail", "websiteLink", "deptLinkedIn", "whatsappLink", "xComLink", "tiktokLink"],
+      },
+    ],
     fields: [
       { id: "name", label: "Department name", kind: "text", required: true },
       { id: "deptAbbreviation", label: "Short name", kind: "text", required: true, hint: "For example: ChemEng." },
@@ -277,6 +384,27 @@ export const COLLECTIONS: CollectionSpec[] = [
     hint: "Faculties and the departments under them",
     titleField: "name",
     thumbField: "facultyMainImage",
+    sections: [
+      {
+        title: "The basics",
+        fields: ["name", "facultyMainImage"],
+      },
+      {
+        title: "What this faculty is about",
+        intro: "Three short write-ups. They appear as the About, Mission and Vision tabs on the faculty's page.",
+        fields: ["about", "vision", "mission"],
+      },
+      {
+        title: "Departments under it",
+        intro: "Tick every department that belongs to this faculty.",
+        fields: ["departmentsUnderFaculty"],
+      },
+      {
+        title: "How people reach them",
+        intro: "Fill in what you have. Leave the rest blank and they just will not show.",
+        fields: ["facultyWebsite", "facultyMail", "facultyLinkedIn", "facultyTwitter"],
+      },
+    ],
     fields: [
       { id: "name", label: "Faculty name", kind: "text", required: true },
       { id: "about", label: "About", kind: "markdown", required: true },
diff --git a/lib/admin/markdown-blocks.ts b/lib/admin/markdown-blocks.ts
deleted file mode 100644
index 0ef3842..0000000
--- a/lib/admin/markdown-blocks.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-export const ASSET_LINE = /^!\[([^\]]*)\]\(asset:([A-Za-z0-9._-]{1,64})\)$/;
-export const IMAGE_LINE = /^!\[([^\]]*)\]\((\/\/[^)\s]+|https?:\/\/[^)\s]+)\)$/;
-
-export type Block =
-  | { key: number; kind: "text"; text: string }
-  | { key: number; kind: "image"; id: string; url?: string };
-
-let blockKey = 0;
-
-export function nextKey() {
-  blockKey += 1;
-  return blockKey;
-}
-
-export function parseBlocks(markdown: string): Block[] {
-  const blocks: Block[] = [];
-  let buffer: string[] = [];
-
-  const flush = () => {
-    const text = buffer.join("\n").replace(/^\n+|\n+$/g, "");
-    if (text !== "") blocks.push({ key: nextKey(), kind: "text", text });
-    buffer = [];
-  };
-
-  for (const line of markdown.replace(/\r\n/g, "\n").split("\n")) {
-    const asset = line.trim().match(ASSET_LINE);
-    const direct = asset ? null : line.trim().match(IMAGE_LINE);
-    if (asset) {
-      flush();
-      blocks.push({ key: nextKey(), kind: "image", id: asset[2] });
-    } else if (direct) {
-      flush();
-      blocks.push({ key: nextKey(), kind: "image", id: "", url: direct[2] });
-    } else {
-      buffer.push(line);
-    }
-  }
-  flush();
-
-  if (blocks.length === 0 || blocks.every((block) => block.kind === "image")) {
-    blocks.push({ key: nextKey(), kind: "text", text: "" });
-  }
-  return blocks;
-}
-
-export function serializeBlocks(blocks: Block[]): string {
-  return blocks
-    .map((block) =>
-      block.kind === "image"
-        ? block.url
-          ? `![](${block.url})`
-          : `![](asset:${block.id})`
-        : block.text
-    )
-    .filter((part, _index, all) => part !== "" || all.length === 1)
-    .join("\n\n");
-}
diff --git a/lib/admin/tiptap-document.ts b/lib/admin/tiptap-document.ts
new file mode 100644
index 0000000..5522a6f
--- /dev/null
+++ b/lib/admin/tiptap-document.ts
@@ -0,0 +1,224 @@
+import { safeUri, type RichTextDocument } from "./richtext";
+
+export interface TipTapMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+export interface TipTapNode {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TipTapNode[];
+  marks?: TipTapMark[];
+  text?: string;
+}
+
+export interface TipTapDoc {
+  type: "doc";
+  content: TipTapNode[];
+}
+
+export const ASSET_IMAGE = "assetImage";
+
+interface CfMark {
+  type: string;
+}
+
+interface CfNode {
+  nodeType: string;
+  value?: string;
+  marks?: CfMark[];
+  data?: { uri?: string; target?: { sys: { type: string; linkType: string; id: string } } };
+  content?: CfNode[];
+}
+
+function inlineToTipTap(nodes: CfNode[], link?: string): TipTapNode[] {
+  const out: TipTapNode[] = [];
+
+  for (const node of nodes) {
+    if (node.nodeType === "hyperlink") {
+      const uri = safeUri(node.data?.uri);
+      out.push(...inlineToTipTap(node.content ?? [], uri || link));
+      continue;
+    }
+
+    const value = node.value ?? "";
+    if (value === "") continue;
+
+    const marks: TipTapMark[] = (node.marks ?? []).map((mark) => ({ type: mark.type }));
+    if (link) marks.push({ type: "link", attrs: { href: link } });
+
+    out.push(marks.length > 0 ? { type: "text", text: value, marks } : { type: "text", text: value });
+  }
+
+  return out;
+}
+
+const paragraphOf = (node: CfNode): TipTapNode => {
+  const content = inlineToTipTap(node.content ?? []);
+  return content.length > 0 ? { type: "paragraph", content } : { type: "paragraph" };
+};
+
+function blockToTipTap(node: CfNode): TipTapNode | null {
+  const heading = node.nodeType.match(/^heading-([1-6])$/);
+  if (heading) {
+    const content = inlineToTipTap(node.content ?? []);
+    return {
+      type: "heading",
+      attrs: { level: Number(heading[1]) },
+      ...(content.length > 0 ? { content } : {}),
+    };
+  }
+
+  switch (node.nodeType) {
+    case "paragraph":
+      return paragraphOf(node);
+
+    case "unordered-list":
+    case "ordered-list":
+      return {
+        type: node.nodeType === "ordered-list" ? "orderedList" : "bulletList",
+        content: (node.content ?? []).map((item) => ({
+          type: "listItem",
+          content: (item.content ?? []).map(paragraphOf),
+        })),
+      };
+
+    case "blockquote":
+      return {
+        type: "blockquote",
+        content: (node.content ?? []).map(paragraphOf),
+      };
+
+    case "hr":
+      return { type: "horizontalRule" };
+
+    case "embedded-asset-block": {
+      const id = node.data?.target?.sys?.id;
+      return id ? { type: ASSET_IMAGE, attrs: { assetId: id } } : null;
+    }
+
+    default:
+      return paragraphOf(node);
+  }
+}
+
+export function documentToTipTap(document: unknown): TipTapDoc {
+  const doc = document as RichTextDocument | null | undefined;
+  const content: TipTapNode[] = [];
+
+  if (doc && doc.nodeType === "document") {
+    for (const node of doc.content ?? []) {
+      const mapped = blockToTipTap(node as CfNode);
+      if (mapped) content.push(mapped);
+    }
+  }
+
+  if (content.length === 0) content.push({ type: "paragraph" });
+  return { type: "doc", content };
+}
+
+const cfText = (value: string, marks: string[]): CfNode => ({
+  nodeType: "text",
+  value,
+  marks: marks.map((type) => ({ type })),
+  data: {},
+});
+
+function inlineToCf(nodes: TipTapNode[]): CfNode[] {
+  const out: CfNode[] = [];
+
+  for (const node of nodes) {
+    if (node.type !== "text" || !node.text) continue;
+
+    const marks = node.marks ?? [];
+    const href = safeUri(
+      marks.find((mark) => mark.type === "link")?.attrs?.href as string | undefined
+    );
+    const others = marks.filter((mark) => mark.type !== "link").map((mark) => mark.type);
+    const leaf = cfText(node.text, others);
+
+    if (!href) {
+      out.push(leaf);
+      continue;
+    }
+
+    const last = out[out.length - 1];
+    if (last && last.nodeType === "hyperlink" && last.data?.uri === href) {
+      last.content = [...(last.content ?? []), leaf];
+    } else {
+      out.push({ nodeType: "hyperlink", data: { uri: href }, content: [leaf] });
+    }
+  }
+
+  return out;
+}
+
+const cfParagraph = (node: TipTapNode): CfNode => ({
+  nodeType: "paragraph",
+  data: {},
+  content: inlineToCf(node.content ?? []),
+});
+
+function blockToCf(node: TipTapNode): CfNode | null {
+  switch (node.type) {
+    case "paragraph":
+      return cfParagraph(node);
+
+    case "heading": {
+      const level = Number(node.attrs?.level ?? 2);
+      return {
+        nodeType: `heading-${level >= 1 && level <= 6 ? level : 2}`,
+        data: {},
+        content: inlineToCf(node.content ?? []),
+      };
+    }
+
+    case "bulletList":
+    case "orderedList":
+      return {
+        nodeType: node.type === "orderedList" ? "ordered-list" : "unordered-list",
+        data: {},
+        content: (node.content ?? []).map((item) => ({
+          nodeType: "list-item",
+          data: {},
+          content: (item.content ?? []).map(cfParagraph),
+        })),
+      };
+
+    case "blockquote":
+      return {
+        nodeType: "blockquote",
+        data: {},
+        content: (node.content ?? []).map(cfParagraph),
+      };
+
+    case "horizontalRule":
+      return { nodeType: "hr", data: {}, content: [] };
+
+    case ASSET_IMAGE: {
+      const id = node.attrs?.assetId;
+      return typeof id === "string" && id
+        ? {
+            nodeType: "embedded-asset-block",
+            data: { target: { sys: { type: "Link", linkType: "Asset", id } } },
+            content: [],
+          }
+        : null;
+    }
+
+    default:
+      return null;
+  }
+}
+
+export function tipTapToDocument(doc: TipTapDoc | null | undefined): RichTextDocument {
+  const content: CfNode[] = [];
+
+  for (const node of doc?.content ?? []) {
+    const mapped = blockToCf(node);
+    if (mapped) content.push(mapped);
+  }
+
+  return { nodeType: "document", data: {}, content } as RichTextDocument;
+}
diff --git a/lib/markdownComponents.tsx b/lib/markdownComponents.tsx
index 6093ff1..55eebdc 100644
--- a/lib/markdownComponents.tsx
+++ b/lib/markdownComponents.tsx
@@ -1,8 +1,44 @@
 import type { Components } from 'react-markdown';
+import { safeHref } from './richTextOptions';
 
 export const markdownComponents: Components = {
     p: (props) => <p className="mb-6 leading-relaxed text-gray-700 text-lg" {...props} />,
-    ul: (props) => <ul className="list-disc pl-6 mb-6 text-gray-700 text-lg" {...props} />,
-    ol: (props) => <ol className="list-decimal pl-6 mb-6 text-gray-700 text-lg" {...props} />,
-    li: (props) => <li className="mb-2 pl-2" {...props} />,
+    ul: (props) => <ul className="list-disc pl-6 mb-6 flex flex-col gap-2 text-gray-700 text-lg" {...props} />,
+    ol: (props) => <ol className="list-decimal pl-6 mb-6 flex flex-col gap-2 text-gray-700 text-lg" {...props} />,
+    li: (props) => <li className="mb-2 pl-2 leading-relaxed [&>p]:mb-0" {...props} />,
+
+    h1: (props) => <h2 className="font-header font-bold text-2xl text-[#252638] mt-10 mb-4" {...props} />,
+    h2: (props) => <h2 className="font-header font-bold text-2xl text-[#252638] mt-10 mb-4" {...props} />,
+    h3: (props) => <h3 className="font-header font-bold text-xl text-[#252638] mt-8 mb-3" {...props} />,
+    h4: (props) => <h4 className="font-header font-semibold text-lg text-[#252638] mt-6 mb-2" {...props} />,
+    h5: (props) => <h5 className="font-header font-semibold text-base text-[#252638] mt-6 mb-2" {...props} />,
+    h6: (props) => <h6 className="font-header font-semibold text-base text-[#252638] mt-6 mb-2" {...props} />,
+
+    strong: (props) => <strong className="font-bold text-[#252638]" {...props} />,
+    em: (props) => <em className="italic" {...props} />,
+    code: (props) => <code className="bg-gray-100 rounded px-1.5 py-0.5 text-[0.9em]" {...props} />,
+    hr: () => <hr className="my-10 border-gray-200" />,
+
+    blockquote: (props) => (
+        <blockquote
+            className="border-l-4 border-[#FFBE00] bg-[#FFBE00]/5 rounded-r-lg pl-5 pr-4 py-3 my-6 italic text-gray-700 [&>p]:mb-0"
+            {...props}
+        />
+    ),
+
+    a: ({ href, children, ...rest }) => {
+        const safe = safeHref(href);
+        if (!safe) return <>{children}</>;
+        return (
+            <a
+                href={safe}
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                className="text-[#252638] underline decoration-[#FFBE00] decoration-2 underline-offset-2 hover:text-black"
+                {...rest}
+            >
+                {children}
+            </a>
+        );
+    },
 };
diff --git a/package-lock.json b/package-lock.json
index cbbf62b..e8260d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,9 @@
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
         "@tanstack/react-query": "^5.90.9",
+        "@tiptap/extensions": "^3.32.0",
+        "@tiptap/react": "^3.32.0",
+        "@tiptap/starter-kit": "^3.32.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -40,6 +43,7 @@
         "@tanstack/react-query-devtools": "^5.91.1",
         "@types/node": "24.9.1",
         "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2",
         "eslint": "^9.39.5",
         "eslint-config-next": "^16.1.1",
         "tailwindcss": "^4.1.18",
@@ -598,6 +602,34 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -2227,6 +2259,436 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.32.0.tgz",
+      "integrity": "sha512-Ghh2h02GKSqzytQGcLV4espYOG4EHxjj0MsrUB2Vnr47xmlZYRf6r7k2J09H+JpBdaGrWwrTkyBEi5i3c3yy2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.32.0.tgz",
+      "integrity": "sha512-wmuthEdlYVArNoUbqFPH35giutBABFu7fqEB0lTD1k0UXJUs4dFvcbRyGWWgnHFZgP3TT4u8e+xiayYw0eQ0NQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.32.0.tgz",
+      "integrity": "sha512-SQYewnYDoIBN+8oH53IDcD8p+Pz+Jnyq3hrxjy/FAo5ctc+96d3ZLdqc9gzLVSqFFo/SUINv2FVGoq9PvU7yqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.32.0.tgz",
+      "integrity": "sha512-X3ll8i9Z8QNvt7+tcqlwopJG+68ugO13Av0Ox4Ico+jXcTnFdDuKQJBSI9sLuMR5vTQOeTHhKYXhjF88aahMSA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.32.0.tgz",
+      "integrity": "sha512-Y5P/l06pVCUG46vXpBl3z0fW2b6JpSMX4Cvr+5sfQh8zB3TxwSiLQaaPwI3R5MFD1KfRk3AjiPRieEyXdWcNHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.32.0.tgz",
+      "integrity": "sha512-I+aEVl0dTmkfnU6HzBGEefb9U7ja2MkucwBBwrmoMwU+uIKpC4xw8NcHC9X6sjAcom3Pxs2HX+8WEo4Vp13R/Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.32.0.tgz",
+      "integrity": "sha512-9NZW/yXP9j9XKr+hRS5m58xiyZI+tQo1PJ7eLHXjGNFWaF601NG/h6741mbKh5uCY51XsbyqG+7que+RavngPA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.32.0.tgz",
+      "integrity": "sha512-GugeKE6AnZDluRXJUNBuX43TPcaJxy5wck6vT2J4a0/EnKStJ43suSZZf1IPfb1ij9EL9bYvAwg9DOcrvdEzTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.32.0.tgz",
+      "integrity": "sha512-t4Ug8hFLt30dwwYvrh63BVUt6N1Yg5PVI3tMllhCmN3Q68oD47v4MB/i5nGfzIsQqMyXUOetwHJWcZ4MoLTx4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.32.0.tgz",
+      "integrity": "sha512-AzKCWceL+4Q1pTc8Whw1kPqN/aYGPQ70/jXPsblWl501t/pXi6Kz0Pi/NggKkuu73VGjykh68YYf/dcOJ/mPZQ==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.32.0.tgz",
+      "integrity": "sha512-HUpKKWJLtthnpQY5LIjHlJJOmh562RusmOMIe/4iP/H7y+WUR9ZFiZjEs1NBkRjig9fwj8F3BfsrVPYBnM4nLA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.32.0.tgz",
+      "integrity": "sha512-IKUYvK+bO2hGrDWhhTVg0CSh9C2belWg9GyLzvpyd3SZyQ9EgdccLfoytNjOBKbAE/TQ4Oo3kSP+XF6RsUIKPA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.32.0.tgz",
+      "integrity": "sha512-XRiZxZuhfjvbgwCvoBHj04gOsPANEXxxRwrFCQVuFi5yeTHYIzMEioc81j6iAH9pV7aQeJCwLxuh6VHNz3dXEQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.32.0.tgz",
+      "integrity": "sha512-Iry7ynsG4xgcxnH1cm+uXJnEtUzoop4sGA10NUN9I+08TOjhj/GrDiRKMQHKAiVI/R7t2MVav1MJlxFf2FdzGw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.32.0.tgz",
+      "integrity": "sha512-KB/i1xoHilbBGcQ+UotDWhi60KpdCde3RzRIpl2na0Yol4z4Fe2IRWg8ljIrlsssDRwel/fsHJbG7a13EP8oKA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.32.0.tgz",
+      "integrity": "sha512-DRdQSgWPSEjrDg5EDBB5yxRygHtUVLhceVGzAsTz8RziiFyvcwAvzBHCO9hd9jutjCXQ2DLIuZB8P+aHhFWnpg==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.3.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.32.0.tgz",
+      "integrity": "sha512-QdzS5nFz9agAQhBgIuQluobWib39W2cMKx1XB6tYSue7bHMJdgPFP0EnGfFajaeVX42CG6RXtQWrNfyQGKhBvg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.32.0.tgz",
+      "integrity": "sha512-FdJTCAeALixzyyGSSEmroXmkIEclbo/4t2Pl03aRERqpPOSPJcC3evDtIhLazTuP6v+FjCmJ+pXNql6ov7qitA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-keymap": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.32.0.tgz",
+      "integrity": "sha512-vXFre18Dk2m5N/gjo408C02GSrolZ8ZIf0wz6/U8lNC4FcYOISgZFj3BND6uabVntGh2GCSPrVFuNpVPhFnn/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.32.0.tgz",
+      "integrity": "sha512-htZ5hoMLBkGiDP6M5mGemjOoaBmkrj911wiGoTmMMKzO7qJq9QxUBkLY7ILPaKlUWL8U3ccLdDV2TB/nysp4Jg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.32.0.tgz",
+      "integrity": "sha512-afKLMc7fWMkkar9H5FilizStSbhFzUoCzdwwdZf6DDsn3LUt8tJlFHACK78cAyx/TzMJBo0N8/8T1u9bL+N67Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.32.0.tgz",
+      "integrity": "sha512-J9Vw6wmh/wV6SxSsN9RhurvAGcXSY5J3p4EQrROD5PARBl0VOnDFi7/UVoz1RkSdqOKPgAiqDZpaLRgtdBO9Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.32.0.tgz",
+      "integrity": "sha512-sF0jIK67IHdZMnzv2mz5vPTyK7R0ui6/YZgFg+/bLnFCNmweVAoYcHZLlC7ISRnwu0mqJr+epNtzJepY1ZDCjg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.32.0.tgz",
+      "integrity": "sha512-rMLdd4vg6sed/JnaXnaupLbCtYiWikTnQ8qir9ItKOXwf1Ui9P1Y4G0bYU4+gcnMsFzaSGtrOhMqG4/c66AogQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/extensions": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.32.0.tgz",
+      "integrity": "sha512-qO+ndNvlOjzU2MWCtQHoRg1tIortCXLvqPjDx58F1pUYFNCOVZegXi+jqLGDODUA31er+TVz66umzRbbN1bO1Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.32.0.tgz",
+      "integrity": "sha512-H9eN+xHFboJybE7KPGVsu24S8aBlCIgYz38vCHRSnNv17nwmqm06owq/IQ5scza0n3Y7IfUfpgPOtm9SgeHmNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.4.4",
+        "prosemirror-commands": "^1.7.2",
+        "prosemirror-dropcursor": "^1.8.4",
+        "prosemirror-gapcursor": "^1.4.1",
+        "prosemirror-history": "^1.5.1",
+        "prosemirror-inputrules": "^1.5.1",
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.12",
+        "prosemirror-schema-list": "^1.5.1",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-tables": "^1.8.5",
+        "prosemirror-transform": "^1.12.2",
+        "prosemirror-view": "^1.42.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.32.0.tgz",
+      "integrity": "sha512-+iS9RKj6Ve8SXqJ49xptDiifF7PQXmUOh4cjMu+BCXXqKphQkiUccvbWYAeOJCTceM01wWgFhrpfy8qG+CHJYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-equals": "^5.3.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "optionalDependencies": {
+        "@tiptap/extension-bubble-menu": "3.32.0",
+        "@tiptap/extension-floating-menu": "3.32.0"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/pm": "3.32.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.32.0.tgz",
+      "integrity": "sha512-aPYxaevci4PgMrTLsg+baiqI7M1ICd4V9H+zTTdrqs8OUZIbAvj/pNDuHU8uWZyKMu3Dh72t2D6ZdqRu/6aSWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "3.32.0",
+        "@tiptap/extension-blockquote": "3.32.0",
+        "@tiptap/extension-bold": "3.32.0",
+        "@tiptap/extension-bullet-list": "3.32.0",
+        "@tiptap/extension-code": "3.32.0",
+        "@tiptap/extension-code-block": "3.32.0",
+        "@tiptap/extension-document": "3.32.0",
+        "@tiptap/extension-dropcursor": "3.32.0",
+        "@tiptap/extension-gapcursor": "3.32.0",
+        "@tiptap/extension-hard-break": "3.32.0",
+        "@tiptap/extension-heading": "3.32.0",
+        "@tiptap/extension-horizontal-rule": "3.32.0",
+        "@tiptap/extension-italic": "3.32.0",
+        "@tiptap/extension-link": "3.32.0",
+        "@tiptap/extension-list": "3.32.0",
+        "@tiptap/extension-list-item": "3.32.0",
+        "@tiptap/extension-list-keymap": "3.32.0",
+        "@tiptap/extension-ordered-list": "3.32.0",
+        "@tiptap/extension-paragraph": "3.32.0",
+        "@tiptap/extension-strike": "3.32.0",
+        "@tiptap/extension-text": "3.32.0",
+        "@tiptap/extension-underline": "3.32.0",
+        "@tiptap/extensions": "3.32.0",
+        "@tiptap/pm": "3.32.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -2319,12 +2781,27 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.65.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.65.0.tgz",
@@ -4592,6 +5069,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.5.tgz",
+      "integrity": "sha512-yKEpcFuRPu/pTQL2VB8YKE2yFldrLlIsoWtJeBnAdqEhvu21OgkFT0C8njf/xYc2LSZGEr3K9JGjthHJxnVLvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -6114,6 +6600,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linkifyjs": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.3.tgz",
+      "integrity": "sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7437,6 +7929,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
     "node_modules/own-keys": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.2.tgz",
@@ -7665,6 +8163,145 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.4.tgz",
+      "integrity": "sha512-Gyuz9jYdrAeA9I7AholyOes9KUmv/lEwsC5O9s5xF5VB3EgTPsXMGUxz4+H1B+wKVPdZbvRcg1Cp3x8qX+8ofA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.2.tgz",
+      "integrity": "sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.4.tgz",
+      "integrity": "sha512-VmKxhcA6a+h5oPSYmfF1ZNeQqPbyYaIxqZsKqeYCyTlPtrjUgNaHL3P8vVaO19oqAV0zuaM/axkowZHrB1P3Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz",
+      "integrity": "sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.1.tgz",
+      "integrity": "sha512-onlwnqKvgtFg6srZOmDOAhlAy1FIHQpOExORybX0S+DvJepE5tPALrB9iGet/2sqqqrelSnB10OoiOJqAvu2DA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.1.tgz",
+      "integrity": "sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.12",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.12.tgz",
+      "integrity": "sha512-Ue2gTmXMa7EhpLNhC7J+h4+ykD8ha12K6rrZFFKKJHBForfIStw5gJ6Zrf1mqqAa9NmpmEB4wp9bKmA4eUVjWg==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
+      "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
+      "integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.4",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-transform": "^1.10.5",
+        "prosemirror-view": "^1.41.4"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.12.2.tgz",
+      "integrity": "sha512-PE/aY0HEY4zczvmqrilgkUK/WautF0chvMqkmM/iN5/aPHvwrCWaQZjS6CIZp+K84YrvPFqrL+YArrfJX8xX7g==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.42.6",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.42.6.tgz",
+      "integrity": "sha512-3g25f6hKV2bBxo3puH3EcYWmmVNSH0iWmNsMVT7sugDSpA025jgpOLarcDWr39SdzPjYMaiYtRdNtXialPSjEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.12",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -7931,6 +8568,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8978,6 +9621,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -9006,6 +9658,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/web-vitals": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
diff --git a/package.json b/package.json
index 75f6f1b..eed1586 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,9 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@tanstack/react-query": "^5.90.9",
+    "@tiptap/extensions": "^3.32.0",
+    "@tiptap/react": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -42,6 +45,7 @@
     "@tanstack/react-query-devtools": "^5.91.1",
     "@types/node": "24.9.1",
     "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "eslint": "^9.39.5",
     "eslint-config-next": "^16.1.1",
     "tailwindcss": "^4.1.18",

From d9b0cbc80a9874a346d6342af6f6c3e2ae5aff7c Mon Sep 17 00:00:00 2001
From: Obrempong-1 <obrempong.kow@gmail.com>
Date: Tue, 20 Oct 2026 03:47:25 +0000
Subject: [PATCH 2/2] New home hero design and some ui fixes

---
 app/page.tsx                       |   1 +
 components/home/HeroSection.tsx    | 334 +++++++++++++++++++++++++++--
 components/home/ProvostSection.tsx | 160 +++++---------
 components/home/RecentEvent.tsx    |  80 +++----
 4 files changed, 401 insertions(+), 174 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 2009d60..f048eae 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -39,6 +39,7 @@ const Home = async () => {
         mobileImages={hero.mobileImages.length > 0 ? hero.mobileImages : undefined}
         buttonTarget="personality-of-the-week"
         isScroll={true}
+        variant="band"
       />
       <Personality initial={potw} />
       <ProvostSection />
diff --git a/components/home/HeroSection.tsx b/components/home/HeroSection.tsx
index 425c49e..7182547 100644
--- a/components/home/HeroSection.tsx
+++ b/components/home/HeroSection.tsx
@@ -2,7 +2,7 @@
 import Autoplay from "embla-carousel-autoplay"
 import { contentfulImage } from '@/lib/contentful-image';
 import Image, { StaticImageData } from 'next/image';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { motion } from "framer-motion";
 import { ArrowUpRight } from 'lucide-react';
 import { useRouter } from "next/navigation";
@@ -14,6 +14,86 @@ import {
 } from "../ui/carousel";
 import StarSpinner from "../ui/StarSpinner";
 
+const CAMERA = 1.6;
+const MAX_TILE_WIDTH = 55;
+
+const BAND = {
+  speed: 4,
+  aspect: 16 / 9,
+  gap: 6,
+  curve: 80,
+  fade: 18,
+  fill: 0.72,
+};
+
+function arc(bend: number) {
+  return (CAMERA - 1 + Math.cos(bend)) / (2 * CAMERA * Math.sin(bend));
+}
+
+interface BandLayout {
+  columns: number;
+  sweep: number;
+  unit: number;
+  limit: number;
+  slices: number;
+  axis: number;
+  tilePct: number;
+}
+
+function measureBand(
+  width: number,
+  height: number,
+  textBottom: number,
+  footTop: number,
+  stacked: boolean,
+  bend: number
+): BandLayout {
+  const slices = 12;
+  const round = (n: number) => +n.toFixed(4);
+
+  const narrow = stacked;
+  const widest = narrow ? 76 : MAX_TILE_WIDTH;
+  const fill = narrow ? 0.6 : BAND.fill;
+  const lift = narrow ? 0.38 : 0.5;
+
+  const room = Math.max(0, footTop - textBottom);
+  const tile = Math.min(room * fill, ((widest / 100) * width) / BAND.aspect);
+
+  const half = tile / 2;
+  const guard = narrow ? 20 : 0;
+  const highest = textBottom + half + guard;
+  const lowest = footTop - half - guard;
+  const wanted = textBottom + room * lift;
+  const centre =
+    lowest >= highest
+      ? Math.min(Math.max(wanted, highest), lowest)
+      : (textBottom + footTop) / 2;
+  const axis = round(Math.min(84, Math.max(50, (centre / (height || 1)) * 100)));
+  const tilePct = round((tile / (height || 1)) * 100);
+
+  const radius = width * arc(bend);
+  if (!(tile > 0) || !(radius > 0)) {
+    return { columns: 2, sweep: 0, unit: 0, limit: 0, slices, axis, tilePct };
+  }
+
+  const deg = (rad: number) => (rad * 180) / Math.PI;
+  const unit = deg(tile / radius);
+  const pitch = (BAND.aspect + BAND.gap / 100) * unit;
+  const limit = deg(bend) + (BAND.aspect * unit) / 2;
+  const columns = Math.min(60, Math.max(2, Math.ceil((2 * limit) / pitch)));
+  const sweep = round((columns * pitch) / 2);
+
+  return {
+    columns,
+    sweep,
+    unit: round(unit),
+    limit: round(Math.min(sweep, limit)),
+    slices,
+    axis,
+    tilePct,
+  };
+}
+
 interface HeroSectionProps {
   title?: string;
   highlight?: string;
@@ -24,6 +104,7 @@ interface HeroSectionProps {
   buttonTarget?: string;
   isScroll?: boolean;
   overlayOpacity?: string;
+  variant?: 'carousel' | 'band';
 }
 
 const HeroSection = ({
@@ -36,6 +117,7 @@ const HeroSection = ({
   buttonTarget,
   isScroll = false,
   overlayOpacity = 'bg-black/40',
+  variant = 'carousel',
 }: HeroSectionProps) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
@@ -88,6 +170,94 @@ const HeroSection = ({
     api.scrollTo(index);
   };
 
+  const bandRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const ledeRef = useRef<HTMLParagraphElement>(null);
+  const bandId = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const bend = (Math.min(85, Math.max(5, BAND.curve)) * Math.PI) / 180;
+  const [layout, setLayout] = useState<BandLayout | null>(null);
+  const [shown, setShown] = useState<Record<number, number>>({});
+
+  const tiles = useMemo(
+    () =>
+      images.map((img) => {
+        if (typeof img !== 'string') return { src: (img as StaticImageData).src, srcSet: '' };
+        const picture = contentfulImage(img, {
+          widths: [320, 480, 640, 960],
+          quality: 78,
+          aspect: BAND.aspect,
+          focus: 'faces',
+        });
+        return { src: picture.src, srcSet: picture.srcSet };
+      }),
+    [images]
+  );
+
+  useEffect(() => {
+    if (variant !== 'band') return;
+    const hero = bandRef.current;
+    if (!hero) return;
+
+    const read = () => {
+      const heroBox = hero.getBoundingClientRect();
+      const contentBox = contentRef.current?.getBoundingClientRect();
+      const ledeBox = ledeRef.current?.getBoundingClientRect();
+
+      const headline = contentBox ? contentBox.bottom - heroBox.top : heroBox.height * 0.35;
+      const lede = ledeBox
+        ? { top: ledeBox.top - heroBox.top, bottom: ledeBox.bottom - heroBox.top }
+        : null;
+
+      // Read the arrangement off the page rather than guessing it from the
+      // width: when the lede is pushed to the foot it leaves a wide gap under
+      // the headline, where from md it is only a margin away. The band then
+      // either fits between the two, or takes the room below both.
+      const stacked = lede !== null && lede.top - headline > 40;
+      const textBottom = stacked ? headline : lede ? lede.bottom : headline;
+      const footTop = stacked && lede ? lede.top : heroBox.height;
+
+      const next = measureBand(
+        heroBox.width,
+        heroBox.height,
+        textBottom,
+        footTop,
+        stacked,
+        bend
+      );
+
+      setLayout((prev) =>
+        prev?.columns === next.columns &&
+        prev.sweep === next.sweep &&
+        prev.unit === next.unit &&
+        prev.slices === next.slices &&
+        prev.axis === next.axis &&
+        prev.tilePct === next.tilePct
+          ? prev
+          : next
+      );
+    };
+
+    const observer = new ResizeObserver(read);
+    observer.observe(hero);
+    if (contentRef.current) observer.observe(contentRef.current);
+    if (ledeRef.current) observer.observe(ledeRef.current);
+
+    document.fonts?.ready.then(read).catch(() => {});
+
+    return () => observer.disconnect();
+  }, [variant, bend]);
+
+  const band = layout ?? measureBand(1200, 560, 200, 560, false, bend);
+  const cycles = tiles.length > band.columns;
+
+  useEffect(() => {
+    if (variant !== 'band') return;
+    for (const tile of tiles.slice(0, band.columns)) {
+      const preload = new window.Image();
+      preload.src = tile.src;
+    }
+  }, [variant, tiles, band.columns]);
+
   const titleParts = title && highlight ? title.split(highlight) : [title ?? ''];
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -105,10 +275,120 @@ const HeroSection = ({
     }, 1000);
   };
 
+  const orbit = `hero-orbit-${bandId}`;
+  const tileClass = `hero-tile-${bandId}`;
+  const radiusPct = 100 * arc(bend);
+  const radius = `${+radiusPct.toFixed(3)}cqw`;
+  const unitOf = (n: number) => `calc(${+n.toFixed(4)} * ${band.tilePct}cqh)`;
+  const turn = (degrees: number) =>
+    `translateZ(${radius}) rotateY(${+degrees.toFixed(4)}deg) translateZ(-${radius})`;
+  const vanish = +(((band.sweep - band.limit) / (2 * band.sweep || 1)) * 100).toFixed(4);
+  const duration = band.columns * BAND.speed;
+  const share = BAND.aspect / band.slices;
+  const bandMask = `linear-gradient(90deg,transparent,#000 ${BAND.fade}%,#000 ${100 - BAND.fade}%,transparent)`;
+  const sliceMask =
+    'linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.65) 7%,#000 20%,#000 80%,rgba(0,0,0,0.65) 93%,transparent 100%)';
+  const bandCss =
+    `@keyframes ${orbit}{` +
+    `from{transform:${turn(-band.sweep)}}to{transform:${turn(band.sweep)}}` +
+    `0%,${vanish}%,${100 - vanish}%,100%{visibility:hidden}` +
+    `${vanish + 0.001}%,${100 - vanish - 0.001}%{visibility:visible}}` +
+    `@media(prefers-reduced-motion:reduce){.${tileClass}{animation-play-state:paused}}`;
+
   return (
-    <div className='relative h-[60vh] md:h-[calc(100vh-var(--navbar-height))] w-full font-poppins flex items-center justify-center overflow-hidden bg-[#252638]'>
+    <div
+      ref={bandRef}
+      style={variant === 'band' ? { containerType: 'size' } : undefined}
+      className={`relative w-full font-poppins flex overflow-hidden md:h-[calc(100vh-var(--navbar-height))] ${
+        variant === 'band'
+          ? 'h-[53vh] min-h-[420px] md:min-h-0 flex-col items-center justify-start bg-white'
+          : 'h-[60vh] items-center justify-center bg-[#252638]'
+      }`}
+    >
+
+      {variant === 'band' ? (
+        <>
+          <style>{bandCss}</style>
+          <div
+            aria-hidden
+            className='pointer-events-none absolute inset-0 transition-opacity duration-500'
+            style={{
+              opacity: layout ? 1 : 0,
+              perspective: `${+(radiusPct * CAMERA).toFixed(3)}cqw`,
+              perspectiveOrigin: `50% ${band.axis}%`,
+              maskImage: bandMask,
+              WebkitMaskImage: bandMask,
+            }}
+          >
+            {Array.from({ length: band.columns }, (_, t) => {
+              const first = band.columns - 1 - t;
+              const tile = tiles[(shown[t] ?? first) % Math.max(tiles.length, 1)];
 
-      {/* Background Image Carousel */}
+              return (
+                <div
+                  key={t}
+                  className={`${tileClass} absolute`}
+                  style={{
+                    left: `calc(50% - ${unitOf(BAND.aspect / 2)})`,
+                    top: `calc(${band.axis}% - ${unitOf(0.5)})`,
+                    width: unitOf(BAND.aspect),
+                    height: unitOf(1),
+                    transformStyle: 'preserve-3d',
+                    animation: `${orbit} ${duration}s linear ${-t * BAND.speed}s infinite`,
+                  }}
+                  onAnimationIteration={
+                    cycles
+                      ? (event) => {
+                          const lap = Math.round(event.elapsedTime / duration);
+                          setShown((prev) => {
+                            const next = lap * band.columns + first;
+                            return prev[t] === next ? prev : { ...prev, [t]: next };
+                          });
+                        }
+                      : undefined
+                  }
+                >
+                  {Array.from({ length: band.slices }, (_, k) => (
+                    <div
+                      key={k}
+                      className='absolute top-0 overflow-hidden'
+                      style={{
+                        maskImage: sliceMask,
+                        WebkitMaskImage: sliceMask,
+                        backfaceVisibility: 'hidden',
+                        left: unitOf((BAND.aspect - share) / 2),
+                        width:
+                          k === band.slices - 1
+                            ? unitOf(share)
+                            : `calc(${unitOf(share)} + 1px)`,
+                        height: unitOf(1),
+                        transform: turn((BAND.aspect / 2 - (k + 0.5) * share) * band.unit),
+                      }}
+                    >
+                      {tile ? (
+                        <img
+                          src={tile.src}
+                          srcSet={tile.srcSet || undefined}
+                          sizes='(max-width: 768px) 55vw, 30vw'
+                          alt=''
+                          draggable={false}
+                          decoding='async'
+                          className='absolute top-0 max-w-none object-cover'
+                          style={{
+                            left: unitOf(-k * share),
+                            width: unitOf(BAND.aspect),
+                            height: unitOf(1),
+                          }}
+                        />
+                      ) : null}
+                    </div>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        </>
+      ) : (
       <Carousel
         plugins={[plugin.current]}
         setApi={setApi}
@@ -155,12 +435,13 @@ const HeroSection = ({
           ))}
         </CarouselContent>
       </Carousel>
+      )}
 
-      {/* Overlay */}
-      <div className={`absolute inset-0 ${overlayOpacity} z-10`} />
+      {variant !== 'band' && <div className={`absolute inset-0 ${overlayOpacity} z-10`} />}
 
       {/* Content */}
       <motion.div
+        ref={contentRef}
         initial="hidden"
         animate="visible"
         variants={{
@@ -175,7 +456,11 @@ const HeroSection = ({
             }
           }
         }}
-        className='relative z-20 flex flex-col items-center justify-center text-white px-4 text-center max-w-360 mx-auto gap-2 md:-mt-32'
+        className={`relative z-20 flex flex-col items-center justify-center px-4 text-center max-w-360 mx-auto gap-3 ${
+          variant === 'band'
+            ? 'w-full text-[#252638] pt-[2vh] md:pt-[3vh]'
+            : 'text-white md:-mt-32'
+        }`}
       >
         <motion.h1
           variants={{
@@ -189,17 +474,19 @@ const HeroSection = ({
           {titleParts[1]}
         </motion.h1>
 
-        <motion.p
-          variants={{
-            hidden: { opacity: 0, y: 20 },
-            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
-          }}
-          className='text-sm sm:text-lg md:text-xl max-w-3xl mx-auto'
-        >
-          {text}
-        </motion.p>
+        {variant !== 'band' && (
+          <motion.p
+            variants={{
+              hidden: { opacity: 0, y: 20 },
+              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+            }}
+            className='text-sm sm:text-lg md:text-xl max-w-3xl mx-auto'
+          >
+            {text}
+          </motion.p>
+        )}
 
-        {button && (
+        {button && variant !== 'band' && (
           <motion.div
             variants={{
               hidden: { opacity: 0, y: 20 },
@@ -219,7 +506,19 @@ const HeroSection = ({
         )}
       </motion.div>
 
-      {/* Progress Dots */}
+      {variant === 'band' && (
+        <motion.p
+          ref={ledeRef}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.25, ease: 'easeOut' }}
+          className='relative z-20 w-full px-4 text-center max-w-3xl mx-auto text-[#252638] mt-auto pb-[3vh] text-sm sm:text-lg md:text-xl md:mt-3 md:pb-0'
+        >
+          {text}
+        </motion.p>
+      )}
+
+      {variant !== 'band' && (
       <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-30">
         <div className="flex gap-x-2">
           {Array.from({ length: count }).map((_, index) => (
@@ -232,6 +531,7 @@ const HeroSection = ({
           ))}
         </div>
       </div>
+      )}
 
     </div >
   );
diff --git a/components/home/ProvostSection.tsx b/components/home/ProvostSection.tsx
index ef810d2..31486e6 100644
--- a/components/home/ProvostSection.tsx
+++ b/components/home/ProvostSection.tsx
@@ -3,133 +3,73 @@
 import Image from 'next/image';
 import { motion } from 'framer-motion';
 import Container from '../custom/Container';
-import { Award, BookOpen, GraduationCap, Briefcase } from 'lucide-react';
 
-const ProvostSection = () => {
-    const highlights = [
-        {
-            icon: <GraduationCap className="w-5 h-5" />,
-            text: "30 Years Experience",
-            label: "Teaching & Research"
-        },
-        {
-            icon: <Award className="w-5 h-5" />,
-            text: "Provost",
-            label: "College of Engineering"
-        },
-        {
-            icon: <BookOpen className="w-5 h-5" />,
-            text: "100+ Publications",
-            label: "Peer-reviewed Journals"
-        },
-        {
-            icon: <Briefcase className="w-5 h-5" />,
-            text: "Patron",
-            label: "GESA-KNUST"
-        }
-    ];
+const rise = {
+    hidden: { opacity: 0, y: 24 },
+    visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 100, damping: 20 } },
+};
 
+const ProvostSection = () => {
     return (
-        <section className="py-24 bg-gradient-to-b from-white to-gray-50 overflow-hidden">
-            <Container size="xl">
-                <div className="flex flex-col lg:flex-row items-start gap-16 lg:gap-24">
-                    <motion.div
-                        initial={{ opacity: 0, x: -50 }}
-                        whileInView={{ opacity: 1, x: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.8, ease: "easeOut" }}
-                        className="relative w-full lg:w-1/2 flex flex-col gap-12 lg:-mt-4"
-                    >
-                        <div className="relative group">
-                            <div className="absolute -inset-4 bg-primary/10 rounded-[2.5rem] -rotate-3 transition-transform group-hover:rotate-0 duration-500" />
-                            <div className="absolute -inset-4 border-2 border-primary/20 rounded-[2.5rem] rotate-2 transition-transform group-hover:rotate-0 duration-500" />
-
-                            <div className="relative h-[500px] sm:h-[600px] w-full rounded-2xl overflow-hidden shadow-2xl z-10">
-                                <Image
-                                    src="/images/Provost.webp"
-                                    alt="Professor Kwabena Biritwum Nyarko"
-                                    fill
-                                    className="object-cover transition-transform duration-700 group-hover:scale-105"
-                                    priority
-                                />
-                                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                            </div>
-
-                            <motion.div
-                                initial={{ opacity: 0, scale: 0.8, rotate: 12 }}
-                                whileInView={{ opacity: 1, scale: 1, rotate: 12 }}
-                                viewport={{ once: true }}
-                                transition={{ delay: 0.5, duration: 0.5 }}
-                                className="absolute -bottom-6 -right-6 bg-white p-6 rounded-3xl shadow-2xl z-20 border border-gray-100 hidden md:block"
-                            >
-                                <p className="text-primary font-bold text-lg mb-1">GESA Patron</p>
-                                <p className="text-gray-500 text-sm font-medium leading-tight">Celebrating Excellence &<br />Leadership at KNUST</p>
-                            </motion.div>
-                        </div>
+        <section className="py-14 md:py-24 bg-white">
+            <Container size="xl" className="!py-0">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, amount: 0.15 }}
+                    variants={{ hidden: {}, visible: { transition: { staggerChildren: 0.12 } } }}
+                    className="flex flex-col gap-10 md:gap-14"
+                >
+                    <div className="w-full flex flex-col gap-5">
+                        <motion.div variants={rise} className="text-center">
+                            <span className="inline-block bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wider">
+                                GESA Patron
+                            </span>
+                        </motion.div>
 
-                        <div className="grid grid-cols-2 gap-4 pt-4">
-                            {highlights.map((item, index) => (
-                                <motion.div
-                                    key={index}
-                                    initial={{ opacity: 0, y: 20 }}
-                                    whileInView={{ opacity: 1, y: 0 }}
-                                    viewport={{ once: true }}
-                                    transition={{ delay: 0.4 + (index * 0.1) }}
-                                    className="p-4 bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-shadow"
-                                >
-                                    <div className="text-primary mb-2 bg-primary/5 w-fit p-2 rounded-lg">
-                                        {item.icon}
-                                    </div>
-                                    <p className="font-bold text-gray-900 group-hover:text-primary transition-colors">
-                                        {item.text}
-                                    </p>
-                                    <p className="text-xs text-gray-500 font-medium uppercase tracking-wider">
-                                        {item.label}
-                                    </p>
-                                </motion.div>
-                            ))}
-                        </div>
-                    </motion.div>
+                        <motion.h2
+                            variants={rise}
+                            className="text-center font-header font-bold text-gray-900 text-3xl sm:text-4xl md:text-5xl"
+                        >
+                            Prof. Kwabena Biritwum Nyarko
+                        </motion.h2>
 
-                    {/* Content */}
-                    <div className="w-full lg:w-1/2 space-y-8">
-                        <motion.div
-                            initial={{ opacity: 0, y: 30 }}
-                            whileInView={{ opacity: 1, y: 0 }}
-                            viewport={{ once: true }}
-                            className="space-y-4"
+                        <motion.p
+                            variants={rise}
+                            className="text-center text-base sm:text-lg md:text-xl text-gray-500"
                         >
-                            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-bold tracking-wider uppercase">
-                                <Award className="w-4 h-4" />
-                                GESA PATRON
-                            </div>
-                            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-gray-900 font-header leading-[1.1]">
-                                Prof. Kwabena <span className="text-primary">Biritwum Nyarko</span>
-                            </h2>
-                            <p className="text-xl md:text-2xl text-gray-600 font-medium">
-                                Provost, College of Engineering — KNUST
-                            </p>
-                        </motion.div>
+                            Provost, College of Engineering &mdash; KNUST
+                        </motion.p>
 
                         <motion.div
-                            initial={{ opacity: 0, y: 30 }}
-                            whileInView={{ opacity: 1, y: 0 }}
-                            viewport={{ once: true }}
-                            transition={{ delay: 0.2 }}
-                            className="prose prose-lg text-gray-600 max-w-none space-y-4"
+                            variants={rise}
+                            className="text-base sm:text-lg leading-relaxed text-gray-700 mt-2 lg:columns-2 lg:gap-14"
                         >
-                            <p className="leading-relaxed">
+                            <p className="mb-4 break-inside-avoid">
                                 {`Professor Kwabena Biritwum Nyarko is a Professor at the Civil Engineering Department of Kwame Nkrumah University of Science and Technology, Kumasi, Ghana. He has 30 years of teaching and research experience in Water and Sanitation. His research focuses on water transport and distribution, sanitation technologies, and sustainable water and sanitation service delivery.`}
                             </p>
-                            <p className="leading-relaxed hidden sm:block">
+                            <p className="mb-4 break-inside-avoid">
                                 {`He is the Provost of the College of Engineering at KNUST and a valued member of the Regional Water and Sanitation Centre, Kumasi (RWESCK). He serves on the Board of the Engineering Council of Ghana and is a Council member of the Ghana Institution of Engineers.`}
                             </p>
-                            <p className="leading-relaxed italic text-sm text-gray-500">
+                            <p className="text-sm sm:text-base text-gray-500 break-inside-avoid">
                                 {`Prof Nyarko has over one hundred (100) publications in peer-reviewed journals, conference proceedings, and technical reports.`}
                             </p>
                         </motion.div>
                     </div>
-                </div>
+
+                    <motion.div
+                        variants={rise}
+                        className="relative w-full aspect-4/3 sm:aspect-3/2 rounded-3xl overflow-hidden shadow-xl border border-slate-100 bg-white"
+                    >
+                        <Image
+                            src="/images/Provost.webp"
+                            alt="Professor Kwabena Biritwum Nyarko, Provost of the College of Engineering, KNUST"
+                            fill
+                            className="object-cover object-[50%_35%]"
+                            sizes="(max-width: 1024px) 100vw, 1152px"
+                        />
+                    </motion.div>
+                </motion.div>
             </Container>
         </section>
     );
diff --git a/components/home/RecentEvent.tsx b/components/home/RecentEvent.tsx
index 59c714c..adcc984 100644
--- a/components/home/RecentEvent.tsx
+++ b/components/home/RecentEvent.tsx
@@ -71,7 +71,7 @@ const RecentEvent = ({ initialEvents }: { initialEvents?: EventItem[] }) => {
 
             <Tabs.Content value="upcoming" className="outline-none">
               <div className="flex flex-col gap-6">
-                <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-6">
                   {upcoming && upcoming.length > 0 ? (
                     upcoming.map((event) => (
                       <EventCard key={event._id} event={event} type="upcoming" />
@@ -85,7 +85,7 @@ const RecentEvent = ({ initialEvents }: { initialEvents?: EventItem[] }) => {
             </Tabs.Content>
 
             <Tabs.Content value="recent" className="outline-none">
-              <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-6">
                 {recent && recent.length > 0 ? (
                   recent.map((event) => (
                     <EventCard key={event._id} event={event} type="recent" />
@@ -99,14 +99,14 @@ const RecentEvent = ({ initialEvents }: { initialEvents?: EventItem[] }) => {
         </div>
 
         {/* Desktop View */}
-        <div className="hidden lg:grid lg:grid-cols-[1.2fr_auto_1fr] gap-12">
+        <div className="hidden lg:grid lg:grid-cols-[1.2fr_auto_1fr] gap-8 xl:gap-12">
           {/* Upcoming Events Column */}
-          <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-8 min-w-0">
             <h3 className="font-header font-bold text-4xl text-white">
               Upcoming Events
             </h3>
 
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-6">
               {upcoming && upcoming.length > 0 ? (
                 upcoming.map((event) => (
                   <EventCard key={event._id} event={event} type="upcoming" />
@@ -125,7 +125,7 @@ const RecentEvent = ({ initialEvents }: { initialEvents?: EventItem[] }) => {
           </div>
 
           {/* Recent Events Column */}
-          <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-8 min-w-0">
             <div className="flex items-center justify-between">
               <h3 className="font-header font-bold text-4xl text-white flex items-center gap-3">
                 Recent Events
@@ -151,55 +151,42 @@ const RecentEvent = ({ initialEvents }: { initialEvents?: EventItem[] }) => {
 };
 
 const EventCard = ({ event, type }: { event: any; type: 'upcoming' | 'recent' }) => {
-  if (type === 'upcoming') {
-    return (
-      <Link href={`/events#event-${event.slug}`} className="group block w-full">
-        <div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-white/95 backdrop-blur-sm dark:bg-card hover:bg-white dark:hover:bg-accent/50 rounded-2xl border-2 border-transparent hover:border-primary/30 transition-all duration-300 group-hover:scale-[1.02] shadow-sm">
-          <div className="flex flex-col items-center justify-center w-14 h-14 lg:w-16 lg:h-16 rounded-xl bg-primary/10 text-primary border border-primary/20 shrink-0">
-            <span className="text-[10px] lg:text-xs font-bold uppercase tracking-wider">
-              {format(new Date(event.eventDate), "MMM")}
-            </span>
-            <span className="text-xl lg:text-2xl font-bold font-open_sans leading-none">
-              {format(new Date(event.eventDate), "d")}
-            </span>
-          </div>
-
-          <div className="flex-1 min-w-0">
-            <h3 className="font-bold text-gray-900 dark:text-gray-100 line-clamp-2 group-hover:text-primary transition-colors font-header text-base sm:text-lg">
-              {event.title}
-            </h3>
-            <p className="text-xs text-muted-foreground line-clamp-2 mt-1">
-              <span className="whitespace-pre-wrap">{event.description}</span>
-            </p>
-          </div>
-
-          <div className="text-muted-foreground shrink-0 group-hover:text-primary transition-transform duration-300 group-hover:translate-x-1">
-            <ArrowRight className="w-5 h-5" />
-          </div>
-        </div>
-      </Link>
-    );
-  }
+  const upcoming = type === 'upcoming';
 
   return (
     <Link href={`/events#event-${event.slug}`} className="group block w-full">
       <div className="bg-white/95 backdrop-blur-sm dark:bg-card border-2 border-transparent hover:border-primary/30 shadow-sm hover:shadow-2xl transition-all duration-300 rounded-2xl sm:rounded-3xl overflow-hidden flex flex-row items-stretch gap-3 sm:gap-4 p-3 group-hover:-translate-y-1">
         <div className="relative shrink-0 w-20 sm:w-28 lg:w-24 xl:w-32 aspect-square rounded-xl overflow-hidden bg-gray-100">
-          <Image
-            src={ctfSrc(event.eventImage.url, 256, { height: 256 })}
-            alt=""
-            className="object-cover transition-transform duration-700 group-hover:scale-110"
-            fill
-            sizes="(max-width: 640px) 80px, (max-width: 1024px) 112px, 128px"
+          {event.eventImage?.url ? (
+            <Image
+              src={ctfSrc(event.eventImage.url, 256, { height: 256 })}
+              alt=""
+              className="object-cover transition-transform duration-700 group-hover:scale-110"
+              fill
+              sizes="(max-width: 640px) 80px, (max-width: 1024px) 112px, 128px"
               unoptimized
-          />
+            />
+          ) : (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-primary/10 text-primary">
+              <span className="text-[10px] font-bold uppercase tracking-wider">
+                {format(new Date(event.eventDate), "MMM")}
+              </span>
+              <span className="text-2xl font-bold font-open_sans leading-none">
+                {format(new Date(event.eventDate), "d")}
+              </span>
+            </div>
+          )}
           <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
         </div>
 
         <div className="flex flex-col flex-1 min-w-0 gap-1">
           <div className="flex items-center gap-1.5 text-primary font-bold text-[10px] uppercase tracking-widest">
-            <Clock className="w-3 h-3 shrink-0" />
-            completed
+            {upcoming ? (
+              <CalendarDays className="w-3 h-3 shrink-0" />
+            ) : (
+              <Clock className="w-3 h-3 shrink-0" />
+            )}
+            {upcoming ? 'up next' : 'completed'}
           </div>
 
           <h3 className="font-header font-bold text-sm sm:text-lg text-gray-900 line-clamp-2 group-hover:text-primary transition-colors leading-tight">
@@ -207,7 +194,7 @@ const EventCard = ({ event, type }: { event: any; type: 'upcoming' | 'recent' })
           </h3>
 
           <p className="text-gray-500 text-[11px] sm:text-sm line-clamp-2 leading-snug">
-            {event.description}
+            <span className="whitespace-pre-wrap">{event.description}</span>
           </p>
 
           <div className="flex items-center justify-between gap-2 mt-auto pt-1.5">
@@ -226,8 +213,7 @@ const EventCard = ({ event, type }: { event: any; type: 'upcoming' | 'recent' })
 };
 
 const JoinCommunityCard = () => (
-  <div className="mt-4 p-5 lg:p-8 bg-linear-to-br from-gray-900 to-black rounded-3xl text-white relative overflow-hidden group border border-white/10 shadow-2xl">
-    <div className="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -mr-16 -mt-16 transition-all duration-500 group-hover:bg-primary/30"></div>
+  <div className="mt-4 p-5 lg:p-8 bg-linear-to-br from-gray-900 to-black rounded-3xl text-white relative overflow-hidden group border border-white/10">
     <div className="relative z-10">
       <h3 className="font-bold text-xl lg:text-2xl mb-2 font-header">Join the Community</h3>
       <p className="text-gray-400 text-sm mb-6 leading-relaxed">Don&apos;t miss out on future events and opportunities from the biggest engineering body on campus.</p>