Issues git resolved
This commit is contained in:
@@ -1,49 +1,23 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import SEO from '../../components/SEO';
|
||||
|
||||
import { useContactForm } from '../hooks/useContactForm';
|
||||
|
||||
const ContactPage: React.FC = () => {
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const { errorMessage, hasError, isSubmitted, isSubmitting, resetFeedback, submitContactForm } = useContactForm();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const faqs = [
|
||||
{ q: 'How quickly can you start?', a: 'Most assessments can begin within 48 hours of contact. Emergency support is available 24/7.' },
|
||||
{ q: 'How do you price services?', a: 'Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges.' },
|
||||
{ q: 'What\'s included in support?', a: '24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees.' },
|
||||
];
|
||||
|
||||
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.' },
|
||||
{ q: 'How do you price services?', a: 'Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges.' },
|
||||
{ q: 'What\'s included in support?', a: '24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees.' },
|
||||
];
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
<SEO
|
||||
title="Contact Bay Area IT | Free IT Assessment in Corpus Christi"
|
||||
@@ -52,200 +26,206 @@ const ContactPage: React.FC = () => {
|
||||
canonicalUrl="https://bayareait.services/contact"
|
||||
/>
|
||||
<div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
|
||||
<div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
|
||||
{/* Hero */}
|
||||
<section className="py-20 px-6 text-center border-b border-white/5 relative z-10">
|
||||
<h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
|
||||
Let's talk about <br /><span className="text-gray-500">your IT needs</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
Ready to improve your technology? We're here to help. Get started with a free consultation and see how we can make your IT work better for you.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16">
|
||||
|
||||
{/* Left: Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
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" 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>
|
||||
<div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
|
||||
<div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
|
||||
{/* Hero */}
|
||||
<section className="py-20 px-6 text-center border-b border-white/5 relative z-10">
|
||||
<h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
|
||||
Let's talk about <br /><span className="text-gray-500">your IT needs</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
Ready to improve your technology? We're here to help. Get started with a free consultation and see how we can make your IT work better for you.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16">
|
||||
|
||||
{/* Left: Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
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" onChange={resetFeedback} onSubmit={submitContactForm}>
|
||||
<input type="text" name="website" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden="true" />
|
||||
<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" 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>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">Email *</label>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">Company</label>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">Message *</label>
|
||||
<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 type="submit" disabled={isSubmitting} className="selection-inverse 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)] disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:scale-100">
|
||||
{isSubmitting ? 'Sending...' : '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.
|
||||
Thanks. Your message was sent successfully. If you need immediate help, email us at info@bayareaaffiliates.com.
|
||||
</p>
|
||||
)}
|
||||
{hasError && (
|
||||
<p className="text-sm text-red-300">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</motion.div>
|
||||
|
||||
{/* Right: FAQ & Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="space-y-12"
|
||||
>
|
||||
{/* Contact Info */}
|
||||
<div className="grid sm:grid-cols-2 gap-8">
|
||||
<div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
|
||||
<div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
|
||||
<span className="material-symbols-outlined">call</span>
|
||||
</div>
|
||||
<h4 className="font-bold text-white mb-1">Phone</h4>
|
||||
<p className="text-gray-400">(361) 765-8400</p>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
|
||||
<div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
|
||||
<span className="material-symbols-outlined">location_on</span>
|
||||
</div>
|
||||
<h4 className="font-bold text-white mb-1">Address</h4>
|
||||
<p className="text-gray-400">1001 Blucher St,<br />Corpus Christi, TX 78401</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
|
||||
<h4 className="font-bold text-white mb-4">Hours & Area</h4>
|
||||
<p className="text-gray-400 mb-2"><span className="font-semibold text-white">Mon - Fri:</span> 8:00 AM - 6:00 PM</p>
|
||||
<p className="text-gray-500 text-sm mb-4">(Emergency support: 24/7)</p>
|
||||
<p className="text-gray-400"><span className="font-semibold text-white">Service Area:</span> Corpus Christi & the Coastal Bend (including Portland, Rockport, Aransas Pass, Kingsville, Port Aransas)</p>
|
||||
</div>
|
||||
|
||||
{/* FAQ */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-6 text-white">Quick Answers</h3>
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/30 transition-colors">
|
||||
<h4 className="font-bold text-white mb-2">{faq.q}</h4>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">{faq.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What Happens Next Section */}
|
||||
<section className="py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="font-display text-3xl md:text-4xl font-bold text-center mb-16 text-white">
|
||||
What happens next?
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
step: "01",
|
||||
title: "We respond quickly",
|
||||
description: "Get a response within 24 hours, usually much faster."
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Free consultation",
|
||||
description: "20-minute call to understand your needs and challenges."
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Custom proposal",
|
||||
description: "Tailored solution with clear next steps and pricing."
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors relative overflow-hidden group"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10 font-display text-8xl font-bold text-white group-hover:scale-110 transition-transform select-none pointer-events-none">
|
||||
{item.step}
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-white mb-6 border border-white/10">
|
||||
<span className="material-symbols-outlined">
|
||||
{index === 0 ? 'schedule_send' : index === 1 ? 'phone_in_talk' : 'contract_edit'}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{item.title}</h3>
|
||||
<p className="text-gray-400 leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Area Section */}
|
||||
<section className="py-24 px-6 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white/5"></div>
|
||||
<div className="max-w-7xl mx-auto relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
Our Service Area
|
||||
</h2>
|
||||
<p className="text-lg text-gray-400 mb-8 leading-relaxed">
|
||||
Proudly serving Corpus Christi, Portland, Rockport, Aransas Pass, Kingsville, Port Aransas, and the entire Coastal Bend region.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{['Corpus Christi', 'Portland', 'Rockport', 'Aransas Pass', 'Kingsville', 'Port Aransas'].map((city) => (
|
||||
<div key={city} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300">
|
||||
<span className="material-symbols-outlined text-sm text-white">location_on</span>
|
||||
{city}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-[400px] bg-[#1a1a1a] rounded-3xl overflow-hidden border border-white/10 shadow-2xl relative">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.1843778537446!2d-97.39864222453538!3d27.79426697613324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86685f8090787b65%3A0x6762397985799732!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401!5e0!3m2!1sen!2sus!4v1709420000000!5m2!1sen!2sus"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</motion.div>
|
||||
|
||||
{/* Right: FAQ & Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="space-y-12"
|
||||
>
|
||||
{/* Contact Info */}
|
||||
<div className="grid sm:grid-cols-2 gap-8">
|
||||
<div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
|
||||
<div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
|
||||
<span className="material-symbols-outlined">call</span>
|
||||
</div>
|
||||
<h4 className="font-bold text-white mb-1">Phone</h4>
|
||||
<p className="text-gray-400">(361) 765-8400</p>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
|
||||
<div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
|
||||
<span className="material-symbols-outlined">location_on</span>
|
||||
</div>
|
||||
<h4 className="font-bold text-white mb-1">Address</h4>
|
||||
<p className="text-gray-400">1001 Blucher St,<br />Corpus Christi, TX 78401</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
|
||||
<h4 className="font-bold text-white mb-4">Hours & Area</h4>
|
||||
<p className="text-gray-400 mb-2"><span className="font-semibold text-white">Mon - Fri:</span> 8:00 AM - 6:00 PM</p>
|
||||
<p className="text-gray-500 text-sm mb-4">(Emergency support: 24/7)</p>
|
||||
<p className="text-gray-400"><span className="font-semibold text-white">Service Area:</span> Corpus Christi & the Coastal Bend (including Portland, Rockport, Aransas Pass, Kingsville, Port Aransas)</p>
|
||||
</div>
|
||||
|
||||
{/* FAQ */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-6 text-white">Quick Answers</h3>
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/30 transition-colors">
|
||||
<h4 className="font-bold text-white mb-2">{faq.q}</h4>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">{faq.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What Happens Next Section */}
|
||||
<section className="py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="font-display text-3xl md:text-4xl font-bold text-center mb-16 text-white">
|
||||
What happens next?
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
step: '01',
|
||||
title: 'We respond quickly',
|
||||
description: 'Get a response within 24 hours, usually much faster.'
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: 'Free consultation',
|
||||
description: '20-minute call to understand your needs and challenges.'
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: 'Custom proposal',
|
||||
description: 'Tailored solution with clear next steps and pricing.'
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors relative overflow-hidden group"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10 font-display text-8xl font-bold text-white group-hover:scale-110 transition-transform select-none pointer-events-none">
|
||||
{item.step}
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-white mb-6 border border-white/10">
|
||||
<span className="material-symbols-outlined">
|
||||
{index === 0 ? 'schedule_send' : index === 1 ? 'phone_in_talk' : 'contract_edit'}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{item.title}</h3>
|
||||
<p className="text-gray-400 leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Area Section */}
|
||||
<section className="py-24 px-6 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white/5"></div>
|
||||
<div className="max-w-7xl mx-auto relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
Our Service Area
|
||||
</h2>
|
||||
<p className="text-lg text-gray-400 mb-8 leading-relaxed">
|
||||
Proudly serving Corpus Christi, Portland, Rockport, Aransas Pass, Kingsville, Port Aransas, and the entire Coastal Bend region.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{['Corpus Christi', 'Portland', 'Rockport', 'Aransas Pass', 'Kingsville', 'Port Aransas'].map((city) => (
|
||||
<div key={city} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300">
|
||||
<span className="material-symbols-outlined text-sm text-white">location_on</span>
|
||||
{city}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-[400px] bg-[#1a1a1a] rounded-3xl overflow-hidden border border-white/10 shadow-2xl relative">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.1843778537446!2d-97.39864222453538!3d27.79426697613324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86685f8090787b65%3A0x6762397985799732!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401!5e0!3m2!1sen!2sus!4v1709420000000!5m2!1sen!2sus"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactPage;
|
||||
|
||||
export default ContactPage;
|
||||
|
||||
Reference in New Issue
Block a user