generated from autoblog/Seo
291 lines
13 KiB
TypeScript
291 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { articles } from '../data/articles';
|
|
import ArticleCard from '../components/ArticleCard';
|
|
import SEO from '../components/SEO';
|
|
import { ArrowRight, TrendingUp, Zap } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
|
import { translations } from '../constants';
|
|
import { Article } from '../types';
|
|
|
|
export default function Home() {
|
|
const { lang, translate } = useLanguage();
|
|
const t = translations[lang];
|
|
|
|
const [displayArticles, setDisplayArticles] = useState<Article[]>(articles);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (lang === 'pt-br') {
|
|
setDisplayArticles(articles);
|
|
return;
|
|
}
|
|
|
|
const translateHeaders = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// Translate only titles and categories for Home page items
|
|
const itemsToTranslate = articles.map(a => ({
|
|
title: a.title,
|
|
category: a.category
|
|
}));
|
|
|
|
const translatedItems = await translate(itemsToTranslate, 'article titles and categories', true);
|
|
|
|
const newArticles = articles.map((a, i) => ({
|
|
...a,
|
|
title: translatedItems[i]?.title || a.title,
|
|
category: translatedItems[i]?.category || a.category
|
|
}));
|
|
|
|
setDisplayArticles(newArticles);
|
|
} catch (error) {
|
|
console.error("Home translation error:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
translateHeaders();
|
|
}, [lang, translate]);
|
|
|
|
const featuredArticle = displayArticles[0];
|
|
const recentArticles = displayArticles.slice(1, 4);
|
|
const secondaryArticles = displayArticles.slice(4, 10);
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={t.heroTitle}
|
|
description={t.heroDescription}
|
|
/>
|
|
|
|
{/* Modern Hero Section */}
|
|
<section className="relative pt-32 pb-24 overflow-hidden">
|
|
{/* Background elements */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-full -z-10 bg-[radial-gradient(circle_at_top_right,rgba(20,184,166,0.08),transparent_50%),radial-gradient(circle_at_bottom_left,rgba(13,148,136,0.05),transparent_50%)]" />
|
|
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col items-center text-center max-w-4xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="inline-flex items-center gap-2 px-3 py-1 bg-brand/10 text-brand rounded-full text-xs font-bold uppercase tracking-wider mb-8 border border-brand/20"
|
|
>
|
|
<TrendingUp size={14} />
|
|
<span>{t.heroSubtitle}</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ type: "spring", damping: 20 }}
|
|
className="text-6xl sm:text-8xl lg:text-[10rem] font-display font-black text-slate-950 mb-10 leading-[0.9] tracking-[-0.04em]"
|
|
>
|
|
{lang === 'pt-br' ? (
|
|
<>Poder<br /><span className="text-brand">Semântico.</span></>
|
|
) : <>Semantic<br /><span className="text-brand">Authority.</span></>}
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-lg sm:text-xl text-slate-600 max-w-2xl leading-relaxed mb-12 font-medium"
|
|
>
|
|
{t.heroDescription}
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="flex flex-col sm:flex-row items-center gap-6"
|
|
>
|
|
<Link
|
|
to="/sobre"
|
|
className="btn-primary flex items-center gap-2 group"
|
|
>
|
|
{t.readManifesto}
|
|
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
<div className="flex items-center gap-2 text-slate-400 font-medium">
|
|
<span className="flex h-2 w-2 rounded-full bg-brand animate-pulse" />
|
|
<span className="text-sm uppercase tracking-widest">{t.publishedIn} Maio 2026</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Editorial Spotlight Section */}
|
|
<section className="py-24 bg-white">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col gap-32">
|
|
|
|
{/* Spotlight Feature - Refined Magazine Layout */}
|
|
<div className="relative">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
className="lg:col-span-7"
|
|
>
|
|
<div className="relative aspect-[4/3] sm:aspect-[16/10] overflow-hidden rounded-[2rem] shadow-2xl">
|
|
<img
|
|
src={featuredArticle.image}
|
|
alt={featuredArticle.title}
|
|
className="w-full h-full object-cover"
|
|
referrerPolicy="no-referrer"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/20 to-transparent" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="lg:col-span-5"
|
|
>
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<span className="w-12 h-[1px] bg-brand" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-brand">{featuredArticle.category}</span>
|
|
</div>
|
|
|
|
<Link to={`/artigo/${featuredArticle.slug}`}>
|
|
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-display font-black text-slate-950 mb-8 leading-[1.05] tracking-tight hover:text-brand transition-colors">
|
|
{featuredArticle.title}
|
|
</h2>
|
|
</Link>
|
|
|
|
<p className="text-lg text-slate-500 font-medium leading-relaxed mb-10 border-l-2 border-slate-100 pl-6">
|
|
{featuredArticle.excerpt}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-6 mb-12">
|
|
<div className="flex items-center gap-3">
|
|
<img src={featuredArticle.author.avatar} alt={featuredArticle.author.name} className="h-10 w-10 rounded-full border border-slate-100" />
|
|
<div className="text-left">
|
|
<p className="text-xs font-black text-slate-950">{featuredArticle.author.name}</p>
|
|
<p className="text-[9px] font-bold uppercase tracking-widest text-slate-400">{featuredArticle.author.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Link to={`/artigo/${featuredArticle.slug}`} className="btn-primary inline-flex items-center gap-3 group">
|
|
Iniciar Leitura
|
|
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Mid-Bar - Minimalist & Integrated */}
|
|
<div className="bg-slate-50 rounded-[3rem] p-4 sm:p-6 border border-slate-100">
|
|
<div className="flex flex-col lg:flex-row items-center gap-8">
|
|
<div className="flex-grow flex items-center gap-6 pl-6">
|
|
<div className="h-12 w-12 bg-white rounded-2xl flex items-center justify-center text-brand shadow-sm">
|
|
<Zap size={22} fill="currentColor" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-sm font-black text-slate-950 uppercase tracking-widest">Briefing Semanal</h3>
|
|
<p className="text-xs text-slate-500 font-medium">Insights técnicos direto na sua inbox.</p>
|
|
</div>
|
|
</div>
|
|
<form className="flex flex-col sm:flex-row gap-2 w-full lg:w-auto lg:pr-2" onSubmit={(e) => e.preventDefault()}>
|
|
<input
|
|
type="email"
|
|
placeholder="E-mail profissional..."
|
|
className="bg-white border border-slate-200 rounded-2xl px-6 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 w-full lg:w-72"
|
|
/>
|
|
<button className="bg-slate-950 text-white font-black text-[10px] uppercase tracking-widest px-8 py-3.5 rounded-2xl hover:bg-slate-800 transition-all">
|
|
Inscrever
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Explorer Section */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-16 px-4">
|
|
<h3 className="text-[10px] font-black text-slate-300 uppercase tracking-[0.3em] flex items-center gap-3">
|
|
<div className="h-1 w-8 bg-slate-100" />
|
|
Explorar Insights
|
|
</h3>
|
|
<Link to="/blog" className="text-[10px] font-black text-brand uppercase tracking-widest hover:underline">Ver Todos</Link>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
|
{recentArticles.map((article) => (
|
|
<ArticleCard key={article.id} article={article} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Grid Explorer */}
|
|
<section className="py-24 bg-slate-50 border-t border-slate-100">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-16 text-center max-w-2xl mx-auto">
|
|
<h2 className="text-4xl font-display font-black text-slate-950 mb-4">{t.explore}</h2>
|
|
<p className="text-slate-500 font-medium leading-relaxed">Mergulhe em clusters de conhecimento organizados por intenção de busca.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{secondaryArticles.map(article => (
|
|
<ArticleCard key={article.id} article={article} />
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-20 text-center">
|
|
<Link to="/arquivo" className="btn-outline inline-flex items-center gap-3">
|
|
Explore o Arquivo Semântico
|
|
<ArrowRight size={18} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
{/* Modern Newsletter Banner */}
|
|
<section id="newsletter" className="py-24 bg-slate-50">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="bg-brand rounded-[3rem] p-12 sm:p-20 text-center text-white relative overflow-hidden shadow-2xl shadow-brand/20">
|
|
{/* Abstract Background Shapes */}
|
|
<div className="absolute top-0 left-0 w-64 h-64 bg-white/10 blur-3xl -translate-x-1/2 -translate-y-1/2 rounded-full" />
|
|
<div className="absolute bottom-0 right-0 w-96 h-96 bg-brand-light/20 blur-3xl translate-x-1/4 translate-y-1/4 rounded-full" />
|
|
|
|
<div className="relative z-10 max-w-2xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 text-white rounded-full text-[10px] font-bold uppercase tracking-widest mb-8"
|
|
>
|
|
<span>Exclusivo para Membros</span>
|
|
</motion.div>
|
|
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-display font-extrabold mb-8 leading-tight">{t.footerNewsletterTitle}</h2>
|
|
<p className="text-teal-50 mb-12 font-medium">
|
|
{t.footerNewsletterSubtitle}
|
|
</p>
|
|
<form className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto" onSubmit={(e) => e.preventDefault()}>
|
|
<input
|
|
type="email"
|
|
placeholder={t.footerNewsletterInput}
|
|
className="flex-grow px-6 py-4 rounded-2xl bg-white text-slate-900 focus:outline-none focus:ring-4 focus:ring-white/20 transition-all font-medium"
|
|
/>
|
|
<button className="px-10 py-4 bg-slate-950 text-white rounded-2xl font-bold hover:bg-slate-900 transition-all active:scale-95 shadow-xl">
|
|
{t.subscribe}
|
|
</button>
|
|
</form>
|
|
<p className="mt-8 text-[10px] text-teal-100 uppercase tracking-widest font-bold opacity-80">{t.footerNewsletterDisclaimer}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|