Add location to contact page

Author: cloudlena

src/assets/map.png

@@ -5,6 +5,8 @@ const { t } = useI18n(Astro.url);
 ---
 
 <section id="contact-section">
+  <h2>{t("contact.form.title")}</h2>
+
   <div class="container">
     <form
       class="contact-form"
@@ -55,64 +57,74 @@ const { t } = useI18n(Astro.url);
       </div>
     </form>
   </div>
-</section>
 
-<style>
-  #contact-section {
-    padding: 4rem 2rem;
-    max-width: 64rem;
-    margin: 0 auto;
-  }
+  <style>
+    #contact-section {
+      padding: 2rem 2rem 4rem;
+      max-width: 64rem;
+      margin: 0 auto;
+    }
+
+    .container {
+      width: 100%;
+    }
 
-  .container {
-    width: 100%;
-  }
+    .contact-form {
+      width: 100%;
+      margin-top: 4rem;
+    }
 
-  .contact-form {
-    width: 100%;
-  }
+    .field {
+      margin-bottom: 1.5rem;
+    }
 
-  .field {
-    margin-bottom: 1.5rem;
-  }
+    .input,
+    .textarea {
+      width: calc(100% - 2rem);
+      padding: 1rem;
+      font-size: 1rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-family: var(--font-lato);
+      transition: border-color 0.3s ease;
+    }
 
-  .input,
-  .textarea {
-    width: calc(100% - 2rem);
-    padding: 1rem;
-    font-size: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-family: var(--font-lato);
-    transition: border-color 0.3s ease;
-  }
+    .input:focus,
+    .textarea:focus {
+      outline: none;
+      border-color: var(--color-primary);
+    }
 
-  .input:focus,
-  .textarea:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
+    .textarea {
+      resize: vertical;
+      min-height: 8rem;
+    }
 
-  .textarea {
-    resize: vertical;
-    min-height: 8rem;
-  }
+    .button {
+      width: 100%;
+      padding: 1rem 2rem;
+      font-size: 1rem;
+      font-weight: 600;
+      font-family: var(--font-lato);
+      color: var(--color-secondary);
+      background-color: var(--color-primary);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
 
-  .button {
-    width: 100%;
-    padding: 1rem 2rem;
-    font-size: 1rem;
-    font-weight: 600;
-    font-family: var(--font-lato);
-    color: var(--color-secondary);
-    background-color: var(--color-primary);
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
+    .button:hover {
+      background-color: var(--color-background-primary);
+    }
 
-  .button:hover {
-    background-color: var(--color-background-primary);
-  }
-</style>
+    .location {
+      margin-top: 6rem;
+    }
+
+    h2 {
+      font-size: 2rem;
+      margin-bottom: var(--spacing-sm);
+    }
+  </style>
+</section>

src/components/ContactForm.astro

@@ -0,0 +1,53 @@
+---
+import { Image } from "astro:assets";
+import map from "../assets/map.png";
+import { useI18n } from "../i18n/utils";
+
+const { t } = useI18n(Astro.url);
+---
+
+<section id="location-section">
+  <h2>{t("contact.location.title")}</h2>
+  <p>
+    {t("contact.location.mainOffice")}: <strong>Kramgasse 68, 3011 Bern</strong>
+  </p>
+  <a
+    href="https://maps.app.goo.gl/5o1J1VakRfZxfgdN6"
+    target="_blank"
+    class="map-link"
+  >
+    <Image src={map} alt="Map" class="map" />
+  </a>
+</section>
+
+<style>
+  #location-section {
+    padding: 4rem 2rem;
+    max-width: 64rem;
+    margin: 0 auto;
+  }
+
+  h2 {
+    font-size: 2rem;
+    margin-bottom: var(--spacing-sm);
+  }
+
+  p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+  }
+
+  .map {
+    width: 100%;
+    height: auto;
+    border-radius: 1rem;
+    transition:
+      transform 0.2s,
+      box-shadow 0.2s;
+  }
+
+  .map:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+  }
+</style>

src/components/Location.astro

