63 lines
3.1 KiB
TypeScript
63 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
import Counter from './Counter';
|
|
|
|
const Mission: React.FC = () => {
|
|
return (
|
|
<motion.section
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="py-24 bg-background-light dark:bg-background-dark relative 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 px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-start">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -200 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<div className="flex items-center gap-2 mb-4 text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-500">
|
|
<span className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></span>
|
|
Our Mission
|
|
</div>
|
|
<h2 className="font-display text-4xl md:text-5xl font-medium mb-6 leading-tight text-gray-900 dark:text-white">
|
|
Harness invisible power <span className="text-gray-400 dark:text-gray-600">to operate faster, focus deeper, and scale effortlessly.</span>
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 200 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="pt-4"
|
|
>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
|
|
Technology shouldn't be a hurdle; it should be the wind at your back. From seamless cloud migrations to robust cybersecurity, we handle the complexities so you can focus on what matters most: your business.
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-8 border-t border-gray-200 dark:border-white/10 pt-8">
|
|
<motion.div whileHover={{ scale: 1.05 }} className="cursor-default">
|
|
<span className="block text-3xl font-display font-bold mb-2 text-gray-900 dark:text-white flex items-center">
|
|
<Counter value={99.9} />%
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-500">Uptime Guarantee</span>
|
|
</motion.div>
|
|
<motion.div whileHover={{ scale: 1.05 }} className="cursor-default">
|
|
<span className="block text-3xl font-display font-bold mb-2 text-gray-900 dark:text-white flex items-center">
|
|
<Counter value={24} />/7
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-500">Support Availability</span>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Mission; |