mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
add spacing
This commit is contained in:
@@ -78,7 +78,7 @@ const recentes = [
|
||||
|
||||
export function TvoneMainColumns1() {
|
||||
return (
|
||||
<div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 ">
|
||||
<div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-20 ">
|
||||
<section>
|
||||
{/* Cabeçalho Minimalista com Link Azul */}
|
||||
<div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
|
||||
@@ -210,16 +210,64 @@ const negocios = [
|
||||
img: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
];
|
||||
|
||||
const editorChoice = [
|
||||
{
|
||||
category: "Exclusivo",
|
||||
title: "O renascimento da arquitetura moderna em Luanda: Equilíbrio entre história e inovação",
|
||||
description: "Um olhar detalhado sobre como os novos projetos urbanos estão a redefinir a linha do horizonte da capital.",
|
||||
readTime: "8",
|
||||
publishDate: "09 ABR 2026", // Data fixa para artigos de fundo
|
||||
img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
category: "Cultura",
|
||||
title: "Documentário premiado explora as raízes rítmicas do interior de Angola",
|
||||
description: "A jornada cinematográfica que capturou sons ancestrais antes que desaparecessem no tempo.",
|
||||
readTime: "6",
|
||||
publishDate: "Há 3 horas", // Tempo relativo para notícias quentes
|
||||
img: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
category: "Estilo de Vida",
|
||||
title: "Gastronomia sustentável: O novo movimento que está a conquistar os chefs locais",
|
||||
description: "Como a utilização de produtos sazonais e produtores regionais está a mudar o menu dos melhores restaurantes.",
|
||||
readTime: "5",
|
||||
publishDate: "08 ABR 2026",
|
||||
img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
];
|
||||
export function TvoneEntrevistas() {
|
||||
return (
|
||||
<section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">Entrevistas</h2>
|
||||
<p className="mt-2 text-neutral-500">Conversas exclusivas com quem move o mercado e a cultura.</p>
|
||||
{/* Cabeçalho com Título, Descrição e Link Azul */}
|
||||
<div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
|
||||
<div className="max-w-[600px]">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
|
||||
Entrevistas
|
||||
</h2>
|
||||
<p className="mt-2 text-sm md:text-base text-neutral-500 leading-relaxed">
|
||||
Conversas exclusivas com as personalidades que movem o mercado, a tecnologia e a cultura em Angola.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid de 3 colunas para estilo Premium/Apple */}
|
||||
<Link
|
||||
href="/entrevistas"
|
||||
className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499] whitespace-nowrap mb-1"
|
||||
>
|
||||
Ver tudo
|
||||
<svg
|
||||
className="h-4 w-4 transition-transform group-hover:translate-x-0.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.5}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Grid de Cards */}
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{entrevistas.map((item, index) => (
|
||||
<article key={index} className="group cursor-pointer">
|
||||
@@ -231,11 +279,13 @@ export function TvoneEntrevistas() {
|
||||
fill
|
||||
className="object-cover transition duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/20 to-transparent opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
|
||||
<div className="absolute bottom-0 p-8">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-blue-400">{item.guest}</span>
|
||||
<h3 className="mt-2 text-xl font-bold leading-tight text-white md:text-2xl">
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.15em] text-blue-400">
|
||||
{item.guest}
|
||||
</span>
|
||||
<h3 className="mt-3 text-xl font-bold leading-tight text-white md:text-2xl">
|
||||
"{item.title}"
|
||||
</h3>
|
||||
</div>
|
||||
@@ -312,3 +362,75 @@ export function TvoneNegocios() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function TvoneEscolhaEditor() {
|
||||
return (
|
||||
<section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
|
||||
<div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
|
||||
<div className="max-w-[600px]">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
|
||||
Escolha do Editor
|
||||
</h2>
|
||||
<p className="mt-2 text-sm md:text-base text-neutral-500 leading-relaxed">
|
||||
Curadoria exclusiva das histórias mais impactantes do dia, selecionadas pela nossa redação.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/escolhas"
|
||||
className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499] whitespace-nowrap mb-1"
|
||||
>
|
||||
Ver tudo
|
||||
<svg className="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-10 lg:grid-cols-3">
|
||||
{editorChoice.map((item, index) => (
|
||||
<article key={index} className="group flex flex-col gap-5">
|
||||
<div className="relative aspect-video overflow-hidden rounded-[24px] bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-md">
|
||||
<Image
|
||||
src={item.img}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="px-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
|
||||
{item.category}
|
||||
</span>
|
||||
<span className="h-1 w-1 rounded-full bg-neutral-300" />
|
||||
{/* Data de Publicação em destaque suave */}
|
||||
<span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">
|
||||
{item.publishDate}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="mt-3 text-xl font-bold leading-snug text-neutral-900 transition-colors group-hover:text-[#0066CC]">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p className="mt-3 line-clamp-2 text-sm leading-relaxed text-neutral-500">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className="mt-5 flex items-center gap-2 border-t border-neutral-50 pt-4">
|
||||
<svg className="h-3.5 w-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="text-[10px] font-bold uppercase text-neutral-400">
|
||||
{item.readTime} min de leitura
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user