knuthtimo-lab
1a85f0eb2d
Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
57 lines
2.8 KiB
TypeScript
57 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
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"
|
|
>
|
|
<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: -30 }}
|
|
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-blue-500 animate-pulse"></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: 30 }}
|
|
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">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">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; |