File size: 8,575 Bytes
0caf496
123ce37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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

<style>
  :root{
    --bg: #ffffff;
    --fg: #0f0f11;
    --muted: #6b7280;
    --ring: #e5e7eb;
    --chip: #f4f4f5;
    --hf-yellow: #ffcc4d;
    --hf-black: #0c0c0c;
    --accent: #ff4d88;    /* HelpingAI pink — change as you like */
    --accent-2:#ff8fb2;
    --shadow: 0 20px 40px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.5);
    --radius: 18px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg: #0f0f11;
      --fg: #f5f5f7;
      --muted: #a1a1aa;
      --ring: #26272b;
      --chip: #151518;
      --shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
    }
  }

  * { box-sizing: border-box }
  body{
    margin:0;
    background:
      radial-gradient(1200px 500px at 10% -10%, rgba(255,77,136,.10), transparent 60%),
      radial-gradient(900px 400px at 110% 0%, rgba(255,204,77,.12), transparent 55%),
      var(--bg);
    color:var(--fg);
    font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    padding:32px;
    display:grid;
    place-items:center;
    min-height:100dvh;
  }

  .org-card{
    width:min(880px, 94vw);
    background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2)) padding-box;
    background-color: var(--bg);
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  }

  .banner{
    position:relative;
    height:96px;
    background:
      radial-gradient(1200px 180px at -10% 10%, rgba(255,77,136,.18), transparent 60%),
      radial-gradient(900px 160px at 110% -10%, rgba(255,204,77,.25), transparent 55%),
      linear-gradient(90deg, rgba(255,77,136,.10), rgba(255,204,77,.15));
    border-bottom:1px solid var(--ring);
  }

  .row{
    display:flex; gap:18px; align-items:center;
    padding:18px 20px;
  }
  .avatar{
    width:72px; height:72px; border-radius:16px; background:var(--bg); border:1px solid var(--ring);
    display:grid; place-items:center; margin-top:-40px; box-shadow:0 10px 24px rgba(0,0,0,.10);
  }
  .avatar svg{ width:46px; height:46px }

  .title{
    display:flex; flex-direction:column; gap:6px; min-width:0;
  }
  .title h1{
    margin:0; font-size:22px; letter-spacing:.2px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  }
  .tagline{ color:var(--muted); font-size:13px; }

  .badges{
    margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  .badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:12px; background:var(--chip); border:1px solid var(--ring);
    font-weight:600; letter-spacing:.2px;
  }
  .badge .num{ font-variant-numeric: tabular-nums; }

  .chips{ padding:0 20px 16px; display:flex; gap:8px; flex-wrap:wrap }
  .chip{
    padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--ring); color:var(--muted); font-size:12px;
  }

  .cta{
    padding:2px 20px 20px; display:flex; gap:10px; flex-wrap:wrap;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:12px; border:1px solid var(--ring); text-decoration:none; color:var(--fg);
    transition: transform .04s ease, box-shadow .2s ease, border-color .2s ease;
    will-change: transform;
  }
  .btn:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.10) }
  .btn:active{ transform: translateY(0) }
  .btn.primary{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:white; border-color:transparent }
  .btn.hf{ background:#fff; border-color:#111; color:#111 }
  @media (prefers-color-scheme: dark){
    .btn.hf{ background:#111; border-color:#222; color:#fff }
  }
  .btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--hf-yellow); box-shadow:0 0 0 2px var(--hf-black) inset }
  .btn small{ opacity:.8 }

  .meta{
    padding:14px 20px; border-top:1px dashed var(--ring); color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; font-size:12px
  }
  .meta a{ color:inherit; text-decoration:none; border-bottom:1px dashed currentColor }
  .spacer{ flex:1 }
