generated from autoblog/Corretor_Imoveis
65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { Helmet } from "react-helmet-async";
|
|
import { Article } from "../data/articles";
|
|
import { motion } from "motion/react";
|
|
|
|
export function InsightsPage({ marketInsights }: { marketInsights: Article[] }) {
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>Insights & Blog | Rafael Fontes</title>
|
|
<meta name="description" content="Artigos e análises de mercado sobre o mercado imobiliário premium de São Paulo. Dicas de negócios e inteligência analítica." />
|
|
</Helmet>
|
|
<div className="pt-32 pb-24 bg-zinc-50 min-h-screen">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
|
<div>
|
|
<span className="text-xs uppercase tracking-[0.2em] text-zinc-400 font-bold block mb-4">
|
|
Blog Pessoal
|
|
</span>
|
|
<h1 className="text-4xl font-serif text-zinc-900 leading-tight">
|
|
Artigos & Análises de Mercado
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
{marketInsights.map((post, index) => (
|
|
<motion.div
|
|
key={post.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1 * index }}
|
|
>
|
|
<Link
|
|
to={`/artigo/${post.id}`}
|
|
className="group block"
|
|
>
|
|
<div className="mb-4">
|
|
<span className="text-xs text-zinc-400 uppercase tracking-widest">
|
|
{post.date}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-xl font-serif text-zinc-900 mb-4 group-hover:text-brand-gold transition-colors">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-zinc-600 font-light text-sm leading-relaxed mb-6">
|
|
{post.excerpt}
|
|
</p>
|
|
<span className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-brand-gold">
|
|
Ler artigo completo{" "}
|
|
<ArrowRight
|
|
size={14}
|
|
className="group-hover:translate-x-1 transition-transform"
|
|
/>
|
|
</span>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|