File size: 1,538 Bytes
297c500 c773750 297c500 c773750 297c500 f3219d4 c773750 f3219d4 297c500 c773750 297c500 c773750 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 |
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-6 sm:p-10 md: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:flex md:flex-wrap justify-between items-center gap-4 mb-8 md:mb-12">
{categories.map((category) => (
<Link
key={category.slug}
href={`/category/${category.slug}`}
className="text-base sm: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 className="absolute inset-x-0 bottom-0 text-center py-2 sm:py-4">
<h1 className="text-4xl sm:text-5xl md:text-6xl lg: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-48 h-48 sm:w-64 sm:h-64 md:w-96 md:h-96 bg-black rounded-full"></div>
</div>
</footer>
);
};
export default Footer;
|