642 lines
26 KiB
TypeScript
642 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
import Navigation from "../components/Navigation";
|
|
import Footer from "../components/Footer";
|
|
import AnimatedButton from "../components/AnimatedButton";
|
|
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
|
|
import {
|
|
PhoneIcon,
|
|
MailIcon,
|
|
MapPinIcon,
|
|
ArrowRightIcon,
|
|
CheckIcon,
|
|
} from "../components/Icons";
|
|
|
|
const contactInfo = [
|
|
{
|
|
icon: PhoneIcon,
|
|
label: "Phone",
|
|
value: "303-371-2810",
|
|
href: "tel:303-371-2810",
|
|
description: "Mon-Fri, 8am-5pm MST",
|
|
},
|
|
{
|
|
icon: PhoneIcon,
|
|
label: "Fax",
|
|
value: "303-371-2807",
|
|
href: null,
|
|
description: "24/7 available",
|
|
},
|
|
{
|
|
icon: MailIcon,
|
|
label: "Email",
|
|
value: "info@tcm-sales.com",
|
|
href: "mailto:info@tcm-sales.com",
|
|
description: "We'll respond within 24 hours",
|
|
},
|
|
];
|
|
|
|
const territories = [
|
|
"Colorado",
|
|
"Washington",
|
|
"Oregon",
|
|
"Idaho",
|
|
"Utah",
|
|
"Wyoming",
|
|
"Montana",
|
|
"New Mexico",
|
|
"Nebraska",
|
|
"Arizona",
|
|
];
|
|
|
|
export default function ContactPage() {
|
|
const [formState, setFormState] = useState({
|
|
name: "",
|
|
email: "",
|
|
company: "",
|
|
phone: "",
|
|
message: "",
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
// Simulate form submission
|
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
|
|
|
setIsSubmitting(false);
|
|
setIsSubmitted(true);
|
|
};
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
) => {
|
|
setFormState((prev) => ({
|
|
...prev,
|
|
[e.target.name]: e.target.value,
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<main className="relative">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[50vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900">
|
|
{/* Animated background */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[150px] opacity-15"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
x: [0, 50, 0],
|
|
}}
|
|
transition={{
|
|
duration: 10,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,50%)] rounded-full filter blur-[180px] opacity-10"
|
|
animate={{
|
|
scale: [1.2, 1, 1.2],
|
|
y: [0, -50, 0],
|
|
}}
|
|
transition={{
|
|
duration: 12,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/10 mb-8"
|
|
>
|
|
<MailIcon size={16} className="text-[hsl(0,100%,60%)]" />
|
|
<span className="text-sm font-medium text-white/80">
|
|
Get In Touch
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.1 }}
|
|
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6"
|
|
>
|
|
Let's{" "}
|
|
<span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(0,100%,65%)] bg-clip-text text-transparent">
|
|
Talk
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-300 leading-relaxed"
|
|
>
|
|
We would love to help you with all of your Foodservice and
|
|
Janitorial needs. Reach out and let's start a conversation.
|
|
</motion.p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Info Cards */}
|
|
<section className="relative -mt-8 z-20 pb-12">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<StaggerContainer className="grid sm:grid-cols-3 gap-6">
|
|
{contactInfo.map((info) => (
|
|
<StaggerItem key={info.label}>
|
|
<motion.div
|
|
whileHover={{ y: -5, scale: 1.02 }}
|
|
className="group bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-xl hover:shadow-2xl transition-all border border-neutral-100 dark:border-neutral-700"
|
|
>
|
|
{info.href ? (
|
|
<a
|
|
href={info.href}
|
|
className="block"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
|
|
>
|
|
<info.icon
|
|
size={22}
|
|
className="text-[hsl(0,100%,40%)] group-hover:text-white transition-colors"
|
|
/>
|
|
</motion.div>
|
|
<div>
|
|
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-1">
|
|
{info.label}
|
|
</p>
|
|
<p className="text-lg font-semibold text-neutral-900 dark:text-white group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
|
{info.value}
|
|
</p>
|
|
<p className="text-xs text-neutral-400 mt-1">
|
|
{info.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
) : (
|
|
<div className="flex items-start gap-4">
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
|
|
>
|
|
<info.icon
|
|
size={22}
|
|
className="text-[hsl(0,100%,40%)]"
|
|
/>
|
|
</motion.div>
|
|
<div>
|
|
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-1">
|
|
{info.label}
|
|
</p>
|
|
<p className="text-lg font-semibold text-neutral-900 dark:text-white">
|
|
{info.value}
|
|
</p>
|
|
<p className="text-xs text-neutral-400 mt-1">
|
|
{info.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Form & Location */}
|
|
<section className="section-padding bg-neutral-50 dark:bg-neutral-950">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
|
|
{/* Contact Form */}
|
|
<FadeIn>
|
|
<div className="bg-white dark:bg-neutral-900 p-8 md:p-10 rounded-3xl shadow-xl border border-neutral-100 dark:border-neutral-800">
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
|
|
Send Us a Message
|
|
</h2>
|
|
<p className="text-neutral-600 dark:text-neutral-400 mb-8">
|
|
Fill out the form below and we'll get back to you shortly.
|
|
</p>
|
|
|
|
{isSubmitted ? (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="text-center py-12"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ type: "spring", stiffness: 200, delay: 0.2 }}
|
|
className="w-20 h-20 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mx-auto mb-6"
|
|
>
|
|
<CheckIcon size={40} className="text-emerald-600" />
|
|
</motion.div>
|
|
<h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
|
|
Message Sent!
|
|
</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400 mb-6">
|
|
Thank you for reaching out. We'll be in touch soon.
|
|
</p>
|
|
<AnimatedButton
|
|
onClick={() => {
|
|
setIsSubmitted(false);
|
|
setFormState({
|
|
name: "",
|
|
email: "",
|
|
company: "",
|
|
phone: "",
|
|
message: "",
|
|
});
|
|
}}
|
|
variant="outline"
|
|
>
|
|
Send Another Message
|
|
</AnimatedButton>
|
|
</motion.div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
|
|
>
|
|
Name *
|
|
</label>
|
|
<motion.input
|
|
whileFocus={{ scale: 1.01 }}
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
value={formState.name}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
|
|
>
|
|
Email *
|
|
</label>
|
|
<motion.input
|
|
whileFocus={{ scale: 1.01 }}
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
value={formState.email}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
|
|
placeholder="your@email.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
<div>
|
|
<label
|
|
htmlFor="company"
|
|
className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
|
|
>
|
|
Company
|
|
</label>
|
|
<motion.input
|
|
whileFocus={{ scale: 1.01 }}
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
value={formState.company}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
|
|
placeholder="Your company"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="phone"
|
|
className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
|
|
>
|
|
Phone
|
|
</label>
|
|
<motion.input
|
|
whileFocus={{ scale: 1.01 }}
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
value={formState.phone}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
|
|
placeholder="(555) 555-5555"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="message"
|
|
className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
|
|
>
|
|
Message *
|
|
</label>
|
|
<motion.textarea
|
|
whileFocus={{ scale: 1.01 }}
|
|
id="message"
|
|
name="message"
|
|
required
|
|
rows={5}
|
|
value={formState.message}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none resize-none"
|
|
placeholder="How can we help you?"
|
|
/>
|
|
</div>
|
|
|
|
<motion.button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
whileHover={{ scale: 1.02, y: -2 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
className="w-full py-4 px-6 bg-[hsl(0,100%,40%)] hover:bg-[hsl(0,100%,35%)] text-white font-medium rounded-xl shadow-lg hover:shadow-xl hover:shadow-[hsl(0,100%,40%)]/25 transition-all disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
duration: 1,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full"
|
|
/>
|
|
Sending...
|
|
</>
|
|
) : (
|
|
<>
|
|
Send Message
|
|
<ArrowRightIcon size={18} />
|
|
</>
|
|
)}
|
|
</motion.button>
|
|
|
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 text-center">
|
|
By submitting this form, you agree to our privacy policy.
|
|
</p>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</FadeIn>
|
|
|
|
{/* Location Info */}
|
|
<FadeIn direction="right" delay={0.2}>
|
|
<div className="space-y-8">
|
|
{/* Address Card */}
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
className="bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-xl border border-neutral-100 dark:border-neutral-800"
|
|
>
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-14 h-14 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
|
|
>
|
|
<MapPinIcon size={28} className="text-[hsl(0,100%,40%)]" />
|
|
</motion.div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-1">
|
|
Head Office
|
|
</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400">
|
|
TCM Sales & Marketing
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<address className="not-italic text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
|
|
12424 East Weaver Place
|
|
<br />
|
|
Centennial, Colorado 80111
|
|
<br />
|
|
United States
|
|
</address>
|
|
<motion.a
|
|
href="https://maps.google.com/?q=12424+East+Weaver+Place,+Centennial,+CO+80111"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
whileHover={{ x: 5 }}
|
|
className="inline-flex items-center gap-2 text-[hsl(0,100%,40%)] font-medium hover:underline"
|
|
>
|
|
Get Directions
|
|
<ArrowRightIcon size={16} />
|
|
</motion.a>
|
|
</motion.div>
|
|
|
|
{/* Map Placeholder */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.02 }}
|
|
className="relative aspect-video bg-neutral-200 dark:bg-neutral-800 rounded-3xl overflow-hidden"
|
|
>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
opacity: [0.5, 1, 0.5],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="w-16 h-16 rounded-full bg-[hsl(0,100%,40%)]/20 flex items-center justify-center mx-auto mb-4"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-[hsl(0,100%,40%)]/40 flex items-center justify-center">
|
|
<MapPinIcon size={20} className="text-[hsl(0,100%,40%)]" />
|
|
</div>
|
|
</motion.div>
|
|
<p className="text-neutral-600 dark:text-neutral-400 font-medium">
|
|
Denver, Colorado
|
|
</p>
|
|
<p className="text-sm text-neutral-500">
|
|
Rocky Mountain Region HQ
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Decorative grid */}
|
|
<div
|
|
className="absolute inset-0 opacity-10"
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3C/g%3E%3C/svg%3E")`,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Territory Coverage */}
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
className="bg-gradient-to-br from-neutral-900 to-neutral-800 p-8 rounded-3xl text-white"
|
|
>
|
|
<h3 className="text-xl font-bold mb-4">Service Territory</h3>
|
|
<p className="text-neutral-400 mb-6 text-sm">
|
|
We proudly serve the Rocky Mountain and Northwest regions:
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{territories.map((territory, index) => (
|
|
<motion.span
|
|
key={territory}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.05 }}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
backgroundColor: "hsl(0, 100%, 40%)",
|
|
}}
|
|
className="px-3 py-1.5 text-sm font-medium bg-white/10 rounded-full cursor-default transition-colors"
|
|
>
|
|
{territory}
|
|
</motion.span>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="section-padding bg-white dark:bg-neutral-900">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
|
Common Questions
|
|
</span>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl font-bold text-neutral-900 dark:text-white">
|
|
Frequently Asked{" "}
|
|
<span className="text-[hsl(0,100%,40%)]">Questions</span>
|
|
</h2>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
q: "What areas do you service?",
|
|
a: "We serve the Rocky Mountain and Northwest regions including Colorado, Washington, Oregon, Idaho, Utah, Wyoming, Montana, New Mexico, Nebraska, and Arizona.",
|
|
},
|
|
{
|
|
q: "How quickly can I expect a response?",
|
|
a: "We typically respond to all inquiries within 24 business hours. For urgent matters, please call us directly.",
|
|
},
|
|
{
|
|
q: "Do you offer product samples?",
|
|
a: "Yes! We provide comprehensive product samples to help you evaluate our offerings. Contact us to request samples.",
|
|
},
|
|
{
|
|
q: "Can you help with sustainable product alternatives?",
|
|
a: "Absolutely. We offer a full range of eco-friendly, compostable, and recyclable products to meet your sustainability goals.",
|
|
},
|
|
].map((faq, index) => (
|
|
<FadeIn key={faq.q} delay={index * 0.1}>
|
|
<motion.div
|
|
whileHover={{ x: 5 }}
|
|
className="bg-neutral-50 dark:bg-neutral-800 p-6 rounded-2xl"
|
|
>
|
|
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
|
|
{faq.q}
|
|
</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400">
|
|
{faq.a}
|
|
</p>
|
|
</motion.div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<svg
|
|
className="w-full h-full"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<pattern
|
|
id="grid-contact"
|
|
width="10"
|
|
height="10"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path
|
|
d="M 10 0 L 0 0 0 10"
|
|
fill="none"
|
|
stroke="white"
|
|
strokeWidth="0.5"
|
|
/>
|
|
</pattern>
|
|
<rect width="100%" height="100%" fill="url(#grid-contact)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<FadeIn>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Prefer to Talk?
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
|
Give us a call and speak directly with our team.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<motion.a
|
|
href="tel:303-371-2810"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="inline-flex items-center gap-3 bg-white text-[hsl(0,100%,40%)] px-8 py-4 rounded-full font-bold text-xl shadow-xl hover:shadow-2xl transition-shadow"
|
|
>
|
|
<PhoneIcon size={24} />
|
|
303-371-2810
|
|
</motion.a>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|