-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
247 lines (235 loc) · 15 KB
/
index.html
File metadata and controls
247 lines (235 loc) · 15 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
---
layout: default
lang: de
title: "Dein Verzeichnis für Wandersteine"
description: "Entdecke persönliche Wandersteine in deiner Nähe, füge eigene Steine zur Sammlung hinzu und tracke ihre Wanderungen."
---
<!-- Hero Section -->
<section class="bg-gradient-to-br from-blue-50 via-white to-green-50 section-padding">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-display font-bold text-gray-900 leading-tight mb-6">
Dein Verzeichnis für
<span class="text-trailmark-blue">Wandersteine</span>
</h1>
<p class="text-xl text-gray-600 mb-8 leading-relaxed">
Entdecke persönliche Wandersteine in deiner Nähe, sammle eigene Fundstücke
und verfolge ihre Reisen. Eine lebendige Gemeinschaft von Wanderern teilt
Geschichten, Fotos und Standorte ihrer besonderen Steine.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#features" class="btn-primary inline-flex items-center justify-center">
Funktionen entdecken
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</a>
<a href="#community" class="btn-secondary">
Zur Gemeinschaft
</a>
</div>
</div>
<div class="lg:ml-8">
<div class="relative">
<!-- Placeholder for hero image -->
<div class="bg-gradient-to-br from-trailmark-blue to-trailmark-green rounded-2xl aspect-square flex items-center justify-center shadow-2xl">
<div class="text-center text-white">
<svg class="w-24 h-24 mx-auto mb-4 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7"/>
</svg>
<p class="text-lg font-medium opacity-90">Wandersteine Sammlung</p>
</div>
</div>
<!-- Decorative elements -->
<div class="absolute -top-4 -right-4 w-24 h-24 bg-trailmark-orange rounded-full opacity-20 animate-pulse"></div>
<div class="absolute -bottom-6 -left-6 w-32 h-32 bg-trailmark-stone rounded-full opacity-10"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section-padding bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-display font-bold text-gray-900 mb-6">
So funktioniert Trailmarks.io
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Eine lebendige Plattform für Wanderer, um persönliche Steine zu sammeln,
zu teilen und ihre Reisen zu verfolgen. Entdecke die Geschichten hinter jedem Stein.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<!-- Discover Stones -->
<div class="text-center group">
<div class="bg-gradient-to-br from-trailmark-blue to-blue-600 w-20 h-20 rounded-2xl mx-auto mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-200">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">Steine entdecken</h3>
<p class="text-gray-600">
Finde persönliche Wandersteine in deiner Nähe. Sieh dir Fotos,
Geschichten und Standorte von anderen Wanderern an.
</p>
</div>
<!-- Add Your Stones -->
<div class="text-center group">
<div class="bg-gradient-to-br from-trailmark-green to-green-600 w-20 h-20 rounded-2xl mx-auto mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-200">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">Sammlung erweitern</h3>
<p class="text-gray-600">
Füge deine eigenen besonderen Steine zur Sammlung hinzu.
Teile Fotos, Fundorte und die Geschichte deiner Entdeckungen.
</p>
</div>
<!-- Track Movement -->
<div class="text-center group">
<div class="bg-gradient-to-br from-trailmark-orange to-orange-600 w-20 h-20 rounded-2xl mx-auto mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-200">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">Reisen verfolgen</h3>
<p class="text-gray-600">
Verfolge die Wanderungen deiner Steine und sieh, wo andere
Wanderer sie gefunden und platziert haben.
</p>
</div>
</div>
<!-- Community Quote -->
<div class="bg-gray-50 rounded-2xl p-8 md:p-12 text-center">
<blockquote class="text-2xl md:text-3xl font-medium text-gray-900 mb-6 italic">
"Jeder Stein erzählt eine Geschichte. Gemeinsam sammeln wir
Erinnerungen und verbinden Wanderer auf der ganzen Welt."
</blockquote>
<cite class="text-lg text-gray-600">— Die Trailmarks.io Gemeinschaft</cite>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="section-padding bg-gradient-to-br from-gray-50 to-blue-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-display font-bold text-gray-900 mb-6">
Eine lebendige Gemeinschaft
</h2>
<p class="text-lg text-gray-600 mb-8 leading-relaxed">
Trailmarks.io verbindet Wanderer durch ihre persönlichen Steinsammlungen.
Teile deine Entdeckungen, erfahre Geschichten anderer und erkunde neue Gebiete
durch die Augen anderer Wanderer.
</p>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div class="bg-trailmark-blue w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Lokale Entdeckungen</h3>
<p class="text-gray-600">
Entdecke Wandersteine in deiner Umgebung und lerne von den
Erfahrungen anderer Wanderer in deiner Region.
</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="bg-trailmark-green w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Geschichten teilen</h3>
<p class="text-gray-600">
Jeder Stein hat eine Geschichte. Teile deine Erlebnisse und
entdecke die besonderen Momente anderer Wanderer.
</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="bg-trailmark-orange w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Wachsende Sammlung</h3>
<p class="text-gray-600">
Unsere Gemeinschaft wächst täglich. Neue Steine, neue Geschichten
und neue Verbindungen entstehen kontinuierlich.
</p>
</div>
</div>
</div>
</div>
<div class="lg:ml-8">
<div class="bg-white rounded-2xl p-8 shadow-xl">
<h3 class="text-2xl font-semibold text-gray-900 mb-6 text-center">
Plattform Features
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="w-2 h-2 bg-trailmark-blue rounded-full"></div>
<span class="text-gray-700">Persönliches Steinverzeichnis</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-2 h-2 bg-trailmark-green rounded-full"></div>
<span class="text-gray-700">Foto- und Standort-Sharing</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-2 h-2 bg-trailmark-orange rounded-full"></div>
<span class="text-gray-700">Wanderstein-Tracking</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-2 h-2 bg-trailmark-stone rounded-full"></div>
<span class="text-gray-700">Community-basierte Entdeckungen</span>
</div>
</div>
<div class="mt-8 p-4 bg-gray-50 rounded-lg text-center">
<p class="text-sm text-gray-600 mb-3">
Interesse geweckt? Folgen Sie der Entwicklung!
</p>
<a href="https://github.com/trailmarks-io"
class="text-trailmark-blue hover:text-blue-600 font-medium text-sm">
@trailmarks-io →
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section-padding bg-trailmark-blue">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-display font-bold text-white mb-6">
Werde Teil der Wandersteine-Gemeinschaft
</h2>
<p class="text-xl text-blue-100 mb-8">
Entdecke, sammle und teile deine persönlichen Wandersteine.
Verbinde dich mit Gleichgesinnten und erschaffe gemeinsam ein lebendiges Verzeichnis.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://github.com/trailmarks-io"
class="bg-white text-trailmark-blue hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition-colors duration-200 inline-flex items-center justify-center">
Entwicklung verfolgen
<svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<a href="/contact/"
class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-trailmark-blue font-semibold py-3 px-8 rounded-lg transition-colors duration-200">
Kontakt aufnehmen
</a>
</div>
</div>
</section>