myzubster/index.html at feature/ci-tests · ghzhost/myzubster · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MyZubster · Decentralized Green Ecosystem</title>
  <meta name="description" content="MyZubster is a decentralized platform for permaculture, tree tracking, carbon credits, and green investments." />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,600;14..32,800&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      background: #f6f9f6;
      color: #1a2e1a;
      line-height: 1.6;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem 0;
    }
    .logo {
      font-size: 1.8rem;
      font-weight: 800;
      color: #2b6e2b;
      letter-spacing: -0.5px;
    }
    .logo span { color: #5a9e5a; }
    nav a {
      margin-left: 2rem;
      text-decoration: none;
      color: #1a2e1a;
      font-weight: 600;
      transition: color 0.2s;
    }
    nav a:hover { color: #2b6e2b; }
    .btn {
      display: inline-block;
      background: #2b6e2b;
      color: white;
      padding: 0.8rem 2rem;
      border-radius: 40px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.2s;
    }
    .btn:hover { background: #1f531f; }
    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      padding: 4rem 0 2rem;
    }
    .hero h1 {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.1;
      color: #0f1f0f;
    }
    .hero h1 span {
      color: #2b6e2b;
    }
    .hero p {
      font-size: 1.2rem;
      color: #3a4f3a;
      margin: 1.5rem 0 2rem;
    }
    .hero-image {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hero-image svg {
      width: 100%;
      max-width: 400px;
      height: auto;
    }
    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin: 4rem 0;
    }
    .card {
      background: white;
      padding: 2rem;
      border-radius: 24px;
      box-shadow: 0 8px 30px rgba(0,30,0,0.05);
      transition: transform 0.2s;
    }
    .card:hover { transform: translateY(-5px); }
    .card h3 { font-size: 1.4rem; margin-bottom: 0.8rem; color: #0f1f0f; }
    .card p { color: #4a5f4a; }
    footer {
      text-align: center;
      padding: 3rem 0;
      border-top: 1px solid #dce8dc;
      color: #4a5f4a;
      font-size: 0.9rem;
    }
    @media (max-width: 768px) {
      .hero { grid-template-columns: 1fr; text-align: center; }
      .hero h1 { font-size: 2.5rem; }
      .cards { grid-template-columns: 1fr; }
      header { flex-direction: column; gap: 1rem; }
      nav a { margin: 0 1rem; }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">My<span>Zubster</span></div>
      <nav>
        <a href="#">Map</a>
        <a href="#">Marketplace</a>
        <a href="#">Gateway</a>
        <a href="#">About</a>
      </nav>
    </header>

    <section class="hero">
      <div>
        <h1>Plant. Track. <span>Earn.</span></h1>
        <p>MyZubster is a decentralized ecosystem for permaculture, tree tracking, carbon credits, and green investments — powered by Monero and AI.</p>
        <a href="#" class="btn">Explore the Map</a>
      </div>
      <div class="hero-image">
        <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="100" cy="100" r="90" fill="#e6f0e6"/>
          <path d="M100 20 L130 80 L195 85 L145 125 L160 190 L100 150 L40 190 L55 125 L5 85 L70 80 L100 20Z" fill="#2b6e2b"/>
          <circle cx="100" cy="85" r="12" fill="#f0e68c"/>
        </svg>
      </div>
    </section>

    <section class="cards">
      <div class="card">
        <h3>🌱 Botanic Map</h3>
        <p>Every tree, orchard, and forest registered. Traceable, transparent, and community-owned.</p>
      </div>
      <div class="card">
        <h3>🧠 AI Agent</h3>
        <p>A green AI that advises on planting, recycling, wildlife, and carbon offset strategies.</p>
      </div>
      <div class="card">
        <h3>💰 Tokenized Land</h3>
        <p>Invest in real land parcels, earn passive income from fruit and carbon credits — all on-chain.</p>
      </div>
    </section>

    <footer>
      <p>© 2026 MyZubster · Built with 🌱 for a greener future.</p>
      <p style="margin-top: 0.5rem; font-size: 0.8rem;">Monero · AI · Permaculture · Decentralized</p>
    </footer>
  </div>
</body>
</html>