xpui/index.html at main · acadxp/xpui · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/assets/favicon_io/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/assets/favicon_io/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/assets/favicon_io/favicon-16x16.png"
    />
    <link rel="manifest" href="/assets/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Core SEO Metadata -->
    <meta
      name="description"
      content="xpui is a game-inspired React component library for AcadXP, designed to gamify educational platforms. Includes XP systems, achievement badges, level progression, and interactive UI elements for modern learning experiences."
    />
    <meta
      name="keywords"
      content="xpui, React component library, gamification, AcadXP, educational UI, XP system, achievement badges, level progression, interactive learning, education technology, game-inspired UI"
    />
    <meta name="author" content="DripCode-Studio" />
    <meta
      name="application-name"
      content="xpui: Game-Inspired React Components"
    />
    <meta
      name="classification"
      content="Education Technology, UI Component Library, Gamification"
    />
    <meta
      property="og:title"
      content="xpui: Game-Inspired React Component Library for AcadXP"
    />
    <meta
      property="og:description"
      content="Gamify your educational platform with xpui. React components for XP, badges, levels, and interactive learning."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://xpui.vercel.app/" />
    <meta
      property="og:image"
      content="https://xpui.vercel.app/assets/xpui-og-image.png"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="xpui: Game-Inspired React Component Library for AcadXP"
    />
    <meta
      name="twitter:description"
      content="Game-inspired React components for gamified education. XP, badges, levels, and more for AcadXP."
    />
    <meta
      name="twitter:image"
      content="https://xpui.vercel.app/assets/xpui-og-image.png"
    />
    <title>xpui | Game-Inspired React Component Library for AcadXP</title>
  </head>
  <body>
    <div id="root">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          background: linear-gradient(
            135deg,
            #1e1b4b 0%,
            #1e3a5f 50%,
            #0f172a 100%
          );
          color: white;
          font-family: system-ui, -apple-system, sans-serif;
          text-align: center;
          padding: 2rem;
        "
      >
        <div>
          <h1 style="font-size: 3rem; margin-bottom: 1rem">
            <span style="color: #ec4899">xp</span><span>ui</span>
          </h1>
          <p style="font-size: 1.25rem; margin-bottom: 2rem; color: #cbd5e1">
            Game-Inspired React Component Library
          </p>
          <p style="color: #94a3b8">
            🚀 Run
            <code
              style="
                background: rgba(236, 72, 153, 0.2);
                padding: 0.25rem 0.5rem;
                border-radius: 0.25rem;
              "
              >pnpm storybook</code
            >
            to view components
          </p>
        </div>
      </div>
    </div>
  </body>
</html>