Skip to content

Commit f5ec013

Browse files
vigneshsnaikvigneshsnaik
committed
update cta
1 parent 93d6e9f commit f5ec013

File tree

3 files changed

+212
-66
lines changed

3 files changed

+212
-66
lines changed

‎src/components/CallToAction.astro‎

Lines changed: 150 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,167 @@
11
---
2-
interface Props {
3-
href: string;
4-
}
5-
6-
const { href } = Astro.props;
2+
import Pill from "./Pill.astro";
3+
import Icon from "./Icon.astro";
74
---
5+
<form id="my-form" action={import.meta.env.FORM_URL} method="POST">
6+
<label>Name:</label>
7+
<input type="text" name="name" />
8+
<label>Email:</label>
9+
<input type="email" name="email" />
10+
<label>Message:</label>
11+
<textarea name="message" rows="5" style="resize: none;"></textarea>
12+
<button id="my-form-button">
13+
<Pill>Send <Icon icon="paper-plane-tilt" /></Pill></button
14+
>
15+
</form>
816

9-
<a href={href}><slot /></a>
17+
<script>
18+
var form = document.getElementById("my-form") as HTMLFormElement;
19+
20+
async function handleSubmit(event: Event) {
21+
event.preventDefault();
22+
var data = new FormData(event.target as HTMLFormElement);
23+
if (!event.target) return;
24+
fetch((event.target as HTMLFormElement).action, {
25+
method: form.method,
26+
body: data,
27+
headers: {
28+
Accept: "application/json",
29+
},
30+
})
31+
.then((response) => {
32+
if (response.ok) {
33+
window.alert("Thanks for your submission!");
34+
form.reset();
35+
} else {
36+
response.json().then((data) => {
37+
if (Object.hasOwn(data, "errors")) {
38+
window.alert(
39+
data["errors"].map((error: any) => error["message"]).join(", ")
40+
);
41+
} else {
42+
window.alert("Oops! There was a problem submitting your form");
43+
}
44+
});
45+
}
46+
})
47+
.catch((error) => {
48+
window.alert("Oops! There was a problem submitting your form");
49+
});
50+
}
51+
form.addEventListener("submit", handleSubmit);
52+
</script>
1053

