klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Commit workspace changes

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-05 19:42:33 +02:00
parent 148a3bbe43
commit 08ad757bcb
312 changed files with 35149 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
resources/js/Pages/Help/ProfileHelpPage.jsx Normal file
View File

@@ -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">&rarr;</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>
)
}