mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
change card
This commit is contained in:
@@ -80,7 +80,28 @@ export function TvoneMainColumns1() {
|
||||
return (
|
||||
<div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 ">
|
||||
<section>
|
||||
<h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Vídeos Mais Recentes</h2>
|
||||
{/* Cabeçalho Minimalista com Link Azul */}
|
||||
<div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
|
||||
Vídeos Recentes
|
||||
</h2>
|
||||
|
||||
<Link
|
||||
href="/negocios"
|
||||
className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
|
||||
>
|
||||
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="mx-auto flex w-full max-w-[1200px] flex-col gap-10">
|
||||
|
||||
|
||||
@@ -145,4 +166,149 @@ function AppleIcon({ className }: { className?: string }) {
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const entrevistas = [
|
||||
{
|
||||
guest: "CEO da Unitel",
|
||||
title: "O futuro do 5G em Angola e a expansão da conectividade rural",
|
||||
img: "https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
guest: "Sandra Rodrigues",
|
||||
title: "Como a inteligência artificial está a mudar o jornalismo digital",
|
||||
img: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
guest: "Fundador da Startup X",
|
||||
title: "O desafio de escalar uma fintech no mercado africano atual",
|
||||
img: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const negocios = [
|
||||
{
|
||||
category: "Investimento",
|
||||
title: "Banca nacional regista crescimento de 15% no crédito à produção",
|
||||
description: "Novas medidas de estímulo económico impulsionam o setor agrícola e industrial neste trimestre.",
|
||||
readTime: "5",
|
||||
img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
category: "Tecnologia",
|
||||
title: "Hub tecnológico em Luanda atrai investidores estrangeiros",
|
||||
description: "Empresas de capital de risco olham para o ecossistema de startups angolano com novo otimismo.",
|
||||
readTime: "4",
|
||||
img: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=800&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
category: "Mercados",
|
||||
title: "Preço das commodities: O impacto direto na inflação local",
|
||||
description: "Análise profunda sobre como a volatilidade externa está a moldar os preços no consumidor final.",
|
||||
readTime: "7",
|
||||
img: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?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>
|
||||
</div>
|
||||
|
||||
{/* Grid de 3 colunas para estilo Premium/Apple */}
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{entrevistas.map((item, index) => (
|
||||
<article key={index} className="group cursor-pointer">
|
||||
<Link href="#" className="block">
|
||||
<div className="relative aspect-[4/5] overflow-hidden rounded-[28px] bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-2xl group-hover:shadow-neutral-300">
|
||||
<Image
|
||||
src={item.img}
|
||||
alt={item.title}
|
||||
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 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">
|
||||
"{item.title}"
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function TvoneNegocios() {
|
||||
return (
|
||||
<section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
|
||||
{/* Cabeçalho Minimalista com Link Azul */}
|
||||
<div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
|
||||
Negócios
|
||||
</h2>
|
||||
|
||||
<Link
|
||||
href="/negocios"
|
||||
className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
|
||||
>
|
||||
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">
|
||||
{negocios.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">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
|
||||
{item.category}
|
||||
</span>
|
||||
|
||||
<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">
|
||||
<div className="h-1 w-1 rounded-full bg-blue-600/40" />
|
||||
<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