561 lines
33 KiB
JavaScript
561 lines
33 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
import DocsCallout from '../../components/docs/DocsCallout'
|
|
import DocsComparisonTable from '../../components/docs/DocsComparisonTable'
|
|
import DocsFaqAccordion from '../../components/docs/DocsFaqAccordion'
|
|
import DocsSection from '../../components/docs/DocsSection'
|
|
import DocsSidebarNav from '../../components/docs/DocsSidebarNav'
|
|
import DocsStepList from '../../components/docs/DocsStepList'
|
|
import {
|
|
BENEFITS,
|
|
BEST_PRACTICES,
|
|
COMMON_MISTAKES,
|
|
CREATE_STEPS,
|
|
FAQ_ITEMS,
|
|
FEATURE_CARDS,
|
|
GOOD_FIT,
|
|
NOT_YET,
|
|
ROLE_TABLE,
|
|
SECTION_ITEMS,
|
|
STUDIO_AREAS,
|
|
TROUBLESHOOTING_ITEMS,
|
|
WORKFLOWS,
|
|
} from './groupHelpContent'
|
|
|
|
function HeroMetric({ label, value, note }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{value}</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-400">{note}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TwoColumnChecklist({ title, eyebrow, items, tone = 'sky' }) {
|
|
const toneClass = tone === 'emerald'
|
|
? 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100'
|
|
: 'border-sky-300/15 bg-sky-400/10 text-sky-100'
|
|
|
|
return (
|
|
<div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{eyebrow}</p>
|
|
<h3 className="mt-2 text-xl font-semibold text-white">{title}</h3>
|
|
<div className="mt-4 space-y-3">
|
|
{items.map((item) => (
|
|
<div key={item} className="flex gap-3">
|
|
<span className={`mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border ${toneClass}`}>
|
|
<i className="fa-solid fa-check text-[10px]" />
|
|
</span>
|
|
<p className="text-sm leading-6 text-slate-300">{item}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InfoCard({ title, body, icon }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-5">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-sky-200">
|
|
<i className={icon} />
|
|
</div>
|
|
<h3 className="mt-4 text-lg font-semibold text-white">{title}</h3>
|
|
<p className="mt-2 text-sm leading-7 text-slate-300">{body}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BulletGrid({ items }) {
|
|
return (
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
{items.map((item) => (
|
|
<div key={item} className="rounded-[24px] border border-white/10 bg-black/20 p-4 text-sm leading-6 text-slate-300">
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function WorkflowCard({ workflow }) {
|
|
return (
|
|
<article className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
|
<h3 className="text-xl font-semibold text-white">{workflow.title}</h3>
|
|
<p className="mt-3 text-sm leading-7 text-slate-300">{workflow.summary}</p>
|
|
<ul className="mt-4 space-y-2">
|
|
{workflow.bullets.map((bullet) => (
|
|
<li key={bullet} className="flex gap-3 text-sm leading-6 text-slate-300">
|
|
<span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-sky-300" />
|
|
<span>{bullet}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
function TroubleCard({ item }) {
|
|
return (
|
|
<article className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
|
<h3 className="text-lg font-semibold text-white">{item.title}</h3>
|
|
<p className="mt-3 text-sm leading-7 text-slate-300">{item.body}</p>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default function GroupHelpPage() {
|
|
const { props } = usePage()
|
|
const links = props.links || {}
|
|
const heroJsonLd = [
|
|
{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Article',
|
|
headline: 'Groups Help & Guide',
|
|
description: props.description,
|
|
url: props.seo?.canonical,
|
|
author: {
|
|
'@type': 'Organization',
|
|
name: 'Skinbase',
|
|
},
|
|
about: ['Groups', 'Collaborative publishing', 'Contributor credit', 'Group Studio', 'Releases'],
|
|
},
|
|
{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
mainEntity: FAQ_ITEMS.map((item) => ({
|
|
'@type': 'Question',
|
|
name: item.question,
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: item.answer,
|
|
},
|
|
})),
|
|
},
|
|
]
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(14,165,233,0.18),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(250,204,21,0.14),_transparent_22%),linear-gradient(180deg,_#020617_0%,_#030712_100%)] px-4 py-8 sm:px-6 lg:px-8">
|
|
<SeoHead seo={props.seo || {}} title={props.title} description={props.description} jsonLd={heroJsonLd} />
|
|
|
|
<div className="mx-auto max-w-[1500px]">
|
|
<section id="introduction" className="rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.92),rgba(15,23,42,0.72)),radial-gradient(circle_at_top_right,rgba(125,211,252,0.16),transparent_28%)] p-6 shadow-[0_30px_100px_rgba(2,6,23,0.35)] md:p-8 lg:p-10">
|
|
<div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_360px]">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Groups documentation</p>
|
|
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Build, manage, and publish through Groups without losing personal credit.</h1>
|
|
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Groups on Skinbase Nova are shared creative identities for studios, collectives, release teams, and long-term collaborations. This guide explains when to use them, how to structure roles, how publishing works, and how to keep the public page clear, trustworthy, and easy to maintain.</p>
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<a href={links.create_group} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18">Create a Group</a>
|
|
<a href={links.group_studio} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Open Group Studio</a>
|
|
<a href="#roles-and-permissions" className="rounded-full border border-white/10 bg-black/20 px-5 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Jump to roles and permissions</a>
|
|
</div>
|
|
{links.quickstart ? (
|
|
<div className="mt-4">
|
|
<a href={links.quickstart} className="text-sm font-semibold text-sky-200 underline underline-offset-4">
|
|
Prefer the shorter onboarding version? Open the Groups Quickstart.
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
{links.faq ? (
|
|
<div className="mt-2">
|
|
<a href={links.faq} className="text-sm font-semibold text-slate-300 underline underline-offset-4 hover:text-white">
|
|
Need faster answers instead? Open the Groups FAQ.
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
|
<HeroMetric label="Shared identity" value="One public home for team work" note="Use a Group when a studio, crew, or release team needs its own visible brand." />
|
|
<HeroMetric label="Preserved credit" value="Authorship stays visible" note="Published by, uploaded by, primary author, and contributors can still reflect the real humans behind the work." />
|
|
<HeroMetric label="Studio workflow" value="Roles, reviews, projects, releases" note="Groups work best when the team needs structure, not just a different display name." />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="mt-8 grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)] xl:grid-cols-[240px_minmax(0,1fr)_280px]">
|
|
<DocsSidebarNav sections={SECTION_ITEMS} />
|
|
|
|
<div className="space-y-6">
|
|
<DocsSection
|
|
id="what-are-groups"
|
|
eyebrow="Foundations"
|
|
title="What are Groups?"
|
|
summary="A Group is a shared creative identity for collaboration and publishing. It is not a replacement for personal profiles. It is the public home for work that belongs to a team, studio, collective, or release-focused collaboration."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<InfoCard title="Personal profile" icon="fa-solid fa-user" body="Your personal profile is your own portfolio, reputation, and identity. It is where your individual voice, uploads, followers, and personal presence live." />
|
|
<InfoCard title="Group" icon="fa-solid fa-people-group" body="A Group is the shared layer. It gives a team one public identity for publishing together, managing members, and presenting collaborative work without flattening individual credit." />
|
|
</div>
|
|
|
|
<DocsCallout tone="note" title="The most important rule">
|
|
A Group is a shared publishing identity, not a way to erase authorship. If real people made the work, their authorship and contribution history should still be represented clearly.
|
|
</DocsCallout>
|
|
|
|
<div className="mt-6 rounded-[28px] border border-white/10 bg-black/20 p-5">
|
|
<h3 className="text-xl font-semibold text-white">Groups are a good fit for</h3>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{['Design studios', 'Pixel art crews', 'Wallpaper teams', 'Photography collectives', 'Event-based collaborations', 'Release teams'].map((label) => (
|
|
<span key={label} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-slate-200">{label}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="why-use-a-group"
|
|
eyebrow="Decision guide"
|
|
title="Why use a Group?"
|
|
summary="Use a Group when the work is bigger than one person, or when a shared identity helps the team stay organized, trustworthy, and easy to understand publicly."
|
|
>
|
|
<BulletGrid items={BENEFITS} />
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="when-to-create-a-group"
|
|
eyebrow="Decision guide"
|
|
title="When should you create a Group?"
|
|
summary="Create a Group when it solves a real workflow or identity problem. If it is just adding overhead, you probably do not need it yet."
|
|
>
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<TwoColumnChecklist title="Create one when..." eyebrow="Good fit" items={GOOD_FIT} tone="emerald" />
|
|
<TwoColumnChecklist title="Hold off when..." eyebrow="Not yet" items={NOT_YET} tone="sky" />
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<DocsCallout tone="tip" title="A simple rule of thumb">
|
|
If the team needs shared publishing, shared coordination, or a shared public identity more than it needs absolute simplicity, a Group is probably worth it.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="how-groups-work"
|
|
eyebrow="Model"
|
|
title="How Groups work"
|
|
summary="Think of a Group as two connected surfaces: a public identity page and an internal Studio workspace. One is for visibility. The other is for coordination."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<InfoCard title="Group page" icon="fa-solid fa-earth-americas" body="The public face of the Group with branding, releases, posts, projects, challenges, events, members, and activity." />
|
|
<InfoCard title="Group Studio" icon="fa-solid fa-sliders" body="The internal workspace for permissions, publishing, review flows, releases, assets, invites, and day-to-day operations." />
|
|
<InfoCard title="Shared content" icon="fa-solid fa-layer-group" body="Groups can own artworks, collections, posts, projects, challenges, events, assets, and releases depending on the team workflow." />
|
|
<InfoCard title="Public vs internal" icon="fa-solid fa-lock-open" body="Not everything is public. Some areas are internal, role-based, or review-gated. The public page should be curated. Studio should stay operational." />
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="roles-and-permissions"
|
|
eyebrow="Team structure"
|
|
title="Roles and permissions"
|
|
summary="Keep roles understandable. Most Groups do best when only a small number of people can change settings or manage members, while everyone else gets exactly the access they need and nothing more."
|
|
>
|
|
<DocsCallout tone="practice" title="Start simpler than you think">
|
|
Most new Groups should begin with one Owner, a very small Admin circle, Editors for day-to-day managers, and Contributors for creative participation. Complexity is easier to add later than remove.
|
|
</DocsCallout>
|
|
|
|
<div className="mt-6">
|
|
<DocsComparisonTable columns={ROLE_TABLE.columns} rows={ROLE_TABLE.rows} caption="Group role comparison" />
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="creating-a-group"
|
|
eyebrow="Setup"
|
|
title="Creating a Group"
|
|
summary="A strong first setup prevents confusion later. Good names, clean branding, and clear role assignments make every other workflow easier."
|
|
>
|
|
<DocsStepList items={CREATE_STEPS} />
|
|
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
|
<DocsCallout tone="practice" title="Setup tips">
|
|
Choose a name that will still make sense when the Group grows. Add a short description that says what the Group makes, not just what it likes.
|
|
</DocsCallout>
|
|
<DocsCallout tone="warning" title="Do not skip ownership decisions">
|
|
Decide early who should be Owner and who truly needs Admin. Teams create a lot of avoidable friction when this stays vague.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="public-group-page"
|
|
eyebrow="Public identity"
|
|
title="Group profile and public page"
|
|
summary="The public Group page is the identity page for the team. It should feel active, coherent, and curated instead of looking like a random collection of leftovers."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{['Cover and avatar', 'Description and About', 'Members and leadership', 'Artworks and collections', 'Posts and announcements', 'Projects, challenges, events, releases'].map((item) => (
|
|
<div key={item} className="rounded-[24px] border border-white/10 bg-black/20 p-4 text-sm font-medium text-slate-200">{item}</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<DocsCallout tone="tip" title="Keep the page feeling alive">
|
|
Use a consistent visual identity, keep the About copy current, feature the best work, and pin only the update that gives new visitors the best context.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="group-studio"
|
|
eyebrow="Operations"
|
|
title="Group Studio"
|
|
summary="Group Studio is where you switch from being an individual creator to operating inside a shared team context. That context matters every time you publish, review, or manage content."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<InfoCard title="Personal Studio" icon="fa-solid fa-user-gear" body="Use Personal Studio when you are managing your own portfolio, drafts, uploads, and audience as an individual creator." />
|
|
<InfoCard title="Group Studio" icon="fa-solid fa-people-roof" body="Use Group Studio when the work belongs to the shared identity, or when roles, reviews, projects, releases, and member access need to be respected." />
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<BulletGrid items={STUDIO_AREAS} />
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<DocsCallout tone="warning" title="Check context before publishing">
|
|
The easiest way to create confusing attribution is to publish from the wrong context. If the work belongs to the Group, confirm that Group Studio is active before you submit or publish.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="publishing-as-a-group"
|
|
eyebrow="Publishing"
|
|
title="Publishing as a Group"
|
|
summary="Publishing as a Group means the shared identity is the public publish surface. It does not mean the Group replaces every human role in the record."
|
|
>
|
|
<div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
|
<h3 className="text-xl font-semibold text-white">How to read the publishing record</h3>
|
|
<div className="mt-4 grid gap-3 md:grid-cols-2">
|
|
<div className="rounded-[22px] border border-white/10 bg-white/[0.03] p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Published by</div>
|
|
<div className="mt-2 text-base font-semibold text-white">Warlock</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">The shared identity the work appears under publicly.</p>
|
|
</div>
|
|
<div className="rounded-[22px] border border-white/10 bg-white/[0.03] p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Uploaded by</div>
|
|
<div className="mt-2 text-base font-semibold text-white">Gregor</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">The person who performed the upload or publishing action.</p>
|
|
</div>
|
|
<div className="rounded-[22px] border border-white/10 bg-white/[0.03] p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Primary author</div>
|
|
<div className="mt-2 text-base font-semibold text-white">Gregor</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">The person who should be understood as the main author of the work.</p>
|
|
</div>
|
|
<div className="rounded-[22px] border border-white/10 bg-white/[0.03] p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Contributors</div>
|
|
<div className="mt-2 text-base font-semibold text-white">Denis, Paula</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">Additional people who made meaningful creative contributions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
|
<DocsCallout tone="note" title="Why this matters">
|
|
Group publishing creates a shared public identity for the work, but personal authorship, accountability, and contribution history should still be easy to understand.
|
|
</DocsCallout>
|
|
<DocsCallout tone="warning" title="Do not use Group publishing to hide authorship">
|
|
If the work is mainly one person\'s piece, make sure the primary author and contributors reflect that reality clearly.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="contributor-credit"
|
|
eyebrow="Attribution"
|
|
title="Contributor credit and authorship"
|
|
summary="Correct attribution keeps the Group healthy. It builds trust inside the team, makes the public record clearer, and reduces avoidable disputes later."
|
|
>
|
|
<BulletGrid items={[
|
|
'Always credit real contributors, even when the Group brand is stronger than any single member.',
|
|
'Use role labels when they add clarity, such as packaging lead, curator, reviewer, or art director.',
|
|
'Do not swap uploader and author just because one person clicked Publish.',
|
|
'Discuss credits early for bigger releases so nobody is negotiating attribution after launch day.',
|
|
]} />
|
|
|
|
<div className="mt-6">
|
|
<DocsCallout tone="warning" title="Incorrect credit causes real friction">
|
|
Attribution problems are rarely just metadata problems. They affect trust, morale, and how future collaborators feel about the Group.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="member-management"
|
|
eyebrow="Team health"
|
|
title="Inviting members and managing the team"
|
|
summary="Healthy Groups are clear about who has access, why they have it, and how that access changes as the team grows."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<InfoCard title="Invites and onboarding" icon="fa-solid fa-user-plus" body="Invite people with the smallest role that still lets them do the work. Explain expectations before they accept so there is no ambiguity about ownership or workflow." />
|
|
<InfoCard title="Role reviews" icon="fa-solid fa-user-check" body="Review roles periodically. People change, projects end, and old permissions should not stay permanent by accident." />
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
|
<DocsCallout tone="practice" title="Role assignment guidance">
|
|
Keep Owner count very limited, give Admin only to trusted operators, use Editor for content managers, and keep Contributor focused on creation.
|
|
</DocsCallout>
|
|
<DocsCallout tone="note" title="Join requests and recruiting">
|
|
If your Group supports join requests or recruiting, use them with a real onboarding process. Recruiting without follow-through makes the Group feel abandoned.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="review-workflow"
|
|
eyebrow="Quality control"
|
|
title="Review queue and approval workflow"
|
|
summary="Review flows help larger or more structured Groups keep public quality high without forcing every trusted team to work the same way."
|
|
>
|
|
<DocsStepList
|
|
items={[
|
|
{ title: 'Contributor submits a draft', description: 'The work enters the Group pipeline without immediately going public.' },
|
|
{ title: 'Reviewer checks the work', description: 'Editors, admins, or designated reviewers confirm quality, context, and credit.' },
|
|
{ title: 'Approve, request changes, or reject', description: 'Feedback should be specific enough that the creator knows what to do next.' },
|
|
{ title: 'Publish when ready', description: 'Once the draft is approved, the right person can publish it under the correct Group context.' },
|
|
]}
|
|
/>
|
|
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
|
<DocsCallout tone="tip" title="When direct publishing makes sense">
|
|
Small, trusted teams often move faster with direct publishing. Use review only when it protects quality or reduces confusion.
|
|
</DocsCallout>
|
|
<DocsCallout tone="practice" title="When review-first helps">
|
|
Larger teams, new contributors, and release-heavy groups usually benefit from a review queue because it catches context, permission, and attribution mistakes before they go public.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="group-features"
|
|
eyebrow="Feature ecosystem"
|
|
title="Posts, projects, challenges, events, assets, and releases"
|
|
summary="These features are most useful when they connect. A healthy Group does not use them all at once. It chooses the smallest set that makes the public story and internal workflow clearer."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{FEATURE_CARDS.map((card, index) => (
|
|
<InfoCard key={card.title} title={card.title} body={card.body} icon={['fa-solid fa-diagram-project', 'fa-solid fa-bullseye', 'fa-solid fa-calendar-day', 'fa-solid fa-box-open', 'fa-solid fa-rocket', 'fa-solid fa-bullhorn'][index]} />
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<DocsCallout tone="note" title="A practical progression">
|
|
Many teams start with artworks and posts, then add projects when collaboration gets busier, and use releases when the Group is ready for stronger public storytelling around major drops.
|
|
</DocsCallout>
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="tips-and-best-practices"
|
|
eyebrow="Operating well"
|
|
title="Tips and best practices"
|
|
summary="Most support questions come from a small set of preventable mistakes. These habits keep Groups easier to manage and easier to trust."
|
|
>
|
|
<BulletGrid items={BEST_PRACTICES} />
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="common-mistakes"
|
|
eyebrow="Avoid these"
|
|
title="Common mistakes to avoid"
|
|
summary="Groups become confusing when identity, permissions, and attribution drift out of sync."
|
|
>
|
|
<DocsCallout tone="warning" title="The fastest way to make a Group feel unreliable">
|
|
Mix unclear roles with vague attribution and inconsistent publishing context. Users will stop trusting what they are looking at.
|
|
</DocsCallout>
|
|
|
|
<div className="mt-6 grid gap-3 md:grid-cols-2">
|
|
{COMMON_MISTAKES.map((item) => (
|
|
<div key={item} className="rounded-[24px] border border-white/10 bg-black/20 p-4 text-sm leading-6 text-slate-300">{item}</div>
|
|
))}
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="suggested-workflows"
|
|
eyebrow="Patterns"
|
|
title="Suggested workflows"
|
|
summary="You do not need one perfect workflow. You need the right amount of structure for the team you actually have."
|
|
>
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
{WORKFLOWS.map((workflow) => <WorkflowCard key={workflow.title} workflow={workflow} />)}
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="faq"
|
|
eyebrow="FAQ"
|
|
title="Frequently asked questions"
|
|
summary="Short answers to the questions people most often ask before creating, joining, or managing a Group."
|
|
>
|
|
<DocsFaqAccordion items={FAQ_ITEMS} />
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="troubleshooting"
|
|
eyebrow="Troubleshooting"
|
|
title="Common problems and how to think through them"
|
|
summary="If something feels confusing, start with context, role, and visibility. Most Group issues live in one of those three buckets."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{TROUBLESHOOTING_ITEMS.map((item) => <TroubleCard key={item.title} item={item} />)}
|
|
</div>
|
|
</DocsSection>
|
|
|
|
<DocsSection
|
|
id="need-help"
|
|
eyebrow="Support"
|
|
title="Still need help?"
|
|
summary="Use these next steps if you are ready to create a Group, need to check your current setup, or want to contact Skinbase support."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<a href={links.create_group} className="rounded-[28px] border border-sky-300/20 bg-sky-300/10 p-5 transition hover:border-sky-300/35 hover:bg-sky-300/15">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100/80">Create</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">Create your first Group</div>
|
|
<p className="mt-3 text-sm leading-6 text-sky-50/80">Start with branding, visibility, and your first member invites.</p>
|
|
</a>
|
|
<a href={links.group_studio} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Manage</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">Open Group Studio</div>
|
|
<p className="mt-3 text-sm leading-6 text-slate-300">Check members, workflow, releases, recruitment, and review status.</p>
|
|
</a>
|
|
<a href={links.contact_support} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Contact</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">Contact support</div>
|
|
<p className="mt-3 text-sm leading-6 text-slate-300">Use the general support flow if you need help untangling an account or workflow issue.</p>
|
|
</a>
|
|
<a href={links.report_issue} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Report</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">Report a problem</div>
|
|
<p className="mt-3 text-sm leading-6 text-slate-300">Use this if a route, permission, credit record, or workflow appears broken.</p>
|
|
</a>
|
|
</div>
|
|
</DocsSection>
|
|
</div>
|
|
|
|
<aside className="hidden xl:block xl:sticky xl:top-24 xl:self-start">
|
|
<div className="space-y-4 rounded-[28px] border border-white/10 bg-white/[0.03] p-5 shadow-[0_18px_50px_rgba(2,6,23,0.22)]">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Quick actions</p>
|
|
<div className="mt-4 space-y-2">
|
|
<a href={links.groups_directory} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Browse public Groups</a>
|
|
<a href={links.group_studio} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Open Group Studio</a>
|
|
{links.faq ? <a href={links.faq} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Open Groups FAQ</a> : null}
|
|
<a href="#publishing-as-a-group" className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Review publishing guidance</a>
|
|
<a href="#contributor-credit" className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Check contributor credit rules</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[24px] border border-amber-300/20 bg-amber-400/10 p-4 text-amber-50">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">Read this before launch day</div>
|
|
<p className="mt-2 text-sm leading-6 text-amber-50/85">Before the first public release or artwork, confirm the Group context, contributor credit, and review expectations. Those three checks prevent most avoidable confusion.</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
} |