tknuth/bayarea
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

SEO

Browse Source
This commit is contained in:
Timo Knuth
2026-03-25 20:08:25 -05:00
parent bcf9dc541c
commit 8f2f897184
4 changed files with 118 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/ContactPage.tsx
View File

@@ -1,11 +1,41 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import SEO from '../../components/SEO';
const ContactPage: React.FC = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
const ContactPage: React.FC = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const name = String(formData.get('name') || '').trim();
const phone = String(formData.get('phone') || '').trim();
const email = String(formData.get('email') || '').trim();
const company = String(formData.get('company') || '').trim();
const message = String(formData.get('message') || '').trim();
const subject = encodeURIComponent(`Website inquiry from ${name || 'Bay Area IT visitor'}`);
const body = encodeURIComponent(
[
`Name: ${name || 'Not provided'}`,
`Phone: ${phone || 'Not provided'}`,
`Email: ${email || 'Not provided'}`,
`Company: ${company || 'Not provided'}`,
'',
'Message:',
message || 'No message provided',
].join('\n'),
);
window.location.href = `mailto:info@bayareaaffiliates.com?subject=${subject}&body=${body}`;
setIsSubmitted(true);
event.currentTarget.reset();
};
const faqs = [
{ q: 'How quickly can you start?', a: 'Most assessments can begin within 48 hours of contact. Emergency support is available 24/7.' },
@@ -44,33 +74,38 @@ const ContactPage: React.FC = () => {
className="bg-white/5 backdrop-blur-sm p-8 md:p-10 rounded-3xl shadow-xl border border-white/10"
>
<h3 className="text-2xl font-bold mb-8 text-white">Send us a message</h3>
<form className="space-y-6">
<form className="space-y-6" onSubmit={handleSubmit}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">Name *</label>
<input type="text" id="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
<input type="text" id="name" name="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
</div>
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
<input type="tel" id="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
<input type="tel" id="phone" name="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">Email *</label>
<input type="email" id="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
<input type="email" id="email" name="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
</div>
<div>
<label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">Company</label>
<input type="text" id="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
<input type="text" id="company" name="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">Message *</label>
<textarea id="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
</div>
<button type="submit" className="w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)]">
Send Message
</button>
</form>
<textarea id="message" name="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
</div>
<button type="submit" className="w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)]">
Send Message
</button>
{isSubmitted && (
<p className="text-sm text-gray-400">
Your mail client should open with the message prefilled. If it does not, email us at info@bayareaaffiliates.com.
</p>
)}
</form>
</motion.div>
{/* Right: FAQ & Info */}