133 lines
4.8 KiB
TypeScript
133 lines
4.8 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { MessageSquare, BookOpen, LifeBuoy, ExternalLink } from 'lucide-react'
|
|
|
|
interface WorkspaceItem {
|
|
id: string
|
|
title: string
|
|
subtitle: string
|
|
hoverText: string
|
|
icon: React.ElementType
|
|
link: string
|
|
}
|
|
|
|
const workspaceItems: WorkspaceItem[] = [
|
|
{
|
|
id: 'zulip',
|
|
title: 'Zulip Chat',
|
|
subtitle: 'Treten Sie unserem Partner-Chat bei!',
|
|
hoverText: 'Tauschen Sie sich direkt und unkompliziert mit anderen CASPOS Partnern aus.',
|
|
icon: MessageSquare,
|
|
link: 'https://caspos.zulipchat.com'
|
|
},
|
|
{
|
|
id: 'wiki',
|
|
title: 'CASPOS Wiki',
|
|
subtitle: 'Ihr Wissens-Portal...',
|
|
hoverText: '...für die gesamte CASPOS Produktfamilie. Hier finden Sie alle technischen Dokumentationen.',
|
|
icon: BookOpen,
|
|
link: 'https://wiki.caspos.de'
|
|
},
|
|
{
|
|
id: 'support',
|
|
title: 'Support Portal',
|
|
subtitle: 'Sie haben ein technisches Problem?',
|
|
hoverText: 'Erstellen Sie jetzt ein Ticket in der CASPOS, damit sich unsere Experten darum kümmern.',
|
|
icon: LifeBuoy,
|
|
link: 'https://support.caspos.de'
|
|
}
|
|
]
|
|
|
|
export function WorkspaceZentrale() {
|
|
const [hoveredId, setHoveredId] = useState<string | null>(null)
|
|
|
|
return (
|
|
<section className="w-full py-12 px-4 relative z-10">
|
|
<div className="container max-w-6xl mx-auto space-y-6">
|
|
<div className="text-center space-y-2">
|
|
<h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
|
|
Workspace Zentrale
|
|
</h2>
|
|
</div>
|
|
|
|
{/* 3-Spalten Grid mit fester Kartenhöhe */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{workspaceItems.map((item) => {
|
|
const Icon = item.icon
|
|
const isHovered = hoveredId === item.id
|
|
|
|
return (
|
|
<motion.a
|
|
key={item.id}
|
|
href={item.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
whileHover={{ y: -4 }}
|
|
onMouseEnter={() => setHoveredId(item.id)}
|
|
onMouseLeave={() => setHoveredId(null)}
|
|
className={`group relative p-6 rounded-2xl border transition-all duration-300 backdrop-blur-md flex flex-col justify-between h-[210px] overflow-hidden cursor-pointer ${
|
|
isHovered
|
|
? 'border-sky-500 bg-slate-900/90 shadow-[0_0_25px_rgba(14,165,233,0.2)]'
|
|
: 'border-slate-800 bg-slate-900/60'
|
|
}`}
|
|
>
|
|
<div className="space-y-3">
|
|
{/* Header: Icon & Link */}
|
|
<div className="flex items-center justify-between">
|
|
<div
|
|
className={`p-3 rounded-xl border transition-all duration-300 ${
|
|
isHovered
|
|
? 'bg-sky-500/20 border-sky-500/50 text-sky-300'
|
|
: 'bg-slate-800/60 border-slate-700/50 text-slate-400'
|
|
}`}
|
|
>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<ExternalLink
|
|
className={`w-4 h-4 transition-all duration-300 ${
|
|
isHovered
|
|
? 'text-sky-400 translate-x-0.5 -translate-y-0.5'
|
|
: 'text-slate-600'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-lg font-bold text-white group-hover:text-sky-300 transition-colors">
|
|
{item.title}
|
|
</h3>
|
|
|
|
{/* Subtitle / Hover-Text Überblendung ohne Höhenänderung */}
|
|
<div className="relative h-[48px] overflow-hidden">
|
|
<p
|
|
className={`text-sm text-slate-300 font-medium transition-all duration-300 absolute inset-0 ${
|
|
isHovered ? 'opacity-0 translate-y-[-8px]' : 'opacity-100 translate-y-0'
|
|
}`}
|
|
>
|
|
{item.subtitle}
|
|
</p>
|
|
<p
|
|
className={`text-xs text-slate-400 leading-relaxed transition-all duration-300 absolute inset-0 ${
|
|
isHovered ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-[8px]'
|
|
}`}
|
|
>
|
|
{item.hoverText}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subtile Hover-Linie unten */}
|
|
<div className={`w-full h-0.5 rounded-full transition-all duration-300 ${
|
|
isHovered ? 'bg-sky-500/80 shadow-[0_0_8px_rgba(14,165,233,0.8)]' : 'bg-transparent'
|
|
}`} />
|
|
</motion.a>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|