Skip to content

Commit 0f35dbf

Browse files
andrewmelchorandrewmelchor
committed
feat(docs) - update webdocs with contact from
1 parent ac9265b commit 0f35dbf

File tree

4 files changed

+694
-0
lines changed

4 files changed

+694
-0
lines changed

‎packages/webdocs/src/components/ContactForm.astro‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
---
2+
---
3+
4+
<div class="contact-form-wrapper">
5+
<form
6+
id="contact-form"
7+
action="https://formspree.io/f/xjgryvjd"
8+
method="POST"
9+
class="contact-form"
10+
>
11+
<div class="form-group">
12+
<label for="name" class="form-label">Full name</label>
13+
<input
14+
type="text"
15+
id="name"
16+
name="name"
17+
required
18+
class="form-input"
19+
placeholder="Jane Smith"
20+
/>
21+
</div>
22+
23+
<div class="form-group">
24+
<label for="role" class="form-label">Role</label>
25+
<input
26+
type="text"
27+
id="role"
28+
name="role"
29+
required
30+
class="form-input"
31+
placeholder="Engineering Manager"
32+
/>
33+
</div>
34+
35+
<div class="form-group">
36+
<label for="email" class="form-label">Company email</label>
37+
<input
38+
type="email"
39+
id="email"
40+
name="email"
41+
required
42+
class="form-input"
43+
placeholder="jane@company.com"
44+
/>
45+
</div>
46+
47+
<div class="form-group">
48+
<label for="message" class="form-label">Message</label>
49+
<textarea
50+
id="message"
51+
name="message"
52+
required
53+
rows="4"
54+
class="form-input form-textarea"
55+
placeholder="Tell us about your requirements..."
56+
></textarea>
57+
</div>
58+
59+
<button type="submit" class="form-submit">
60+
<span class="submit-text">Send Message</span>
61+
<span class="submit-loading" style="display: none;">Sending...</span>
62+
</button>
63+
</form>
64+
65+
<div id="form-success" class="form-message form-success" style="display: none;">
66+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
67+
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
68+
<polyline points="22 4 12 14.01 9 11.01"></polyline>
69+
</svg>
70+
<p>Thanks! We'll be in touch within 1 business day.</p>
71+
</div>
72+
73+
<div id="form-error" class="form-message form-error" style="display: none;">
74+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
75+
<circle cx="12" cy="12" r="10"></circle>
76+
<line x1="12" y1="8" x2="12" y2="12"></line>
77+
<line x1="12" y1="16" x2="12.01" y2="16"></line>
78+
</svg>
79+
<p>Something went wrong. Please email us directly at <a href="mailto:hello@tensorixlabs.com">hello@tensorixlabs.com</a></p>
80+
</div>
81+
</div>
82+
83+
<style>
84+
.contact-form-wrapper {
85+
max-width: 480px;
86+
margin: 0 auto;
87+
}
88+
89+
.contact-form {
90+
display: flex;
91+
flex-direction: column;
92+
gap: 1.25rem;
93+
}
94+
95+
.form-group {
96+
display: flex;
97+
flex-direction: column;
98+
gap: 0.5rem;
99+
}
100+
101+
.form-label {
102+
font-size: 0.875rem;
103+
font-weight: 500;
104+
color: #0f172a;
105+
}
106+
107+
.form-input {
108+
padding: 0.75rem 1rem;
109+
border: 1px solid #e2e8f0;
110+
border-radius: 0.5rem;
111+
font-size: 0.9375rem;
112+
color: #0f172a;
113+
background: white;
114+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
115+
}
116+
117+
.form-input::placeholder {
118+
color: #94a3b8;
119+
}
120+
121+
.form-input:focus {
122+
outline: none;
123+
border-color: #f97316;
124+
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
125+
}
126+
127+
.form-textarea {
128+
resize: vertical;
129+
min-height: 100px;
130+
}
131+
132+
.form-submit {
133+
display: inline-flex;
134+
align-items: center;
135+
justify-content: center;
136+
gap: 0.5rem;
137+
padding: 0.875rem 1.5rem;
138+
background: #0f172a;
139+
color: white;
140+
font-size: 0.9375rem;
141+
font-weight: 600;
142+
border: none;
143+
border-radius: 0.5rem;
144+
cursor: pointer;
145+
transition: background-color 0.15s ease;
146+
margin-top: 0.5rem;
147+
}
148+
149+
.form-submit:hover {
150+
background: #1e293b;
151+
}
152+
153+
.form-submit:disabled {
154+
opacity: 0.7;
155+
cursor: not-allowed;
156+
}
157+
158+
.form-message {
159+
display: flex;
160+
align-items: flex-start;
161+
gap: 0.75rem;
162+
padding: 1rem 1.25rem;
163+
border-radius: 0.5rem;
164+
margin-top: 1rem;
165+
}
166+
167+
.form-message p {
168+
margin: 0;
169+
font-size: 0.9375rem;
170+
line-height: 1.5;
171+
}
172+
173+
.form-message svg {
174+
flex-shrink: 0;
175+
margin-top: 0.125rem;
176+
}
177+
178+
.form-success {
179+
background: #f0fdf4;
180+
border: 1px solid #bbf7d0;
181+
color: #166534;
182+
}
183+
184+
.form-error {
185+
background: #fef2f2;
186+
border: 1px solid #fecaca;
187+
color: #991b1b;
188+
}
189+
190+
.form-error a {
191+
color: #991b1b;
192+
font-weight: 500;
193+
text-decoration: underline;
194+
}
195+
196+
.form-error a:hover {
197+
color: #7f1d1d;
198+
}
199+
</style>
200+
201+
<script>
202+
const form = document.getElementById('contact-form') as HTMLFormElement;
203+
const successEl = document.getElementById('form-success');
204+
const errorEl = document.getElementById('form-error');
205+
const submitBtn = form?.querySelector('.form-submit') as HTMLButtonElement;
206+
const submitText = form?.querySelector('.submit-text') as HTMLSpanElement;
207+
const submitLoading = form?.querySelector('.submit-loading') as HTMLSpanElement;
208+
209+
form?.addEventListener('submit', async (e) => {
210+
e.preventDefault();
211+
212+
// Reset states
213+
if (successEl) successEl.style.display = 'none';
214+
if (errorEl) errorEl.style.display = 'none';
215+
216+
// Show loading
217+
if (submitBtn) submitBtn.disabled = true;
218+
if (submitText) submitText.style.display = 'none';
219+
if (submitLoading) submitLoading.style.display = 'inline';
220+
221+
try {
222+
const formData = new FormData(form);
223+
const response = await fetch(form.action, {
224+
method: 'POST',
225+
body: formData,
226+
headers: {
227+
'Accept': 'application/json'
228+
}
229+
});
230+
231+
if (response.ok) {
232+
form.style.display = 'none';
233+
if (successEl) successEl.style.display = 'flex';
234+
} else {
235+
throw new Error('Form submission failed');
236+
}
237+
} catch (error) {
238+
if (errorEl) errorEl.style.display = 'flex';
239+
} finally {
240+
if (submitBtn) submitBtn.disabled = false;
241+
if (submitText) submitText.style.display = 'inline';
242+
if (submitLoading) submitLoading.style.display = 'none';
243+
}
244+
});
245+
</script>

