"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 { useTranslations } from "next-intl"; import { Container } from "./Container"; interface Feature { name: React.ReactNode; summary: string; description: string; image: string; icon: React.ComponentType; } const features: Array = [ { name: "secondaryFeatures.templates", summary: "secondaryFeatures.templatesSummary", description: "secondaryFeatures.templatesDes", image: "/secondary/templates.png", icon: function ReportingIcon() { return ( <> ); }, }, { name: "secondaryFeatures.traefik", summary: "secondaryFeatures.traefikSummary", description: "secondaryFeatures.traefikDes", image: "/secondary/traefik.png", icon: function ReportingIcon() { return ( <> ); }, }, { name: "secondaryFeatures.users", summary: "secondaryFeatures.usersSummary", description: "secondaryFeatures.usersDes", image: "/secondary/users.png", icon: function InventoryIcon() { return ( <> ); }, }, { name: "secondaryFeatures.terminal", summary: "secondaryFeatures.terminalSummary", description: "secondaryFeatures.terminalDes", image: "/secondary/terminal.png", icon: function ContactsIcon() { return ( <> ); }, }, ]; function Feature({ feature, isActive, className, ...props }: React.ComponentPropsWithoutRef<"div"> & { feature: Feature; isActive: boolean; }) { const t = useTranslations("HomePage"); return (
{isActive && ( )}

{feature.name}

{t(feature.summary)}

{t(feature.description)}

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

{t("secondaryFeatures.title")}

{t("secondaryFeatures.des")}

); }