1154
<style>
12-
a {
13-
position: relative;
55+
.alert {
56+
position: fixed;
57+
top: 1rem;
58+
right: 1rem;
59+
padding: 1rem;
60+
background-color: var(--gray-900);
61+
color: var(--gray-100);
62+
border-radius: 0.25rem;
63+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
64+
z-index: 9999;
65+
}
66+
form {
1467
display: flex;
15-
place-content: center;
16-
text-align: center;
17-
padding: 0.56em 2em;
18-
gap: 0.8em;
19-
color: var(--accent-text-over);
20-
text-decoration: none;
21-
line-height: 1.1;
22-
border-radius: 999rem;
23-
overflow: hidden;
24-
background: var(--gradient-accent-orange);
25-
box-shadow: var(--shadow-md);
26-
white-space: nowrap;
68+
flex-direction: column;
69+
width: 100%;
2770
}
28-
29-
@media (min-width: 20em) {
30-
a {
31-
font-size: var(--text-lg);
32-
}
71+
label {
72+
margin: 1rem 0 0.25rem 0;
73+
font-size: var(--text-sm);
74+
font-weight: 600;
75+
}
76+
input {
77+
padding: 0.5rem;
78+
border: 1px solid var(--gray-900);
79+
border-radius: 0.25rem;
80+
background-color: var(--gray-800);
81+
color: var(--gray-100);
82+
}
83+
input:focus {
84+
outline: none;
3385
}
3486

35-
/* Overlay for hover effects. */
36-
a::after {
37-
content: "";
38-
position: absolute;
39-
inset: 0;
40-
pointer-events: none;
41-
transition: background-color var(--theme-transition);
42-
mix-blend-mode: overlay;
87+
button {
88+
padding: 0;
89+
background-color: transparent;
90+
color: inherit;
91+
border: none;
92+
cursor: pointer;
93+
width: max-content;
94+
margin: 1rem auto 0 auto;
95+
}
96+
textarea {
97+
padding: 0.5rem;
98+
border: 1px solid var(--gray-900);
99+
border-radius: 0.25rem;
100+
background-color: var(--gray-800);
101+
color: var(--gray-100);
102+
width: 100%;
103+
scrollbar-color: var(--gray-300) var(--gray-800);
104+
overflow: -moz-hidden-unscrollable;
105+
}
106+
textarea:focus {
107+
outline: none;
43108
}
44109

45-
a:focus::after,
46-
a:hover::after {
47-
background-color: hsla(var(--gray-999-basis), 0.3);
110+
p {
111+
font-size: var(--text-sm);
112+
}
113+
.Pill {
114+
width: fit-content;
48115
}
49116

50117
@media (min-width: 50em) {
51-
a {
52-
padding: 1.125rem 2.5rem;
53-
font-size: var(--text-xl);
118+
form {
119+
display: flex;
120+
flex-direction: column;
121+
}
122+
123+
label {
124+
font-size: var(--text-sm);
125+
}
126+
127+
input {
128+
padding: 0.5rem;
129+
border: 1px solid var(--gray-900);
130+
border-radius: 0.25rem;
131+
background-color: var(--gray-800);
132+
color: var(--gray-100);
133+
}
134+
input:focus {
135+
outline: none;
136+
}
137+
textarea {
138+
padding: 0.5rem;
139+
border: 1px solid var(--gray-900);
140+
border-radius: 0.25rem;
141+
background-color: var(--gray-800);
142+
color: var(--gray-100);
143+
scrollbar-color: var(--gray-300) var(--gray-800);
144+
overflow: -moz-hidden-unscrollable;
145+
}
146+
textarea:focus {
147+
outline: none;
148+
}
149+
150+
button {
151+
padding: 0;
152+
background-color: transparent;
153+
color: inherit;
154+
border: none;
155+
cursor: pointer;
156+
width: max-content;
157+
}
158+
159+
p {
160+
font-size: var(--text-sm);
161+
}
162+
163+
.Pill {
164+
width: fit-content;
54165
}
55166
}
56167
</style>

‎src/components/ContactCTA.astro‎

Lines changed: 61 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,79 @@ import CallToAction from "./CallToAction.astro";
33
import Icon from "./Icon.astro";
44
---
55

6-
<aside>
7-
<h2>Send Me a Message</h2>
8-
<CallToAction href="mailto:vigneshsnaik03@gmail.com">
9-
Send Me a Message
10-
<Icon icon="paper-plane-tilt" size="1.2em" />
11-
</CallToAction>
12-
</aside>
6+
<section class="content">
7+
<h2>Send Me a Message</h2><div
8+
class="w-full px-10 md:px-20 py-8 rounded-md flex flex-row center flex-wrap gap-2"
9+
>
10+
<CallToAction />
11+
</div>
12+
</section>
1313

1414
<style>
15-
aside {
15+
.content {
1616
display: flex;
1717
flex-direction: column;
18-
align-items: center;
19-
gap: 3rem;
20-
border-top: 1px solid var(--gray-800);
21-
border-bottom: 1px solid var(--gray-800);
22-
padding: 5rem 1.5rem;
23-
background-color: var(--gray-999_40);
24-
box-shadow: var(--shadow-sm);
18+
gap: 0;
2519
}
2620

27-
h2 {
28-
font-size: var(--text-xl);
29-
text-align: center;
30-
max-width: 15ch;
21+
.content h2 {
22+
font-size: var(--text-lg);
3123
}
3224

25+
.content p {
26+
color: var(--gray-400);
27+
}
28+
29+
3330
@media (min-width: 50em) {
34-
aside {
35-
padding: 7.5rem;
36-
flex-direction: row;
37-
flex-wrap: wrap;
38-
justify-content: space-between;
31+
.box {
32+
border-radius: 1.5rem;
33+
padding: 2.5rem;
34+
}
35+
36+
.content {
37+
display: grid;
38+
grid-template-columns: 1fr 80% ;
39+
gap: 1rem;
40+
}
41+
42+
.content h2 {
43+
font-size: var(--text-2xl);
44+
align-self: center;
45+
}
46+
.md\:px-20 {
47+
padding-left: 5rem;
48+
padding-right: 5rem;
3949
}
4050

41-
h2 {
42-
font-size: var(--text-3xl);
51+
.py-8 {
52+
padding-top: 2rem;
53+
padding-bottom: 2rem;
54+
}
55+
.px-10 {
56+
padding-left: 2.5rem;
57+
padding-right: 2.5rem;
58+
}
59+
.rounded-md {
60+
border-radius: 0.375rem;
61+
}
62+
.gap-2 {
63+
gap: 0.5rem;
64+
}
65+
.center {
4366
text-align: left;
4467
}
68+
.flex-wrap {
69+
flex-wrap: wrap;
70+
}
71+
.flex-row {
72+
flex-direction: row;
73+
}
74+
.w-full {
75+
width: 100%;
76+
}
77+
.flex {
78+
display: flex;
79+
}
4580
}
4681
</style>

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ const projects = (await getCollection("work"))
7979
<!-- Content sections -->
8080
<Skills />
8181
<Projects />
82+
<ContactCTA />
8283
</div>
83-
<ContactCTA />
8484
</div>
8585
</BaseLayout>
8686

0 commit comments

Comments
 (0)