@jhits/dashboard 0.0.1

package/src/components/dashboard/Topbar.tsx

@@ -0,0 +1,363 @@
+"use client";
+import { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { useLocale } from 'next-intl';
+import { useRouter, usePathname, Link } from '@/i18n/navigation';
+import { routing } from '@/i18n/routing';
+import { Moon, Sun, Bell, User, Settings, ShieldCheck, Languages, ChevronRight, LogOut, Check, X, Loader2, ExternalLink, Home } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import { signOut, useSession } from 'next-auth/react';
+import { useWebsite } from '../../lib/website-context';
+import Image from 'next/image';
+
+/* --- RESPONSIVE MODAL WRAPPER --- */
+function TopbarModal({ children, title, className = "", onClose }: { children: React.ReactNode; title?: string; className?: string; onClose?: () => void }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setMounted(true);
+        }, 0);
+    }, []);
+
+    if (!mounted) return null;
+
+    const modalContent = (
+        <>
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                onClick={onClose}
+                className="fixed inset-0 bg-black/40 backdrop-blur-md z-9998 lg:hidden"
+            />
+
+            <motion.div
+                initial={{ opacity: 0, y: 10, scale: 0.98 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 10, scale: 0.98 }}
+                onClick={(e) => e.stopPropagation()}
+                className={`
+                    fixed top-22 left-4 right-4 mx-auto w-[calc(100%-2rem)] z-9999 p-5
+                    lg:absolute lg:top-full lg:right-0 lg:left-auto lg:mt-2 lg:w-72 lg:mx-0 lg:z-50 lg:p-4
+                    bg-dashboard-card border border-dashboard-border
+                    rounded-3xl shadow-2xl h-fit ${className}
+                `}
+            >
+                <div className="flex justify-between items-center mb-4 lg:mb-3">
+                    {title && (
+                        <h4 className="text-[10px] uppercase tracking-[0.2em] font-bold text-neutral-500 dark:text-neutral-400 px-1">
+                            {title}
+                        </h4>
+                    )}
+                    <button
+                        onClick={onClose}
+                        className="lg:hidden p-3 -mr-2 text-neutral-400 active:scale-90 transition-all"
+                    >
+                        <X className="size-6" />
+                    </button>
+                </div>
+                <div className="h-fit">
+                    {children}
+                </div>
+            </motion.div>
+        </>
+    );
+
+    if (typeof window !== 'undefined' && window.innerWidth < 1024) {
+        return createPortal(modalContent, document.body);
+    }
+
+    return modalContent;
+}
+
+/* --- SUB-COMPONENT: NOTIFICATIONS --- */
+function NotificationMenu({ active, onToggle, onClose }: { active: boolean, onToggle: () => void, onClose: () => void }) {
+    const [notifications] = useState([
+        { id: 1, type: 'alert', title: 'Security Alert', message: 'New login from Stockholm, SE', time: '2m ago', unread: true },
+        { id: 2, type: 'update', title: 'System Update', message: 'V2.1 deployment successful.', time: '1h ago', unread: true },
+        { id: 3, type: 'success', title: 'Payment Received', message: 'Invoice #4432 has been paid.', time: '5h ago', unread: false },
+        { id: 4, type: 'message', title: 'Support Chat', message: 'Agent Sarah replied to your ticket.', time: '1d ago', unread: true },
+    ]);
+
+    const unreadCount = notifications.filter(n => n.unread).length;
+
+    return (
+        <div className="relative py-4">
+            <button
+                onClick={onToggle}
+                className="relative size-10 lg:size-10 flex items-center justify-center bg-dashboard-bg rounded-xl hover:bg-dashboard-card active:scale-95 transition-all"
+            >
+                <Bell className="size-5 lg:size-4 text-neutral-600 dark:text-neutral-200" />
+                {unreadCount > 0 && (
+                    <span className="absolute top-2.5 right-2.5 flex h-2.5 w-2.5">
+                        <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary border-2 border-dashboard-sidebar"></span>
+                    </span>
+                )}
+            </button>
+
+            <AnimatePresence>
+                {active && (
+                    <TopbarModal title="Notifications" onClose={onClose} className="lg:w-80">
+                        {/* THE FIX: We wrap the content in a flex container with a fixed height */}
+                        <div className="flex flex-col max-h-[60dvh] lg:max-h-[400px]">
+
+                            {/* SCROLLABLE AREA: Just the list */}
+                            <div className="flex-1 overflow-y-auto pr-1 custom-scrollbar flex flex-col gap-2 p-1">
+                                {notifications.map((n) => (
+                                    <div
+                                        key={n.id}
+                                        className={`p-4 lg:p-3 rounded-2xl border transition-all active:scale-[0.98] ${n.unread
+                                            ? 'bg-dashboard-card border-primary'
+                                            : 'bg-transparent border-dashboard-border opacity-60'
+                                            }`}
+                                    >
+                                        <div className="flex justify-between items-center mb-1">
+                                            <span className="text-[8px] font-bold uppercase tracking-widest text-primary">{n.type}</span>
+                                            <span className="text-[8px] text-neutral-500 dark:text-neutral-400">{n.time}</span>
+                                        </div>
+                                        <p className="text-xs font-bold text-dashboard-text uppercase">{n.title}</p>
+                                        <p className="text-[10px] text-neutral-600 dark:text-neutral-400 mt-0.5 line-clamp-1">{n.message}</p>
+                                    </div>
+                                ))}
+                            </div>
+
+                            {/* INTEGRATED OPTION FOOTER */}
+                            <div className="mt-2 pt-2 border-t border-dashboard-border">
+                                <button className="w-full group flex cursor-pointer items-center justify-between px-4 py-3 rounded-xl hover:bg-dashboard-bg transition-all active:scale-[0.98]">
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-neutral-500 group-hover:text-primary transition-colors">
+                                        View all activity
+                                    </span>
+                                    <ChevronRight className="size-3 text-neutral-400 group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
+                                </button>
+                            </div>
+
+                        </div>
+                    </TopbarModal>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+/* --- SUB-COMPONENT: USER & LANGUAGE MODAL --- */
+function UserMenu({ active, onToggle, onClose, locale, router, pathname }: { active: boolean, onToggle: () => void, onClose: () => void, locale: string, router: ReturnType<typeof useRouter>, pathname: string }) {
+    const { data: session } = useSession();
+    const [showLangSelector, setShowLangSelector] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (!active) {
+            const timer = setTimeout(() => setShowLangSelector(false), 300);
+            return () => clearTimeout(timer);
+        }
+    }, [active]);
+
+    const handleLogout = async () => {
+        try {
+            setIsLoading(true);
+            await signOut({ callbackUrl: '/', redirect: true });
+        } catch (error) {
+            console.error('Logout error:', error);
+            setIsLoading(false);
+        }
+    };
+
+    const userName = session?.user?.name || "User";
+    const userRole = (session?.user as { role: string })?.role || "Member";
+    const userImage = session?.user?.image;
+    const initials = userName.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || "??";
+
+    const menuItems = [
+        { icon: User, label: 'Profile', href: '/dashboard/profile' },
+        { icon: ShieldCheck, label: 'Security', href: '/dashboard/security' },
+        { icon: Settings, label: 'Preferences', href: '/dashboard/preferences' }
+    ];
+
+    return (
+        <div className="relative py-4 pl-4 border-l border-dashboard-border">
+            <div onClick={onToggle} className="flex items-center gap-3 cursor-pointer group active:scale-95 transition-transform">
+                <div className="flex-col items-end hidden sm:flex text-right">
+                    <span className="text-xs font-bold uppercase text-dashboard-text">{userName}</span>
+                    <span className="text-[10px] text-primary font-medium uppercase italic tracking-tighter">{userRole}</span>
+                </div>
+                <div className="size-10 rounded-xl bg-primary flex items-center justify-center font-bold text-white shadow-lg shadow-primary/20 overflow-hidden relative">
+                    {userImage ? <Image src={userImage} alt="Avatar" className="w-full h-full object-cover" width={40} height={40} /> : initials}
+                </div>
+            </div>
+
+            <AnimatePresence mode="wait">
+                {active && (
+                    <TopbarModal title={showLangSelector ? "Language" : "Account"} onClose={onClose} className="lg:w-64">
+                        <div className="overflow-hidden">
+                            <AnimatePresence mode="wait" initial={false}>
+                                {!showLangSelector ? (
+                                    <motion.div key="main" initial={{ x: -10, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: -10, opacity: 0 }} className="flex flex-col gap-1">
+                                        <div className="flex items-center gap-4 p-4 mb-2 bg-dashboard-bg rounded-2xl">
+                                            <div className="size-12 rounded-xl bg-primary flex items-center justify-center font-bold text-white overflow-hidden shadow-inner">
+                                                {userImage ? <Image src={userImage} alt="Avatar" className="w-full h-full object-cover" width={48} height={48} /> : initials}
+                                            </div>
+                                            <div className="flex flex-col">
+                                                <span className="text-sm font-black uppercase text-dashboard-text truncate max-w-[120px]">
+                                                    {userName}
+                                                </span>
+                                                <span className="text-[11px] text-primary font-bold uppercase italic">{userRole}</span>
+                                            </div>
+                                        </div>
+
+                                        {menuItems.map((item) => (
+                                            <Link
+                                                href={item.href as Parameters<typeof Link>[0]['href']}
+                                                key={item.label}
+                                                onClick={onClose}
+                                                className="flex items-center gap-3 px-4 py-4 lg:px-3 lg:py-2 rounded-xl text-[13px] lg:text-xs font-bold uppercase text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-700 active:scale-[0.98] transition-all group"
+                                            >
+                                                <item.icon className="size-5 lg:size-3.5 text-neutral-500 dark:text-neutral-400 group-hover:text-primary transition-colors" />
+                                                {item.label}
+                                            </Link>
+                                        ))}
+
+                                        <button onClick={(e) => { e.stopPropagation(); setShowLangSelector(true); }} className="flex items-center justify-between px-4 py-4 lg:px-3 lg:py-2 rounded-xl text-[13px] lg:text-xs font-bold uppercase text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-700 active:scale-[0.98] transition-all">
+                                            <div className="flex items-center gap-3">
+                                                <Languages className="size-5 lg:size-3.5 text-neutral-500 dark:text-neutral-400" />
+                                                Language
+                                            </div>
+                                            <span className="text-[10px] font-bold text-neutral-400 flex gap-2 items-center">
+                                                {locale} <ChevronRight className="size-[13px]" />
+                                            </span>
+                                        </button>
+
+                                        <hr className="my-1 border-dashboard-border" />
+
+                                        {isLoading ? (
+                                            <div className="py-2 flex items-center justify-center">
+                                                <Loader2 className="size-5 animate-spin text-primary" />
+                                            </div>
+                                        ) : (
+                                            <button className="flex items-center gap-3 px-4 py-4 lg:px-3 lg:py-2 rounded-xl text-[13px] lg:text-xs font-bold uppercase text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20 transition-all cursor-pointer" onClick={handleLogout}>
+                                                <LogOut className="size-5 lg:size-3.5" /> Sign Out
+                                            </button>
+                                        )}
+                                    </motion.div>
+                                ) : (
+                                    <motion.div key="lang" initial={{ x: 10, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: 10, opacity: 0 }} className="space-y-1">
+                                        {routing.locales.map((loc) => (
+                                            <button
+                                                key={loc}
+                                                onClick={() => {
+                                                    router.replace(pathname as Parameters<typeof router.replace>[0], { locale: loc });
+                                                    onClose();
+                                                }}
+                                                className="w-full flex items-center justify-between px-4 py-4 lg:px-3 lg:py-2.5 rounded-xl text-[13px] lg:text-xs font-bold uppercase transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700 active:scale-[0.98]"
+                                            >
+                                                <span className={locale === loc ? 'text-primary' : 'text-neutral-700 dark:text-neutral-200'}>{loc}</span>
+                                                {locale === loc && <Check className="size-4 text-primary" />}
+                                            </button>
+                                        ))}
+                                        <button onClick={(e) => { e.stopPropagation(); setShowLangSelector(false); }} className="w-full mt-2 py-3 lg:py-2 text-[10px] font-bold uppercase text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-200 transition-colors">
+                                            Back
+                                        </button>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    </TopbarModal>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+export default function Topbar() {
+    const { theme, setTheme, resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+    const locale = useLocale();
+    const router = useRouter();
+    const pathname = usePathname();
+    const [activeModal, setActiveModal] = useState<string | null>(null);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setMounted(true);
+        }, 0);
+    }, []);
+
+    /**
+     * LOGIC:
+     * If we are in 'system' mode, we look at 'resolvedTheme' to see what's actually showing.
+     * If it's showing Dark (via system), the first click should take us to manual Light.
+     * If it's showing Light (via system), the first click should take us to manual Dark.
+     */
+    const handleThemeToggle = () => {
+        if (theme === 'system') {
+            // Move to the opposite of what the system is currently rendering
+            setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+        } else {
+            // Standard binary toggle if already in manual mode
+            setTheme(theme === 'dark' ? 'light' : 'dark');
+        }
+    };
+
+    const handleToggle = (modalName: string) => setActiveModal(prev => prev === modalName ? null : modalName);
+
+    const website = useWebsite();
+
+    return (
+        <header className="h-20 bg-dashboard-sidebar border-b border-dashboard-border flex items-center px-4 sm:px-8 justify-between sticky top-0 z-40 select-none">
+            <div className="flex items-center gap-4 ml-12 lg:ml-0">
+                <div className="hidden xs:block h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500 animate-pulse" />
+                <div className="flex items-center gap-3">
+                    <div className="text-[11px] lg:text-xs uppercase tracking-wider font-bold text-dashboard-text">
+                        <span className="text-primary italic">{website.name}</span>
+                        {website.tagline && (
+                            <>
+                                <span className="text-neutral-400 dark:text-neutral-500 mx-1">/</span>
+                                <span className="text-neutral-600 dark:text-neutral-400">{website.tagline}</span>
+                            </>
+                        )}
+                    </div>
+                    <a 
+                        href={website.homeUrl}
+                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-dashboard-bg hover:bg-dashboard-card transition-colors group"
+                        title={`Go back to ${website.name}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Home className="size-3.5 text-neutral-600 dark:text-neutral-400 group-hover:text-primary transition-colors" />
+                        <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-600 dark:text-neutral-400 group-hover:text-primary transition-colors hidden sm:inline">
+                            Website
+                        </span>
+                    </a>
+                </div>
+            </div>
+
+            <div className="flex items-center gap-1 sm:gap-2">
+                <div className="relative"
+                    onMouseEnter={() => window.innerWidth >= 1024 && setActiveModal('notif')}
+                    onMouseLeave={() => window.innerWidth >= 1024 && setActiveModal(null)}>
+                    <NotificationMenu active={activeModal === 'notif'} onToggle={() => handleToggle('notif')} onClose={() => setActiveModal(null)} />
+                </div>
+
+                {/* THE SYNCED THEME SWITCH */}
+                <button
+                    onClick={handleThemeToggle}
+                    className="size-10 flex items-center justify-center bg-dashboard-bg border border-dashboard-border rounded-xl hover:bg-dashboard-card active:scale-95 transition-all mx-1 group"
+                >
+                    {mounted && (
+                        resolvedTheme === 'dark' ? (
+                            <Sun className="size-4 text-yellow-500 group-hover:rotate-45 transition-transform" />
+                        ) : (
+                            <Moon className="size-4 text-neutral-600 group-hover:-rotate-12 transition-transform" />
+                        )
+                    )}
+                </button>
+
+                <div className="relative"
+                    onMouseEnter={() => window.innerWidth >= 1024 && setActiveModal('user')}
+                    onMouseLeave={() => window.innerWidth >= 1024 && setActiveModal(null)}>
+                    <UserMenu active={activeModal === 'user'} onToggle={() => handleToggle('user')} onClose={() => setActiveModal(null)} locale={locale} router={router} pathname={pathname} />
+                </div>
+            </div>
+        </header>
+    );
+}

package/src/components/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { ArrowRight, Sparkles, BarChart3, PenTool, Mail } from 'lucide-react';
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white selection:bg-primary/20 overflow-hidden">
+
+      {/* 1. Navigation */}
+      <nav className="fixed top-0 w-full z-50 bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-900">
+        <div className="flex items-center justify-between px-6 lg:px-12 py-5 max-w-7xl mx-auto">
+          <div className="text-2xl font-black tracking-tighter text-primary italic">
+            JHITS<span className="text-neutral-950 dark:text-white">.</span>
+          </div>
+
+          <div className="hidden md:flex items-center gap-10 text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500">
+            <a href="#features" className="hover:text-primary transition-colors">Features</a>
+            <a href="#about" className="hover:text-primary transition-colors">Platform</a>
+            <a href="#pricing" className="hover:text-primary transition-colors">Pricing</a>
+          </div>
+
+          <Link
+            href="/login"
+            className="bg-neutral-950 dark:bg-white dark:text-neutral-950 text-white px-6 py-2.5 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:scale-105 transition-all shadow-xl shadow-neutral-200 dark:shadow-none"
+          >
+            Open Dashboard
+          </Link>
+        </div>
+      </nav>
+
+      {/* 2. Hero Section */}
+      <main className="relative pt-40 pb-20 lg:pt-56 lg:pb-32 px-8 max-w-7xl mx-auto text-center">
+        {/* Background Decor */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10">
+          <div className="absolute top-20 left-1/4 size-96 bg-primary/10 rounded-full blur-[120px] animate-pulse" />
+          <div className="absolute bottom-0 right-1/4 size-96 bg-blue-400/10 rounded-full blur-[120px]" />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 font-bold text-[10px] uppercase tracking-[0.2em] mb-8"
+        >
+          <Sparkles className="size-3 text-primary" />
+          <span>Next-Gen SaaS Engine</span>
+        </motion.div>
+
+        <motion.h1
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="text-5xl md:text-8xl font-black tracking-tight text-neutral-950 dark:text-white mb-8 leading-[0.9]"
+        >
+          The Modular <br />
+          <span className="text-primary italic">Engine.</span>
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="text-lg md:text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto mb-12 leading-relaxed font-medium"
+        >
+          Manage content, analyze real-time data, and scale your
+          digital presence with our unified <span className="text-neutral-950 dark:text-white font-bold underline decoration-primary underline-offset-4">Platform v2.0</span>.
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="flex flex-col sm:flex-row items-center justify-center gap-4"
+        >
+          <Link href="/login" className="group w-full sm:w-auto bg-primary text-white px-10 py-5 rounded-4xl font-black text-xs uppercase tracking-widest hover:scale-105 active:scale-95 transition-all shadow-2xl shadow-primary/30 flex items-center justify-center gap-2">
+            Get Started Free
+            <ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
+          </Link>
+          <button className="w-full sm:w-auto px-10 py-5 rounded-4xl border-2 border-neutral-100 dark:border-neutral-900 font-black text-xs uppercase tracking-widest hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-all">
+            Documentation
+          </button>
+        </motion.div>
+      </main>
+
+      {/* 3. Features Preview */}
+      <section id="features" className="py-24 px-8 max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-4">
+          <div className="text-left">
+            <h2 className="text-4xl font-black text-neutral-950 dark:text-white uppercase italic tracking-tighter">Integrated Modules</h2>
+            <p className="text-neutral-500 font-medium">Everything you need, nothing you don&apos;t.</p>
+          </div>
+          <div className="h-[2px] flex-1 bg-neutral-100 dark:bg-neutral-900 mx-8 hidden md:block" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <FeatureCard
+            icon={BarChart3}
+            title="Statistics"
+            desc="Advanced metrics and user behavior tracking in real-time."
+          />
+          <FeatureCard
+            icon={PenTool}
+            title="Blog Engine"
+            desc="Modular content management with high-performance SEO."
+          />
+          <FeatureCard
+            icon={Mail}
+            title="Newsletter"
+            desc="Segmented user lists and automated delivery pipelines."
+          />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function FeatureCard({ title, desc, icon: Icon }: { title: string; desc: string; icon: React.ElementType }) {
+  return (
+    <div className="group p-10 bg-white dark:bg-neutral-900 rounded-[2.5rem] border border-neutral-100 dark:border-neutral-800 shadow-sm hover:shadow-2xl hover:shadow-primary/5 hover:border-primary/30 transition-all duration-500">
+      <div className="w-14 h-14 bg-neutral-50 dark:bg-neutral-800 rounded-2xl mb-8 flex items-center justify-center text-neutral-400 group-hover:bg-primary group-hover:text-white transition-all duration-500 shadow-inner">
+        <Icon className="size-6" />
+      </div>
+      <h3 className="text-xl font-black mb-4 uppercase tracking-tight text-neutral-950 dark:text-white">{title}</h3>
+      <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed text-sm font-medium">{desc}</p>
+      <div className="mt-8 flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-opacity">
+        Learn More <ArrowRight className="size-3" />
+      </div>
+    </div>
+  );
+}