Download index.html from Sumup/Bookings: direct link, hf CLI and curl.
- Browser
- Download file 31.1 kB
-
https://huggingface.co/spaces/Sumup/Bookings/resolve/main/index.html
- Command line
-
hf download hf://spaces/Sumup/Bookings/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Sumup/Bookings/resolve/main/index.html
31.1 kB
| <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" /> <!-- ADD THIS LINE --> | |
| <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 ββ */ | |
| 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 ββ */ | |
| .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 ββ */ | |
| .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; } | |
| /* ββ SHARED SECTION ββ */ | |
| 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 ββ */ | |
| .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 ββ */ | |
| .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 ββ */ | |
| .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 ββ */ | |
| .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 ββ */ | |
| .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 ββ */ | |
| .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 ββ */ | |
| 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); } | |
| /* ββ RESPONSIVE ββ */ | |
| @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 ββ --> | |
| <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> | |
| <!-- ββ HERO ββ --> | |
| <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> | |
| <!-- ββ HOOK ββ --> | |
| <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> | |
| <!-- ββ ECOSYSTEM ββ --> | |
| <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> | |
| <!-- ββ DEMO STRIP ββ --> | |
| <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> | |
| <!-- ββ IMAGE BREAK ββ --> | |
| <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> | |
| <!-- ββ PRICING ββ --> | |
| <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> | |
| <!-- ββ BOOK A DEMO ββ --> | |
| <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> | |
| <!-- DIRECT REP MODE --> | |
| <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> | |
| <!-- DEFAULT MODE --> | |
| <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> | |
| <!-- ββ TESTIMONIAL (photo + quote with heading, below booking) ββ --> | |
| <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 ββ --> | |
| <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> | |