Skip to content

Commit 88b4475

Browse files
dvXcodedvXcode
committed
Refactor call section: enhance layout, update styles, and improve button interactions
1 parent 7d8c7cc commit 88b4475

3 files changed

Lines changed: 188 additions & 94 deletions

File tree

‎_includes/call.html‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
<div class="call">
2-
<div class="call-box-top">
3-
{% if site.data.contact.phone %}
4-
<div class="call-phone"><strong>Phone: </strong> {{ site.data.contact.phone }} </div>
5-
{% endif %}
6-
{% if site.data.contact.email %}
7-
<div class="call-email"><strong>Email: </strong>
8-
<a href="mailto:{{ .site.data.contact.email }}">
9-
{{ site.data.contact.email }}
10-
</a>
2+
<div class="call-content">
3+
<div class="call-header">
4+
<h3>Ready to Start Your Project?</h3>
5+
<p>Let's discuss how we can help transform your ideas into reality.</p>
116
</div>
12-
{% endif %}
7+
8+
<div class="call-actions">
9+
{% if include.show_button %}
10+
<a href="{{ site.data.contact.contact_button_link }}" class="btn btn-primary">
11+
<svg class="btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
12+
<path d="M22 12L18 8M22 12L18 16M22 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
13+
</svg>
14+
Get In Touch
15+
</a>
16+
{% endif %}
17+
18+
{% if site.data.contact.email %}
19+
<a href="mailto:{{ site.data.contact.email }}" class="btn btn-secondary">
20+
<svg class="btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
21+
<path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2"/>
22+
<polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2"/>
23+
</svg>
24+
{{ site.data.contact.email }}
25+
</a>
26+
{% endif %}
27+
</div>
28+
</div>
29+
30+
<div class="call-decoration">
31+
<div class="call-pattern"></div>
1332
</div>
14-
{% if include.show_button %}
15-
<div class="call-box-bottom">
16-
<a href="{{ site.data.contact.contact_button_link }}" class="button">Contact</a>
17-
</div>
18-
{% endif %}
1933
</div>

‎_sass/components/_call.scss‎

