1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
"use client";
import Spinner from "@/components/Spinner";
import { motion } from "motion/react";
import Form from "next/form";
import { useActionState } from "react";
import logFormData from "./actions";
// Debug states for testing UI without sending email
const debugSuccess = {
message:
"Sucessfully submitted your consultation request - expect to hear back soon via email!",
error: false,
};
const debugError = {
message:
"Failed to send email. This has been reported. Please try again later, and sorry for any inconvenience.",
error: true,
};
const initialState = {
message: "",
error: false,
};
export default function Home() {
// TODO: look up webdevsimplified video on forms in nextjs
const [state, formAction, pending] = useActionState(
logFormData,
initialState
);
return (
<div className="container mx-auto isolate px-4 py-6 sm:py-12 xl:py-16">
<div
aria-hidden="true"
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
>
<div
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
className="relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-br from-indigo-600 to-red-300 opacity-50 sm:left-[calc(50%-40rem)] sm:w-288.75"
/>
</div>
<div className="mx-auto max-w-3xl outline outline-gray-700/20 rounded-xl p-6 shadow-lg shadow-gray-700/10 backdrop-blur-lg sm:p-10 bg-white/30">
<motion.div
className="mx-auto max-w-2xl text-center"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
Schedule a <span className="text-gradient">Free Consultation</span>
</h2>
<p className="mt-6 text-lg text-gray-600">
We want to have a 20 minute conversation with you to discuss your
needs and talk pricing - completely free and with no obligation.
</p>
</motion.div>
<Form action={formAction} className="mx-auto mt-8">
<motion.div
className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<div>
<label
htmlFor="firstname"
className="block text-sm/6 font-semibold text-gray-900"
>
First name
</label>
<div className="mt-2.5">
<input
id="firstname"
name="firstname"
type="text"
auto-complete="given-name"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
placeholder="First Name"
required
/>
</div>
</div>
<div>
<label
htmlFor="lastname"
className="block text-sm/6 font-semibold text-gray-900"
>
Last Name
</label>
<div className="mt-2.5">
<input
id="lastname"
name="lastname"
type="text"
auto-complete="familyname"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
placeholder="Last Name"
required
/>
</div>
</div>
<div>
<label
htmlFor="email"
className="block text-sm/6 font-semibold text-gray-900"
>
Email
</label>
<div className="mt-2.5">
<input
id="email"
name="email"
type="email"
auto-complete="email"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
placeholder="email@domain.com"
required
/>
</div>
</div>
<div>
<label
htmlFor="phonenumber"
className="block text-sm/6 font-semibold text-gray-900"
>
Phone Number (optional)
</label>
<div className="mt-2.5">
<input
id="phonenumber"
name="phonenumber"
type="tel"
auto-complete="tel"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
placeholder="(216) 555-1234"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="message"
className="block text-sm/6 font-semibold text-gray-900"
>
Message
</label>
<div className="mt-2.5">
<textarea
id="message"
name="message"
rows={4}
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
placeholder="Please include a brief message about your (or your child's) needs - including subjects, grade levels, and any specific requests."
defaultValue={""}
></textarea>
</div>
</div>
<div className="sm:col-span-2">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
disabled={pending}
type="submit"
className="block w-full
rounded-md button-gradient
px-3.5 py-2.5 text-center text-md font-semibold text-white shadow-xs
hover:shadow-sm
disabled:bg-gray-600
hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
{pending ? (
<div className="flex items-center justify-center">
<Spinner /> <span>Submitting...</span>
</div>
) : (
"Submit"
)}
</motion.button>
</div>
<div className="sm:col-span-2" hidden={!state.message}>
<div className="text-center block w-full">
{state.error ? (
<p className="font-semibold bg-red-50 rounded-md text-md outline-1 -outline-offset-1 outline-red-700 px-3 py-2 text-red-800">
<span className="font-bold">Error(!): </span>
{state.message}
</p>
) : (
<p className="font-semibold bg-green-50 rounded-md text-md outline-1 -outline-offset-1 outline-green-700 px-3 py-2 text-green-800">
{state.message}
</p>
)}
</div>
</div>
</motion.div>
</Form>
</div>
</div>
);
}
|
