Vitara-Gaia/the-house.html at main · HectorMerejo/Vitara-Gaia · 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
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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="assets/images/vitara-gaia.png" />
    <link rel="apple-touch-icon" href="assets/images/vitara-gaia.png" />

    <title>Vitara Gaia Wellness House | The House</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              jade: "#0D0D0B",
              champagne: "#D8C7A2",
              ivory: "#F4F1EA",
            },
          },
        },
      };
    </script>

    <link
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap"
      rel="stylesheet"
    />

    <style>
      body {
        font-family: "Inter", sans-serif;
      }
      .font-display {
        font-family: "Playfair Display", serif;
      }
      .filtered-img {
        filter: brightness(0.78) contrast(1.05) saturate(0.85);
      }
      .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.6s ease-in-out;
      }
      .slide.active {
        opacity: 1;
      }
    </style>
  </head>

  <body class="bg-jade text-ivory antialiased">
    <!-- NAVBAR INCLUDE -->
    <div include-html="components/navbar.html"></div>

    <main class="pt-20">
      <!-- HERO -->
      <section class="relative h-[85vh] w-full overflow-hidden">
        <img
          src="assets/images/house/collage/collage-10.jpg"
          class="absolute inset-0 w-full h-full object-cover filtered-img opacity-80"
          alt="The House"
        />

        <div class="absolute inset-0 bg-black/50"></div>

        <div
          class="absolute inset-0 flex flex-col items-center justify-center text-center px-6"
        >
          <h1 class="font-display text-5xl md:text-6xl mb-4">
            Welcome to The House
          </h1>
          <p class="max-w-2xl text-lg md:text-xl text-ivory/80">
            A private integrative wellness sanctuary where ancient ritual meets
            modern medicine, and where the nervous system remembers what it
            means to feel safe.
          </p>
        </div>
      </section>

      <!-- WHAT THE HOUSE IS -->
      <section class="py-24 px-6">
        <div class="max-w-4xl mx-auto space-y-8">
          <h2 class="font-display text-4xl">
            A Private Integrative Wellness Sanctuary
          </h2>

          <p class="text-lg text-ivory/80 leading-relaxed">
            Vitara Gaia is a concierge-style wellness and integrative medicine
            concept that blends Traditional Oriental Medicine, modern longevity
            care, and curated hospitality into a single, ritualized experience.
            <br />
            <!-- <strong>Not a clinic. Not a spa. Not a wellness trend.</strong> -->
            <br />
            Rather than offering isolated treatments, Vitara Gaia designs
            intentional wellness environments spaces where guests move through
            care in a thoughtful sequence that calms the nervous system,
            restores the body, and nourishes the senses.
          </p>

          <p class="text-lg text-ivory/75 leading-relaxed">
            A place where modern medicine meets ancient earth… each experience
            is structured as a wellness journey, not a clinical appointment.
          </p>
        </div>
      </section>

      <!-- COLLAGE / CINEMATIC SLIDESHOW -->
      <section class="px-6">
        <div
          class="max-w-5xl mx-auto rounded-2xl overflow-hidden border border-white/10"
        >
          <div class="relative w-full h-[380px]">
            <!-- SLIDES -->
            <div class="slide active">
              <img
                src="assets/images/house/collage/collage-01.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 1"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-02.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 2"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-03.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 3"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-04.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 4"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-05.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 5"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-06.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 6"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-07.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 7"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-08.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 8"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-09.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 9"
              />
            </div>

            <div class="slide">
              <img
                src="assets/images/house/collage/collage-10.jpg"
                class="w-full h-full object-cover filtered-img"
                alt="House Interior 10"
              />
            </div>
          </div>
        </div>
      </section>

      <!-- HOW THE HOUSE WORKS -->
      <section class="py-24 px-6">
        <div class="max-w-4xl mx-auto space-y-8">
          <h2 class="font-display text-4xl">How The House Works</h2>

          <p class="text-lg text-ivory/75 leading-relaxed">
            A visit to Vitara Gaia unfolds like a story. You cross the threshold
            and are met with a welcome ritual, a warm towel, a quiet greeting, a
            herbal infusion crafted for your current state.
          </p>

          <p class="text-lg text-ivory/75 leading-relaxed">
            Your intake is a conversation, not an interrogation. We read your
            pulse, your tongue, your sleep patterns, your stress cycles, your
            emotional rhythms.
          </p>

          <p class="text-lg text-ivory/75 leading-relaxed">
            Your treatment becomes an orchestration of ritual medicine:
          </p>

          <ul class="list-disc ml-6 text-lg text-ivory/70 space-y-2">
            <li>Acupuncture or electro-acupuncture</li>
            <li>Cupping, gua sha, somatic bodywork</li>
            <li>Ozone, peptides, IV therapy</li>
            <li>Skinwork, regenerative aesthetics</li>
            <li>Breathwork, sound, and nervous-system rituals</li>
            <li>Herbal infusions, teas, tinctures</li>
            <li>Programs for rest, detox, clarity, renewal</li>
          </ul>

          <p class="text-lg text-ivory/75 leading-relaxed">
            Sessions do not begin and end... they unfold.
          </p>
        </div>
      </section>

      <!-- WHO THE HOUSE IS FOR -->
      <section class="py-24 px-6 bg-white/5 border-y border-white/10">
        <div class="max-w-4xl mx-auto space-y-8">
          <h2 class="font-display text-4xl">Who The House Is For</h2>

          <p class="text-lg text-ivory/80 leading-relaxed">
            The House is for those who feel they have outgrown rushed
            appointments, fragmented care, cold spaces, or trend-driven
            wellness.
          </p>

          <ul class="list-disc ml-6 text-lg text-ivory/70 space-y-2">
            <li>A long-term home base for their health</li>
            <li>Extended, layered sessions with true depth</li>
            <li>A private team who knows their constitution</li>
            <li>
              Rituals for longevity, clarity, hormones, fertility, rehab, sleep,
              and emotional release
            </li>
            <li>A sanctuary, not a service</li>
          </ul>
        </div>
      </section>

      <!-- BELONGING TO THE HOUSE -->
      <section class="py-24 px-6">
        <div class="max-w-4xl mx-auto space-y-8">
          <h2 class="font-display text-4xl">Belonging to The House</h2>

          <p class="text-lg text-ivory/75 leading-relaxed">
            Membership at Vitara Gaia is intentionally limited to an ongoing
            relationship, not a subscription.
          </p>

          <ul class="list-disc ml-6 text-lg text-ivory/70 space-y-2">
            <li>Priority access to extended medical + ritual sessions</li>
            <li>24-hour access to practitioner or concierge support</li>
            <li>Care plans that evolve with your seasons</li>
            <li>Private herbal prescriptions delivered or prepared in-house</li>
            <li>Nervous-system support between sessions</li>
            <li>Invitation privileges for select guests</li>
            <li>Retreats, medical tourism, and seasonal immersions</li>
          </ul>
        </div>
      </section>

      <!-- CTA -->
      <section class="text-center py-24">
        <a
          href="private-inquiry.html"
          class="inline-flex items-center rounded-full bg-champagne px-10 py-4 text-[11px] tracking-[0.22em] uppercase text-jade hover:bg-ivory"
        >
          Request an Introduction to The House
        </a>
      </section>
    </main>

    <!-- FOOTER -->
    <footer class="border-t border-white/5 mt-16">
      <div
        class="mx-auto max-w-6xl px-5 py-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-4"
      >
        <p class="text-xs text-ivory/50">
          © <span id="year"></span> Vitara Gaia Wellness House
        </p>
        <div
          class="flex gap-6 text-[11px] tracking-[0.16em] uppercase text-ivory/50"
        >
          <a href="membership.html" class="hover:text-ivory">Membership</a>
          <a href="private-inquiry.html" class="hover:text-ivory"
            >Request Access</a
          >
        </div>
      </div>
    </footer>

    <script>
      document.getElementById("year").textContent = new Date().getFullYear();

      // Slideshow
      let idx = 0;
      const slides = document.querySelectorAll(".slide");

      setInterval(() => {
        slides[idx].classList.remove("active");
        idx = (idx + 1) % slides.length;
        slides[idx].classList.add("active");
      }, 4000);
    </script>

    <!-- SHARED SCRIPTS -->
    <script src="assets/js/main.js"></script>
  </body>
</html>