141 lines
7.6 KiB
TypeScript
141 lines
7.6 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { ChevronRight, Activity } from 'lucide-react';
|
|
import { Link } from 'react-router-dom';
|
|
import { articles } from '@/data/articles';
|
|
import SEO from '@/components/SEO';
|
|
|
|
export default function Blog() {
|
|
const featuredArticle = articles.find(a => a.featured) || articles[0];
|
|
const otherArticles = articles.filter(a => a.id !== featuredArticle.id);
|
|
|
|
return (
|
|
<div className="min-h-screen pt-32 pb-24 text-white bg-black">
|
|
<SEO
|
|
title="Blog | Agência Onyx"
|
|
description="Leia nossas reflexões técnicas e estratégias de Marketing Digital."
|
|
url="https://agencia-onyx.com/blog"
|
|
/>
|
|
|
|
<div className="fixed inset-0 pointer-events-none z-0">
|
|
<div className="absolute inset-0 bg-grid-pattern opacity-30" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-6 max-w-7xl relative z-10">
|
|
|
|
{/* HEADER */}
|
|
<div className="border-b border-white/10 pb-12 mb-16 flex flex-col md:flex-row justify-between items-start md:items-end gap-12 bg-black/50">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1.5 border border-white/20 bg-white/5 text-gray-300 text-[10px] font-mono uppercase tracking-widest mb-6">
|
|
<Activity className="w-3 h-3 animate-pulse text-white" /> Diretório de Estratégias
|
|
</div>
|
|
<h1 className="text-5xl md:text-8xl font-display font-medium tracking-tighter mb-6 leading-[0.95]">
|
|
ONYX <br/> <span className="text-gray-500">LAB.</span>
|
|
</h1>
|
|
<p className="font-sans text-xl text-gray-400 leading-relaxed max-w-xl">
|
|
Táticas algorítmicas documentadas. Relatórios de marketing focados em redução de atrito e aumento de receita.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="hidden md:flex flex-col gap-2 font-mono text-[10px] uppercase tracking-widest text-gray-500 text-right">
|
|
<span className="text-white">STATUS: ONLINE</span>
|
|
<span>UPLINK: ATIVO</span>
|
|
<span>ORDENAÇÃO: MAIS RECENTES</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FEATURED */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="mb-24 group"
|
|
>
|
|
<Link to={`/blog/${featuredArticle.slug}`} className="grid grid-cols-1 lg:grid-cols-12 gap-0 items-center bg-black border border-white/10 transition-colors hover:bg-white/5">
|
|
<div className="lg:col-span-7 w-full aspect-[4/3] lg:aspect-auto lg:h-[500px] bg-white/5 relative border-b lg:border-b-0 lg:border-r border-white/10 grayscale group-hover:grayscale-0 transition-all duration-700">
|
|
<img
|
|
src={featuredArticle.imageUrl}
|
|
alt={featuredArticle.title}
|
|
className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-700 mix-blend-luminosity hover:mix-blend-normal"
|
|
/>
|
|
<div className="absolute top-6 left-6 bg-black border border-white/20 px-3 py-1 text-[10px] uppercase font-bold tracking-widest text-white font-mono shadow-[0_0_20px_rgba(255,255,255,0.1)]">
|
|
ARTIGO PRINCIPAL
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-5 p-8 lg:p-12 flex flex-col justify-center h-full">
|
|
<div className="flex items-center gap-3 text-[10px] uppercase tracking-widest text-gray-400 mb-6 font-mono">
|
|
<span className="text-white border border-white/20 bg-white/5 px-2 py-1">{featuredArticle.category}</span>
|
|
<span className="border border-white/10 px-2 py-1 text-gray-500">{featuredArticle.date}</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl lg:text-4xl font-display leading-tight mb-4 text-white">
|
|
{featuredArticle.title}
|
|
</h2>
|
|
|
|
<p className="font-sans text-gray-400 mb-8 line-clamp-3 leading-relaxed">
|
|
{featuredArticle.excerpt}
|
|
</p>
|
|
|
|
<span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-white font-mono mt-auto group-hover:text-gray-300 transition-colors">
|
|
Acessar Estudo <ChevronRight className="w-4 h-4 ml-1" />
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
{/* GRID */}
|
|
<div>
|
|
<div className="flex justify-between items-end mb-12 border-b border-white/10 pb-4">
|
|
<h3 className="text-2xl font-display font-medium tracking-tight">Arquivos</h3>
|
|
<span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">ORDENAR: DATA</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[1px] bg-white/10 border border-white/10">
|
|
{otherArticles.map((article, index) => (
|
|
<motion.div
|
|
key={article.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: (index % 3) * 0.1 }}
|
|
className="bg-black p-6 group hover:bg-white/5 transition-colors flex flex-col h-full"
|
|
>
|
|
<Link to={`/blog/${article.slug}`} className="flex flex-col h-full flex-1">
|
|
<div className="w-full aspect-[4/3] bg-white/5 mb-6 overflow-hidden relative border border-white/10 grayscale group-hover:grayscale-0 transition-all duration-700">
|
|
{article.imageUrl && (
|
|
<img
|
|
src={article.imageUrl}
|
|
alt={article.title}
|
|
className="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-luminosity group-hover:mix-blend-normal group-hover:opacity-100 group-hover:scale-105 transition-all duration-700"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col flex-1">
|
|
<div className="flex flex-wrap items-center gap-2 text-[10px] uppercase tracking-widest text-gray-500 font-mono mb-4">
|
|
<span className="text-white bg-white/5 px-2 py-0.5 border border-white/20">{article.category}</span>
|
|
<span className="border border-white/10 px-2 py-0.5">{article.date}</span>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-display font-medium text-white leading-snug mb-3">
|
|
{article.title}
|
|
</h3>
|
|
|
|
<p className="text-sm text-gray-500 mb-6 flex-1 line-clamp-3 font-sans">
|
|
{article.excerpt}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap items-center justify-between mt-auto pt-4 border-t border-white/10">
|
|
<span className="text-[10px] uppercase font-mono tracking-widest text-gray-500">Autor: <span className="text-gray-300">{article.author}</span></span>
|
|
<span className="text-[10px] uppercase font-mono tracking-widest text-white border border-white/20 bg-white/5 px-2 py-0.5">{article.readTime}</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|