Added english

2025-11-03 07:43:47 +01:00
parent 45606723ea
commit 5d31973be3
12 changed files with 370 additions and 8 deletions
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,9 +1,40 @@
 ---
 import "../styles/globals.css";
 const { title = "Valtrix – Struktur schafft Wert", description = "Cloud, Security & AI Consulting aus Berlin", path = "/" } = Astro.props;
+// Language & routing helpers
+const pathname = Astro.url.pathname;
+const isEn = pathname.startsWith('/en');
+const lang = isEn ? 'en' : 'de';
+const prefix = isEn ? '/en' : '';
+const stripEn = (p) => p.replace(/^\/en(?=\/|$)/, '');
+const altHref = isEn ? (stripEn(pathname) || '/') : ('/en' + (pathname === '/' ? '' : pathname));
+// Canonical/alternate URLs (use provided path when present for og/link tags)
+const canonicalPath = path || pathname;
+const deHref = stripEn(canonicalPath) || '/';
+const enHref = canonicalPath.startsWith('/en') ? canonicalPath : ('/en' + (canonicalPath === '/' ? '' : canonicalPath));
+// Nav labels per language
+const labels = isEn ? {
+  services: 'Services',
+  security: 'Security',
+  cases: 'Case Studies',
+  about: 'About',
+  contact: 'Contact',
+  imprint: 'Imprint',
+  privacy: 'Privacy',
+  langShort: 'DE',
+} : {
+  services: 'Leistungen',
+  security: 'Sicherheit',
+  cases: 'Referenzen',
+  about: 'Über uns',
+  contact: 'Kontakt',
+  imprint: 'Impressum',
+  privacy: 'Datenschutz',
+  langShort: 'EN',
+};
 ---
 <!doctype html>
