website/apps/website/components/first-features.tsx

'use client'
import { cn } from '@/lib/utils'
import {
	IconActivity,
	IconCloud,
	IconDatabase,
	IconEaseInOut,
	IconRocket,
	IconTemplate,
	IconTerminal,
	IconTerminal2,
	IconUsers,
} from '@tabler/icons-react'
import { Layers, Lock, UnlockIcon } from 'lucide-react'

export function FirstFeaturesSection() {
	const features = [
		{
			title: 'Flexible Application Deployment',
			description:
				'Deploy any application using Nixpacks, Heroku Buildpacks, or your custom Dockerfile, tailored to your stack.',
			icon: <IconRocket />,
		},
		{
			title: 'Native Docker Compose Support',
			description:
				'Deploy complex applications natively with full Docker Compose integration for seamless orchestration.',
			icon: <Layers />,
		},
		{
			title: 'Multi-server Support',
			description:
				'Effortlessly deploy your applications on remote servers, with zero configuration hassle.',
			icon: <IconCloud />,
		},
		{
			title: 'Advanced User Management',
			description:
				'Control user access with detailed roles and permissions, keeping your deployments secure and organized.',
			icon: <IconUsers />,
		},
		{
			title: 'Database Management with Backups',
			description:
				'Manage and back up MySQL, PostgreSQL, MongoDB, MariaDB, Redis directly from Dokploy.',
			icon: <IconDatabase />,
		},
		{
			title: 'API & CLI Access',
			description:
				'Need custom functionality? Dokploy offers complete API and CLI access to fit your needs.',
			icon: <IconTerminal />,
		},
		{
			title: 'Docker Swarm Clusters',
			description:
				'Scale your deployments seamlessly with built-in Docker Swarm support for robust, multi-node applications.',
			icon: <IconUsers />,
		},
		{
			title: 'Open Source Templates',
			description:
				'Get started quickly with pre-configured templates for popular tools like Supabase, Cal.com, and PocketBase.',
			icon: <IconTemplate />,
		},
		{
			title: 'No Vendor Lock-In',
			description:
				'Experience complete freedom to modify, scale, and customize Dokploy to suit your specific needs.',
			icon: <UnlockIcon />,
		},
		{
			title: 'Real-time Monitoring & Alerts',
			description:
				'Monitor CPU, memory, and network usage in real-time across your deployments for full visibility.',
			icon: <IconActivity />,
		},
		{
			title: 'Built for Developers',
			description:
				'Designed specifically for engineers and developers seeking control and flexibility.',
			icon: <IconTerminal2 />,
		},
		{
			title: 'Self-hosted & Open Source',
			description:
				'Dokploy provides complete control with self-hosting capabilities and open-source transparency.',
			icon: <IconEaseInOut />,
		},
	]
	return (
		<div className="mt-20 flex flex-col items-center  justify-center px-4">
			<h2 className="text-center font-display text-3xl tracking-tight text-primary sm:text-4xl">
				Powerful Deployment Tailored to You
			</h2>
			<p className="mt-4 text-center text-lg  tracking-tight text-muted-foreground">
				Unlock seamless multi-server deployments, advanced user control,
				and flexible database management—all with Dokploy’s
				developer-focused features.
			</p>
			<div className="relative z-10 mx-auto mt-10 grid  max-w-7xl grid-cols-1 py-10 max-sm:mx-0 max-sm:w-full max-sm:p-0 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
				{features.map((feature, index) => (
					<Feature key={feature.title} {...feature} index={index} />
				))}
			</div>
		</div>
	)
}

const Feature = ({
	title,
	description,
	icon,
	index,
}: {
	title: string
	description: string
	icon: React.ReactNode
	index: number
}) => {
	return (
		<div
			className={cn(
				'group/feature relative flex  flex-col border-neutral-800 py-10 lg:border-r',
				(index === 0 || index === 4 || index === 8) &&
					'dark:border-neutral-800 lg:border-l',
				(index < 4 || index < 8) &&
					'dark:border-neutral-800 lg:border-b',
			)}
		>
			{index < 4 && (
				<div className="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-800 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100" />
			)}
			{index >= 4 && (
				<div className="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-800 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100" />
			)}
			<div className="relative z-10 mb-4 px-10 text-neutral-400">
				{icon}
			</div>
			<div className="relative z-10 mb-2 px-10 text-lg font-bold">
				<div className="absolute inset-y-0 left-0 h-6 w-1 origin-center rounded-br-full rounded-tr-full bg-neutral-700 transition-all duration-200 group-hover/feature:h-8 group-hover/feature:bg-white" />
				<span className="inline-block text-neutral-100 transition duration-200 group-hover/feature:translate-x-2">
					{title}
				</span>
			</div>
			<p className="relative z-10 px-10 text-sm text-neutral-300 lg:max-w-xs">
				{description}
			</p>
		</div>
	)
}