Skip to content

Commit e055ee3

Browse files
smpltsksmpltsk
authored
Consitent banner page added
1 parent 42029c3 commit e055ee3

1 file changed

Lines changed: 129 additions & 86 deletions

File tree

‎index.html‎

Lines changed: 129 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -165,134 +165,175 @@
165165
background: var(--dark);
166166
min-height: 100vh;
167167
display: flex; align-items: center;
168-
padding: 120px 0 80px;
168+
padding: 100px 0 70px;
169169
position: relative;
170170
overflow: hidden;
171171
}
172-
.hero::before {
172+
/* Grid texture — stronger like the banner */
173+
.hero::after {
173174
content: '';
174175
position: absolute; inset: 0;
175-
background:
176-
radial-gradient(ellipse 900px 600px at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 70%),
177-
radial-gradient(ellipse 600px 400px at 10% 80%, rgba(79,209,74,0.12) 0%, transparent 60%);
176+
background-image:
177+
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
178+
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
179+
background-size: 48px 48px;
178180
pointer-events: none;
179181
}
180-
/* Subtle grid texture */
181-
.hero::after {
182+
/* Green glow bottom-left like banner */
183+
.hero::before {
182184
content: '';
183185
position: absolute; inset: 0;
184-
background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
185-
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
186-
background-size: 60px 60px;
186+
background:
187+
radial-gradient(ellipse 700px 500px at 100% 50%, rgba(255,255,255,0.04) 0%, transparent 65%),
188+
radial-gradient(ellipse 500px 400px at 5% 95%, rgba(79,209,74,0.1) 0%, transparent 60%);
187189
pointer-events: none;
188190
}
189191
.hero-inner {
190192
position: relative; z-index: 1;
191193
display: grid;
192-
grid-template-columns: 1.15fr 0.85fr;
193-
gap: 5rem;
194+
grid-template-columns: 1.2fr 0.8fr;
195+
gap: 4rem;
194196
align-items: center;
195197
max-width: 1300px; margin: 0 auto; padding: 0 2.5rem;
196198
}
199+
/* FOR TRADIES & BUILDERS label */
197200
.hero-badge {
198-
display: inline-flex; align-items: center; gap: 0.6rem;
199-
background: rgba(255,255,255,0.08);
200-
border: 1px solid rgba(255,255,255,0.12);
201-
border-radius: 50px;
202-
padding: 0.5rem 1.25rem;
203-
margin-bottom: 2rem;
204-
font-size: 0.85rem; color: rgba(255,255,255,0.75); font-weight: 500;
201+
display: inline-flex; align-items: center; gap: 0.5rem;
202+
margin-bottom: 1.5rem;
203+
font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
204+
font-size: 1rem; letter-spacing: 0.18em;
205+
color: var(--green);
206+
text-transform: uppercase;
205207
}
206208
.hero-badge .dot {
207209
width: 8px; height: 8px; border-radius: 50%;
208210
background: var(--green);
209-
box-shadow: 0 0 8px rgba(79,209,74,0.6);
210211
flex-shrink: 0;
211212
}
213+
/* BIG headline — matches banner scale */
212214
.hero h1 {
213215
font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
214-
font-weight: 900;
215-
font-size: clamp(3.5rem, 6vw, 6rem);
216-
line-height: 0.95;
216+
font-weight: 400;
217+
font-size: clamp(4.5rem, 8.5vw, 8.5rem);
218+
line-height: 0.92;
217219
text-transform: uppercase;
218-
letter-spacing: -0.01em;
220+
letter-spacing: 0.01em;
219221
color: #fff;
220-
margin-bottom: 2rem;
222+
margin-bottom: 0;
223+
text-shadow: 2px 3px 0 rgba(0,0,0,0.25);
221224
}
222-
.hero h1 .red { color: var(--red); }
223-
.hero h1 .accent-line {
225+
.hero h1 .hero-red {
224226
display: block;
225-
background: linear-gradient(90deg, #EE4B4B 0%, #F97316 45%, #4FD14A 100%);
226-
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
227-
background-clip: text;
228-
filter: saturate(1.3) drop-shadow(1px 2px 0px rgba(0,0,0,0.4));
227+
color: #EE4B4B;
228+
text-shadow: 2px 3px 0 rgba(0,0,0,0.35);
229+
}
230+
/* SMPLTSK tagline row */
231+
.hero-tagline-row {
232+
display: flex; align-items: center; gap: 1.25rem;
233+
margin: 1.75rem 0 2rem;
234+
padding-top: 1.5rem;
235+
border-top: 3px solid var(--green);
236+
width: fit-content;
237+
}
238+
.hero-brand-name {
239+
font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
240+
font-size: 2.25rem; font-weight: 400;
241+
color: #fff; letter-spacing: 0.05em;
242+
text-transform: uppercase;
243+
}
244+
.hero-tagline-text {
245+
font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
246+
font-size: 1.5rem; letter-spacing: 0.12em;
247+
color: var(--green); text-transform: uppercase;
229248
}
230249
.hero-sub {
231-
font-size: 1.25rem; color: rgba(255,255,255,0.92);
232-
line-height: 1.75; max-width: 540px;
233-
margin-bottom: 2.5rem; font-weight: 400;
250+
font-size: 1.1rem; color: rgba(255,255,255,0.88);
251+
line-height: 1.7; max-width: 560px;
252+
margin-bottom: 2rem; font-weight: 400;
253+
display: none; /* Banner doesn't use body copy in hero */
234254
}
235-
.hero-sub strong { color: rgba(255,255,255,0.9); font-weight: 600; }
236255
.hero-ctas {
237256
display: flex; gap: 1rem; flex-wrap: wrap;
238-
align-items: center; margin-bottom: 3rem;
257+
align-items: center; margin-bottom: 2rem;
239258
}
240259
.btn-primary {
241260
background: var(--green); color: #fff;
242-
padding: 1rem 2.25rem; border-radius: 10px;
261+
padding: 1rem 2.25rem; border-radius: 8px;
243262
font-weight: 700; font-size: 1rem;
244263
text-decoration: none;
245264
display: inline-flex; align-items: center; gap: 0.6rem;
246-
box-shadow: 0 8px 24px rgba(79,209,74,0.35);
265+
box-shadow: 0 6px 20px rgba(79,209,74,0.4);
247266
transition: all 0.25s ease;
267+
text-transform: uppercase; letter-spacing: 0.05em;
248268
}
249-
.btn-primary:hover { background: #45C041; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(79,209,74,0.45); }
269+
.btn-primary:hover { background: #45C041; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,209,74,0.5); }
250270
.btn-secondary {
251-
background: transparent; color: rgba(255,255,255,0.8);
252-
padding: 1rem 2.25rem; border-radius: 10px;
253-
font-weight: 600; font-size: 1rem;
271+
background: transparent; color: #fff;
272+
padding: 1rem 2.25rem; border-radius: 8px;
273+
font-weight: 700; font-size: 1rem;
254274
text-decoration: none;
255275
display: inline-flex; align-items: center; gap: 0.6rem;
256-
border: 1.5px solid rgba(255,255,255,0.2);
276+
border: 2px solid rgba(255,255,255,0.4);
257277
transition: all 0.25s ease;
278+
text-transform: uppercase; letter-spacing: 0.05em;
258279
}
259-
.btn-secondary:hover { border-color: rgba(255,255,255,0.78); color: #fff; background: rgba(255,255,255,0.06); }
280+
.btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
281+
/* Green bullet trust items — like banner */
260282
.hero-trust {
261-
display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
283+
display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap;
262284
}
263285
.trust-item {
264-
display: flex; align-items: center; gap: 0.5rem;
265-
font-size: 0.85rem; color: rgba(255,255,255,0.78);
286+
display: flex; align-items: center; gap: 0.6rem;
287+
font-size: 0.9rem; color: #fff;
288+
font-weight: 600; letter-spacing: 0.02em;
266289
}
267-
.trust-item svg { opacity: 0.6; flex-shrink: 0; }
268-
269-
/* Phone mockup on right */
270-
.hero-visual { position: relative; }
271-
.hero-phone-wrap {
290+
.trust-item .bullet {
291+
width: 9px; height: 9px; border-radius: 50%;
292+
background: var(--green);
293+
box-shadow: 0 0 8px rgba(79,209,74,0.7);
294+
flex-shrink: 0;
295+
}
296+
/* Phone on right */
297+
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
298+
.hero-phone-wrap { position: relative; display: flex; justify-content: center; }
299+
.hero-phone-frame {
272300
position: relative;
273-
display: flex; justify-content: center;
301+
background: #1a1a2e;
302+
border-radius: 42px;
303+
padding: 10px;
304+
box-shadow:
305+
0 40px 80px rgba(0,0,0,0.6),
306+
0 0 0 1px rgba(255,255,255,0.1),
307+
inset 0 0 0 1px rgba(255,255,255,0.05);
308+
animation: floatPhone 6s ease-in-out infinite;
309+
max-width: 300px;
274310
}
275-
.hero-phone-wrap::before {
311+
.hero-phone-frame::before {
276312
content: '';
277-
position: absolute;
278-
width: 340px; height: 340px;
279-
border-radius: 50%;
280-
background: radial-gradient(circle, rgba(59,95,229,0.2) 0%, transparent 70%);
281-
top: 50%; left: 50%;
282-
transform: translate(-50%, -50%);
283-
pointer-events: none;
313+
position: absolute; top: 14px; left: 50%;
314+
transform: translateX(-50%);
315+
width: 80px; height: 6px; border-radius: 3px;
316+
background: rgba(255,255,255,0.15);
317+
z-index: 2;
318+
}
319+
/* FREE DOWNLOAD badge */
320+
.hero-phone-badge {
321+
position: absolute; top: -12px; right: -16px;
322+
background: var(--green);
323+
color: #fff; font-family: 'Bebas Neue', sans-serif;
324+
font-size: 0.95rem; letter-spacing: 0.1em;
325+
padding: 0.45rem 1rem; border-radius: 6px;
326+
transform: rotate(2deg);
327+
box-shadow: 0 4px 16px rgba(79,209,74,0.5);
328+
z-index: 10; white-space: nowrap;
284329
}
285330
.hero-img {
286-
width: 100%; max-width: 440px;
287-
border-radius: 20px;
288-
box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
289-
display: block;
290-
position: relative; z-index: 1;
291-
animation: floatPhone 6s ease-in-out infinite;
331+
width: 100%; border-radius: 34px;
332+
display: block; position: relative; z-index: 1;
292333
}
293334
@keyframes floatPhone {
294335
0%, 100% { transform: translateY(0); }
295-
50% { transform: translateY(-10px); }
336+
50% { transform: translateY(-12px); }
296337
}
297338

298339
/* ─── PAIN STRIP ────────────────────────────── */
@@ -906,46 +947,48 @@
906947
<div class="hero-content">
907948
<div class="hero-badge reveal">
908949
<span class="dot"></span>
909-
Registered Builder · 40 Years Experience · Melbourne, VIC
950+
For Tradies &amp; Builders
910951
</div>
911952
<h1 class="reveal d1">
912-
<span>Mistakes</span>
913-
<span class="accent-line">Are Eating</span>
914-
<span>Your Profit.</span>
953+
<span>Stop Mistakes</span>
954+
<span class="hero-red">Eating Your</span>
955+
<span class="hero-red">Profit.</span>
915956
</h1>
916-
<p class="hero-sub reveal d2">
917-
Every job described in words is a job that <strong>can be misunderstood.</strong>
918-
SMPLTSK fixes that — snap a photo, drop numbered markers, send it.
919-
Your team sees exactly what needs doing. <strong>No logins. No excuses.</strong>
920-
</p>
957+
<div class="hero-tagline-row reveal d2">
958+
<span class="hero-brand-name">SMPLTSK</span>
959+
<span class="hero-tagline-text">Mark It. Send It. Done.</span>
960+
</div>
921961
<div class="hero-ctas reveal d3">
922962
<a href="https://apps.apple.com/app/smpltsk/id6751039190" class="btn-primary" target="_blank" rel="noopener noreferrer" onclick="fbq('track','Lead')">
923963
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
924-
Download iOS — Try Free
964+
Download on iOS
925965
</a>
926966
<a href="https://play.google.com/store/apps/details?id=com.smpltsk" class="btn-secondary" target="_blank" rel="noopener noreferrer" onclick="fbq('track','Lead')">
927967
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/></svg>
928-
Get Android — Try Free
968+
Get on Android
929969
</a>
930970
</div>
931971
<div class="hero-trust reveal d4">
932972
<div class="trust-item">
933-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
934-
Start free — 1 photo, 6 tasks included
973+
<span class="bullet"></span>
974+
Snap a photo &amp; number the jobs
935975
</div>
936976
<div class="trust-item">
937-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
938-
No login for your team
977+
<span class="bullet"></span>
978+
No login to view
939979
</div>
940980
<div class="trust-item">
941-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>
942-
Works offline on site
981+
<span class="bullet"></span>
982+
Start free
943983
</div>
944984
</div>
945985
</div>
946986
<div class="hero-visual">
947987
<div class="hero-phone-wrap">
948-
<img src="hero.png" alt="SMPLTSK app home screen — tap to snap a photo, mark it, send it" class="hero-img">
988+
<div class="hero-phone-frame">
989+
<div class="hero-phone-badge">FREE DOWNLOAD</div>
990+
<img src="screenshot3.png" alt="SMPLTSK — all tasks complete, markers green, 100% done" class="hero-img">
991+
</div>
949992
</div>
950993
</div>
951994
</div>

0 commit comments

Comments
 (0)