-<html lang="de" data-theme="dark">
+<html lang={lang} data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -15,20 +46,23 @@ const { title = "Valtrix – Struktur schafft Wert", description = "Cloud, Secur
  <meta property="og:url" content={`https://valtrix.systems${path}`} />
    <meta property="og:image" content="/og-image.png" />
    <link rel="icon" type="image/png" href="/logo-valtrix.png" />
+    <link rel="alternate" hreflang="de" href={`https://valtrix.systems${deHref}`} />
+    <link rel="alternate" hreflang="en" href={`https://valtrix.systems${enHref}`} />
  </head>
  <body class="bg-white transition-colors duration-300">
    <header class="max-w-7xl mx-auto px-6 py-6">
      <nav class="flex items-center justify-between">
-        <a href="/" class="flex items-center gap-3 font-semibold">
+        <a href={`${prefix || '/'}`} class="flex items-center gap-3 font-semibold">
          <img src="/logo-valtrix.png" alt="Valtrix" class="h-9 w-9 rounded-md shadow-sm"/>
          <span class="tracking-wide text-lg">VALTRIX</span>
        </a>
        <div class="flex items-center gap-6">
-          <a href="/leistungen" class="text-textMuted hover:text-white">Leistungen</a>
-          <a href="/sicherheit" class="text-textMuted hover:text-white">Sicherheit</a>
-          <a href="/cases" class="text-textMuted hover:text-white">Referenzen</a>
-          <a href="/ueber-uns" class="text-textMuted hover:text-white">Über uns</a>
-          <a href="/kontakt" class="px-4 py-2 rounded-brand bg-primary text-white hover:opacity-90">Kontakt</a>
+          <a href={`${prefix}/leistungen`} class="text-textMuted hover:text-white">{labels.services}</a>
+          <a href={`${prefix}/sicherheit`} class="text-textMuted hover:text-white">{labels.security}</a>
+          <a href={`${prefix}/cases`} class="text-textMuted hover:text-white">{labels.cases}</a>
+          <a href={`${prefix}/ueber-uns`} class="text-textMuted hover:text-white">{labels.about}</a>
+          <a href={`${prefix}/kontakt`} class="px-4 py-2 rounded-brand bg-primary text-white hover:opacity-90">{labels.contact}</a>
+          <a href={altHref} class="px-3 py-2 border rounded-brand hover:bg-graybg" aria-label="Language switch">{labels.langShort}</a>
          <button id="themeToggle" aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button>
        </div>
      </nav>
@@ -40,7 +74,7 @@ const { title = "Valtrix – Struktur schafft Wert", description = "Cloud, Secur
      <div class="flex items-center gap-3 mb-3">
        <strong>Valtrix</strong> · Precision. Power. Purpose.
      </div>
-      © {new Date().getFullYear()} Valtrix · <a href="/impressum" class="underline">Impressum</a> · <a href="/datenschutz" class="underline">Datenschutz</a>
+      © {new Date().getFullYear()} Valtrix · <a href={`${prefix}/impressum`} class="underline">{labels.imprint}</a> · <a href={`${prefix}/datenschutz`} class="underline">{labels.privacy}</a>
    </footer>
    <script>
      const btn = document.getElementById('themeToggle');
--- a/src/pages/en/cases.astro
+++ b/src/pages/en/cases.astro
@@ -0,0 +1,19 @@
+---
+import Base from "../../layouts/Base.astro";
+const items = [
+  { slug: "cloud-migration", title: "Secure Cloud Migration (AWS/Azure)", summary: "Landing zone, zero-trust, pipeline & observability in 6 weeks." },
+  { slug: "k8s-hardening", title: "Kubernetes Hardening & GitOps", summary: "CIS benchmarks, OPA policies-as-code, ArgoCD rollouts." }
+];
+---
+<Base path="/en/cases" title="Case Studies – Valtrix">
+  <h1 class="text-3xl font-bold mt-8">Case Studies</h1>
+  <div class="grid md:grid-cols-2 gap-6 mt-6">
+    {items.map(i => (
+      <a href={`/en/cases/${i.slug}`} class="p-6 border rounded-brand card hover:shadow-sm transition-shadow block">
+        <h2 class="font-semibold text-lg">{i.title}</h2>
+        <p class="mt-2 text-textMuted">{i.summary}</p>
+        <span class="mt-3 inline-block text-primary underline">View case</span>
+      </a>
+    ))}
+  </div>
+</Base>
--- a/src/pages/en/cases/cloud-migration.astro
+++ b/src/pages/en/cases/cloud-migration.astro
@@ -0,0 +1,36 @@
+---
+import Base from "../../../layouts/Base.astro";
+---
+<Base path="/en/cases/cloud-migration" title="Case Study – Secure Cloud Migration">
+  <h1 class="text-3xl font-bold mt-8">Case Study: Secure Cloud Migration</h1>
+  <p class="mt-4 text-textMuted">Enterprise migration from on‑prem to cloud with a focus on security & compliance.</p>
+
+  <section class="mt-8 grid md:grid-cols-3 gap-6">
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Goal</h3>
+      <p class="mt-2 text-textMuted">Secure AWS/Azure landing zone, segmented network, centralized IAM.</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Approach</h3>
+      <p class="mt-2 text-textMuted">Guardrails, IaC (Terraform/OpenTofu), GitOps, observability, cost controls.</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Outcome</h3>
+      <p class="mt-2 text-textMuted">Faster deployments, auditability, reduced risks & costs.</p>
+    </div>
+  </section>
+
+  <section class="mt-10">
+  <h2 class="text-2xl font-bold mb-3">Key metrics</h2>
+    <ul class="list-disc pl-6 text-textMuted">
+      <li>6 weeks to a production‑ready baseline</li>
+      <li>~40% fewer manual deployments through CI/CD</li>
+      <li>100% infrastructure as code & policies‑as‑code</li>
+    </ul>
+  </section>
+
+  <div class="mt-12 rounded-brand p-6 bg-gradient-to-r from-accent to-primary text-white flex items-center justify-between">
+    <div class="text-lg font-semibold tracking-wide">Planning a similar project?</div>
+    <a href="/en/kontakt" class="px-5 py-3 rounded-brand bg-white text-primary font-medium">Request now</a>
+  </div>
+</Base>
--- a/src/pages/en/cases/k8s-hardening.astro
+++ b/src/pages/en/cases/k8s-hardening.astro
@@ -0,0 +1,48 @@
+---
+import Base from "../../../layouts/Base.astro";
+---
+<Base path="/en/cases/k8s-hardening" title="Case Study – Kubernetes Hardening & GitOps">
+  <h1 class="text-3xl font-bold mt-8">Case Study: Kubernetes Hardening & GitOps</h1>
+  <p class="mt-4 text-textMuted">Production‑ready K8s setup hardened against CIS, with end‑to‑end policies‑as‑code and GitOps deployments.</p>
+
+  <section class="mt-8 grid md:grid-cols-3 gap-6">
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Goal</h3>
+      <p class="mt-2 text-textMuted">Secure cluster baseline: identity‑centric access, network segmentation, clean supply chain.</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Approach</h3>
+      <p class="mt-2 text-textMuted">CIS benchmarks, OPA/Gatekeeper or Kyverno policies, Pod Security Standards, signed artifacts & GitOps (Argo CD).</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Outcome</h3>
+      <p class="mt-2 text-textMuted">Reproducible deployments, policy‑compliant releases, auditability and reduced attack surface.</p>
+    </div>
+  </section>
+
+  <section class="mt-10">
+    <h2 class="text-2xl font-bold mb-3">Key metrics</h2>
+    <ul class="list-disc pl-6 text-textMuted">
+      <li>100% declarative deployments (GitOps, pull‑based)</li>
+      <li>~80% of CIS controls automatically verifiable</li>
+      <li>Policy breaks prevent risky manifests before rollout</li>
+      <li>Signed container images & SBOM for core services</li>
+    </ul>
+  </section>
+
+  <section class="mt-10 grid md:grid-cols-2 gap-6">
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">GitOps setup</h3>
+      <p class="mt-2 text-textMuted">Multi‑stage environments (dev/stage/prod) with branch/tag strategy, Kustomize overlays and PR‑based changes.</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h3 class="font-semibold">Cluster hardening</h3>
+      <p class="mt-2 text-textMuted">RBAC least‑privilege, NetworkPolicies default‑deny, Pod Security, image scanning, secrets management.</p>
+    </div>
+  </section>
+
+  <div class="mt-12 rounded-brand p-6 bg-gradient-to-r from-accent to-primary text-white flex items-center justify-between">
+    <div class="text-lg font-semibold tracking-wide">Planning a similar project?</div>
+    <a href="/en/kontakt" class="px-5 py-3 rounded-brand bg-white text-primary font-medium">Request now</a>
+  </div>
+</Base>
--- a/src/pages/en/datenschutz.astro
+++ b/src/pages/en/datenschutz.astro
@@ -0,0 +1,62 @@
+---
+import Base from "../../layouts/Base.astro";
+const updated = new Date().toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: '2-digit' });
+---
+<Base path="/en/datenschutz" title="Privacy Notice – Valtrix">
+  <h1 class="text-2xl font-bold mt-8">Privacy Notice</h1>
+
+  <p class="mt-4 text-textMuted">This notice explains how we process personal data when you visit this website. The site is a static site; we do not use tracking or marketing cookies and no external resources (e.g. Google Fonts, Analytics, form services) are loaded.</p>
+
+  <section class="mt-8 grid gap-2">
+    <h2 class="text-xl font-semibold">1. Controller</h2>
+    <p>The controller within the meaning of the GDPR is: <strong>Valtrix</strong>. Address see <a class="underline text-primary" href="/en/impressum">Imprint</a>. E‑mail: <a class="underline text-primary" href="mailto:kontakt@valtrix.systems">kontakt@valtrix.systems</a></p>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">2. Hosting & delivery</h2>
+    <p>This website is delivered as a static application. Delivery takes place via infrastructure within the EU.</p>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">3. Server log files</h2>
+    <p>When the website is accessed, the responsible server/proxy processes access data for technical reasons (e.g. IP address, date/time, requested resource/URL, referrer, user agent, status code). Processing is for operation, security and error analysis.</p>
+    <ul class="list-disc pl-6 text-textMuted">
+      <li>Legal basis: Art. 6(1)(f) GDPR (legitimate interest in secure operation)</li>
+      <li>Storage period: Logs are rotated and deleted regularly, unless a security‑relevant evaluation is required.</li>
+    </ul>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">4. Cookies & external content</h2>
+    <p>We do not use tracking or marketing cookies. No external content, fonts or scripts from third parties are loaded.</p>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">5. Contact</h2>
+    <p>When contacting us by e‑mail or via the provided <em>mailto</em> function, we process the transmitted data (e.g. name, e‑mail, message) to handle the request.</p>
+    <ul class="list-disc pl-6 text-textMuted">
+      <li>Legal basis: Art. 6(1)(b) GDPR (pre‑contractual/contractual communication) or (f) (general inquiries)</li>
+      <li>Storage period: We delete inquiries once handled unless statutory retention requires longer storage.</li>
+    </ul>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">6. Recipients & processors</h2>
+    <p>To provide the website we may use technical service providers (e.g. hosting/operations). They process data only on our instructions (Art. 28 GDPR). No third‑country transfer takes place unless explicitly stated.</p>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">7. Your rights</h2>
+    <p>You have rights to access (Art. 15 GDPR), rectification (Art. 16), erasure (Art. 17), restriction (Art. 18), data portability (Art. 20) and objection (Art. 21). You also have the right to lodge a complaint with a data protection supervisory authority (Art. 77).</p>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">8. Security</h2>
+    <p>We implement technical and organizational measures pursuant to Art. 32 GDPR (e.g. TLS encryption, hardened infrastructure, least privilege). The website does not load resources from third parties.</p>
+  </section>
+
+  <section class="mt-6 grid gap-2">
+    <h2 class="text-xl font-semibold">9. Updates to this notice</h2>
+    <p>Effective: {updated}. We update this notice when technology, legal requirements or our offering changes.</p>
+  </section>
+</Base>
--- a/src/pages/en/impressum.astro
+++ b/src/pages/en/impressum.astro
@@ -0,0 +1,11 @@
+---
+import Base from "../../layouts/Base.astro";
+---
+<Base path="/en/impressum" title="Imprint – Valtrix">
+  <h1 class="text-2xl font-bold mt-8">Imprint</h1>
+  <p><strong>VALTRIX</strong> GmbH i.G.</p>
+  <p>Am Wassergraben 4, 10179 Berlin</p>
+  <p>Local Court Charlottenburg. Commercial Register: HRB-XXXX </p>
+  <p>VAT ID: XXXXXXX</p>
+  <p class="mt-4 text-textMuted">Placeholder for company information (registered office, register, authorized representatives, contact).</p>
+</Base>
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -0,0 +1,73 @@
+---
+import Base from "../../layouts/Base.astro";
+const benefits = [
+  { title: "Zero-Trust & Hardening", text: "Security-by-Design, CIS/BSI guidelines, automated policies." },
+  { title: "Cloud Foundations", text: "Landing zones, identity, observability – clean & scalable." },
+  { title: "Automation", text: "IaC/CI/CD, GitOps, reproducible & auditable." }
+];
+const features = [
+  { title: "Cloud & DevOps", text: "Plan, Build & Run – efficient, secure, scalable." },
+  { title: "Security & Compliance", text: "BSI/ISO-aligned, Zero-Trust, audits, policies-as-code." },
+  { title: "AI & Automation", text: "RAG, agents & process automation with measurable outcome." }
+];
+---
+<Base path="/en">
+  <section class="py-16 grid lg:grid-cols-2 gap-12 items-center">
+    <div class="fade-in">
+      <h1 class="text-4xl md:text-5xl font-bold leading-tight">
+        Security-first Cloud Consulting.
+      </h1>
+      <p class="mt-4 text-lg text-textMuted">
+        We combine <strong>structure</strong> and <strong>value</strong>: secure cloud architectures, automation and compliance – pragmatic and measurable.
+      </p>
+      <div class="mt-8 flex gap-4">
+        <a href="/en/leistungen" class="px-5 py-3 rounded-brand bg-primary text-white hover:opacity-90">Services</a>
+        <a href="/en/kontakt" class="px-5 py-3 rounded-brand border border-primary text-primary hover:bg-graybg">Contact</a>
+      </div>
+      <div class="mt-8 grid grid-cols-3 gap-4 text-sm text-textMuted">
+        <div class="p-3 border rounded-brand card">GDPR / EU hosting</div>
+        <div class="p-3 border rounded-brand card">BSI/ISO aligned</div>
+        <div class="p-3 border rounded-brand card">Auditable</div>
+      </div>
+    </div>
+  </section>
+
+  <section class="py-10 grid md:grid-cols-3 gap-6">
+    {benefits.map(b => (
+      <div class="p-6 border rounded-brand hover:shadow-sm transition-shadow card">
+        <h3 class="font-semibold text-lg">{b.title}</h3>
+        <p class="mt-2 text-textMuted">{b.text}</p>
+      </div>
+    ))}
+  </section>
+
+  <section class="py-12">
+  <h2 class="text-2xl font-bold mb-6">Services</h2>
+    <div class="grid md:grid-cols-3 gap-6">
+      {features.map(f => (
+        <div class="p-6 border rounded-brand hover:-translate-y-0.5 transition card">
+          <h3 class="font-semibold text-lg">{f.title}</h3>
+          <p class="mt-2 text-textMuted">{f.text}</p>
+          <a href="/en/leistungen" class="mt-3 inline-block text-primary underline">Learn more</a>
+        </div>
+      ))}
+    </div>
+  </section>
+
+  <section class="py-14">
+  <h2 class="text-2xl font-bold mb-6">Our approach</h2>
+    <ol class="grid md:grid-cols-4 gap-6 list-decimal pl-5">
+      <li class="p-5 border rounded-brand card"><strong>Assess:</strong> Risk & maturity → quick scan.</li>
+      <li class="p-5 border rounded-brand card"><strong>Design:</strong> Target architecture & guardrails.</li>
+      <li class="p-5 border rounded-brand card"><strong>Build:</strong> IaC, pipelines, policies-as-code.</li>
+      <li class="p-5 border rounded-brand card"><strong>Run:</strong> Monitoring, audits, cost transparency.</li>
+    </ol>
+  </section>
+
+  <section class="py-12">
+      <div class="rounded-brand p-8 bg-gradient-to-r from-accent to-primary text-white flex flex-col md:flex-row items-center justify-between gap-6">
+      <div class="text-xl font-semibold tracking-wide">Secure cloud – implemented pragmatically.</div>
+      <a href="/en/kontakt" class="px-6 py-3 rounded-brand bg-white text-primary font-medium">Request project</a>
+    </div>
+  </section>
+</Base>
--- a/src/pages/en/kontakt.astro
+++ b/src/pages/en/kontakt.astro
@@ -0,0 +1,27 @@
+---
+import Base from "../../layouts/Base.astro";
+---
+<Base path="/en/kontakt" title="Contact – Valtrix">
+  <h1 class="text-3xl font-bold mt-8">Contact</h1>
+  <form id="contactForm" class="mt-6 grid gap-4 max-w-xl">
+    <input class="border rounded-brand p-3" name="name" placeholder="Your name" required>
+    <input class="border rounded-brand p-3" type="email" name="_replyto" placeholder="E-mail" required>
+    <textarea class="border rounded-brand p-3" name="message" rows="5" placeholder="Your message" required></textarea>
+    <button class="px-5 py-3 rounded-brand bg-primary text-white w-fit">Send</button>
+  </form>
+  <p class="text-xs text-textMuted mt-2">We don't use external services. Your request will open in your e‑mail client.</p>
+  <script>
+    const form = document.getElementById('contactForm');
+    form?.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const data = new FormData(form);
+      const name = (data.get('name')||'').toString();
+      const email = (data.get('_replyto')||'').toString();
+      const message = (data.get('message')||'').toString();
+      const subject = `Contact request – ${name}`;
+      const body = `Name: ${name}\nE-mail: ${email}\n\n${message}`;
+      const mail = `mailto:kontakt@valtrix.systems?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      window.location.href = mail;
+    });
+  </script>
+</Base>
--- a/src/pages/en/leistungen.astro
+++ b/src/pages/en/leistungen.astro
@@ -0,0 +1,20 @@
+---
+import Base from "../../layouts/Base.astro";
+---
+<Base path="/en/leistungen" title="Services – Valtrix">
+  <h1 class="text-3xl font-bold font-bold mt-8">Services</h1>
+  <div class="grid md:grid-cols-3 gap-6 mt-6">
+    <div class="p-6 border rounded-brand card">
+      <h2 class="font-semibold text-lg">Security & Compliance</h2>
+      <p class="mt-2 text-textMuted">Zero-Trust, IAM, hardening, audits, processes aligned with BSI/ISO 27001, policies-as-code.</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h2 class="font-semibold text-lg">Cloud & DevOps</h2>
+      <p class="mt-2 text-textMuted">Landing zones, GitOps, observability, cost control – reproducible & scalable.</p>
+    </div>
+    <div class="p-6 border rounded-brand card">
+      <h2 class="font-semibold text-lg">AI & Automation</h2>
+      <p class="mt-2 text-textMuted">RAG/agents, automation of operations processes, secure integration into existing platforms.</p>
+    </div>
+  </div>
+</Base>
--- a/src/pages/en/sicherheit.astro
+++ b/src/pages/en/sicherheit.astro
@@ -0,0 +1,11 @@
+---
+import Base from "../../layouts/Base.astro";
+---
+<Base path="/en/sicherheit" title="Security & Compliance – Valtrix">
+  <h1 class="text-3xl font-bold mt-8">Security & Compliance</h1>
+  <ul class="list-disc pl-6 mt-4 text-textMuted">
+    <li>Data sovereignty: EU hosting, GDPR compliant</li>
+    <li>Processes aligned with BSI/ISO 27001</li>
+    <li>Security-by-design, regular audits</li>
+  </ul>
+</Base>
--- a/src/pages/en/ueber-uns.astro
+++ b/src/pages/en/ueber-uns.astro
@@ -0,0 +1,7 @@
+---
+import Base from "../../layouts/Base.astro";
+---
+<Base path="/en/ueber-uns" title="About – Valtrix">
+  <h1 class="text-3xl font-bold mt-8">About</h1>
+  <p class="mt-4 text-textMuted max-w-2xl">We are a team of cloud, security and AI engineers. We build robust systems – pragmatic and measurable.</p>
+</Base>