Evandro Fonseca JuniorandClaude Sonnet 5.5
d8b59b03f2
- tokens --shell, --fs-section-title e --fs-lead: iguais ao desenho atual ate ~1440px e crescem em telas grandes - .ds-section-header vira container; acima de 880px o titulo fica a esquerda e a descricao a direita (aninhamento nativo + container query) - .ds-grid-fluid: 2 colunas em notebook e 3 em tela grande, sem breakpoint (usada em Projects) - Hero acompanha a largura util em telas grandes Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import Link from "next/link";
|
|
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
|
|
import HeroSystem from "./cinematic/HeroSystem";
|
|
|
|
const SOCIAL_LINKS = [
|
|
{
|
|
href: "https://github.com/evandrodevbr",
|
|
label: "GitHub",
|
|
},
|
|
{
|
|
href: "https://www.linkedin.com/in/evandro-fonseca-junior-0969aa1b0/",
|
|
label: "LinkedIn",
|
|
},
|
|
{
|
|
href: "mailto:[email protected]",
|
|
label: "Email",
|
|
},
|
|
];
|
|
|
|
export default function Hero() {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<section
|
|
id="home"
|
|
className="w-full bg-[var(--ink)] font-display text-[#f4f2ed]"
|
|
>
|
|
<motion.div
|
|
initial={shouldReduceMotion ? false : { opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: shouldReduceMotion ? 0 : 0.45,
|
|
ease: "easeOut",
|
|
}}
|
|
className="mx-auto grid w-full max-w-[max(1400px,var(--shell))] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
|
|
>
|
|
<div className="min-w-0">
|
|
<p className="mb-sp-5 text-[14px] leading-[1.5] text-[rgba(244,242,237,.72)]">
|
|
Evandro Fonseca Junior · Engenharia de software
|
|
</p>
|
|
<h1 className="max-w-[700px] text-balance text-[34px] font-semibold leading-[1.05] tracking-[-0.045em] sm:text-[48px] xl:text-[60px]">
|
|
Sistemas sob medida para operações que não cabem em soluções
|
|
prontas.
|
|
</h1>
|
|
<p className="mt-sp-5 max-w-[600px] text-[16px] leading-[1.55] text-[rgba(244,242,237,.8)] lg:text-[18px]">
|
|
Projeto e desenvolvo sistemas web, aplicativos e integrações, do
|
|
entendimento do negócio à arquitetura e à entrega em produção.
|
|
</p>
|
|
|
|
<div className="mt-sp-6 flex flex-col gap-sp-3 sm:flex-row sm:flex-wrap sm:items-center">
|
|
<Link
|
|
href="/#contact"
|
|
className="inline-flex min-h-12 items-center justify-center bg-[var(--slash)] px-sp-4 py-sp-3 text-center text-[15px] font-semibold leading-6 text-[var(--ink)] no-underline transition-colors hover:bg-[#d9ff40] motion-reduce:transition-none sm:px-sp-6 sm:text-[16px]"
|
|
>
|
|
Conversar sobre meu projeto
|
|
</Link>
|
|
<Link
|
|
href="/cases"
|
|
className="inline-flex min-h-12 items-center justify-center border border-white/12 px-sp-5 py-sp-3 text-center text-[15px] font-medium leading-6 text-[#f4f2ed] no-underline transition-colors hover:border-white/40 motion-reduce:transition-none sm:text-[16px]"
|
|
>
|
|
Ver projetos entregues
|
|
</Link>
|
|
</div>
|
|
<p className="mt-sp-3 text-[13px] leading-[1.5] text-[rgba(244,242,237,.64)]">
|
|
Santa Catarina · Atendimento remoto
|
|
</p>
|
|
</div>
|
|
<div className="min-w-0 lg:col-start-2 lg:row-start-1 lg:row-span-2">
|
|
<HeroSystem />
|
|
</div>
|
|
<div className="min-w-0 lg:col-start-1 lg:row-start-2">
|
|
<ul className="flex flex-wrap gap-x-sp-5 gap-y-sp-2 text-[14px] leading-[1.5] text-[rgba(244,242,237,.8)]">
|
|
{["Sistemas web", "Aplicativos", "Integrações"].map((service) => (
|
|
<li key={service} className="flex items-center gap-sp-2">
|
|
<span
|
|
aria-hidden="true"
|
|
className="h-1 w-1 bg-[var(--slash)]"
|
|
/>
|
|
{service}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-sp-2 flex flex-wrap gap-x-sp-5">
|
|
{SOCIAL_LINKS.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
target={link.href.startsWith("http") ? "_blank" : undefined}
|
|
rel={
|
|
link.href.startsWith("http")
|
|
? "noopener noreferrer"
|
|
: undefined
|
|
}
|
|
className="inline-flex min-h-11 items-center text-[13px] text-[rgba(244,242,237,.64)] no-underline underline-offset-4 hover:text-[#f4f2ed] hover:underline"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|