Skip to content

Commit 7aafdb4

Browse files
henmohrhenmohr
committed
Modifica CTA
Signed-off-by: henmohr <henriquemohr@redes.ufsm.br>
1 parent fead759 commit 7aafdb4

2 files changed

Lines changed: 230 additions & 19 deletions

File tree

‎source/_assets/sass/main.scss‎

Lines changed: 200 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -249,17 +249,20 @@ h6 {
249249
}
250250

251251
#intro .intro-info p {
252-
color: #e5332a;
252+
color: #333;
253253
text-align: left;
254-
font-size: 25px;
254+
font-size: 18px;
255255
font-family: "Montserrat", sans-serif;
256+
line-height: 1.6;
256257
}
257258

258259
#intro .intro-info h2 {
259-
padding: 20px;
260-
font-size: 70px;
260+
padding: 10px 0;
261+
font-size: 42px;
261262
text-align: left;
262263
font-family: "Montserrat", sans-serif;
264+
line-height: 1.3;
265+
margin-bottom: 15px;
263266
}
264267

265268
#intro .intro-info h3 {
@@ -315,13 +318,204 @@ h6 {
315318
/* Contact CTA Buttons */
316319
#intro .intro-cta {
317320
margin-top: 35px;
318-
text-align: center;
321+
text-align: left;
319322
display: flex;
320323
flex-wrap: wrap;
321-
justify-content: center;
322324
gap: 15px;
323325
}
324326

327+
#intro .intro-cta .btn-primary {
328+
background: #e5332a;
329+
border-color: #e5332a;
330+
color: #fff;
331+
}
332+
333+
#intro .intro-cta .btn-primary:hover {
334+
background: #c72b23;
335+
border-color: #c72b23;
336+
color: #fff;
337+
}
338+
339+
#intro .intro-cta .btn-outline-primary {
340+
background: transparent;
341+
border: 2px solid #e5332a;
342+
color: #e5332a;
343+
}
344+
345+
#intro .intro-cta .btn-outline-primary:hover {
346+
background: #e5332a;
347+
border-color: #e5332a;
348+
color: #fff;
349+
}
350+
351+
/* Intro Badge */
352+
#intro .intro-badge {
353+
display: inline-flex;
354+
align-items: center;
355+
gap: 8px;
356+
background: rgba(229, 51, 42, 0.1);
357+
color: #e5332a;
358+
padding: 8px 16px;
359+
border-radius: 20px;
360+
font-size: 14px;
361+
font-weight: 600;
362+
}
363+
364+
/* Intro Features List */
365+
#intro .intro-features {
366+
list-style: none;
367+
padding: 0;
368+
margin: 0;
369+
}
370+
371+
#intro .intro-features li {
372+
display: flex;
373+
align-items: center;
374+
gap: 12px;
375+
margin-bottom: 15px;
376+
font-size: 16px;
377+
color: #333;
378+
}
379+
380+
#intro .intro-features li i {
381+
color: #e5332a;
382+
font-size: 20px;
383+
}
384+
385+
/* Intro Boxes (Right Side) */
386+
#intro .intro-boxes {
387+
padding-left: 20px;
388+
}
389+
390+
#intro .intro-box {
391+
display: flex;
392+
align-items: flex-start;
393+
gap: 20px;
394+
background: #fff;
395+
padding: 25px;
396+
border-radius: 12px;
397+
border: 1px solid rgba(0, 0, 0, 0.08);
398+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
399+
transition: all 0.3s ease;
400+
}
401+
402+
#intro .intro-box:hover {
403+
transform: translateY(-3px);
404+
box-shadow: 0 6px 16px rgba(229, 51, 42, 0.15);
405+
}
406+
407+
#intro .intro-box-icon {
408+
flex-shrink: 0;
409+
width: 60px;
410+
height: 60px;
411+
background: #e5332a;
412+
border-radius: 12px;
413+
display: flex;
414+
align-items: center;
415+
justify-content: center;
416+
color: #fff;
417+
font-size: 24px;
418+
}
419+
420+
#intro .intro-box-content h4 {
421+
margin: 0 0 8px 0;
422+
font-size: 18px;
423+
font-weight: 600;
424+
color: #333;
425+
}
426+
427+
#intro .intro-box-content p {
428+
margin: 0;
429+
font-size: 14px;
430+
color: #666;
431+
line-height: 1.5;
432+
}
433+
434+
/* Intro Stats */
435+
#intro .intro-stats {
436+
background: #fff;
437+
padding: 20px;
438+
border-radius: 12px;
439+
border: 1px solid rgba(0, 0, 0, 0.08);
440+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
441+
}
442+
443+
#intro .stat-box {
444+
text-align: center;
445+
}
446+
447+
#intro .stat-box h3 {
448+
font-size: 32px;
449+
font-weight: 700;
450+
color: #e5332a;
451+
margin: 0 0 5px 0;
452+
}
453+
454+
#intro .stat-box p {
455+
font-size: 14px;
456+
color: #666;
457+
margin: 0;
458+
}
459+
460+
/* Lead Capture Form */
461+
#intro .intro-lead-form {
462+
border-top: 1px solid rgba(0, 0, 0, 0.1);
463+
}
464+
465+
#intro .lead-form-title {
466+
font-size: 14px;
467+
font-weight: 600;
468+
color: #333;
469+
margin-bottom: 12px;
470+
}
471+
472+
#intro .lead-form .form-group-inline {
473+
display: flex;
474+
gap: 12px;
475+
flex-wrap: wrap;
476+
}
477+
478+
#intro .lead-form .form-control {
479+
flex: 1;
480+
min-width: 250px;
481+
padding: 12px 16px;
482+
border: 1px solid #ddd;
483+
border-radius: 8px;
484+
font-size: 14px;
485+
transition: all 0.3s ease;
486+
}
487+
488+
#intro .lead-form .form-control:focus {
489+
outline: none;
490+
border-color: #e5332a;
491+
box-shadow: 0 0 0 3px rgba(229, 51, 42, 0.1);
492+
}
493+
494+
#intro .lead-form .btn-primary {
495+
padding: 12px 24px;
496+
border-radius: 8px;
497+
font-weight: 600;
498+
background: #e5332a;
499+
border-color: #e5332a;
500+
color: #fff;
501+
transition: all 0.3s ease;
502+
}
503+
504+
#intro .lead-form .btn-primary:hover {
505+
background: #c72b23;
506+
border-color: #c72b23;
507+
color: #fff;
508+
transform: translateY(-1px);
509+
box-shadow: 0 4px 12px rgba(229, 51, 42, 0.3);
510+
}
511+
512+
#intro .lead-form-note {
513+
font-size: 13px;
514+
color: #666;
515+
margin-top: 10px;
516+
margin-bottom: 0;
517+
}
518+
325519
#intro .btn-contact {
326520
display: inline-flex;
327521
align-items: center;

