New header style!
This commit is contained in:
parent
6bc53319ee
commit
a4eae6f169
3 changed files with 110 additions and 53 deletions
|
|
@ -2,33 +2,41 @@ import { ImageCarousel } from "@/components/layout/ImageCarousel";
|
|||
|
||||
export default function EnHome() {
|
||||
return (
|
||||
<section className="hero" aria-labelledby="home-title">
|
||||
<div className="container">
|
||||
<>
|
||||
<section className="hero-overlay" aria-labelledby="home-title">
|
||||
<ImageCarousel />
|
||||
<h1 id="home-title" className="title">Portuguese Powerlifting Association</h1>
|
||||
<p className="subtitle">Accessible. Transparent. For all athletes.</p>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<a className="btn btn-primary" href="/en/competicoes/calendario">View Calendar</a>
|
||||
<a className="btn btn-outline" href="/en/competicoes/resultados">View Results</a>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-4 md:grid-cols-3">
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">About</h3>
|
||||
<p className="muted">Learn about APP and our mission.</p>
|
||||
<a className="underline mt-2 inline-block" href="/en/sobre/quem-somos">Read more</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">Rules</h3>
|
||||
<p className="muted">IPF Rule Book and Anti-Doping.</p>
|
||||
<a className="underline mt-2 inline-block" href="/en/regras/ipf-rule-book">See rules</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">FAQ</h3>
|
||||
<p className="muted">Frequently asked questions.</p>
|
||||
<a className="underline mt-2 inline-block" href="/en/perguntas">Explore</a>
|
||||
<div className="hero-content">
|
||||
<div className="container">
|
||||
<h1 id="home-title" className="title">Portuguese Powerlifting Association</h1>
|
||||
<p className="subtitle">Accessible. Transparent. For all athletes.</p>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<a className="btn btn-primary" href="/en/competicoes/calendario">View Calendar</a>
|
||||
<a className="btn btn-outline" href="/en/competicoes/resultados">View Results</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section className="hero" aria-label="APP Highlights">
|
||||
<div className="container">
|
||||
<div className="mt-8 grid gap-4 md:grid-cols-3">
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">About</h3>
|
||||
<p className="muted">Learn about APP and our mission.</p>
|
||||
<a className="underline mt-2 inline-block" href="/en/sobre/quem-somos">Read more</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">Rules</h3>
|
||||
<p className="muted">IPF Rule Book and Anti-Doping.</p>
|
||||
<a className="underline mt-2 inline-block" href="/en/regras/ipf-rule-book">See rules</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">FAQ</h3>
|
||||
<p className="muted">Frequently asked questions.</p>
|
||||
<a className="underline mt-2 inline-block" href="/en/perguntas">Explore</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -220,13 +220,54 @@ p { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
|
|||
padding: 3rem 0;
|
||||
animation: fade-in-up 400ms ease both;
|
||||
}
|
||||
.hero .title {
|
||||
.hero-overlay {
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-overlay .carousel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.hero-overlay .carousel-viewport {
|
||||
height: 100%;
|
||||
}
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.hero-overlay .title,
|
||||
.hero-overlay .subtitle {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.hero-overlay .title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.hero .subtitle {
|
||||
.hero-overlay .subtitle {
|
||||
margin-top: 0.5rem;
|
||||
color: var(--color-muted);
|
||||
font-size: 1.1rem;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.hero-overlay .btn {
|
||||
text-shadow: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.hero-overlay .btn-primary {
|
||||
background-color: var(--color-green);
|
||||
color: #fff;
|
||||
}
|
||||
.hero-overlay .btn-outline {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Carousel */
|
||||
|
|
|
|||
|
|
@ -2,33 +2,41 @@ import { ImageCarousel } from "@/components/layout/ImageCarousel";
|
|||
|
||||
export default function PtHome() {
|
||||
return (
|
||||
<section className="hero" aria-labelledby="home-title">
|
||||
<div className="container">
|
||||
<>
|
||||
<section className="hero-overlay" aria-labelledby="home-title">
|
||||
<ImageCarousel />
|
||||
<h1 id="home-title" className="title">Associação Portuguesa de Powerlifting</h1>
|
||||
<p className="subtitle">Acessível. Transparente. Para todos os atletas.</p>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<a className="btn btn-primary" href="/pt/competicoes/calendario">Ver Calendário</a>
|
||||
<a className="btn btn-outline" href="/pt/competicoes/resultados">Ver Resultados</a>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-4 md:grid-cols-3">
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">Quem Somos</h3>
|
||||
<p className="muted">Conheça a APP e a nossa missão.</p>
|
||||
<a className="underline mt-2 inline-block" href="/pt/sobre/quem-somos">Ler mais</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">Regras</h3>
|
||||
<p className="muted">IPF Rule Book e Anti-Doping.</p>
|
||||
<a className="underline mt-2 inline-block" href="/pt/regras/ipf-rule-book">Consultar</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">FAQ</h3>
|
||||
<p className="muted">Perguntas frequentes para atletas e treinadores.</p>
|
||||
<a className="underline mt-2 inline-block" href="/pt/perguntas">Explorar</a>
|
||||
<div className="hero-content">
|
||||
<div className="container">
|
||||
<h1 id="home-title" className="title">Associação Portuguesa de Powerlifting</h1>
|
||||
<p className="subtitle">Acessível. Transparente. Para todos os atletas.</p>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<a className="btn btn-primary" href="/pt/competicoes/calendario">Ver Calendário</a>
|
||||
<a className="btn btn-outline" href="/pt/competicoes/resultados">Ver Resultados</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section className="hero" aria-label="Destaques do APP">
|
||||
<div className="container">
|
||||
<div className="mt-8 grid gap-4 md:grid-cols-3">
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">Quem Somos</h3>
|
||||
<p className="muted">Conheça a APP e a nossa missão.</p>
|
||||
<a className="underline mt-2 inline-block" href="/pt/sobre/quem-somos">Ler mais</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">Regras</h3>
|
||||
<p className="muted">IPF Rule Book e Anti-Doping.</p>
|
||||
<a className="underline mt-2 inline-block" href="/pt/regras/ipf-rule-book">Consultar</a>
|
||||
</div>
|
||||
<div className="border p-4 rounded-md">
|
||||
<h3 className="font-semibold">FAQ</h3>
|
||||
<p className="muted">Perguntas frequentes para atletas e treinadores.</p>
|
||||
<a className="underline mt-2 inline-block" href="/pt/perguntas">Explorar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue