"use client"; import { cn } from "@/lib/utils"; import { Tab } from "@headlessui/react"; import { motion } from "framer-motion"; import { Layers, Terminal, Users } from "lucide-react"; import { Container } from "./Container"; interface Feature { name: React.ReactNode; summary: string; description: string; image: string; icon: React.ComponentType; } const features: Array = [ { name: "Open Source Templates", summary: "One click to deploy open source templates.", description: "Deploy open source templates with one click, powered by Docker Compose, (Plausible, Calcom, Pocketbase, etc.)", image: "/secondary/templates.png", icon: function ReportingIcon() { return ( <> ); }, }, { name: "Real-Time Traefik Configuration", summary: " Modify Traefik settings on-the-fly via a graphical interface or API.", description: "Users can adjust Traefik's configuration, including middleware, forwarding rules, and SSL certificates through an intuitive interface or API. This feature enables seamless traffic routing and security adjustments without the need to restart services", image: "/secondary/traefik.png", icon: function ReportingIcon() { return ( <> ); }, }, { name: "User Permission Management", summary: "Detailed control over user permissions for accessing and managing projects and services.", description: "Allows administrators to define specific roles and permissions for each user, including the ability to create, modify, or delete applications and databases. This feature ensures secure and efficient management of large and diverse teams.", image: "/secondary/users.png", icon: function InventoryIcon() { return ( <> ); }, }, { name: "Terminal Access", summary: "Direct access to each container's and server terminal for advanced management.", description: "Provides an interface to access the command line of any active container, allowing developers to execute commands, manage services, and troubleshoot directly from the dashboard", image: "/secondary/terminal.png", icon: function ContactsIcon() { return ( <> ); }, }, ]; function Feature({ feature, isActive, className, ...props }: React.ComponentPropsWithoutRef<"div"> & { feature: Feature; isActive: boolean; }) { return (
{isActive && ( )}

{feature.name}

{feature.summary}

{feature.description}

); } function FeaturesMobile() { return (
{features.map((feature) => (
))}
); } function FeaturesDesktop() { return ( {({ selectedIndex }) => ( <> {features.map((feature, featureIndex) => ( {feature.name} ), }} isActive={featureIndex === selectedIndex} className="relative" /> ))}
{features.map((feature, featureIndex) => (
))}
)} ); } export function SecondaryFeatures() { return (

Advanced Management Tools

Elevate your infrastructure with tools that offer precise control, detailed monitoring, and enhanced security, ensuring seamless management and robust performance.

); }