Hugging Face's logo

Spaces:
CommanderLazarus
/
sacred-union-guide
Running

App Files Community
CommanderLazarus commited on
Commit
cd606f7
·
verified ·
1 Parent(s): 189abf5

Create a page about the Kama Sutra, with examples, and Tantric sexuality.

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +492 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Sacred Union Guide
3
- emoji: 🏃
4
- colorFrom: red
5
- colorTo: indigo
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: Sacred Union Guide
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,493 @@
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>Sacred Union Guide</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&display=swap');
13
+ body {
14
+ font-family: 'Raleway', sans-serif;
15
+ }
16
+ .heading-font {
17
+ font-family: 'Playfair Display', serif;
18
+ }
19
+ .position-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .position-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
25
+ }
26
+ .chapter-section {
27
+ scroll-margin-top: 80px;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gradient-to-br from-amber-50 to-rose-50">
32
+ <!-- Navigation -->
33
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-sm shadow-sm z-50">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16">
36
+ <div class="flex items-center">
37
+ <div class="flex-shrink-0 flex items-center">
38
+ <i data-feather="heart" class="text-rose-500"></i>
39
+ <span class="ml-2 text-xl font-bold heading-font text-gray-800">Sacred Union</span>
40
+ </div>
41
+ </div>
42
+ <div class="hidden md:flex items-center space-x-8">
43
+ <a href="#positions" class="text-gray-600 hover:text-rose-600 font-medium">Positions</a>
44
+ <a href="#tantra" class="text-gray-600 hover:text-rose-600 font-medium">Tantra</a>
45
+ <a href="#history" class="text-gray-600 hover:text-rose-600 font-medium">History</a>
46
+ <a href="#philosophy" class="text-gray-600 hover:text-rose-600 font-medium">Philosophy</a>
47
+ <a href="#guide" class="text-gray-600 hover:text-rose-600 font-medium">Guide</a>
48
+ </div>
49
+ <div class="flex items-center md:hidden">
50
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-700">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Mobile menu -->
58
+ <div id="mobile-menu" class="hidden md:hidden bg-white">
59
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
60
+ <a href="#positions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-rose-600 hover:bg-gray-50">Positions</a>
61
+ <a href="#tantra" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-rose-600 hover:bg-gray-50">Tantra</a>
62
+ <a href="#history" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-rose-600 hover:bg-gray-50">History</a>
63
+ <a href="#philosophy" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-rose-600 hover:bg-gray-50">Philosophy</a>
64
+ <a href="#guide" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-rose-600 hover:bg-gray-50">Guide</a>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Hero Section -->
70
+ <div id="hero" class="relative pt-24 pb-20 px-4 sm:px-6 lg:px-8">
71
+ <div class="absolute inset-0 z-0" id="hero-bg"></div>
72
+ <div class="max-w-7xl mx-auto relative z-10">
73
+ <div class="text-center">
74
+ <h1 class="text-4xl md:text-6xl font-bold heading-font text-gray-900 mb-6">
75
+ The Art of Sacred Union
76
+ </h1>
77
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">
78
+ Exploring the ancient wisdom of intimate connection through the Kama Sutra and Tantric practices
79
+ </p>
80
+ <div class="flex justify-center space-x-4">
81
+ <a href="#positions" class="bg-rose-600 text-white px-6 py-3 rounded-full font-medium hover:bg-rose-700 transition duration-300">
82
+ Explore Positions
83
+ </a>
84
+ <a href="#tantra" class="border-2 border-rose-600 text-rose-600 px-6 py-3 rounded-full font-medium hover:bg-rose-50 transition duration-300">
85
+ Learn Tantra
86
+ </a>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Main Content -->
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
94
+ <!-- Positions Section -->
95
+ <section id="positions" class="chapter-section mb-20">
96
+ <div class="text-center mb-16">
97
+ <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Kama Sutra Positions</h2>
98
+ <p class="text-gray-600 max-w-3xl mx-auto">
99
+ The Kama Sutra describes numerous positions that enhance physical and emotional connection between partners.
100
+ </p>
101
+ </div>
102
+
103
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
104
+ <!-- Position 1 -->
105
+ <div class="position-card bg-white rounded-xl shadow-md overflow-hidden">
106
+ <div class="h-48 bg-gradient-to-r from-rose-400 to-pink-500 flex items-center justify-center">
107
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
108
+ </div>
109
+ <div class="p-6">
110
+ <h3 class="text-xl font-bold heading-font text-gray-900 mb-2">The Embrace</h3>
111
+ <p class="text-gray-600 mb-4">
112
+ Partners face each other in close embrace, promoting intimacy and connection through eye contact and synchronized breathing.
113
+ </p>
114
+ <div class="flex items-center text-rose-600">
115
+ <i data-feather="award" class="mr-2"></i>
116
+ <span>Beginner Level</span>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Position 2 -->
122
+ <div class="position-card bg-white rounded-xl shadow-md overflow-hidden">
123
+ <div class="h-48 bg-gradient-to-r from-amber-400 to-orange-500 flex items-center justify-center">
124
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
125
+ </div>
126
+ <div class="p-6">
127
+ <h3 class="text-xl font-bold heading-font text-gray-900 mb-2">The Lotus</h3>
128
+ <p class="text-gray-600 mb-4">
129
+ A seated position where partners sit facing each other with legs intertwined, emphasizing spiritual connection.
130
+ </p>
131
+ <div class="flex items-center text-amber-600">
132
+ <i data-feather="award" class="mr-2"></i>
133
+ <span>Intermediate Level</span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Position 3 -->
139
+ <div class="position-card bg-white rounded-xl shadow-md overflow-hidden">
140
+ <div class="h-48 bg-gradient-to-r from-indigo-400 to-purple-500 flex items-center justify-center">
141
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
142
+ </div>
143
+ <div class="p-6">
144
+ <h3 class="text-xl font-bold heading-font text-gray-900 mb-2">The Cowherd</h3>
145
+ <p class="text-gray-600 mb-4">
146
+ A standing position that requires balance and coordination, symbolizing the union of earth and sky.
147
+ </p>
148
+ <div class="flex items-center text-indigo-600">
149
+ <i data-feather="award" class="mr-2"></i>
150
+ <span>Advanced Level</span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Tantra Section -->
158
+ <section id="tantra" class="chapter-section mb-20">
159
+ <div class="bg-white rounded-2xl shadow-lg p-8">
160
+ <div class="text-center mb-12">
161
+ <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Tantric Sexuality</h2>
162
+ <p class="text-gray-600 max-w-3xl mx-auto">
163
+ Ancient practices that transform intimate connection into a spiritual journey through conscious awareness and energy exchange.
164
+ </p>
165
+ </div>
166
+
167
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
168
+ <div>
169
+ <h3 class="text-2xl font-bold heading-font text-gray-900 mb-4">Core Principles</h3>
170
+ <ul class="space-y-4">
171
+ <li class="flex items-start">
172
+ <div class="flex-shrink-0 mt-1">
173
+ <div class="w-6 h-6 rounded-full bg-rose-100 flex items-center justify-center">
174
+ <i data-feather="heart" class="text-rose-600 w-4 h-4"></i>
175
+ </div>
176
+ </div>
177
+ <p class="ml-3 text-gray-600">
178
+ <span class="font-medium text-gray-900">Energy Awareness:</span> Understanding and channeling sexual energy throughout the body
179
+ </p>
180
+ </li>
181
+ <li class="flex items-start">
182
+ <div class="flex-shrink-0 mt-1">
183
+ <div class="w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center">
184
+ <i data-feather="clock" class="text-amber-600 w-4 h-4"></i>
185
+ </div>
186
+ </div>
187
+ <p class="ml-3 text-gray-600">
188
+ <span class="font-medium text-gray-900">Extended Intimacy:</span> Moving beyond climax to prolonged states of connection
189
+ </p>
190
+ </li>
191
+ <li class="flex items-start">
192
+ <div class="flex-shrink-0 mt-1">
193
+ <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center">
194
+ <i data-feather="eye" class="text-indigo-600 w-4 h-4"></i>
195
+ </div>
196
+ </div>
197
+ <p class="ml-3 text-gray-600">
198
+ <span class="font-medium text-gray-900">Mindful Presence:</span> Maintaining conscious awareness during intimate moments
199
+ </p>
200
+ </li>
201
+ <li class="flex items-start">
202
+ <div class="flex-shrink-0 mt-1">
203
+ <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
204
+ <i data-feather="users" class="text-green-600 w-4 h-4"></i>
205
+ </div>
206
+ </div>
207
+ <p class="ml-3 text-gray-600">
208
+ <span class="font-medium text-gray-900">Sacred Union:</span> Viewing intimacy as a path to spiritual enlightenment
209
+ </p>
210
+ </li>
211
+ </ul>
212
+ </div>
213
+ <div class="bg-gradient-to-br from-rose-50 to-amber-50 rounded-xl p-8">
214
+ <h3 class="text-2xl font-bold heading-font text-gray-900 mb-4">Tantric Practices</h3>
215
+ <div class="space-y-6">
216
+ <div>
217
+ <h4 class="font-bold text-gray-900 mb-2">Breath Synchronization</h4>
218
+ <p class="text-gray-600">
219
+ Partners synchronize their breathing to create energetic harmony and deepen connection.
220
+ </p>
221
+ </div>
222
+ <div>
223
+ <h4 class="font-bold text-gray-900 mb-2">Eye Gazing</h4>
224
+ <p class="text-gray-600">
225
+ Maintaining eye contact during intimacy to foster emotional vulnerability and spiritual connection.
226
+ </p>
227
+ </div>
228
+ <div>
229
+ <h4 class="font-bold text-gray-900 mb-2">Chakra Awareness</h4>
230
+ <p class="text-gray-600">
231
+ Understanding energy centers in the body and how to activate them through touch and intention.
232
+ </p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </section>
239
+
240
+ <!-- History Section -->
241
+ <section id="history" class="chapter-section mb-20">
242
+ <div class="text-center mb-16">
243
+ <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Historical Context</h2>
244
+ <p class="text-gray-600 max-w-3xl mx-auto">
245
+ Understanding the origins and evolution of these ancient practices from their Indian roots to modern interpretations.
246
+ </p>
247
+ </div>
248
+
249
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
250
+ <div class="md:flex">
251
+ <div class="md:w-1/2 p-8">
252
+ <h3 class="text-2xl font-bold heading-font text-gray-900 mb-4">Origins in Ancient India</h3>
253
+ <p class="text-gray-600 mb-4">
254
+ The Kama Sutra, written by Vatsyayana in the 2nd century CE, is part of a larger tradition of Hindu texts exploring human desires and relationships.
255
+ </p>
256
+ <p class="text-gray-600 mb-4">
257
+ Tantra emerged as a spiritual tradition around the 5th century CE, emphasizing the sacred nature of physical experience as a path to enlightenment.
258
+ </p>
259
+ <p class="text-gray-600">
260
+ These practices were preserved through oral traditions and manuscripts, later translated and interpreted by scholars worldwide.
261
+ </p>
262
+ </div>
263
+ <div class="md:w-1/2 bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center p-12">
264
+ <div class="text-center text-white">
265
+ <i data-feather="book-open" class="w-16 h-16 mx-auto mb-4"></i>
266
+ <h4 class="text-2xl font-bold heading-font mb-2">The Kama Sutra</h4>
267
+ <p class="opacity-90">Written in Sanskrit as "Ananga Ranga" (The Stage of the God of Love)</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Philosophy Section -->
275
+ <section id="philosophy" class="chapter-section mb-20">
276
+ <div class="bg-gradient-to-r from-rose-500 to-pink-600 rounded-2xl shadow-lg p-8 text-white">
277
+ <div class="text-center mb-12">
278
+ <h2 class="text-3xl md:text-4xl font-bold heading-font mb-4">Philosophical Foundations</h2>
279
+ <p class="max-w-3xl mx-auto opacity-90">
280
+ The deeper meaning behind these practices and how they relate to human fulfillment and spiritual growth.
281
+ </p>
282
+ </div>
283
+
284
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
285
+ <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6">
286
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-4">
287
+ <i data-feather="target" class="w-6 h-6"></i>
288
+ </div>
289
+ <h3 class="text-xl font-bold heading-font mb-3">The Four Goals of Life</h3>
290
+ <p class="opacity-90">
291
+ Dharma (righteousness), Artha (prosperity), Kama (pleasure), and Moksha (liberation) - Kama as a path to holistic fulfillment.
292
+ </p>
293
+ </div>
294
+
295
+ <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6">
296
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-4">
297
+ <i data-feather="layers" class="w-6 h-6"></i>
298
+ </div>
299
+ <h3 class="text-xl font-bold heading-font mb-3">Unity of Opposites</h3>
300
+ <p class="opacity-90">
301
+ Tantric philosophy sees masculine and feminine energies as complementary forces that create wholeness when united.
302
+ </p>
303
+ </div>
304
+
305
+ <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6">
306
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-4">
307
+ <i data-feather="zap" class="w-6 h-6"></i>
308
+ </div>
309
+ <h3 class="text-xl font-bold heading-font mb-3">Energy Transformation</h3>
310
+ <p class="opacity-90">
311
+ Sexual energy as a powerful creative force that can be directed toward spiritual awakening and personal growth.
312
+ </p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Practical Guide Section -->
319
+ <section id="guide" class="chapter-section mb-20">
320
+ <div class="text-center mb-16">
321
+ <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Practical Guidance</h2>
322
+ <p class="text-gray-600 max-w-3xl mx-auto">
323
+ Essential principles for integrating these practices into your intimate relationships with respect and mindfulness.
324
+ </p>
325
+ </div>
326
+
327
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
328
+ <div class="bg-white rounded-2xl shadow-lg p-8">
329
+ <h3 class="text-2xl font-bold heading-font text-gray-900 mb-6">Creating Sacred Space</h3>
330
+ <ul class="space-y-6">
331
+ <li class="flex">
332
+ <div class="flex-shrink-0">
333
+ <div class="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center">
334
+ <i data-feather="home" class="text-rose-600 w-5 h-5"></i>
335
+ </div>
336
+ </div>
337
+ <div class="ml-4">
338
+ <h4 class="font-bold text-gray-900">Environment</h4>
339
+ <p class="text-gray-600 mt-1">
340
+ Create a clean, comfortable space free from distractions with soft lighting and pleasant aromas.
341
+ </p>
342
+ </div>
343
+ </li>
344
+ <li class="flex">
345
+ <div class="flex-shrink-0">
346
+ <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
347
+ <i data-feather="clock" class="text-amber-600 w-5 h-5"></i>
348
+ </div>
349
+ </div>
350
+ <div class="ml-4">
351
+ <h4 class="font-bold text-gray-900">Time</h4>
352
+ <p class="text-gray-600 mt-1">
353
+ Dedicate uninterrupted time to your practice without the pressure of performance or expectations.
354
+ </p>
355
+ </div>
356
+ </li>
357
+ <li class="flex">
358
+ <div class="flex-shrink-0">
359
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
360
+ <i data-feather="heart" class="text-indigo-600 w-5 h-5"></i>
361
+ </div>
362
+ </div>
363
+ <div class="ml-4">
364
+ <h4 class="font-bold text-gray-900">Intention</h4>
365
+ <p class="text-gray-600 mt-1">
366
+ Set a mindful intention to connect deeply with your partner and explore together with openness.
367
+ </p>
368
+ </div>
369
+ </li>
370
+ </ul>
371
+ </div>
372
+
373
+ <div class="bg-white rounded-2xl shadow-lg p-8">
374
+ <h3 class="text-2xl font-bold heading-font text-gray-900 mb-6">Communication & Consent</h3>
375
+ <div class="space-y-6">
376
+ <div>
377
+ <h4 class="font-bold text-gray-900 mb-2">Open Dialogue</h4>
378
+ <p class="text-gray-600">
379
+ Discuss desires, boundaries, and comfort levels honestly before engaging in any new practices.
380
+ </p>
381
+ </div>
382
+ <div>
383
+ <h4 class="font-bold text-gray-900 mb-2">Active Listening</h4>
384
+ <p class="text-gray-600">
385
+ Pay attention to verbal and non-verbal cues from your partner throughout the experience.
386
+ </p>
387
+ </div>
388
+ <div>
389
+ <h4 class="font-bold text-gray-900 mb-2">Respectful Exploration</h4>
390
+ <p class="text-gray-600">
391
+ Approach new techniques with patience, understanding that mastery comes through practice and mutual comfort.
392
+ </p>
393
+ </div>
394
+ <div class="mt-8 p-4 bg-rose-50 rounded-lg">
395
+ <div class="flex">
396
+ <i data-feather="alert-triangle" class="text-rose-600 mr-2 mt-1"></i>
397
+ <p class="text-rose-700">
398
+ <span class="font-bold">Important:</span> These practices should only be explored with a consenting adult partner in a safe and respectful environment.
399
+ </p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </section>
406
+ </div>
407
+
408
+ <!-- Footer -->
409
+ <footer class="bg-gray-900 text-white py-12">
410
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
411
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
412
+ <div class="col-span-1 md:col-span-2">
413
+ <div class="flex items-center">
414
+ <i data-feather="heart" class="text-rose-500"></i>
415
+ <span class="ml-2 text-xl font-bold heading-font">Sacred Union</span>
416
+ </div>
417
+ <p class="mt-4 text-gray-400 max-w-md">
418
+ An educational resource exploring ancient wisdom traditions of intimate connection and spiritual sexuality.
419
+ </p>
420
+ </div>
421
+ <div>
422
+ <h3 class="text-lg font-bold heading-font mb-4">Chapters</h3>
423
+ <ul class="space-y-2">
424
+ <li><a href="#positions" class="text-gray-400 hover:text-white">Kama Sutra Positions</a></li>
425
+ <li><a href="#tantra" class="text-gray-400 hover:text-white">Tantric Practices</a></li>
426
+ <li><a href="#history" class="text-gray-400 hover:text-white">Historical Context</a></li>
427
+ <li><a href="#philosophy" class="text-gray-400 hover:text-white">Philosophy</a></li>
428
+ </ul>
429
+ </div>
430
+ <div>
431
+ <h3 class="text-lg font-bold heading-font mb-4">Resources</h3>
432
+ <ul class="space-y-2">
433
+ <li><a href="#" class="text-gray-400 hover:text-white">Recommended Reading</a></li>
434
+ <li><a href="#" class="text-gray-400 hover:text-white">Workshops</a></li>
435
+ <li><a href="#" class="text-gray-400 hover:text-white">Practitioner Directory</a></li>
436
+ <li><a href="#" class="text-gray-400 hover:text-white">Ethical Guidelines</a></li>
437
+ </ul>
438
+ </div>
439
+ </div>
440
+ <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400">
441
+ <p>© 2023 Sacred Union Guide. Educational content only. This resource is intended for adults over 18.</p>
442
+ </div>
443
+ </div>
444
+ </footer>
445
+
446
+ <script>
447
+ // Mobile menu toggle
448
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
449
+ const menu = document.getElementById('mobile-menu');
450
+ menu.classList.toggle('hidden');
451
+ });
452
+
453
+ // Feather icons
454
+ feather.replace();
455
+
456
+ // Vanta.js background
457
+ VANTA.GLOBE({
458
+ el: "#hero-bg",
459
+ mouseControls: true,
460
+ touchControls: true,
461
+ gyroControls: false,
462
+ minHeight: 200.00,
463
+ minWidth: 200.00,
464
+ scale: 1.00,
465
+ scaleMobile: 1.00,
466
+ color: 0xff6b9d,
467
+ color2: 0xf97316,
468
+ backgroundColor: 0xfff7f5
469
+ });
470
+
471
+ // Smooth scrolling for anchor links
472
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
473
+ anchor.addEventListener('click', function (e) {
474
+ e.preventDefault();
475
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
476
+ behavior: 'smooth'
477
+ });
478
+ });
479
+ });
480
+
481
+ // Position card hover effect enhancement
482
+ const positionCards = document.querySelectorAll('.position-card');
483
+ positionCards.forEach(card => {
484
+ card.addEventListener('mouseenter', () => {
485
+ card.style.transform = 'translateY(-5px)';
486
+ });
487
+ card.addEventListener('mouseleave', () => {
488
+ card.style.transform = 'translateY(0)';
489
+ });
490
+ });
491
+ </script>
492
+ </body>
493
  </html>