Update index.html

index.html

@@ -353,6 +353,13 @@ overflow: hidden;
 }
 .direct-rep-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--white); }
 .direct-rep-role { font-size: 0.85rem; color: rgba(255,255,255,0.45); }
+.direct-rep-btn-row {
+display: flex;
+flex-wrap: wrap;
+justify-content: center;
+gap: 14px;
+margin-top: 4px;
+}
 .rep-selector {
 background: rgba(255,255,255,0.06);
 border: 1px solid rgba(255,255,255,0.12);
@@ -412,6 +419,12 @@ to   { opacity: 1; transform: translateY(0); }
 .rep-intro { font-size: 0.9rem; color: rgba(255,255,255,0.55); }
 .rep-intro strong { color: var(--white); font-weight: 700; }
 .no-rep-hint { color: rgba(255,255,255,0.35); font-size: 0.85rem; }
+.book-btn-row {
+display: flex;
+flex-wrap: wrap;
+justify-content: center;
+gap: 14px;
+}
 .book-btn {
 background: var(--fuchsia);
 color: var(--white);
@@ -427,6 +440,16 @@ gap: 10px;
 transition: background 0.2s, transform 0.15s;
 }
 .book-btn:hover { background: var(--fuchsia2); transform: translateY(-2px); }
+.book-btn.secondary {
+background: transparent;
+border: 2px solid rgba(255,255,255,0.25);
+color: var(--white);
+}
+.book-btn.secondary:hover {
+background: rgba(255,255,255,0.08);
+border-color: rgba(255,255,255,0.4);
+transform: translateY(-2px);
+}
 .booking-note { font-size: 0.78rem; color: rgba(255,255,255,0.3); }
 
 /* ── FOOTER ── */
@@ -454,6 +477,8 @@ font-size: 0.8rem;
 .direct-rep-box { padding: 32px 20px; }
 .rep-selector { padding: 24px 16px; }
 .hook-right { padding: 32px 28px; }
+.book-btn-row, .direct-rep-btn-row { flex-direction: column; width: 100%; }
+.book-btn { width: 100%; justify-content: center; }
 }
 </style>
 </head>
@@ -644,10 +669,16 @@ font-size: 0.8rem;
       <div class="direct-rep-avatar" id="directRepAvatar"></div>
       <div class="direct-rep-name" id="directRepName"></div>
       <div class="direct-rep-role" id="directRepRole">SumUp Beauty Specialist</div>
-      <a href="#" class="book-btn" id="directBookLink" target="_blank" rel="noopener">
-        <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-        <span id="directBookBtnText">Book your free 30-min call</span>
-      </a>
+      <div class="direct-rep-btn-row">
+        <a href="#" class="book-btn" id="directBookCallLink" target="_blank" rel="noopener">
+          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+          <span id="directBookCallText">Book a call</span>
+        </a>
+        <a href="#" class="book-btn secondary" id="directBookInPersonLink" target="_blank" rel="noopener">
+          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
+          <span id="directBookInPersonText">Book an in-person meeting</span>
+        </a>
+      </div>
       <p class="booking-note" id="directBookNote">Free cancellation anytime · No sign-in required</p>
     </div>
 
@@ -657,10 +688,16 @@ font-size: 0.8rem;
       <div class="rep-grid" id="repGrid"></div>
       <div class="booking-cta-area" id="ctaArea">
         <p class="rep-intro" id="repIntroText">Book a call with <strong id="repNameDisplay"></strong></p>
-        <a href="#" class="book-btn" id="bookLink" target="_blank" rel="noopener">
-          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-          <span id="bookBtnText">Book your free 30-min call</span>
-        </a>
+        <div class="book-btn-row">
+          <a href="#" class="book-btn" id="bookCallLink" target="_blank" rel="noopener">
+            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+            <span id="bookCallBtnText">Book a call</span>
+          </a>
+          <a href="#" class="book-btn secondary" id="bookInPersonLink" target="_blank" rel="noopener">
+            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            <span id="bookInPersonBtnText">Book an in-person meeting</span>
+          </a>
+        </div>
         <p class="booking-note" id="bookNote">Free cancellation anytime · No sign-in required</p>
       </div>
       <div class="no-rep-hint" id="noRepHint">Select a representative above to book</div>
@@ -677,31 +714,46 @@ font-size: 0.8rem;
 <script>
 // ─────────────────────────────────────────────
 // REPS — add lang + currency to each rep
