583 lines
23 KiB
TypeScript
583 lines
23 KiB
TypeScript
"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-12 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>
|
|
);
|
|
}
|