feat: V1 landing page
This commit is contained in:
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.astro
|
||||||
7
astro.config.mjs
Normal file
7
astro.config.mjs
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
host: true
|
||||||
|
}
|
||||||
|
});
|
||||||
5564
package-lock.json
generated
Normal file
5564
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "slaksis-web",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"start": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fontsource-variable/manrope": "^5.1.1",
|
||||||
|
"@fontsource/newsreader": "^5.1.1",
|
||||||
|
"astro": "^5.7.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^5.8.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="astro/client" />
|
||||||
25
src/layouts/BaseLayout.astro
Normal file
25
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
import "@fontsource-variable/manrope";
|
||||||
|
import "../styles/global.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<meta name="theme-color" content="#0f1720" />
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
249
src/pages/index.astro
Normal file
249
src/pages/index.astro
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
title: "Desarrollo de software",
|
||||||
|
description:
|
||||||
|
"Diseño y construcción de sistemas internos, plataformas de gestión y aplicaciones web con foco en continuidad operativa, rendimiento y mantenimiento."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Infraestructura administrada",
|
||||||
|
description:
|
||||||
|
"Despliegue y operación de entornos controlados con administración directa de servidores, contenedores, correo y componentes críticos."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Automatización e integración",
|
||||||
|
description:
|
||||||
|
"Integración entre procesos físicos y digitales mediante controladores, sensores, flujos automáticos y soluciones conectadas."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cobros recurrentes y operación digital",
|
||||||
|
description:
|
||||||
|
"Implementación de cobros, suscripciones y flujos operativos que simplifican la administración comercial y reducen fricción."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const pillars = [
|
||||||
|
"Diagnóstico técnico claro, sin complejidad innecesaria.",
|
||||||
|
"Arquitecturas proporcionales al tamaño real del proyecto.",
|
||||||
|
"Operación continua con énfasis en seguridad y disponibilidad.",
|
||||||
|
"Acompañamiento posterior al lanzamiento, no solo entrega inicial."
|
||||||
|
];
|
||||||
|
|
||||||
|
const metrics = [
|
||||||
|
{ value: "Software", label: "para operación, gestión y experiencia digital" },
|
||||||
|
{ value: "Infraestructura", label: "administrada con control técnico directo" },
|
||||||
|
{ value: "Automatización", label: "para procesos, dispositivos e integración" }
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="Slaksis Chile SpA | Desarrollo, infraestructura y automatización"
|
||||||
|
description="Slaksis desarrolla soluciones digitales, infraestructura administrada y automatización para empresas y organizaciones."
|
||||||
|
>
|
||||||
|
<main class="page-shell">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container hero__inner">
|
||||||
|
<header class="topbar" data-reveal>
|
||||||
|
<div class="brand">
|
||||||
|
<span class="brand__mark">SL</span>
|
||||||
|
<div>
|
||||||
|
<p>Slaksis Chile SpA</p>
|
||||||
|
<span>Soluciones digitales e infraestructura</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="topbar__nav" aria-label="Secciones principales">
|
||||||
|
<a href="#servicios">Servicios</a>
|
||||||
|
<a href="#enfoque">Enfoque</a>
|
||||||
|
<a href="#contacto">Contacto</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<a class="button button--ghost topbar__cta" href="mailto:contacto@slaksis.com?subject=Consulta%20Slaksis">
|
||||||
|
contacto@slaksis.com
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hero__content">
|
||||||
|
<div class="hero__copy" data-reveal>
|
||||||
|
<p class="eyebrow">Desarrollo, infraestructura y automatización para empresas y organizaciones</p>
|
||||||
|
<h1>Soluciones tecnológicas con estándar empresarial y ejecución técnica integral.</h1>
|
||||||
|
<p class="lead">
|
||||||
|
Slaksis Chile SpA diseña, implementa y opera soluciones digitales para organizaciones que requieren orden,
|
||||||
|
confiabilidad y control técnico real. Cada proyecto se estructura para responder a necesidades concretas, con
|
||||||
|
decisiones proporcionales y foco en continuidad.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hero__actions">
|
||||||
|
<a class="button button--primary" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20reuni%C3%B3n">
|
||||||
|
Solicitar reunión
|
||||||
|
</a>
|
||||||
|
<a class="button button--secondary" href="#servicios">Ver capacidades</a>
|
||||||
|
<a class="button button--ghost" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20propuesta">
|
||||||
|
Solicitar propuesta
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="hero__panel" aria-label="Contacto institucional" data-reveal>
|
||||||
|
<p class="hero__panel-label">Contacto institucional</p>
|
||||||
|
<a class="hero__mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
|
||||||
|
<p class="hero__panel-copy">
|
||||||
|
Canal directo para evaluación de proyectos, requerimientos de infraestructura, continuidad operativa y
|
||||||
|
automatización.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="contact-list">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span>Canal principal</span>
|
||||||
|
<strong>Correo corporativo</strong>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span>Cobertura</span>
|
||||||
|
<strong>Desarrollo, hosting y operación</strong>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span>Modalidad</span>
|
||||||
|
<strong>Atención remota y coordinación directa</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero__panel-actions">
|
||||||
|
<a class="button button--primary button--full" href="mailto:contacto@slaksis.com?subject=Consulta%20general">
|
||||||
|
Enviar correo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="metrics" data-reveal>
|
||||||
|
<div class="container metrics__grid">
|
||||||
|
{metrics.map((metric) => (
|
||||||
|
<article class="metric-card">
|
||||||
|
<strong>{metric.value}</strong>
|
||||||
|
<span>{metric.label}</span>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="servicios">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section__intro" data-reveal>
|
||||||
|
<p class="eyebrow">Servicios</p>
|
||||||
|
<h2>Capacidades orientadas a resolver operación, crecimiento y soporte tecnológico continuo.</h2>
|
||||||
|
<p>
|
||||||
|
El portafolio combina desarrollo, infraestructura y operación para evitar fragmentación técnica y reducir la
|
||||||
|
dependencia de múltiples proveedores sin coordinación.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-grid">
|
||||||
|
{services.map((service) => (
|
||||||
|
<article class="service-card" data-reveal>
|
||||||
|
<h3>{service.title}</h3>
|
||||||
|
<p>{service.description}</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section section--accent" id="enfoque">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section__intro" data-reveal>
|
||||||
|
<p class="eyebrow">Enfoque de trabajo</p>
|
||||||
|
<h2>Decisiones claras, implementación formal y foco constante en seguridad y continuidad.</h2>
|
||||||
|
<p>
|
||||||
|
La prioridad no está en complejizar la solución, sino en definir una arquitectura adecuada al problema real y
|
||||||
|
sostenerla correctamente durante la operación.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pillars">
|
||||||
|
{pillars.map((pillar, index) => (
|
||||||
|
<div class="pillar" data-reveal>
|
||||||
|
<span class="pillar__index">0{index + 1}</span>
|
||||||
|
<p>{pillar}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container two-column">
|
||||||
|
<article class="story-card" data-reveal>
|
||||||
|
<p class="eyebrow">Perfil institucional</p>
|
||||||
|
<h2>Participación técnica directa desde la definición hasta la operación.</h2>
|
||||||
|
<p>
|
||||||
|
Slaksis asume responsabilidad sobre arquitectura, despliegue, correo, seguridad, monitoreo y evolución del
|
||||||
|
sistema. La entrega no se limita a publicar una aplicación: incluye criterio técnico para sostenerla.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="story-card story-card--accent" data-reveal>
|
||||||
|
<p class="eyebrow">Dirección</p>
|
||||||
|
<h2>Gabriel Rojas</h2>
|
||||||
|
<p>
|
||||||
|
Gerente General de Slaksis Chile SpA. Formación en Ingeniería Civil en Computación y experiencia aplicada en
|
||||||
|
desarrollo de software, infraestructura administrada y ciberseguridad.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section cta" id="contacto">
|
||||||
|
<div class="container cta__grid">
|
||||||
|
<div data-reveal>
|
||||||
|
<p class="eyebrow">Contacto</p>
|
||||||
|
<h2>Disponibilidad para evaluar requerimientos, estructurar propuestas y coordinar próximas etapas.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cta__content" data-reveal>
|
||||||
|
<p>
|
||||||
|
Para consultas comerciales o técnicas, el canal institucional es
|
||||||
|
<a class="cta__mail" href="mailto:contacto@slaksis.com"> contacto@slaksis.com</a>. Desde ahí se puede iniciar
|
||||||
|
evaluación de proyecto, solicitud de propuesta o coordinación de reunión.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="cta__actions">
|
||||||
|
<a class="button button--light" href="mailto:contacto@slaksis.com?subject=Consulta%20comercial">
|
||||||
|
Contacto comercial
|
||||||
|
</a>
|
||||||
|
<a class="button button--light-outline" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20cotizaci%C3%B3n">
|
||||||
|
Solicitar cotización
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
document.documentElement.classList.add("js");
|
||||||
|
|
||||||
|
const elements = document.querySelectorAll("[data-reveal]");
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add("is-visible");
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
threshold: 0.16,
|
||||||
|
rootMargin: "0px 0px -8% 0px"
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const element of elements) {
|
||||||
|
observer.observe(element);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</BaseLayout>
|
||||||
622
src/styles/global.css
Normal file
622
src/styles/global.css
Normal file
@@ -0,0 +1,622 @@
|
|||||||
|
:root {
|
||||||
|
--bg-top: #0b1520;
|
||||||
|
--bg-bottom: #eef3f7;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-soft: #f5f8fb;
|
||||||
|
--surface-accent: #eaf1f7;
|
||||||
|
--text: #112131;
|
||||||
|
--text-soft: #5f7284;
|
||||||
|
--text-inverse: #f4f8fb;
|
||||||
|
--line: rgba(17, 33, 49, 0.12);
|
||||||
|
--line-strong: rgba(17, 33, 49, 0.2);
|
||||||
|
--line-inverse: rgba(226, 236, 243, 0.18);
|
||||||
|
--accent: #1f4f7a;
|
||||||
|
--accent-strong: #173d5f;
|
||||||
|
--container: min(1280px, calc(100vw - 2rem));
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
scroll-padding-top: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
font-family: "Manrope Variable", sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(48, 102, 151, 0.22), transparent 20%),
|
||||||
|
linear-gradient(180deg, var(--bg-top) 0%, #101d2a 18%, #dfe7ee 65%, var(--bg-bottom) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: var(--container);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 100svh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
padding: max(18px, env(safe-area-inset-top)) 0 2rem;
|
||||||
|
border-bottom: 1px solid var(--line-inverse);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__inner {
|
||||||
|
min-height: calc(100svh - 2rem);
|
||||||
|
min-height: calc(100dvh - 2rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 0.25rem 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand__mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 1px solid rgba(222, 233, 241, 0.2);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
font-size: 0.86rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand p {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand span {
|
||||||
|
color: rgba(228, 237, 244, 0.74);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
color: rgba(228, 237, 244, 0.8);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__nav a {
|
||||||
|
transition: color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__nav a:hover,
|
||||||
|
.topbar__nav a:focus-visible {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.78fr);
|
||||||
|
gap: clamp(2rem, 4vw, 4rem);
|
||||||
|
align-items: center;
|
||||||
|
padding: clamp(1.5rem, 5vh, 3.5rem) 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #90b6da;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
max-width: 11.5ch;
|
||||||
|
font-size: clamp(2.9rem, 5.8vw, 5.35rem);
|
||||||
|
font-weight: 780;
|
||||||
|
line-height: 0.96;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
max-width: 60ch;
|
||||||
|
margin-top: 1.35rem;
|
||||||
|
color: rgba(228, 237, 244, 0.8);
|
||||||
|
font-size: clamp(1rem, 1.2vw, 1.12rem);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__actions,
|
||||||
|
.cta__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__actions {
|
||||||
|
margin-top: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 52px;
|
||||||
|
padding: 0 1.35rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 0.96rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
transition:
|
||||||
|
transform 180ms ease,
|
||||||
|
border-color 180ms ease,
|
||||||
|
background-color 180ms ease,
|
||||||
|
color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
.button:focus-visible {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--primary {
|
||||||
|
background: linear-gradient(180deg, #2d6495, #234d73);
|
||||||
|
color: #f7fbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--secondary {
|
||||||
|
border-color: rgba(224, 234, 241, 0.18);
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
color: #f4f8fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--ghost {
|
||||||
|
border-color: rgba(224, 234, 241, 0.16);
|
||||||
|
color: rgba(236, 243, 248, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--light {
|
||||||
|
background: #ffffff;
|
||||||
|
color: var(--accent-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--light-outline {
|
||||||
|
border-color: rgba(255, 255, 255, 0.28);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__cta {
|
||||||
|
min-height: 46px;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel {
|
||||||
|
padding-left: clamp(1.5rem, 3vw, 2.5rem);
|
||||||
|
border-left: 1px solid rgba(225, 235, 242, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel-label {
|
||||||
|
color: rgba(228, 237, 244, 0.72);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__mail {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: clamp(1.5rem, 2vw, 2rem);
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel-copy {
|
||||||
|
margin-top: 1rem;
|
||||||
|
color: rgba(228, 237, 244, 0.72);
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
border-top: 1px solid rgba(225, 235, 242, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-bottom: 1px solid rgba(225, 235, 242, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item span {
|
||||||
|
color: rgba(228, 237, 244, 0.64);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item strong {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel-actions {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics {
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding: 1.75rem 1.2rem;
|
||||||
|
border-right: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card strong {
|
||||||
|
font-size: 1.65rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card span {
|
||||||
|
color: var(--text-soft);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: clamp(4.5rem, 9vw, 7rem) 0;
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--accent {
|
||||||
|
background: var(--surface-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__intro {
|
||||||
|
max-width: 760px;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h2,
|
||||||
|
.story-card h2,
|
||||||
|
.cta h2 {
|
||||||
|
font-size: clamp(2rem, 4.2vw, 3.7rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.04;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__intro p:last-child,
|
||||||
|
.story-card p:last-child,
|
||||||
|
.cta p:last-child {
|
||||||
|
margin-top: 1.1rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid,
|
||||||
|
.pillars,
|
||||||
|
.two-column,
|
||||||
|
.cta__grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid,
|
||||||
|
.pillars,
|
||||||
|
.two-column {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta__grid {
|
||||||
|
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card,
|
||||||
|
.pillar,
|
||||||
|
.story-card {
|
||||||
|
padding: 1.5rem 0 1.6rem;
|
||||||
|
border-top: 1px solid var(--line-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h3 {
|
||||||
|
margin-bottom: 0.85rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card p,
|
||||||
|
.pillar p {
|
||||||
|
color: var(--text-soft);
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 1.1rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar__index {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-card {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-card--accent {
|
||||||
|
border-color: rgba(31, 79, 122, 0.34);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(11, 21, 32, 0.99), rgba(26, 58, 89, 0.96)),
|
||||||
|
var(--bg-top);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta .eyebrow,
|
||||||
|
.cta p:last-child {
|
||||||
|
color: rgba(230, 238, 244, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta__content {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta__mail {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js [data-reveal] {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px);
|
||||||
|
transition:
|
||||||
|
opacity 720ms ease,
|
||||||
|
transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
will-change: transform, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js [data-reveal].is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.topbar,
|
||||||
|
.hero__content,
|
||||||
|
.metrics__grid,
|
||||||
|
.service-grid,
|
||||||
|
.pillars,
|
||||||
|
.two-column,
|
||||||
|
.cta__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
justify-items: start;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__nav {
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.9rem 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 1px solid rgba(225, 235, 242, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 981px) and (max-height: 940px) {
|
||||||
|
.hero {
|
||||||
|
padding-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__inner {
|
||||||
|
min-height: calc(100svh - 1.25rem);
|
||||||
|
min-height: calc(100dvh - 1.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
padding-bottom: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
gap: 2rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
max-width: 12ch;
|
||||||
|
font-size: clamp(2.8rem, 4.9vw, 4.95rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__actions {
|
||||||
|
margin-top: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list {
|
||||||
|
margin-top: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
padding: 0.85rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__panel-actions {
|
||||||
|
margin-top: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.hero__content {
|
||||||
|
grid-template-columns: minmax(0, 1.72fr) minmax(320px, 0.7fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
html {
|
||||||
|
scroll-padding-top: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(100vw - 1.25rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__inner {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
gap: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(2.55rem, 13vw, 4.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.72;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.topbar__cta {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__actions,
|
||||||
|
.cta__actions {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card,
|
||||||
|
.pillar,
|
||||||
|
.story-card {
|
||||||
|
padding-top: 1.2rem;
|
||||||
|
padding-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js [data-reveal] {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
tsconfig.json
Normal file
6
tsconfig.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "."
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user