Build the full site from the copy decks
Adds About, Contact, Services (index + 8) and Industries (index + 7), generated from structured JSON converted out of the .docx copy decks by scripts/convert-docs.py. Shared header with dropdowns, footer, contact form (mailto until a backend exists), FAQ/breadcrumb JSON-LD, sitemap and robots. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
@@ -0,0 +1,19 @@
|
||||
import ContentPage from "@/components/content/content-page";
|
||||
import { pages } from "@/lib/pages";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
|
||||
const page = pages.about;
|
||||
|
||||
export const metadata = pageMetadata(page);
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ContentPage
|
||||
page={page}
|
||||
crumbs={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "About", href: "/about" },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import ContentPage from "@/components/content/content-page";
|
||||
import { pages } from "@/lib/pages";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
|
||||
const page = pages.contact;
|
||||
|
||||
export const metadata = pageMetadata(page);
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ContentPage
|
||||
page={page}
|
||||
crumbs={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Contact", href: "/contact" },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
+761
-5
@@ -277,7 +277,7 @@ a {
|
||||
transition-delay: var(--d, 0ms);
|
||||
}
|
||||
|
||||
[data-reveal].is-in {
|
||||
[data-reveal][data-in] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
@@ -1350,7 +1350,7 @@ a {
|
||||
transition: transform 2.6s var(--ease) 0.2s;
|
||||
}
|
||||
|
||||
.journey.is-in ol::after {
|
||||
.journey[data-in] ol::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
@@ -1371,7 +1371,7 @@ a {
|
||||
transition-delay: calc(var(--i) * 380ms + 300ms);
|
||||
}
|
||||
|
||||
.journey.is-in .dot {
|
||||
.journey[data-in] .dot {
|
||||
background: var(--bianco);
|
||||
}
|
||||
|
||||
@@ -1379,7 +1379,7 @@ a {
|
||||
border-color: var(--rosso);
|
||||
}
|
||||
|
||||
.journey.is-in li:last-child .dot {
|
||||
.journey[data-in] li:last-child .dot {
|
||||
background: var(--rosso);
|
||||
}
|
||||
|
||||
@@ -1422,7 +1422,7 @@ a {
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
}
|
||||
.journey.is-in ol::after {
|
||||
.journey[data-in] ol::after {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.journey .dot {
|
||||
@@ -1812,3 +1812,759 @@ a {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Navigation dropdowns
|
||||
============================================================ */
|
||||
.nav a.is-active {
|
||||
color: var(--bianco);
|
||||
}
|
||||
|
||||
.nav a.is-active::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.nav-panel {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -28px;
|
||||
min-width: 300px;
|
||||
padding-top: 1px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px);
|
||||
transition:
|
||||
opacity 0.3s var(--ease),
|
||||
transform 0.3s var(--ease),
|
||||
visibility 0.3s;
|
||||
}
|
||||
|
||||
.nav-group:hover .nav-panel,
|
||||
.nav-group:focus-within .nav-panel {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.nav-panel-inner {
|
||||
padding: 22px 28px 26px;
|
||||
background: rgba(0, 0, 0, 0.94);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.nav-panel ul {
|
||||
list-style: none;
|
||||
margin: 16px 0 0;
|
||||
padding: 16px 0 0;
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.nav-panel li + li {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.nav .nav-panel a {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.nav .nav-panel a::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav .nav-panel a:hover,
|
||||
.nav .nav-panel a.is-active {
|
||||
color: var(--rosso);
|
||||
}
|
||||
|
||||
.nav .nav-panel .nav-panel-all {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--bianco);
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-sub {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 18px;
|
||||
padding: 0 0 20px;
|
||||
}
|
||||
|
||||
.mobile-sub a {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fumo);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Inner pages
|
||||
============================================================ */
|
||||
.page-hero {
|
||||
min-height: 88svh;
|
||||
}
|
||||
|
||||
.page-hero h1 {
|
||||
max-width: 18ch;
|
||||
font-size: clamp(38px, 5vw, 80px);
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 36px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--piombo);
|
||||
}
|
||||
|
||||
.crumbs span {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.crumbs a {
|
||||
color: var(--fumo);
|
||||
transition: color 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.crumbs a:hover {
|
||||
color: var(--rosso);
|
||||
}
|
||||
|
||||
.crumbs [aria-current] {
|
||||
color: var(--bianco);
|
||||
}
|
||||
|
||||
.emph {
|
||||
margin: 1.2em 0 !important;
|
||||
padding-left: 20px;
|
||||
border-left: 1px solid var(--rosso);
|
||||
font-size: clamp(18px, 1.6vw, 24px);
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--bianco);
|
||||
}
|
||||
|
||||
.cta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 36px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.outro {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: clamp(48px, 6vw, 80px);
|
||||
}
|
||||
|
||||
.outro > * {
|
||||
grid-column: 1 / span 7;
|
||||
}
|
||||
|
||||
.outro-copy {
|
||||
font-size: clamp(18px, 1.7vw, 24px);
|
||||
font-weight: 300;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.outro-copy p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outro-copy p + p {
|
||||
margin-top: 0.8em;
|
||||
color: var(--fumo);
|
||||
}
|
||||
|
||||
.outro .cta-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.outro > * {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* cards */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
|
||||
margin-top: clamp(56px, 7vw, 96px);
|
||||
border-top: 1px solid var(--grafite);
|
||||
border-left: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 28px 36px;
|
||||
border-right: 1px solid var(--grafite);
|
||||
border-bottom: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.card .copy {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card .arrow-link,
|
||||
.card .tick-list {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.card > .arrow-link {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.card-num {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--rosso);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 36px 0 16px;
|
||||
font-size: clamp(18px, 1.5vw, 22px);
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.card-sub {
|
||||
margin: -6px 0 16px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fumo);
|
||||
}
|
||||
|
||||
.tick-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.tick-list li {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 11px 0;
|
||||
border-bottom: 1px solid var(--grafite);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--argento);
|
||||
}
|
||||
|
||||
.tick-list li::before {
|
||||
content: "";
|
||||
flex: none;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
margin-top: 0.75em;
|
||||
background: var(--rosso);
|
||||
}
|
||||
|
||||
.link-card {
|
||||
transition: background-color 0.4s var(--ease);
|
||||
}
|
||||
|
||||
.link-card:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.link-card:hover .arrow-link {
|
||||
color: var(--rosso);
|
||||
border-color: var(--rosso);
|
||||
}
|
||||
|
||||
.link-card:hover .arrow-link .arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.card-title {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* steps */
|
||||
.steps {
|
||||
list-style: none;
|
||||
margin: clamp(56px, 7vw, 96px) 0 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.step {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
padding: 36px 0;
|
||||
border-bottom: 1px solid var(--grafite);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
grid-column: 1 / span 2;
|
||||
font-size: clamp(40px, 4.4vw, 72px);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--piombo);
|
||||
transition: color 0.4s var(--ease);
|
||||
}
|
||||
|
||||
.step:hover .step-num {
|
||||
color: var(--rosso);
|
||||
}
|
||||
|
||||
.step-title {
|
||||
grid-column: 3 / span 4;
|
||||
margin: 0;
|
||||
font-size: clamp(20px, 2vw, 28px);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.step .copy {
|
||||
grid-column: 8 / span 5;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.step {
|
||||
grid-template-columns: 64px 1fr;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
.step-num {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
font-size: 32px;
|
||||
}
|
||||
.step-title,
|
||||
.step .copy {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* faq */
|
||||
.faq {
|
||||
margin-top: clamp(48px, 6vw, 80px);
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border-bottom: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.faq-item summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 28px 0;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
font-size: clamp(17px, 1.6vw, 22px);
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
transition: color 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.faq-item summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-item summary:hover {
|
||||
color: var(--argento);
|
||||
}
|
||||
|
||||
.faq-item summary i {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.faq-item summary i::before,
|
||||
.faq-item summary i::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
background: var(--bianco);
|
||||
transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
|
||||
}
|
||||
|
||||
.faq-item summary i::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.faq-item[open] summary i::after {
|
||||
transform: rotate(0deg);
|
||||
background: var(--rosso);
|
||||
}
|
||||
|
||||
.faq-item[open] summary i::before {
|
||||
background: var(--rosso);
|
||||
}
|
||||
|
||||
.faq-item .copy {
|
||||
max-width: 72ch;
|
||||
padding: 0 0 32px;
|
||||
}
|
||||
|
||||
/* stats on inner pages */
|
||||
.stat-copy {
|
||||
margin-top: 14px;
|
||||
padding-right: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* offices */
|
||||
.offices {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-top: clamp(56px, 7vw, 96px);
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.office {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 24px 8px;
|
||||
border-left: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.office:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.office-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.office .card-title {
|
||||
margin: 0;
|
||||
font-size: clamp(22px, 2vw, 30px);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.office .copy {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.office-address {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--grafite);
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--argento);
|
||||
}
|
||||
|
||||
.office-address em {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-size: 9.5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--piombo);
|
||||
}
|
||||
|
||||
.office-address a {
|
||||
color: var(--bianco);
|
||||
transition: color 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.office-address a:hover {
|
||||
color: var(--rosso);
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.offices {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.office:nth-child(3) {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.office:nth-child(n + 3) {
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.offices {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.office,
|
||||
.office:nth-child(3) {
|
||||
padding: 28px 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.office + .office {
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
}
|
||||
|
||||
/* showcase (industries index) */
|
||||
.showcase {
|
||||
margin-top: clamp(56px, 7vw, 96px);
|
||||
border-top: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.showcase-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
padding: clamp(40px, 5vw, 64px) 0;
|
||||
border-bottom: 1px solid var(--grafite);
|
||||
}
|
||||
|
||||
.showcase-name {
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.showcase-name h3 {
|
||||
margin: 20px 0 12px;
|
||||
font-size: clamp(30px, 3.4vw, 52px);
|
||||
font-weight: 300;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.showcase-body {
|
||||
grid-column: 5 / span 5;
|
||||
}
|
||||
|
||||
.showcase-body h4 {
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
.showcase-body .arrow-link {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.showcase-row > .tick-list {
|
||||
grid-column: 10 / span 3;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.showcase-name,
|
||||
.showcase-body,
|
||||
.showcase-row > .tick-list {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* contact form */
|
||||
.form-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: clamp(48px, 6vw, 80px);
|
||||
}
|
||||
|
||||
.form-copy {
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.form-copy .copy {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.form-layout > :last-child {
|
||||
grid-column: 6 / span 7;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.form-copy,
|
||||
.form-layout > :last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: clamp(28px, 3vw, 44px);
|
||||
border: 1px solid var(--grafite);
|
||||
background: var(--nero);
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.field-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.field > span,
|
||||
.field legend {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fumo);
|
||||
}
|
||||
|
||||
.field legend {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field textarea {
|
||||
width: 100%;
|
||||
padding: 10px 0 12px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--grafite);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--bianco);
|
||||
font: inherit;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s var(--ease);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field input:focus,
|
||||
.field textarea:focus {
|
||||
border-color: var(--rosso);
|
||||
}
|
||||
|
||||
.field input::placeholder {
|
||||
color: var(--piombo);
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chip input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chip span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--grafite);
|
||||
border-radius: 9999px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fumo);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.3s var(--ease),
|
||||
color 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.chip:hover span {
|
||||
color: var(--bianco);
|
||||
}
|
||||
|
||||
.chip input:checked + span {
|
||||
border-color: var(--bianco);
|
||||
color: var(--bianco);
|
||||
}
|
||||
|
||||
.chip input:focus-visible + span {
|
||||
outline: 1px solid var(--rosso);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.contact-form .btn {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
margin: -8px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--piombo);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Suspense } from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import ContentPage from "@/components/content/content-page";
|
||||
import { getIndustry } from "@/lib/pages";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
import { industryNav } from "@/lib/routes";
|
||||
|
||||
type Params = PageProps<"/industries/[slug]">["params"];
|
||||
|
||||
export function generateStaticParams() {
|
||||
return industryNav.map((s) => ({ slug: s.slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps<"/industries/[slug]">) {
|
||||
const { slug } = await params;
|
||||
const page = getIndustry(slug);
|
||||
return page ? pageMetadata(page) : {};
|
||||
}
|
||||
|
||||
export default function Page({ params }: PageProps<"/industries/[slug]">) {
|
||||
return (
|
||||
<Suspense fallback={<section className="hero page-hero" aria-busy="true" />}>
|
||||
<Content params={params} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
async function Content({ params }: { params: Params }) {
|
||||
const { slug } = await params;
|
||||
const page = getIndustry(slug);
|
||||
if (!page) notFound();
|
||||
const name = industryNav.find((s) => s.slug === slug)?.name ?? slug;
|
||||
|
||||
return (
|
||||
<ContentPage
|
||||
page={page}
|
||||
crumbs={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Industries", href: "/industries" },
|
||||
{ name, href: `/industries/${slug}` },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import ContentPage from "@/components/content/content-page";
|
||||
import { pages } from "@/lib/pages";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
|
||||
const page = pages.industries;
|
||||
|
||||
export const metadata = pageMetadata(page);
|
||||
|
||||
export default function IndustriesPage() {
|
||||
return (
|
||||
<ContentPage
|
||||
page={page}
|
||||
crumbs={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Industries", href: "/industries" },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
+19
-3
@@ -1,6 +1,9 @@
|
||||
import { Suspense } from "react";
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import SiteHeader from "@/components/site-header";
|
||||
import SiteFooter from "@/components/site-footer";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
@@ -13,7 +16,10 @@ const description =
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://www.aigrowthtechnologies.com"),
|
||||
title: "AI Growth Technologies | Digital Growth for the AI Era",
|
||||
title: {
|
||||
default: "AI Growth Technologies | Digital Growth for the AI Era",
|
||||
template: "%s",
|
||||
},
|
||||
description,
|
||||
alternates: { canonical: "/" },
|
||||
openGraph: {
|
||||
@@ -32,8 +38,18 @@ export const viewport: Viewport = {
|
||||
|
||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||
return (
|
||||
<html lang="en" className={inter.variable}>
|
||||
<body>{children}</body>
|
||||
<html lang="en" className={inter.variable} data-scroll-behavior="smooth">
|
||||
<body>
|
||||
<a href="#main" className="skip-link">
|
||||
Skip to content
|
||||
</a>
|
||||
{/* The header reads the pathname, which is request data on dynamic routes. */}
|
||||
<Suspense>
|
||||
<SiteHeader />
|
||||
</Suspense>
|
||||
<main id="main">{children}</main>
|
||||
<SiteFooter />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+17
-89
@@ -1,13 +1,13 @@
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
import SiteHeader from "@/components/site-header";
|
||||
import GlobeCanvas from "@/components/globe-canvas";
|
||||
import RevealObserver from "@/components/reveal-observer";
|
||||
import StatCounter from "@/components/stat-counter";
|
||||
import RevealObserver from "@/components/reveal-observer";
|
||||
import Capabilities from "@/components/capabilities";
|
||||
import QueryTicker from "@/components/query-ticker";
|
||||
import ProductVisual from "@/components/product-visuals";
|
||||
import { LogoStacked } from "@/components/logo";
|
||||
import { stats, products, journeySteps, gaps, footerColumns } from "@/content/home";
|
||||
import Link from "next/link";
|
||||
import { stats, products, journeySteps, gaps } from "@/content/home";
|
||||
import { hrefFor } from "@/lib/routes";
|
||||
|
||||
type Vars = CSSProperties & Record<`--${string}`, string | number>;
|
||||
const delay = (ms: number) => ({ "--d": `${ms}ms` }) as Vars;
|
||||
@@ -26,13 +26,6 @@ function Eyebrow({ index, children }: { index?: string; children: ReactNode }) {
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<a href="#main" className="skip-link">
|
||||
Skip to content
|
||||
</a>
|
||||
<SiteHeader />
|
||||
<RevealObserver />
|
||||
|
||||
<main id="main">
|
||||
{/* ───────────────────────── Hero ───────────────────────── */}
|
||||
<section className="hero" id="top" aria-labelledby="hero-title">
|
||||
<GlobeCanvas />
|
||||
@@ -61,12 +54,12 @@ export default function Home() {
|
||||
<p className="hl">One strategy. Connected execution. A clearer view of what is actually driving growth.</p>
|
||||
</div>
|
||||
<div className="hero-actions">
|
||||
<a href="#contact" className="btn btn-solid">
|
||||
<Link href="/contact" className="btn btn-solid">
|
||||
Book a Strategy Call <Arrow />
|
||||
</a>
|
||||
<a href="#capabilities" className="btn btn-ghost">
|
||||
</Link>
|
||||
<Link href="/services" className="btn btn-ghost">
|
||||
Explore Services <Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,9 +184,9 @@ export default function Home() {
|
||||
<p key={b}>{b}</p>
|
||||
))}
|
||||
</div>
|
||||
<a href="#" className="arrow-link">
|
||||
<Link href={hrefFor(p.cta)} className="arrow-link">
|
||||
{p.cta} <Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
@@ -249,9 +242,9 @@ export default function Home() {
|
||||
</p>
|
||||
<p>Our SEO and LLMO work connects both sides of that shift.</p>
|
||||
</div>
|
||||
<a href="#" className="arrow-link" style={{ marginTop: 28 }}>
|
||||
<Link href="/services/llmo" className="arrow-link" style={{ marginTop: 28 }}>
|
||||
Explore AI Visibility <Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -305,9 +298,9 @@ export default function Home() {
|
||||
It is about knowing where the next dollar has the best chance of doing something useful.
|
||||
</p>
|
||||
</figcaption>
|
||||
<a href="#" className="arrow-link">
|
||||
<Link href="/about" className="arrow-link">
|
||||
Explore Our Approach <Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
@@ -390,79 +383,14 @@ export default function Home() {
|
||||
<p className="muted">Bring us what you’re seeing. We’ll start there.</p>
|
||||
</div>
|
||||
<div data-reveal style={delay(400)}>
|
||||
<a href="#" className="btn btn-solid">
|
||||
<Link href="/contact" className="btn btn-solid">
|
||||
Book Your Strategy Call <Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* ───────────────────────── Footer ───────────────────────── */}
|
||||
<footer className="footer">
|
||||
<div className="wrap">
|
||||
<div className="footer-top">
|
||||
<div className="footer-brand">
|
||||
<LogoStacked />
|
||||
<p>
|
||||
Paid media, SEO, AI visibility, web, attribution, and technology — connected into one accountable
|
||||
digital growth system.
|
||||
</p>
|
||||
<div className="socials">
|
||||
<a href="#" aria-label="LinkedIn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||||
<rect x="3" y="3" width="18" height="18" />
|
||||
<path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="Instagram">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path d="M17.5 6.5v.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="X">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||||
<path d="M4 4l16 16M20 4L4 20" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="YouTube">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||||
<rect x="2.5" y="5.5" width="19" height="13" rx="3" />
|
||||
<path d="M10 9.5v5l4.5-2.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-cols">
|
||||
{footerColumns.map((col) => (
|
||||
<div key={col.title}>
|
||||
<h4>{col.title}</h4>
|
||||
<ul>
|
||||
{col.links.map((l) => (
|
||||
<li key={l}>
|
||||
<a href="#">{l}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="footer-word" aria-hidden="true">
|
||||
AI Growth Technologies
|
||||
</p>
|
||||
<div className="footer-bottom">
|
||||
<span>© 2026 AI Growth Technologies. All rights reserved.</span>
|
||||
<nav aria-label="Legal">
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Terms</a>
|
||||
<a href="#">Cookies</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<RevealObserver />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
import { SITE_URL } from "@/lib/routes";
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return { rules: { userAgent: "*", allow: "/" }, sitemap: `${SITE_URL}/sitemap.xml` };
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Suspense } from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import ContentPage from "@/components/content/content-page";
|
||||
import { getService } from "@/lib/pages";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
import { serviceNav } from "@/lib/routes";
|
||||
|
||||
type Params = PageProps<"/services/[slug]">["params"];
|
||||
|
||||
export function generateStaticParams() {
|
||||
return serviceNav.map((s) => ({ slug: s.slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps<"/services/[slug]">) {
|
||||
const { slug } = await params;
|
||||
const page = getService(slug);
|
||||
return page ? pageMetadata(page) : {};
|
||||
}
|
||||
|
||||
export default function Page({ params }: PageProps<"/services/[slug]">) {
|
||||
return (
|
||||
<Suspense fallback={<section className="hero page-hero" aria-busy="true" />}>
|
||||
<Content params={params} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
async function Content({ params }: { params: Params }) {
|
||||
const { slug } = await params;
|
||||
const page = getService(slug);
|
||||
if (!page) notFound();
|
||||
const name = serviceNav.find((s) => s.slug === slug)?.name ?? slug;
|
||||
|
||||
return (
|
||||
<ContentPage
|
||||
page={page}
|
||||
crumbs={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name, href: `/services/${slug}` },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import ContentPage from "@/components/content/content-page";
|
||||
import { pages } from "@/lib/pages";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
|
||||
const page = pages.services;
|
||||
|
||||
export const metadata = pageMetadata(page);
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ContentPage
|
||||
page={page}
|
||||
crumbs={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Services", href: "/services" },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
import { SITE_URL, industryNav, serviceNav } from "@/lib/routes";
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const paths = [
|
||||
"",
|
||||
"/about",
|
||||
"/contact",
|
||||
"/services",
|
||||
...serviceNav.map((s) => `/services/${s.slug}`),
|
||||
"/industries",
|
||||
...industryNav.map((s) => `/industries/${s.slug}`),
|
||||
];
|
||||
return paths.map((p) => ({ url: SITE_URL + p, priority: p === "" ? 1 : p.split("/").length === 2 ? 0.8 : 0.6 }));
|
||||
}
|
||||
Reference in New Issue
Block a user