stx/examples/app.stx at main · stacksjs/stx · 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
<script server>
const title = "stx Component Demo"
const card1 = {
  title: "Getting Started",
  subtitle: "Your first steps with stx",
  content: "stx is a powerful templating engine for Bun that combines Laravel Blade-like syntax with modern JavaScript.",
  icon: "🚀",
  gradient: "from-violet-500 to-cyan-500"
}
const card2 = {
  title: "Components",
  subtitle: "Build reusable UI",
  content: "Components in stx are reusable templates that can receive props, slots, and maintain their own state.",
  icon: "🧩",
  gradient: "from-emerald-500 to-teal-500"
}
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>stx Component Demo</title>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">

<!-- Background Effects -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
  <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-500/10 rounded-full blur-3xl"></div>
  <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl"></div>
</div>

<div class="relative max-w-4xl mx-auto px-6 py-12">
  <!-- Header -->
  <header class="text-center mb-12">
    <div class="inline-flex items-center gap-3 mb-4">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-violet-500/25">
        <span class="text-3xl">📦</span>
      </div>
    </div>
    <h1 class="text-4xl font-bold bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent mb-3">
      {{ title }}
    </h1>
    <p class="text-slate-400 text-lg">Learn how to use components in stx</p>
  </header>

  <!-- Cards Section -->
  <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-2">
    <span class="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center text-sm">🃏</span>
    Card Components
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
    <!-- Card 1 -->
    <div class="relative group">
      <div class="absolute -inset-1 bg-gradient-to-r {{ card1.gradient }} rounded-2xl blur-xl opacity-30 group-hover:opacity-50 transition-opacity"></div>
      <div class="relative bg-slate-800/50 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden hover:border-violet-500/50 transition-all">
        <div class="h-2 bg-gradient-to-r {{ card1.gradient }}"></div>
        <div class="p-6">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br {{ card1.gradient }} flex items-center justify-center shadow-lg">
              <span class="text-xl">{{ card1.icon }}</span>
            </div>
            <div>
              <h3 class="text-xl font-semibold text-white">{{ card1.title }}</h3>
              @if (card1.subtitle)
                <p class="text-sm text-slate-400">{{ card1.subtitle }}</p>
              @endif
            </div>
          </div>
          <p class="text-slate-300 leading-relaxed">{{ card1.content }}</p>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="relative group">
      <div class="absolute -inset-1 bg-gradient-to-r {{ card2.gradient }} rounded-2xl blur-xl opacity-30 group-hover:opacity-50 transition-opacity"></div>
      <div class="relative bg-slate-800/50 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden hover:border-emerald-500/50 transition-all">
        <div class="h-2 bg-gradient-to-r {{ card2.gradient }}"></div>
        <div class="p-6">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br {{ card2.gradient }} flex items-center justify-center shadow-lg">
              <span class="text-xl">{{ card2.icon }}</span>
            </div>
            <div>
              <h3 class="text-xl font-semibold text-white">{{ card2.title }}</h3>
              @if (card2.subtitle)
                <p class="text-sm text-slate-400">{{ card2.subtitle }}</p>
              @endif
            </div>
          </div>
          <p class="text-slate-300 leading-relaxed">{{ card2.content }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="text-center">
    <div class="inline-flex items-center gap-2 px-4 py-2 bg-slate-800/50 border border-white/10 rounded-xl text-sm text-slate-400">
      <span>©</span>
      <span>2024</span>
      <span class="text-violet-400">stx</span>
      <span>Components Demo</span>
    </div>
  </footer>
</div>

</body>
</html>