Save workspace changes
This commit is contained in:
@@ -0,0 +1,225 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
import DocsCallout from '../../components/docs/DocsCallout'
|
||||
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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
COVERAGE_ITEMS,
|
||||
EMAIL_PASSWORD_STEPS,
|
||||
FAQ_ITEMS,
|
||||
HERO_METRICS,
|
||||
MAINTENANCE_HABITS,
|
||||
PROFILE_PREFERENCE_ITEMS,
|
||||
RELATED_HELP_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
SETTINGS_AREA_ITEMS,
|
||||
} from './accountHelpContent'
|
||||
|
||||
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 InsightCard({ 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>
|
||||
)
|
||||
}
|
||||
|
||||
function BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AccountHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
const signedIn = Boolean(props.auth?.signed_in)
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Account Settings Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Account settings', 'Profile settings', 'Password changes', 'Email changes', 'Preferences'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_22%),radial-gradient(circle_at_bottom_right,_rgba(34,197,94,0.12),_transparent_20%),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={jsonLd} />
|
||||
|
||||
<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(74,222,128,0.14),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-emerald-200/80">Account settings help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Account settings should feel like steady maintenance, not a maze you only visit when something is already on fire.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Use this page when access already works and you need clearer guidance for profile settings, account details, email and password care, notifications, and the ongoing habits that keep the account easier to manage.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={signedIn ? links.profile_settings : links.login} className="rounded-full border border-emerald-300/25 bg-emerald-300/12 px-5 py-3 text-sm font-semibold text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-300/18">{signedIn ? 'Open account settings' : 'Open login'}</a>
|
||||
<a href={links.help_auth} 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]">Read auth help</a>
|
||||
<a href={links.help_troubleshooting} 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]">Open troubleshooting</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Account help sections" selectLabel="Jump to account help section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="what-account-help-covers"
|
||||
eyebrow="Scope"
|
||||
title="What account help covers"
|
||||
summary="Account help sits between pure access recovery and deeper module-specific workflow guides. It is for the practical middle ground where the account works, but the settings still need attention."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{COVERAGE_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="settings-areas"
|
||||
eyebrow="Areas"
|
||||
title="The settings areas that matter most"
|
||||
summary="Most account questions fall into a few repeat categories. Naming the category first makes the right next step much easier to see."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{SETTINGS_AREA_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="A useful way to think about settings">
|
||||
Settings are not only administrative. They control recovery, trust, profile clarity, and how manageable the creator experience feels over time.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="email-and-password"
|
||||
eyebrow="Sensitive changes"
|
||||
title="Email and password changes"
|
||||
summary="Treat identity and security changes carefully. These are not hard tasks, but they are the least forgiving when rushed."
|
||||
>
|
||||
<DocsStepList items={EMAIL_PASSWORD_STEPS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="profile-and-preferences"
|
||||
eyebrow="Daily use"
|
||||
title="Profile and preference maintenance"
|
||||
summary="The account feels healthier when profile details, notification choices, and other core preferences stay aligned with how you actually use the platform."
|
||||
>
|
||||
<BulletGrid items={PROFILE_PREFERENCE_ITEMS} tone="sky" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="maintenance-habits"
|
||||
eyebrow="Good habits"
|
||||
title="Maintenance habits that prevent bigger problems"
|
||||
summary="The easiest account problems to fix are the ones that never turn into a crisis because the basics stayed current."
|
||||
>
|
||||
<BulletGrid items={MAINTENANCE_HABITS} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Account settings FAQ"
|
||||
summary="These answers cover the common point where access is fine, but settings and maintenance still feel unclear."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these guides when the account question turns back into access recovery, identity presentation, faster troubleshooting, or broader creator workflow help."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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-emerald-200/80">Quick route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={signedIn ? links.profile_settings : links.login} 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]">{signedIn ? 'Open account settings' : 'Open login'}</a>
|
||||
<a href={links.help_auth} 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]">Read auth help</a>
|
||||
<a href={links.help_profile} 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]">Read Profile help</a>
|
||||
<a href={links.help_troubleshooting} 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 troubleshooting</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-emerald-300/20 bg-emerald-400/10 p-4 text-emerald-50">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-100/80">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-emerald-50/85">The healthiest account is the one with a current email, a manageable password, and settings reviewed before they become emergency work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
import DocsCallout from '../../components/docs/DocsCallout'
|
||||
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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
ACCESS_BASICS_ITEMS,
|
||||
COMMON_MISTAKES,
|
||||
FAQ_ITEMS,
|
||||
HERO_METRICS,
|
||||
LOGIN_STEPS,
|
||||
RECOVERY_STEPS,
|
||||
RELATED_HELP_ITEMS,
|
||||
SAFETY_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
SIGNUP_STEPS,
|
||||
TROUBLESHOOTING_ITEMS,
|
||||
} from './authHelpContent'
|
||||
|
||||
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 BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function InsightCard({ 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>
|
||||
)
|
||||
}
|
||||
|
||||
function TroubleCard({ item, links }) {
|
||||
return (
|
||||
<a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<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>
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
|
||||
<span className="text-slate-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AuthHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
const signedIn = Boolean(props.auth?.signed_in)
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Signup and Login Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Signup', 'Login', 'Password recovery', 'Verification', 'Account access'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),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={jsonLd} />
|
||||
|
||||
<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">Signup and login help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Account access should feel clear, fixable, and much less stressful than it often does.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains how signup, login, password recovery, and account verification basics work on Skinbase Nova so you can get into your account, recover it when needed, and separate true access problems from workflow or permission confusion.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={signedIn ? links.open_studio : links.login} 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">{signedIn ? 'Open Studio' : 'Open login'}</a>
|
||||
<a href={links.register} 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]">Create account</a>
|
||||
<a href={links.password_request} 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]">Reset password</a>
|
||||
<a href={links.help_account} 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]">Account settings help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Signup and login help sections" selectLabel="Jump to auth help section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="creating-an-account"
|
||||
eyebrow="Signup"
|
||||
title="Creating an account"
|
||||
summary="Account creation should feel straightforward: start from signup, use the right email, finish the flow carefully, and complete any verification the account still needs afterward."
|
||||
>
|
||||
<DocsStepList items={SIGNUP_STEPS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="logging-in"
|
||||
eyebrow="Login"
|
||||
title="Logging in"
|
||||
summary="Login is the return path into your Skinbase identity. When it works, it should bring you back into the account so you can continue with profile, Studio, and publishing work."
|
||||
>
|
||||
<DocsStepList items={LOGIN_STEPS} />
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="Where login leads afterward">
|
||||
The important point is not only getting signed in. It is getting back to the authenticated parts of Skinbase that depend on account access, such as Studio and creator settings.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="password-reset-recovery"
|
||||
eyebrow="Recovery"
|
||||
title="Password reset / recovery"
|
||||
summary="If the password is missing or no longer reliable, recovery is the safer and faster route. This should feel like a reset process, not a panic moment."
|
||||
>
|
||||
<DocsStepList items={RECOVERY_STEPS} />
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<DocsCallout tone="tip" title="Check the right inbox first">
|
||||
Reset confusion often comes from watching the wrong email account or ignoring spam and promotions folders.
|
||||
</DocsCallout>
|
||||
<DocsCallout tone="warning" title="Do not keep guessing forever">
|
||||
If the password is unclear, move into recovery instead of burning time on repeated failed guesses that only make the situation feel worse.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="access-and-verification"
|
||||
eyebrow="Access basics"
|
||||
title="Account access and verification basics"
|
||||
summary="Being logged in, being verified, and having permission inside a specific workflow are related but not identical. Keeping those ideas separate reduces a lot of confusion."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{ACCESS_BASICS_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="safety-and-protection"
|
||||
eyebrow="Safety"
|
||||
title="Safety and account protection"
|
||||
summary="Security guidance works best when it is simple enough to follow in real life. These habits protect access without turning basic account care into a technical lecture."
|
||||
>
|
||||
<BulletGrid items={SAFETY_ITEMS} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="common-mistakes"
|
||||
eyebrow="Avoid this"
|
||||
title="Common mistakes"
|
||||
summary="Most auth confusion comes from small mismatches: the wrong email, the wrong inbox, the wrong assumption about what login should solve, or a permissions issue being mistaken for an account-access failure."
|
||||
>
|
||||
<BulletGrid items={COMMON_MISTAKES} tone="amber" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Signup and login FAQ"
|
||||
summary="These are the fastest answers for the questions people most often ask when access is blocked, incomplete, or simply confusing."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="troubleshooting"
|
||||
eyebrow="Troubleshooting"
|
||||
title="Troubleshooting"
|
||||
summary="Use these shortcuts when account access is failing, recovery feels unclear, or the problem may actually live in permissions and workflow rather than login itself."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{TROUBLESHOOTING_ITEMS.map((item) => (
|
||||
<TroubleCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these links when account access is clear and the next question belongs to profile setup, creator workflows, Group permissions, or broader troubleshooting."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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 route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={links.login} 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 login</a>
|
||||
<a href={links.register} 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]">Create account</a>
|
||||
<a href={links.password_request} 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]">Reset password</a>
|
||||
<a href={links.help_account} 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]">Read account settings help</a>
|
||||
<a href={links.help_troubleshooting} 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 troubleshooting hub</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">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-amber-50/85">If access breaks, check four things first: the email, the password, the inbox, and whether the problem is really permissions rather than login.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,302 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
BEST_PRACTICES,
|
||||
COMMON_MISTAKES,
|
||||
COMPARISON_COLUMNS,
|
||||
COMPARISON_ROWS,
|
||||
CREATION_STEPS,
|
||||
FAQ_ITEMS,
|
||||
FORMAT_SIGNAL_ITEMS,
|
||||
HERO_METRICS,
|
||||
OWNERSHIP_BULLETS,
|
||||
OWNERSHIP_ITEMS,
|
||||
RELATED_HELP_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
TROUBLESHOOTING_ITEMS,
|
||||
WHAT_CARDS_ARE_ITEMS,
|
||||
WORKFLOW_EXAMPLES,
|
||||
} from './cardsHelpContent'
|
||||
|
||||
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 BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function InsightCard({ 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>
|
||||
)
|
||||
}
|
||||
|
||||
function TroubleCard({ item, links }) {
|
||||
return (
|
||||
<a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<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>
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
|
||||
<span className="text-slate-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CardsHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Cards Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Cards', 'Studio', 'Publishing', 'Visual communication', 'Group workflows'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),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={jsonLd} />
|
||||
|
||||
<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">Cards help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Cards are for ideas that need design, presentation, and message to work together.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains what Cards are on Skinbase Nova, how they differ from artworks, posts, and collections, how to create and publish them, and how to use them well in both personal and Group workflows.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={links.create_card} 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 Card</a>
|
||||
<a href={links.studio_cards} 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 Cards workspace</a>
|
||||
<a href={links.cards_index} 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]">Browse public Cards</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Cards help sections" selectLabel="Jump to Cards help section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="what-cards-are"
|
||||
eyebrow="Foundations"
|
||||
title="What Cards are"
|
||||
summary="Cards are a creative format for visual communication. They are made for ideas that need design, layout, and message to land together in one polished public-facing unit."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{WHAT_CARDS_ARE_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<BulletGrid items={FORMAT_SIGNAL_ITEMS} tone="emerald" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="The simplest way to think about Cards">
|
||||
Cards are not “smaller artworks” and they are not just decorated posts. They are a format for concise, designed visual communication.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="cards-vs-other-formats"
|
||||
eyebrow="Format choice"
|
||||
title="Cards vs artworks vs posts vs collections"
|
||||
summary="Choose the format based on what the audience needs to experience. The right choice makes the content feel natural. The wrong choice creates friction immediately."
|
||||
>
|
||||
<DocsComparisonTable columns={COMPARISON_COLUMNS} rows={COMPARISON_ROWS} caption="Comparison between Cards, artworks, posts, and collections" />
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<DocsCallout tone="tip" title="Choose Cards when presentation is part of the point">
|
||||
If the message needs typography, composition, or a designed editorial feel to work properly, Cards are usually the right format.
|
||||
</DocsCallout>
|
||||
<DocsCallout tone="warning" title="Do not force every idea into Cards">
|
||||
If the content is really an artwork, keep it as an artwork. If it is really an update, keep it as a post. Better format choices create clearer public experiences.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="how-to-create"
|
||||
eyebrow="Workflow"
|
||||
title="How to create a Card"
|
||||
summary="The creation flow should feel deliberate: enter Studio, open the Cards workflow, shape the idea clearly, preview the result, and publish only when the final presentation feels intentional."
|
||||
>
|
||||
<DocsStepList items={CREATION_STEPS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="publishing-and-ownership"
|
||||
eyebrow="Ownership"
|
||||
title="Publishing and ownership"
|
||||
summary="Cards can be personal or Group-owned depending on the context. Before you publish, confirm whose identity the Card represents and whether any shared authorship should be made clear."
|
||||
>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{OWNERSHIP_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<BulletGrid items={OWNERSHIP_BULLETS} tone="sky" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="practice" title="Publishing context is part of quality">
|
||||
A polished Card published under the wrong identity is still a bad result. Treat ownership checks as part of the final review, not as cleanup after the fact.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="personal-and-group-workflows"
|
||||
eyebrow="Use cases"
|
||||
title="Using Cards in personal and Group workflows"
|
||||
summary="Cards become easier to understand once they are attached to real use cases. They are useful when you want a compact, designed surface for communication, mood, or presentation."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{WORKFLOW_EXAMPLES.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="best-practices"
|
||||
eyebrow="Quality habits"
|
||||
title="Best practices"
|
||||
summary="Strong Cards feel focused, readable, and intentional. They communicate one idea clearly instead of fighting for attention with too many competing elements."
|
||||
>
|
||||
<BulletGrid items={BEST_PRACTICES} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="common-mistakes"
|
||||
eyebrow="Avoid this"
|
||||
title="Common mistakes"
|
||||
summary="Most Card problems come from using the wrong format, overloading the design, or ignoring publishing context until after the public result already exists."
|
||||
>
|
||||
<BulletGrid items={COMMON_MISTAKES} tone="amber" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Cards FAQ"
|
||||
summary="These answers cover the core questions people ask when they are deciding whether Cards fit the idea they want to publish."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="troubleshooting"
|
||||
eyebrow="Troubleshooting"
|
||||
title="Troubleshooting"
|
||||
summary="Use these shortcuts when the Cards workflow feels unclear, the format choice feels wrong, or the result is not behaving the way you expected."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{TROUBLESHOOTING_ITEMS.map((item) => (
|
||||
<TroubleCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these links when the Cards format is clear and you need the next layer of help around Studio, Group workflows, uploads, or creator identity."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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 route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={links.create_card} 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]">Create a Card</a>
|
||||
<a href={links.studio_cards} 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 Cards workspace</a>
|
||||
<a href={links.cards_index} 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 Cards</a>
|
||||
<a href={links.studio_help} 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]">Read Studio help</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">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-amber-50/85">If the content feels unclear, ask one question first: is this a Card, an artwork, a post, or a collection? The answer usually fixes the workflow too.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
import React, { useDeferredValue, useEffect, useState } from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
import DocsCallout from '../../components/docs/DocsCallout'
|
||||
import DocsSection from '../../components/docs/DocsSection'
|
||||
import DocsSidebarNav from '../../components/docs/DocsSidebarNav'
|
||||
import DocsStepList from '../../components/docs/DocsStepList'
|
||||
import HelpGuideCard from '../../components/help/HelpGuideCard'
|
||||
import HelpSearchBar from '../../components/help/HelpSearchBar'
|
||||
import HelpSupportCta from '../../components/help/HelpSupportCta'
|
||||
import HelpTopicCard from '../../components/help/HelpTopicCard'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
FEATURED_GUIDES,
|
||||
GETTING_STARTED_LINKS,
|
||||
GETTING_STARTED_STEPS,
|
||||
HELP_CATEGORIES,
|
||||
HIGHLIGHTED_GUIDES,
|
||||
POPULAR_HELP_TOPICS,
|
||||
SEARCH_SUGGESTIONS,
|
||||
SUPPORT_ITEMS,
|
||||
TROUBLESHOOTING_ITEMS,
|
||||
} from './helpCenterContent'
|
||||
|
||||
function matchesQuery(item, query) {
|
||||
if (!query) return true
|
||||
|
||||
const haystack = [
|
||||
item.title,
|
||||
item.description,
|
||||
item.status,
|
||||
item.eyebrow,
|
||||
item.plannedPath,
|
||||
...(item.tags || []),
|
||||
...(item.highlights || []),
|
||||
...(item.linkItems || []).map((linkItem) => linkItem.label),
|
||||
].filter(Boolean).join(' ').toLowerCase()
|
||||
|
||||
return haystack.includes(query)
|
||||
}
|
||||
|
||||
function MiniLink({ item, href }) {
|
||||
return (
|
||||
<a href={href} className="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]">
|
||||
{item.label}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function PopularTopicCard({ item, href }) {
|
||||
return (
|
||||
<a href={href} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<h3 className="text-base font-semibold text-white">{item.title}</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-300">{item.description}</p>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function HelpCenterPage() {
|
||||
const page = usePage()
|
||||
const { props, url } = page
|
||||
const links = props.links || {}
|
||||
const signedIn = Boolean(props.auth?.signed_in)
|
||||
const urlQuery = new URLSearchParams((url.split('?')[1] || '')).get('q') || ''
|
||||
const [query, setQuery] = useState(urlQuery)
|
||||
const normalizedQuery = useDeferredValue(query.trim().toLowerCase())
|
||||
|
||||
useEffect(() => {
|
||||
setQuery(urlQuery)
|
||||
}, [urlQuery])
|
||||
|
||||
const highlightedGuides = HIGHLIGHTED_GUIDES.filter((item) => matchesQuery(item, normalizedQuery))
|
||||
const featuredGuides = FEATURED_GUIDES.filter((item) => matchesQuery(item, normalizedQuery))
|
||||
const categories = HELP_CATEGORIES.map((category) => ({
|
||||
...category,
|
||||
topics: category.topics.filter((topic) => matchesQuery(topic, normalizedQuery)),
|
||||
})).filter((category) => category.topics.length > 0)
|
||||
const troubleshootingItems = TROUBLESHOOTING_ITEMS.filter((item) => matchesQuery(item, normalizedQuery))
|
||||
const popularTopics = POPULAR_HELP_TOPICS.filter((item) => matchesQuery(item, normalizedQuery))
|
||||
|
||||
const totalMatches = highlightedGuides.length
|
||||
+ featuredGuides.length
|
||||
+ troubleshootingItems.length
|
||||
+ popularTopics.length
|
||||
+ categories.reduce((sum, category) => sum + category.topics.length, 0)
|
||||
|
||||
const resultSummary = normalizedQuery
|
||||
? `Showing ${totalMatches} matching help items for “${query.trim()}”.`
|
||||
: 'Search across live guides, planned help topics, popular questions, and troubleshooting shortcuts.'
|
||||
|
||||
const supportItems = SUPPORT_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'WebPage',
|
||||
name: 'Help Center',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'ItemList',
|
||||
itemListElement: FEATURED_GUIDES.map((item, index) => ({
|
||||
'@type': 'ListItem',
|
||||
position: index + 1,
|
||||
name: item.title,
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_22%),radial-gradient(circle_at_bottom_right,_rgba(250,204,21,0.16),_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={jsonLd} />
|
||||
|
||||
<div className="mx-auto max-w-[1480px]">
|
||||
<section id="introduction" className="rounded-[38px] border border-white/10 bg-[linear-gradient(140deg,rgba(15,23,42,0.94),rgba(15,23,42,0.72)),radial-gradient(circle_at_top_right,rgba(125,211,252,0.18),transparent_26%)] p-6 shadow-[0_32px_100px_rgba(2,6,23,0.34)] 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">Skinbase Nova Help Center</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Find the right guide, quickstart, FAQ, or fix without digging through scattered help.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This is the central help hub for Skinbase Nova. Use it to get started, find module-specific guidance, open the live Groups documentation set, and move quickly toward the next useful answer.</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href="#featured-guides" 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">Browse help topics</a>
|
||||
<a href={links.groups_documentation} 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 Groups help</a>
|
||||
<a href={links.studio_help} 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]">Read Studio help</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 max-w-3xl">
|
||||
<HelpSearchBar
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
onSelectSuggestion={setQuery}
|
||||
onClear={() => setQuery('')}
|
||||
suggestions={SEARCH_SUGGESTIONS}
|
||||
resultSummary={resultSummary}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-[30px] border border-white/10 bg-black/20 p-5">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Start here</p>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||||
<a href={links.studio_help} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Studio help</a>
|
||||
<a href={links.upload_help} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Upload help</a>
|
||||
<a href={links.help_cards} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Cards help</a>
|
||||
<a href={links.help_profile} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Profile help</a>
|
||||
<a href={links.help_auth} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Signup / Login help</a>
|
||||
<a href={links.help_troubleshooting} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Troubleshooting help</a>
|
||||
<a href={links.groups_quickstart} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Groups Quickstart</a>
|
||||
<a href={signedIn ? links.open_studio : links.login} className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">{signedIn ? 'Open Studio workspace' : 'Sign in to start'}</a>
|
||||
</div>
|
||||
</div>
|
||||
</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={[
|
||||
{ id: 'highlighted-guides', label: 'Highlighted guides' },
|
||||
{ id: 'featured-guides', label: 'Featured guides' },
|
||||
{ id: 'help-categories', label: 'Help categories' },
|
||||
{ id: 'getting-started', label: 'Getting started' },
|
||||
{ id: 'troubleshooting', label: 'Troubleshooting' },
|
||||
{ id: 'popular-topics', label: 'Popular topics' },
|
||||
{ id: 'support-direction', label: 'Support direction' },
|
||||
]}
|
||||
ariaLabel="Help center sections"
|
||||
selectLabel="Jump to help center section"
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{normalizedQuery ? (
|
||||
<DocsCallout tone="note" title="Filtered help view">
|
||||
Search is filtering the live guides, planned topics, popular questions, and troubleshooting shortcuts below. Clear the search anytime to return to the full Help Center view.
|
||||
</DocsCallout>
|
||||
) : (
|
||||
<DocsCallout tone="note" title="How to use the Help Center">
|
||||
Start with the highlighted live guides if you need complete written help now. Use the category sections to see the long-term help architecture and the next high-priority modules that will expand after Groups.
|
||||
</DocsCallout>
|
||||
)}
|
||||
|
||||
<DocsSection
|
||||
id="highlighted-guides"
|
||||
eyebrow="Live now"
|
||||
title="Highlighted guides"
|
||||
summary="These are the strongest live help surfaces in the current Help Center. They show the quality bar and structural pattern the wider system will follow."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{highlightedGuides.map((item) => (
|
||||
<HelpGuideCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="featured-guides"
|
||||
eyebrow="Featured"
|
||||
title="Start with the highest-priority help topics"
|
||||
summary="These are the first modules users most often need help with. Groups is already live, while the rest are surfaced here with real product entry points and clean future help paths."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{featuredGuides.map((item) => (
|
||||
<HelpGuideCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<section id="help-categories" className="space-y-6 scroll-mt-24">
|
||||
{categories.map((category) => (
|
||||
<DocsSection
|
||||
key={category.id}
|
||||
id={category.id}
|
||||
eyebrow="Help category"
|
||||
title={category.title}
|
||||
summary={category.summary}
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{category.topics.map((topic) => (
|
||||
<HelpTopicCard key={topic.title} item={topic} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<DocsSection
|
||||
id="getting-started"
|
||||
eyebrow="Onboarding"
|
||||
title="Getting started with Skinbase"
|
||||
summary="This path is designed for first-time creators who want a practical order of operations instead of a giant wall of documentation."
|
||||
>
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<DocsStepList items={GETTING_STARTED_STEPS} />
|
||||
|
||||
<div className="space-y-3 rounded-[28px] border border-white/10 bg-black/20 p-5">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Quick links</p>
|
||||
<div className="grid gap-3">
|
||||
{GETTING_STARTED_LINKS.map((item) => (
|
||||
<MiniLink key={item.label} item={item} href={links[item.linkKey]} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="troubleshooting"
|
||||
eyebrow="Fixes first"
|
||||
title="Troubleshooting shortcuts"
|
||||
summary="These are the fast paths for users who are blocked and need a direct fix, not a longer article."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{troubleshootingItems.map((item) => (
|
||||
<a key={item.title} href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<h3 className="text-lg font-semibold text-white">{item.title}</h3>
|
||||
<p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
|
||||
<span className="text-slate-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="popular-topics"
|
||||
eyebrow="Popular"
|
||||
title="Popular help topics"
|
||||
summary="These common journeys make the Help Center feel immediately useful even before every module-specific help page is fully written."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{popularTopics.map((item) => (
|
||||
<PopularTopicCard key={item.title} item={item} href={links[item.linkKey]} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="support-direction"
|
||||
eyebrow="Next steps"
|
||||
title="Need more help than the hub can give?"
|
||||
summary="Use these routes when you need a person, need to report a product issue, or want the most complete live documentation surface right now."
|
||||
>
|
||||
<HelpSupportCta items={supportItems} />
|
||||
</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">Help architecture</p>
|
||||
<ul className="mt-4 space-y-3 text-sm leading-6 text-slate-300">
|
||||
<li>Use <span className="font-semibold text-white">/help</span> as the main hub.</li>
|
||||
<li>Use <span className="font-semibold text-white">/help/topic</span> for overview pages.</li>
|
||||
<li>Use <span className="font-semibold text-white">/help/topic/subpage</span> for quickstarts, FAQs, and troubleshooting.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Current coverage</p>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-300">Groups is the first complete multi-page topic family, and Studio, Upload, Cards, Profile, Signup / Login, Account Settings, and Troubleshooting are now live topic guides. The rest of the Help Center still follows the same predictable expansion path.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
BEST_PRACTICES,
|
||||
COMMON_MISTAKES,
|
||||
FAQ_ITEMS,
|
||||
HERO_METRICS,
|
||||
PROFILE_COMPARISON_COLUMNS,
|
||||
PROFILE_COMPARISON_ROWS,
|
||||
PROFILE_CONTENT_ITEMS,
|
||||
PROFILE_IMPROVEMENT_TIPS,
|
||||
RELATED_HELP_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
SETUP_BASICS_ITEMS,
|
||||
TROUBLESHOOTING_ITEMS,
|
||||
WHAT_PROFILE_IS_ITEMS,
|
||||
WHAT_TO_PUT_ITEMS,
|
||||
} from './profileHelpContent'
|
||||
|
||||
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 BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function InsightCard({ 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>
|
||||
)
|
||||
}
|
||||
|
||||
function TroubleCard({ item, links }) {
|
||||
return (
|
||||
<a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<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>
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
|
||||
<span className="text-slate-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProfileHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Profile Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Profile', 'Creator identity', 'Groups', 'Studio', 'Publishing'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),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={jsonLd} />
|
||||
|
||||
<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">Profile help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Your profile is the personal identity people remember when they discover your work.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains what a profile is on Skinbase Nova, how it differs from a Group, how to set it up well, and how to build a stronger public creator presence without turning the page into noise.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={links.profile_settings} 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">Open profile settings</a>
|
||||
<a href={links.groups_help} 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]">Read Groups help</a>
|
||||
<a href={links.studio_help} 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]">Read Studio help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Profile help sections" selectLabel="Jump to Profile help section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="what-profile-is"
|
||||
eyebrow="Foundations"
|
||||
title="What a profile is"
|
||||
summary="Your profile is your personal public presence on Skinbase. It is where people build a first impression of who you are, what you create, and how your identity connects to the work they see."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{WHAT_PROFILE_IS_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="The simplest way to think about your profile">
|
||||
Your profile is not just a settings page. It is the public identity layer that helps people recognize you as a creator.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="profile-vs-group"
|
||||
eyebrow="Identity"
|
||||
title="Profile vs Group"
|
||||
summary="This is the most important distinction for many creators. Your profile represents you personally. A Group represents a shared identity. Both can exist at the same time without competing with each other."
|
||||
>
|
||||
<DocsComparisonTable columns={PROFILE_COMPARISON_COLUMNS} rows={PROFILE_COMPARISON_ROWS} caption="Comparison between Profile and Group" />
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<DocsCallout tone="tip" title="You do not lose your personal identity inside Groups">
|
||||
Group publishing adds a shared layer, but your own profile still matters because it helps people understand your individual presence and contribution history.
|
||||
</DocsCallout>
|
||||
<DocsCallout tone="warning" title="Do not let profile and Group identity blur together">
|
||||
When the difference is unclear, people have a harder time understanding who is speaking, who owns the work, and what belongs to the shared team versus the individual creator.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="profile-setup-basics"
|
||||
eyebrow="Setup"
|
||||
title="Profile setup basics"
|
||||
summary="The best profiles are not overbuilt. They are recognizable, readable, and consistent enough that people can understand the creator quickly."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{SETUP_BASICS_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<BulletGrid items={PROFILE_IMPROVEMENT_TIPS} tone="emerald" />
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="what-to-put-on-your-profile"
|
||||
eyebrow="Presentation"
|
||||
title="What to put on your profile"
|
||||
summary="Think of your profile as a curated introduction rather than a dumping ground. The strongest pages make your identity and best work easier to notice quickly."
|
||||
>
|
||||
<BulletGrid items={WHAT_TO_PUT_ITEMS} tone="sky" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="profile-content-and-activity"
|
||||
eyebrow="Visibility"
|
||||
title="Profile content and activity"
|
||||
summary="Profiles are not only bios and avatars. They can also help people understand your personal work, your public contributions, and how active you are as a creator."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{PROFILE_CONTENT_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="practice" title="Profiles become stronger through activity, not decoration alone">
|
||||
Better profile visuals help, but the strongest identity pages are backed by real work, visible contributions, and consistent public presence.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="best-practices"
|
||||
eyebrow="Good habits"
|
||||
title="Best practices"
|
||||
summary="A strong profile does not need to be complicated. It needs to feel real, intentional, and easy for other people to understand."
|
||||
>
|
||||
<BulletGrid items={BEST_PRACTICES} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="common-mistakes"
|
||||
eyebrow="Avoid this"
|
||||
title="Common mistakes"
|
||||
summary="Most profile problems come from neglect, inconsistency, or mixing personal identity with other public surfaces until the page stops feeling coherent."
|
||||
>
|
||||
<BulletGrid items={COMMON_MISTAKES} tone="amber" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Profile FAQ"
|
||||
summary="These answers cover the most common questions people ask when they are trying to build a stronger public identity on Skinbase."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="troubleshooting"
|
||||
eyebrow="Troubleshooting"
|
||||
title="Troubleshooting"
|
||||
summary="Use these shortcuts when your profile feels unclear, incomplete, or disconnected from the way you actually want to present yourself."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{TROUBLESHOOTING_ITEMS.map((item) => (
|
||||
<TroubleCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these links when your profile setup question leads into shared identity, publishing workflows, or access issues elsewhere in the product."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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 route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={links.profile_settings} 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 profile settings</a>
|
||||
<a href={links.groups_help} 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]">Read Groups help</a>
|
||||
<a href={links.studio_help} 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]">Read Studio help</a>
|
||||
<a href={links.upload_help} 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]">Read Upload help</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">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-amber-50/85">A better profile usually starts with three things: a recognizable avatar, a clearer bio, and a stronger sense of what you want people to remember about you.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,355 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
ADVANCED_MODULES,
|
||||
ARTWORK_GUIDANCE,
|
||||
BEST_PRACTICES,
|
||||
CARD_COLLECTION_GUIDANCE,
|
||||
COMMON_MISTAKES,
|
||||
DRAFT_STEPS,
|
||||
FAQ_ITEMS,
|
||||
HERO_METRICS,
|
||||
RELATED_HELP_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
STUDIO_AREAS,
|
||||
STUDIO_COMPARISON_COLUMNS,
|
||||
STUDIO_COMPARISON_ROWS,
|
||||
TROUBLESHOOTING_ITEMS,
|
||||
} from './studioHelpContent'
|
||||
|
||||
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 AreaCard({ item, links }) {
|
||||
const actions = [
|
||||
{ label: 'Open Studio', href: links.open_studio },
|
||||
{ label: 'View content dashboard', href: links.studio_content },
|
||||
{ label: 'Open artworks', href: links.studio_artworks },
|
||||
{ label: 'Open drafts', href: links.studio_drafts },
|
||||
{ label: 'Open cards', href: links.studio_cards },
|
||||
{ label: 'Open collections', href: links.studio_collections },
|
||||
{ label: 'Open Group Studio', href: links.group_studio },
|
||||
{ label: 'Read Groups help', href: links.groups_help },
|
||||
{ label: 'Open settings', href: links.studio_settings },
|
||||
{ label: 'Read Profile help', href: links.help_profile },
|
||||
{ label: 'Help Center', href: links.help_home },
|
||||
{ label: 'Report issue', href: links.report_issue },
|
||||
]
|
||||
|
||||
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>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{item.links.map((label) => {
|
||||
const action = actions.find((candidate) => candidate.label === label)
|
||||
if (!action?.href) return null
|
||||
|
||||
return (
|
||||
<a key={label} href={action.href} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.07]">
|
||||
{label}
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
function BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TroubleCard({ item, links }) {
|
||||
return (
|
||||
<a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<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>
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
|
||||
<span className="text-slate-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function StudioHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Studio Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Studio', 'Drafts', 'Publishing', 'Creator workflow', 'Group Studio'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),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={jsonLd} />
|
||||
|
||||
<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">Studio help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Studio is the creative control center of Skinbase Nova.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Use Studio to manage drafts, uploads, publishing, artworks, cards, collections, and collaborative work before and after it goes public. This page explains how Studio fits into the platform, how personal and Group contexts differ, and how to use the workspace without creating avoidable confusion.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={links.open_studio} 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">Open Studio</a>
|
||||
<a href={links.upload_help} 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]">Read Upload help</a>
|
||||
<a href={links.groups_help} 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]">Read Groups help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Studio help sections" selectLabel="Jump to Studio help section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="what-is-studio"
|
||||
eyebrow="Foundations"
|
||||
title="What Studio is"
|
||||
summary="Studio is the private management workspace for creators. Public pages show published work. Studio is where you prepare, organize, edit, review, and manage that work before and after it reaches the public side of Skinbase."
|
||||
>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
||||
<h3 className="text-lg font-semibold text-white">Studio is private</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-slate-300">Studio is not your public profile. It is the working area where creator actions happen, drafts live, and management choices are made.</p>
|
||||
</div>
|
||||
<div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
||||
<h3 className="text-lg font-semibold text-white">Public pages are the result</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-slate-300">The public side of Skinbase is what people see after you publish. Studio is where you shape that result intentionally.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="The simplest mental model">
|
||||
Think of Studio as your control room. It is where unfinished work is prepared, published work is managed, and context-sensitive actions live.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="personal-vs-group"
|
||||
eyebrow="Context"
|
||||
title="Personal Studio vs Group Studio"
|
||||
summary="This is one of the most important parts of Studio. The active context changes ownership, available actions, and who is allowed to do what."
|
||||
>
|
||||
<DocsComparisonTable
|
||||
columns={STUDIO_COMPARISON_COLUMNS}
|
||||
rows={STUDIO_COMPARISON_ROWS}
|
||||
caption="Comparison between Personal Studio and Group Studio"
|
||||
/>
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<DocsCallout tone="warning" title="Check context before publishing">
|
||||
If you do not confirm whether you are in personal or Group Studio, it becomes much easier to publish under the wrong identity or lose track of where a draft belongs.
|
||||
</DocsCallout>
|
||||
<DocsCallout tone="tip" title="Why actions can disappear">
|
||||
In Group Studio, actions may change based on role, permissions, approvals, or workflow stage. Missing actions are often a context or permission issue, not a bug.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="main-studio-areas"
|
||||
eyebrow="Workspace map"
|
||||
title="Main Studio areas"
|
||||
summary="Studio already includes a broad set of creator surfaces. You do not need to memorize every route, but it helps to understand the main areas and what each one is for."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{STUDIO_AREAS.map((item) => (
|
||||
<AreaCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="drafts-and-publishing"
|
||||
eyebrow="Workflow"
|
||||
title="Drafts and publishing"
|
||||
summary="Drafts are unfinished workspace items. Publishing is the moment work becomes public. Treat those as different stages with different responsibilities."
|
||||
>
|
||||
<DocsStepList items={DRAFT_STEPS} />
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="practice" title="Before you publish">
|
||||
Review metadata, preview quality, contributor credit, and context every time. Publishing is fastest when those checks become a habit.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="managing-artworks"
|
||||
eyebrow="Content"
|
||||
title="Managing artworks"
|
||||
summary="Studio is where artwork workflows happen: upload, draft review, metadata cleanup, preview checks, updates, and final publishing decisions."
|
||||
>
|
||||
<BulletGrid items={ARTWORK_GUIDANCE} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="cards-and-collections"
|
||||
eyebrow="Creative tools"
|
||||
title="Managing cards and collections"
|
||||
summary="Cards and collections are part of the creative management side of Studio. They are not only public-facing features; they also live inside the workspace where you build and organize them."
|
||||
>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{CARD_COLLECTION_GUIDANCE.map((item) => (
|
||||
<div key={item.title} 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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="advanced-modules"
|
||||
eyebrow="Advanced workflows"
|
||||
title="Projects, releases, and other advanced modules"
|
||||
summary="As workflows become more collaborative or structured, Studio extends beyond simple drafts and publishes into richer operating surfaces."
|
||||
>
|
||||
<BulletGrid items={ADVANCED_MODULES} tone="amber" />
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="Use advanced modules when they solve a real need">
|
||||
Projects, releases, challenges, events, assets, and review queues are powerful, but they work best when the team actually needs more structure rather than more complexity.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="best-practices"
|
||||
eyebrow="Habits"
|
||||
title="Best practices"
|
||||
summary="Good Studio habits reduce confusion, keep work organized, and make publishing smoother for both solo creators and teams."
|
||||
>
|
||||
<BulletGrid items={BEST_PRACTICES} tone="sky" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="common-mistakes"
|
||||
eyebrow="Avoid this"
|
||||
title="Common mistakes"
|
||||
summary="Most Studio confusion does not come from the existence of many tools. It comes from using the right tool in the wrong context or skipping basic review steps."
|
||||
>
|
||||
<BulletGrid items={COMMON_MISTAKES} tone="amber" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Studio FAQ"
|
||||
summary="These fast answers cover the questions that come up most often when people are new to Studio or switching into collaborative workflows."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="troubleshooting"
|
||||
eyebrow="Troubleshooting"
|
||||
title="Troubleshooting"
|
||||
summary="Use these shortcuts when Studio feels confusing, empty, or inconsistent. Most issues come down to context, filters, or permissions."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{TROUBLESHOOTING_ITEMS.map((item) => (
|
||||
<TroubleCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these links when Studio has answered the workflow question and you need to go deeper into the right part of the help system or product surface."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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 route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={links.open_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 Studio</a>
|
||||
<a href={links.studio_drafts} 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 drafts</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>
|
||||
<a href={links.groups_help} 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]">Read Groups help</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">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-amber-50/85">If something feels missing, check context first. Personal Studio and Group Studio are connected, but they are not identical workspaces.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
import DocsCallout from '../../components/docs/DocsCallout'
|
||||
import DocsFaqAccordion from '../../components/docs/DocsFaqAccordion'
|
||||
import DocsSection from '../../components/docs/DocsSection'
|
||||
import DocsSidebarNav from '../../components/docs/DocsSidebarNav'
|
||||
import QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
ACCOUNT_ACCESS_ITEMS,
|
||||
FAQ_ITEMS,
|
||||
FIRST_CHECKS,
|
||||
HERO_METRICS,
|
||||
PROFILE_SETTINGS_ITEMS,
|
||||
PUBLISHING_CONTEXT_ITEMS,
|
||||
RELATED_HELP_ITEMS,
|
||||
REPORTING_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
} from './troubleshootingHelpContent'
|
||||
|
||||
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 InsightCard({ 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>
|
||||
)
|
||||
}
|
||||
|
||||
function BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function TroubleshootingHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
const signedIn = Boolean(props.auth?.signed_in)
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Troubleshooting Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Troubleshooting', 'Account access', 'Permissions', 'Publishing blockers', 'Support'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(244,114,182,0.12),_transparent_20%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.16),_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={jsonLd} />
|
||||
|
||||
<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(244,114,182,0.12),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-rose-200/80">Troubleshooting help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">When something feels broken, the fastest fix usually starts with diagnosing the right kind of problem.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Use this page when you need shorter, support-oriented guidance for account entry issues, context confusion, publishing blockers, incomplete setup, permissions problems, or the point where a clean bug report becomes the right move.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={signedIn ? links.open_studio : links.login} className="rounded-full border border-rose-300/25 bg-rose-300/12 px-5 py-3 text-sm font-semibold text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-300/18">{signedIn ? 'Open Studio' : 'Open login'}</a>
|
||||
<a href={links.help_auth} 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]">Read auth help</a>
|
||||
<a href={links.report_issue} 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]">Report a problem</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Troubleshooting help sections" selectLabel="Jump to troubleshooting section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="first-checks"
|
||||
eyebrow="Start here"
|
||||
title="First checks before you spiral"
|
||||
summary="Troubleshooting works better when you slow the situation down, label the failure clearly, and rule out the most common context mistakes first."
|
||||
>
|
||||
<BulletGrid items={FIRST_CHECKS} tone="sky" />
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<DocsCallout tone="note" title="A useful troubleshooting split">
|
||||
Ask whether the issue is about access, permissions, settings, or a truly broken route. Those categories lead to very different fixes.
|
||||
</DocsCallout>
|
||||
<DocsCallout tone="warning" title="Do not skip straight to bug reports">
|
||||
Many urgent-feeling problems resolve much faster once you confirm the right account, inbox, route, or Group context.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="account-access"
|
||||
eyebrow="Access"
|
||||
title="Account access and recovery issues"
|
||||
summary="If you cannot enter the account consistently, or can only reach part of the platform, start here before diagnosing deeper creator workflow surfaces."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{ACCOUNT_ACCESS_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="publishing-and-context"
|
||||
eyebrow="Workflow"
|
||||
title="Publishing and context problems"
|
||||
summary="When uploads, Studio, or publishing actions feel blocked, the root cause is often context or permissions rather than a total platform failure."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{PUBLISHING_CONTEXT_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="profile-and-settings"
|
||||
eyebrow="Settings"
|
||||
title="Profile and account-settings confusion"
|
||||
summary="Some problems feel technical when they are really profile maintenance, settings drift, or identity confusion that belongs in a guide instead of a support ticket."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{PROFILE_SETTINGS_ITEMS.map((item) => (
|
||||
<InsightCard key={item.title} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="when-to-report"
|
||||
eyebrow="Escalation"
|
||||
title="When to contact support or report a bug"
|
||||
summary="Escalation works best when the problem is already described clearly enough that another person can follow it without guessing."
|
||||
>
|
||||
<BulletGrid items={REPORTING_ITEMS} tone="amber" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Troubleshooting FAQ"
|
||||
summary="These are the fast answers for the moment when a problem exists, but the category of the problem still feels uncertain."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these routes when the diagnosis points toward access recovery, account settings, publishing workflows, or role-based collaboration guidance."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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-rose-200/80">Quick route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={links.help_auth} 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]">Read auth help</a>
|
||||
<a href={links.help_account} 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]">Read account settings help</a>
|
||||
<a href={links.upload_help} 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]">Read Upload help</a>
|
||||
<a href={links.groups_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>
|
||||
<a href={links.report_issue} 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]">Report a problem</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-rose-300/20 bg-rose-400/10 p-4 text-rose-50">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-rose-100/80">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-rose-50/85">A clear problem statement beats frantic guessing. Name the route, the context, and what changed before you decide the product is broken.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import {
|
||||
BEST_PRACTICES,
|
||||
COMMON_MISTAKES,
|
||||
CREDIT_BULLETS,
|
||||
CREDIT_EXAMPLE,
|
||||
DRAFT_FLOW_ITEMS,
|
||||
FAQ_ITEMS,
|
||||
FILE_METADATA_ITEMS,
|
||||
HERO_METRICS,
|
||||
PREP_ITEMS,
|
||||
PUBLISH_FLOW_ITEMS,
|
||||
RELATED_HELP_ITEMS,
|
||||
SECTION_ITEMS,
|
||||
TROUBLESHOOTING_ITEMS,
|
||||
UPLOAD_COMPARISON_COLUMNS,
|
||||
UPLOAD_COMPARISON_ROWS,
|
||||
WORKFLOW_STEPS,
|
||||
} from './uploadHelpContent'
|
||||
|
||||
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 BulletGrid({ items, tone = 'sky' }) {
|
||||
const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'
|
||||
|
||||
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">
|
||||
<div className="flex gap-3 text-sm leading-6 text-slate-300">
|
||||
<span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TroubleCard({ item, links }) {
|
||||
return (
|
||||
<a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<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>
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
|
||||
<span className="text-slate-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function UploadHelpPage() {
|
||||
const { props } = usePage()
|
||||
const links = props.links || {}
|
||||
|
||||
const jsonLd = [
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: 'Upload Help',
|
||||
description: props.description,
|
||||
url: props.seo?.canonical,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: 'Skinbase',
|
||||
},
|
||||
about: ['Upload workflow', 'Drafts', 'Publishing', 'Contributor credit', 'Group uploads'],
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
|
||||
...item,
|
||||
href: links[item.linkKey],
|
||||
}))
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),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={jsonLd} />
|
||||
|
||||
<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">Upload help</p>
|
||||
<h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Uploading on Skinbase is a guided workflow, not just a raw file submission.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains how uploads move from file submission to draft, review, and final publish. It is designed to help you upload confidently, prepare the right details in advance, avoid common context mistakes, and understand what to do when something feels stuck.</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a href={links.upload} 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">Start an upload</a>
|
||||
<a href={links.studio_help} 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]">Read Studio help</a>
|
||||
<a href={links.groups_help} 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]">Read Groups help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
{HERO_METRICS.map((metric) => (
|
||||
<HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
|
||||
))}
|
||||
</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} ariaLabel="Upload help sections" selectLabel="Jump to Upload help section" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<DocsSection
|
||||
id="how-uploading-works"
|
||||
eyebrow="Workflow"
|
||||
title="How uploading works"
|
||||
summary="Uploading is designed to feel understandable and safe. The workflow gives you space to review and finish the public version before it goes live."
|
||||
>
|
||||
<DocsStepList items={WORKFLOW_STEPS} />
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="note" title="Why draft-first upload exists">
|
||||
Drafts reduce rushed submissions. They give you a chance to review context, metadata, previews, and contributor credit before the upload becomes public.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="prepare-before-upload"
|
||||
eyebrow="Preparation"
|
||||
title="What to prepare before upload"
|
||||
summary="The better prepared you are before upload starts, the less likely you are to end up with an unfinished draft, weak presentation, or incorrect publishing context."
|
||||
>
|
||||
<BulletGrid items={PREP_ITEMS} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="personal-vs-group"
|
||||
eyebrow="Context"
|
||||
title="Personal upload vs Group upload"
|
||||
summary="The most important upload decision is not just the file. It is whether the work should publish under your personal identity or under a Group."
|
||||
>
|
||||
<DocsComparisonTable
|
||||
columns={UPLOAD_COMPARISON_COLUMNS}
|
||||
rows={UPLOAD_COMPARISON_ROWS}
|
||||
caption="Comparison between Personal upload and Group upload"
|
||||
/>
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<DocsCallout tone="warning" title="Always verify context before final publish">
|
||||
The wrong context can turn a correct upload into the wrong public record. Check whether the work belongs to you or to a Group before the final step.
|
||||
</DocsCallout>
|
||||
<DocsCallout tone="tip" title="When in doubt, open Groups help">
|
||||
If the upload involves shared ownership, contributor credit, or review queues, the Groups guide is the next best place to clarify how the upload should behave.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="draft-flow"
|
||||
eyebrow="Drafts"
|
||||
title="Draft flow"
|
||||
summary="Uploads usually begin as drafts so you can finish the details deliberately instead of publishing a half-finished item by accident."
|
||||
>
|
||||
<BulletGrid items={DRAFT_FLOW_ITEMS} tone="sky" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="publish-flow"
|
||||
eyebrow="Publish"
|
||||
title="Publish flow"
|
||||
summary="Publish is the final decision point. By the time you reach it, the file, context, metadata, and contributor details should already feel solid."
|
||||
>
|
||||
<BulletGrid items={PUBLISH_FLOW_ITEMS} tone="amber" />
|
||||
|
||||
<div className="mt-6">
|
||||
<DocsCallout tone="practice" title="Treat final publish like a checklist moment">
|
||||
If something still feels unclear, stop and review it before publishing. A short pause now is cheaper than cleaning up a public mistake later.
|
||||
</DocsCallout>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="file-preview-metadata"
|
||||
eyebrow="Presentation"
|
||||
title="File, preview, and metadata basics"
|
||||
summary="Strong uploads are not only about file quality. They also depend on how clearly the work is presented and how understandable it feels to other people."
|
||||
>
|
||||
<BulletGrid items={FILE_METADATA_ITEMS} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="contributor-credit"
|
||||
eyebrow="Credit"
|
||||
title="Contributor credit during upload"
|
||||
summary="Upload identity, published identity, and authorship are related, but they are not always the same thing. That matters most in collaborative and Group uploads."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<div>
|
||||
<BulletGrid items={CREDIT_BULLETS} tone="sky" />
|
||||
</div>
|
||||
<div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Simple example</p>
|
||||
<div className="mt-4 space-y-3">
|
||||
{CREDIT_EXAMPLE.map((entry) => (
|
||||
<div key={entry.label} className="rounded-[20px] border border-white/10 bg-white/[0.03] p-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{entry.label}</div>
|
||||
<div className="mt-2 text-sm font-semibold text-white">{entry.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="best-practices"
|
||||
eyebrow="Best practices"
|
||||
title="Best practices"
|
||||
summary="The best upload habits are simple: prepare before you start, review before you publish, and keep the workspace clean enough that you can trust what you are looking at."
|
||||
>
|
||||
<BulletGrid items={BEST_PRACTICES} tone="emerald" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="common-mistakes"
|
||||
eyebrow="Avoid this"
|
||||
title="Common mistakes"
|
||||
summary="Most upload problems are not technical failures. They come from skipping review steps, using the wrong context, or leaving too many things unfinished at once."
|
||||
>
|
||||
<BulletGrid items={COMMON_MISTAKES} tone="amber" />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="faq"
|
||||
eyebrow="FAQ"
|
||||
title="Upload FAQ"
|
||||
summary="These answers cover the most common questions people ask when an upload becomes a draft, stalls before publish, or behaves differently inside a Group."
|
||||
>
|
||||
<DocsFaqAccordion items={FAQ_ITEMS} />
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="troubleshooting"
|
||||
eyebrow="Troubleshooting"
|
||||
title="Troubleshooting"
|
||||
summary="Use these shortcuts when the upload workflow feels stalled, confusing, or inconsistent."
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{TROUBLESHOOTING_ITEMS.map((item) => (
|
||||
<TroubleCard key={item.title} item={item} links={links} />
|
||||
))}
|
||||
</div>
|
||||
</DocsSection>
|
||||
|
||||
<DocsSection
|
||||
id="related-help"
|
||||
eyebrow="Next steps"
|
||||
title="Related help"
|
||||
summary="Use these links when the upload workflow is clear and you need the next layer of guidance around Studio, Groups, profile context, or adjacent creative tools."
|
||||
>
|
||||
<QuickstartNextSteps items={relatedHelpItems} />
|
||||
</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 route map</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
<a href={links.upload} 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]">Start upload</a>
|
||||
<a href={links.studio_drafts} 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 drafts</a>
|
||||
<a href={links.studio_help} 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]">Read Studio help</a>
|
||||
<a href={links.groups_help} 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]">Read Groups help</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">Fast reminder</div>
|
||||
<p className="mt-2 text-sm leading-6 text-amber-50/85">If an upload feels wrong, check three things first: context, draft state, and contributor credit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'what-account-help-covers', label: 'What this covers' },
|
||||
{ id: 'settings-areas', label: 'Settings areas' },
|
||||
{ id: 'email-and-password', label: 'Email and password' },
|
||||
{ id: 'profile-and-preferences', label: 'Profile and preferences' },
|
||||
{ id: 'maintenance-habits', label: 'Maintenance habits' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'Best use case',
|
||||
value: 'Access works, settings need attention',
|
||||
note: 'This guide starts after login succeeds and you need help managing the account instead of regaining it.',
|
||||
},
|
||||
{
|
||||
label: 'Main surface',
|
||||
value: 'Dashboard profile settings',
|
||||
note: 'Most account, profile, notification, and password changes flow through the main settings area tied to your creator identity.',
|
||||
},
|
||||
{
|
||||
label: 'Common confusion',
|
||||
value: 'Settings issue vs access issue',
|
||||
note: 'A surprising number of “account problems” are really login, verification, or troubleshooting problems wearing a different label.',
|
||||
},
|
||||
]
|
||||
|
||||
export const COVERAGE_ITEMS = [
|
||||
{
|
||||
title: 'Account help is broader than login help',
|
||||
body: 'Use this page when you are already in the account, or know how to get back into it, and need guidance for settings, identity details, preferences, or maintenance.',
|
||||
},
|
||||
{
|
||||
title: 'Settings shape both behavior and presentation',
|
||||
body: 'Account choices affect how your public identity reads, how notifications reach you, and how safely you can recover or maintain access over time.',
|
||||
},
|
||||
{
|
||||
title: 'Not every question belongs in one settings panel',
|
||||
body: 'Some issues live in profile setup, some in security and email care, and some in creator workflow pages such as Studio. Separating those questions keeps fixes faster.',
|
||||
},
|
||||
]
|
||||
|
||||
export const SETTINGS_AREA_ITEMS = [
|
||||
{
|
||||
title: 'Profile and public identity',
|
||||
body: 'This is where presentation work matters most: avatar, bio, creator-facing details, and the way other people understand you when they land on the profile.',
|
||||
},
|
||||
{
|
||||
title: 'Account basics and email changes',
|
||||
body: 'Your account email needs to stay current because recovery, verification, and important notices depend on it reaching the right inbox.',
|
||||
},
|
||||
{
|
||||
title: 'Security and password care',
|
||||
body: 'Password updates and basic security hygiene belong to account maintenance, not crisis mode. They are easier to handle before something breaks.',
|
||||
},
|
||||
{
|
||||
title: 'Notifications and personal preferences',
|
||||
body: 'Notification settings decide how noisy or quiet the platform feels. Personal details and preference changes can make the account feel more stable day to day.',
|
||||
},
|
||||
]
|
||||
|
||||
export const EMAIL_PASSWORD_STEPS = [
|
||||
{
|
||||
title: 'Open account settings intentionally',
|
||||
description: 'Start from the authenticated settings surface instead of hunting for one-off forms across the product. That keeps related account changes in one place.',
|
||||
},
|
||||
{
|
||||
title: 'Confirm you are editing the correct account',
|
||||
description: 'This matters most if you manage more than one identity, recently switched devices, or are returning after a recovery flow.',
|
||||
},
|
||||
{
|
||||
title: 'Change the minimum necessary fields carefully',
|
||||
description: 'When updating email or password, reduce avoidable mistakes by changing one sensitive area at a time and confirming the result before moving on.',
|
||||
},
|
||||
{
|
||||
title: 'Watch for follow-up verification or confirmation',
|
||||
description: 'Email-related changes often require a follow-up message or verification step. Do not assume the change finished until that path is complete.',
|
||||
},
|
||||
{
|
||||
title: 'Return to troubleshooting only if something blocks the change',
|
||||
description: 'If an update fails, diagnose that failure directly instead of treating every blocked settings action as a generic login issue.',
|
||||
},
|
||||
]
|
||||
|
||||
export const PROFILE_PREFERENCE_ITEMS = [
|
||||
'Keep your avatar, display details, and short bio current enough that the profile still feels like you.',
|
||||
'Use profile settings for public identity questions and the auth guide for account-entry questions so you do not mix two different problem types.',
|
||||
'Trim notification noise deliberately instead of turning everything on and then missing what actually matters.',
|
||||
'Treat personal details, messaging preferences, and creator-facing settings as maintenance work rather than last-minute cleanup.',
|
||||
]
|
||||
|
||||
export const MAINTENANCE_HABITS = [
|
||||
'Keep the account email reachable so resets, verification, and important notices do not disappear into an abandoned inbox.',
|
||||
'Update passwords proactively when something feels off instead of waiting for a failure moment.',
|
||||
'Review settings after major workflow changes such as new devices, new collaboration patterns, or a shift in what you publish publicly.',
|
||||
'Use troubleshooting only when the settings surface feels blocked or broken, not for normal questions the guide can answer directly.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'What is the difference between auth help and account help?',
|
||||
answer: 'Auth help is about getting into the account. Account help is about what you manage after access works, such as settings, identity details, notifications, and password care.',
|
||||
},
|
||||
{
|
||||
question: 'Where should I change my profile details?',
|
||||
answer: 'Use the main profile settings surface for public identity details such as avatar, bio, and related creator-facing information.',
|
||||
},
|
||||
{
|
||||
question: 'Where should I change my password?',
|
||||
answer: 'Use the authenticated account settings surface for password changes. If you cannot reach that surface because access failed, switch to the auth help and recovery path instead.',
|
||||
},
|
||||
{
|
||||
question: 'What if changing email or password does not work?',
|
||||
answer: 'Move into the troubleshooting page if the settings flow appears blocked, broken, or inconsistent instead of assuming the whole account is unusable.',
|
||||
},
|
||||
{
|
||||
question: 'Does account help replace profile help?',
|
||||
answer: 'No. Profile help goes deeper on public identity and presentation. Account help stays broader and covers the settings side of maintaining the account over time.',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Access',
|
||||
title: 'Signup and login help',
|
||||
body: 'Use the auth guide when the problem is getting into the account at all rather than maintaining it after access succeeds.',
|
||||
linkKey: 'help_auth',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Identity',
|
||||
title: 'Profile help',
|
||||
body: 'Use the profile guide when the question is more about public identity, creator presentation, and what visitors actually see.',
|
||||
linkKey: 'help_profile',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Fixes fast',
|
||||
title: 'Troubleshooting help',
|
||||
body: 'Use the troubleshooting page when settings actions feel blocked, inconsistent, or clearly broken and you need diagnosis first.',
|
||||
linkKey: 'help_troubleshooting',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Workflow',
|
||||
title: 'Studio help',
|
||||
body: 'Use the Studio guide when the issue stops being about the account itself and starts living in drafts, publishing, or creator workflows.',
|
||||
linkKey: 'studio_help',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,230 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'creating-an-account', label: 'Creating an account' },
|
||||
{ id: 'logging-in', label: 'Logging in' },
|
||||
{ id: 'password-reset-recovery', label: 'Password reset / recovery' },
|
||||
{ id: 'access-and-verification', label: 'Access and verification basics' },
|
||||
{ id: 'safety-and-protection', label: 'Safety and protection' },
|
||||
{ id: 'common-mistakes', label: 'Common mistakes' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'troubleshooting', label: 'Troubleshooting' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'What this unlocks',
|
||||
value: 'Identity and workspace access',
|
||||
note: 'Signup and login are how you reach your profile, enter Studio, and manage the rest of your creator workflow on Skinbase Nova.',
|
||||
},
|
||||
{
|
||||
label: 'Most common blocker',
|
||||
value: 'Recovery and verification confusion',
|
||||
note: 'Many access problems are solved by the right recovery step, the right email, or a quick check of what the account is still waiting for.',
|
||||
},
|
||||
{
|
||||
label: 'Golden rule',
|
||||
value: 'Slow down and check the basics',
|
||||
note: 'The fastest fix usually comes from verifying the email, password, inbox, or permissions question before assuming the whole account is broken.',
|
||||
},
|
||||
]
|
||||
|
||||
export const SIGNUP_STEPS = [
|
||||
{
|
||||
title: 'Open signup',
|
||||
description: 'Start from the account creation flow rather than trying to enter the platform through a sign-in screen that expects an existing account.',
|
||||
},
|
||||
{
|
||||
title: 'Enter the required details carefully',
|
||||
description: 'Use the email address you actually want tied to your Skinbase identity and choose account details you can remember and manage later.',
|
||||
},
|
||||
{
|
||||
title: 'Create the account',
|
||||
description: 'Finish the signup step, then watch for any confirmation or verification message the account may still need before it is fully usable.',
|
||||
},
|
||||
{
|
||||
title: 'Verify if required',
|
||||
description: 'Some flows may ask you to confirm access through email or verification before certain parts of the platform open up completely.',
|
||||
},
|
||||
{
|
||||
title: 'Continue into profile setup or the platform',
|
||||
description: 'Once access is working, the next useful step is usually profile setup, Studio access, or your first publishing workflow.',
|
||||
},
|
||||
]
|
||||
|
||||
export const LOGIN_STEPS = [
|
||||
{
|
||||
title: 'Open login',
|
||||
description: 'Go to the sign-in flow when you already have an account and want to return to your Skinbase identity and creator tools.',
|
||||
},
|
||||
{
|
||||
title: 'Enter your credentials carefully',
|
||||
description: 'Use the same email and password combination tied to the account you actually want to access. Small mismatches cause a surprising number of login problems.',
|
||||
},
|
||||
{
|
||||
title: 'Enter the platform',
|
||||
description: 'A successful login takes you back into your account so you can continue to Studio, profile settings, and your other authenticated creator surfaces.',
|
||||
},
|
||||
{
|
||||
title: 'Use remembered sessions carefully',
|
||||
description: 'If the device is personal, remembered sessions can save time. If it is shared, log out when you are done instead of leaving account access open.',
|
||||
},
|
||||
]
|
||||
|
||||
export const RECOVERY_STEPS = [
|
||||
{
|
||||
title: 'Open password recovery',
|
||||
description: 'If you forgot the password, start with the reset flow instead of guessing repeatedly until you get locked into more confusion.',
|
||||
},
|
||||
{
|
||||
title: 'Request the reset message',
|
||||
description: 'Enter the email you believe is tied to the account and let the recovery flow send the reset instructions.',
|
||||
},
|
||||
{
|
||||
title: 'Check the right inbox',
|
||||
description: 'Look in spam, promotions, or other folders if the message does not show up immediately. Wrong inboxes and old emails are common causes of panic.',
|
||||
},
|
||||
{
|
||||
title: 'Finish the reset with a new password',
|
||||
description: 'Choose a password you can manage safely and use the new credentials when returning to the login flow.',
|
||||
},
|
||||
]
|
||||
|
||||
export const ACCESS_BASICS_ITEMS = [
|
||||
{
|
||||
title: 'Verification can affect access',
|
||||
body: 'Some accounts may still need email confirmation or another verification step before every feature behaves the way a fully active account would expect.',
|
||||
},
|
||||
{
|
||||
title: 'Access problems are not always login problems',
|
||||
body: 'You can be logged in and still hit limits caused by verification state, incomplete setup, or permissions inside a Group or shared workflow.',
|
||||
},
|
||||
{
|
||||
title: 'Permissions and account access are different things',
|
||||
body: 'Entering the account is not the same as having permission inside every collaboration surface. Group roles and approvals can still control what you see or can do.',
|
||||
},
|
||||
]
|
||||
|
||||
export const SAFETY_ITEMS = [
|
||||
'Use a strong password that you are not reusing everywhere else.',
|
||||
'Do not share your credentials, even with collaborators or friends who work with you on Groups.',
|
||||
'Keep the account email current so recovery messages can actually reach you.',
|
||||
'Log out on shared devices instead of trusting remembered sessions in public or borrowed spaces.',
|
||||
'Review account and security-related settings when something about access changes or starts to feel off.',
|
||||
]
|
||||
|
||||
export const COMMON_MISTAKES = [
|
||||
'Signing up with the wrong email and then waiting for messages in a different inbox.',
|
||||
'Forgetting which credentials or login method belong to the account you are trying to access.',
|
||||
'Waiting for a reset or verification email while checking the wrong folder or wrong email account.',
|
||||
'Trying an outdated password repeatedly instead of moving directly into recovery.',
|
||||
'Assuming a Group or Profile workflow issue is a login problem when the account is actually signed in correctly.',
|
||||
'Confusing account access with Group permissions and expecting login alone to unlock restricted team actions.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'How do I create an account?',
|
||||
answer: 'Open signup, enter the required details carefully, finish the account creation step, and then complete any verification or follow-up setup the account still needs.',
|
||||
},
|
||||
{
|
||||
question: 'How do I log in?',
|
||||
answer: 'Open the login page, enter the email and password tied to your account, and continue into your authenticated creator workspace once access succeeds.',
|
||||
},
|
||||
{
|
||||
question: 'What should I do if I forgot my password?',
|
||||
answer: 'Use the password recovery flow instead of guessing repeatedly. It is the fastest route back into the account when the password is no longer clear.',
|
||||
},
|
||||
{
|
||||
question: 'Why didn’t I receive a verification or reset email?',
|
||||
answer: 'Check the email address you used, then check spam or other inbox folders. A lot of recovery confusion comes from using the wrong email or watching the wrong inbox.',
|
||||
},
|
||||
{
|
||||
question: 'Why can’t I access certain features after login?',
|
||||
answer: 'You may be signed in correctly but still dealing with verification state, incomplete setup, or permissions that belong to a Group or shared workflow rather than simple account access.',
|
||||
},
|
||||
{
|
||||
question: 'Is login the same as having permission inside a Group?',
|
||||
answer: 'No. Login proves account access. Group permissions are separate and can still limit what you are allowed to do inside collaborative spaces.',
|
||||
},
|
||||
{
|
||||
question: 'Can I change account information later?',
|
||||
answer: 'Yes. Once you are back in the account, profile and account settings can be updated through the normal authenticated settings surfaces.',
|
||||
},
|
||||
]
|
||||
|
||||
export const TROUBLESHOOTING_ITEMS = [
|
||||
{
|
||||
title: 'I can’t log in',
|
||||
body: 'Start with the login page, then slow down and re-check the email, password, and whether you are trying to enter the correct account.',
|
||||
linkKey: 'login',
|
||||
linkLabel: 'Open login',
|
||||
},
|
||||
{
|
||||
title: 'I forgot my password',
|
||||
body: 'Use recovery instead of repeated guessing. The password reset flow is the fastest path back when the credentials no longer feel reliable.',
|
||||
linkKey: 'password_request',
|
||||
linkLabel: 'Reset password',
|
||||
},
|
||||
{
|
||||
title: 'I didn’t receive the email',
|
||||
body: 'Check spam, promotions, and the exact email account you used during signup or recovery. Many “missing email” issues turn out to be inbox mix-ups.',
|
||||
linkKey: 'password_request',
|
||||
linkLabel: 'Retry recovery',
|
||||
},
|
||||
{
|
||||
title: 'I signed up but can’t access something',
|
||||
body: 'The missing step may be verification or post-signup setup rather than broken login. If access still feels partial, revisit the recovery and support paths carefully.',
|
||||
linkKey: 'help_troubleshooting',
|
||||
linkLabel: 'Open troubleshooting hub',
|
||||
},
|
||||
{
|
||||
title: 'I’m logged in but still missing permissions',
|
||||
body: 'That usually points to Group roles or workflow permissions rather than a sign-in failure. Check the Groups guide if the issue lives inside a shared workspace.',
|
||||
linkKey: 'groups_help',
|
||||
linkLabel: 'Read Groups help',
|
||||
},
|
||||
{
|
||||
title: 'I think I used the wrong email',
|
||||
body: 'Return to the recovery flow and try the email you most likely used at signup. If that still fails, contact support with a clear explanation instead of guessing endlessly.',
|
||||
linkKey: 'contact_support',
|
||||
linkLabel: 'Contact support',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Account settings help',
|
||||
body: 'Use the account guide when access already works and the real question is about settings, email changes, password care, or ongoing account maintenance.',
|
||||
linkKey: 'help_account',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Profile help',
|
||||
body: 'Use the Profile guide once account access is working and you need help turning that access into a stronger public identity.',
|
||||
linkKey: 'help_profile',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Studio help',
|
||||
body: 'Use the Studio guide when the real question starts after login and moves into drafts, publishing, and the main creator workspace.',
|
||||
linkKey: 'studio_help',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Groups help',
|
||||
body: 'Use the Groups guide if you are signed in correctly but the real blocker is collaboration roles, permissions, or Group workflow behavior.',
|
||||
linkKey: 'groups_help',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Support path',
|
||||
title: 'Troubleshooting hub',
|
||||
body: 'Use the dedicated troubleshooting page when the access problem is still unclear and you need faster diagnosis before opening a deeper module guide.',
|
||||
linkKey: 'help_troubleshooting',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,293 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'what-cards-are', label: 'What Cards are' },
|
||||
{ id: 'cards-vs-other-formats', label: 'Cards vs other formats' },
|
||||
{ id: 'how-to-create', label: 'How to create a Card' },
|
||||
{ id: 'publishing-and-ownership', label: 'Publishing and ownership' },
|
||||
{ id: 'personal-and-group-workflows', label: 'Personal and Group workflows' },
|
||||
{ id: 'best-practices', label: 'Best practices' },
|
||||
{ id: 'common-mistakes', label: 'Common mistakes' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'troubleshooting', label: 'Troubleshooting' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'Format role',
|
||||
value: 'Visual communication format',
|
||||
note: 'Cards are best when you want a designed message, presentation, or editorial visual rather than a straightforward artwork upload.',
|
||||
},
|
||||
{
|
||||
label: 'Best for',
|
||||
value: 'Short, styled ideas',
|
||||
note: 'Use Cards for quote designs, promo visuals, themed statements, highlight pieces, and compact presentation content.',
|
||||
},
|
||||
{
|
||||
label: 'Golden rule',
|
||||
value: 'Match the message to the format',
|
||||
note: 'Choose Cards when design and presentation are part of the message, not just decoration added afterward.',
|
||||
},
|
||||
]
|
||||
|
||||
export const WHAT_CARDS_ARE_ITEMS = [
|
||||
{
|
||||
title: 'Cards are designed content units',
|
||||
body: 'A Card is a creative format built for presentation, visual storytelling, and styled communication. It is meant to carry an idea clearly, not just display a raw asset.',
|
||||
},
|
||||
{
|
||||
title: 'Cards are flexible, not vague',
|
||||
body: 'They can be visual statements, promo pieces, quote graphics, short editorial concepts, or support content around a wider project or collection.',
|
||||
},
|
||||
{
|
||||
title: 'Cards are not a replacement for everything',
|
||||
body: 'Some ideas should stay artworks, some should be posts, and some belong inside collections. Cards work best when presentation and message need to live together in one polished format.',
|
||||
},
|
||||
]
|
||||
|
||||
export const FORMAT_SIGNAL_ITEMS = [
|
||||
'Use Cards when layout, typography, or composition are part of the meaning.',
|
||||
'Use Cards when you want a clean public-facing visual without turning it into a full artwork upload.',
|
||||
'Use Cards when a post feels too plain but a collection feels too large for the idea you want to publish.',
|
||||
]
|
||||
|
||||
export const COMPARISON_COLUMNS = [
|
||||
{ key: 'topic', label: 'Topic' },
|
||||
{ key: 'cards', label: 'Cards' },
|
||||
{ key: 'artworks', label: 'Artworks' },
|
||||
{ key: 'posts', label: 'Posts' },
|
||||
{ key: 'collections', label: 'Collections' },
|
||||
]
|
||||
|
||||
export const COMPARISON_ROWS = [
|
||||
{
|
||||
id: 'primary-job',
|
||||
topic: 'Primary job',
|
||||
cards: 'Designed visual communication, editorial presentation, or compact storytelling.',
|
||||
artworks: 'A main creative work or finished visual creation published as its own piece.',
|
||||
posts: 'Updates, announcements, status sharing, or direct communication.',
|
||||
collections: 'Grouping related items into a bigger curated set or presentation.',
|
||||
},
|
||||
{
|
||||
id: 'best-when',
|
||||
topic: 'Best when',
|
||||
cards: 'The look, message, and layout all matter together.',
|
||||
artworks: 'The work itself is the central thing being shown.',
|
||||
posts: 'You need clarity and speed more than designed presentation.',
|
||||
collections: 'You want to organize multiple related works into one structured view.',
|
||||
},
|
||||
{
|
||||
id: 'audience-expectation',
|
||||
topic: 'Audience expectation',
|
||||
cards: 'A polished visual statement or concise editorial piece.',
|
||||
artworks: 'A primary artwork worthy of direct viewing and appreciation.',
|
||||
posts: 'A message, update, or announcement to read quickly.',
|
||||
collections: 'A curated journey through more than one item.',
|
||||
},
|
||||
{
|
||||
id: 'scale',
|
||||
topic: 'Typical scale',
|
||||
cards: 'One focused idea, concept, or promo moment.',
|
||||
artworks: 'One major visual work.',
|
||||
posts: 'One update or communication moment.',
|
||||
collections: 'Multiple related works or references gathered together.',
|
||||
},
|
||||
{
|
||||
id: 'common-misuse',
|
||||
topic: 'Common misuse',
|
||||
cards: 'Turning every message into a design exercise even when a post would be clearer.',
|
||||
artworks: 'Uploading presentation graphics that are not really artworks.',
|
||||
posts: 'Using posts when the message needs stronger visual presentation.',
|
||||
collections: 'Making a collection when one good Card or one good artwork would communicate faster.',
|
||||
},
|
||||
]
|
||||
|
||||
export const CREATION_STEPS = [
|
||||
{
|
||||
title: 'Open Studio',
|
||||
description: 'Start in Studio so you are working inside the creator workspace rather than trying to manage Cards from public pages.',
|
||||
},
|
||||
{
|
||||
title: 'Choose the Cards area',
|
||||
description: 'Move into the Cards workflow where you can create, edit, preview, and manage Card-specific content deliberately.',
|
||||
},
|
||||
{
|
||||
title: 'Create a new Card',
|
||||
description: 'Begin a new Card when you know the message, idea, or visual concept you want the format to carry.',
|
||||
},
|
||||
{
|
||||
title: 'Add title, content, and design choices',
|
||||
description: 'Fill in the content structure clearly. The best Cards feel intentional in both wording and presentation.',
|
||||
},
|
||||
{
|
||||
title: 'Preview the result',
|
||||
description: 'Check readability, balance, visual hierarchy, and whether the Card still communicates well outside the editor context.',
|
||||
},
|
||||
{
|
||||
title: 'Publish when the Card feels clear',
|
||||
description: 'Publish only when the message, design, and ownership context all feel correct for the public result you want.',
|
||||
},
|
||||
]
|
||||
|
||||
export const OWNERSHIP_ITEMS = [
|
||||
{
|
||||
title: 'Personal Cards',
|
||||
body: 'Personal Cards are best for profile highlights, visual notes, branded self-presentation, concept pieces, and compact editorial content under your own creator identity.',
|
||||
},
|
||||
{
|
||||
title: 'Group Cards',
|
||||
body: 'Group Cards are best for shared promos, event graphics, announcements, release support visuals, and presentation content that belongs to the Group rather than one member alone.',
|
||||
},
|
||||
]
|
||||
|
||||
export const OWNERSHIP_BULLETS = [
|
||||
'Check the active context before publishing so the Card goes live under the right identity.',
|
||||
'If a Card represents a shared campaign, promo, or announcement, Group ownership is often the better fit.',
|
||||
'Make authorship and contribution clear whenever more than one person shaped the final Card.',
|
||||
'Treat publishing context as part of quality control, not as a detail to fix later.',
|
||||
]
|
||||
|
||||
export const WORKFLOW_EXAMPLES = [
|
||||
{
|
||||
title: 'Personal profile highlight Card',
|
||||
body: 'Use a Card to introduce a creator direction, showcase a visual theme, or present a compact statement that sits well beside your published work.',
|
||||
},
|
||||
{
|
||||
title: 'Group promo Card',
|
||||
body: 'Use a Group Card for launches, campaigns, member spotlights, collaborations, or audience-facing promo moments that need a shared identity.',
|
||||
},
|
||||
{
|
||||
title: 'Themed editorial Card',
|
||||
body: 'Use a Card when you want one designed visual to communicate a mood, concept, or mini editorial idea without building a larger collection first.',
|
||||
},
|
||||
{
|
||||
title: 'Announcement Card',
|
||||
body: 'If the message should feel polished and visual, a Card can carry an announcement more effectively than a plain post.',
|
||||
},
|
||||
{
|
||||
title: 'Quote or concept Card',
|
||||
body: 'Cards are a strong fit for text-led ideas where typography, color, and layout are part of the creative statement.',
|
||||
},
|
||||
{
|
||||
title: 'Collection support Card',
|
||||
body: 'Use a Card to frame, promote, or introduce a collection without turning the collection itself into a wall of explanation.',
|
||||
},
|
||||
]
|
||||
|
||||
export const BEST_PRACTICES = [
|
||||
'Keep one Card focused on one clear message, theme, or visual purpose.',
|
||||
'Prioritize readability before decoration so the Card still works on smaller screens and quick scrolls.',
|
||||
'Use Cards when presentation adds value, not as a default replacement for artworks or posts.',
|
||||
'Keep branding, typography, and visual tone consistent when Cards support a wider project or Group identity.',
|
||||
'Publish fewer stronger Cards instead of flooding the feed with low-value variations.',
|
||||
'Preview the Card as a viewer would see it, not only as the creator sees it while editing.',
|
||||
]
|
||||
|
||||
export const COMMON_MISTAKES = [
|
||||
'Using a Card when the content should really be a finished artwork.',
|
||||
'Using a Card when a plain post would communicate the message faster and more clearly.',
|
||||
'Adding too much text, too many visual ideas, or too many competing styles into one Card.',
|
||||
'Publishing under the wrong personal-or-Group context and creating avoidable ownership confusion.',
|
||||
'Treating Card design as decoration instead of making it support the message itself.',
|
||||
'Letting typography, spacing, or hierarchy become inconsistent enough that the Card feels cluttered.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'What are Cards used for?',
|
||||
answer: 'Cards are used for visual communication, styled presentation, compact editorial ideas, quote graphics, promos, announcements, and other creative content where layout and message belong together.',
|
||||
},
|
||||
{
|
||||
question: 'How are Cards different from artworks?',
|
||||
answer: 'Artworks are primary creative works presented on their own. Cards are presentation-oriented content units that combine message, design, and visual framing more like a polished communication format.',
|
||||
},
|
||||
{
|
||||
question: 'Can Groups create Cards?',
|
||||
answer: 'Yes. Groups can use Cards for shared promo pieces, announcements, release support visuals, and other communication that belongs under a Group identity.',
|
||||
},
|
||||
{
|
||||
question: 'Should I use a Card or a post?',
|
||||
answer: 'Use a post when a straightforward update is enough. Use a Card when design and presentation are part of what makes the message land properly.',
|
||||
},
|
||||
{
|
||||
question: 'Can I manage Cards in Studio?',
|
||||
answer: 'Yes. Studio is the main workspace for creating, editing, previewing, and managing Cards before and after publishing.',
|
||||
},
|
||||
{
|
||||
question: 'Are Cards public?',
|
||||
answer: 'Cards become public when you publish them. Until then, the creation and management workflow belongs in Studio rather than on public profile or browse pages.',
|
||||
},
|
||||
{
|
||||
question: 'How should I design a good Card?',
|
||||
answer: 'Start with one clear idea, keep the visual hierarchy readable, avoid clutter, and make sure typography, spacing, and composition all support the message instead of competing with it.',
|
||||
},
|
||||
]
|
||||
|
||||
export const TROUBLESHOOTING_ITEMS = [
|
||||
{
|
||||
title: 'I can’t find Cards in Studio',
|
||||
body: 'Start by reopening the Cards workspace directly. If the workflow still feels missing, check whether you are in the right account state or creator context first.',
|
||||
linkKey: 'studio_cards',
|
||||
linkLabel: 'Open Cards workspace',
|
||||
},
|
||||
{
|
||||
title: 'I don’t know which content type to use',
|
||||
body: 'When the choice between Card, artwork, post, and collection still feels blurry, the wider Studio guide helps place each format inside the overall creator workflow.',
|
||||
linkKey: 'studio_help',
|
||||
linkLabel: 'Read Studio help',
|
||||
},
|
||||
{
|
||||
title: 'My Card looks cluttered',
|
||||
body: 'If the Card feels overloaded, simplify the message, reduce competing styles, and preview the result again before you publish or keep editing.',
|
||||
linkKey: 'create_card',
|
||||
linkLabel: 'Return to card creation',
|
||||
},
|
||||
{
|
||||
title: 'I published under the wrong context',
|
||||
body: 'Ownership confusion often comes from publishing under a personal context when the Card belongs to a Group, or the other way around. Use the Groups guide to correct the workflow deliberately.',
|
||||
linkKey: 'groups_help',
|
||||
linkLabel: 'Read Groups help',
|
||||
},
|
||||
{
|
||||
title: 'I can’t edit my Card',
|
||||
body: 'Go back through Studio rather than public pages. Cards are managed inside the workspace, so the edit path usually starts from Studio or the Cards area.',
|
||||
linkKey: 'open_studio',
|
||||
linkLabel: 'Open Studio',
|
||||
},
|
||||
{
|
||||
title: 'I expected Cards to behave like artworks',
|
||||
body: 'Cards are a different format with different goals. If the problem is really about publishing files, metadata, or the artwork draft flow, the upload guide is the better next step.',
|
||||
linkKey: 'upload_help',
|
||||
linkLabel: 'Read Upload help',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Studio help',
|
||||
body: 'Use the Studio guide when you want the wider workspace context around Cards, drafts, content management, and publishing decisions.',
|
||||
linkKey: 'studio_help',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Groups help',
|
||||
body: 'Use the Groups guide when Cards are part of a shared identity, campaign, review flow, or contributor-credit conversation.',
|
||||
linkKey: 'groups_help',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Upload help',
|
||||
body: 'Use the Upload guide if the real question is about artwork file publishing, drafts, metadata, or personal versus Group upload context.',
|
||||
linkKey: 'upload_help',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Profile help',
|
||||
body: 'Use the Profile guide if your Cards question is really about public identity, creator presentation, or how your personal presence should read to visitors.',
|
||||
linkKey: 'help_profile',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,663 @@
|
||||
export const SEARCH_SUGGESTIONS = [
|
||||
'upload image',
|
||||
'upload draft',
|
||||
'studio drafts',
|
||||
'group roles',
|
||||
'login issue',
|
||||
'auth help',
|
||||
'account settings',
|
||||
'change email',
|
||||
'troubleshooting',
|
||||
'forgot password',
|
||||
'create card',
|
||||
'cards help',
|
||||
'profile help',
|
||||
'profile bio',
|
||||
'publish artwork',
|
||||
'edit profile',
|
||||
]
|
||||
|
||||
export const HIGHLIGHTED_GUIDES = [
|
||||
{
|
||||
eyebrow: 'Live now',
|
||||
title: 'Upload help',
|
||||
description: 'A workflow-first guide to draft creation, metadata, previews, contributor credit, and final publish checks.',
|
||||
status: 'Guide',
|
||||
tone: 'amber',
|
||||
primaryLinkKey: 'upload_help',
|
||||
primaryLabel: 'Read Upload help',
|
||||
secondaryLinkKey: 'upload',
|
||||
secondaryLabel: 'Start upload',
|
||||
tags: ['upload', 'drafts', 'publish'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live now',
|
||||
title: 'Studio help',
|
||||
description: 'A creator-friendly guide to Personal Studio, Group Studio, drafts, publishing, and the main workspace areas.',
|
||||
status: 'Guide',
|
||||
tone: 'sky',
|
||||
primaryLinkKey: 'studio_help',
|
||||
primaryLabel: 'Read Studio help',
|
||||
secondaryLinkKey: 'open_studio',
|
||||
secondaryLabel: 'Open Studio',
|
||||
tags: ['studio', 'drafts', 'publishing'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live now',
|
||||
title: 'Cards help',
|
||||
description: 'A creator-friendly guide to what Cards are, when to use them, how to create them, and how they fit into personal and Group workflows.',
|
||||
status: 'Guide',
|
||||
tone: 'white',
|
||||
primaryLinkKey: 'help_cards',
|
||||
primaryLabel: 'Read Cards help',
|
||||
secondaryLinkKey: 'cards_create',
|
||||
secondaryLabel: 'Create a card',
|
||||
tags: ['cards', 'design', 'publishing'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live now',
|
||||
title: 'Profile help',
|
||||
description: 'A creator-friendly guide to personal identity, profile setup, profile-versus-Group clarity, and stronger public presentation on Skinbase Nova.',
|
||||
status: 'Guide',
|
||||
tone: 'white',
|
||||
primaryLinkKey: 'help_profile',
|
||||
primaryLabel: 'Read Profile help',
|
||||
secondaryLinkKey: 'profile_settings',
|
||||
secondaryLabel: 'Open profile settings',
|
||||
tags: ['profile', 'identity', 'onboarding'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live now',
|
||||
title: 'Signup and login help',
|
||||
description: 'A reassuring guide to account creation, sign-in, recovery, verification basics, and the fastest next steps for common access problems.',
|
||||
status: 'Guide',
|
||||
tone: 'amber',
|
||||
primaryLinkKey: 'help_auth',
|
||||
primaryLabel: 'Read auth help',
|
||||
secondaryLinkKey: 'password_request',
|
||||
secondaryLabel: 'Reset password',
|
||||
tags: ['login', 'signup', 'recovery'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live now',
|
||||
title: 'Groups documentation',
|
||||
description: 'The full Groups guide covering roles, publishing, contributor credit, workflows, and best practices.',
|
||||
status: 'Guide',
|
||||
tone: 'sky',
|
||||
primaryLinkKey: 'groups_documentation',
|
||||
primaryLabel: 'Read full guide',
|
||||
secondaryLinkKey: 'group_studio',
|
||||
secondaryLabel: 'Open Group Studio',
|
||||
tags: ['groups', 'publishing', 'roles'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Fast start',
|
||||
title: 'Groups quickstart',
|
||||
description: 'The shortest route to creating a Group, inviting members, and publishing correctly under a shared identity.',
|
||||
status: 'Quickstart',
|
||||
tone: 'amber',
|
||||
primaryLinkKey: 'groups_quickstart',
|
||||
primaryLabel: 'Open quickstart',
|
||||
secondaryLinkKey: 'create_group',
|
||||
secondaryLabel: 'Create a Group',
|
||||
tags: ['groups', 'quickstart', 'onboarding'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Answers fast',
|
||||
title: 'Groups FAQ',
|
||||
description: 'Quick answers about permissions, contributor credit, invites, approvals, and common troubleshooting.',
|
||||
status: 'FAQ',
|
||||
tone: 'white',
|
||||
primaryLinkKey: 'groups_faq',
|
||||
primaryLabel: 'Open FAQ',
|
||||
secondaryLinkKey: 'groups_directory',
|
||||
secondaryLabel: 'Browse Groups',
|
||||
tags: ['groups', 'faq', 'troubleshooting'],
|
||||
},
|
||||
]
|
||||
|
||||
export const FEATURED_GUIDES = [
|
||||
{
|
||||
eyebrow: 'Priority topic',
|
||||
title: 'Groups',
|
||||
description: 'Create shared identities, invite members, and publish together while preserving contributor credit and accountability.',
|
||||
status: 'Live now',
|
||||
tone: 'sky',
|
||||
plannedPath: '/help/groups',
|
||||
primaryLinkKey: 'groups_documentation',
|
||||
primaryLabel: 'Read Groups help',
|
||||
secondaryLinkKey: 'groups_quickstart',
|
||||
secondaryLabel: 'Open quickstart',
|
||||
highlights: ['Full guide, quickstart, and FAQ already live', 'Best for collaborative publishing and group workflows'],
|
||||
tags: ['groups', 'contributors', 'roles'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Priority topic',
|
||||
title: 'Studio',
|
||||
description: 'Learn the workspace for drafts, scheduling, content management, publishing, analytics, and creator operations.',
|
||||
status: 'Live now',
|
||||
tone: 'white',
|
||||
plannedPath: '/help/studio',
|
||||
primaryLinkKey: 'studio_help',
|
||||
primaryLabel: 'Read Studio help',
|
||||
secondaryLinkKey: 'open_studio',
|
||||
secondaryLabel: 'Open Studio',
|
||||
highlights: ['Now live as the first non-Groups module help page', 'Explains drafts, publishing, and context switching clearly'],
|
||||
tags: ['studio', 'drafts', 'publishing'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Priority topic',
|
||||
title: 'Upload',
|
||||
description: 'Get help with preparing images, starting uploads, handling drafts, and publishing without losing context or metadata.',
|
||||
status: 'Live now',
|
||||
tone: 'white',
|
||||
plannedPath: '/help/upload',
|
||||
primaryLinkKey: 'upload_help',
|
||||
primaryLabel: 'Read Upload help',
|
||||
secondaryLinkKey: 'studio_artworks',
|
||||
secondaryLabel: 'Open Studio artworks',
|
||||
highlights: ['Now live as the dedicated upload workflow guide', 'Explains draft flow, publish flow, and context clearly'],
|
||||
tags: ['upload', 'artworks', 'drafts'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Priority topic',
|
||||
title: 'Cards',
|
||||
description: 'Understand what Cards are, how they differ from artworks, posts, and collections, and how to create and publish them well.',
|
||||
status: 'Live now',
|
||||
tone: 'white',
|
||||
plannedPath: '/help/cards',
|
||||
primaryLinkKey: 'help_cards',
|
||||
primaryLabel: 'Read Cards help',
|
||||
secondaryLinkKey: 'cards_index',
|
||||
secondaryLabel: 'Browse cards',
|
||||
highlights: ['Now live as the dedicated Cards format guide', 'Explains format choice, ownership, and creator-friendly best practices'],
|
||||
tags: ['cards', 'design', 'editorial'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Priority topic',
|
||||
title: 'Profile',
|
||||
description: 'Set up your public identity, understand profile-versus-Group clarity, and improve the way your creator presence reads to other people.',
|
||||
status: 'Live now',
|
||||
tone: 'white',
|
||||
plannedPath: '/help/profile',
|
||||
primaryLinkKey: 'help_profile',
|
||||
primaryLabel: 'Read Profile help',
|
||||
secondaryLinkKey: 'profile_settings',
|
||||
secondaryLabel: 'Open profile settings',
|
||||
highlights: ['Now live as the dedicated profile identity guide', 'Explains setup, presentation, and profile-versus-Group clarity'],
|
||||
tags: ['profile', 'identity', 'settings'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Priority topic',
|
||||
title: 'Signup / Login',
|
||||
description: 'Learn how access, registration, password recovery, and account entry work so creators can get in and stay productive.',
|
||||
status: 'Live now',
|
||||
tone: 'amber',
|
||||
plannedPath: '/help/auth',
|
||||
primaryLinkKey: 'help_auth',
|
||||
primaryLabel: 'Read auth help',
|
||||
secondaryLinkKey: 'password_request',
|
||||
secondaryLabel: 'Recover account access',
|
||||
highlights: ['Now live as the dedicated signup and login guide', 'Explains recovery, verification basics, and permission-vs-access confusion clearly'],
|
||||
tags: ['login', 'signup', 'access'],
|
||||
},
|
||||
]
|
||||
|
||||
export const HELP_CATEGORIES = [
|
||||
{
|
||||
id: 'core-platform',
|
||||
label: 'Core platform',
|
||||
title: 'Core platform',
|
||||
summary: 'Account setup, identity, and platform basics for new and returning creators.',
|
||||
topics: [
|
||||
{
|
||||
eyebrow: 'Get started',
|
||||
title: 'Signup / Login',
|
||||
description: 'Account access, registration, password recovery, and getting back into Skinbase quickly.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/auth',
|
||||
primaryLinkKey: 'help_auth',
|
||||
primaryLabel: 'Read auth help',
|
||||
secondaryLinkKey: 'register',
|
||||
secondaryLabel: 'Create account',
|
||||
tags: ['login', 'signup', 'access'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Identity',
|
||||
title: 'Profile',
|
||||
description: 'Learn how profiles work, how to present yourself better, and how to keep your personal identity distinct from Group identity.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/profile',
|
||||
primaryLinkKey: 'help_profile',
|
||||
primaryLabel: 'Read Profile help',
|
||||
secondaryLinkKey: 'profile_settings',
|
||||
secondaryLabel: 'Open settings',
|
||||
tags: ['profile', 'identity', 'settings'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Account',
|
||||
title: 'Account settings',
|
||||
description: 'Use account and dashboard settings to control profile details, security flows, and creator preferences.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/account',
|
||||
primaryLinkKey: 'help_account',
|
||||
primaryLabel: 'Read account help',
|
||||
secondaryLinkKey: 'profile_settings',
|
||||
secondaryLabel: 'Open account settings',
|
||||
tags: ['account', 'settings', 'dashboard'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Safety',
|
||||
title: 'Privacy & safety',
|
||||
description: 'Future help coverage for privacy decisions, safety guidance, and account support concerns.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/privacy',
|
||||
primaryLinkKey: 'contact_support',
|
||||
primaryLabel: 'Contact support',
|
||||
tags: ['privacy', 'safety', 'support'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'creation-and-publishing',
|
||||
label: 'Creation & publishing',
|
||||
title: 'Creation and publishing',
|
||||
summary: 'The main surfaces creators use to make, edit, organize, and publish work on Skinbase Nova.',
|
||||
topics: [
|
||||
{
|
||||
eyebrow: 'Workspace',
|
||||
title: 'Studio',
|
||||
description: 'Content workflows, drafts, scheduling, analytics, and the main creator workspace.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/studio',
|
||||
primaryLinkKey: 'studio_help',
|
||||
primaryLabel: 'Read Studio help',
|
||||
secondaryLinkKey: 'open_studio',
|
||||
secondaryLabel: 'Open Studio',
|
||||
tags: ['studio', 'drafts', 'content'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Publish',
|
||||
title: 'Upload',
|
||||
description: 'Start uploads, manage drafts, and publish artwork safely and correctly.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/upload',
|
||||
primaryLinkKey: 'upload_help',
|
||||
primaryLabel: 'Read Upload help',
|
||||
secondaryLinkKey: 'upload',
|
||||
secondaryLabel: 'Open upload',
|
||||
tags: ['upload', 'artwork', 'publish'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Portfolio',
|
||||
title: 'Artworks',
|
||||
description: 'Future help for artwork editing, portfolio organization, and publishing workflows.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/artworks',
|
||||
primaryLinkKey: 'studio_artworks',
|
||||
primaryLabel: 'Open artworks',
|
||||
tags: ['artworks', 'portfolio', 'editing'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Visual compositions',
|
||||
title: 'Cards',
|
||||
description: 'Learn what Cards are, when to use them, and how card creation, editing, and publishing fit into the platform.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/cards',
|
||||
primaryLinkKey: 'help_cards',
|
||||
primaryLabel: 'Read Cards help',
|
||||
secondaryLinkKey: 'cards_index',
|
||||
secondaryLabel: 'Browse cards',
|
||||
tags: ['cards', 'design', 'workflow'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Organization',
|
||||
title: 'Collections',
|
||||
description: 'Planned help for organizing work, saved collections, and multi-item presentation flows.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/collections',
|
||||
primaryLinkKey: 'studio_home',
|
||||
primaryLabel: 'Open Studio',
|
||||
tags: ['collections', 'organization', 'curation'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'collaboration',
|
||||
label: 'Collaboration',
|
||||
title: 'Collaboration',
|
||||
summary: 'Shared publishing, group operations, and the advanced teamwork modules that grow out of the Groups system.',
|
||||
topics: [
|
||||
{
|
||||
eyebrow: 'Live ecosystem',
|
||||
title: 'Groups',
|
||||
description: 'Shared identity, member roles, contributor credit, review workflows, and Group publishing.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/groups',
|
||||
primaryLinkKey: 'groups_documentation',
|
||||
primaryLabel: 'Read Groups guide',
|
||||
secondaryLinkKey: 'group_studio',
|
||||
secondaryLabel: 'Open Group Studio',
|
||||
linkItems: [
|
||||
{ label: 'Quickstart', linkKey: 'groups_quickstart' },
|
||||
{ label: 'FAQ', linkKey: 'groups_faq' },
|
||||
{ label: 'Create Group', linkKey: 'create_group' },
|
||||
],
|
||||
tags: ['groups', 'members', 'contributors'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Planned next',
|
||||
title: 'Projects',
|
||||
description: 'Future help for structured collaboration, milestones, linked work, and team coordination.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/projects',
|
||||
primaryLinkKey: 'groups_documentation',
|
||||
primaryLabel: 'Start with Groups docs',
|
||||
tags: ['projects', 'planning', 'collaboration'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Planned next',
|
||||
title: 'Releases',
|
||||
description: 'Future guidance for packaging major publication moments with notes, contributors, and linked work.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/releases',
|
||||
primaryLinkKey: 'groups_documentation',
|
||||
primaryLabel: 'Start with Groups docs',
|
||||
tags: ['releases', 'launches', 'publishing'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Community format',
|
||||
title: 'Challenges',
|
||||
description: 'Planned help for challenge-based collaboration, themed prompts, and participation flows.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/challenges',
|
||||
primaryLinkKey: 'groups_faq',
|
||||
primaryLabel: 'See Group feature FAQ',
|
||||
tags: ['challenges', 'prompts', 'events'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Events',
|
||||
title: 'Events',
|
||||
description: 'Planned help for launch moments, showcases, time-based activities, and team promotion flows.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/events',
|
||||
primaryLinkKey: 'groups_faq',
|
||||
primaryLabel: 'See Group feature FAQ',
|
||||
tags: ['events', 'showcase', 'launch'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Resources',
|
||||
title: 'Assets',
|
||||
description: 'Future help for shared resource libraries, asset organization, and collaboration handoff materials.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/assets',
|
||||
primaryLinkKey: 'groups_faq',
|
||||
primaryLabel: 'See Group feature FAQ',
|
||||
tags: ['assets', 'resources', 'library'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'discovery-and-interaction',
|
||||
label: 'Discovery & interaction',
|
||||
title: 'Discovery and interaction',
|
||||
summary: 'Finding work, understanding notifications, and following what matters across the platform.',
|
||||
topics: [
|
||||
{
|
||||
eyebrow: 'Search flows',
|
||||
title: 'Search',
|
||||
description: 'Future help for discovery, filtering, and finding creators, artworks, cards, or groups quickly.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/search',
|
||||
primaryLinkKey: 'studio_home',
|
||||
primaryLabel: 'Open Studio',
|
||||
tags: ['search', 'discovery', 'filters'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Signals',
|
||||
title: 'Notifications',
|
||||
description: 'Planned help for notification flows, activity awareness, and follow-up actions.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/notifications',
|
||||
primaryLinkKey: 'studio_home',
|
||||
primaryLabel: 'Open Studio',
|
||||
tags: ['notifications', 'updates', 'activity'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Relationships',
|
||||
title: 'Following & activity',
|
||||
description: 'Future help for understanding follows, feed behavior, activity surfaces, and creator engagement.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/following',
|
||||
primaryLinkKey: 'groups_directory',
|
||||
primaryLabel: 'Browse creators and groups',
|
||||
tags: ['following', 'activity', 'feed'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Conversation',
|
||||
title: 'Comments & engagement',
|
||||
description: 'Planned help for community interaction, comment behavior, and response expectations across content.',
|
||||
status: 'Planned',
|
||||
plannedPath: '/help/engagement',
|
||||
primaryLinkKey: 'cards_index',
|
||||
primaryLabel: 'Browse public content',
|
||||
tags: ['comments', 'engagement', 'community'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'support-and-troubleshooting',
|
||||
label: 'Support & troubleshooting',
|
||||
title: 'Support and troubleshooting',
|
||||
summary: 'Fast fixes, account recovery paths, and help surfaces built for users who need answers right now.',
|
||||
topics: [
|
||||
{
|
||||
eyebrow: 'Fast fixes',
|
||||
title: 'Troubleshooting',
|
||||
description: 'A live support-oriented guide for diagnosing access, publishing, permissions, setup, and route-level problems faster.',
|
||||
status: 'Live',
|
||||
plannedPath: '/help/troubleshooting',
|
||||
primaryLinkKey: 'help_troubleshooting',
|
||||
primaryLabel: 'Open troubleshooting hub',
|
||||
secondaryLinkKey: 'report_issue',
|
||||
secondaryLabel: 'Report a problem',
|
||||
tags: ['troubleshooting', 'support', 'issues'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Self-service',
|
||||
title: 'FAQs & quickstarts',
|
||||
description: 'A scalable pattern for future FAQs, quickstarts, and module-specific fast-answer pages.',
|
||||
status: 'Live pattern',
|
||||
plannedPath: '/help/{topic}/faq',
|
||||
primaryLinkKey: 'groups_faq',
|
||||
primaryLabel: 'See the pattern in Groups FAQ',
|
||||
secondaryLinkKey: 'groups_quickstart',
|
||||
secondaryLabel: 'See quickstart pattern',
|
||||
tags: ['faq', 'quickstart', 'help system'],
|
||||
},
|
||||
{
|
||||
eyebrow: 'Human support',
|
||||
title: 'Contact & issue reporting',
|
||||
description: 'Reach the right support path when the answer is not in self-service content or when something is broken.',
|
||||
status: 'Available now',
|
||||
primaryLinkKey: 'contact_support',
|
||||
primaryLabel: 'Contact support',
|
||||
secondaryLinkKey: 'report_issue',
|
||||
secondaryLabel: 'Report issue',
|
||||
tags: ['contact', 'bug report', 'support'],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const GETTING_STARTED_STEPS = [
|
||||
{
|
||||
title: 'Create or access your account',
|
||||
description: 'Start with account access so you can move into Studio, profile setup, and publishing without blockers.',
|
||||
},
|
||||
{
|
||||
title: 'Set up your profile',
|
||||
description: 'Complete the basics of your public identity so your work has a stronger creator context from day one.',
|
||||
},
|
||||
{
|
||||
title: 'Open Studio',
|
||||
description: 'Use Studio as the main operating surface for drafts, content management, and creator workflows.',
|
||||
},
|
||||
{
|
||||
title: 'Upload your first artwork',
|
||||
description: 'Move from onboarding into actual publishing so you can learn the platform by doing real work.',
|
||||
},
|
||||
{
|
||||
title: 'Create your first card',
|
||||
description: 'Explore the visual composition side of Nova once your core publishing flow feels comfortable.',
|
||||
},
|
||||
{
|
||||
title: 'Use Groups when collaboration starts',
|
||||
description: 'Once work becomes shared, open the Groups quickstart and switch into the collaboration workflow deliberately.',
|
||||
},
|
||||
]
|
||||
|
||||
export const GETTING_STARTED_LINKS = [
|
||||
{ label: 'Signup / Login help', linkKey: 'help_auth' },
|
||||
{ label: 'Set up your profile', linkKey: 'help_profile' },
|
||||
{ label: 'Using Studio', linkKey: 'studio_home' },
|
||||
{ label: 'Upload your first artwork', linkKey: 'upload' },
|
||||
{ label: 'Create your first card', linkKey: 'cards_create' },
|
||||
{ label: 'Understanding Groups', linkKey: 'groups_quickstart' },
|
||||
]
|
||||
|
||||
export const TROUBLESHOOTING_ITEMS = [
|
||||
{
|
||||
title: 'I can’t log in',
|
||||
description: 'Start with access recovery, then move to support if the issue is bigger than a password reset.',
|
||||
linkKey: 'password_request',
|
||||
linkLabel: 'Recover account access',
|
||||
tags: ['login', 'password', 'access'],
|
||||
},
|
||||
{
|
||||
title: 'Upload is not working',
|
||||
description: 'Jump back into the upload flow or Studio to confirm you are in the right context before reporting a bug.',
|
||||
linkKey: 'upload',
|
||||
linkLabel: 'Open upload',
|
||||
tags: ['upload', 'publishing', 'artwork'],
|
||||
},
|
||||
{
|
||||
title: 'I can’t publish',
|
||||
description: 'Check whether the issue is personal publishing, Group permissions, or the wrong active context.',
|
||||
linkKey: 'groups_faq',
|
||||
linkLabel: 'Read Group publishing FAQ',
|
||||
tags: ['publish', 'permissions', 'context'],
|
||||
},
|
||||
{
|
||||
title: 'I don’t see Studio',
|
||||
description: 'Use sign-in and onboarding checks first, then re-open Studio from the main creator workspace.',
|
||||
linkKey: 'studio_home',
|
||||
linkLabel: 'Open Studio',
|
||||
tags: ['studio', 'onboarding', 'access'],
|
||||
},
|
||||
{
|
||||
title: 'My Group role doesn’t allow something',
|
||||
description: 'The Groups FAQ explains how roles, approvals, invites, and permissions differ between members.',
|
||||
linkKey: 'groups_faq',
|
||||
linkLabel: 'Open Groups FAQ',
|
||||
tags: ['group roles', 'permissions', 'members'],
|
||||
},
|
||||
{
|
||||
title: 'My profile is incomplete',
|
||||
description: 'Go to profile settings and finish the basics that shape how other creators understand your identity.',
|
||||
linkKey: 'profile_settings',
|
||||
linkLabel: 'Open profile settings',
|
||||
tags: ['profile', 'settings', 'identity'],
|
||||
},
|
||||
{
|
||||
title: 'I published under the wrong context',
|
||||
description: 'Use the Groups documentation and FAQ to correct personal-versus-group publishing mistakes deliberately.',
|
||||
linkKey: 'groups_documentation',
|
||||
linkLabel: 'Read publishing guidance',
|
||||
tags: ['publishing', 'context', 'groups'],
|
||||
},
|
||||
]
|
||||
|
||||
export const POPULAR_HELP_TOPICS = [
|
||||
{
|
||||
title: 'How account settings work',
|
||||
description: 'Read the account guide for settings, email and password care, notifications, and ongoing maintenance after login succeeds.',
|
||||
linkKey: 'help_account',
|
||||
tags: ['account', 'settings', 'preferences'],
|
||||
},
|
||||
{
|
||||
title: 'How Group publishing works',
|
||||
description: 'Understand shared identity, contributor credit, and why individual attribution stays visible.',
|
||||
linkKey: 'groups_documentation',
|
||||
tags: ['groups', 'publishing', 'credit'],
|
||||
},
|
||||
{
|
||||
title: 'How contributor credit works',
|
||||
description: 'Use the Groups FAQ to understand Published by, Uploaded by, Primary author, and Contributors.',
|
||||
linkKey: 'groups_faq',
|
||||
tags: ['contributors', 'credit', 'faq'],
|
||||
},
|
||||
{
|
||||
title: 'How Studio works',
|
||||
description: 'Read the Studio guide for drafts, context switching, publishing, and the main creator workspace surfaces.',
|
||||
linkKey: 'studio_help',
|
||||
tags: ['studio', 'content', 'workflow'],
|
||||
},
|
||||
{
|
||||
title: 'How to upload artwork',
|
||||
description: 'Read the upload guide for draft flow, metadata review, previews, context checks, and final publishing.',
|
||||
linkKey: 'upload_help',
|
||||
tags: ['upload', 'artworks', 'publish'],
|
||||
},
|
||||
{
|
||||
title: 'How to create cards',
|
||||
description: 'Read the Cards guide when you need help choosing the format, creating a Card, and publishing it cleanly.',
|
||||
linkKey: 'help_cards',
|
||||
tags: ['cards', 'guide', 'design'],
|
||||
},
|
||||
{
|
||||
title: 'How profiles work',
|
||||
description: 'Read the Profile guide to understand setup, identity clarity, presentation, and how personal presence fits beside Group activity.',
|
||||
linkKey: 'help_profile',
|
||||
tags: ['profile', 'identity', 'guide'],
|
||||
},
|
||||
{
|
||||
title: 'How signup and login work',
|
||||
description: 'Read the auth guide for account creation, sign-in, recovery, verification basics, and common access problems.',
|
||||
linkKey: 'help_auth',
|
||||
tags: ['login', 'signup', 'recovery'],
|
||||
},
|
||||
{
|
||||
title: 'How to troubleshoot faster',
|
||||
description: 'Use the troubleshooting guide when the problem is urgent and you need faster diagnosis before jumping into a long module guide.',
|
||||
linkKey: 'help_troubleshooting',
|
||||
tags: ['troubleshooting', 'support', 'issues'],
|
||||
},
|
||||
{
|
||||
title: 'How to create a Group',
|
||||
description: 'Use the quickstart if you are ready to switch from solo publishing into collaboration.',
|
||||
linkKey: 'create_group',
|
||||
tags: ['groups', 'quickstart', 'collaboration'],
|
||||
},
|
||||
]
|
||||
|
||||
export const SUPPORT_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Fast fixes',
|
||||
title: 'Open troubleshooting help',
|
||||
description: 'Use this when the problem feels urgent and you want shorter diagnosis-first guidance before filing a report.',
|
||||
linkKey: 'help_troubleshooting',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Human help',
|
||||
title: 'Contact support',
|
||||
description: 'Use this when the right answer is not in the help hub or when you need account-level guidance.',
|
||||
linkKey: 'contact_support',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Problem reports',
|
||||
title: 'Report a bug',
|
||||
description: 'Use this when a route, workflow, permission, or publishing surface appears broken rather than unclear.',
|
||||
linkKey: 'report_issue',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,256 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'what-profile-is', label: 'What a profile is' },
|
||||
{ id: 'profile-vs-group', label: 'Profile vs Group' },
|
||||
{ id: 'profile-setup-basics', label: 'Profile setup basics' },
|
||||
{ id: 'what-to-put-on-your-profile', label: 'What to put on your profile' },
|
||||
{ id: 'profile-content-and-activity', label: 'Profile content and activity' },
|
||||
{ id: 'best-practices', label: 'Best practices' },
|
||||
{ id: 'common-mistakes', label: 'Common mistakes' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'troubleshooting', label: 'Troubleshooting' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'Core role',
|
||||
value: 'Personal public identity',
|
||||
note: 'Your profile is the main place where other people understand who you are, what you make, and how you show up on Skinbase.',
|
||||
},
|
||||
{
|
||||
label: 'What it shapes',
|
||||
value: 'Trust and recognition',
|
||||
note: 'A strong profile makes your work easier to recognize, your contributions easier to understand, and your creative identity easier to remember.',
|
||||
},
|
||||
{
|
||||
label: 'Golden rule',
|
||||
value: 'Keep it clear and current',
|
||||
note: 'Profiles work best when they feel real, complete, and consistent with the kind of creator presence you want to build.',
|
||||
},
|
||||
]
|
||||
|
||||
export const WHAT_PROFILE_IS_ITEMS = [
|
||||
{
|
||||
title: 'Your profile is your personal identity',
|
||||
body: 'A Skinbase profile represents you as an individual creator. It is the public-facing space where people connect your name, visual identity, and work together.',
|
||||
},
|
||||
{
|
||||
title: 'Profiles are discoverability surfaces',
|
||||
body: 'People use profiles to understand what you create, what kind of style or focus you have, and whether they want to follow your work more closely.',
|
||||
},
|
||||
{
|
||||
title: 'Profiles can reflect more than one kind of contribution',
|
||||
body: 'Your profile is not only about solo publishing. It can also help people understand your contributions, collaborations, and public activity across the platform.',
|
||||
},
|
||||
]
|
||||
|
||||
export const PROFILE_COMPARISON_COLUMNS = [
|
||||
{ key: 'topic', label: 'Topic' },
|
||||
{ key: 'profile', label: 'Profile' },
|
||||
{ key: 'group', label: 'Group' },
|
||||
]
|
||||
|
||||
export const PROFILE_COMPARISON_ROWS = [
|
||||
{
|
||||
id: 'identity',
|
||||
topic: 'Identity',
|
||||
profile: 'One person or individual creator identity.',
|
||||
group: 'A shared identity for a team, collective, or collaborative project.',
|
||||
},
|
||||
{
|
||||
id: 'purpose',
|
||||
topic: 'Main purpose',
|
||||
profile: 'Show who you are, what you make, and how you present yourself publicly.',
|
||||
group: 'Represent shared publishing, shared operations, and collaborative creative activity.',
|
||||
},
|
||||
{
|
||||
id: 'ownership',
|
||||
topic: 'Who owns the space',
|
||||
profile: 'You manage your own profile and personal identity choices.',
|
||||
group: 'Multiple members may participate, depending on role and permissions.',
|
||||
},
|
||||
{
|
||||
id: 'publishing',
|
||||
topic: 'Publishing context',
|
||||
profile: 'Personal work publishes under your own creator identity.',
|
||||
group: 'Shared work publishes under the Group identity while still preserving individual credit where relevant.',
|
||||
},
|
||||
{
|
||||
id: 'coexistence',
|
||||
topic: 'How they coexist',
|
||||
profile: 'Your profile remains your personal home base even when you collaborate elsewhere.',
|
||||
group: 'A Group does not replace your profile. It adds a shared layer on top of your personal identity.',
|
||||
},
|
||||
]
|
||||
|
||||
export const SETUP_BASICS_ITEMS = [
|
||||
{
|
||||
title: 'Avatar and recognizable identity',
|
||||
body: 'Choose a profile image that people can recognize easily. A strong avatar gives your work a clearer anchor across comments, follows, and content surfaces.',
|
||||
},
|
||||
{
|
||||
title: 'Username and display identity',
|
||||
body: 'Keep your identity naming clear and consistent so people do not have to guess whether the profile belongs to you, a project, or a Group.',
|
||||
},
|
||||
{
|
||||
title: 'Bio and about text',
|
||||
body: 'A short, memorable bio is usually better than a vague paragraph. Tell people what you create, what you care about, or what makes your perspective distinctive.',
|
||||
},
|
||||
{
|
||||
title: 'Cover image and visual direction',
|
||||
body: 'If your profile uses broader visual presentation elements, keep them aligned with the tone of your avatar, work, and overall identity.',
|
||||
},
|
||||
{
|
||||
title: 'Useful links only',
|
||||
body: 'If you add socials or external links, keep them relevant. Profiles feel stronger when the links support your creative identity instead of distracting from it.',
|
||||
},
|
||||
{
|
||||
title: 'Visual consistency matters',
|
||||
body: 'Your profile should feel like one person or one creator perspective, not a collection of unrelated identity choices thrown together over time.',
|
||||
},
|
||||
]
|
||||
|
||||
export const PROFILE_IMPROVEMENT_TIPS = [
|
||||
'Use a recognizable avatar before you start publishing heavily.',
|
||||
'Write a bio that says what you create or what kind of creative identity you want people to remember.',
|
||||
'Keep your naming, visuals, and profile tone aligned across the page.',
|
||||
'Treat profile setup as part of your creative presentation, not as a settings chore you can ignore forever.',
|
||||
]
|
||||
|
||||
export const WHAT_TO_PUT_ITEMS = [
|
||||
'A strong avatar that people can recognize quickly.',
|
||||
'A concise bio that gives your profile personality and direction.',
|
||||
'A clear sense of your creative focus, style, or themes.',
|
||||
'Useful links only, especially if they support your work or identity directly.',
|
||||
'Your strongest published work and the contributions you want people to notice first.',
|
||||
'Branding or visual consistency that helps the profile feel intentional rather than random.',
|
||||
]
|
||||
|
||||
export const PROFILE_CONTENT_ITEMS = [
|
||||
{
|
||||
title: 'Personal artworks',
|
||||
body: 'Your profile can help people understand your personal published work and the direction of your creator identity over time.',
|
||||
},
|
||||
{
|
||||
title: 'Contributions to Group work',
|
||||
body: 'Even when work is published by a Group, your profile still matters because it helps people understand your personal role, authorship, and creative history.',
|
||||
},
|
||||
{
|
||||
title: 'Cards, collections, and presentation surfaces',
|
||||
body: 'As the platform grows, profiles can reflect more than one type of creative output. What matters most is whether the page still tells a coherent story about you.',
|
||||
},
|
||||
{
|
||||
title: 'Activity and community visibility',
|
||||
body: 'Profiles are not only static pages. They can also reflect how active you are, what you engage with, and how consistently you participate in the platform.',
|
||||
},
|
||||
]
|
||||
|
||||
export const BEST_PRACTICES = [
|
||||
'Complete your profile early so your identity feels stronger from the beginning.',
|
||||
'Keep your bio clear, real, and easy to remember.',
|
||||
'Use an avatar people can recognize without effort.',
|
||||
'Keep the profile active by publishing, contributing, and updating it when your direction changes.',
|
||||
'Make your best work and strongest contributions easier to notice than low-value filler.',
|
||||
'Separate personal identity from Group identity intentionally so viewers do not get confused about what belongs to whom.',
|
||||
'Keep public information current instead of letting old links, old bios, or old visuals drift indefinitely.',
|
||||
]
|
||||
|
||||
export const COMMON_MISTAKES = [
|
||||
'Leaving the profile incomplete and expecting the work alone to explain who you are.',
|
||||
'Confusing your personal profile with a Group identity and making the page feel unclear.',
|
||||
'Using a weak, empty, or generic bio that gives people nothing to remember.',
|
||||
'Letting the avatar, naming, and visual presentation feel inconsistent with each other.',
|
||||
'Making it hard to notice your best work because the page feels cluttered or unfocused.',
|
||||
'Keeping low-value or outdated public information visible long after it stops helping your creator identity.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'What is my profile for?',
|
||||
answer: 'Your profile is your personal identity and public presence on Skinbase. It helps people understand who you are, what you create, and how your work fits together.',
|
||||
},
|
||||
{
|
||||
question: 'How is a profile different from a Group?',
|
||||
answer: 'A profile represents one individual creator. A Group represents a shared team or collaborative identity. They can coexist without replacing each other.',
|
||||
},
|
||||
{
|
||||
question: 'Can I still have a personal identity if I publish in Groups?',
|
||||
answer: 'Yes. Group publishing does not erase your personal identity. Your profile still matters because it shows your individual presence and can help people understand your contributions.',
|
||||
},
|
||||
{
|
||||
question: 'What should I add to my profile first?',
|
||||
answer: 'Start with a recognizable avatar, a clear identity name, and a short bio that explains what you create or what kind of creative presence you want to build.',
|
||||
},
|
||||
{
|
||||
question: 'Can my contributions to Group work still appear on my profile?',
|
||||
answer: 'They can still reflect on you as a creator even when the work belongs to a Group. That is one reason your personal profile remains important in collaborative publishing.',
|
||||
},
|
||||
{
|
||||
question: 'How do I make my profile look better?',
|
||||
answer: 'Keep it simple, consistent, and real. Use a recognizable avatar, write a better bio, improve visual consistency, and make sure the strongest work is easier to notice than filler content.',
|
||||
},
|
||||
]
|
||||
|
||||
export const TROUBLESHOOTING_ITEMS = [
|
||||
{
|
||||
title: 'I don’t know what to put on my profile',
|
||||
body: 'Start with the basics first: avatar, bio, identity focus, and the work you most want people to notice. A profile does not need to say everything at once.',
|
||||
linkKey: 'profile_settings',
|
||||
linkLabel: 'Open profile settings',
|
||||
},
|
||||
{
|
||||
title: 'My profile feels empty',
|
||||
body: 'An empty profile is often a publishing or activity problem rather than a design problem. Use Studio and Upload help if the real issue is that your public work is still too thin.',
|
||||
linkKey: 'upload_help',
|
||||
linkLabel: 'Read Upload help',
|
||||
},
|
||||
{
|
||||
title: 'I want my Group work to still reflect on me',
|
||||
body: 'That is exactly why profile identity still matters alongside Groups. Use the Groups guide to understand shared publishing, contributor credit, and identity separation more clearly.',
|
||||
linkKey: 'groups_help',
|
||||
linkLabel: 'Read Groups help',
|
||||
},
|
||||
{
|
||||
title: 'I changed something and it doesn’t look right',
|
||||
body: 'Review your avatar, naming, bio, and overall visual consistency together rather than changing one field at a time without checking the full profile impression.',
|
||||
linkKey: 'profile_settings',
|
||||
linkLabel: 'Return to profile settings',
|
||||
},
|
||||
{
|
||||
title: 'I don’t understand profile vs Group publishing',
|
||||
body: 'If you are not sure whether the public identity should be yours or a Group’s, start with the Groups guide. Publishing context is usually the missing piece.',
|
||||
linkKey: 'groups_help',
|
||||
linkLabel: 'Open Groups guide',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Groups help',
|
||||
body: 'Use the Groups guide when the real question is how your personal profile should coexist with a shared identity and collaborative publishing.',
|
||||
linkKey: 'groups_help',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Studio help',
|
||||
body: 'Use the Studio guide when you need the wider creator-workspace context around drafts, publishing, and profile-facing creator operations.',
|
||||
linkKey: 'studio_help',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Upload help',
|
||||
body: 'Use the Upload guide if the profile feels thin because the real issue is getting more of your work published and presented well.',
|
||||
linkKey: 'upload_help',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Signup and login help',
|
||||
body: 'Use the auth guide if the blocker is sign-in, registration, or access recovery before you can even update the profile properly.',
|
||||
linkKey: 'help_auth',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,279 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'what-is-studio', label: 'What Studio is' },
|
||||
{ id: 'personal-vs-group', label: 'Personal vs Group Studio' },
|
||||
{ id: 'main-studio-areas', label: 'Main Studio areas' },
|
||||
{ id: 'drafts-and-publishing', label: 'Drafts and publishing' },
|
||||
{ id: 'managing-artworks', label: 'Managing artworks' },
|
||||
{ id: 'cards-and-collections', label: 'Cards and collections' },
|
||||
{ id: 'advanced-modules', label: 'Advanced modules' },
|
||||
{ id: 'best-practices', label: 'Best practices' },
|
||||
{ id: 'common-mistakes', label: 'Common mistakes' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'troubleshooting', label: 'Troubleshooting' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const STUDIO_COMPARISON_COLUMNS = [
|
||||
{ key: 'topic', label: 'Topic' },
|
||||
{ key: 'personal', label: 'Personal Studio' },
|
||||
{ key: 'group', label: 'Group Studio' },
|
||||
]
|
||||
|
||||
export const STUDIO_COMPARISON_ROWS = [
|
||||
{
|
||||
id: 'ownership',
|
||||
topic: 'Who the work belongs to',
|
||||
personal: 'Your own drafts, uploads, cards, collections, and creator activity.',
|
||||
group: 'Work owned, published, or coordinated under a Group identity.',
|
||||
},
|
||||
{
|
||||
id: 'permissions',
|
||||
topic: 'Why actions differ',
|
||||
personal: 'You usually control the full flow for your own content.',
|
||||
group: 'Available actions depend on Group role, trust level, and review workflow.',
|
||||
},
|
||||
{
|
||||
id: 'publishing',
|
||||
topic: 'Publishing context',
|
||||
personal: 'Publishes under your personal creator identity.',
|
||||
group: 'Publishes under the Group identity while preserving individual credit.',
|
||||
},
|
||||
{
|
||||
id: 'drafts',
|
||||
topic: 'Where drafts live',
|
||||
personal: 'In your personal Studio draft and content views.',
|
||||
group: 'Inside the Group context, often with shared review or approval behavior.',
|
||||
},
|
||||
{
|
||||
id: 'coordination',
|
||||
topic: 'Coordination style',
|
||||
personal: 'Best for solo publishing and direct control.',
|
||||
group: 'Best for shared publishing, collaboration, reviews, member management, and structured releases.',
|
||||
},
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'Core purpose',
|
||||
value: 'Private creative workspace',
|
||||
note: 'Studio is where you prepare, organize, review, and manage work before and after it goes public.',
|
||||
},
|
||||
{
|
||||
label: 'Common confusion',
|
||||
value: 'Context changes behavior',
|
||||
note: 'Personal Studio and Group Studio can expose different actions because ownership and permissions are different.',
|
||||
},
|
||||
{
|
||||
label: 'Golden rule',
|
||||
value: 'Check context before publish',
|
||||
note: 'Publishing from the wrong context is one of the easiest ways to create avoidable confusion.',
|
||||
},
|
||||
]
|
||||
|
||||
export const STUDIO_AREAS = [
|
||||
{
|
||||
title: 'Dashboard and content views',
|
||||
body: 'Use the main Studio dashboard, content view, and analytics surfaces to see what is active, what is scheduled, and what still needs attention.',
|
||||
links: ['Open Studio', 'View content dashboard'],
|
||||
},
|
||||
{
|
||||
title: 'Artworks and drafts',
|
||||
body: 'Artworks, drafts, scheduled items, calendar views, and archived work all live inside the management side of Studio rather than on public profile pages.',
|
||||
links: ['Open artworks', 'Open drafts'],
|
||||
},
|
||||
{
|
||||
title: 'Cards and collections',
|
||||
body: 'Cards and collections are managed as creative tools inside Studio, where you can build, organize, and refine them before people see the result publicly.',
|
||||
links: ['Open cards', 'Open collections'],
|
||||
},
|
||||
{
|
||||
title: 'Groups and collaboration',
|
||||
body: 'When collaboration is involved, Group Studio adds shared publishing, member management, review flows, projects, releases, challenges, events, assets, and related operations.',
|
||||
links: ['Open Group Studio', 'Read Groups help'],
|
||||
},
|
||||
{
|
||||
title: 'Settings and preferences',
|
||||
body: 'Studio also includes settings, preferences, profile-facing tools, activity, and creator operations that do not belong on the public side of Skinbase.',
|
||||
links: ['Open settings', 'Read Profile help'],
|
||||
},
|
||||
{
|
||||
title: 'Future-ready workflow surface',
|
||||
body: 'The current Studio already covers many creator operations, and the help page is written to stay useful as more modules grow into the workspace over time.',
|
||||
links: ['Help Center', 'Report issue'],
|
||||
},
|
||||
]
|
||||
|
||||
export const DRAFT_STEPS = [
|
||||
{
|
||||
title: 'Start work in the right context',
|
||||
description: 'Before you upload, edit, or publish, confirm whether the work belongs to your personal Studio or to a Group context.',
|
||||
},
|
||||
{
|
||||
title: 'Treat drafts as unfinished workspace items',
|
||||
description: 'Drafts are where unfinished work lives while you are still checking metadata, previews, contributor credit, timing, or overall quality.',
|
||||
},
|
||||
{
|
||||
title: 'Review metadata before publishing',
|
||||
description: 'Titles, descriptions, tags, categories, previews, context, and contributor information should be reviewed before the final publish step.',
|
||||
},
|
||||
{
|
||||
title: 'Use review when collaboration needs it',
|
||||
description: 'Group workflows may put work into review before publish so trusted members can check context, quality, and credit.',
|
||||
},
|
||||
{
|
||||
title: 'Publish only when the public version is ready',
|
||||
description: 'Do not treat publish as a draft save button. Publish when the work is accurate, presentable, and in the right place.',
|
||||
},
|
||||
]
|
||||
|
||||
export const ARTWORK_GUIDANCE = [
|
||||
'Create or upload the work into the correct Studio context first.',
|
||||
'Review title, description, and public-facing metadata before publish.',
|
||||
'Check tags, categories, and preview quality so the public version lands clearly.',
|
||||
'Make sure contributor credit reflects who authored, uploaded, and contributed to the work.',
|
||||
'Update published work intentionally instead of letting metadata drift over time.',
|
||||
]
|
||||
|
||||
export const CARD_COLLECTION_GUIDANCE = [
|
||||
{
|
||||
title: 'Cards',
|
||||
body: 'Use Studio for card creation, remixing, editing, previews, and analytics. Cards are part of your creative workflow, not just a public gallery surface.',
|
||||
},
|
||||
{
|
||||
title: 'Collections',
|
||||
body: 'Use Studio to organize groups of work, shape presentation, and manage curated content as a creative management task rather than an afterthought.',
|
||||
},
|
||||
]
|
||||
|
||||
export const ADVANCED_MODULES = [
|
||||
'Projects help teams organize structured collaboration, milestones, and linked work.',
|
||||
'Releases package a larger publication moment into a clearer shared launch surface.',
|
||||
'Challenges, events, and assets extend Studio into themed collaboration, timed publishing, and shared resources.',
|
||||
'Group review queues, invitations, and join requests add operational structure when collaboration grows beyond simple direct publishing.',
|
||||
]
|
||||
|
||||
export const BEST_PRACTICES = [
|
||||
'Review drafts regularly so Studio stays usable instead of turning into a backlog graveyard.',
|
||||
'Keep personal and Group work clearly separated so ownership stays obvious.',
|
||||
'Publish only after metadata, previews, and contributor credit are truly ready.',
|
||||
'Use advanced modules only when they solve a real workflow problem.',
|
||||
'Treat Studio like a workspace for preparation and management, not as a public profile page.',
|
||||
'Keep contributor records accurate so teams avoid confusion later.',
|
||||
]
|
||||
|
||||
export const COMMON_MISTAKES = [
|
||||
'Publishing under the wrong context because the active Studio scope was not checked first.',
|
||||
'Leaving metadata half-finished and hoping to clean it up after the work is public.',
|
||||
'Forgetting to verify contributor credit before a collaborative publish.',
|
||||
'Treating Studio like a public page instead of a private working area.',
|
||||
'Giving too many Group members too much access when a smaller permission set would be safer.',
|
||||
'Ignoring drafts until lists become cluttered and hard to maintain.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'What is Studio?',
|
||||
answer: 'Studio is the private creator workspace on Skinbase Nova. It is where you manage drafts, uploads, publishing, cards, collections, settings, and other operational parts of your creative work.',
|
||||
},
|
||||
{
|
||||
question: 'Why do Personal Studio and Group Studio look different?',
|
||||
answer: 'Because the context changes ownership and permissions. Personal Studio manages your own work. Group Studio manages work under a shared identity, so some actions depend on your Group role and workflow.',
|
||||
},
|
||||
{
|
||||
question: 'Why can’t I publish from this area?',
|
||||
answer: 'You may be in the wrong context, in a non-publishing step, or using a role that does not include direct publishing. Check the active scope first, then check whether review or approval is part of the workflow.',
|
||||
},
|
||||
{
|
||||
question: 'Where are my drafts?',
|
||||
answer: 'Drafts live inside Studio, not on public pages. Look in the draft or artwork management views for the current context you are working in.',
|
||||
},
|
||||
{
|
||||
question: 'Can I manage both personal and Group content in Studio?',
|
||||
answer: 'Yes, but they are not the same context. You should switch deliberately and confirm which identity owns the work before editing or publishing.',
|
||||
},
|
||||
{
|
||||
question: 'Why don’t I see some modules?',
|
||||
answer: 'Some modules only appear in certain contexts, are tied to collaboration features, or depend on your Group role and permissions.',
|
||||
},
|
||||
{
|
||||
question: 'Is Studio public?',
|
||||
answer: 'No. Studio is the private management layer. Public pages are what other people see after content has been published.',
|
||||
},
|
||||
]
|
||||
|
||||
export const TROUBLESHOOTING_ITEMS = [
|
||||
{
|
||||
title: 'I can’t find my draft',
|
||||
body: 'Check whether the draft belongs to your personal Studio or to a Group. Draft confusion often comes from opening the right workspace in the wrong context.',
|
||||
linkKey: 'studio_drafts',
|
||||
linkLabel: 'Open drafts',
|
||||
},
|
||||
{
|
||||
title: 'I can’t publish',
|
||||
body: 'Confirm the active context, then check whether your role, workflow, or review state allows direct publishing from that surface.',
|
||||
linkKey: 'groups_faq',
|
||||
linkLabel: 'Read the Groups FAQ',
|
||||
},
|
||||
{
|
||||
title: 'I don’t see Group Studio',
|
||||
body: 'You may not be in a Group yet, may not have accepted an invitation, or may not have the expected access in the current account state.',
|
||||
linkKey: 'group_studio',
|
||||
linkLabel: 'Open Group Studio',
|
||||
},
|
||||
{
|
||||
title: 'I don’t understand why an action is missing',
|
||||
body: 'Missing actions usually come from context, permissions, or workflow stage. The action may exist elsewhere, or it may be intentionally limited in this scope.',
|
||||
linkKey: 'groups_help',
|
||||
linkLabel: 'Read Groups help',
|
||||
},
|
||||
{
|
||||
title: 'I changed context and now I can’t edit something',
|
||||
body: 'The work may belong to the other context. Switch back and confirm whether the item is personal, Group-owned, or limited by role.',
|
||||
linkKey: 'open_studio',
|
||||
linkLabel: 'Open Studio',
|
||||
},
|
||||
{
|
||||
title: 'My Studio looks empty',
|
||||
body: 'Start by checking the active context, current filters, and whether you are looking at drafts, artworks, scheduled items, or another view entirely.',
|
||||
linkKey: 'studio_content',
|
||||
linkLabel: 'Open content dashboard',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Groups help',
|
||||
body: 'Use the full Groups guide for roles, permissions, contributor credit, review queues, and shared publishing.',
|
||||
linkKey: 'groups_help',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Upload help',
|
||||
body: 'Use the Upload guide when the real question is about draft flow, metadata, previews, contributor credit, or final publish steps.',
|
||||
linkKey: 'upload_help',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Cards help',
|
||||
body: 'Use the Cards guide when you need help choosing the format, creating a Card, or understanding where Cards fit compared with other content types.',
|
||||
linkKey: 'help_cards',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Profile help',
|
||||
body: 'Use the Profile guide when the real question is how to build a stronger personal identity, cleaner presentation, and better profile-versus-Group clarity.',
|
||||
linkKey: 'help_profile',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Signup and login help',
|
||||
body: 'Use the auth guide when Studio access is blocked before you even get started or when the real problem is recovery, verification, or account entry.',
|
||||
linkKey: 'help_auth',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,136 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'first-checks', label: 'First checks' },
|
||||
{ id: 'account-access', label: 'Account access' },
|
||||
{ id: 'publishing-and-context', label: 'Publishing and context' },
|
||||
{ id: 'profile-and-settings', label: 'Profile and settings' },
|
||||
{ id: 'when-to-report', label: 'When to report it' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'Best first move',
|
||||
value: 'Name the failure clearly',
|
||||
note: 'Broken, blocked, and unclear are not the same thing. The faster you label the problem, the faster the right fix shows up.',
|
||||
},
|
||||
{
|
||||
label: 'Most common false alarm',
|
||||
value: 'Permission or context confusion',
|
||||
note: 'A lot of apparent product failures are actually caused by the wrong active context, incomplete setup, or missing collaboration permissions.',
|
||||
},
|
||||
{
|
||||
label: 'Escalate when',
|
||||
value: 'A route is repeatably broken',
|
||||
note: 'If the same steps fail consistently and the issue is not explained by access, context, or settings, it is time to report the problem clearly.',
|
||||
},
|
||||
]
|
||||
|
||||
export const FIRST_CHECKS = [
|
||||
'Ask whether the problem is broken, blocked, or just unclear. Those three paths have different fixes.',
|
||||
'Re-open the exact route you intended to use instead of guessing from memory or following an outdated tab.',
|
||||
'Check whether you are signed in, in the right account, and in the right personal or Group context before assuming the product failed.',
|
||||
'Reduce the problem to one sentence. If you cannot describe the failure clearly, start with the auth or account guides first.',
|
||||
]
|
||||
|
||||
export const ACCOUNT_ACCESS_ITEMS = [
|
||||
{
|
||||
title: 'Login, reset, and verification come first',
|
||||
body: 'If access itself is failing, do not over-diagnose a Studio, profile, or publishing bug yet. Start with the auth guide and recovery paths first.',
|
||||
},
|
||||
{
|
||||
title: 'Wrong email and wrong inbox cause a lot of panic',
|
||||
body: 'Many access problems feel severe until you realize the account email, reset inbox, or verification message path was simply not the one you thought it was.',
|
||||
},
|
||||
{
|
||||
title: 'Partial access is still a useful clue',
|
||||
body: 'If some features work and others do not, the issue may be permissions, setup state, or workflow context rather than a total account failure.',
|
||||
},
|
||||
]
|
||||
|
||||
export const PUBLISHING_CONTEXT_ITEMS = [
|
||||
{
|
||||
title: 'Personal vs Group context changes what you can do',
|
||||
body: 'Publishing problems often come from being in the wrong context or expecting personal access to behave like Group access.',
|
||||
},
|
||||
{
|
||||
title: 'Missing permission is not always a bug',
|
||||
body: 'If a Group role or shared workflow blocks an action, the fix usually lives in permissions guidance rather than product failure reporting.',
|
||||
},
|
||||
{
|
||||
title: 'Studio confusion often starts upstream',
|
||||
body: 'When Studio feels wrong, check whether the real issue is authentication, onboarding state, or the route you expected to open.',
|
||||
},
|
||||
]
|
||||
|
||||
export const PROFILE_SETTINGS_ITEMS = [
|
||||
{
|
||||
title: 'Incomplete profile is usually a settings task',
|
||||
body: 'When the profile looks thin, inconsistent, or outdated, the answer usually lives in profile or account settings rather than troubleshooting a broken surface.',
|
||||
},
|
||||
{
|
||||
title: 'Identity confusion can feel like a feature issue',
|
||||
body: 'If the page feels wrong because personal and Group identity are blurred together, use profile and Groups help before filing a bug.',
|
||||
},
|
||||
{
|
||||
title: 'Notification or preference issues belong in settings',
|
||||
body: 'If the platform feels too noisy, too quiet, or out of sync with what you expect, the account settings guide is usually the better first stop.',
|
||||
},
|
||||
]
|
||||
|
||||
export const REPORTING_ITEMS = [
|
||||
'Report a bug when you can reproduce the same failure on the same route with the same steps.',
|
||||
'Contact support when ownership, account identity, or a sensitive account question needs a human response instead of a pure product diagnosis.',
|
||||
'Include the route, what you expected, what actually happened, and whether the issue is personal-only or also affects Group workflows.',
|
||||
'Mention what you already checked so support does not have to restart from the most obvious first steps.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'How do I know whether something is broken or I am just in the wrong context?',
|
||||
answer: 'Check whether the same route works after confirming login state, account identity, and personal-versus-Group context. If the failure disappears when context is corrected, it was not a product bug.',
|
||||
},
|
||||
{
|
||||
question: 'When should I use auth help instead of troubleshooting help?',
|
||||
answer: 'Use auth help when the core problem is account entry, recovery, or verification. Use troubleshooting help when the failure is broader or less clearly labeled.',
|
||||
},
|
||||
{
|
||||
question: 'When should I use account help instead of troubleshooting help?',
|
||||
answer: 'Use account help when access already works and the question is really about settings, profile maintenance, passwords, email care, or preferences.',
|
||||
},
|
||||
{
|
||||
question: 'What should I include in a bug report?',
|
||||
answer: 'Include the route, the exact steps, what you expected, what happened instead, and whether the issue repeats consistently. Clear reproduction details save the most time.',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Access',
|
||||
title: 'Signup and login help',
|
||||
body: 'Use the auth guide when the real failure starts with account entry, reset messages, or verification confusion.',
|
||||
linkKey: 'help_auth',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Settings',
|
||||
title: 'Account settings help',
|
||||
body: 'Use the account guide when access already works and the real fix lives in profile settings, notifications, email care, or password maintenance.',
|
||||
linkKey: 'help_account',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Publishing',
|
||||
title: 'Upload help',
|
||||
body: 'Use the upload guide when the “broken” feeling is really about drafts, metadata, publishing flow, or file-specific workflow confusion.',
|
||||
linkKey: 'upload_help',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Permissions',
|
||||
title: 'Groups FAQ',
|
||||
body: 'Use Groups guidance when the blocker is role-based access, contributor permissions, invites, or collaboration behavior.',
|
||||
linkKey: 'groups_faq',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,266 @@
|
||||
export const SECTION_ITEMS = [
|
||||
{ id: 'how-uploading-works', label: 'How uploading works' },
|
||||
{ id: 'prepare-before-upload', label: 'What to prepare' },
|
||||
{ id: 'personal-vs-group', label: 'Personal vs Group upload' },
|
||||
{ id: 'draft-flow', label: 'Draft flow' },
|
||||
{ id: 'publish-flow', label: 'Publish flow' },
|
||||
{ id: 'file-preview-metadata', label: 'File, preview, metadata' },
|
||||
{ id: 'contributor-credit', label: 'Contributor credit' },
|
||||
{ id: 'best-practices', label: 'Best practices' },
|
||||
{ id: 'common-mistakes', label: 'Common mistakes' },
|
||||
{ id: 'faq', label: 'FAQ' },
|
||||
{ id: 'troubleshooting', label: 'Troubleshooting' },
|
||||
{ id: 'related-help', label: 'Related help' },
|
||||
]
|
||||
|
||||
export const HERO_METRICS = [
|
||||
{
|
||||
label: 'Core idea',
|
||||
value: 'Guided workflow, not raw submission',
|
||||
note: 'Uploading is more than sending a file. It includes draft setup, metadata, previews, context, and publishing checks.',
|
||||
},
|
||||
{
|
||||
label: 'Most common mistake',
|
||||
value: 'Wrong context at publish time',
|
||||
note: 'Personal and Group uploads can look similar, but the published identity and review behavior can be very different.',
|
||||
},
|
||||
{
|
||||
label: 'Safest habit',
|
||||
value: 'Review before final publish',
|
||||
note: 'Drafts exist to help you finish details before the public version goes live.',
|
||||
},
|
||||
]
|
||||
|
||||
export const WORKFLOW_STEPS = [
|
||||
{
|
||||
title: 'Start the upload',
|
||||
description: 'Begin with the file you want to publish and confirm whether the upload belongs to your personal identity or to a Group context.',
|
||||
},
|
||||
{
|
||||
title: 'The file is received',
|
||||
description: 'Skinbase accepts the file and starts turning the upload into a manageable workspace item instead of sending it public immediately.',
|
||||
},
|
||||
{
|
||||
title: 'A draft is created',
|
||||
description: 'Uploads usually start as drafts so you can review details, context, credits, and presentation before publishing.',
|
||||
},
|
||||
{
|
||||
title: 'Processing and previews happen',
|
||||
description: 'Previews or processing steps may run so the upload is easier to review and present clearly.',
|
||||
},
|
||||
{
|
||||
title: 'Metadata is completed',
|
||||
description: 'Titles, descriptions, tags, categories, and other public-facing details are finalized while the upload is still safe to edit.',
|
||||
},
|
||||
{
|
||||
title: 'Context and contributors are checked',
|
||||
description: 'Before publishing, verify whether the work belongs to you or a Group and make sure contributor credit reflects the real people behind the upload.',
|
||||
},
|
||||
{
|
||||
title: 'Publish or submit for review',
|
||||
description: 'Once the upload is ready, it is either published or routed into review depending on the workflow and permissions involved.',
|
||||
},
|
||||
]
|
||||
|
||||
export const PREP_ITEMS = [
|
||||
'Final file you actually want people to see, not a rough placeholder.',
|
||||
'Clear title and description so the upload is understandable without extra cleanup later.',
|
||||
'Tags and categories if they apply to the content type you are publishing.',
|
||||
'Contributor information for collaborative work, especially if a Group is involved.',
|
||||
'The correct publish context: personal or Group.',
|
||||
'A good preview mindset so the public version feels intentional and discoverable.',
|
||||
]
|
||||
|
||||
export const UPLOAD_COMPARISON_COLUMNS = [
|
||||
{ key: 'topic', label: 'Topic' },
|
||||
{ key: 'personal', label: 'Personal upload' },
|
||||
{ key: 'group', label: 'Group upload' },
|
||||
]
|
||||
|
||||
export const UPLOAD_COMPARISON_ROWS = [
|
||||
{
|
||||
id: 'published-as',
|
||||
topic: 'Published identity',
|
||||
personal: 'The work publishes under your personal creator identity.',
|
||||
group: 'The work publishes under the Group identity.',
|
||||
},
|
||||
{
|
||||
id: 'credit',
|
||||
topic: 'Human credit',
|
||||
personal: 'Your own authorship and upload role are usually straightforward.',
|
||||
group: 'Contributor credit still matters. Group identity does not replace human authorship.',
|
||||
},
|
||||
{
|
||||
id: 'permissions',
|
||||
topic: 'Why behavior can differ',
|
||||
personal: 'You usually control the full flow yourself.',
|
||||
group: 'Roles, review queues, and approvals may affect whether you can publish directly.',
|
||||
},
|
||||
{
|
||||
id: 'drafts',
|
||||
topic: 'Draft handling',
|
||||
personal: 'Drafts stay in your personal workspace until you finish them.',
|
||||
group: 'Drafts may be part of a team review flow before they are publicly published.',
|
||||
},
|
||||
]
|
||||
|
||||
export const DRAFT_FLOW_ITEMS = [
|
||||
'Uploads usually begin as drafts so you can finish details without rushing a public release.',
|
||||
'Drafts are where metadata, context, previews, and contributor setup are reviewed.',
|
||||
'Drafts may still be processing while you are working on the rest of the upload.',
|
||||
'Incomplete drafts can be left temporarily, but they are best finished quickly so the workspace stays clean.',
|
||||
'In Group workflows, drafts may be submitted for review instead of publishing directly.',
|
||||
]
|
||||
|
||||
export const PUBLISH_FLOW_ITEMS = [
|
||||
'Publishing should happen after file review, metadata review, and context confirmation.',
|
||||
'You should verify titles, descriptions, previews, and contributor information before the final step.',
|
||||
'Some Groups may route the upload into review instead of publishing immediately.',
|
||||
'Publishing under the wrong context is one of the most common avoidable mistakes.',
|
||||
]
|
||||
|
||||
export const FILE_METADATA_ITEMS = [
|
||||
'Previews matter because people often decide whether to open or trust a piece based on its first impression.',
|
||||
'Metadata matters because clear titles and descriptions help the work feel intentional and improve discoverability.',
|
||||
'Final review matters because small mistakes feel much bigger after the upload is public.',
|
||||
'Taking a minute to review the presentation is usually faster than correcting avoidable problems later.',
|
||||
]
|
||||
|
||||
export const CREDIT_EXAMPLE = [
|
||||
{ label: 'Published by', value: 'Nightshift Collective' },
|
||||
{ label: 'Uploaded by', value: 'Gregor' },
|
||||
{ label: 'Primary author', value: 'Gregor' },
|
||||
{ label: 'Contributors', value: 'Paula, Denis' },
|
||||
]
|
||||
|
||||
export const CREDIT_BULLETS = [
|
||||
'Group uploads still preserve human credit.',
|
||||
'Primary author should reflect the main author of the work, not just the person who clicked upload.',
|
||||
'Uploaded by and published identity are not always the same thing.',
|
||||
'Contributor lists should be intentional, accurate, and checked before publish.',
|
||||
]
|
||||
|
||||
export const BEST_PRACTICES = [
|
||||
'Prepare metadata before you start uploading whenever possible.',
|
||||
'Use strong files and previews so the public result feels finished.',
|
||||
'Check the publishing context before the final publish step.',
|
||||
'Do not rush final publish just because the file is already in the system.',
|
||||
'Give proper contributor credit for collaborative work.',
|
||||
'Keep drafts organized and return to incomplete uploads quickly.',
|
||||
]
|
||||
|
||||
export const COMMON_MISTAKES = [
|
||||
'Uploading under the wrong context and only noticing after publish.',
|
||||
'Forgetting contributor credit during a collaborative upload.',
|
||||
'Leaving metadata empty because the file itself looked finished.',
|
||||
'Abandoning drafts until the workspace becomes cluttered.',
|
||||
'Trying to publish before everything has been reviewed clearly.',
|
||||
'Misunderstanding review queue behavior in Group workflows.',
|
||||
]
|
||||
|
||||
export const FAQ_ITEMS = [
|
||||
{
|
||||
question: 'How does upload work on Skinbase?',
|
||||
answer: 'Uploads move through a guided workflow. The file is received, a draft is created, previews or processing may happen, metadata is completed, context and contributor credit are reviewed, and then the work is published or submitted for review.',
|
||||
},
|
||||
{
|
||||
question: 'Why is my upload a draft first?',
|
||||
answer: 'Draft-first flow gives you a safe place to finish titles, descriptions, previews, context, and credit before the public version goes live.',
|
||||
},
|
||||
{
|
||||
question: 'Can I upload for a Group?',
|
||||
answer: 'Yes, if your Group role and workflow allow it. Just make sure the active context is the Group and that contributor credit is set correctly before final publish.',
|
||||
},
|
||||
{
|
||||
question: 'Why can’t I publish immediately?',
|
||||
answer: 'You may still need to finish metadata, wait for processing, confirm context, or pass through a review flow if the upload belongs to a Group workflow.',
|
||||
},
|
||||
{
|
||||
question: 'What should I do before publishing?',
|
||||
answer: 'Check file quality, previews, metadata, tags, context, and contributor credit. Publishing should be the last review step, not the first one.',
|
||||
},
|
||||
{
|
||||
question: 'What happens if my upload is incomplete?',
|
||||
answer: 'It can stay as a draft until you return and finish it, but it is best to complete incomplete drafts quickly so the workspace stays manageable.',
|
||||
},
|
||||
{
|
||||
question: 'Can I come back later?',
|
||||
answer: 'Yes. Drafts exist so you can return later, but do not let unfinished uploads pile up without clear intent.',
|
||||
},
|
||||
]
|
||||
|
||||
export const TROUBLESHOOTING_ITEMS = [
|
||||
{
|
||||
title: 'My upload is stuck',
|
||||
body: 'Give processing a moment, then reopen the upload through Studio or the upload flow. If it still feels stuck, escalate instead of repeatedly retrying blindly.',
|
||||
linkKey: 'upload',
|
||||
linkLabel: 'Open upload flow',
|
||||
},
|
||||
{
|
||||
title: 'Preview is missing',
|
||||
body: 'Preview issues are often a sign that the upload is still processing or that you need to re-open the draft and review the current state before publishing.',
|
||||
linkKey: 'studio_drafts',
|
||||
linkLabel: 'Open drafts',
|
||||
},
|
||||
{
|
||||
title: 'I can’t publish',
|
||||
body: 'Check whether the issue is unfinished metadata, wrong context, or a Group review workflow that prevents direct publishing.',
|
||||
linkKey: 'groups_faq',
|
||||
linkLabel: 'Read Groups FAQ',
|
||||
},
|
||||
{
|
||||
title: 'I uploaded under the wrong context',
|
||||
body: 'Review the draft or published item immediately, then correct the personal-versus-Group context before more workflow steps build on top of the mistake.',
|
||||
linkKey: 'studio_help',
|
||||
linkLabel: 'Read Studio help',
|
||||
},
|
||||
{
|
||||
title: 'My Group submission went into review',
|
||||
body: 'That usually means the Group workflow expects approval before public publishing. This is often intentional, not a failure.',
|
||||
linkKey: 'groups_help',
|
||||
linkLabel: 'Read Groups help',
|
||||
},
|
||||
{
|
||||
title: 'I can’t find my draft',
|
||||
body: 'Draft confusion usually comes from checking the wrong context. Confirm whether the upload belongs to your personal workspace or a Group.',
|
||||
linkKey: 'studio_drafts',
|
||||
linkLabel: 'Open drafts',
|
||||
},
|
||||
{
|
||||
title: 'Upload failed',
|
||||
body: 'If the upload repeatedly fails, stop retrying blindly and use support or bug reporting with a clear description of what happened.',
|
||||
linkKey: 'report_issue',
|
||||
linkLabel: 'Report issue',
|
||||
},
|
||||
]
|
||||
|
||||
export const RELATED_HELP_ITEMS = [
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Studio help',
|
||||
body: 'Use the Studio guide to understand the wider workspace where drafts, content management, and publishing decisions live.',
|
||||
linkKey: 'studio_help',
|
||||
tone: 'sky',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Groups help',
|
||||
body: 'Use the Groups guide if the upload belongs to a shared identity, needs contributor credit, or goes through Group review.',
|
||||
linkKey: 'groups_help',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Profile help',
|
||||
body: 'Use the Profile guide if upload confusion is really about creator identity, presentation, or how your public presence should look after publishing.',
|
||||
linkKey: 'help_profile',
|
||||
tone: 'white',
|
||||
},
|
||||
{
|
||||
eyebrow: 'Live help',
|
||||
title: 'Cards help',
|
||||
body: 'Use the Cards guide when the question is really about presentation content, Card creation, or choosing Cards instead of artworks or posts.',
|
||||
linkKey: 'help_cards',
|
||||
tone: 'white',
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user