@@ -72,7 +72,7 @@ const ts = {
     "Kontakt- u Rächtsinformatione zu bespinian – Cloud-native Beratig u Software-Entwicklig i dr Schwiiz.",
   "imprint.contact": "Kontaktinformatione",
   "imprint.email": "E-Mail: [email protected]",
-  "imprint.headquarters": "Hauptsitz",
+  "imprint.headquarters": "Houptsitz",
   "imprint.headquarters.address":
     "bespinian GmbH, Sonnenweg 9, 3073 Gümligen, Schweiz",
   "imprint.bern": "Büro Bärn",
@@ -123,7 +123,11 @@ const ts = {
   // Contact Page
   "contact.title": "Kontakt",
   "contact.subtitle":
-    "Hesch e Frag? Bruchsch es Agebot? Luscht uf e Kafi? Schriib üs e Nachricht – mir mäudenis bi dir.",
+    "Hesch e Frag? Bruchsch es Agebot? Luscht uf e Kafi? Chum verby oder schrib üs e Nachricht – mir mäudenis bi dir.",
+  "contact.location.title": "Bsuech Üs",
+  "contact.location.mainOffice":
+    "Üses Büro isch ir nechi vom Zytglogge im Härze vor Autstadt vo Bärn",
+  "contact.form.title": "Schick Üs e Nachricht",
   "contact.form.nameplaceholder": "Di Name",
   "contact.form.emailplaceholder": "Dini E-Mail",
   "contact.form.subjectplaceholder": "Beträff",
@@ -211,34 +215,21 @@ const ts = {
   "pricing.title": "Priise",
   "pricing.subtitle": "Wähl dr perfekt Plan für dini Bedürfniss",
   "pricing.creditExplanation":
-    "Jede Credit chasch gäg ne Stung Arbeit vo eim vo üsne Experte-Engineers itusche. Stunde hei kes Verfallsdatum.",
+    "Jede Credit chasch gäg ne Stung Arbeit vo eim vo üsne Experte-Engineers itusche. Credits hei kes Verfallsdatum.",
   "pricing.monthly": "Monatlechs Commitment",
   "pricing.yearly": "Jährlechs Commitment",
   "pricing.yearlyDiscount": "10% spare",
   "pricing.perMonth": "/Mt.",
+  "pricing.perHour": "pro Stung",
   "pricing.correspondsTo": "Entspricht",
-  "pricing.free.name": "Free",
-  "pricing.free.price": "0",
-  "pricing.free.credits": "8 Credits",
-  "pricing.focused.name": "Focused",
-  "pricing.focused.price": "6'336",
-  "pricing.focused.credits": "32 Credits/Mt.",
-  "pricing.focused.hourlyRate": "CHF 198 pro Credit",
-  "pricing.focused.hourlyRateYearly": "CHF 178 pro Credit",
-  "pricing.engaged.name": "Engaged",
-  "pricing.engaged.price": "12'352",
-  "pricing.engaged.credits": "64 Credits/Mt.",
-  "pricing.engaged.hourlyRate": "CHF 193 pro Credit",
-  "pricing.engaged.hourlyRateYearly": "CHF 174 pro Credit",
-  "pricing.integrated.name": "Integrated",
-  "pricing.integrated.price": "23'936",
-  "pricing.integrated.credits": "128 Credits/Mt.",
-  "pricing.integrated.hourlyRate": "CHF 187 pro Credit",
-  "pricing.integrated.hourlyRateYearly": "CHF 168 pro Credit",
+  "pricing.free.credits": "8 Stundä",
+  "pricing.focused.credits": "1 Tag pro Wuche",
+  "pricing.engaged.credits": "2 Täg pro Wuche",
+  "pricing.integrated.credits": "4 Täg pro Wuche",
   "pricing.custom.name": "Custom",
   "pricing.custom.description": "Flexibli Priise",
   "pricing.feature.cloudquest": "CloudQuest",
-  "pricing.feature.slackChannel": "Diräkte Slack Channel",
+  "pricing.feature.slackChannel": "Diräkte Chat Channel",
   "pricing.feature.exclusiveTeam": "Exklusivs Team",
   "pricing.calculator.title": "Custom Priis-Rächner",
   "pricing.calculator.description": "Gib d Aazahl Credits i, wode bruuchsch.",
@@ -248,7 +239,6 @@ const ts = {
   "pricing.calculator.savings": "Du sparsch",
   "pricing.calculator.nextBracket":
     "Buech {hours} Credits um dr Priis uf CHF {price} pro Credit z reduziere u CHF {savings} z spare.",
-  "pricing.calculator.currentBracket": "Aktuellä Tarif: CHF {price} pro Credit",
 };
 
 export default ts;

src/i18n/ch.ts

@@ -125,7 +125,11 @@ const de = {
   // Contact Page
   "contact.title": "Kontakt",
   "contact.subtitle":
-    "Du hast eine Frage? Brauchst ein Angebot? Lust auf einen Kaffee? Schreib uns eine Nachricht – wir melden uns bei dir.",
+    "Du hast eine Frage? Brauchst ein Angebot? Lust auf einen Kaffee? Komm vorbei oder schreib uns eine Nachricht – wir melden uns bei dir.",
+  "contact.location.title": "Besuch Uns",
+  "contact.location.mainOffice":
+    "Unser Büro ist in der Nähe des berühmten Zytglogge im Herzen der Altstadt von Bern",
+  "contact.form.title": "Schick Uns eine Nachricht",
   "contact.form.nameplaceholder": "Dein Name",
   "contact.form.emailplaceholder": "Deine E-Mail",
   "contact.form.subjectplaceholder": "Betreff",
@@ -222,29 +226,16 @@ const de = {
   "pricing.yearly": "Jährliches Commitment",
   "pricing.yearlyDiscount": "10% sparen",
   "pricing.perMonth": "/Mt.",
+  "pricing.perHour": "pro Stunde",
   "pricing.correspondsTo": "Entspricht",
-  "pricing.free.name": "Free",
-  "pricing.free.price": "0",
-  "pricing.free.credits": "8 Credits",
-  "pricing.focused.name": "Focused",
-  "pricing.focused.price": "6'336",
-  "pricing.focused.credits": "32 Credits/Mt.",
-  "pricing.focused.hourlyRate": "CHF 198 pro Credit",
-  "pricing.focused.hourlyRateYearly": "CHF 178 pro Credit",
-  "pricing.engaged.name": "Engaged",
-  "pricing.engaged.price": "12'352",
-  "pricing.engaged.credits": "64 Credits/Mt.",
-  "pricing.engaged.hourlyRate": "CHF 193 pro Credit",
-  "pricing.engaged.hourlyRateYearly": "CHF 174 pro Credit",
-  "pricing.integrated.name": "Integrated",
-  "pricing.integrated.price": "23'936",
-  "pricing.integrated.credits": "128 Credits/Mt.",
-  "pricing.integrated.hourlyRate": "CHF 187 pro Credit",
-  "pricing.integrated.hourlyRateYearly": "CHF 168 pro Credit",
+  "pricing.free.credits": "8 Stunden",
+  "pricing.focused.credits": "1 Tag pro Woche",
+  "pricing.engaged.credits": "2 Tage pro Woche",
+  "pricing.integrated.credits": "4 Tage pro Woche",
   "pricing.custom.name": "Custom",
   "pricing.custom.description": "Flexible Preise",
   "pricing.feature.cloudquest": "CloudQuest",
-  "pricing.feature.slackChannel": "Direkter Slack Channel",
+  "pricing.feature.slackChannel": "Direkter Chat Channel",
   "pricing.feature.exclusiveTeam": "Exklusives Team",
   "pricing.calculator.title": "Custom Preis-Rechner",
   "pricing.calculator.description":
@@ -255,8 +246,6 @@ const de = {
   "pricing.calculator.savings": "Du sparst",
   "pricing.calculator.nextBracket":
     "Buche {hours} oder mehr um den Preis auf CHF {price} pro Credit zu reduzieren und CHF {savings} zu sparen.",
-  "pricing.calculator.currentBracket":
-    "Aktueller Tarif: CHF {price} pro Credit",
 };
 
 export default de;

src/i18n/de.ts

@@ -123,7 +123,11 @@ const en = {
   // Contact Page
   "contact.title": "Contact Us",
   "contact.subtitle":
-    "Have a question? Need a quote? Want to grab a coffee? Send us a message and we'll get back to you.",
+    "Have a question? Need a quote? Want to grab a coffee? Come by or send us a message and we'll get back to you.",
+  "contact.location.title": "Visit Us",
+  "contact.location.mainOffice":
+    "Our office is near the famous Zytglogge tower in the heart of the old town of Bern",
+  "contact.form.title": "Send Us a Message",
   "contact.form.nameplaceholder": "Your Name",
   "contact.form.emailplaceholder": "Your Email",
   "contact.form.subjectplaceholder": "Subject",
@@ -215,29 +219,16 @@ const en = {
   "pricing.yearly": "Yearly Commitment",
   "pricing.yearlyDiscount": "Save 10%",
   "pricing.perMonth": "/mo",
+  "pricing.perHour": "per hour",
   "pricing.correspondsTo": "Corresponds to",
-  "pricing.free.name": "Free",
-  "pricing.free.price": "0",
-  "pricing.free.credits": "8 credits",
-  "pricing.focused.name": "Focused",
-  "pricing.focused.price": "6,336",
-  "pricing.focused.credits": "32 credits/mo",
-  "pricing.focused.hourlyRate": "CHF 198 per credit",
-  "pricing.focused.hourlyRateYearly": "CHF 178 per credit",
-  "pricing.engaged.name": "Engaged",
-  "pricing.engaged.price": "12,352",
-  "pricing.engaged.credits": "64 credits/mo",
-  "pricing.engaged.hourlyRate": "CHF 193 per credit",
-  "pricing.engaged.hourlyRateYearly": "CHF 174 per credit",
-  "pricing.integrated.name": "Integrated",
-  "pricing.integrated.price": "23,936",
-  "pricing.integrated.credits": "128 credits/mo",
-  "pricing.integrated.hourlyRate": "CHF 187 per credit",
-  "pricing.integrated.hourlyRateYearly": "CHF 168 per credit",
+  "pricing.free.credits": "8 hours",
+  "pricing.focused.credits": "1 day per week",
+  "pricing.engaged.credits": "2 days per week",
+  "pricing.integrated.credits": "4 days per week",
   "pricing.custom.name": "Custom",
   "pricing.custom.description": "Flexible pricing",
   "pricing.feature.cloudquest": "CloudQuest",
-  "pricing.feature.slackChannel": "Direct Slack Channel",
+  "pricing.feature.slackChannel": "Direct Chat Channel",
   "pricing.feature.exclusiveTeam": "Exclusive Team",
   "pricing.calculator.title": "Custom Pricing Calculator",
   "pricing.calculator.description": "Enter the number of credits you need.",
@@ -247,7 +238,6 @@ const en = {
   "pricing.calculator.savings": "You save",
   "pricing.calculator.nextBracket":
     "Purchase {hours} or more to reduce the price to CHF {price} per credit and save CHF {savings}.",
-  "pricing.calculator.currentBracket": "Current rate: CHF {price} per credit",
 };
 
 export default en;

src/i18n/en.ts

@@ -12,6 +12,16 @@ export function formatDate(date: Date, locale: string): string {
   });
 }
 
+/**
+ * Formats a number to a localized string
+ * @param num - The number
+ * @param locale - The locale to use (default: "en-US")
+ * @returns Formatted number string (e.g., "1,234")
+ */
+export function formatNumber(num: number, locale: string): string {
+  return num.toLocaleString(locale === "en" ? "en-US" : "de-CH");
+}
+
 /**
  * Sorts an array of items by date in descending order (newest first)
  * @param items - Array of items with a data.pubDate property