Skip to content

Commit 818bbac

Browse files
champaksworldcreatechampaksworldcreate
committed
Add multiple themed landing page HTML files
Introduces several new landing pages for SaaS, mobile app, creative agency, event/conference, nonprofit, personal brand, and more. Each file provides a distinct design and content tailored to its theme, including interactive elements, feature highlights, and responsive layouts.
1 parent 2f0da35 commit 818bbac

File tree

16 files changed

+3391
-0
lines changed

16 files changed

+3391
-0
lines changed

‎landing pages/0.html‎

Lines changed: 386 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,386 @@
1+
<!-- 1. SaaS Product — Conversion / Signup -->
2+
<!doctype html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width,initial-scale=1" />
8+
<title>Automate — Workflow Platform | Start Free Trial</title>
9+
<meta name="description"
10+
content="Automate work. Ship faster. Workflow automation platform — try free for 14 days." />
11+
<style>
12+
:root {
13+
--bg: #0f1724;
14+
--card: #0b1220;
15+
--accent: #06b6d4;
16+
--muted: #94a3b8;
17+
--glass: rgba(255, 255, 255, 0.04)
18+
}
19+
20+
* {
21+
box-sizing: border-box
22+
}
23+
24+
body {
25+
margin: 0;
26+
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
27+
color: #e6eef6;
28+
background: linear-gradient(180deg, #071024 0%, var(--bg) 100%);
29+
-webkit-font-smoothing: antialiased
30+
}
31+
32+
.wrap {
33+
max-width: 1100px;
34+
margin: 48px auto;
35+
padding: 24px
36+
}
37+
38+
header {
39+
display: flex;
40+
align-items: center;
41+
justify-content: space-between;
42+
gap: 16px
43+
}
44+
45+
.brand {
46+
display: flex;
47+
gap: 12px;
48+
align-items: center
49+
}
50+
51+
.logo {
52+
width: 56px;
53+
height: 56px;
54+
background: linear-gradient(135deg, #0ea5a0, #06b6d4);
55+
border-radius: 12px;
56+
padding: 8px;
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
color: #002;
61+
font-weight: 700
62+
}
63+
64+
.nav {
65+
display: flex;
66+
gap: 12px
67+
}
68+
69+
.btn {
70+
background: var(--accent);
71+
color: #012;
72+
padding: 10px 14px;
73+
border-radius: 10px;
74+
font-weight: 600;
75+
border: none;
76+
cursor: pointer
77+
}
78+
79+
.hero {
80+
display: grid;
81+
grid-template-columns: 1fr 420px;
82+
gap: 28px;
83+
margin-top: 34px;
84+
align-items: center
85+
}
86+
87+
.hero h1 {
88+
margin: 0;
89+
font-size: 36px;
90+
line-height: 1.05
91+
}
92+
93+
.hero p {
94+
color: var(--muted);
95+
margin-top: 12px
96+
}
97+
98+
.hero .actions {
99+
margin-top: 18px;
100+
display: flex;
101+
gap: 12px
102+
}
103+
104+
.card {
105+
background: var(--card);
106+
padding: 18px;
107+
border-radius: 12px;
108+
box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6)
109+
}
110+
111+
/* feature grid */
112+
.features {
113+
display: flex;
114+
gap: 12px;
115+
margin-top: 24px
116+
}
117+
118+
.feature {
119+
flex: 1;
120+
padding: 12px;
121+
border-radius: 10px;
122+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
123+
display: flex;
124+
gap: 12px;
125+
align-items: flex-start
126+
}
127+
128+
.feature svg {
129+
width: 48px;
130+
height: 48px;
131+
flex: 0 0 48px
132+
}
133+
134+
/* carousel */
135+
.carousel {
136+
margin-top: 22px;
137+
position: relative
138+
}
139+
140+
.slides {
141+
display: flex;
142+
gap: 12px;
143+
overflow: hidden;
144+
border-radius: 10px
145+
}
146+
147+
.slide {
148+
min-width: 100%;
149+
flex-shrink: 0;
150+
background: linear-gradient(90deg, #07112a, #041224);
151+
display: flex;
152+
align-items: center;
153+
justify-content: center;
154+
padding: 32px;
155+
color: var(--muted)
156+
}
157+
158+
.carousel .controls {
159+
position: absolute;
160+
top: 50%;
161+
transform: translateY(-50%);
162+
width: 100%;
163+
display: flex;
164+
justify-content: space-between;
165+
padding: 0 8px
166+
}
167+
168+
.small {
169+
font-size: 13px;
170+
color: var(--muted)
171+
}
172+
173+
footer {
174+
margin-top: 48px;
175+
color: var(--muted);
176+
display: flex;
177+
justify-content: space-between;
178+
align-items: center;
179+
flex-wrap: wrap;
180+
gap: 12px
181+
}
182+
183+
/* ticker */
184+
.ticker {
185+
overflow: hidden;
186+
white-space: nowrap;
187+
border-radius: 8px;
188+
padding: 8px;
189+
background: var(--glass);
190+
margin-top: 18px
191+
}
192+
193+
.ticker .run {
194+
display: inline-block;
195+
padding-right: 40px;
196+
animation: scroll 18s linear infinite
197+
}
198+
199+
@keyframes scroll {
200+
0% {
201+
transform: translateX(0)
202+
}
203+
204+
100% {
205+
transform: translateX(-50%)
206+
}
207+
}
208+
209+
/* responsive */
210+
@media (max-width:900px) {
211+
.hero {
212+
grid-template-columns: 1fr;
213+
padding: 0
214+
}
215+
216+
.slides {
217+
min-height: 180px
218+
}
219+
}
220+
</style>
221+
</head>
222+
223+
<body>
224+
<main class="wrap" role="main">
225+
<header>
226+
<div class="brand">
227+
<div class="logo" aria-hidden="true">A</div>
228+
<div>
229+
<div style="font-weight:700">Automate</div>
230+
<div class="small">Workflow platform</div>
231+
</div>
232+
</div>
233+
<nav class="nav" aria-label="Primary">
234+
<a href="#features" class="small" style="color:var(--muted)">Features</a>
235+
<a href="#pricing" class="small" style="color:var(--muted)">Pricing</a>
236+
<button class="btn">Start free trial</button>
237+
</nav>
238+
</header>
239+
240+
<section class="hero">
241+
<div>
242+
<h1>Automate work. Ship faster.</h1>
243+
<p>Reduce manual steps by <strong>70%</strong>. Integrations, orchestration and observability — one
244+
platform. Try free for 14 days, no credit card required.</p>
245+
<div class="actions">
246+
<button class="btn" aria-label="Start free trial">Start free trial</button>
247+
<button class="card" aria-label="Request demo">Request demo</button>
248+
</div>
249+
250+
<div class="features" id="features" role="list">
251+
<div class="feature" role="listitem">
252+
<!-- SVG: flow -->
253+
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
254+
<rect x="5" y="12" width="24" height="18" rx="4" fill="#062634" />
255+
<rect x="35" y="34" width="24" height="18" rx="4" fill="#06414a" />
256+
<path d="M29 21h6v8" stroke="#06b6d4" stroke-width="2" stroke-linecap="round"
257+
stroke-linejoin="round" />
258+
<circle cx="32" cy="32" r="2" fill="#06b6d4" />
259+
</svg>
260+
<div>
261+
<div style="font-weight:700">Visual workflows</div>
262+
<div class="small">Design, run and observe automations visually.</div>
263+
</div>
264+
</div>
265+
266+
<div class="feature" role="listitem">
267+
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
268+
<rect x="6" y="8" width="20" height="48" rx="6" fill="#042836" />
269+
<rect x="38" y="18" width="20" height="28" rx="6" fill="#06364f" />
270+
<path d="M14 28h36" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" />
271+
</svg>
272+
<div>
273+
<div style="font-weight:700">Integrations</div>
274+
<div class="small">Connect 200+ apps using native connectors.</div>
275+
</div>
276+
</div>
277+
278+
<div class="feature" role="listitem">
279+
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
280+
<rect x="6" y="8" width="52" height="48" rx="6" fill="#04122a" />
281+
<path d="M14 24h36M14 34h20" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" />
282+
<circle cx="44" cy="44" r="3" fill="#06b6d4" />
283+
</svg>
284+
<div>
285+
<div style="font-weight:700">Observability</div>
286+
<div class="small">Trace runs, logs and metrics in one place.</div>
287+
</div>
288+
</div>
289+
</div>
290+
291+
<div class="ticker" aria-hidden="true" style="margin-top:22px;">
292+
<div class="run">Trusted by 1,200+ teams • 99.99% uptime SLA • SOC2 compliant • 14-day free trial —
293+
Start today</div>
294+
<div class="run">Trusted by 1,200+ teams • 99.99% uptime SLA • SOC2 compliant • 14-day free trial —
295+
Start today</div>
296+
</div>
297+
</div>
298+
299+
<aside class="card" aria-labelledby="demo-heading" role="region"
300+
style="height:100%;display:flex;flex-direction:column;justify-content:space-between;">
301+
<div>
302+
<h3 id="demo-heading" style="margin:0">Live demo</h3>
303+
<p class="small" style="margin-top:8px">Minimal UI preview — workflows, runs and insights.</p>
304+
</div>
305+
306+
<!-- Carousel -->
307+
<div class="carousel" aria-roledescription="carousel" aria-label="Product screenshots">
308+
<div class="slides" id="slides">
309+
<div class="slide" role="group" aria-roledescription="slide" aria-label="Dashboard preview">
310+
<!-- big SVG dashboard placeholder -->
311+
<svg width="100%" height="200" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"
312+
role="img" aria-label="Dashboard illustration">
313+
<rect width="100%" height="100%" rx="12" fill="#04122a" />
314+
<g fill="#083047">
315+
<rect x="28" y="28" width="220" height="120" rx="8" />
316+
<rect x="260" y="28" width="480" height="120" rx="8" />
317+
<rect x="28" y="160" width="712" height="40" rx="6" />
318+
<rect x="28" y="210" width="220" height="150" rx="8" />
319+
<rect x="260" y="210" width="480" height="150" rx="8" />
320+
</g>
321+
</svg>
322+
</div>
323+
<div class="slide" role="group" aria-roledescription="slide" aria-label="Workflow builder">
324+
<svg width="100%" height="200" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"
325+
role="img" aria-label="Workflow illustration">
326+
<rect width="100%" height="100%" rx="12" fill="#041122" />
327+
<g fill="#052b36">
328+
<rect x="40" y="40" width="120" height="56" rx="10" />
329+
<rect x="200" y="40" width="120" height="56" rx="10" />
330+
<rect x="360" y="40" width="120" height="56" rx="10" />
331+
<rect x="520" y="40" width="120" height="56" rx="10" />
332+
<path d="M160 68h40" stroke="#06b6d4" stroke-width="6" stroke-linecap="round" />
333+
<path d="M320 68h40" stroke="#06b6d4" stroke-width="6" stroke-linecap="round" />
334+
<circle cx="200" cy="140" r="40" fill="#062b31" />
335+
</g>
336+
</svg>
337+
</div>
338+
</div>
339+
<div class="controls">
340+
<button id="prev" class="card" aria-label="Previous slide">❮</button>
341+
<button id="next" class="card" aria-label="Next slide">❯</button>
342+
</div>
343+
</div>
344+
345+
<div style="margin-top:12px;display:flex;gap:8px;align-items:center">
346+
<div style="flex:1">
347+
<div style="font-weight:700">14-day free trial</div>
348+
<div class="small">Start today — cancel anytime</div>
349+
</div>
350+
<button class="btn">Start free</button>
351+
</div>
352+
</aside>
353+
</section>
354+
355+
<section style="margin-top:26px;display:flex;gap:16px;align-items:center">
356+
<div class="card" style="flex:1">
357+
<div style="font-weight:700">Pricing teaser</div>
358+
<div class="small" style="margin-top:8px">From $29 / seat / month • Enterprise plans available</div>
359+
</div>
360+
<div class="card" style="width:240px;text-align:center">
361+
<div style="font-weight:700">Customer logos</div>
362+
<div class="small" style="margin-top:10px">Acme, Nova, Orion, BlueLeaf</div>
363+
</div>
364+
</section>
365+
366+
<footer>
367+
<div class="small">© Automate Inc • [email protected]</div>
368+
<div class="small">Privacy • Terms</div>
369+
</footer>
370+
</main>
371+
372+
<script>
373+
(function () {
374+
const slides = document.getElementById('slides');
375+
const total = slides.children.length;
376+
let idx = 0;
377+
const show = i => slides.style.transform = 'translateX(' + (-i * 100) + '%)';
378+
document.getElementById('prev').addEventListener('click', () => { idx = (idx - 1 + total) % total; show(idx); });
379+
document.getElementById('next').addEventListener('click', () => { idx = (idx + 1) % total; show(idx); });
380+
// auto-rotate
381+
setInterval(() => { idx = (idx + 1) % total; show(idx); }, 6000);
382+
})();
383+
</script>
384+
</body>
385+
386+
</html>

0 commit comments

Comments
 (0)