feat: initialize portfolio site with core components, pages, and content structure, and update Next.js configuration.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
223746b898
commit
d00258dcd1
22 files changed
+1512
-8038
No files matched your search
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion, type Variants, useReducedMotion } from "framer-motion";
|
||||
import { serviceHubLinks } from "@/lib/site-content";
|
||||
import { Section } from "./Section";
|
||||
import { DrawLine } from "./animations/DrawLine";
|
||||
|
||||
@@ -87,8 +89,7 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
|
||||
|
||||
return (
|
||||
<motion.article
|
||||
tabIndex={0}
|
||||
className={`ds-card h-full relative outline-none ${
|
||||
className={`ds-card relative flex h-full min-w-0 flex-col overflow-hidden outline-none max-md:w-full max-md:max-w-none max-md:px-sp-5 max-md:py-sp-5 ${
|
||||
tier.featured ? "border-[var(--slash)] shadow-sm" : ""
|
||||
}`}
|
||||
style={{
|
||||
@@ -105,42 +106,50 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
|
||||
whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
|
||||
transition={{ type: "spring", stiffness: 180, damping: 18 }}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<span className="ds-kicker">{tier.badge}</span>
|
||||
<span className="font-display text-[11px] font-extrabold tracking-widest text-[var(--meta)]">
|
||||
<div className="flex min-w-0 items-start justify-between gap-sp-4">
|
||||
<span className="ds-kicker max-md:text-[10px] max-md:leading-[1.6]">
|
||||
{tier.badge}
|
||||
</span>
|
||||
<span className="text-[11px] tracking-[0.08em] text-[var(--meta)]">
|
||||
{tier.level}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DrawLine delay={0.04} />
|
||||
|
||||
<div className="mt-sp-4">
|
||||
<h3 className="ds-card-title">{tier.title}</h3>
|
||||
<p className="mt-sp-2 text-[11px] font-medium leading-relaxed text-[var(--meta)]">
|
||||
<div className="mt-sp-4 min-w-0">
|
||||
<h3 className="ds-card-title !mt-0 text-balance !text-[clamp(22px,5vw,28px)] !leading-[1.02] !tracking-[-0.035em] [overflow-wrap:break-word] [word-break:normal]">
|
||||
{tier.title}
|
||||
</h3>
|
||||
<p className="mt-sp-2 text-[12px] leading-[1.7] text-[var(--meta)] md:text-[11px]">
|
||||
{tier.tagline}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="ds-copy">{tier.description}</p>
|
||||
<p className="ds-copy !mt-sp-4 !text-[13px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]">
|
||||
{tier.description}
|
||||
</p>
|
||||
|
||||
<ul className="ds-list">
|
||||
<ul className="ds-list !mt-sp-5 !pl-[1.15rem] !text-[13px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]">
|
||||
{tier.deliverables.map((deliverable) => (
|
||||
<li key={deliverable}>{deliverable}</li>
|
||||
<li key={deliverable} className="pl-sp-1">
|
||||
{deliverable}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="mt-sp-6 border-t border-[var(--border)] pt-sp-4">
|
||||
<div className="font-display text-[clamp(14px,1.5vw,18px)] font-extrabold tracking-tight">
|
||||
<div className="mt-sp-6 space-y-sp-2 border-t border-[var(--border)] pt-sp-5">
|
||||
<div className="font-display text-[clamp(17px,4.6vw,18px)] font-extrabold leading-none tracking-tight">
|
||||
{tier.pricing}
|
||||
</div>
|
||||
<div className="mt-1 text-[10px] tracking-widest text-[var(--meta)] uppercase">
|
||||
<div className="text-[12px] leading-[1.7] text-[var(--meta)]">
|
||||
{tier.pricingNote}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.a
|
||||
href={tier.ctaHref}
|
||||
className={`ds-link mt-sp-6 justify-center w-full ${
|
||||
className={`ds-link mt-sp-6 min-h-[50px] w-full justify-center px-sp-4 py-sp-3 text-center text-[11px] leading-none ${
|
||||
tier.featured ? "ds-link-accent" : "ds-link-muted"
|
||||
}`}
|
||||
whileHover={shouldReduceMotion ? undefined : { scale: 1.02 }}
|
||||
@@ -148,7 +157,6 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
|
||||
transition={{ type: "spring", stiffness: 260, damping: 20 }}
|
||||
>
|
||||
{tier.ctaLabel}
|
||||
{" ->"}
|
||||
</motion.a>
|
||||
</motion.article>
|
||||
);
|
||||
@@ -184,25 +192,53 @@ export function WorkModalities() {
|
||||
return (
|
||||
<Section
|
||||
id="modalities"
|
||||
eyebrow="CONTRACT_PROTOCOLS.sys"
|
||||
title="Engenharia sob demanda. Previsibilidade de entrega sem overhead."
|
||||
description="Tres niveis de contratacao desenhados como uma esteira de valor, do diagnostico rapido a parceria estrategica de longo prazo."
|
||||
eyebrow="Working models"
|
||||
title="Servicos de engenharia de software e consultoria tecnica."
|
||||
description="Formatos de contratacao para arquitetura de software, integracoes criticas, produtos conectados e evolucao de sistemas em producao."
|
||||
disableChildrenAnimation
|
||||
>
|
||||
<div className="mb-sp-8 ds-card bg-[rgba(10,10,10,0.02)]">
|
||||
<div className="flex flex-col gap-sp-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="max-w-[760px]">
|
||||
<div className="ds-kicker">Paginas de servico</div>
|
||||
<h3 className="ds-card-title !mt-sp-3">Especialidades organizadas por intencao de busca</h3>
|
||||
<p className="ds-copy !mt-sp-3 max-w-[62ch]">
|
||||
Se voce chegou buscando uma stack, um tipo de consultoria ou um contexto tecnico especifico,
|
||||
aqui esta o caminho mais direto para a pagina certa.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/servicos" className="ds-link ds-link-accent">
|
||||
Ver hub de servicos
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-sp-6 grid gap-sp-3 md:grid-cols-2 xl:grid-cols-3">
|
||||
{serviceHubLinks.map((service) => (
|
||||
<Link
|
||||
key={service.href}
|
||||
href={service.href}
|
||||
className="rounded-[8px] border border-[var(--border)] bg-white/70 px-sp-4 py-sp-4 transition-colors duration-200 hover:border-[var(--slash)] hover:bg-white"
|
||||
>
|
||||
<div className="text-[12px] font-semibold tracking-[0.02em] text-[var(--ink)]">
|
||||
{service.label}
|
||||
</div>
|
||||
<div className="mt-sp-2 text-[12px] leading-6 text-[var(--meta)]">
|
||||
{service.description}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
|
||||
gap: "var(--sp-6)",
|
||||
}}
|
||||
className="max-md:grid-cols-1 max-md:!flex max-md:!flex-col"
|
||||
className="grid grid-cols-1 gap-sp-4 md:grid-cols-2 md:gap-sp-5 lg:grid-cols-3 lg:gap-sp-6"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
variants={containerVariants}
|
||||
>
|
||||
{TIERS.map((tier) => (
|
||||
<motion.div key={tier.id} variants={itemVariants}>
|
||||
<motion.div key={tier.id} variants={itemVariants} className="min-w-0">
|
||||
<TierCard tier={tier} />
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -210,3 +246,4 @@ export function WorkModalities() {
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user