208 lines
14 KiB
TypeScript
208 lines
14 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const ContactPage: React.FC = () => {
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
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 (
|
|
<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">
|
|
<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" />
|
|
</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" />
|
|
</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" />
|
|
</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." />
|
|
</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>
|
|
</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;
|