53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import { motion } from 'framer-motion'
|
||
import { Container } from '../../components/Container'
|
||
|
||
export function LoadBalancing() {
|
||
return (
|
||
<section className="bg-gray-50 py-20 lg:py-32">
|
||
<Container>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
{/* Visual Placeholder */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
|
||
>
|
||
<div className="text-center p-8">
|
||
<div className="text-6xl mb-4">⚖️</div>
|
||
<p className="text-gray-600">Auto-scaling & Load Balancing</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Content */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||
Effortless Load Balancing & Scaling
|
||
</h2>
|
||
<p className="mt-6 text-lg text-gray-600">
|
||
Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
|
||
</p>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||
Auto-scaling
|
||
</span>
|
||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||
Built-in load balancing
|
||
</span>
|
||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||
High availability
|
||
</span>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
)
|
||
}
|