mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
|
||
const destaques = [
|
||
{
|
||
cat: "FAMOSOS",
|
||
catColor: "text-pink-600",
|
||
title: "Cerimónia reúne estrelas nacionais e internacionais em Lisboa.",
|
||
date: "24 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&q=80",
|
||
},
|
||
{
|
||
cat: "NEGÓCIOS",
|
||
catColor: "text-[#0066cc]",
|
||
title: "Mercados reagem às novas projeções de crescimento para a região.",
|
||
date: "24 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1486406146926-c627a92ad4ab?w=600&q=80",
|
||
},
|
||
{
|
||
cat: "DESPORTO",
|
||
catColor: "text-emerald-600",
|
||
title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
|
||
date: "23 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=600&q=80",
|
||
},
|
||
{
|
||
cat: "TECNOLOGIA",
|
||
catColor: "text-violet-600",
|
||
title: "Novos dispositivos chegam às lojas com foco em sustentabilidade.",
|
||
date: "23 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80",
|
||
},
|
||
];
|
||
|
||
const recentes = [
|
||
{
|
||
cat: "EM FOCO",
|
||
catBg: "bg-pink-100 text-pink-700",
|
||
title: "Governo anuncia medidas para apoiar famílias e pequenas empresas.",
|
||
excerpt: "Pacote inclui linhas de crédito e simplificação de procedimentos.",
|
||
byline: "Por Redação",
|
||
date: "24 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
|
||
},
|
||
{
|
||
cat: "ECONOMIA",
|
||
catBg: "bg-amber-100 text-amber-800",
|
||
title: "Inflação desce pelo terceiro mês consecutivo, segundo dados preliminares.",
|
||
excerpt: "Analistas mantêm cautela face ao cenário internacional.",
|
||
byline: "Por Economia",
|
||
date: "24 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=200&q=80",
|
||
},
|
||
{
|
||
cat: "CULTURA",
|
||
catBg: "bg-violet-100 text-violet-800",
|
||
title: "Museu inaugura exposição com obras inéditas de artistas locais.",
|
||
excerpt: "Visitas guiadas e programa educativo arrancam no próximo fim de semana.",
|
||
byline: "Por Cultura",
|
||
date: "23 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1549887534-1541e9326642?w=200&q=80",
|
||
},
|
||
{
|
||
cat: "SAÚDE",
|
||
catBg: "bg-emerald-100 text-emerald-800",
|
||
title: "Campanha de vacinação alarga faixas etárias em todo o país.",
|
||
excerpt: "Autoridades de saúde reforçam importância da adesão às janelas recomendadas.",
|
||
byline: "Por Saúde",
|
||
date: "23 Mar 2025",
|
||
img: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=200&q=80",
|
||
},
|
||
];
|
||
|
||
const aSeguir = [
|
||
{
|
||
title: "Mercado imobiliário: especialistas explicam tendências para 2025.",
|
||
date: "23 Mar",
|
||
img: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=120&q=80",
|
||
},
|
||
{
|
||
title: "Cinema: estreia nacional bate recordes de bilheteira no primeiro fim de semana.",
|
||
date: "22 Mar",
|
||
img: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=120&q=80",
|
||
},
|
||
{
|
||
title: "Ambiente: projeto de reflorestação ultrapassa meta anual em três meses.",
|
||
date: "22 Mar",
|
||
img: "https://images.unsplash.com/photo-1448375240586-882707db888d?w=120&q=80",
|
||
},
|
||
];
|
||
|
||
export function TvoneDestaques() {
|
||
return (
|
||
<section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
|
||
<h2 className="mb-5 text-xl font-bold tracking-tight text-neutral-900">Destaques</h2>
|
||
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||
{destaques.map((item) => (
|
||
<article
|
||
key={item.title}
|
||
className="group overflow-hidden rounded-xl border border-neutral-200/80 bg-white shadow-sm transition hover:shadow-md"
|
||
>
|
||
<Link href="#" className="block">
|
||
<div className="relative aspect-[4/3] w-full overflow-hidden">
|
||
<Image
|
||
src={item.img}
|
||
alt=""
|
||
fill
|
||
className="object-cover transition duration-300 group-hover:scale-[1.03]"
|
||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
||
/>
|
||
</div>
|
||
<div className="p-4">
|
||
<p className={`mb-2 text-[11px] font-bold uppercase tracking-wide ${item.catColor}`}>{item.cat}</p>
|
||
<h3 className="text-[15px] font-semibold leading-snug text-neutral-900">{item.title}</h3>
|
||
<p className="mt-3 text-xs text-neutral-500">{item.date}</p>
|
||
</div>
|
||
</Link>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export function TvoneMainColumns() {
|
||
return (
|
||
<div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 lg:grid-cols-[1fr_340px]">
|
||
<section>
|
||
<h2 className="mb-6 text-xl font-bold tracking-tight text-neutral-900">Mais Recentes</h2>
|
||
<ul className="flex flex-col gap-6">
|
||
{recentes.map((item) => (
|
||
<li key={item.title}>
|
||
<Link href="#" className="group flex gap-4 rounded-xl border border-transparent p-1 transition hover:border-neutral-200 hover:bg-neutral-50">
|
||
<div className="relative h-24 w-28 shrink-0 overflow-hidden rounded-lg sm:h-28 sm:w-36">
|
||
<Image src={item.img} alt="" fill className="object-cover" sizes="144px" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<span className={`inline-block rounded px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${item.catBg}`}>
|
||
{item.cat}
|
||
</span>
|
||
<h3 className="mt-2 text-base font-semibold leading-snug text-neutral-900 group-hover:text-[#0066cc]">
|
||
{item.title}
|
||
</h3>
|
||
<p className="mt-1 line-clamp-2 text-sm text-neutral-600">{item.excerpt}</p>
|
||
<p className="mt-2 text-xs text-neutral-500">
|
||
{item.byline} · {item.date}
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Link
|
||
href="#"
|
||
className="mt-8 flex w-full items-center justify-center rounded-xl bg-[#f5f5f7] py-3 text-sm font-medium text-neutral-800 transition hover:bg-neutral-200/80"
|
||
>
|
||
Ver todas as notícias
|
||
</Link>
|
||
</section>
|
||
|
||
<aside className="flex flex-col gap-8">
|
||
<div className="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm">
|
||
<div className="flex items-center gap-2 border-b border-neutral-100 px-4 py-3">
|
||
<svg className="h-5 w-5 text-neutral-800" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||
<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>
|
||
<span className="text-sm font-semibold text-neutral-800">Apple Line</span>
|
||
</div>
|
||
<div className="relative aspect-[16/10] w-full">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1486406146926-c627a92ad4ab?w=680&q=80"
|
||
alt=""
|
||
fill
|
||
className="object-cover"
|
||
sizes="340px"
|
||
/>
|
||
</div>
|
||
<div className="p-4">
|
||
<span className="text-[11px] font-bold uppercase tracking-wide text-[#0066cc]">Bancos</span>
|
||
<h3 className="mt-2 text-lg font-bold leading-snug text-neutral-900">
|
||
BAI regista lucros acima das expectativas no último trimestre.
|
||
</h3>
|
||
<p className="mt-2 text-xs text-neutral-500">24 Mar 2025</p>
|
||
<Link
|
||
href="#"
|
||
className="mt-4 flex w-full items-center justify-center rounded-lg bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800"
|
||
>
|
||
Ver Página Apple Line
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="mb-4 text-lg font-bold text-neutral-900">A seguir</h3>
|
||
<ul className="flex flex-col gap-4">
|
||
{aSeguir.map((item) => (
|
||
<li key={item.title}>
|
||
<Link href="#" className="group flex gap-3">
|
||
<div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-lg">
|
||
<Image src={item.img} alt="" fill className="object-cover" sizes="64px" />
|
||
</div>
|
||
<div className="min-w-0">
|
||
<p className="text-sm font-medium leading-snug text-neutral-900 group-hover:text-[#0066cc]">{item.title}</p>
|
||
<p className="mt-1 text-xs text-neutral-500">{item.date}</p>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function TvoneAdBanner() {
|
||
return (
|
||
<section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
|
||
<div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-[#0a4d8c] via-[#1e6fb8] to-[#e85c2a] px-6 py-8 text-white md:flex md:items-center md:justify-between md:py-10">
|
||
<div className="max-w-lg">
|
||
<p className="text-[11px] font-semibold uppercase tracking-widest text-white/90">BAI Directo</p>
|
||
<h2 className="mt-2 text-2xl font-bold md:text-3xl">Actualização do BAI Directo</h2>
|
||
<p className="mt-2 text-sm text-white/90">Faça as suas operações com mais rapidez e segurança em qualquer dispositivo.</p>
|
||
</div>
|
||
<div className="relative mt-6 h-32 w-full max-w-xs shrink-0 md:mt-0 md:h-36">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&q=80"
|
||
alt=""
|
||
fill
|
||
className="object-contain object-right"
|
||
sizes="320px"
|
||
/>
|
||
</div>
|
||
<span className="absolute right-6 top-1/2 hidden -translate-y-1/2 text-2xl font-black tracking-tight opacity-90 md:block">
|
||
BAI
|
||
</span>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
const services = [
|
||
{ icon: "truck", label: "Entrega gratuita" },
|
||
{ icon: "return", label: "Devoluções fáceis" },
|
||
{ icon: "shield", label: "Pagamento seguro" },
|
||
{ icon: "headset", label: "Apoio 24/7" },
|
||
];
|
||
|
||
function ServiceIcon({ name }: { name: string }) {
|
||
const common = "h-6 w-6 text-neutral-600";
|
||
switch (name) {
|
||
case "truck":
|
||
return (
|
||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
|
||
<path d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
|
||
</svg>
|
||
);
|
||
case "return":
|
||
return (
|
||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||
</svg>
|
||
);
|
||
case "shield":
|
||
return (
|
||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
);
|
||
case "headset":
|
||
return (
|
||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M19 14v3a2 2 0 01-2 2h-2v-6h2a2 2 0 012 2zm-8 5H7a2 2 0 01-2-2v-3a2 2 0 012-2h2v7z" />
|
||
<path d="M5 14v-1a7 7 0 0114 0v1" strokeLinecap="round" />
|
||
</svg>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
}
|
||
|
||
export function TvoneServiceStrip() {
|
||
return (
|
||
<div className="border-y border-neutral-200 bg-[#f5f5f7] py-6">
|
||
<div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-center gap-8 px-4 md:justify-between md:gap-4">
|
||
{services.map((s) => (
|
||
<div key={s.label} className="flex items-center gap-3 text-sm text-neutral-700">
|
||
<ServiceIcon name={s.icon} />
|
||
<span className="font-medium">{s.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function TvoneFooter() {
|
||
return (
|
||
<footer className="border-t border-neutral-200 bg-white py-10">
|
||
<div className="mx-auto flex max-w-[1200px] flex-col gap-8 px-4 md:flex-row md:items-center md:justify-between">
|
||
<div>
|
||
<p className="text-lg font-bold tracking-tight text-neutral-900">PLATINALINE</p>
|
||
<p className="mt-1 text-sm text-neutral-500">© 2025 PlatinaLine. Todos os direitos reservados.</p>
|
||
</div>
|
||
<nav className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-600">
|
||
<Link href="#" className="hover:text-neutral-900">
|
||
Privacidade
|
||
</Link>
|
||
<Link href="#" className="hover:text-neutral-900">
|
||
Termos de Uso
|
||
</Link>
|
||
<Link href="#" className="hover:text-neutral-900">
|
||
Publicidade
|
||
</Link>
|
||
<Link href="#" className="hover:text-neutral-900">
|
||
Contactos
|
||
</Link>
|
||
</nav>
|
||
<div className="flex items-center gap-4 text-neutral-500">
|
||
<Link href="#" aria-label="Facebook" className="hover:text-neutral-800">
|
||
f
|
||
</Link>
|
||
<Link href="#" aria-label="Instagram" className="hover:text-neutral-800">
|
||
in
|
||
</Link>
|
||
<Link href="#" aria-label="YouTube" className="hover:text-neutral-800">
|
||
▶
|
||
</Link>
|
||
<Link href="#" aria-label="X" className="hover:text-neutral-800">
|
||
𝕏
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|