'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' import { useTranslations } from 'next-intl' 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')}

) }