handbook/sites/wonderland/src/pages/index.tsx at 8e318b1d24d4fed98003f92fd356629263f45fe9 · defi-wonderland/handbook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import Layout from "@theme/Layout";
import styles from "./index.module.css";
import {
  HeroSection,
  CategoryCards,
  IlustrationsContainer,
  NoiseBackground,
  FooterBackground,
  TriangleBackground,
  StarsBackground,
  HandbookSection,
  Category,
  HeroSectionProps,
  Handbook,
  HandbookSectionProps,
  IlustrationsContainerProps,
} from "@handbook/common-config/components";

const wonderlandCategories: Category[] = [
  {
    title: "Processes",
    icon: "/img/puzzle-piece.svg",
    href: "/docs/processes/overview",
  },
  {
    title: "Development",
    icon: "/img/code-bracket-square.svg",
    href: "/docs/development/overview",
  },
  {
    title: "Security",
    icon: "/img/key.svg",
    href: "/docs/security/overview",
  },
  {
    title: "Testing",
    icon: "/img/bug-ant.svg",
    href: "/docs/testing/overview",
  },
];

const wonderlandHeroProps: HeroSectionProps = {
  title: "Wonderland Handbook",
  titleImage: "/img/wonderland-handbook-title.svg",
  description:
    "At Wonderland, we believe that the ecosystem thrives on collaboration and shared knowledge. This handbook is our living repository: a curated guide to our best practices, processes, and technical insights.",
  buttonText: "Go down the rabbit hole",
  buttonImage: "/common/img/enter-button.svg",
  buttonLink: "/docs/intro/welcome",
};

const wonderlandHandbooks: Handbook[] = [
  {
    title: "Optimism handbook",
    image: "/common/img/optimism-handbook.svg",
    href: "https://optimism.handbook.wonderland.xyz",
    background: {
      bgType: "other",
      bgImage: "/common/img/background-handbook-card.jpg",
    },
  },
  {
    title: "Aztec handbook",
    image: "/common/img/aztec-handbook.svg",
    href: "https://aztec.handbook.wonderland.xyz",
    background: {
      bgType: "other",
      bgImage: "/common/img/aztec-background-handbook-card.jpg",
    },
  },
  {
    title: "Ethereum Foundation Handbook",
    image: "/common/img/ef-logo.png",
    href: "https://ef.handbook.wonderland.xyz",
    background: {
      bgType: "other",
      bgImage: "/common/img/ef-social-card.png",
    },
  },
];

const wonderlandHandbookProps: HandbookSectionProps = {
  handbooks: wonderlandHandbooks,
  title: "PARTNER HANDBOOKS",
  description:
    "These handbooks are internal onboarding material created by Wonderland for working with our partners. It's not official documentation and may not reflect the latest updates. We share it openly in case it's useful to others.",
  className: "handbooksSectionWonderland",
};

const wonderlandIllustrationsProps: IlustrationsContainerProps = {
  coneImage: "/img/cone.png",
  sphereImage: "/img/sphere.png",
  ringImage: "/img/ring.png",
};

function Home(): React.ReactElement {
  return (
    <Layout description="A curated guide to our best practices, processes, and technical insights.">
      <style>{`
        #__docusaurus {
          overflow: hidden;
        }
      `}</style>
      <main className={styles.main}>
        <StarsBackground zIndex={-1} />

        <section className={styles.centerContent}>
          <HeroSection {...wonderlandHeroProps} />
          <CategoryCards categories={wonderlandCategories} />
        </section>

        <IlustrationsContainer {...wonderlandIllustrationsProps} />

        <HandbookSection {...wonderlandHandbookProps} />

        <TriangleBackground />

        <FooterBackground />
      </main>

      <NoiseBackground />
    </Layout>
  );
}

export default Home;