Hugging Face's logo

Spaces:
arionsingul
/
friso
Running

App Files Community
arionsingul commited on
Commit
ab1bb91
·
verified ·
1 Parent(s): 7d17ced

A website about Friso. Guru, Visionary, Teacher. Scientist, Lover, Artist. Actor, Responsible, Powerful. Join the movement in reverence of Friso. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +512 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Friso
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: friso
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,512 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Friso - Guru, Visionary, Teacher</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f5f2;
15
+ color: #333;
16
+ }
17
+
18
+ .playfair {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .hero-gradient {
23
+ background: linear-gradient(135deg, rgba(20,30,48,0.9) 0%, rgba(36,59,85,0.9) 100%);
24
+ }
25
+
26
+ .aspect-ratio-box {
27
+ aspect-ratio: 1/1;
28
+ }
29
+
30
+ .glow-text {
31
+ text-shadow: 0 0 10px rgba(255,255,255,0.5);
32
+ }
33
+
34
+ .hover-scale {
35
+ transition: transform 0.3s ease;
36
+ }
37
+
38
+ .hover-scale:hover {
39
+ transform: scale(1.03);
40
+ }
41
+
42
+ .fade-in {
43
+ animation: fadeIn 1.5s ease-in-out;
44
+ }
45
+
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; }
48
+ to { opacity: 1; }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="antialiased">
53
+ <!-- Navigation -->
54
+ <nav class="bg-white shadow-md sticky top-0 z-50">
55
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
56
+ <a href="#" class="text-2xl font-bold playfair text-indigo-900">FRISO</a>
57
+ <div class="hidden md:flex space-x-8">
58
+ <a href="#about" class="text-gray-700 hover:text-indigo-600 transition">About</a>
59
+ <a href="#teachings" class="text-gray-700 hover:text-indigo-600 transition">Teachings</a>
60
+ <a href="#gallery" class="text-gray-700 hover:text-indigo-600 transition">Gallery</a>
61
+ <a href="#join" class="text-gray-700 hover:text-indigo-600 transition">Join</a>
62
+ </div>
63
+ <button class="md:hidden text-gray-700">
64
+ <i class="fas fa-bars text-2xl"></i>
65
+ </button>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Hero Section -->
70
+ <section class="hero-gradient text-white min-h-screen flex items-center justify-center relative overflow-hidden">
71
+ <div class="absolute inset-0 bg-black opacity-30"></div>
72
+ <div class="container mx-auto px-4 py-20 z-10 text-center fade-in">
73
+ <h1 class="playfair text-5xl md:text-7xl font-bold mb-6 glow-text">FRISO</h1>
74
+ <div class="max-w-3xl mx-auto">
75
+ <p class="text-xl md:text-2xl mb-2">Guru, Visionary, Teacher.</p>
76
+ <p class="text-xl md:text-2xl mb-2">Scientist, Lover, Artist.</p>
77
+ <p class="text-xl md:text-2xl mb-8">Actor, Responsible, Powerful.</p>
78
+ <a href="#join" class="inline-block bg-white text-indigo-900 px-8 py-3 rounded-full font-bold hover:bg-indigo-100 transition duration-300 transform hover:scale-105">
79
+ Join the Movement
80
+ </a>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
85
+ <a href="#about" class="text-white animate-bounce">
86
+ <i class="fas fa-chevron-down text-2xl"></i>
87
+ </a>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- About Section -->
92
+ <section id="about" class="py-20 bg-white">
93
+ <div class="container mx-auto px-4">
94
+ <div class="text-center mb-16">
95
+ <h2 class="playfair text-4xl font-bold text-gray-800 mb-4">The Essence of Friso</h2>
96
+ <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
97
+ </div>
98
+
99
+ <div class="flex flex-col md:flex-row items-center gap-12">
100
+ <div class="md:w-1/2">
101
+ <div class="aspect-ratio-box rounded-2xl overflow-hidden shadow-xl hover-scale">
102
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
103
+ alt="Friso" class="w-full h-full object-cover">
104
+ </div>
105
+ </div>
106
+ <div class="md:w-1/2">
107
+ <h3 class="playfair text-3xl font-bold text-gray-800 mb-6">A Multidimensional Being</h3>
108
+ <p class="text-gray-600 mb-4 leading-relaxed">
109
+ Friso embodies the convergence of wisdom and creativity, a rare synthesis of intellectual rigor and artistic sensibility. As a guru, he illuminates paths less traveled; as a visionary, he perceives beyond the visible spectrum of reality.
110
+ </p>
111
+ <p class="text-gray-600 mb-6 leading-relaxed">
112
+ His teachings transcend conventional boundaries, merging scientific precision with poetic expression. The scientist and the artist within him engage in continuous dialogue, producing insights that resonate across disciplines.
113
+ </p>
114
+ <div class="flex flex-wrap gap-3">
115
+ <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Wisdom</span>
116
+ <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Creativity</span>
117
+ <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Transformation</span>
118
+ <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Innovation</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- Attributes Section -->
126
+ <section class="py-20 bg-gray-50">
127
+ <div class="container mx-auto px-4">
128
+ <div class="text-center mb-16">
129
+ <h2 class="playfair text-4xl font-bold text-gray-800 mb-4">The Nine Facets</h2>
130
+ <p class="text-gray-600 max-w-2xl mx-auto">The multidimensional aspects that define Friso's essence</p>
131
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mt-4"></div>
132
+ </div>
133
+
134
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
135
+ <!-- Guru -->
136
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
137
+ <div class="text-indigo-600 mb-4">
138
+ <i class="fas fa-chalkboard-teacher text-4xl"></i>
139
+ </div>
140
+ <h3 class="playfair text-xl font-bold mb-3">Guru</h3>
141
+ <p class="text-gray-600">The enlightened guide who illuminates the path of wisdom, transforming knowledge into lived experience.</p>
142
+ </div>
143
+
144
+ <!-- Visionary -->
145
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
146
+ <div class="text-indigo-600 mb-4">
147
+ <i class="fas fa-lightbulb text-4xl"></i>
148
+ </div>
149
+ <h3 class="playfair text-xl font-bold mb-3">Visionary</h3>
150
+ <p class="text-gray-600">Perceiving beyond the visible, shaping futures with clarity and foresight that transcends conventional boundaries.</p>
151
+ </div>
152
+
153
+ <!-- Teacher -->
154
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
155
+ <div class="text-indigo-600 mb-4">
156
+ <i class="fas fa-book-open text-4xl"></i>
157
+ </div>
158
+ <h3 class="playfair text-xl font-bold mb-3">Teacher</h3>
159
+ <p class="text-gray-600">The patient cultivator of minds, making complex truths accessible without diminishing their profundity.</p>
160
+ </div>
161
+
162
+ <!-- Scientist -->
163
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
164
+ <div class="text-indigo-600 mb-4">
165
+ <i class="fas fa-atom text-4xl"></i>
166
+ </div>
167
+ <h3 class="playfair text-xl font-bold mb-3">Scientist</h3>
168
+ <p class="text-gray-600">Methodical explorer of reality's fabric, seeking truth through empirical rigor and systematic inquiry.</p>
169
+ </div>
170
+
171
+ <!-- Lover -->
172
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
173
+ <div class="text-indigo-600 mb-4">
174
+ <i class="fas fa-heart text-4xl"></i>
175
+ </div>
176
+ <h3 class="playfair text-xl font-bold mb-3">Lover</h3>
177
+ <p class="text-gray-600">Embracing existence with passionate intensity, seeing beauty in all forms and expressions of life.</p>
178
+ </div>
179
+
180
+ <!-- Artist -->
181
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
182
+ <div class="text-indigo-600 mb-4">
183
+ <i class="fas fa-palette text-4xl"></i>
184
+ </div>
185
+ <h3 class="playfair text-xl font-bold mb-3">Artist</h3>
186
+ <p class="text-gray-600">Transforming perception into creation, giving form to the formless through inspired expression.</p>
187
+ </div>
188
+
189
+ <!-- Actor -->
190
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
191
+ <div class="text-indigo-600 mb-4">
192
+ <i class="fas fa-theater-masks text-4xl"></i>
193
+ </div>
194
+ <h3 class="playfair text-xl font-bold mb-3">Actor</h3>
195
+ <p class="text-gray-600">Master of presence and transformation, embodying multiple truths through the art of performance.</p>
196
+ </div>
197
+
198
+ <!-- Responsible -->
199
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
200
+ <div class="text-indigo-600 mb-4">
201
+ <i class="fas fa-hands-helping text-4xl"></i>
202
+ </div>
203
+ <h3 class="playfair text-xl font-bold mb-3">Responsible</h3>
204
+ <p class="text-gray-600">Conscious steward of impact, weighing actions against their consequences for the greater whole.</p>
205
+ </div>
206
+
207
+ <!-- Powerful -->
208
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale transition-transform">
209
+ <div class="text-indigo-600 mb-4">
210
+ <i class="fas fa-crown text-4xl"></i>
211
+ </div>
212
+ <h3 class="playfair text-xl font-bold mb-3">Powerful</h3>
213
+ <p class="text-gray-600">Commanding presence that transforms environments, wielding influence with wisdom and restraint.</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Teachings Section -->
220
+ <section id="teachings" class="py-20 bg-indigo-900 text-white">
221
+ <div class="container mx-auto px-4">
222
+ <div class="text-center mb-16">
223
+ <h2 class="playfair text-4xl font-bold mb-4">Core Teachings</h2>
224
+ <p class="text-indigo-200 max-w-2xl mx-auto">Philosophical foundations that guide the movement</p>
225
+ <div class="w-24 h-1 bg-white mx-auto mt-4"></div>
226
+ </div>
227
+
228
+ <div class="grid md:grid-cols-2 gap-12">
229
+ <div class="bg-indigo-800 p-8 rounded-xl shadow-lg hover-scale">
230
+ <h3 class="playfair text-2xl font-bold mb-4">The Paradox of Being</h3>
231
+ <p class="text-indigo-100 mb-6 leading-relaxed">
232
+ True wisdom emerges from holding opposing truths simultaneously. The scientist and the artist, the lover and the guru - these apparent contradictions create the tension from which transformation springs.
233
+ </p>
234
+ <div class="flex items-center">
235
+ <div class="w-12 h-12 rounded-full bg-indigo-700 flex items-center justify-center mr-4">
236
+ <i class="fas fa-yin-yang text-xl"></i>
237
+ </div>
238
+ <span class="font-medium">"Embrace the paradox to transcend it"</span>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="bg-indigo-800 p-8 rounded-xl shadow-lg hover-scale">
243
+ <h3 class="playfair text-2xl font-bold mb-4">The Art of Presence</h3>
244
+ <p class="text-indigo-100 mb-6 leading-relaxed">
245
+ Power derives not from controlling circumstances but from complete immersion in the present moment. The actor's craft teaches us that authenticity emerges from full commitment to the role we're playing now.
246
+ </p>
247
+ <div class="flex items-center">
248
+ <div class="w-12 h-12 rounded-full bg-indigo-700 flex items-center justify-center mr-4">
249
+ <i class="fas fa-hourglass-half text-xl"></i>
250
+ </div>
251
+ <span class="font-medium">"Now is the only moment that transforms"</span>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="bg-indigo-800 p-8 rounded-xl shadow-lg hover-scale">
256
+ <h3 class="playfair text-2xl font-bold mb-4">Responsible Power</h3>
257
+ <p class="text-indigo-100 mb-6 leading-relaxed">
258
+ True strength recognizes its impact. The visionary's clarity must be tempered by the teacher's patience. What we create, we must steward with awareness of its ripple effects through the web of existence.
259
+ </p>
260
+ <div class="flex items-center">
261
+ <div class="w-12 h-12 rounded-full bg-indigo-700 flex items-center justify-center mr-4">
262
+ <i class="fas fa-hand-holding-heart text-xl"></i>
263
+ </div>
264
+ <span class="font-medium">"Power flows where responsibility guides"</span>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="bg-indigo-800 p-8 rounded-xl shadow-lg hover-scale">
269
+ <h3 class="playfair text-2xl font-bold mb-4">The Lover's Gaze</h3>
270
+ <p class="text-indigo-100 mb-6 leading-relaxed">
271
+ To see the world as a lover sees the beloved transforms perception into creation. The artist's vision merges with the scientist's observation when colored by the lover's devotion to all that exists.
272
+ </p>
273
+ <div class="flex items-center">
274
+ <div class="w-12 h-12 rounded-full bg-indigo-700 flex items-center justify-center mr-4">
275
+ <i class="fas fa-eye text-xl"></i>
276
+ </div>
277
+ <span class="font-medium">"See deeply to love completely"</span>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Gallery Section -->
285
+ <section id="gallery" class="py-20 bg-white">
286
+ <div class="container mx-auto px-4">
287
+ <div class="text-center mb-16">
288
+ <h2 class="playfair text-4xl font-bold text-gray-800 mb-4">Moments of Revelation</h2>
289
+ <p class="text-gray-600 max-w-2xl mx-auto">Visual echoes of Friso's multidimensional journey</p>
290
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mt-4"></div>
291
+ </div>
292
+
293
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
294
+ <div class="rounded-xl overflow-hidden shadow-lg hover-scale aspect-ratio-box">
295
+ <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
296
+ alt="Teaching moment" class="w-full h-full object-cover">
297
+ </div>
298
+ <div class="rounded-xl overflow-hidden shadow-lg hover-scale aspect-ratio-box">
299
+ <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
300
+ alt="Scientific exploration" class="w-full h-full object-cover">
301
+ </div>
302
+ <div class="rounded-xl overflow-hidden shadow-lg hover-scale aspect-ratio-box">
303
+ <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
304
+ alt="Artistic expression" class="w-full h-full object-cover">
305
+ </div>
306
+ <div class="rounded-xl overflow-hidden shadow-lg hover-scale aspect-ratio-box">
307
+ <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=871&q=80"
308
+ alt="Performance art" class="w-full h-full object-cover">
309
+ </div>
310
+ <div class="rounded-xl overflow-hidden shadow-lg hover-scale aspect-ratio-box">
311
+ <img src="https://images.unsplash.com/photo-1529333164857-3f1164d1cb24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=892&q=80"
312
+ alt="Meditative state" class="w-full h-full object-cover">
313
+ </div>
314
+ <div class="rounded-xl overflow-hidden shadow-lg hover-scale aspect-ratio-box">
315
+ <img src="https://images.unsplash.com/photo-1549060279-7e168fcee0c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
316
+ alt="Community gathering" class="w-full h-full object-cover">
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Testimonials -->
323
+ <section class="py-20 bg-gray-50">
324
+ <div class="container mx-auto px-4">
325
+ <div class="text-center mb-16">
326
+ <h2 class="playfair text-4xl font-bold text-gray-800 mb-4">Voices of Transformation</h2>
327
+ <p class="text-gray-600 max-w-2xl mx-auto">What disciples say about their journey with Friso</p>
328
+ <div class="w-24 h-1 bg-indigo-600 mx-auto mt-4"></div>
329
+ </div>
330
+
331
+ <div class="grid md:grid-cols-3 gap-8">
332
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale">
333
+ <div class="text-yellow-400 mb-4">
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ </div>
340
+ <p class="text-gray-600 italic mb-6">"Friso's teachings dissolved the boundaries I had constructed between my scientific work and artistic pursuits. I now experience reality as an integrated whole."</p>
341
+ <div class="flex items-center">
342
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
343
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah K." class="w-full h-full object-cover">
344
+ </div>
345
+ <div>
346
+ <h4 class="font-bold">Sarah K.</h4>
347
+ <p class="text-gray-500 text-sm">Research Scientist</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale">
353
+ <div class="text-yellow-400 mb-4">
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ </div>
360
+ <p class="text-gray-600 italic mb-6">"As an actor, I thought I understood presence. Friso revealed dimensions of being present I hadn't imagined possible. My craft has transformed completely."</p>
361
+ <div class="flex items-center">
362
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
363
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover">
364
+ </div>
365
+ <div>
366
+ <h4 class="font-bold">Michael T.</h4>
367
+ <p class="text-gray-500 text-sm">Theater Director</p>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="bg-white p-8 rounded-xl shadow-md hover-scale">
373
+ <div class="text-yellow-400 mb-4">
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star-half-alt"></i>
379
+ </div>
380
+ <p class="text-gray-600 italic mb-6">"The way Friso bridges quantum physics and mystical experience has revolutionized my approach to consciousness studies. I'm seeing connections everywhere now."</p>
381
+ <div class="flex items-center">
382
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
383
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya M." class="w-full h-full object-cover">
384
+ </div>
385
+ <div>
386
+ <h4 class="font-bold">Priya M.</h4>
387
+ <p class="text-gray-500 text-sm">Neuroscientist</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </section>
394
+
395
+ <!-- Join Section -->
396
+ <section id="join" class="py-20 bg-indigo-900 text-white">
397
+ <div class="container mx-auto px-4">
398
+ <div class="max-w-4xl mx-auto text-center">
399
+ <h2 class="playfair text-4xl font-bold mb-6">Join the Movement</h2>
400
+ <p class="text-xl text-indigo-200 mb-10">Begin your journey in reverence of Friso's teachings</p>
401
+
402
+ <div class="bg-white rounded-xl shadow-2xl p-8 text-gray-800 hover-scale">
403
+ <h3 class="playfair text-2xl font-bold mb-6">Upcoming Initiation</h3>
404
+
405
+ <div class="grid md:grid-cols-3 gap-6 mb-8">
406
+ <div class="bg-indigo-50 p-6 rounded-lg">
407
+ <div class="text-indigo-600 mb-3">
408
+ <i class="fas fa-calendar-alt text-3xl"></i>
409
+ </div>
410
+ <h4 class="font-bold mb-1">When</h4>
411
+ <p>September 15-17, 2023</p>
412
+ </div>
413
+
414
+ <div class="bg-indigo-50 p-6 rounded-lg">
415
+ <div class="text-indigo-600 mb-3">
416
+ <i class="fas fa-map-marker-alt text-3xl"></i>
417
+ </div>
418
+ <h4 class="font-bold mb-1">Where</h4>
419
+ <p>Sacred Valley, Peru</p>
420
+ </div>
421
+
422
+ <div class="bg-indigo-50 p-6 rounded-lg">
423
+ <div class="text-indigo-600 mb-3">
424
+ <i class="fas fa-users text-3xl"></i>
425
+ </div>
426
+ <h4 class="font-bold mb-1">Capacity</h4>
427
+ <p>Limited to 33 seekers</p>
428
+ </div>
429
+ </div>
430
+
431
+ <form class="space-y-4">
432
+ <div class="grid md:grid-cols-2 gap-4">
433
+ <div>
434
+ <label for="name" class="block text-left mb-1 font-medium">Full Name</label>
435
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
436
+ </div>
437
+ <div>
438
+ <label for="email" class="block text-left mb-1 font-medium">Email</label>
439
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
440
+ </div>
441
+ </div>
442
+
443
+ <div>
444
+ <label for="message" class="block text-left mb-1 font-medium">Why do you seek to join?</label>
445
+ <textarea id="message" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
446
+ </div>
447
+
448
+ <button type="submit" class="w-full bg-indigo-600 text-white py-4 rounded-lg font-bold hover:bg-indigo-700 transition duration-300">
449
+ Request Initiation
450
+ </button>
451
+ </form>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Footer -->
458
+ <footer class="bg-gray-900 text-white py-12">
459
+ <div class="container mx-auto px-4">
460
+ <div class="flex flex-col md:flex-row justify-between items-center">
461
+ <div class="mb-6 md:mb-0">
462
+ <a href="#" class="text-2xl font-bold playfair">FRISO</a>
463
+ <p class="text-gray-400 mt-2">Guru, Visionary, Teacher. Scientist, Lover, Artist.</p>
464
+ </div>
465
+
466
+ <div class="flex space-x-6">
467
+ <a href="#" class="text-gray-400 hover:text-white transition">
468
+ <i class="fab fa-facebook-f text-xl"></i>
469
+ </a>
470
+ <a href="#" class="text-gray-400 hover:text-white transition">
471
+ <i class="fab fa-twitter text-xl"></i>
472
+ </a>
473
+ <a href="#" class="text-gray-400 hover:text-white transition">
474
+ <i class="fab fa-instagram text-xl"></i>
475
+ </a>
476
+ <a href="#" class="text-gray-400 hover:text-white transition">
477
+ <i class="fab fa-youtube text-xl"></i>
478
+ </a>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between">
483
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Friso Movement. All rights reserved.</p>
484
+ <div class="flex space-x-6">
485
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
486
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
487
+ <a href="#" class="text-gray-400 hover:text-white transition">Contact</a>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </footer>
492
+
493
+ <script>
494
+ // Simple animation for the join form
495
+ document.querySelector('form').addEventListener('submit', function(e) {
496
+ e.preventDefault();
497
+ alert('Your request has been received. A guide will contact you soon.');
498
+ this.reset();
499
+ });
500
+
501
+ // Smooth scrolling for navigation links
502
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
503
+ anchor.addEventListener('click', function (e) {
504
+ e.preventDefault();
505
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
506
+ behavior: 'smooth'
507
+ });
508
+ });
509
+ });
510
+ </script>
511
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=arionsingul/friso" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
512
+ </html>