343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
import SEO from '../components/SEO';
|
|
import { useEffect, useRef } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { Calendar, Clock, ArrowRight, User } from 'lucide-react';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const posts = [
|
|
{
|
|
id: 1,
|
|
slug: 'ransomware-como-proteger-sua-empresa',
|
|
titulo: 'Ransomware: Como proteger sua empresa em 2024',
|
|
resumo: 'Descubra as melhores práticas para proteger sua empresa contra ataques de ransomware e garantir a continuidade do negócio.',
|
|
imagem: '/hero-dashboard.jpg',
|
|
categoria: 'Segurança',
|
|
autor: 'Carlos Silva',
|
|
data: '15 Jan 2024',
|
|
tempoLeitura: '8 min',
|
|
destaque: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
slug: 'cloud-vs-on-premise-qual-escolher',
|
|
titulo: 'Cloud vs On-Premise: Qual escolher para sua empresa?',
|
|
resumo: 'Análise completa das vantagens e desvantagens de cada modelo para ajudar na decisão da sua infraestrutura de TI.',
|
|
imagem: '/service-cloud.png',
|
|
categoria: 'Cloud',
|
|
autor: 'Ana Paula Mendes',
|
|
data: '10 Jan 2024',
|
|
tempoLeitura: '6 min',
|
|
destaque: false,
|
|
},
|
|
{
|
|
id: 3,
|
|
slug: 'lgpd-o-que-mudou-em-2024',
|
|
titulo: 'LGPD: O que mudou em 2024 e como se adequar',
|
|
resumo: 'Entenda as novas regulamentações da LGPD e como garantir a conformidade da sua empresa com a legislação.',
|
|
imagem: '/service-security.png',
|
|
categoria: 'Compliance',
|
|
autor: 'Mariana Costa',
|
|
data: '05 Jan 2024',
|
|
tempoLeitura: '5 min',
|
|
destaque: false,
|
|
},
|
|
{
|
|
id: 4,
|
|
slug: '5-sinais-de-que-sua-ti-precisa-de-ajuda',
|
|
titulo: '5 sinais de que sua TI precisa de ajuda urgente',
|
|
resumo: 'Identifique os principais indicadores de que sua infraestrutura de TI está comprometida e precise de atenção.',
|
|
imagem: '/service-ti.png',
|
|
categoria: 'TI Gerenciada',
|
|
autor: 'Ricardo Oliveira',
|
|
data: '28 Dez 2023',
|
|
tempoLeitura: '4 min',
|
|
destaque: false,
|
|
},
|
|
{
|
|
id: 5,
|
|
slug: 'backup-3-2-1-regra-de-ouro',
|
|
titulo: 'Backup 3-2-1: A regra de ouro da proteção de dados',
|
|
resumo: 'Aprenda a estratégia de backup mais recomendada por especialistas e como implementá-la na sua empresa.',
|
|
imagem: '/service-support.png',
|
|
categoria: 'Backup',
|
|
autor: 'Carlos Silva',
|
|
data: '20 Dez 2023',
|
|
tempoLeitura: '7 min',
|
|
destaque: false,
|
|
},
|
|
{
|
|
id: 6,
|
|
slug: 'microsoft-365-vs-google-workspace',
|
|
titulo: 'Microsoft 365 vs Google Workspace: Comparativo 2024',
|
|
resumo: 'Compare as duas principais suites de produtividade e escolha a melhor para sua equipe.',
|
|
imagem: '/hero-dashboard.jpg',
|
|
categoria: 'Produtividade',
|
|
autor: 'Ana Paula Mendes',
|
|
data: '15 Dez 2023',
|
|
tempoLeitura: '6 min',
|
|
destaque: false,
|
|
},
|
|
];
|
|
|
|
const categorias = ['Todas', 'Segurança', 'Cloud', 'TI Gerenciada', 'Backup', 'Compliance', 'Produtividade'];
|
|
|
|
const Blog = () => {
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const postsRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
const heroItems = heroRef.current?.querySelectorAll('.animate-item');
|
|
if (heroItems && heroItems.length > 0) {
|
|
gsap.fromTo(
|
|
heroItems,
|
|
{ y: 50, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
stagger: 0.1,
|
|
ease: 'expo.out',
|
|
}
|
|
);
|
|
}
|
|
|
|
const postCards = postsRef.current?.querySelectorAll('.post-card');
|
|
if (postCards && postCards.length > 0) {
|
|
gsap.fromTo(
|
|
postCards,
|
|
{ y: 50, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.6,
|
|
stagger: 0.1,
|
|
ease: 'back.out(1.7)',
|
|
scrollTrigger: {
|
|
trigger: postsRef.current,
|
|
start: 'top 80%',
|
|
},
|
|
}
|
|
);
|
|
}
|
|
});
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
const postDestaque = posts.find(p => p.destaque);
|
|
const outrosPosts = posts.filter(p => !p.destaque);
|
|
|
|
return (
|
|
<div className="bg-[#0e0e0e] min-h-screen">
|
|
<SEO
|
|
title="Blog de Tecnologia"
|
|
description="Artigos e novidades sobre TI, seguranca da informacao, cloud computing e tecnologia para empresas."
|
|
/>
|
|
{/* Hero */}
|
|
<section ref={heroRef} className="pt-32 pb-20 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
<div className="text-center max-w-3xl mx-auto">
|
|
<span className="animate-item inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-6 border border-[#cbf400]/20">
|
|
Blog
|
|
</span>
|
|
|
|
<h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">
|
|
Conteúdo sobre <span className="text-gradient">Tecnologia</span>
|
|
</h1>
|
|
|
|
<p className="animate-item text-xl text-gray-400">
|
|
Artigos, guias e novidades sobre TI, segurança, cloud e muito mais.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Filtros */}
|
|
<section className="py-8 bg-[#1a1a1a] border-y border-white/5">
|
|
<div className="container-custom">
|
|
<div className="flex flex-wrap justify-center gap-3">
|
|
{categorias.map((cat, index) => (
|
|
<button
|
|
key={index}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
|
index === 0
|
|
? 'bg-[#cbf400] text-[#0e0e0e]'
|
|
: 'bg-[#0e0e0e] text-gray-400 hover:text-white border border-white/5'
|
|
}`}
|
|
>
|
|
{cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Post em Destaque */}
|
|
{postDestaque && (
|
|
<section className="py-12">
|
|
<div className="container-custom">
|
|
<Link
|
|
to={`/blog/${postDestaque.slug}`}
|
|
className="group block bg-[#1a1a1a] rounded-2xl overflow-hidden border border-white/5 hover:border-[#cbf400]/30 transition-colors"
|
|
>
|
|
<div className="grid lg:grid-cols-2">
|
|
<div className="aspect-video lg:aspect-auto overflow-hidden">
|
|
<img
|
|
src={postDestaque.imagem}
|
|
alt={postDestaque.titulo}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
<div className="p-8 lg:p-12 flex flex-col justify-center">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<span className="px-3 py-1 bg-[#cbf400]/10 text-[#cbf400] text-sm font-medium rounded-full">
|
|
{postDestaque.categoria}
|
|
</span>
|
|
<span className="text-gray-500 text-sm flex items-center gap-1">
|
|
<Calendar className="w-4 h-4" />
|
|
{postDestaque.data}
|
|
</span>
|
|
</div>
|
|
|
|
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4 group-hover:text-[#cbf400] transition-colors">
|
|
{postDestaque.titulo}
|
|
</h2>
|
|
|
|
<p className="text-gray-400 mb-6">
|
|
{postDestaque.resumo}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-[#cbf400]/10 flex items-center justify-center">
|
|
<User className="w-5 h-5 text-[#cbf400]" />
|
|
</div>
|
|
<div>
|
|
<div className="text-white text-sm font-medium">{postDestaque.autor}</div>
|
|
<div className="text-gray-500 text-xs flex items-center gap-1">
|
|
<Clock className="w-3 h-3" />
|
|
{postDestaque.tempoLeitura} de leitura
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span className="text-[#cbf400] flex items-center gap-2 group-hover:gap-3 transition-all">
|
|
Ler artigo
|
|
<ArrowRight className="w-5 h-5" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Lista de Posts */}
|
|
<section ref={postsRef} className="py-20">
|
|
<div className="container-custom">
|
|
<h2 className="text-2xl font-bold text-white mb-8">Artigos recentes</h2>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{outrosPosts.map((post) => (
|
|
<Link
|
|
key={post.id}
|
|
to={`/blog/${post.slug}`}
|
|
className="post-card group bg-[#1a1a1a] rounded-2xl overflow-hidden border border-white/5 hover:border-[#cbf400]/30 transition-colors"
|
|
>
|
|
<div className="aspect-video overflow-hidden">
|
|
<img
|
|
src={post.imagem}
|
|
alt={post.titulo}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className="px-2 py-1 bg-[#cbf400]/10 text-[#cbf400] text-xs font-medium rounded">
|
|
{post.categoria}
|
|
</span>
|
|
<span className="text-gray-500 text-xs">{post.data}</span>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-bold text-white mb-2 group-hover:text-[#cbf400] transition-colors line-clamp-2">
|
|
{post.titulo}
|
|
</h3>
|
|
|
|
<p className="text-gray-400 text-sm line-clamp-2 mb-4">
|
|
{post.resumo}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-500 flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
{post.tempoLeitura}
|
|
</span>
|
|
<span className="text-[#cbf400] flex items-center gap-1">
|
|
Ler
|
|
<ArrowRight className="w-4 h-4" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Paginação */}
|
|
<div className="flex justify-center gap-2 mt-12">
|
|
<button className="w-10 h-10 rounded-lg bg-[#cbf400] text-[#0e0e0e] font-bold">1</button>
|
|
<button className="w-10 h-10 rounded-lg bg-[#1a1a1a] text-gray-400 hover:text-white border border-white/5">2</button>
|
|
<button className="w-10 h-10 rounded-lg bg-[#1a1a1a] text-gray-400 hover:text-white border border-white/5">3</button>
|
|
<span className="w-10 h-10 flex items-center justify-center text-gray-500">...</span>
|
|
<button className="w-10 h-10 rounded-lg bg-[#1a1a1a] text-gray-400 hover:text-white border border-white/5 flex items-center justify-center">
|
|
<ArrowRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter */}
|
|
<section className="py-20 bg-[#1a1a1a]">
|
|
<div className="container-custom">
|
|
<div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-12 text-center border border-[#cbf400]/20">
|
|
<h2 className="text-3xl font-black text-white mb-4">
|
|
Receba novidades no seu email
|
|
</h2>
|
|
<p className="text-gray-400 mb-8 max-w-xl mx-auto">
|
|
Inscreva-se na nossa newsletter e receba os melhores conteúdos sobre tecnologia
|
|
diretamente na sua caixa de entrada.
|
|
</p>
|
|
|
|
<form className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="Seu melhor email"
|
|
className="flex-1 px-4 py-3 rounded-lg bg-[#0e0e0e] border border-white/10 text-white focus:border-[#cbf400] focus:ring-2 focus:ring-[#cbf400]/20 outline-none transition-all"
|
|
/>
|
|
<button type="submit" className="btn-primary">
|
|
Inscrever-se
|
|
</button>
|
|
</form>
|
|
|
|
<p className="text-gray-500 text-sm mt-4">
|
|
Ao se inscrever, você concorda com nossa{' '}
|
|
<Link to="/privacidade" className="text-[#cbf400] hover:underline">
|
|
Política de Privacidade
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Blog;
|