‎source/index.blade.php‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,37 @@
66
============================-->
77
<section id="intro" class="clearfix">
88
<div class="container">
9-
<div class="intro-info">
10-
<h2>Tecnologia com <br> <span>transparência</span> e <span>liberdade</span></h2>
11-
<p>Somos uma cooperativa digital de especialistas em desenvolvimento de software livre</p>
12-
<div class="intro-cta">
13-
<a href="https://wa.me/552120422073" target="_blank" rel="noopener noreferrer" class="btn-contact btn-whatsapp" aria-label="Fale conosco no WhatsApp">
14-
<i class="fa fa-whatsapp"></i> WhatsApp
15-
</a>
16-
<a href="https://t.me/LibreCodeCoop" target="_blank" rel="noopener noreferrer" class="btn-contact btn-telegram" aria-label="Fale conosco no Telegram">
17-
<i class="fa fa-telegram"></i> Telegram
18-
</a>
19-
<a href="mailto:contato@librecode.coop" class="btn-contact btn-email" aria-label="Envie-nos um email">
20-
<i class="fa fa-envelope"></i> Email
21-
</a>
9+
<div class="row justify-content-center">
10+
<div class="col-lg-8">
11+
<div class="intro-info">
12+
<div class="intro-badge mb-3">
13+
<i class="fa fa-users"></i> Cooperativa de especialistas
14+
</div>
15+
<h2>Simplifique sua gestão com <br><span>tecnologia segura</span>, <span>ética</span> e livre de amarras.</h2>
16+
<p>Do armazenamento em nuvem à assinatura eletrônica: ferramentas completas que colocam sua empresa no controle, com o suporte humanizado de uma cooperativa.</p>
17+
<div class="intro-cta">
18+
<a class="btn btn-primary btn-lg mr-2 mb-2" href="#why-us">
19+
Conheça nossas Soluções <i class="fa fa-arrow-right ml-2"></i>
20+
</a>
21+
<a class="btn btn-outline-primary btn-lg mb-2" href="#about">Por que Software Livre?</a>
22+
</div>
23+
<ul class="intro-features mt-4">
24+
<li><i class="fa fa-check-circle"></i> Equipe dedicada ao seu projeto</li>
25+
<li><i class="fa fa-check-circle"></i> Metodologia ágil e transparente</li>
26+
<li><i class="fa fa-check-circle"></i> Suporte contínuo pós-entrega</li>
27+
</ul>
28+
<div class="intro-lead-form mt-4 pt-4">
29+
<p class="lead-form-title">Ou deixe seu contato para falar com um especialista:</p>
30+
<form action="#contact" method="get" class="lead-form">
31+
<div class="form-group-inline">
32+
<input type="email" class="form-control" placeholder="Seu melhor e-mail" required>
33+
<button type="submit" class="btn btn-primary">Enviar</button>
34+
</div>
35+
<p class="lead-form-note">Resposta em até 24h. Sem compromisso.</p>
36+
</form>
37+
</div>
2238
</div>
39+
</div>
2340
</div>
2441
</div>
2542
</section>

0 commit comments

Comments
 (0)