VentPals/join.html at main · kweetnorman/VentPals · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="assets/images/logo.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Join VentPals</title>
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(to bottom right, #F7F4FF, #f0f9ff);
    }
    .float {
      animation: float 4s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
  </style>
</head>

<body class="text-gray-800">

  <!-- HEADER -->
  <section class="text-center py-14 px-6">
    <div class="text-6xl float mb-4">🕊️</div>

    <h1 class="text-4xl font-bold text-purple-700 mb-3">Join VentPals</h1>

    <p class="text-gray-600 text-sm max-w-md mx-auto">
      A gentle place to explore your feelings, grow with your VentPal,
      and build your own safe emotional world.
    </p>
  </section>

  <!-- MAIN CONTENT -->
  <section class="max-w-md mx-auto px-6 pb-20 space-y-10">

    <!-- WHY JOIN -->
    <div class="bg-white rounded-3xl shadow p-8">
      <h2 class="text-xl font-semibold text-purple-700 mb-3">Why Join?</h2>

      <ul class="space-y-3 text-sm text-gray-700">
        <li>🌱 A safe place to explore your feelings</li>
        <li>🪶 Grow alongside your VentPal bird</li>
        <li>🎨 Create your own magical avatar</li>
        <li>📘 Save reflections and calming moments</li>
        <li>⭐ Earn gentle keepsakes as you grow</li>
      </ul>
    </div>

    <!-- JOIN BUTTON -->
    <div class="bg-white rounded-3xl shadow p-8 text-center">
      <h2 class="text-xl font-semibold text-purple-700 mb-4">Ready to Begin?</h2>

      <a href="signup.html"
         class="block w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-full mb-4">
        Create Your Account
      </a>

      <p class="text-sm text-gray-600">
        Already have an account?
        <a href="login.html" class="text-purple-700 font-semibold hover:text-purple-900">
          Log in
        </a>
      </p>
    </div>

    <!-- ADULT SECTION -->
    <div class="text-center text-xs text-gray-500">
      Grown‑ups managing family accounts can go to
      <a href="adult-login.html" class="text-purple-700 font-semibold hover:text-purple-900">
        Adult Login
      </a>
    </div>

  </section>

  <!-- FOOTER -->
  <footer class="py-6 text-center text-gray-500 text-xs">
    VentPals • The Journey of Growing Up.
  </footer>

</body>
</html>