</style>
</head>
<body>

  <!-- ORG CARD -->
  <article class="org-card" role="group" aria-label="Hugging Face Organization: HelpingAI">
    <div class="banner"></div>

    <div class="row">
      <!-- Replace the SVG with your logo if you have one -->
      <div class="avatar" aria-hidden="true">
        <!-- Simple neural-nodes logo -->
        <svg viewBox="0 0 64 64" fill="none">
          <defs>
            <linearGradient id="g" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
              <stop stop-color="#ff4d88"/><stop offset="1" stop-color="#ffcc4d"/>
            </linearGradient>
          </defs>
          <circle cx="12" cy="32" r="6" fill="url(#g)"/>
          <circle cx="32" cy="12" r="6" fill="url(#g)"/>
          <circle cx="32" cy="32" r="6" fill="url(#g)"/>
          <circle cx="32" cy="52" r="6" fill="url(#g)"/>
          <circle cx="52" cy="32" r="6" fill="url(#g)"/>
          <path d="M18 32h8M32 18v8M32 38v8M38 32h8" stroke="url(#g)" stroke-width="4" stroke-linecap="round"/>
        </svg>
      </div>

      <div class="title">
        <h1>HelpingAI Labs</h1>
        <div class="tagline">World’s first Intermediate-Reasoning models — smarter, faster, token-efficient.</div>
      </div>

      <div class="badges" aria-label="Organization stats">
        <span class="badge" title="Models published">
          <!-- model icon -->
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 2 7l10 5 10-5-10-5Zm0 7L2 4v13l10 5 10-5V4l-10 5Z"/></svg>
          <span class="num">12</span>
        </span>
        <span class="badge" title="Datasets">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 5h18v4H3zM3 10h18v4H3zM3 15h18v4H3z"/></svg>
          <span class="num">6</span>
        </span>
        <span class="badge" title="Spaces / Demos">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg>
          <span class="num">3</span>
        </span>
        <span class="badge" title="Followers">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z"/></svg>
          <span class="num">1.8k</span>
        </span>
      </div>
    </div>

    <div class="chips" aria-label="Highlights">
      <span class="chip">Intermediate Reasoning</span>
      <span class="chip">High EQ</span>
      <span class="chip">OpenAI-compatible API</span>
      <span class="chip">10× token-efficient</span>
      <span class="chip">Multimodal</span>
    </div>

    <div class="cta">
      <a class="btn primary" href="https://chat.helpingai.co" target="_blank" rel="noopener">
        <!-- rocket -->
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13 3l8 8-3 3-2-2-4 4 2 2-2 2-3-3-3 1 1-3-3-3 2-2 2 2 4-4-2-2 3-3Zm1 6l1 1-4 4-1-1 4-4Z"/></svg>
        Try on Playground
      </a>

      <a class="btn" href="https://helpingai.co" target="_blank" rel="noopener">
        <!-- link -->
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 1 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 1 0 7 7L13.5 19"/></svg>
        Website
      </a>

      <a class="btn hf" href="https://huggingface.co/organizations/helpingai" target="_blank" rel="noopener">
        <span class="dot" aria-hidden="true"></span>
        <strong>Follow</strong> <small>on Hugging Face</small>
      </a>

      <span class="spacer"></span>

      <a class="btn" href="https://helpingai.co/docs" target="_blank" rel="noopener">
        <!-- book -->
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3h11a3 3 0 0 1 3 3v13a2 2 0 0 1-2 2H5a3 3 0 0 1-1-6V6a3 3 0 0 1 0-3Z"/></svg>
        Docs
      </a>
    </div>

    <div class="meta">
      <span>Latest model: <a href="https://huggingface.co/HelpingAI/Dhanishtha-2.0-preview" target="_blank" rel="noopener">Dhanishtha-2.0-preview</a></span>
      <span>SDK: OpenAI-compatible</span>
      <span>Latency: sub-second streaming</span>
      <span>Contact: <a href="mailto:hello@helpingai.co">hello@helpingai.co</a></span>
    </div>
  </article>

</body>