forked from ourworld_web/www_engage_os
k
This commit is contained in:
@@ -1,17 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Button } from "@/components/Button";
|
||||
import Image from 'next/image'
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import Algorand from '@/images/logos/algorand.svg'
|
||||
import Casperlabs from '@/images/logos/casperlabs.svg'
|
||||
import Discourse from '@/images/logos/discourse.svg'
|
||||
import gitea from '@/images/logos/gitea.svg'
|
||||
import Jenkins from '@/images/logos/jenkins.svg'
|
||||
import Jitsi from '@/images/logos/jitsi.svg'
|
||||
import Mattermost from '@/images/logos/mattermost.svg'
|
||||
import Nextcloud from '@/images/logos/nextcloud.svg'
|
||||
|
||||
const logos = [
|
||||
Algorand, Casperlabs, Discourse, gitea,
|
||||
Jenkins, Jitsi, Mattermost, Nextcloud,
|
||||
];
|
||||
|
||||
export function AppsPreview() {
|
||||
return (
|
||||
<div className="relative flex h-[40rem] 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-4xl p-4 pt-20 md:pt-0">
|
||||
<div className="flex flex-col justify-center items-center mb-6">
|
||||
|
||||
{/* Heading */}
|
||||
<motion.div
|
||||
className="flex flex-col justify-center items-center mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
>
|
||||
<h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
|
||||
Anything That Runs on Linux Can Run on ThreeFold
|
||||
</h1>
|
||||
</div>
|
||||
</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 */}
|
||||
<motion.div
|
||||
className="mx-auto grid grid-cols-2 items-start gap-x-8 gap-y-10 sm:gap-x-10 lg:mx-0 lg:grid-cols-4"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.15,
|
||||
delayChildren: 2.8,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{logos.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" }}
|
||||
>
|
||||
<Image src={logo} alt="" unoptimized />
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
Reference in New Issue
Block a user