232 lines
12 KiB
JavaScript
232 lines
12 KiB
JavaScript
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>
|
|
)
|
|
} |