update home page

pixijs · Feb 6, 2025 · 2d09222 · 2d09222
1 parent 25103cd
commit 2d09222
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 59 deletions.
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -78,9 +78,9 @@ const config: Config = {
             items: [
                 {
                     type: 'docSidebar',
-                    sidebarId: 'tutorialSidebar',
+                    sidebarId: 'guides',
                     position: 'left',
-                    label: 'Guide',
+                    label: 'Guides',
                 },
                 {
                     href: 'https://opencollective.com/pixijs',

diff --git a/docs/sidebars.ts b/docs/sidebars.ts
@@ -11,22 +11,7 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
  Create as many sidebars as you want.
  */
 const sidebars: SidebarsConfig = {
-    tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }]
-    // By default, Docusaurus generates a sidebar from the docs folder structure
-    // guide: [{ type: 'autogenerated', dirName: 'guide' }],
-
-    // But you can create a sidebar manually
-    /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
+    guides: [{ type: 'autogenerated', dirName: '.' }]
 };
 
 export default sidebars;
diff --git a/docs/src/pages/CTA.tsx b/docs/src/pages/CTA.tsx
@@ -0,0 +1,47 @@
+import styles from './index.module.css';
+import Link from '@docusaurus/Link';
+
+import type React from 'react';
+
+export interface CTAOptions
+{
+    label: string;
+    link: string;
+    white?: boolean;
+    outline?: boolean;
+    style?: React.CSSProperties;
+    anim?: string;
+}
+
+export default function CTA(opts: CTAOptions): JSX.Element
+{
+    let classNames = styles.button;
+
+    if (opts.anim)
+    {
+        classNames += ` ${opts.anim}`;
+    }
+
+    return (
+        <Link className={classNames} to={opts.link} style={opts?.style || {}}>
+            <div className={styles.buttonShadow}>
+                <div></div>
+            </div>
+            <span>{opts.label}</span>
+            <svg
+                className="next"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+                x="0px"
+                y="0px"
+                viewBox="0 0 23 14"
+                xmlSpace="preserve"
+            >
+                <line x1="22" y1="7" x2="16" y2="1"></line>
+                <line x1="22" y1="7" x2="16" y2="13"></line>
+                <line x1="0" y1="7" x2="23" y2="7"></line>
+            </svg>
+        </Link>
+    );
+}
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -4,21 +4,119 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
 }
 
 @media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+    .heroBanner {
+        padding: 2rem;
+    }
 }
 
 .buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.button {
+    --button-color: var(--ifm-color-primary);
+    --button-hover-color: #c2185b;
+    width: 208px;
+    height: 50px;
+    font-size: 1.1rem;
+    font-weight: 500;
+    background: var(--button-color);
+    color: #fff;
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.5rem;
+    border: 0;
+    text-transform: uppercase;
+    padding: 0.9rem 1.5rem;
+    margin: 13px 13px 12px 12px;
+    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.button::before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--button-hover-color);
+    display: block;
+    transition: width 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.button .buttonShadow {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.button .buttonShadow > div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 0.6rem;
+    border: 2px solid var(--button-color);
+    border-top: none;
+    border-left: none;
+    right: -6px;
+    bottom: -6px;
+}
+
+.button:hover {
+    transform: translateX(2px) translateY(2px) !important;
+    color: #fff;
+    text-decoration: none;
+}
+
+.button:hover::before {
+    width: 100%;
+}
+
+.button:hover .buttonShadow > div {
+    right: -4px;
+    bottom: -4px;
+}
+
+.button:hover svg {
+    transform: translateX(4px);
+}
+
+.button span {
+    position: relative;
+    z-index: 2;
+    vertical-align: middle;
+}
+
+.button svg {
+    display: inline-block;
+    vertical-align: middle;
+    width: 23px;
+    height: 14px;
+    margin-left: 30px;
+    margin-top: 0;
+    top: auto;
+    right: auto;
+    position: relative;
+    z-index: 2;
+    transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.button svg line {
+    stroke: #fff;
+    stroke-width: 2px;
 }
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import CTA from './CTA';
 import styles from './index.module.css';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Heading from '@theme/Heading';
@@ -12,12 +13,7 @@ function HomepageHeader()
         <header className={clsx(styles.heroBanner)}>
             <div className="container">
                 <Heading as="h1">
-                    <img
-                        src="/pixi-react/img/logo-main.svg"
-                        alt="Logo"
-                        width={'100%'}
-                        style={{ maxHeight: 150 }}
-                    />
+                    <img src="/pixi-react/img/logo-main.svg" alt="Logo" width={'100%'} style={{ maxHeight: 150 }} />
                 </Heading>
                 <p className="hero__subtitle" style={{ marginTop: -30 }}>
                     {siteConfig.tagline}
@@ -32,10 +28,7 @@ export default function Home(): JSX.Element
     const { siteConfig } = useDocusaurusContext();
 
     return (
-        <Layout
-            title={`${siteConfig.title}`}
-            description="A CLI tool to create PixiJS projects"
-        >
+        <Layout title={`${siteConfig.title}`} description="A CLI tool to create PixiJS projects">
             <HomepageHeader />
             <main
                 style={{
@@ -48,15 +41,15 @@ export default function Home(): JSX.Element
             >
                 <section
                     style={{
-                        textAlign: 'left',
+                        textAlign: 'center',
                         maxWidth: 800,
                         width: '100%',
                         padding: 20,
                     }}
                 >
                     <img
-                        src="/pixi-react/img/demo.gif"
-                        alt="Demo GIF"
+                        src="/pixi-react/v7/code.png"
+                        alt="Demo image"
                         style={{
                             width: '100%',
                             maxWidth: 800,
@@ -65,22 +58,8 @@ export default function Home(): JSX.Element
                             border: '2px solid #676767', // Optional: Add a border
                         }}
                     />
-                    <p>With NPM:</p>
-                    <pre>
-                        <code>npm create pixi.js@latest</code>
-                    </pre>
-                    <p>With Yarn:</p>
-                    <pre>
-                        <code>yarn create pixi.js</code>
-                    </pre>
-                    <p>With PNPM:</p>
-                    <pre>
-                        <code>pnpm create pixi.js</code>
-                    </pre>
-                    <p>With Bun:</p>
-                    <pre>
-                        <code>bun create pixi.js</code>
-                    </pre>
+                    {/* add a getting started button that takes you to the guides */}
+                    <CTA label="Get Started" link="about" />
                 </section>
             </main>
         </Layout>

diff --git a/docs/src/typings.d.ts b/docs/src/typings.d.ts
@@ -1,3 +1,2 @@
-declare module '*.css';
 declare module '*.md';
 declare module '!!raw-loader!.*';
diff --git a/docs/static/v7/code.png b/docs/static/v7/code.png