296 lines
14 KiB
JavaScript
296 lines
14 KiB
JavaScript
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, 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>
|
|
)
|
|
} |