Hugging Face's logo

Spaces:
bench-labs
/
Partnerships
Running

App Files Community
2
wop commited on
Commit
bfdcfd4
·
verified ·
1 Parent(s): c604679

Upload 4 files

Browse files
Files changed (3) hide show
  1. D02tEO3k7uVNnBOoDNptp.svg +24 -0
  2. IQMtz5gg-vLFP7Gn75POT.png +0 -0
  3. index.html +229 -123
D02tEO3k7uVNnBOoDNptp.svg ADDED
IQMtz5gg-vLFP7Gn75POT.png ADDED
index.html CHANGED
@@ -1,124 +1,230 @@
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>Partnerships — seton-labs</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,300;1,6..72,400&display=swap" rel="stylesheet" />
9
- <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
10
- <script>
11
- tailwind.config = {
12
- theme: {
13
- extend: {
14
- fontFamily: {
15
- sans: ['Inter', 'sans-serif'],
16
- serif: ['Newsreader', 'serif'],
17
- }
18
- }
19
- }
20
- }
21
- </script>
22
- <style>
23
- body { background: #030303; font-family: 'Inter', sans-serif; }
24
-
25
- @keyframes breathe {
26
- 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(56,189,248,0.15)); }
27
- 50% { transform: scale(1.03); filter: drop-shadow(0 0 20px rgba(56,189,248,0.3)); }
28
- }
29
-
30
- @keyframes fadeIn {
31
- from { opacity: 0; transform: translateY(12px); }
32
- to { opacity: 1; transform: translateY(0); }
33
- }
34
-
35
- @keyframes softPulse {
36
- 0%, 100% { border-color: rgba(255,255,255,0.05); }
37
- 50% { border-color: rgba(255,255,255,0.1); }
38
- }
39
-
40
- .logo-anim {
41
- animation: breathe 5s ease-in-out infinite;
42
- }
43
-
44
- .fade { animation: fadeIn 0.6s ease both; }
45
- .d1 { animation-delay: .1s; }
46
- .d2 { animation-delay: .2s; }
47
- .d3 { animation-delay: .3s; }
48
- .d4 { animation-delay: .4s; }
49
- .d5 { animation-delay: .5s; }
50
- .d6 { animation-delay: .6s; }
51
-
52
- .slot {
53
- border: 1px dashed rgba(255,255,255,0.06);
54
- animation: softPulse 4s ease-in-out infinite;
55
- }
56
- .slot:nth-child(2) { animation-delay: .4s; }
57
- .slot:nth-child(3) { animation-delay: .8s; }
58
- .slot:nth-child(4) { animation-delay: 1.2s; }
59
-
60
- .grid-bg {
61
- background-image:
62
- linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
63
- linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
64
- background-size: 60px 60px;
65
- mask-image: radial-gradient(ellipse 50% 40% at 50% 35%, black 20%, transparent 100%);
66
- }
67
-
68
- .logo-anim {
69
- filter: invert(1) brightness(2);
70
- }
71
- </style>
72
- </head>
73
- <body class="text-white antialiased overflow-hidden h-screen">
74
-
75
- <div class="fixed inset-0 grid-bg pointer-events-none"></div>
76
-
77
- <!-- Main frame -->
78
- <div class="relative z-10 h-screen flex flex-col items-center justify-center px-6">
79
-
80
- <!-- Logo -->
81
- <div class="mb-8 fade d1">
82
- <img src="W9pLwGx01.svg"
83
- class="logo-anim h-20 w-auto filter invert brightness-200" />
84
- </div>
85
-
86
- <!-- Label -->
87
- <div class="flex items-center gap-2.5 mb-3 fade d2">
88
- <div class="w-1 h-1 rounded-full bg-sky-400"></div>
89
- <span class="text-[11px] font-medium tracking-widest uppercase text-white/35">Partnerships</span>
90
- </div>
91
-
92
- <!-- Heading -->
93
- <h1 class="font-serif italic text-3xl md:text-4xl tracking-tight text-center mb-2 fade d2">
94
- Coming soon
95
- </h1>
96
-
97
- <p class="text-white/30 text-sm font-light text-center max-w-sm mb-10 fade d3">
98
- We're building something here. Check back later.
99
- </p>
100
-
101
- <!-- Empty partner slots -->
102
- <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 w-full max-w-xl fade d4">
103
- <div class="slot rounded-xl h-16 flex items-center justify-center">
104
- <span class="iconify text-white/[0.07]" data-icon="lucide:plus" data-width="18"></span>
105
- </div>
106
- <div class="slot rounded-xl h-16 flex items-center justify-center">
107
- <span class="iconify text-white/[0.07]" data-icon="lucide:plus" data-width="18"></span>
108
- </div>
109
- <div class="slot rounded-xl h-16 flex items-center justify-center">
110
- <span class="iconify text-white/[0.07]" data-icon="lucide:plus" data-width="18"></span>
111
- </div>
112
- <div class="slot rounded-xl h-16 flex items-center justify-center">
113
- <span class="iconify text-white/[0.07]" data-icon="lucide:plus" data-width="18"></span>
114
- </div>
115
- </div>
116
-
117
- <!-- Contact -->
118
- <a class="mt-10 text-xs text-white/20 hover:text-white/40 transition-colors duration-300 fade d5">
119
- Open Source Research
120
- </a>
121
- </div>
122
-
123
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </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>Partnerships — seton-labs</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,300;1,6..72,400&display=swap" rel="stylesheet" />
9
+ <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ fontFamily: {
15
+ sans: ['Inter', 'sans-serif'],
16
+ serif: ['Newsreader', 'serif'],
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ body { background: #030303; font-family: 'Inter', sans-serif; }
24
+ @keyframes breathe {
25
+ 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(56,189,248,0.15)); }
26
+ 50% { transform: scale(1.03); filter: drop-shadow(0 0 20px rgba(56,189,248,0.3)); }
27
+ }
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; transform: translateY(12px); }
30
+ to { opacity: 1; transform: translateY(0); }
31
+ }
32
+ @keyframes softPulse {
33
+ 0%, 100% { border-color: rgba(255,255,255,0.06); }
34
+ 50% { border-color: rgba(255,255,255,0.12); }
35
+ }
36
+ .logo-anim { animation: breathe 5s ease-in-out infinite; filter: invert(1) brightness(2); }
37
+ .fade { animation: fadeIn 0.6s ease both; }
38
+ .d1 { animation-delay: .1s; }
39
+ .d2 { animation-delay: .2s; }
40
+ .d3 { animation-delay: .3s; }
41
+ .d4 { animation-delay: .4s; }
42
+ .d5 { animation-delay: .5s; }
43
+ .grid-bg {
44
+ background-image:
45
+ linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
46
+ linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
47
+ background-size: 60px 60px;
48
+ mask-image: radial-gradient(ellipse 50% 40% at 50% 35%, black 20%, transparent 100%);
49
+ }
50
+
51
+ /* All slots */
52
+ .slot {
53
+ border: 1px dashed rgba(255,255,255,0.1);
54
+ animation: softPulse 4s ease-in-out infinite;
55
+ position: relative;
56
+ }
57
+ .slot:nth-child(2) { animation-delay: .4s; }
58
+ .slot:nth-child(3) { animation-delay: .8s; }
59
+ .slot:nth-child(4) { animation-delay: 1.2s; }
60
+
61
+ /* Planned hatch on all slots */
62
+ .slot {
63
+ background: repeating-linear-gradient(
64
+ -45deg,
65
+ rgba(255,255,255,0.012) 0px,
66
+ rgba(255,255,255,0.012) 2px,
67
+ transparent 2px,
68
+ transparent 10px
69
+ );
70
+ }
71
+
72
+ /* Partner slots with logo */
73
+ .slot.partner {
74
+ transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
75
+ border-color 0.3s ease,
76
+ background 0.3s ease;
77
+ z-index: 1;
78
+ }
79
+ .slot.partner:hover {
80
+ transform: scale(1.08);
81
+ border-color: rgba(255,255,255,0.22) !important;
82
+ background: rgba(255,255,255,0.04);
83
+ animation: none;
84
+ z-index: 10;
85
+ }
86
+ .slot.partner:hover .partner-logo {
87
+ opacity: 1;
88
+ transform: translateY(-6px);
89
+ }
90
+ .slot.partner:hover .partner-name {
91
+ opacity: 1;
92
+ transform: translateY(0);
93
+ }
94
+
95
+ /* SVG logos — invert to white */
96
+ .partner-logo-svg {
97
+ filter: invert(1) brightness(2);
98
+ opacity: 0.6;
99
+ transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
100
+ }
101
+
102
+ /* PNG logos — no invert, just dim */
103
+ .partner-logo-png {
104
+ opacity: 0.6;
105
+ transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
106
+ }
107
+
108
+ .partner-name {
109
+ position: absolute;
110
+ bottom: 10px;
111
+ left: 0; right: 0;
112
+ text-align: center;
113
+ font-size: 10px;
114
+ font-weight: 500;
115
+ letter-spacing: 0.06em;
116
+ color: rgba(255,255,255,0.5);
117
+ opacity: 0;
118
+ transform: translateY(4px);
119
+ transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
120
+ pointer-events: none;
121
+ }
122
+
123
+ /* Planned badge (used on all slots) */
124
+ .planned-badge {
125
+ position: absolute;
126
+ top: 8px;
127
+ right: 8px;
128
+ font-size: 9px;
129
+ font-weight: 600;
130
+ letter-spacing: 0.1em;
131
+ text-transform: uppercase;
132
+ color: rgba(255,255,255,0.2);
133
+ background: rgba(255,255,255,0.04);
134
+ border: 1px solid rgba(255,255,255,0.08);
135
+ border-radius: 4px;
136
+ padding: 2px 6px;
137
+ pointer-events: none;
138
+ }
139
+
140
+ /* Empty slot center icon */
141
+ .empty-center {
142
+ display: flex;
143
+ flex-direction: column;
144
+ align-items: center;
145
+ gap: 6px;
146
+ }
147
+ .empty-icon-ring {
148
+ width: 28px;
149
+ height: 28px;
150
+ border-radius: 50%;
151
+ border: 1px dashed rgba(255,255,255,0.15);
152
+ display: flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ }
156
+ </style>
157
+ </head>
158
+ <body class="text-white antialiased overflow-hidden h-screen">
159
+
160
+ <div class="fixed inset-0 grid-bg pointer-events-none"></div>
161
+
162
+ <div class="relative z-10 h-screen flex flex-col items-center justify-center px-6">
163
+
164
+ <!-- Logo -->
165
+ <div class="mb-8 fade d1">
166
+ <img src="W9pLwGx01.svg" class="logo-anim h-20 w-auto" />
167
+ </div>
168
+
169
+ <!-- Label -->
170
+ <div class="flex items-center gap-2.5 mb-3 fade d2">
171
+ <div class="w-1 h-1 rounded-full bg-sky-400"></div>
172
+ <span class="text-[11px] font-medium tracking-widest uppercase text-white/35">Partnerships</span>
173
+ </div>
174
+
175
+ <!-- Heading -->
176
+ <h1 class="font-serif italic text-3xl md:text-4xl tracking-tight text-center mb-2 fade d2">
177
+ Coming soon
178
+ </h1>
179
+
180
+ <p class="text-white/30 text-sm font-light text-center max-w-sm mb-10 fade d3">
181
+ We're building something here. Check back later.
182
+ </p>
183
+
184
+ <!-- Partner slots -->
185
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 w-full max-w-2xl fade d4">
186
+
187
+ <!-- Glint Research (planned) -->
188
+ <div class="slot partner rounded-xl h-24 flex items-center justify-center">
189
+ <img src="D02tEO3k7uVNnBOoDNptp.svg" alt="Glint Research" class="partner-logo-svg h-10 w-auto" />
190
+ <span class="partner-name">Glint Research</span>
191
+ <span class="planned-badge">Planned</span>
192
+ </div>
193
+
194
+ <!-- Supra Labs (planned) -->
195
+ <div class="slot partner rounded-xl h-24 flex items-center justify-center">
196
+ <img src="IQMtz5gg-vLFP7Gn75POT.png" alt="Supra Labs" class="partner-logo-png h-10 w-auto" />
197
+ <span class="partner-name">Supra Labs</span>
198
+ <span class="planned-badge">Planned</span>
199
+ </div>
200
+
201
+ <!-- Empty slot -->
202
+ <div class="slot rounded-xl h-24 flex items-center justify-center">
203
+ <div class="empty-center">
204
+ <div class="empty-icon-ring">
205
+ <span class="iconify text-white/20" data-icon="lucide:plus" data-width="14"></span>
206
+ </div>
207
+ </div>
208
+ <span class="planned-badge">Planned</span>
209
+ </div>
210
+
211
+ <!-- Empty slot -->
212
+ <div class="slot rounded-xl h-24 flex items-center justify-center">
213
+ <div class="empty-center">
214
+ <div class="empty-icon-ring">
215
+ <span class="iconify text-white/20" data-icon="lucide:plus" data-width="14"></span>
216
+ </div>
217
+ </div>
218
+ <span class="planned-badge">Planned</span>
219
+ </div>
220
+
221
+ </div>
222
+
223
+ <!-- Footer -->
224
+ <a class="mt-10 text-xs text-white/20 hover:text-white/40 transition-colors duration-300 fade d5">
225
+ Open Source Research
226
+ </a>
227
+ </div>
228
+
229
+ </body>
230
  </html>