Lines changed: 159 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,175 @@
11
.call {
22
position: relative;
3+
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
4+
border: 1px solid #e5e7eb;
5+
border-radius: 16px;
6+
padding: 32px;
7+
margin-top: 40px;
38
overflow: hidden;
4-
background-color: $white-offset;
5-
border-radius: 4px;
6-
// box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
7-
width: 100%;
8-
display: flex;
9-
align-items: center;
10-
flex-direction: row;
11-
flex-wrap: wrap;
12-
z-index: 2;
13-
@include media-breakpoint-up(sm) {
14-
align-items: center;
15-
flex-direction: row;
16-
flex-wrap: wrap;
9+
transition: all 0.3s ease;
10+
11+
&:hover {
12+
border-color: rgba(229, 38, 31, 0.2);
13+
box-shadow: 0 8px 25px rgba(229, 38, 31, 0.08);
14+
}
15+
16+
.call-content {
17+
position: relative;
18+
z-index: 2;
1719
}
18-
.call-box-top {
19-
flex: 1 0 auto;
20-
padding: 20px;
21-
@include media-breakpoint-up(md) {
20+
21+
.call-header {
22+
text-align: center;
23+
margin-bottom: 28px;
24+
25+
h3 {
26+
font-size: 1.5rem;
27+
font-weight: 600;
28+
color: #1f2937;
29+
margin-bottom: 8px;
30+
font-family: $font-family-heading;
31+
32+
@include media-breakpoint-up(md) {
33+
font-size: 1.75rem;
34+
}
35+
}
36+
37+
p {
38+
font-size: 1rem;
39+
color: #6b7280;
40+
margin-bottom: 0;
41+
line-height: 1.5;
42+
43+
@include media-breakpoint-up(md) {
44+
font-size: 1.1rem;
45+
}
2246
}
2347
}
24-
.call-box-bottom {
25-
flex: auto;
26-
padding: 20px;
27-
border-top: 1px solid darken($white-offset, 5%);
48+
49+
.call-actions {
50+
display: flex;
51+
flex-direction: column;
52+
gap: 12px;
53+
align-items: center;
54+
2855
@include media-breakpoint-up(sm) {
29-
flex: 0 0 auto;
30-
border: none;
56+
flex-direction: row;
57+
justify-content: center;
58+
gap: 16px;
3159
}
3260
}
33-
.call-name {
34-
font-size: 1.1rem;
35-
font-weight: bold;
36-
}
37-
.call-phone {
38-
margin-bottom: 5px;
39-
}
40-
.call-email {
41-
a {
42-
color: $black;
61+
62+
.btn {
63+
display: inline-flex;
64+
align-items: center;
65+
gap: 8px;
66+
padding: 12px 24px;
67+
border-radius: 10px;
68+
font-weight: 500;
69+
font-size: 0.95rem;
70+
text-decoration: none;
71+
transition: all 0.3s ease;
72+
border: 2px solid transparent;
73+
white-space: nowrap;
74+
75+
.btn-icon {
76+
transition: transform 0.3s ease;
77+
}
78+
79+
&:hover .btn-icon {
80+
transform: translateX(2px);
81+
}
82+
83+
&.btn-primary {
84+
background: linear-gradient(135deg, #e5261f, #f88379);
85+
color: white;
86+
87+
&:hover {
88+
background: linear-gradient(135deg, #d11e18, #f67168);
89+
transform: translateY(-2px);
90+
box-shadow: 0 8px 20px rgba(229, 38, 31, 0.3);
91+
}
92+
}
93+
94+
&.btn-secondary {
95+
background: white;
96+
color: #4b5563;
97+
border-color: #d1d5db;
98+
font-size: 0.9rem;
99+
100+
&:hover {
101+
background: #f9fafb;
102+
border-color: #9ca3af;
103+
color: #374151;
104+
transform: translateY(-1px);
105+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
106+
}
43107
}
44108
}
45-
strong {
46-
font-weight: bold;
47-
}
48-
svg {
49-
fill: lighten($secondary, 40%);
109+
110+
.call-decoration {
50111
position: absolute;
51-
bottom: -9px;
112+
top: 0;
52113
right: 0;
53-
width: 100px;
54-
height: 100px;
55-
@include media-breakpoint-up(sm) {
56-
width: 120px;
57-
height: 120px;
114+
width: 120px;
115+
height: 120px;
116+
opacity: 0.05;
117+
overflow: hidden;
118+
z-index: 1;
119+
120+
.call-pattern {
121+
position: absolute;
122+
top: -20px;
123+
right: -20px;
124+
width: 80px;
125+
height: 80px;
126+
background: linear-gradient(135deg, #e5261f, #f88379);
127+
border-radius: 50%;
128+
129+
&::before {
130+
content: '';
131+
position: absolute;
132+
top: 30px;
133+
left: 30px;
134+
width: 40px;
135+
height: 40px;
136+
background: linear-gradient(135deg, #f88379, #e5261f);
137+
border-radius: 50%;
138+
}
139+
140+
&::after {
141+
content: '';
142+
position: absolute;
143+
top: 60px;
144+
left: 10px;
145+
width: 20px;
146+
height: 20px;
147+
background: linear-gradient(135deg, #e5261f, #f88379);
148+
border-radius: 50%;
149+
}
150+
}
151+
}
152+
153+
@include media-breakpoint-down(sm) {
154+
padding: 24px 20px;
155+
margin-top: 30px;
156+
157+
.call-header {
158+
margin-bottom: 24px;
159+
160+
h3 {
161+
font-size: 1.3rem;
162+
}
163+
164+
p {
165+
font-size: 0.95rem;
166+
}
167+
}
168+
169+
.btn {
170+
width: 100%;
171+
justify-content: center;
172+
padding: 14px 24px;
58173
}
59174
}
60175
}

‎_sass/pages/_page-home.scss‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -75,39 +75,4 @@
7575
line-height: 1.5;
7676
color: #5c5a5a;
7777
}
78-
79-
.call {
80-
background: linear-gradient(135deg, #e5261f, #f88379);
81-
border-radius: 12px;
82-
padding: 25px;
83-
margin-top: 20px;
84-
border: none;
85-
86-
h2 {
87-
color: white !important;
88-
font-size: 1.2rem;
89-
margin-bottom: 15px;
90-
}
91-
92-
p {
93-
color: rgba(255, 255, 255, 0.9) !important;
94-
margin-bottom: 20px;
95-
}
96-
97-
.btn {
98-
background: white;
99-
color: #e5261f;
100-
border: none;
101-
font-weight: 600;
102-
padding: 12px 24px;
103-
border-radius: 8px;
104-
transition: all 0.3s ease;
105-
106-
&:hover {
107-
background: rgba(255, 255, 255, 0.9);
108-
transform: translateY(-2px);
109-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
110-
}
111-
}
112-
}
11378
}

0 commit comments

Comments
 (0)