‎packages/webdocs/src/components/FAQAccordion.astro‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
interface FAQItem {
3+
question: string;
4+
answer: string;
5+
}
6+
7+
interface Props {
8+
items: FAQItem[];
9+
}
10+
11+
const { items } = Astro.props;
12+
---
13+
14+
<div class="faq-accordion">
15+
{items.map((item, index) => (
16+
<details class="faq-item">
17+
<summary class="faq-question">
18+
<span>{item.question}</span>
19+
<svg class="faq-chevron" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
20+
<polyline points="6 9 12 15 18 9"></polyline>
21+
</svg>
22+
</summary>
23+
<div class="faq-answer">
24+
<p set:html={item.answer} />
25+
</div>
26+
</details>
27+
))}
28+
</div>
29+
30+
<style>
31+
.faq-accordion {
32+
max-width: 700px;
33+
margin: 0 auto;
34+
}
35+
36+
.faq-item {
37+
border-bottom: 1px solid #e2e8f0;
38+
}
39+
40+
.faq-item:last-child {
41+
border-bottom: none;
42+
}
43+
44+
.faq-question {
45+
display: flex;
46+
align-items: center;
47+
justify-content: space-between;
48+
gap: 1rem;
49+
padding: 1.25rem 0;
50+
font-size: 1rem;
51+
font-weight: 600;
52+
color: #0f172a;
53+
cursor: pointer;
54+
list-style: none;
55+
transition: color 0.15s ease;
56+
}
57+
58+
.faq-question::-webkit-details-marker {
59+
display: none;
60+
}
61+
62+
.faq-question:hover {
63+
color: #f97316;
64+
}
65+
66+
.faq-chevron {
67+
flex-shrink: 0;
68+
color: #94a3b8;
69+
transition: transform 0.2s ease, color 0.15s ease;
70+
}
71+
72+
.faq-item[open] .faq-chevron {
73+
transform: rotate(180deg);
74+
color: #f97316;
75+
}
76+
77+
.faq-item[open] .faq-question {
78+
color: #f97316;
79+
}
80+
81+
.faq-answer {
82+
padding-bottom: 1.25rem;
83+
animation: fadeIn 0.2s ease;
84+
}
85+
86+
.faq-answer p {
87+
margin: 0;
88+
font-size: 0.9375rem;
89+
line-height: 1.7;
90+
color: #475569;
91+
}
92+
93+
@keyframes fadeIn {
94+
from {
95+
opacity: 0;
96+
transform: translateY(-4px);
97+
}
98+
to {
99+
opacity: 1;
100+
transform: translateY(0);
101+
}
102+
}
103+
</style>

0 commit comments

Comments
 (0)