+// Each rep now has:
+//   link          -> used for the "Book a call" button
+//   inPersonLink  -> used for the "Book an in-person meeting" button
+// TODO: replace inPersonLink with each rep's real in-person calendar link.
+// It currently mirrors `link` as a placeholder.
 // ─────────────────────────────────────────────
 const reps = [
   {
     name: "Christian", slug: "christian", initials: "CJ", color: "#FF61F2",
-    photo: "christian.jpg", link: "https://calendar.app.google/foUdP9FUMHVUCXAb6",
+    photo: "christian.jpg",
+    link: "https://calendar.app.google/foUdP9FUMHVUCXAb6",
+    inPersonLink: "https://calendar.app.google/foUdP9FUMHVUCXAb6",
     lang: "en", currency: "£"
   },
   {
     name: "Edoardo", slug: "edoardo", initials: "ET", color: "#F9C300",
-    photo: "edoardo.jpg", link: "https://calendar.app.google/dWPVQy2BuwdwJmqy7",
+    photo: "edoardo.jpg",
+    link: "https://calendar.app.google/dWPVQy2BuwdwJmqy7",
+    inPersonLink: "https://calendar.app.google/dWPVQy2BuwdwJmqy7",
     lang: "it", currency: "€"
   },
   {
     name: "Gareth", slug: "gareth", initials: "GD", color: "#FF61F2",
-    photo: "gareth.jpg", link: "https://calendar.app.google/8f7hQkr5a2H5rit7A",
+    photo: "gareth.jpg",
+    link: "https://calendar.app.google/8f7hQkr5a2H5rit7A",
+    inPersonLink: "https://calendar.app.google/8f7hQkr5a2H5rit7A",
     lang: "en", currency: "£"
   },
   {
     name: "Miriam", slug: "miriam", initials: "MK", color: "#F9C300",
-    photo: "miriam.png", link: "https://calendar.app.google/tGkiahEBtet1HLsU7",
+    photo: "miriam.png",
+    link: "https://calendar.app.google/tGkiahEBtet1HLsU7",
+    inPersonLink: "https://calendar.app.google/tGkiahEBtet1HLsU7",
     lang: "de", currency: "€"
   },
   {
     name: "Shane", slug: "shane", initials: "SO", color: "#FF61F2",
-    photo: "shane.png", link: "https://calendar.app.google/Bary3iiw8PoEre7t7",
+    photo: "shane.png",
+    link: "https://calendar.app.google/Bary3iiw8PoEre7t7",
+    inPersonLink: "https://calendar.app.google/Bary3iiw8PoEre7t7",
     lang: "en", currency: "£"
   },
 ];
@@ -755,11 +807,13 @@ const t = {
     bookingSectionSub: "No pressure, no commitment. Just a quick 30-minute chat to see if SumUp is the right fit for your business.",
     directRepName: (name) => `Book with ${name}`,
     directRepRole: "SumUp Beauty Specialist",
-    directBookBtnText: "Book your free 30-min call",
+    directBookCallText: "Book a call",
+    directBookInPersonText: "Book an in-person meeting",
     directBookNote: "Free cancellation anytime · No sign-in required",
     repSelectorLabel: "Choose your SumUp representative",
-    repIntroText: "Book a call with",
-    bookBtnText: "Book your free 30-min call",
+    repIntroText: "Book with",
+    bookCallBtnText: "Book a call",
+    bookInPersonBtnText: "Book an in-person meeting",
     bookNote: "Free cancellation anytime · No sign-in required",
     noRepHint: "Select a representative above to book",
   },
@@ -808,11 +862,13 @@ const t = {
     bookingSectionSub: "Kein Druck, keine Verpflichtung. Nur ein kurzes 30-minütiges Gespräch, um zu sehen, ob SumUp das Richtige für dein Business ist.",
     directRepName: (name) => `Mit ${name} buchen`,
     directRepRole: "SumUp Beauty Spezialistin",
-    directBookBtnText: "Kostenlosen 30-Min-Anruf buchen",
+    directBookCallText: "Anruf buchen",
+    directBookInPersonText: "Persönliches Treffen buchen",
     directBookNote: "Kostenlose Stornierung jederzeit · Keine Anmeldung erforderlich",
     repSelectorLabel: "Wähle deinen SumUp-Ansprechpartner",
-    repIntroText: "Gespräch buchen mit",
-    bookBtnText: "Kostenlosen 30-Min-Anruf buchen",
+    repIntroText: "Buchen mit",
+    bookCallBtnText: "Anruf buchen",
+    bookInPersonBtnText: "Persönliches Treffen buchen",
     bookNote: "Kostenlose Stornierung jederzeit · Keine Anmeldung erforderlich",
     noRepHint: "Bitte oben einen Ansprechpartner auswählen",
   },
