feat: initialize portfolio site with core components, pages, and content structure, and update Next.js configuration.
This commit is contained in:
1 parent
223746b898
commit
d00258dcd1
22 files changed
+1512
-8038
No files matched your search
+48
-33
@@ -1,23 +1,10 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Footer Component
|
||||
*
|
||||
* Displays contact information, social links, and copyright in a consistent footer layout.
|
||||
* Follows the minimalist design system with Monument Extended typography and #ccff00 accent color.
|
||||
*
|
||||
* Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7
|
||||
*/
|
||||
|
||||
// TypeScript interface for social media links
|
||||
export interface SocialLink {
|
||||
name: string; // Display name (e.g., "GitHub")
|
||||
href: string; // Full URL
|
||||
icon: string; // SVG path or icon identifier
|
||||
ariaLabel: string; // Accessibility label
|
||||
name: string;
|
||||
href: string;
|
||||
icon: string;
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
// Social links data
|
||||
const socialLinks: SocialLink[] = [
|
||||
{
|
||||
name: "GitHub",
|
||||
@@ -39,6 +26,16 @@ const socialLinks: SocialLink[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const quickLinks = [
|
||||
{ label: "Hub de servicos", href: "/servicos" },
|
||||
{ label: "Cases", href: "/cases" },
|
||||
{ label: "Consultoria Next.js", href: "/servicos/consultoria-nextjs" },
|
||||
{
|
||||
label: "Integracao hardware + software",
|
||||
href: "/servicos/integracao-hardware-software-iot",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
@@ -46,22 +43,26 @@ export default function Footer() {
|
||||
<footer className="ds-section">
|
||||
<div className="ds-section-shell">
|
||||
<div className="ds-grid-2">
|
||||
{/* Contact & Legal */}
|
||||
<div className="ds-card flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="ds-kicker">SYSTEM_INFO</div>
|
||||
<div className="ds-kicker">Contato</div>
|
||||
<span className="ds-draw-line" />
|
||||
<h3 className="ds-card-title">
|
||||
Transformando complexidade técnica em sistemas estáveis
|
||||
Engenharia com menos ruido e mais clareza de execucao
|
||||
</h3>
|
||||
<p className="ds-copy max-w-[48ch]">
|
||||
Se voce precisa de alguem para conectar produto, integracao e
|
||||
entrega com mais criterio tecnico, este portfolio e o ponto de
|
||||
partida.
|
||||
</p>
|
||||
|
||||
<div className="mt-sp-6">
|
||||
<p className="text-[12px] uppercase tracking-wider text-[var(--meta)] mb-2">
|
||||
Contato
|
||||
<p className="mb-2 text-[12px] tracking-[0.02em] text-[var(--meta)]">
|
||||
E-mail direto
|
||||
</p>
|
||||
<a
|
||||
href="mailto:[email protected]"
|
||||
className="inline-block text-[18px] font-bold text-[var(--ink)] hover:text-[var(--slash)] transition-colors duration-200"
|
||||
className="inline-block text-[18px] font-bold text-[var(--ink)] transition-colors duration-200 hover:text-[var(--slash)]"
|
||||
>
|
||||
evandro@dev.br
|
||||
</a>
|
||||
@@ -70,21 +71,20 @@ export default function Footer() {
|
||||
|
||||
<div className="mt-sp-8">
|
||||
<div className="ds-metric">
|
||||
<span className="inline-block h-1.5 w-1.5 rounded-full bg-slash animate-pulse" />
|
||||
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-slash" />
|
||||
Garuva, SC | Remote worldwide
|
||||
</div>
|
||||
<p className="mt-sp-4 text-[12px] text-[var(--meta)]">
|
||||
© {currentYear} Evandro Fonseca Junior. All rights reserved.
|
||||
Copyright {currentYear} Evandro Fonseca Junior. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="ds-card flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="ds-kicker">SOCIAL_LINKS</div>
|
||||
<div className="ds-kicker">Presenca digital</div>
|
||||
<span className="ds-draw-line" />
|
||||
<h3 className="ds-card-title">Redes profissionais</h3>
|
||||
<h3 className="ds-card-title">Canais profissionais</h3>
|
||||
|
||||
<div className="mt-sp-6 flex flex-col gap-sp-4">
|
||||
{socialLinks.map((link) => (
|
||||
@@ -94,27 +94,42 @@ export default function Footer() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={link.ariaLabel}
|
||||
className="group flex items-center justify-between p-sp-4 border border-[var(--border)] bg-[rgba(10,10,10,0.02)] rounded-[8px] hover:bg-[rgba(10,10,10,0.04)] hover:border-[var(--slash)] transition-all duration-300"
|
||||
className="group flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[rgba(10,10,10,0.02)] p-sp-4 transition-all duration-300 hover:border-[var(--slash)] hover:bg-[rgba(10,10,10,0.04)]"
|
||||
>
|
||||
<div className="flex items-center gap-sp-3">
|
||||
<svg
|
||||
className="w-5 h-5 text-[var(--meta)] group-hover:text-[var(--ink)] transition-colors"
|
||||
className="h-5 w-5 text-[var(--meta)] transition-colors group-hover:text-[var(--ink)]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d={link.icon} />
|
||||
</svg>
|
||||
<span className="text-[14px] font-medium text-[var(--ink-80)] group-hover:text-[var(--ink)] transition-colors">
|
||||
<span className="text-[14px] font-medium text-[var(--ink-80)] transition-colors group-hover:text-[var(--ink)]">
|
||||
{link.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[var(--slash)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 font-bold">
|
||||
→
|
||||
<span className="text-[12px] tracking-[0.08em] text-[var(--meta)] transition-colors group-hover:text-[var(--slash)]">
|
||||
abrir
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-sp-8 border-t border-[var(--border)] pt-sp-5">
|
||||
<div className="ds-kicker">Explorar</div>
|
||||
<div className="mt-sp-4 grid gap-sp-3 md:grid-cols-2">
|
||||
{quickLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="rounded-[8px] border border-[var(--border)] bg-[rgba(10,10,10,0.02)] px-sp-4 py-sp-3 text-[13px] leading-6 text-[var(--ink-80)] transition-colors duration-200 hover:border-[var(--slash)] hover:text-[var(--ink)]"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-sp-8 ds-metric">Open to collaboration</div>
|
||||
|
||||
Reference in new issue
Block a user