| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>SumUp — Run Your Beauty Business Beautifully</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; } |
| |
| |
| .hero { |
| background: var(--black); |
| color: var(--white); |
| padding: 80px 5%; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 60px; |
| align-items: center; |
| min-height: 80vh; |
| } |
| .hero h1 { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 900; |
| font-size: clamp(2.6rem, 4.5vw, 4rem); |
| line-height: 1.05; |
| letter-spacing: -1px; |
| margin-bottom: 20px; |
| } |
| .hero-sub { |
| font-size: 1.05rem; |
| font-weight: 400; |
| color: rgba(255,255,255,0.65); |
| line-height: 1.7; |
| margin-bottom: 36px; |
| max-width: 480px; |
| } |
| .btn-primary { |
| background: var(--grey1); |
| color: var(--black); |
| border: 4px solid var(--fuchsia); |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 1rem; |
| padding: 15px 32px; |
| border-radius: 8px; |
| text-decoration: none; |
| transition: background 0.2s, transform 0.15s; |
| display: inline-block; |
| } |
| .btn-primary:hover { background: var(--white); transform: translateY(-1px); } |
| .hero-image { |
| border-radius: var(--radius); |
| overflow: hidden; |
| aspect-ratio: 4/3; |
| } |
| .hero-image img { width: 100%; height: 100%; object-fit: contain; display: block; } |
| .img-placeholder { |
| width: 100%; height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: rgba(255,255,255,0.2); |
| font-size: 0.85rem; |
| } |
| |
| |
| .hook { |
| background: var(--white); |
| padding: 48px 5%; |
| } |
| .hook-inner { |
| max-width: 900px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: 220px 1fr; |
| border-radius: 16px; |
| overflow: hidden; |
| box-shadow: 0 4px 32px rgba(30,28,28,0.08); |
| } |
| .hook-left { |
| background: var(--black); |
| padding: 48px 40px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: flex-start; |
| gap: 6px; |
| } |
| .hook-left .the { |
| font-size: 0.72rem; |
| font-weight: 700; |
| color: rgba(255,255,255,0.45); |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| margin-bottom: 4px; |
| } |
| .hook-left .big { |
| font-family: 'Archivo', sans-serif; |
| font-size: clamp(2.4rem, 3.8vw, 3.6rem); |
| font-weight: 900; |
| color: var(--golden); |
| line-height: 1; |
| } |
| .hook-left .small { |
| font-size: 0.72rem; |
| font-weight: 700; |
| color: rgba(255,255,255,0.45); |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| margin-top: 4px; |
| } |
| .hook-right { |
| background: var(--grey1); |
| padding: 48px 44px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 14px; |
| } |
| .hook-right h3 { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 900; |
| font-size: clamp(1.2rem, 2vw, 1.55rem); |
| color: var(--black); |
| line-height: 1.2; |
| } |
| .hook-right p { |
| font-size: 0.9rem; |
| color: var(--grey); |
| line-height: 1.65; |
| max-width: 420px; |
| } |
| .hook-right a { |
| display: inline-block; |
| background: var(--black); |
| color: var(--white); |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 0.875rem; |
| padding: 12px 24px; |
| border-radius: 8px; |
| text-decoration: none; |
| width: fit-content; |
| transition: background 0.2s; |
| } |
| .hook-right a:hover { background: #333; } |
| |
| |
| section { padding: 80px 5%; } |
| .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: 14px; |
| } |
| .section-sub { |
| font-size: 1rem; |
| font-weight: 400; |
| color: var(--grey); |
| line-height: 1.7; |
| max-width: 560px; |
| } |
| |
| |
| .ecosystem { background: var(--white); } |
| .ecosystem-inner { max-width: 1200px; margin: 0 auto; } |
| .ecosystem-header { margin-bottom: 48px; } |
| .ecosystem-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 16px; |
| } |
| .eco-card { |
| background: var(--grey1); |
| border-radius: var(--radius); |
| padding: 28px 24px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| transition: transform 0.2s, box-shadow 0.2s; |
| } |
| .eco-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 12px 40px rgba(30,28,28,0.07); |
| } |
| .eco-icon { |
| width: 36px; height: 36px; |
| border-radius: 6px; |
| background: var(--black); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 8px; |
| flex-shrink: 0; |
| } |
| .eco-icon svg { display: block; } |
| .eco-card h3 { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 700; |
| font-size: 1rem; |
| color: var(--black); |
| } |
| .eco-card p { |
| font-size: 0.875rem; |
| font-weight: 400; |
| color: var(--grey); |
| line-height: 1.65; |
| } |
| |
| |
| .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; |
| margin-bottom: 32px; |
| transition: background 0.2s; |
| } |
| .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; |
| } |
| |
| |
| .image-break { |
| padding: 0; |
| height: 420px; |
| overflow: hidden; |
| background: var(--black); |
| } |
| .image-break img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| opacity: 0.75; |
| display: block; |
| } |
| .image-break-placeholder { |
| width: 100%; height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: rgba(255,255,255,0.2); |
| font-size: 0.85rem; |
| } |
| |
| |
| .testimonials { background: var(--grey1); padding: 80px 5%; } |
| .testimonials-inner { max-width: 1100px; margin: 0 auto; } |
| .testimonials-header { margin-bottom: 48px; } |
| |
| .testi-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| border-radius: var(--radius); |
| overflow: hidden; |
| } |
| .testi-photo { |
| aspect-ratio: 4/3; |
| overflow: hidden; |
| background: var(--lightgrey); |
| } |
| .testi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } |
| .testi-photo-placeholder { |
| width: 100%; height: 100%; min-height: 260px; |
| display: flex; align-items: center; justify-content: center; |
| color: var(--grey); font-size: 0.78rem; |
| background: var(--lightgrey); |
| } |
| .testi-content { |
| background: var(--white); |
| padding: 48px 44px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 20px; |
| } |
| .testi-quote { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 900; |
| font-size: clamp(1.25rem, 2vw, 1.65rem); |
| line-height: 1.25; |
| color: var(--black); |
| } |
| .testi-attribution { |
| font-size: 0.85rem; |
| font-weight: 400; |
| color: var(--grey); |
| } |
| .testi-attribution strong { |
| display: block; |
| font-weight: 700; |
| color: var(--black); |
| font-size: 0.9rem; |
| margin-bottom: 2px; |
| } |
| |
| |
| .pricing-section { background: var(--white); } |
| .pricing-inner { max-width: 900px; margin: 0 auto; } |
| .pricing-header { margin-bottom: 48px; } |
| .pricing-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| } |
| .pricing-card { |
| border-radius: var(--radius); |
| padding: 36px 32px; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
| .pricing-card.base { background: var(--grey1); color: var(--black); } |
| .pricing-card.saver { background: var(--grey1); color: var(--black); border: 4px solid var(--fuchsia); } |
| .pricing-card-label { |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| opacity: 0.6; |
| } |
| .pricing-card h3 { |
| font-family: 'Archivo', sans-serif; |
| font-weight: 900; |
| font-size: 1.5rem; |
| line-height: 1.1; |
| } |
| .pricing-price { display: flex; flex-direction: column; gap: 4px; } |
| .pricing-was { font-size: 1rem; font-weight: 400; text-decoration: line-through; opacity: 0.5; } |
| .pricing-now { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2.2rem; line-height: 1; } |
| .pricing-period { font-size: 0.85rem; font-weight: 400; opacity: 0.7; } |
| .pricing-divider { height: 1px; background: currentColor; opacity: 0.15; } |
| .pricing-detail { font-size: 0.9rem; font-weight: 400; line-height: 1.6; opacity: 0.85; } |
| .pricing-detail strong { font-weight: 700; display: block; margin-bottom: 4px; } |
| .pricing-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 0.82rem; |
| font-weight: 700; |
| } |
| .pricing-badge svg { flex-shrink: 0; } |
| |
| |
| .booking-section { background: var(--black); color: var(--white); } |
| .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 { 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; |
| line-height: 1.8; |
| } |
| footer a { color: rgba(255,255,255,0.45); text-decoration: none; } |
| footer a:hover { color: var(--white); } |
| |
| |
| @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; } |
| .ecosystem-grid { grid-template-columns: 1fr 1fr; } |
| .image-break { height: 260px; } |
| .pricing-grid { grid-template-columns: 1fr; } |
| .testi-row { grid-template-columns: 1fr; } |
| } |
| @media (max-width: 600px) { |
| .ecosystem-grid { grid-template-columns: 1fr 1fr; gap: 10px; } |
| .rep-selector { padding: 24px 16px; } |
| .direct-rep-box { padding: 32px 20px; } |
| .testi-content { padding: 32px 24px; } |
| .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">Book a free demo →</a> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="hero-content"> |
| <h1>Bookings and payments for beauty professionals.</h1> |
| <p class="hero-sub"> |
| Looking for a smarter way to get paid? Stop losing time and money to manual admin and client no-shows. Everything you need, in one place. |
| </p> |
| <a href="#book" class="btn-primary">Book a free demo</a> |
| </div> |
| <div class="hero-image"> |
| <img src="hero.png" alt="Beauty business owner using SumUp" |
| onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" /> |
| <div class="img-placeholder" style="display:none;">hero.png</div> |
| </div> |
| </section> |
|
|
| |
| <div class="hook"> |
| <div class="hook-inner"> |
| <div class="hook-left"> |
| <div class="the">The</div> |
| <div class="big">£500</div> |
| <div class="small">Guarantee</div> |
| </div> |
| <div class="hook-right"> |
| <h3>We'll beat your current payment fees — or give you £500.</h3> |
| <p>We're confident SumUp will save you money from day one. If we can't beat what you're currently paying, we'll hand you £500. Book a call with your local rep to find out more.</p> |
| <a href="#book">Book a free demo →</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="ecosystem"> |
| <div class="ecosystem-inner"> |
| <div class="ecosystem-header"> |
| <h2 class="section-title">Everything your beauty business needs. In one place.</h2> |
| <p class="section-sub">Stop juggling different tools. SumUp brings together everything you need to run, grow and get paid — all under one roof.</p> |
| </div> |
| |
| <a href="https://www.sumupbookings.com/demo-bookings-uk" target="_blank" rel="noopener" class="demo-strip"> |
| <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">See it in action</div> |
| <div class="demo-strip-sub">Explore a demo of the platform</div> |
| </div> |
| </div> |
| <div class="demo-strip-arrow">→</div> |
| </a> |
|
|
| <div class="ecosystem-grid"> |
|
|
| <div class="eco-card"> |
| <div class="eco-icon"> |
| <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="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> |
| </div> |
| <h3>Bookings</h3> |
| <p>Make no-shows a no-go. Set automated reminders, take deposits and charge no-show fees. Clients book themselves — you stay in control.</p> |
| </div> |
|
|
| <div class="eco-card"> |
| <div class="eco-icon"> |
| <svg width="18" height="18" 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>POS & Payments</h3> |
| <p>Fast, reliable in-person payments. Card, Apple Pay, Google Pay — all at competitive rates with instant payouts.</p> |
| </div> |
|
|
| <div class="eco-card"> |
| <div class="eco-icon"> |
| <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg> |
| </div> |
| <h3>Online Store</h3> |
| <p>Sell products and gift vouchers online. Easy to set up, easy to integrate — a new revenue stream without the hassle.</p> |
| </div> |
|
|
| <div class="eco-card"> |
| <div class="eco-icon"> |
| <svg width="18" height="18" 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>Loyalty</h3> |
| <p>Turn one-time visitors into regulars. Set up a points or stamp reward programme in minutes from your dashboard.</p> |
| </div> |
|
|
| <div class="eco-card"> |
| <div class="eco-icon"> |
| <svg width="18" height="18" 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>Gift Cards</h3> |
| <p>Let clients gift your services. Digital gift cards grow your revenue and bring in new customers at zero extra cost.</p> |
| </div> |
|
|
| <div class="eco-card"> |
| <div class="eco-icon"> |
| <svg width="18" height="18" 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>Cash Advance</h3> |
| <p>Need to invest in equipment or stock? Get funding based on your sales — repaid automatically as you trade.</p> |
| </div> |
|
|
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="image-break"> |
| <img src="image3.png" alt="Beauty salon" |
| onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" /> |
| <div class="image-break-placeholder" style="display:none;">image3.png</div> |
| </div> |
|
|
| |
| <section class="pricing-section"> |
| <div class="pricing-inner"> |
| <div class="pricing-header"> |
| <div class="section-label">Pricing</div> |
| <h2 class="section-title">Transparent pricing. No hidden costs. No commissions.</h2> |
| <p class="section-sub">Simple plans built for beauty businesses. 24/7 Priority Care included on every plan.</p> |
| </div> |
| <div class="pricing-grid"> |
|
|
| <div class="pricing-card base"> |
| <div class="pricing-card-label">Base Package</div> |
| <h3>Everything you need to get started.</h3> |
| <div class="pricing-divider"></div> |
| <div class="pricing-price"> |
| <span class="pricing-was">£79 / month</span> |
| <span class="pricing-now">£39</span> |
| <span class="pricing-period">per month</span> |
| </div> |
| <div class="pricing-detail"> |
| <strong>Payments</strong> |
| We match your current payment fees. |
| </div> |
| <div class="pricing-badge"> |
| <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg> |
| 24/7 Priority Care included |
| </div> |
| </div> |
|
|
| <div class="pricing-card saver"> |
| <div class="pricing-card-label">Saver Package</div> |
| <h3>Lower fees for higher volume businesses.</h3> |
| <div class="pricing-divider"></div> |
| <div class="pricing-price"> |
| <span class="pricing-was">£129 / month</span> |
| <span class="pricing-now">£99</span> |
| <span class="pricing-period">per month</span> |
| </div> |
| <div class="pricing-detail"> |
| <strong>Payments</strong> |
| 0.6% on all in-person cards · 1.49% on online cards |
| </div> |
| <div class="pricing-badge"> |
| <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg> |
| 24/7 Priority Care included |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="booking-section" id="book"> |
| <div class="booking-inner"> |
| <div class="section-label">Book a demo</div> |
| <h2 class="section-title">See it for yourself.</h2> |
| <p class="section-sub"> |
| Talk to a SumUp expert about your business. Free, 30 minutes, no commitment. |
| </p> |
|
|
| |
| <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">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> |
| Book your free 30-min demo |
| </a> |
| <p class="booking-note">Free cancellation anytime · No sign-in required</p> |
| </div> |
|
|
| |
| <div class="rep-selector" id="repSelector"> |
| <div class="rep-selector-label">Choose your SumUp representative</div> |
| <div class="rep-grid" id="repGrid"></div> |
| <div class="booking-cta-area" id="ctaArea"> |
| <p class="rep-intro">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> |
| Book your free 30-min demo |
| </a> |
| <p class="booking-note">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> |
|
|
| |
| <section class="testimonials"> |
| <div class="testimonials-inner"> |
| <div class="testimonials-header"> |
| <h2 class="section-title">Trusted by 4 million businesses just like yours.</h2> |
| </div> |
| <div class="testi-row"> |
| <div class="testi-photo"> |
| <img src="barber.png" alt="Andrew Thomas Jones" |
| onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" /> |
| <div class="testi-photo-placeholder" style="display:none;">barber.png</div> |
| </div> |
| <div class="testi-content"> |
| <p class="testi-quote">"Since my iPhone is always with me, I can accept payments wherever I go."</p> |
| <div class="testi-attribution"> |
| <strong>Andrew Thomas Jones</strong> |
| Hair stylist, London |
| </div> |
| </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: "YOUR_LINK_HERE" |
| }, |
| { |
| name: "Edoardo", |
| slug: "edoardo", |
| initials: "ET", |
| color: "#F9C300", |
| photo: "edoardo.jpg", |
| link: "YOUR_LINK_HERE" |
| }, |
| { |
| name: "Gareth", |
| slug: "gareth", |
| initials: "GD", |
| color: "#FF61F2", |
| photo: "gareth.jpg", |
| link: "https://calendar.app.google/8f7hQkr5a2H5rit7A" |
| }, |
| { |
| name: "Miriam", |
| slug: "miriam", |
| initials: "MK", |
| color: "#F9C300", |
| photo: "miriam.png", |
| link: "YOUR_LINK_HERE" |
| }, |
| { |
| name: "Shane", |
| slug: "shane", |
| initials: "SO", |
| color: "#FF61F2", |
| photo: "shane.png", |
| link: "YOUR_LINK_HERE" |
| }, |
| ]; |
| |
| const params = new URLSearchParams(window.location.search); |
| const repSlug = (params.get('rep') || '').toLowerCase().trim(); |
| const matchRep = reps.find(r => r.slug === repSlug); |
| |
| if (matchRep) { |
| document.getElementById('repSelector').style.display = 'none'; |
| document.getElementById('directRepBox').style.display = 'flex'; |
| const avatarEl = document.getElementById('directRepAvatar'); |
| if (matchRep.photo) { |
| avatarEl.innerHTML = `<img src="${matchRep.photo}" alt="${matchRep.name}" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;" />`; |
| avatarEl.style.background = 'none'; |
| } else { |
| avatarEl.textContent = matchRep.initials; |
| avatarEl.style.background = `linear-gradient(135deg, ${matchRep.color} 0%, ${matchRep.color}99 100%)`; |
| } |
| document.getElementById('directRepName').textContent = `Book with ${matchRep.name}`; |
| document.getElementById('directBookLink').href = matchRep.link; |
| document.querySelector('.booking-section .section-title').textContent = `Book with ${matchRep.name}.`; |
| } else { |
| 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">${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> |
|
|
