Skip to content

Commit 8f95df3

Browse files
thisisharsh7thisisharsh7
committed
Initial landing page for Seeva
0 parents  commit 8f95df3

File tree

4 files changed

+514
-0
lines changed

4 files changed

+514
-0
lines changed

‎.DS_Store‎

14 KB
Binary file not shown.

‎index.html‎

Lines changed: 399 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,399 @@
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>Seeva - Stop breaking your flow</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
16+
background: #fff;
17+
color: #1d1d1f;
18+
overflow-x: hidden;
19+
}
20+
21+
.split-container {
22+
display: grid;
23+
grid-template-columns: 1fr 1fr;
24+
min-height: 100vh;
25+
}
26+
27+
.problem-side {
28+
background: #f5f5f7;
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: center;
32+
padding: 4rem;
33+
animation: slideInLeft 0.8s ease;
34+
}
35+
36+
.solution-side {
37+
background: #fff;
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: center;
41+
align-items: center;
42+
padding: 4rem;
43+
animation: slideInRight 0.8s ease;
44+
}
45+
46+
.label {
47+
font-size: 0.875rem;
48+
font-weight: 600;
49+
letter-spacing: 0.08em;
50+
text-transform: uppercase;
51+
color: #6e6e73;
52+
margin-bottom: 2rem;
53+
}
54+
55+
h2 {
56+
font-size: clamp(2rem, 5vw, 3.5rem);
57+
font-weight: 700;
58+
letter-spacing: -0.03em;
59+
line-height: 1.1;
60+
margin-bottom: 2rem;
61+
}
62+
63+
.problem-text {
64+
font-size: 1.25rem;
65+
line-height: 1.6;
66+
color: #6e6e73;
67+
margin-bottom: 1.5rem;
68+
}
69+
70+
.solution-text {
71+
font-size: 1.5rem;
72+
line-height: 1.5;
73+
font-weight: 600;
74+
margin-bottom: 2.5rem;
75+
max-width: 500px;
76+
text-align: center;
77+
}
78+
79+
.product-preview {
80+
width: 100%;
81+
max-width: 500px;
82+
margin: 0 0 2rem 0;
83+
position: relative;
84+
cursor: pointer;
85+
}
86+
87+
.product-preview img {
88+
width: 100%;
89+
height: auto;
90+
border-radius: 12px;
91+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
92+
transition: transform 0.3s ease;
93+
}
94+
95+
.product-preview:hover img {
96+
transform: scale(1.02);
97+
}
98+
99+
/* Fullscreen icon overlay */
100+
.fullscreen-icon {
101+
position: absolute;
102+
top: 1rem;
103+
right: 1rem;
104+
width: 36px;
105+
height: 36px;
106+
background: rgba(0, 0, 0, 0.6);
107+
border-radius: 8px;
108+
display: flex;
109+
align-items: center;
110+
justify-content: center;
111+
opacity: 0;
112+
transition: opacity 0.3s ease;
113+
pointer-events: none;
114+
}
115+
116+
.product-preview:hover .fullscreen-icon {
117+
opacity: 1;
118+
}
119+
120+
.fullscreen-icon svg {
121+
width: 20px;
122+
height: 20px;
123+
stroke: white;
124+
}
125+
126+
/* Fullscreen modal */
127+
.fullscreen-modal {
128+
display: none;
129+
position: fixed;
130+
top: 0;
131+
left: 0;
132+
width: 100vw;
133+
height: 100vh;
134+
background: rgba(0, 0, 0, 0.95);
135+
z-index: 9999;
136+
align-items: center;
137+
justify-content: center;
138+
padding: 2rem;
139+
cursor: zoom-out;
140+
}
141+
142+
.fullscreen-modal.active {
143+
display: flex;
144+
}
145+
146+
.fullscreen-modal img {
147+
max-width: 90%;
148+
max-height: 90vh;
149+
border-radius: 12px;
150+
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
151+
}
152+
153+
.close-fullscreen {
154+
position: absolute;
155+
top: 2rem;
156+
right: 2rem;
157+
width: 40px;
158+
height: 40px;
159+
background: rgba(255, 255, 255, 0.1);
160+
border-radius: 50%;
161+
display: flex;
162+
align-items: center;
163+
justify-content: center;
164+
cursor: pointer;
165+
transition: background 0.3s ease;
166+
}
167+
168+
.close-fullscreen:hover {
169+
background: rgba(255, 255, 255, 0.2);
170+
}
171+
172+
.close-fullscreen svg {
173+
width: 24px;
174+
height: 24px;
175+
stroke: white;
176+
}
177+
178+
/* Trust signals */
179+
.trust-signals {
180+
display: flex;
181+
gap: 1.5rem;
182+
margin-bottom: 2.5rem;
183+
align-items: center;
184+
justify-content: center;
185+
}
186+
187+
.trust-item {
188+
font-size: 0.9375rem;
189+
color: #6e6e73;
190+
position: relative;
191+
padding: 0 1rem;
192+
}
193+
194+
.trust-item:not(:last-child)::after {
195+
content: '•';
196+
position: absolute;
197+
right: -0.75rem;
198+
color: #d1d1d6;
199+
}
200+
201+
.cta-group {
202+
display: flex;
203+
gap: 1rem;
204+
}
205+
206+
.btn {
207+
display: inline-flex;
208+
align-items: center;
209+
gap: 0.625rem;
210+
padding: 1rem 2rem;
211+
font-size: 1.125rem;
212+
font-weight: 600;
213+
border-radius: 12px;
214+
text-decoration: none;
215+
transition: all 0.2s ease;
216+
border: none;
217+
cursor: pointer;
218+
white-space: nowrap;
219+
}
220+
221+
.btn-icon {
222+
width: 20px;
223+
height: 20px;
224+
display: flex;
225+
align-items: center;
226+
justify-content: center;
227+
}
228+
229+
.btn-primary {
230+
background: #0071e3;
231+
color: #fff;
232+
border: none;
233+
}
234+
235+
.btn-primary:hover {
236+
background: #0077ed;
237+
}
238+
239+
.btn-secondary {
240+
background: #f5f5f7;
241+
color: #1d1d1f;
242+
border: none;
243+
}
244+
245+
.btn-secondary:hover {
246+
background: #e8e8ed;
247+
}
248+
249+
.download-note {
250+
font-size: 0.9375rem;
251+
color: #86868b;
252+
margin-top: 1.25rem;
253+
text-align: center;
254+
}
255+
256+
.alt-download {
257+
color: #0071e3;
258+
text-decoration: none;
259+
font-weight: 500;
260+
margin-left: 0.25rem;
261+
}
262+
263+
.alt-download:hover {
264+
text-decoration: underline;
265+
}
266+
267+
@keyframes slideInLeft {
268+
from {
269+
opacity: 0;
270+
transform: translateX(-50px);
271+
}
272+
to {
273+
opacity: 1;
274+
transform: translateX(0);
275+
}
276+
}
277+
278+
@keyframes slideInRight {
279+
from {
280+
opacity: 0;
281+
transform: translateX(50px);
282+
}
283+
to {
284+
opacity: 1;
285+
transform: translateX(0);
286+
}
287+
}
288+
289+
@media (max-width: 1024px) {
290+
.split-container {
291+
grid-template-columns: 1fr;
292+
}
293+
294+
.problem-side, .solution-side {
295+
min-height: 50vh;
296+
padding: 3rem 2rem;
297+
}
298+
299+
.trust-signals {
300+
flex-wrap: wrap;
301+
gap: 1rem;
302+
}
303+
304+
.trust-item:not(:last-child)::after {
305+
display: none;
306+
}
307+
308+
.fullscreen-modal img {
309+
max-width: 95%;
310+
}
311+
312+
.cta-group {
313+
flex-direction: column;
314+
width: 100%;
315+
}
316+
317+
.btn {
318+
width: 100%;
319+
}
320+
}
321+
</style>
322+
</head>
323+
<body>
324+
<div class="split-container">
325+
<div class="problem-side">
326+
<span class="label">The Problem</span>
327+
<h2>You need AI help. You stop what you're doing. You open a browser.</h2>
328+
<p class="problem-text">
329+
You navigate to ChatGPT. You describe what you're looking at. You wait. You copy the answer. You switch back.
330+
</p>
331+
<p class="problem-text">
332+
Fifteen seconds later, you've forgotten what you were doing.
333+
</p>
334+
<p class="problem-text">
335+
<strong>Your flow state is dead.</strong>
336+
</p>
337+
</div>
338+
339+
<div class="solution-side">
340+
<span class="label">The Solution</span>
341+
<h2>Seeva</h2>
342+
<p class="solution-text">Press one key. AI appears. Sees your screen. Get your answer. Back to work.</p>
343+
344+
<div class="product-preview" onclick="openFullscreen()">
345+
<img src="seeva-product-demo.png" alt="Seeva Demo" id="product-img">
346+
<div class="fullscreen-icon">
347+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
348+
<path d="M8 3H5C3.89543 3 3 3.89543 3 5V8M21 8V5C21 3.89543 20.1046 3 19 3H16M16 21H19C20.1046 21 21 20.1046 21 19V16M3 16V19C3 20.1046 3.89543 21 5 21H8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
349+
</svg>
350+
</div>
351+
</div>
352+
353+
<div class="trust-signals">
354+
<div class="trust-item">No setup</div>
355+
<div class="trust-item">Works in any app</div>
356+
<div class="trust-item">BYOK</div>
357+
</div>
358+
359+
<div class="cta-group">
360+
<a href="https://github.com/thisisharsh7/seeva-ai-assistant/releases" id="download-btn" class="btn btn-primary">
361+
<span class="btn-icon">
362+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
363+
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
364+
<path d="M3 17V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V17" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
365+
</svg>
366+
</span>
367+
<span id="download-text">Download</span>
368+
</a>
369+
<a href="https://github.com/thisisharsh7/seeva-ai-assistant" class="btn btn-secondary">
370+
<span class="btn-icon">
371+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
372+
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" fill="currentColor"/>
373+
</svg>
374+
</span>
375+
<span>GitHub</span>
376+
</a>
377+
</div>
378+
379+
<div class="download-note">
380+
<span id="download-note"></span>
381+
<a href="#" id="alt-download" class="alt-download" style="display: none;"></a>
382+
</div>
383+
</div>
384+
</div>
385+
386+
<!-- Fullscreen Modal -->
387+
<div class="fullscreen-modal" id="fullscreen-modal" onclick="closeFullscreen()">
388+
<div class="close-fullscreen">
389+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
390+
<path d="M18 6L6 18M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
391+
</svg>
392+
</div>
393+
<img src="seeva-product-demo.png" alt="Seeva Demo Fullscreen">
394+
</div>
395+
396+
<!-- Link to external script -->
397+
<script src="script.js"></script>
398+
</body>
399+
</html>

0 commit comments

Comments
 (0)