@@ -861,11 +917,13 @@ const t = {
     bookingSectionSub: "Nessuna pressione, nessun impegno. Solo una breve chiacchierata di 30 minuti per vedere se SumUp fa al caso tuo.",
     directRepName: (name) => `Prenota con ${name}`,
     directRepRole: "Specialista SumUp Beauty",
-    directBookBtnText: "Prenota la tua chiamata gratuita di 30 min",
+    directBookCallText: "Prenota una chiamata",
+    directBookInPersonText: "Prenota un incontro di persona",
     directBookNote: "Cancellazione gratuita in qualsiasi momento · Nessun accesso richiesto",
     repSelectorLabel: "Scegli il tuo rappresentante SumUp",
-    repIntroText: "Prenota una chiamata con",
-    bookBtnText: "Prenota la tua chiamata gratuita di 30 min",
+    repIntroText: "Prenota con",
+    bookCallBtnText: "Prenota una chiamata",
+    bookInPersonBtnText: "Prenota un incontro di persona",
     bookNote: "Cancellazione gratuita in qualsiasi momento · Nessun accesso richiesto",
     noRepHint: "Seleziona un rappresentante qui sopra per prenotare",
   }
@@ -945,11 +1003,13 @@ setText('bookLabel', tr.bookLabel);
 setText('bookingSectionSub', tr.bookingSectionSub);
 setText('repSelectorLabel', tr.repSelectorLabel);
 setText('repIntroText', tr.repIntroText);
-setText('bookBtnText', tr.bookBtnText);
+setText('bookCallBtnText', tr.bookCallBtnText);
+setText('bookInPersonBtnText', tr.bookInPersonBtnText);
 setText('bookNote', tr.bookNote);
 setText('noRepHint', tr.noRepHint);
 setText('directBookNote', tr.directBookNote);
-setText('directBookBtnText', tr.directBookBtnText);
+setText('directBookCallText', tr.directBookCallText);
+setText('directBookInPersonText', tr.directBookInPersonText);
 
 // ─────────────────────────────────────────────
 // REP-SPECIFIC BEHAVIOUR
@@ -973,16 +1033,18 @@ if (matchRep) {
   const avatarEl = document.getElementById('directRepAvatar');
   setAvatar(avatarEl, matchRep);
   avatarEl.style.borderRadius = '50%';
-  document.getElementById('directBookLink').href = matchRep.link;
+  document.getElementById('directBookCallLink').href = matchRep.link;
+  document.getElementById('directBookInPersonLink').href = matchRep.inPersonLink;
 
 } else {
   // Default: show rep selector (English, £)
   setText('bookingTitle', tr.bookingTitle(null));
-  const grid      = document.getElementById('repGrid');
-  const ctaArea   = document.getElementById('ctaArea');
-  const noRepHint = document.getElementById('noRepHint');
-  const bookLink  = document.getElementById('bookLink');
-  const repName   = document.getElementById('repNameDisplay');
+  const grid          = document.getElementById('repGrid');
+  const ctaArea        = document.getElementById('ctaArea');
+  const noRepHint      = document.getElementById('noRepHint');
+  const bookCallLink   = document.getElementById('bookCallLink');
+  const bookInPersonLink = document.getElementById('bookInPersonLink');
+  const repName        = document.getElementById('repNameDisplay');
 
   reps.forEach(rep => {
     const btn = document.createElement('button');
@@ -997,7 +1059,8 @@ if (matchRep) {
       grid.querySelectorAll('.rep-btn').forEach(b => b.classList.remove('active'));
       btn.classList.add('active');
       repName.textContent = rep.name;
-      bookLink.href = rep.link;
+      bookCallLink.href = rep.link;
+      bookInPersonLink.href = rep.inPersonLink;
       ctaArea.classList.add('visible');
       noRepHint.style.display = 'none';
     });