Added contact page.
This commit is contained in:
parent
4b5ec158ce
commit
c95b103570
|
|
@ -0,0 +1,641 @@
|
|||
"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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Navigation from "../components/Navigation";
|
||||
import Footer from "../components/Footer";
|
||||
import AnimatedButton from "../components/AnimatedButton";
|
||||
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
HeartIcon,
|
||||
UsersIcon,
|
||||
StarIcon,
|
||||
TargetIcon,
|
||||
} from "../components/Icons";
|
||||
|
||||
const coreValues = [
|
||||
{
|
||||
icon: HeartIcon,
|
||||
title: "Family",
|
||||
description:
|
||||
"To serve our employees and their families by establishing a work environment and company policies that build character, strengthen individuals, and nurture families.",
|
||||
color: "from-rose-500 to-pink-500",
|
||||
bgColor: "bg-rose-50 dark:bg-rose-950/20",
|
||||
},
|
||||
{
|
||||
icon: StarIcon,
|
||||
title: "Character",
|
||||
description:
|
||||
"Every employee at TCM Sales & Marketing is to conduct themselves with an attitude of selflessness, servanthood, and confident humility.",
|
||||
color: "from-amber-500 to-orange-500",
|
||||
bgColor: "bg-amber-50 dark:bg-amber-950/20",
|
||||
},
|
||||
{
|
||||
icon: UsersIcon,
|
||||
title: "Giving Back",
|
||||
description:
|
||||
"We encourage a spirit of giving back to those in need. We believe that we have an obligation to serve others because we have been given so much.",
|
||||
color: "from-emerald-500 to-teal-500",
|
||||
bgColor: "bg-emerald-50 dark:bg-emerald-950/20",
|
||||
},
|
||||
{
|
||||
icon: TargetIcon,
|
||||
title: "Encouragement",
|
||||
description:
|
||||
"We want all employees to encourage one another at all times and help each other reach their full potential.",
|
||||
color: "from-blue-500 to-indigo-500",
|
||||
bgColor: "bg-blue-50 dark:bg-blue-950/20",
|
||||
},
|
||||
];
|
||||
|
||||
const principles = [
|
||||
"Faithful stewardship",
|
||||
"Professional integrity",
|
||||
"Ethical representation",
|
||||
"Symbiotic growth",
|
||||
"Positive impact",
|
||||
"Service excellence",
|
||||
];
|
||||
|
||||
export default function CulturePage() {
|
||||
return (
|
||||
<main className="relative">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[70vh] 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-amber-500 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>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-64 h-64 border border-white/5 rounded-full"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
}}
|
||||
initial={{ scale: 0.5 + i * 0.3, opacity: 0 }}
|
||||
animate={{
|
||||
scale: [0.5 + i * 0.3, 0.7 + i * 0.3, 0.5 + i * 0.3],
|
||||
opacity: [0.1, 0.3, 0.1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4 + i,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: i * 0.5,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</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"
|
||||
>
|
||||
<HeartIcon size={16} className="text-[hsl(0,100%,60%)]" />
|
||||
<span className="text-sm font-medium text-white/80">
|
||||
Who We Are
|
||||
</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"
|
||||
>
|
||||
Our{" "}
|
||||
<span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(30,100%,60%)] bg-clip-text text-transparent">
|
||||
Culture
|
||||
</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 mb-10 leading-relaxed"
|
||||
>
|
||||
Built on faith, driven by purpose, and committed to making a
|
||||
positive impact on everyone we serve.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
>
|
||||
<AnimatedButton
|
||||
href="/contact"
|
||||
size="lg"
|
||||
icon={<ArrowRightIcon size={18} />}
|
||||
>
|
||||
Join Our Team
|
||||
</AnimatedButton>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="w-6 h-10 rounded-full border-2 border-white/30 flex items-start justify-center p-2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 12, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="w-1.5 h-1.5 rounded-full bg-[hsl(0,100%,50%)]"
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Mission & Purpose Section */}
|
||||
<section className="section-padding bg-white dark:bg-neutral-900">
|
||||
<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">
|
||||
{/* Mission */}
|
||||
<FadeIn>
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="relative bg-gradient-to-br from-[hsl(0,100%,97%)] to-[hsl(0,50%,95%)] dark:from-[hsl(0,100%,10%)] dark:to-neutral-900 p-10 rounded-3xl border border-[hsl(0,100%,90%)] dark:border-[hsl(0,100%,20%)] h-full"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
<HeartIcon size={32} />
|
||||
</motion.div>
|
||||
<h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
Our Mission
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
To glorify God by being faithful stewards of all that is
|
||||
entrusted to us. To serve our employees and families well,
|
||||
using our resources to positively impact and help others.
|
||||
</p>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,60%)] rounded-b-3xl"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Purpose */}
|
||||
<FadeIn delay={0.2}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="relative bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/20 p-10 rounded-3xl border border-amber-100 dark:border-amber-900/50 h-full"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
<TargetIcon size={32} />
|
||||
</motion.div>
|
||||
<h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
Our Purpose
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
To provide professional and ethical representation for both
|
||||
our manufacturers and distributor partners with a vision of
|
||||
symbiotically beneficial growth.
|
||||
</p>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-b-3xl"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
/>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Guiding Principles */}
|
||||
<section className="py-16 bg-neutral-50 dark:bg-neutral-950">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<FadeIn>
|
||||
<div className="text-center mb-10">
|
||||
<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">
|
||||
Guiding Principles
|
||||
</span>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{principles.map((principle, index) => (
|
||||
<FadeIn key={principle} delay={index * 0.1}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-6 py-3 bg-white dark:bg-neutral-900 rounded-full shadow-md hover:shadow-lg transition-shadow border border-neutral-100 dark:border-neutral-800 cursor-default"
|
||||
>
|
||||
<span className="font-medium text-neutral-800 dark:text-neutral-200">
|
||||
{principle}
|
||||
</span>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Values Section */}
|
||||
<section className="section-padding bg-white dark:bg-neutral-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<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">
|
||||
What Drives Us
|
||||
</span>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
|
||||
Our Core{" "}
|
||||
<span className="text-[hsl(0,100%,40%)]">Values</span>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
|
||||
These values guide everything we do and shape how we interact
|
||||
with our team, partners, and community.
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{coreValues.map((value) => (
|
||||
<StaggerItem key={value.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10 }}
|
||||
className={`group relative ${value.bgColor} p-8 rounded-3xl h-full border border-neutral-100 dark:border-neutral-800 overflow-hidden`}
|
||||
>
|
||||
{/* Gradient overlay on hover */}
|
||||
<motion.div
|
||||
className={`absolute inset-0 bg-gradient-to-br ${value.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${value.color} flex items-center justify-center text-white mb-6`}
|
||||
>
|
||||
<value.icon size={24} />
|
||||
</motion.div>
|
||||
|
||||
<h3 className="relative text-xl font-bold text-neutral-900 dark:text-white mb-3 group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
||||
{value.title}
|
||||
</h3>
|
||||
<p className="relative text-neutral-600 dark:text-neutral-400 leading-relaxed text-sm">
|
||||
{value.description}
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${value.color} origin-left`}
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Visual Culture Section */}
|
||||
<section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white overflow-hidden">
|
||||
<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 items-center">
|
||||
{/* Visual */}
|
||||
<FadeIn>
|
||||
<div className="relative">
|
||||
<div className="relative aspect-square">
|
||||
{/* Animated rings */}
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
>
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute inset-0 rounded-full border border-dashed border-white/10"
|
||||
style={{
|
||||
transform: `scale(${0.6 + i * 0.2})`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Center content */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="text-center"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.1, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-32 h-32 rounded-full bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center mx-auto mb-6 shadow-2xl shadow-[hsl(0,100%,40%)]/30"
|
||||
>
|
||||
<span className="text-5xl">🤝</span>
|
||||
</motion.div>
|
||||
<h3 className="text-2xl font-bold mb-2">
|
||||
Stronger Together
|
||||
</h3>
|
||||
<p className="text-neutral-400">Since 2005</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Floating value icons */}
|
||||
{coreValues.map((value, i) => {
|
||||
const positions = [
|
||||
{ top: "10%", left: "10%" },
|
||||
{ top: "10%", right: "10%" },
|
||||
{ bottom: "10%", left: "10%" },
|
||||
{ bottom: "10%", right: "10%" },
|
||||
];
|
||||
return (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
className="absolute"
|
||||
style={positions[i]}
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.2 }}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
>
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center shadow-lg`}
|
||||
>
|
||||
<value.icon size={24} className="text-white" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Content */}
|
||||
<FadeIn direction="right" delay={0.2}>
|
||||
<div>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
|
||||
Our Community
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
||||
More Than a{" "}
|
||||
<span className="text-[hsl(0,100%,55%)]">Workplace</span>
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-400 mb-8 leading-relaxed">
|
||||
At TCM Sales & Marketing, we're not just colleagues—we're
|
||||
a family. We believe in creating an environment where everyone
|
||||
can thrive, grow, and make a meaningful impact.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"Supportive work environment",
|
||||
"Opportunities for growth",
|
||||
"Work-life balance",
|
||||
"Community involvement",
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={item}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ x: 10 }}
|
||||
className="flex items-center gap-4 group cursor-default"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, rotate: 360 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/20 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
|
||||
>
|
||||
<StarIcon
|
||||
size={14}
|
||||
className="text-[hsl(0,100%,55%)] group-hover:text-white transition-colors"
|
||||
/>
|
||||
</motion.div>
|
||||
<span className="text-neutral-300 font-medium group-hover:text-white transition-colors">
|
||||
{item}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quote Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-[hsl(0,100%,97%)] to-[hsl(30,100%,97%)] dark:from-neutral-900 dark:to-neutral-900">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<FadeIn>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-6xl mb-8"
|
||||
>
|
||||
💬
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<blockquote className="text-2xl sm:text-3xl lg:text-4xl font-medium text-neutral-800 dark:text-neutral-200 leading-relaxed mb-8">
|
||||
“We believe that we have an obligation to serve others
|
||||
because we have been given so much.”
|
||||
</blockquote>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="w-12 h-0.5 bg-[hsl(0,100%,40%)]" />
|
||||
<span className="text-neutral-500 dark:text-neutral-400 font-medium">
|
||||
TCM Sales & Marketing
|
||||
</span>
|
||||
<div className="w-12 h-0.5 bg-[hsl(0,100%,40%)]" />
|
||||
</div>
|
||||
</FadeIn>
|
||||
</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-culture"
|
||||
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-culture)" />
|
||||
</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">
|
||||
Want to Be Part of Our Story?
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-xl text-white/90 mb-10 leading-relaxed">
|
||||
We're always looking for passionate individuals who share our
|
||||
values and want to make a difference.
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<AnimatedButton
|
||||
href="/contact"
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
icon={<ArrowRightIcon size={18} />}
|
||||
>
|
||||
Get in Touch
|
||||
</AnimatedButton>
|
||||
<AnimatedButton href="/what-we-do" variant="outline" size="lg">
|
||||
<span className="text-white">Learn What We Do</span>
|
||||
</AnimatedButton>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue