forked from emre/www_projectmycelium_com
Initial commit
This commit is contained in:
Emre
36
src/pages/cloud/CloudCTA.tsx
Normal file
36
src/pages/cloud/CloudCTA.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
import { Button } from '../../components/Button'
|
||||
import { CircleBackground } from '../../components/CircleBackground'
|
||||
|
||||
export function CloudCTA() {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-32 overflow-hidden">
|
||||
<CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
|
||||
<Container className="relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="mx-auto max-w-3xl text-center"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
|
||||
Ready to Transform Your Kubernetes Experience?
|
||||
</h2>
|
||||
<p className="mt-6 text-lg lg:text-xl text-gray-600">
|
||||
Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap gap-4 justify-center">
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Start Your Free Trial
|
||||
</Button>
|
||||
<Button to="https://manual.grid.tf" variant="outline" color="gray">
|
||||
Read Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
65
src/pages/cloud/CloudHero.tsx
Normal file
65
src/pages/cloud/CloudHero.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Globe } from '../../components/ui/Globe'
|
||||
import { CountUpNumber } from '../../components/CountUpNumber'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const stats = [
|
||||
{ value: 54958, label: 'CPU Cores' },
|
||||
{ value: 1493, label: 'Nodes' },
|
||||
{ value: 5388956, label: 'GB Storage' },
|
||||
{ value: 44, label: 'Countries' },
|
||||
]
|
||||
|
||||
export function CloudHero() {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Text Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
|
||||
Mycelium Cloud
|
||||
</h1>
|
||||
<p className="mt-6 text-lg lg:text-xl text-gray-600">
|
||||
Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Globe */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-full max-w-[500px] aspect-square">
|
||||
<Globe className="w-full h-full" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
||||
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="text-2xl lg:text-3xl font-bold text-cyan-500">
|
||||
<CountUpNumber end={stat.value} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
42
src/pages/cloud/CloudPage.tsx
Normal file
42
src/pages/cloud/CloudPage.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { CloudHero } from './CloudHero'
|
||||
import { FeaturesSection } from './FeaturesSection'
|
||||
import { MyceliumNetworking } from './MyceliumNetworking'
|
||||
import { WebGateway } from './WebGateway'
|
||||
import { MultiMaster } from './MultiMaster'
|
||||
import { LoadBalancing } from './LoadBalancing'
|
||||
import { CloudCTA } from './CloudCTA'
|
||||
|
||||
export default function CloudPage() {
|
||||
return (
|
||||
<div>
|
||||
<AnimatedSection>
|
||||
<CloudHero />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<FeaturesSection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<MyceliumNetworking />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<WebGateway />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<MultiMaster />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<LoadBalancing />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<CloudCTA />
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
75
src/pages/cloud/FeaturesSection.tsx
Normal file
75
src/pages/cloud/FeaturesSection.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: '☁️',
|
||||
title: 'Cloud-Native Architecture',
|
||||
description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
|
||||
},
|
||||
{
|
||||
icon: '🛡️',
|
||||
title: 'Enterprise Security',
|
||||
description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Real-time Monitoring',
|
||||
description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
|
||||
},
|
||||
{
|
||||
icon: '🚀',
|
||||
title: 'One-Click Deployments',
|
||||
description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Collaboration',
|
||||
description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
title: 'Advanced Configuration',
|
||||
description: 'Flexible configuration management with support for Helm charts and custom resources.',
|
||||
},
|
||||
]
|
||||
|
||||
export function FeaturesSection() {
|
||||
return (
|
||||
<section className="bg-gray-50 py-20 lg:py-32">
|
||||
<Container>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Everything You Need to Succeed
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Powerful tools and features designed for modern cloud-native applications
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
|
||||
>
|
||||
<div className="text-4xl mb-4">{feature.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
|
||||
<p className="text-gray-600">{feature.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
52
src/pages/cloud/LoadBalancing.tsx
Normal file
52
src/pages/cloud/LoadBalancing.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
52
src/pages/cloud/MultiMaster.tsx
Normal file
52
src/pages/cloud/MultiMaster.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function MultiMaster() {
|
||||
return (
|
||||
<section className="bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* 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">
|
||||
Multi-Master Clusters
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
|
||||
</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">
|
||||
HA Control Plane
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Automatic Failover
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Zero-downtime Upgrades
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 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-cyan-50 to-blue-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">High Availability Clusters</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
49
src/pages/cloud/MyceliumNetworking.tsx
Normal file
49
src/pages/cloud/MyceliumNetworking.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function MyceliumNetworking() {
|
||||
return (
|
||||
<section className="bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* 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">
|
||||
Mycelium Networking
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
|
||||
</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">
|
||||
End-to-end encrypted
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Nature-inspired
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 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-cyan-50 to-blue-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">Decentralized Mesh Network</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
52
src/pages/cloud/WebGateway.tsx
Normal file
52
src/pages/cloud/WebGateway.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function WebGateway() {
|
||||
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">Simple Web Gateway</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">
|
||||
Simple Web Gateway Access
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
|
||||
</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">
|
||||
Simple configuration
|
||||
</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 routing
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
No ingress controllers
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user