uldp.edu.vn/app/components/home/QuickLinksGrid.tsx

import Link from "next/link";

const LINKS = [
    {
        icon: "fa-solid fa-microscope",
        title: "Research Hub",
        desc: "Discover our ongoing projects, facilities, and interdisciplinary centers.",
        cta: "View Hub",
        href: "/research",
    },
    {
        icon: "fa-solid fa-book-open",
        title: "Publications",
        desc: "Access our extensive repository of peer-reviewed papers and journals.",
        cta: "Browse",
        href: "/publications",
    },
    {
        icon: "fa-solid fa-handshake",
        title: "Partnerships",
        desc: "Collaborate with us through industry, academic, and global networks.",
        cta: "Connect",
        href: "/partnerships",
    },
    {
        icon: "fa-solid fa-newspaper",
        title: "News & Events",
        desc: "Stay updated with our latest breakthroughs, seminars, and campus life.",
        cta: "Read More",
        href: "/blog",
    },
];

const QuickLinksGrid = () => {
    return (
        <section id="quick-links" className="quick-links">
            <div className="container">
                <div className="quick-links__header text-center">
                    <h2 className="quick-links__title">Explore Our Ecosystem</h2>
                    <p className="quick-links__subtitle">
                        Navigate through our core pillars of academic excellence and global partnerships.
                    </p>
                </div>

                <div className="quick-links__grid">
                    {LINKS.map((item, i) => (
                        <Link href={item.href} key={i} className="quick-links__card">
                            <div className="quick-links__icon-wrap">
                                <i className={item.icon}></i>
                            </div>
                            <h3 className="quick-links__card-title">{item.title}</h3>
                            <p className="quick-links__card-desc">{item.desc}</p>
                            <div className="quick-links__card-footer">
                                <span className="quick-links__cta">{item.cta}</span>
                                <span className="quick-links__arrow">
                                    <i className="fa-solid fa-arrow-right"></i>
                                </span>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default QuickLinksGrid;