93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { motion } from "framer-motion";
|
||
import { H2, P } from '@/components/Texts';
|
||
|
||
|
||
|
||
import Ai21 from '@/components/logos/Ai21';
|
||
import Claude from '@/components/logos/Claude';
|
||
import BaiduCloud from '@/components/logos/BaiduCloud';
|
||
import ByteDance from '@/components/logos/ByteDance';
|
||
import DeepSeek from '@/components/logos/DeepSeek';
|
||
import DeepMind from '@/components/logos/DeepMind';
|
||
import Minimax from '@/components/logos/Minimax';
|
||
import Mistral from '@/components/logos/Mistral';
|
||
import Moonshot from '@/components/logos/Moonshot';
|
||
import AlibabaCloud from '@/components/logos/AlibabaCloud';
|
||
import TencentCloud from '@/components/logos/TencentCloud';
|
||
import OpenAI from '@/components/logos/OpenAI';
|
||
import XAI from '@/components/logos/XAI';
|
||
|
||
const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
|
||
const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
|
||
const row3 = [Moonshot, AlibabaCloud];
|
||
const row4 = [TencentCloud, OpenAI, XAI];
|
||
|
||
export function Companies() {
|
||
return (
|
||
<div className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
|
||
<div className="relative z-10 mx-auto w-full max-w-6xl p-4 pt-16">
|
||
|
||
{/* Heading */}
|
||
<motion.div
|
||
className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 1 }}
|
||
>
|
||
<H2 className="text-center">
|
||
Seamlessly Deploy the World’s Leading AI Models
|
||
</H2>
|
||
<P className="mt-6 text-center">
|
||
Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
|
||
</P>
|
||
</motion.div>
|
||
|
||
{/* Animated Line */}
|
||
<motion.div
|
||
className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
|
||
initial={{ width: 0 }}
|
||
animate={{ width: "100%" }}
|
||
transition={{ duration: 2, delay: 1 }}
|
||
/>
|
||
|
||
{/* Logos grid */}
|
||
<div className="flex flex-col items-center gap-y-10">
|
||
{[row1, row2, row3, row4].map((row, rowIndex) => (
|
||
<motion.div
|
||
key={rowIndex}
|
||
className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
|
||
initial="hidden"
|
||
animate="visible"
|
||
variants={{
|
||
visible: {
|
||
transition: {
|
||
staggerChildren: 0.15,
|
||
delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
|
||
},
|
||
},
|
||
}}
|
||
>
|
||
{row.map((Logo, i) => (
|
||
<motion.div
|
||
key={i}
|
||
className="flex justify-center"
|
||
variants={{
|
||
hidden: { opacity: 0, y: 30 },
|
||
visible: { opacity: 1, y: 0 },
|
||
}}
|
||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||
>
|
||
<div className="text-[#2F3178]"><Logo /></div>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|