File size: 1,492 Bytes
297c500 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import React from 'react';
import Link from 'next/link';
import { categories } from '../lib/categories';
const Footer: React.FC = () => {
return (
<footer className="bg-emerald-400/80 p-20 relative overflow-hidden rounded-xl">
<div className="max-w-7xl mx-auto relative z-10">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
{categories.map((category) => (
<div key={category.slug} className="text-center sm:text-left">
<Link
href={`/category/${category.slug}`}
className="text-lg font-bold text-emerald-800 hover:text-emerald-900 transition-colors duration-300 ease-in-out relative group"
>
{category.title}
<span className="absolute left-0 right-0 bottom-0 h-0.5 bg-emerald-800 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span>
</Link>
</div>
))}
</div>
</div>
<div className="absolute inset-x-0 bottom-0 text-center py-4">
<h1 className="text-6xl md:text-8xl font-black text-red-500 tracking-tighter transform -skew-x-6">
TRANSFORMERS.JS
</h1>
</div>
<div className="absolute inset-0 flex items-center justify-center opacity-5">
<div className="w-96 h-96 bg-black rounded-full"></div>
</div>
</footer>
);
};
export default Footer;
|