mirror of
https://github.com/mleem97/gregWiki.git
synced 2026-04-11 03:29:19 +02:00
554 lines
21 KiB
TypeScript
554 lines
21 KiB
TypeScript
import React, {useMemo} from 'react';
|
|
import Layout from '@theme/Layout';
|
|
import Link from '@docusaurus/Link';
|
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
import {motion, type Variants, useReducedMotion} from 'framer-motion';
|
|
import {getHomepageContent} from '../i18n/homepage';
|
|
import gregImage from '../image.png';
|
|
import {
|
|
FaArrowUpRightFromSquare,
|
|
FaDiscord,
|
|
FaDownload,
|
|
FaGithub,
|
|
FaLifeRing,
|
|
FaShop,
|
|
} from 'react-icons/fa6';
|
|
import {GregCoreRandomSnippet} from '../components/GregCoreRandomSnippet';
|
|
|
|
/** Always resolves to the newest GitHub release (redirect). */
|
|
const GREG_MODMANAGER_LATEST =
|
|
'https://github.com/mleem97/GregToolsModmanager/releases/latest';
|
|
|
|
const viewport = {once: true, margin: '-90px'};
|
|
|
|
/** Inline `greg_hooks.json` in copy when the string contains that token. */
|
|
function formatBulletWithOptionalCode(text: string): React.ReactNode {
|
|
if (!text.includes('greg_hooks.json')) {
|
|
return text;
|
|
}
|
|
const parts = text.split('greg_hooks.json');
|
|
return (
|
|
<>
|
|
{parts.map((part, i) => (
|
|
<React.Fragment key={i}>
|
|
{part}
|
|
{i < parts.length - 1 ? (
|
|
<code className="text-xs">greg_hooks.json</code>
|
|
) : null}
|
|
</React.Fragment>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function buildVariants(reducedMotion: boolean) {
|
|
const section: Variants = reducedMotion
|
|
? {hidden: {opacity: 0}, show: {opacity: 1}}
|
|
: {
|
|
hidden: {opacity: 0, y: 26},
|
|
show: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {duration: 0.65, ease: [0.16, 1, 0.3, 1]},
|
|
},
|
|
};
|
|
|
|
const grid: Variants = {
|
|
hidden: {},
|
|
show: {
|
|
transition: {
|
|
staggerChildren: reducedMotion ? 0 : 0.09,
|
|
delayChildren: reducedMotion ? 0 : 0.06,
|
|
},
|
|
},
|
|
};
|
|
|
|
const card: Variants = reducedMotion
|
|
? {hidden: {opacity: 0}, show: {opacity: 1}}
|
|
: {
|
|
hidden: {opacity: 0, y: 18, scale: 0.98},
|
|
show: {
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: {duration: 0.45, ease: [0.16, 1, 0.3, 1]},
|
|
},
|
|
};
|
|
|
|
const textReveal: Variants = reducedMotion
|
|
? {hidden: {opacity: 0}, show: {opacity: 1}}
|
|
: {
|
|
hidden: {opacity: 0, y: 18},
|
|
show: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {duration: 0.5, ease: [0.16, 1, 0.3, 1]},
|
|
},
|
|
};
|
|
|
|
return {section, grid, card, textReveal};
|
|
}
|
|
|
|
export default function HomePage(): JSX.Element {
|
|
const {
|
|
i18n: {currentLocale},
|
|
} = useDocusaurusContext();
|
|
|
|
const t = getHomepageContent(currentLocale);
|
|
const reducedMotion = useReducedMotion();
|
|
const variants = useMemo(() => buildVariants(Boolean(reducedMotion)), [reducedMotion]);
|
|
|
|
return (
|
|
<Layout
|
|
title="Home"
|
|
description="gregFramework: player help at /players, mod catalog, and mod-author wiki at /wiki for Data Center Simulator."
|
|
>
|
|
<main className="bg-background text-on-surface font-sans min-h-screen editorial-bleed bg-hero-gradient">
|
|
<section className="hero-motion-wrap relative flex min-h-[72vh] flex-col items-center justify-center overflow-hidden px-4 py-24 text-center">
|
|
<div className="hero-particles" aria-hidden="true" />
|
|
<div className="hero-orb hero-orb-pink" aria-hidden="true" />
|
|
<div className="hero-orb hero-orb-green" aria-hidden="true" />
|
|
|
|
<motion.div
|
|
className="mb-8 inline-flex items-center gap-2 rounded-full border border-outline-variant/20 bg-surface-container-high px-4 py-1.5"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.textReveal}
|
|
>
|
|
<span className="h-2 w-2 animate-pulse rounded-full bg-primary" aria-hidden />
|
|
<span className="text-xs font-bold uppercase tracking-widest text-primary-dim">
|
|
{t.heroBadge}
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
className="homepage-logo-title mb-6 text-5xl font-black leading-none tracking-tighter text-on-surface md:text-7xl lg:text-8xl"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.textReveal}
|
|
>
|
|
<span className="text-on-surface">{t.heroBrandLine1}</span>
|
|
<span className="bg-gradient-to-br from-primary to-primary-container bg-clip-text text-transparent">
|
|
{t.heroBrandLine2Gradient}
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.h2
|
|
className="mb-4 max-w-3xl font-headline text-2xl font-bold tracking-tight text-on-surface md:text-4xl"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.textReveal}
|
|
transition={{delay: reducedMotion ? 0 : 0.08}}
|
|
>
|
|
{t.heroLine1}
|
|
<br />
|
|
<span className="text-on-surface-variant">{t.heroLine2}</span>
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="mb-10 max-w-2xl text-base font-medium leading-relaxed text-on-surface-variant md:text-xl"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.textReveal}
|
|
transition={{delay: reducedMotion ? 0 : 0.14}}
|
|
>
|
|
{t.heroSub1}
|
|
<br />
|
|
{t.heroSub2}
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
className="flex flex-wrap items-center justify-center gap-3 sm:gap-4"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.textReveal}
|
|
transition={{delay: reducedMotion ? 0 : 0.22}}
|
|
>
|
|
<Link to="/players" className="btn-primary hero-glow rounded-lg px-8 py-4 text-lg md:px-10">
|
|
{t.ctaStart}
|
|
</Link>
|
|
<Link to="/mods" className="btn-outline rounded-lg px-8 py-4 text-lg md:px-10">
|
|
{t.ctaMods}
|
|
</Link>
|
|
<a
|
|
href={GREG_MODMANAGER_LATEST}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-outline inline-flex items-center justify-center gap-2 rounded-lg border-primary/35 px-8 py-4 text-lg text-on-surface hover:border-primary md:px-10"
|
|
>
|
|
<FaDownload className="text-lg" aria-hidden />
|
|
{t.ctaModManager}
|
|
</a>
|
|
</motion.div>
|
|
</section>
|
|
|
|
<motion.section
|
|
id="features"
|
|
className="section-surface-alt px-4 py-24"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<motion.div
|
|
className="mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-12"
|
|
variants={variants.grid}
|
|
>
|
|
<motion.article
|
|
className="app-card app-card-motion app-card-glow glass-card relative overflow-hidden rounded-2xl p-10 md:col-span-8"
|
|
variants={variants.card}
|
|
whileHover={
|
|
reducedMotion
|
|
? undefined
|
|
: {
|
|
y: -4,
|
|
transition: {type: 'spring', stiffness: 280, damping: 18},
|
|
}
|
|
}
|
|
>
|
|
<div className="relative z-10">
|
|
<span className="material-symbols-outlined mb-6 text-4xl text-primary">layers</span>
|
|
<h3 className="mb-4 font-headline text-3xl font-bold text-on-surface">
|
|
{t.featureTitles[0]}
|
|
</h3>
|
|
<p className="max-w-md text-lg leading-relaxed text-on-surface-variant">
|
|
{t.featureDescriptions[0]}
|
|
</p>
|
|
</div>
|
|
</motion.article>
|
|
<motion.article
|
|
className="app-card app-card-motion app-card-glow rounded-2xl border border-outline-variant/10 p-8 md:col-span-4"
|
|
variants={variants.card}
|
|
>
|
|
<span className="material-symbols-outlined mb-6 text-3xl text-tertiary">cable</span>
|
|
<h3 className="mb-3 font-headline text-xl font-bold text-on-surface">
|
|
{t.featureTitles[1]}
|
|
</h3>
|
|
<p className="text-sm leading-relaxed text-on-surface-variant">
|
|
{t.featureDescriptions[1]}
|
|
</p>
|
|
</motion.article>
|
|
<motion.article
|
|
className="app-card app-card-motion app-card-glow rounded-2xl border border-outline-variant/10 p-8 md:col-span-4"
|
|
variants={variants.card}
|
|
>
|
|
<span className="material-symbols-outlined mb-6 text-3xl text-secondary">
|
|
menu_book
|
|
</span>
|
|
<h3 className="mb-3 font-headline text-xl font-bold text-on-surface">
|
|
{t.featureTitles[2]}
|
|
</h3>
|
|
<p className="text-sm leading-relaxed text-on-surface-variant">
|
|
{t.featureDescriptions[2]}
|
|
</p>
|
|
</motion.article>
|
|
<motion.article
|
|
className="app-card app-card-motion app-card-glow flex flex-col justify-between rounded-2xl border border-outline-variant/10 p-10 md:col-span-8"
|
|
variants={variants.card}
|
|
>
|
|
<div>
|
|
<span className="material-symbols-outlined mb-6 text-4xl text-primary">groups</span>
|
|
<h3 className="mb-4 font-headline text-3xl font-bold text-on-surface">
|
|
{t.featureTitles[3]}
|
|
</h3>
|
|
<p className="max-w-lg text-lg leading-relaxed text-on-surface-variant">
|
|
{t.featureDescriptions[3]}
|
|
</p>
|
|
</div>
|
|
</motion.article>
|
|
</motion.div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="greg-modmanager"
|
|
className="px-4 py-20"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="relative mx-auto max-w-4xl overflow-hidden rounded-3xl border border-outline-variant/20 bg-gradient-to-br from-surface-container-high to-surface-container p-10 text-center md:p-14">
|
|
<div
|
|
className="absolute -right-16 -top-20 h-56 w-56 rounded-full bg-secondary/10 blur-[90px]"
|
|
aria-hidden
|
|
/>
|
|
<div className="relative z-10">
|
|
<span className="material-symbols-outlined mb-4 text-5xl text-primary" aria-hidden>
|
|
download_for_offline
|
|
</span>
|
|
<h2 className="mb-4 font-headline text-3xl font-bold text-on-surface md:text-4xl">
|
|
{t.modManagerSectionTitle}
|
|
</h2>
|
|
<p className="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-on-surface-variant">
|
|
{t.modManagerSectionBody}
|
|
</p>
|
|
<a
|
|
href={GREG_MODMANAGER_LATEST}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-primary hero-glow mb-4 inline-flex items-center gap-2 rounded-lg px-10 py-4 text-lg"
|
|
>
|
|
<FaDownload className="text-xl" aria-hidden />
|
|
{t.modManagerDownloadLabel}
|
|
</a>
|
|
<p className="text-sm text-on-surface-variant/90">{t.modManagerLatestHint}</p>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="code"
|
|
className="section-surface-alt px-4 py-24"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="mx-auto grid max-w-7xl items-center gap-16 px-2 md:grid-cols-2">
|
|
<div>
|
|
<h2 className="mb-6 font-headline text-4xl font-bold text-on-surface">
|
|
{t.codeSectionTitle}
|
|
</h2>
|
|
<p className="mb-8 text-lg leading-relaxed text-on-surface-variant">
|
|
{t.codeSectionLead}
|
|
</p>
|
|
<ul className="space-y-4 text-on-surface-variant">
|
|
{t.codeSectionBullets.map((line) => (
|
|
<li key={line} className="flex items-start gap-3">
|
|
<span className="material-symbols-outlined mt-0.5 shrink-0 text-primary">
|
|
check_circle
|
|
</span>
|
|
<span>{formatBulletWithOptionalCode(line)}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<GregCoreRandomSnippet
|
|
caption={t.codeSnippetCaption}
|
|
loadingLabel={t.codeSnippetLoading}
|
|
/>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="docs"
|
|
className="px-4 py-20"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="mx-auto max-w-6xl text-center">
|
|
<motion.h2
|
|
className="mb-10 font-headline text-3xl font-bold text-on-surface"
|
|
variants={variants.textReveal}
|
|
>
|
|
{t.knowledgeSectionTitle}
|
|
</motion.h2>
|
|
<motion.div
|
|
className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
|
|
variants={variants.grid}
|
|
>
|
|
{t.knowledgeLinks.map((doc) => (
|
|
<motion.div key={doc.link} variants={variants.card}>
|
|
<Link
|
|
to={doc.link}
|
|
className="app-card app-card-motion app-card-glow group block rounded-lg p-5 text-left text-on-surface"
|
|
>
|
|
<div className="mb-2 font-headline text-lg font-bold text-on-surface transition-colors group-hover:text-primary">
|
|
{doc.title}
|
|
</div>
|
|
<div className="text-sm text-on-surface-variant">{doc.description}</div>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="ecosystem"
|
|
className="section-surface-alt px-4 py-20"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="mx-auto max-w-5xl text-center">
|
|
<motion.h2
|
|
className="mb-10 font-headline text-3xl font-bold text-on-surface"
|
|
variants={variants.textReveal}
|
|
>
|
|
{t.workflowSectionTitle}
|
|
</motion.h2>
|
|
<motion.div className="grid grid-cols-1 gap-4 md:grid-cols-2" variants={variants.grid}>
|
|
{t.workflowLinks.map((doc) => (
|
|
<motion.div key={doc.link} variants={variants.card}>
|
|
<Link
|
|
to={doc.link}
|
|
className="app-card app-card-motion app-card-glow group block rounded-lg p-5 text-left text-on-surface"
|
|
>
|
|
<div className="mb-2 font-headline text-lg font-bold text-on-surface transition-colors group-hover:text-primary">
|
|
{doc.title}
|
|
</div>
|
|
<div className="text-sm text-on-surface-variant">{doc.description}</div>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="discord-cta"
|
|
className="px-4 py-24"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="relative mx-auto max-w-4xl overflow-hidden rounded-3xl border border-primary/10 bg-gradient-to-br from-surface-container to-surface-container-high p-12 text-center md:p-16">
|
|
<div
|
|
className="absolute -left-24 -top-24 h-64 w-64 rounded-full bg-primary/10 blur-[100px]"
|
|
aria-hidden
|
|
/>
|
|
<div className="relative z-10">
|
|
<h2 className="mb-6 font-headline text-3xl font-bold text-on-surface md:text-4xl">
|
|
{t.ctaDiscordTitle}
|
|
</h2>
|
|
<p className="mx-auto mb-10 max-w-xl text-lg text-on-surface-variant">
|
|
{t.ctaDiscordLead}
|
|
</p>
|
|
<Link
|
|
to="https://discord.gg/greg"
|
|
className="btn-primary hero-glow inline-flex items-center gap-2 rounded-lg px-10 py-4 text-lg"
|
|
>
|
|
<FaDiscord className="text-xl" />
|
|
{t.ctaDiscordButton}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="greg-story"
|
|
className="px-4 py-20"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="mx-auto max-w-6xl">
|
|
<motion.div
|
|
className="app-card app-card-glow flex flex-col gap-6 rounded-2xl p-6 md:flex-row md:items-center md:justify-between md:p-8"
|
|
variants={variants.card}
|
|
>
|
|
<div>
|
|
<h2 className="mb-4 font-headline text-2xl font-bold text-on-surface md:text-3xl">
|
|
{t.gregTitle}
|
|
</h2>
|
|
<p className="mb-4 max-w-md text-sm leading-relaxed text-on-surface-variant md:text-base">
|
|
{t.gregText1}
|
|
</p>
|
|
<p className="mb-4 max-w-md text-sm leading-relaxed text-on-surface-variant md:text-base">
|
|
{t.gregText2}
|
|
</p>
|
|
<p className="font-headline text-lg font-bold italic text-secondary">
|
|
{t.gregQuote}
|
|
</p>
|
|
</div>
|
|
<motion.div
|
|
className="shrink-0"
|
|
whileHover={reducedMotion ? undefined : {rotate: 1.2, y: -3}}
|
|
>
|
|
<div className="h-40 w-32 overflow-hidden rounded-xl border-2 border-primary/25 md:h-56 md:w-48">
|
|
<img src={gregImage} alt="Greg" className="h-full w-full object-cover" />
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="community"
|
|
className="px-4 py-16"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="mx-auto max-w-6xl">
|
|
<motion.div
|
|
className="mb-6 rounded-xl border border-outline-variant/15 bg-surface-container-high p-4"
|
|
variants={variants.card}
|
|
>
|
|
<div className="text-sm font-semibold uppercase tracking-wide text-tertiary">
|
|
{t.comingSoon}
|
|
</div>
|
|
<div className="mt-1 text-base font-medium text-on-surface">{t.comingSoonText}</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="app-card app-card-glow flex flex-col gap-6 rounded-xl p-6 md:flex-row md:items-center md:justify-between"
|
|
variants={variants.card}
|
|
>
|
|
<div>
|
|
<h3 className="font-headline text-2xl font-bold text-on-surface">
|
|
{t.communityTitle}
|
|
</h3>
|
|
<p className="mt-2 text-on-surface-variant">{t.communityText}</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Link to="https://frikadellental.de" className="btn-social">
|
|
<FaArrowUpRightFromSquare /> frikadellental.de
|
|
</Link>
|
|
<Link to="/mods" className="btn-social">
|
|
<FaShop /> {t.availableModsLabel}
|
|
</Link>
|
|
<Link to="https://github.com/mleem97/gregFramework" className="btn-social">
|
|
<FaGithub /> {t.repositoryLabel}
|
|
</Link>
|
|
<Link
|
|
to="https://discord.gg/greg"
|
|
className="btn-social border-transparent bg-[#5865F2] text-white hover:bg-[#4752C4]"
|
|
>
|
|
<FaDiscord /> {t.joinLabel}
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<motion.section
|
|
id="support"
|
|
className="section-surface-alt px-4 py-16"
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={viewport}
|
|
variants={variants.section}
|
|
>
|
|
<div className="mx-auto flex max-w-6xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h3 className="font-headline text-2xl font-bold text-on-surface">{t.supportTitle}</h3>
|
|
<p className="text-on-surface-variant">{t.supportText}</p>
|
|
</div>
|
|
<motion.div whileHover={reducedMotion ? undefined : {y: -2, scale: 1.01}}>
|
|
<Link
|
|
to="https://github.com/mleem97/gregFramework/issues"
|
|
className="btn-primary inline-flex items-center gap-2 rounded-xl px-5 py-3"
|
|
>
|
|
<FaLifeRing /> {t.supportCta}
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
</main>
|
|
</Layout>
|
|
);
|
|
}
|