| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>SumUp — Bookings and payments for beauty professionals</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com/" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&display=swap" rel="stylesheet" /> |
| <link rel="icon" type="image/png" href="logosmall.png" /> |
| <style> |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| :root { |
| --black: #1E1C1C; |
| --fuchsia: #FF61F2; |
| --fuchsia2: #cc3fbf; |
| --golden: #F9C300; |
| --white: #FFFFFF; |
| --grey1: #F0F1E7; |
| --grey: #6B7280; |
| --lightgrey: #E5E7EB; |
| --darkgrey: #374151; |
| --radius: 12px; |
| } |
| html { scroll-behavior: smooth; } |
| body { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 400; |
| background: var(--grey1); |
| color: var(--black); |
| overflow-x: hidden; |
| } |
| |
| |
| nav { |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| background: rgba(255,255,255,0.97); |
| backdrop-filter: blur(10px); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 5%; |
| height: 64px; |
| border-bottom: 1px solid var(--lightgrey); |
| } |
| .nav-cta { |
| background: var(--black); |
| color: var(--white); |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 0.875rem; |
| padding: 10px 22px; |
| border-radius: 8px; |
| text-decoration: none; |
| transition: background 0.2s; |
| white-space: nowrap; |
| } |
| .nav-cta:hover { background: #333; } |
| |
| |
| .rep-intro-banner { |
| background: var(--black); |
| color: var(--white); |
| padding: 72px 5% 64px; |
| display: none; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| gap: 20px; |
| } |
| .rep-intro-banner.visible { display: flex; } |
| .rep-avatar-hero { |
| width: 140px; |
| height: 140px; |
| border-radius: 50%; |
| overflow: hidden; |
| border: 4px solid rgba(255,255,255,0.18); |
| box-shadow: 0 0 0 10px rgba(255,255,255,0.05); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 900; |
| font-size: 2.6rem; |
| color: var(--white); |
| flex-shrink: 0; |
| } |
| .rep-avatar-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } |
| .rep-intro-hey { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 900; |
| font-size: clamp(2rem, 4vw, 3rem); |
| color: var(--white); |
| letter-spacing: -0.5px; |
| line-height: 1.05; |
| } |
| .rep-intro-banner h2 { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 400; |
| font-size: clamp(1rem, 1.8vw, 1.2rem); |
| line-height: 1.6; |
| color: rgba(255,255,255,0.5); |
| max-width: 520px; |
| letter-spacing: 0; |
| } |
| .rep-intro-banner p { |
| font-size: 1rem; |
| color: rgba(255,255,255,0.55); |
| line-height: 1.8; |
| max-width: 500px; |
| } |
| .rep-intro-role { |
| font-size: 0.8rem; |
| color: rgba(255,255,255,0.28); |
| } |
| .rep-intro-role strong { color: rgba(255,255,255,0.55); font-weight: 700; } |
| .rep-intro-cta { |
| background: var(--fuchsia); |
| color: var(--white); |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 1rem; |
| padding: 16px 36px; |
| border-radius: 8px; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| transition: background 0.2s, transform 0.15s; |
| margin-top: 4px; |
| } |
| .rep-intro-cta:hover { background: var(--fuchsia2); transform: translateY(-2px); } |
| |
| |
| .section-label { |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: var(--fuchsia); |
| margin-bottom: 14px; |
| } |
| .section-title { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 900; |
| font-size: clamp(1.8rem, 3vw, 2.5rem); |
| line-height: 1.1; |
| color: var(--black); |
| margin-bottom: 12px; |
| } |
| .section-sub { |
| font-size: 1rem; |
| font-weight: 400; |
| color: var(--grey); |
| line-height: 1.7; |
| max-width: 560px; |
| } |
| |
| |
| .bookings-section { |
| background: var(--white); |
| padding: 80px 5%; |
| } |
| .bookings-inner { |
| max-width: 1100px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 60px; |
| align-items: center; |
| } |
| .bookings-content { display: flex; flex-direction: column; gap: 20px; } |
| .bookings-content .section-title { margin-bottom: 0; } |
| .bookings-detail { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| margin-top: 8px; |
| } |
| .bookings-point { |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| } |
| .bookings-point-icon { |
| width: 28px; height: 28px; |
| border-radius: 6px; |
| background: var(--black); |
| display: flex; align-items: center; justify-content: center; |
| flex-shrink: 0; |
| margin-top: 1px; |
| } |
| .bookings-point-text { font-size: 0.9rem; color: var(--grey); line-height: 1.65; } |
| .bookings-point-text strong { display: block; font-weight: 700; color: var(--black); font-size: 0.92rem; margin-bottom: 1px; } |
| .bookings-image { |
| border-radius: var(--radius); |
| overflow: hidden; |
| aspect-ratio: 4/3; |
| background: var(--grey1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .bookings-image img { width: 100%; height: 100%; object-fit: cover; display: block; } |
| .bookings-image-placeholder { |
| color: var(--grey); |
| font-size: 0.78rem; |
| text-align: center; |
| padding: 20px; |
| } |
| |
| |
| .more-features { |
| background: var(--grey1); |
| padding: 80px 5%; |
| } |
| .more-features-inner { max-width: 1100px; margin: 0 auto; } |
| .more-features-header { margin-bottom: 48px; } |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 16px; |
| } |
| .feature-card { |
| background: var(--white); |
| border-radius: var(--radius); |
| padding: 24px 20px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| transition: transform 0.2s, box-shadow 0.2s; |
| } |
| .feature-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 12px 40px rgba(30,28,28,0.07); |
| } |
| .eco-icon { |
| width: 32px; height: 32px; |
| border-radius: 6px; |
| background: var(--black); |
| display: flex; align-items: center; justify-content: center; |
| margin-bottom: 6px; |
| flex-shrink: 0; |
| } |
| .eco-icon svg { display: block; } |
| .feature-card h3 { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 0.95rem; |
| color: var(--black); |
| } |
| .feature-card p { |
| font-size: 0.82rem; |
| font-weight: 400; |
| color: var(--grey); |
| line-height: 1.6; |
| } |
| |
| |
| .demo-link-section { |
| background: var(--white); |
| padding: 80px 5%; |
| } |
| .demo-link-inner { |
| max-width: 760px; |
| margin: 0 auto; |
| text-align: center; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 24px; |
| } |
| .demo-strip { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| background: var(--black); |
| border-radius: 10px; |
| padding: 18px 24px; |
| gap: 20px; |
| text-decoration: none; |
| transition: background 0.2s; |
| width: 100%; |
| max-width: 560px; |
| } |
| .demo-strip:hover { background: #2d2b2b; } |
| .demo-strip-left { display: flex; align-items: center; gap: 14px; } |
| .demo-strip-icon { |
| width: 36px; height: 36px; |
| background: rgba(255,255,255,0.08); |
| border-radius: 8px; |
| display: flex; align-items: center; justify-content: center; |
| flex-shrink: 0; |
| } |
| .demo-strip-text { color: var(--white); font-weight: 700; font-size: 0.9rem; } |
| .demo-strip-sub { color: rgba(255,255,255,0.45); font-size: 0.78rem; font-weight: 400; margin-top: 2px; } |
| .demo-strip-arrow { color: rgba(255,255,255,0.5); font-size: 1.1rem; font-weight: 900; flex-shrink: 0; } |
| |
| |
| .pricing-section { background: var(--grey1); padding: 80px 5%; } |
| .pricing-inner { max-width: 900px; margin: 0 auto; } |
| .pricing-header { margin-bottom: 48px; } |
| .pricing-generic { |
| background: var(--white); border-radius: var(--radius); |
| padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; |
| } |
| .pricing-generic-tag { |
| font-size: 0.72rem; font-weight: 700; |
| letter-spacing: 2px; text-transform: uppercase; color: var(--fuchsia); |
| } |
| .pricing-generic h3 { |
| font-family: 'Archivo', sans-serif; font-weight: 900; |
| font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--black); line-height: 1.15; |
| } |
| .pricing-generic p { font-size: 0.95rem; color: var(--grey); line-height: 1.7; max-width: 540px; } |
| .pricing-generic-points { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } |
| .pricing-point { |
| display: flex; align-items: flex-start; gap: 10px; |
| font-size: 0.9rem; color: var(--darkgrey); line-height: 1.5; |
| } |
| .pricing-point svg { flex-shrink: 0; margin-top: 2px; } |
| .pricing-generic-note { |
| font-size: 0.82rem; color: var(--grey); |
| border-top: 1px solid var(--lightgrey); padding-top: 16px; margin-top: 4px; |
| } |
| |
| |
| .booking-section { background: var(--black); color: var(--white); padding: 80px 5%; } |
| .booking-inner { max-width: 760px; margin: 0 auto; text-align: center; } |
| .booking-section .section-title { color: var(--white); margin-bottom: 12px; } |
| .booking-section .section-sub { color: rgba(255,255,255,0.55); margin: 0 auto 48px; } |
| .direct-rep-box { |
| background: rgba(255,255,255,0.06); |
| border: 1px solid rgba(255,255,255,0.12); |
| border-radius: var(--radius); |
| padding: 48px 40px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 20px; |
| } |
| .direct-rep-avatar { |
| width: 72px; height: 72px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 900; |
| font-size: 1.4rem; |
| color: var(--white); |
| 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); } |
| .rep-selector { |
| background: rgba(255,255,255,0.06); |
| border: 1px solid rgba(255,255,255,0.12); |
| border-radius: var(--radius); |
| padding: 40px; |
| } |
| .rep-selector-label { |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: rgba(255,255,255,0.4); |
| margin-bottom: 20px; |
| } |
| .rep-grid { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 12px; |
| margin-bottom: 32px; |
| } |
| .rep-btn { |
| background: rgba(255,255,255,0.06); |
| border: 1px solid rgba(255,255,255,0.1); |
| border-radius: 8px; |
| padding: 14px 20px; |
| cursor: pointer; |
| text-align: center; |
| transition: all 0.2s; |
| color: var(--white); |
| font-family: 'Archivo', sans-serif; |
| min-width: 100px; |
| } |
| .rep-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); } |
| .rep-btn.active { background: rgba(255,97,242,0.15); border-color: var(--fuchsia); } |
| .rep-avatar { |
| width: 44px; height: 44px; |
| border-radius: 50%; |
| margin: 0 auto 8px; |
| display: flex; align-items: center; justify-content: center; |
| font-weight: 700; font-size: 1rem; |
| color: var(--white); overflow: hidden; |
| } |
| .rep-name-label { font-size: 0.78rem; font-weight: 700; } |
| .booking-cta-area { |
| display: none; |
| flex-direction: column; |
| align-items: center; |
| gap: 16px; |
| animation: fadeUp 0.3s ease; |
| } |
| .booking-cta-area.visible { display: flex; } |
| @keyframes fadeUp { |
| from { opacity: 0; transform: translateY(10px); } |
| 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 { |
| background: var(--fuchsia); |
| color: var(--white); |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 1.05rem; |
| padding: 18px 44px; |
| border-radius: 8px; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| transition: background 0.2s, transform 0.15s; |
| } |
| .book-btn:hover { background: var(--fuchsia2); transform: translateY(-2px); } |
| .booking-note { font-size: 0.78rem; color: rgba(255,255,255,0.3); } |
| |
| |
| footer { |
| background: #111111; |
| color: rgba(255,255,255,0.35); |
| text-align: center; |
| padding: 28px 5%; |
| font-size: 0.8rem; |
| } |
| |
| |
| @media (max-width: 900px) { |
| .hero { grid-template-columns: 1fr; padding: 60px 5%; min-height: auto; } |
| .hero-image { display: none; } |
| .hook-inner { grid-template-columns: 1fr; } |
| .hook-left { padding: 32px 28px; flex-direction: row; align-items: center; gap: 16px; } |
| .bookings-inner { grid-template-columns: 1fr; } |
| .bookings-image { order: -1; } |
| .features-grid { grid-template-columns: 1fr 1fr; } |
| .pricing-generic { padding: 32px 28px; } |
| } |
| @media (max-width: 600px) { |
| .features-grid { grid-template-columns: 1fr 1fr; gap: 10px; } |
| .direct-rep-box { padding: 32px 20px; } |
| .rep-selector { padding: 24px 16px; } |
| .hook-right { padding: 32px 28px; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <nav> |
| <div class="nav-logo"> |
| <img src="logo.png" alt="SumUp" height="32" style="display:block;" /> |
| </div> |
| <a href="#book" class="nav-cta" id="navCta">Book a free demo →</a> |
| </nav> |
|
|
| |
| <div class="rep-intro-banner" id="repIntroBanner"> |
| <div class="rep-avatar-hero" id="repAvatarHero"></div> |
| <div> |
| <div class="rep-intro-hey" id="repHey"></div> |
| <h2 id="repIntroHeadline"></h2> |
| </div> |
| <p id="repIntroBody"></p> |
| <a href="#" class="rep-intro-cta" id="repIntroCta" 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="repIntroCtaText"></span> |
| </a> |
| <div class="rep-intro-role" id="repIntroRole"></div> |
| </div> |
|
|
| |
| <section class="bookings-section"> |
| <div class="bookings-inner"> |
| <div class="bookings-content"> |
| <div class="section-label" id="bookingLabel">Core feature</div> |
| <h2 class="section-title" id="bookingHeadline">Smart bookings that run themselves.</h2> |
| <p class="section-sub" id="bookingSub">No-shows cost beauty businesses thousands every year. SumUp's booking system puts you back in control — automatically.</p> |
| <div class="bookings-detail"> |
| <div class="bookings-point"> |
| <div class="bookings-point-icon"> |
| <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| </div> |
| <div class="bookings-point-text"> |
| <strong id="bp1Title">Online scheduling 24/7</strong> |
| <span id="bp1Body">Clients book themselves at any time — no back-and-forth messages.</span> |
| </div> |
| </div> |
| <div class="bookings-point"> |
| <div class="bookings-point-icon"> |
| <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| </div> |
| <div class="bookings-point-text"> |
| <strong id="bp2Title">Automated reminders</strong> |
| <span id="bp2Body">SMS and email reminders sent automatically to reduce no-shows.</span> |
| </div> |
| </div> |
| <div class="bookings-point"> |
| <div class="bookings-point-icon"> |
| <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| </div> |
| <div class="bookings-point-text"> |
| <strong id="bp3Title">Deposits & cancellation fees</strong> |
| <span id="bp3Body">Require upfront deposits and charge for late cancellations automatically.</span> |
| </div> |
| </div> |
| <div class="bookings-point"> |
| <div class="bookings-point-icon"> |
| <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| </div> |
| <div class="bookings-point-text"> |
| <strong id="bp4Title">Your own booking page</strong> |
| <span id="bp4Body">A branded page clients can share and save, no app download needed.</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bookings-image"> |
| <img src="hero.png" alt="SumUp bookings" |
| onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" /> |
| <div class="bookings-image-placeholder" style="display:none;"> |
| Add your product image here<br><span style="opacity:0.5;font-size:0.7rem;">Replace hero.png</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="more-features"> |
| <div class="more-features-inner"> |
| <div class="more-features-header"> |
| <div class="section-label" id="featuresLabel">And there's more</div> |
| <h2 class="section-title" id="featuresHeadline">Everything else your business needs.</h2> |
| <p class="section-sub" id="featuresSub">SumUp goes beyond bookings — giving you the full toolkit to run, grow and get paid.</p> |
| </div> |
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="eco-icon"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg> |
| </div> |
| <h3 id="f1Title">POS & Payments</h3> |
| <p id="f1Body">Card, Apple Pay, Google Pay — all at competitive rates with next-day payouts.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="eco-icon"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> |
| </div> |
| <h3 id="f2Title">Loyalty</h3> |
| <p id="f2Body">Points and stamp programmes to turn one-time visitors into regulars.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="eco-icon"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path d="M20 12v10H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"/></svg> |
| </div> |
| <h3 id="f3Title">Gift Cards</h3> |
| <p id="f3Body">Digital gift cards that bring in new customers at zero extra cost.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="eco-icon"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg> |
| </div> |
| <h3 id="f4Title">Cash Advance</h3> |
| <p id="f4Body">Funding based on your sales — repaid automatically as you trade.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="demo-link-section"> |
| <div class="demo-link-inner"> |
| <div class="section-label" id="demoLabel">Try it yourself</div> |
| <h2 class="section-title" id="demoHeadline">Explore the live demo account.</h2> |
| <p class="section-sub" id="demoSub" style="text-align:center;">Get hands-on with SumUp. Click through the demo and see how it works for a beauty business like yours — no sign-in needed.</p> |
| <a href="https://www.sumupbookings.com/demo-bookings-uk" target="_blank" rel="noopener" class="demo-strip" id="demoLink"> |
| <div class="demo-strip-left"> |
| <div class="demo-strip-icon"> |
| <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg> |
| </div> |
| <div> |
| <div class="demo-strip-text" id="demoStripText">Open the demo account</div> |
| <div class="demo-strip-sub" id="demoStripSub">Explore the platform at your own pace</div> |
| </div> |
| </div> |
| <div class="demo-strip-arrow">→</div> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="pricing-section"> |
| <div class="pricing-inner"> |
| <div class="pricing-header"> |
| <div class="section-label" id="pricingLabel">Pricing</div> |
| <h2 class="section-title" id="pricingHeadline">Simple, personalised pricing.</h2> |
| <p class="section-sub" id="pricingSub">No hidden costs. No commissions. 24/7 Priority Care included on every plan.</p> |
| </div> |
| <div class="pricing-generic"> |
| <div class="pricing-generic-tag" id="pricingTag">Personalised fees</div> |
| <h3 id="pricingAmount">Plans starting from £39/month — with payment fees from 0.6%.</h3> |
| <p id="pricingBody">We work with each beauty business individually to find the right plan for your volume and setup. Book a free call and we'll put together a personalised quote tailored to how your business runs.</p> |
| <div class="pricing-generic-points"> |
| <div class="pricing-point"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#1E1C1C" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| <span id="pp1">Transparent pricing — what you see is what you pay</span> |
| </div> |
| <div class="pricing-point"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#1E1C1C" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| <span id="pp2">No setup fees, no long-term contracts</span> |
| </div> |
| <div class="pricing-point"> |
| <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#1E1C1C" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> |
| <span id="pp3">24/7 Priority Care included on every plan</span> |
| </div> |
| </div> |
| <div class="pricing-generic-note" id="pricingNote">Exact fees are confirmed on your free demo call based on your business type and transaction volume.</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="booking-section" id="book"> |
| <div class="booking-inner"> |
| <div class="section-label" id="bookLabel">Ready to talk?</div> |
| <h2 class="section-title" id="bookingTitle">Book your free call.</h2> |
| <p class="section-sub" id="bookingSectionSub">No pressure, no commitment. Just a quick 30-minute chat to see if SumUp is the right fit for your business.</p> |
| <br /> |
|
|
| |
| <div class="direct-rep-box" id="directRepBox" style="display:none;"> |
| <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> |
| <p class="booking-note" id="directBookNote">Free cancellation anytime · No sign-in required</p> |
| </div> |
|
|
| |
| <div class="rep-selector" id="repSelector"> |
| <div class="rep-selector-label" id="repSelectorLabel">Choose your SumUp representative</div> |
| <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> |
| <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> |
| </div> |
|
|
| </div> |
| </section> |
|
|
| |
| <footer> |
| <p>© 2026 SumUp</p> |
| </footer> |
|
|
| <script> |
| |
| |
| |
| const reps = [ |
| { |
| name: "Christian", slug: "christian", initials: "CJ", color: "#FF61F2", |
| photo: "christian.jpg", link: "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", |
| lang: "it", currency: "€" |
| }, |
| { |
| name: "Gareth", slug: "gareth", initials: "GD", color: "#FF61F2", |
| photo: "gareth.jpg", link: "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", |
| lang: "de", currency: "€" |
| }, |
| { |
| name: "Shane", slug: "shane", initials: "SO", color: "#FF61F2", |
| photo: "shane.png", link: "https://calendar.app.google/Bary3iiw8PoEre7t7", |
| lang: "en", currency: "£" |
| }, |
| ]; |
| |
| |
| |
| |
| const t = { |
| en: { |
| navCta: "Book a free demo →", |
| repHey: (name) => `Hey, I'm ${name} 👋`, |
| repHeadline: "Your personal SumUp Beauty Specialist.", |
| repBody: "I've put together this page just for you, so you can explore SumUp at your own pace. Take a look, check the pricing, and book a call whenever you're ready.", |
| repCtaText: "Book a free demo", |
| repRole: "SumUp Beauty Specialist", |
| bookingLabel: "Core feature", |
| bookingHeadline: "Smart bookings that run themselves.", |
| bookingSub: "No-shows cost beauty businesses thousands every year. SumUp's booking system puts you back in control — automatically.", |
| bp1Title: "Online scheduling 24/7", |
| bp1Body: "Clients book themselves at any time — no back-and-forth messages.", |
| bp2Title: "Automated reminders", |
| bp2Body: "SMS and email reminders sent automatically to reduce no-shows.", |
| bp3Title: "Deposits & cancellation fees", |
| bp3Body: "Require upfront deposits and charge for late cancellations automatically.", |
| bp4Title: "Your own booking page", |
| bp4Body: "A branded page clients can share and save, no app download needed.", |
| featuresLabel: "And there's more", |
| featuresHeadline: "Everything else your business needs.", |
| featuresSub: "SumUp goes beyond bookings — giving you the full toolkit to run, grow and get paid.", |
| f1Title: "POS & Payments", f1Body: "Card, Apple Pay, Google Pay — all at competitive rates with next-day payouts.", |
| f2Title: "Loyalty", f2Body: "Points and stamp programmes to turn one-time visitors into regulars.", |
| f3Title: "Gift Cards", f3Body: "Digital gift cards that bring in new customers at zero extra cost.", |
| f4Title: "Cash Advance", f4Body: "Funding based on your sales — repaid automatically as you trade.", |
| demoLabel: "Try it yourself", |
| demoHeadline: "Explore the live demo account.", |
| demoSub: "Get hands-on with SumUp. Click through the demo and see how it works for a beauty business like yours — no sign-in needed.", |
| demoStripText: "Open the demo account", |
| demoStripSub: "Explore the platform at your own pace", |
| pricingLabel: "Pricing", |
| pricingHeadline: "Simple, personalised pricing.", |
| pricingSub: "No hidden costs. No commissions. 24/7 Priority Care included on every plan.", |
| pricingTag: "Personalised fees", |
| pricingAmount: (c) => `Plans starting from ${c}39/month — with payment fees from 0.6%.`, |
| pricingBody: (c) => `We work with each beauty business individually to find the right plan for your volume and setup. Book a free call and we'll put together a personalised quote tailored to how your business runs.`, |
| pp1: "Transparent pricing — what you see is what you pay", |
| pp2: "No setup fees, no long-term contracts", |
| pp3: "24/7 Priority Care included on every plan", |
| pricingNote: "Exact fees are confirmed on your free demo call based on your business type and transaction volume.", |
| bookLabel: "Ready to talk?", |
| bookingTitle: (name) => name ? `Book your free call with ${name}.` : "Book your free call.", |
| 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", |
| 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", |
| bookNote: "Free cancellation anytime · No sign-in required", |
| noRepHint: "Select a representative above to book", |
| }, |
| de: { |
| navCta: "Kostenlose Demo buchen →", |
| repHey: (name) => `Hallo, ich bin ${name} 👋`, |
| repHeadline: "Deine persönliche SumUp Beauty Spezialistin.", |
| repBody: "Ich habe diese Seite speziell für dich zusammengestellt, damit du SumUp in deinem eigenen Tempo entdecken kannst. Schau dich um, prüf die Preise und buche ein Gespräch, wann immer du bereit bist.", |
| repCtaText: "Kostenlose Demo buchen", |
| repRole: "SumUp Beauty Spezialistin", |
| bookingLabel: "Kernfunktion", |
| bookingHeadline: "Smarte Buchungen, die sich selbst verwalten.", |
| bookingSub: "Nichterscheinen kostet Beauty-Businesses jedes Jahr Tausende. Das Buchungssystem von SumUp gibt dir die Kontrolle zurück — automatisch.", |
| bp1Title: "Online-Buchung rund um die Uhr", |
| bp1Body: "Kunden buchen selbst — jederzeit, ohne langes Hin-und-Her.", |
| bp2Title: "Automatische Erinnerungen", |
| bp2Body: "SMS- und E-Mail-Erinnerungen werden automatisch verschickt, um Nichterscheinen zu reduzieren.", |
| bp3Title: "Anzahlungen & Stornierungsgebühren", |
| bp3Body: "Verlange Anzahlungen im Voraus und berechne Stornierungsgebühren automatisch.", |
| bp4Title: "Deine eigene Buchungsseite", |
| bp4Body: "Eine gebrandete Seite, die Kunden teilen und speichern können — kein App-Download nötig.", |
| featuresLabel: "Und noch mehr", |
| featuresHeadline: "Alles, was dein Business braucht.", |
| featuresSub: "SumUp geht über Buchungen hinaus — und gibt dir das komplette Werkzeug zum Verwalten, Wachsen und Kassieren.", |
| f1Title: "Kasse & Zahlungen", f1Body: "Karte, Apple Pay, Google Pay — zu wettbewerbsfähigen Konditionen mit Auszahlung am nächsten Tag.", |
| f2Title: "Treueprogramm", f2Body: "Punkte- und Stempelprogramme, um Einmalkunden zu Stammkunden zu machen.", |
| f3Title: "Geschenkgutscheine", f3Body: "Digitale Gutscheine, die neue Kunden ohne zusätzliche Kosten bringen.", |
| f4Title: "Sofortkredit", f4Body: "Finanzierung auf Basis deiner Umsätze — automatisch zurückgezahlt beim Handeln.", |
| demoLabel: "Selbst ausprobieren", |
| demoHeadline: "Demo-Konto erkunden.", |
| demoSub: "Teste SumUp direkt. Klick dich durch die Demo und sieh, wie es für ein Beauty-Business wie deins funktioniert — kein Login nötig.", |
| demoStripText: "Demo-Konto öffnen", |
| demoStripSub: "Die Plattform in deinem eigenen Tempo erkunden", |
| pricingLabel: "Preise", |
| pricingHeadline: "Einfache, individuelle Preise.", |
| pricingSub: "Keine versteckten Kosten. Keine Provisionen. 24/7 Priority Care in jedem Tarif enthalten.", |
| pricingTag: "Individuelle Konditionen", |
| pricingAmount: (c) => `Tarife ab ${c}39/Monat — mit Zahlungsgebühren ab 0,6 %.`, |
| pricingBody: () => `Wir arbeiten mit jedem Beauty-Business individuell zusammen, um den richtigen Tarif für dein Volumen und Setup zu finden. Buche ein kostenloses Gespräch und wir erstellen dir ein individuelles Angebot.`, |
| pp1: "Transparente Preise — du zahlst genau das, was du siehst", |
| pp2: "Keine Einrichtungsgebühren, keine Langzeitverträge", |
| pp3: "24/7 Priority Care in jedem Tarif enthalten", |
| pricingNote: "Genaue Konditionen werden im kostenlosen Demo-Gespräch basierend auf deinem Geschäftstyp und Transaktionsvolumen bestätigt.", |
| bookLabel: "Bereit zum Gespräch?", |
| bookingTitle: (name) => name ? `Buche deinen kostenlosen Anruf mit ${name}.` : "Buche deinen kostenlosen Anruf.", |
| 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", |
| directBookNote: "Kostenlose Stornierung jederzeit · Keine Anmeldung erforderlich", |
| repSelectorLabel: "Wähle deinen SumUp-Ansprechpartner", |
| repIntroText: "Gespräch buchen mit", |
| bookBtnText: "Kostenlosen 30-Min-Anruf buchen", |
| bookNote: "Kostenlose Stornierung jederzeit · Keine Anmeldung erforderlich", |
| noRepHint: "Bitte oben einen Ansprechpartner auswählen", |
| }, |
| it: { |
| navCta: "Prenota una demo gratuita →", |
| repHey: (name) => `Ciao, sono ${name} 👋`, |
| repHeadline: "Il tuo specialista SumUp Beauty personale.", |
| repBody: "Ho preparato questa pagina apposta per te, così puoi esplorare SumUp con i tuoi tempi. Dai un'occhiata, controlla i prezzi e prenota una chiamata quando sei pronto/a.", |
| repCtaText: "Prenota una demo gratuita", |
| repRole: "Specialista SumUp Beauty", |
| bookingLabel: "Funzionalità principale", |
| bookingHeadline: "Prenotazioni intelligenti che si gestiscono da sole.", |
| bookingSub: "Le mancate presenze costano alle attività beauty migliaia di euro ogni anno. Il sistema di prenotazione SumUp ti rimette in controllo — automaticamente.", |
| bp1Title: "Prenotazioni online 24/7", |
| bp1Body: "I clienti si prenotano da soli in qualsiasi momento — niente messaggi avanti e indietro.", |
| bp2Title: "Promemoria automatici", |
| bp2Body: "Promemoria via SMS ed e-mail inviati automaticamente per ridurre le mancate presenze.", |
| bp3Title: "Depositi e penali di cancellazione", |
| bp3Body: "Richiedi depositi anticipati e addebita automaticamente le penali per cancellazioni tardive.", |
| bp4Title: "La tua pagina di prenotazione", |
| bp4Body: "Una pagina brandizzata che i clienti possono condividere e salvare, senza scaricare app.", |
| featuresLabel: "E c'è molto altro", |
| featuresHeadline: "Tutto ciò di cui la tua attività ha bisogno.", |
| featuresSub: "SumUp va oltre le prenotazioni — offrendoti gli strumenti completi per gestire, crescere e incassare.", |
| f1Title: "POS e Pagamenti", f1Body: "Carta, Apple Pay, Google Pay — a tariffe competitive con accrediti il giorno successivo.", |
| f2Title: "Fidelizzazione", f2Body: "Programmi a punti e timbri per trasformare i clienti occasionali in abituali.", |
| f3Title: "Gift Card", f3Body: "Gift card digitali che portano nuovi clienti senza costi aggiuntivi.", |
| f4Title: "Anticipo in Contanti", f4Body: "Finanziamento basato sulle tue vendite — rimborsato automaticamente man mano che lavori.", |
| demoLabel: "Provalo tu stesso", |
| demoHeadline: "Esplora l'account demo live.", |
| demoSub: "Metti mano su SumUp. Naviga nella demo e scopri come funziona per un'attività beauty come la tua — nessun accesso richiesto.", |
| demoStripText: "Apri l'account demo", |
| demoStripSub: "Esplora la piattaforma con i tuoi tempi", |
| pricingLabel: "Prezzi", |
| pricingHeadline: "Prezzi semplici e personalizzati.", |
| pricingSub: "Nessun costo nascosto. Nessuna commissione. Assistenza prioritaria 24/7 inclusa in ogni piano.", |
| pricingTag: "Tariffe personalizzate", |
| pricingAmount: (c) => `Piani a partire da ${c}39/mese — con commissioni sui pagamenti dall'0,6%.`, |
| pricingBody: () => `Lavoriamo con ogni attività beauty individualmente per trovare il piano giusto in base al tuo volume e alla tua configurazione. Prenota una chiamata gratuita e ti prepareremo un preventivo personalizzato.`, |
| pp1: "Prezzi trasparenti — paghi esattamente quello che vedi", |
| pp2: "Nessun costo di attivazione, nessun contratto a lungo termine", |
| pp3: "Assistenza prioritaria 24/7 inclusa in ogni piano", |
| pricingNote: "Le tariffe esatte vengono confermate durante la chiamata demo gratuita in base al tipo di attività e al volume delle transazioni.", |
| bookLabel: "Pronto a parlare?", |
| bookingTitle: (name) => name ? `Prenota la tua chiamata gratuita con ${name}.` : "Prenota la tua chiamata gratuita.", |
| 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", |
| 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", |
| bookNote: "Cancellazione gratuita in qualsiasi momento · Nessun accesso richiesto", |
| noRepHint: "Seleziona un rappresentante qui sopra per prenotare", |
| } |
| }; |
| |
| |
| |
| |
| const params = new URLSearchParams(window.location.search); |
| const repSlug = (params.get('rep') || '').toLowerCase().trim(); |
| const matchRep = reps.find(r => r.slug === repSlug); |
| |
| |
| const lang = (matchRep && t[matchRep.lang]) ? matchRep.lang : 'en'; |
| const tr = t[lang]; |
| const currency = matchRep ? matchRep.currency : '£'; |
| |
| |
| const demoLinksByLang = { |
| en: "https://www.sumupbookings.com/demo-bookings-uk", |
| it: "https://www.sumupbookings.com/demo-bookings-it", |
| de: "https://www.sumupbookings.com/demo-bookings-de", |
| }; |
| |
| function setText(id, val) { |
| const el = document.getElementById(id); |
| if (el && val !== undefined) el.textContent = val; |
| } |
| |
| function setAvatar(el, rep) { |
| if (rep.photo) { |
| el.innerHTML = `<img src="${rep.photo}" alt="${rep.name}" style="width:100%;height:100%;object-fit:cover;display:block;" />`; |
| el.style.background = 'none'; |
| } else { |
| el.textContent = rep.initials; |
| el.style.background = `linear-gradient(135deg, ${rep.color} 0%, ${rep.color}99 100%)`; |
| } |
| } |
| |
| |
| |
| |
| setText('navCta', tr.navCta); |
| setText('bookingLabel', tr.bookingLabel); |
| setText('bookingHeadline', tr.bookingHeadline); |
| setText('bookingSub', tr.bookingSub); |
| setText('bp1Title', tr.bp1Title); setText('bp1Body', tr.bp1Body); |
| setText('bp2Title', tr.bp2Title); setText('bp2Body', tr.bp2Body); |
| setText('bp3Title', tr.bp3Title); setText('bp3Body', tr.bp3Body); |
| setText('bp4Title', tr.bp4Title); setText('bp4Body', tr.bp4Body); |
| setText('featuresLabel', tr.featuresLabel); |
| setText('featuresHeadline', tr.featuresHeadline); |
| setText('featuresSub', tr.featuresSub); |
| setText('f1Title', tr.f1Title); setText('f1Body', tr.f1Body); |
| setText('f2Title', tr.f2Title); setText('f2Body', tr.f2Body); |
| setText('f3Title', tr.f3Title); setText('f3Body', tr.f3Body); |
| setText('f4Title', tr.f4Title); setText('f4Body', tr.f4Body); |
| setText('demoLabel', tr.demoLabel); |
| setText('demoHeadline', tr.demoHeadline); |
| setText('demoSub', tr.demoSub); |
| setText('demoStripText', tr.demoStripText); |
| setText('demoStripSub', tr.demoStripSub); |
| |
| |
| const demoLinkEl = document.getElementById('demoLink'); |
| if (demoLinkEl) demoLinkEl.href = demoLinksByLang[lang] || demoLinksByLang.en; |
| |
| setText('pricingLabel', tr.pricingLabel); |
| setText('pricingHeadline', tr.pricingHeadline); |
| setText('pricingSub', tr.pricingSub); |
| setText('pricingTag', tr.pricingTag); |
| setText('pricingAmount', tr.pricingAmount(currency)); |
| setText('pricingBody', tr.pricingBody(currency)); |
| setText('pp1', tr.pp1); setText('pp2', tr.pp2); setText('pp3', tr.pp3); |
| setText('pricingNote', tr.pricingNote); |
| setText('bookLabel', tr.bookLabel); |
| setText('bookingSectionSub', tr.bookingSectionSub); |
| setText('repSelectorLabel', tr.repSelectorLabel); |
| setText('repIntroText', tr.repIntroText); |
| setText('bookBtnText', tr.bookBtnText); |
| setText('bookNote', tr.bookNote); |
| setText('noRepHint', tr.noRepHint); |
| setText('directBookNote', tr.directBookNote); |
| setText('directBookBtnText', tr.directBookBtnText); |
| |
| |
| |
| |
| if (matchRep) { |
| |
| document.getElementById('repIntroBanner').classList.add('visible'); |
| setAvatar(document.getElementById('repAvatarHero'), matchRep); |
| setText('repHey', tr.repHey(matchRep.name)); |
| setText('repIntroHeadline', tr.repHeadline); |
| setText('repIntroBody', tr.repBody); |
| setText('repIntroCtaText', tr.repCtaText); |
| document.getElementById('repIntroCta').href = matchRep.link; |
| |
| |
| setText('bookingTitle', tr.bookingTitle(matchRep.name)); |
| setText('directRepName', tr.directRepName(matchRep.name)); |
| setText('directRepRole', tr.directRepRole); |
| document.getElementById('repSelector').style.display = 'none'; |
| document.getElementById('directRepBox').style.display = 'flex'; |
| const avatarEl = document.getElementById('directRepAvatar'); |
| setAvatar(avatarEl, matchRep); |
| avatarEl.style.borderRadius = '50%'; |
| document.getElementById('directBookLink').href = matchRep.link; |
| |
| } else { |
| |
| 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'); |
| |
| reps.forEach(rep => { |
| const btn = document.createElement('button'); |
| btn.className = 'rep-btn'; |
| btn.innerHTML = ` |
| <div class="rep-avatar" style="background:linear-gradient(135deg,${rep.color} 0%,${rep.color}99 100%)"> |
| ${rep.photo ? `<img src="${rep.photo}" alt="${rep.name}" style="width:100%;height:100%;object-fit:cover;display:block;" />` : rep.initials} |
| </div> |
| <div class="rep-name-label">${rep.name}</div> |
| `; |
| btn.addEventListener('click', () => { |
| grid.querySelectorAll('.rep-btn').forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| repName.textContent = rep.name; |
| bookLink.href = rep.link; |
| ctaArea.classList.add('visible'); |
| noRepHint.style.display = 'none'; |
| }); |
| grid.appendChild(btn); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
|
|
