123 lines
4.9 KiB
TypeScript
123 lines
4.9 KiB
TypeScript
import React, { useRef, useLayoutEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import gsap from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { Link } from 'react-router-dom';
|
|
import { blogPostData } from '../src/data/seoData';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const posts = blogPostData
|
|
.filter((post) => !post.redirect)
|
|
.slice(0, 3)
|
|
.map((post) => ({
|
|
image: post.image || '/images/blog/business-email-comparison-new.png',
|
|
category: post.category === 'authority' ? 'IT Insights' : 'Local Services',
|
|
title: post.h1,
|
|
excerpt: post.description,
|
|
href: `/${post.slug}`,
|
|
}));
|
|
|
|
const Blog: React.FC = () => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const imagesRef = useRef<(HTMLDivElement | null)[]>([]);
|
|
imagesRef.current = [];
|
|
|
|
useLayoutEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
imagesRef.current.forEach((imgWrapper) => {
|
|
if (!imgWrapper) return;
|
|
|
|
gsap.to(imgWrapper, {
|
|
yPercent: 30,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: imgWrapper.closest('article'),
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: true
|
|
}
|
|
});
|
|
});
|
|
}, containerRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<motion.section
|
|
ref={containerRef}
|
|
id="blog"
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="py-24 bg-background-light dark:bg-background-dark border-t border-gray-200 dark:border-white/10 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="flex justify-between items-end mb-12">
|
|
<div>
|
|
<span className="text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-500 mb-2 block">Latest Insights</span>
|
|
<h2 className="font-display text-3xl md:text-4xl text-gray-900 dark:text-white">
|
|
Stay updated <span className="text-gray-400 dark:text-gray-600">with our latest news and articles.</span>
|
|
</h2>
|
|
</div>
|
|
<Link
|
|
to="/blog"
|
|
className="hidden md:inline-flex items-center text-sm font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
|
>
|
|
View all posts <span className="material-symbols-outlined text-sm ml-1">arrow_forward</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{posts.map((post, i) => (
|
|
<motion.article
|
|
key={i}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
|
whileHover={{ y: -8 }}
|
|
className="group"
|
|
>
|
|
<Link to={post.href} className="block">
|
|
<div className="h-64 rounded-xl overflow-hidden mb-6 relative shadow-lg">
|
|
<div
|
|
ref={el => { if (el) imagesRef.current.push(el); }}
|
|
className="w-full h-[140%] -mt-[20%]"
|
|
>
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
loading="lazy"
|
|
decoding="async"
|
|
fetchPriority="low"
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors pointer-events-none"></div>
|
|
<div className="absolute top-4 right-4 bg-white/90 dark:bg-black/80 backdrop-blur text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider z-10">
|
|
Read
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 mb-3">
|
|
<span className="text-blue-600 dark:text-blue-400 font-medium">{post.category}</span>
|
|
</div>
|
|
<h3 className="text-xl font-display font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
|
{post.excerpt}
|
|
</p>
|
|
</Link>
|
|
</motion.article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Blog;
|