// Mobile-native marketing site for The Fone Shop // 390px design target. Touch-first, stacked, single-column. const { useState, useEffect, useRef } = React; // ---------- SHARED TOKENS ---------- const ORANGE = '#FF6B1A'; const BG = '#000'; const CARD = '#0a0a0a'; const BORDER = '#1f1f1f'; const MUTED = '#86868b'; // ---------- PRIMITIVES ---------- const Btn = ({ children, onClick, variant = 'primary', full = false, icon, style }) => { const [press, setPress] = useState(false); const base = { height: 52, padding: '0 22px', border: 0, borderRadius: 10, fontFamily: 'Inter, system-ui', fontSize: 16, fontWeight: 500, letterSpacing: '-0.022em', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, width: full ? '100%' : 'auto', transition: 'transform 120ms, background 150ms', transform: press ? 'scale(0.97)' : 'scale(1)', touchAction: 'manipulation', }; const v = variant === 'primary' ? { background: press ? '#B8450C' : ORANGE, color: 'var(--accent-text, #000)' } : { background: 'transparent', color: 'var(--accent)', boxShadow: 'inset 0 0 0 1px var(--border)' }; return ( ); }; const Eyebrow = ({ children, style }) => (
{children}
); const OpenDot = () => ( Open until 7pm ); // ---------- MOBILE HEADER ---------- const MHeader = ({ scrolled, onMenu }) => (
The Fone Shop
{typeof ThemeToggle !== 'undefined' && }
); const MenuSheet = ({ open, onClose, onNav }) => { useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); }; }, [open, onClose]); const links = [ ['Repairs', 'services', 'tool'], ['Pricing', 'pricing', 'tag'], ['Before / After', 'before-after', 'swap'], ['How it works', 'how', 'path'], ['Reviews', 'reviews', 'star'], ['Contact', 'contact', 'pin'], ]; const icon = (k) => { const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (k) { case 'tool': return ; case 'tag': return ; case 'swap': return ; case 'path': return ; case 'star': return ; case 'pin': return ; case 'admin': return ; case 'cam': return ; case 'key': return ; default: return null; } }; return (
); }; // ---------- MOBILE HERO ---------- const MHero = ({ onSnap }) => (
{/* Full-bleed hero video — iOS-safe autoplay */} {/* Readability overlay — bottom-heavy gradient so the title floats over the video and the copy at the bottom is solidly legible */}
); // ---------- TRUST STRIP ---------- const MTrust = () => (
{[['Since 2012', 'on The Strand'], ['< 1 hr', 'most repairs'], ['12 mo', 'warranty'], ['Open it', 'no send-offs']].map(([k, v]) => (
{k}
{v}
))}
); // ---------- MOBILE CALCULATOR ---------- const BRANDS = ['Apple', 'Samsung', 'Google', 'Other']; const MODELS = { Apple: ['iPhone 15', 'iPhone 14', 'iPhone 13', 'iPhone 12', 'Older'], Samsung: ['Galaxy S24', 'Galaxy S23', 'Galaxy S22', 'A-series'], Google: ['Pixel 8', 'Pixel 7', 'Pixel 6'], Other: ['Tell us'], }; const FIXES = [ ['Screen', '📱', { 'iPhone 15': 189, 'iPhone 14': 149, 'iPhone 13': 119, 'iPhone 12': 99, 'Older': 79, 'Galaxy S24': 199, 'Galaxy S23': 169, 'Galaxy S22': 139, 'A-series': 79, 'Pixel 8': 159, 'Pixel 7': 139, 'Pixel 6': 119, 'Tell us': 0 }], ['Battery', '🔋', { 'iPhone 15': 69, 'iPhone 14': 59, 'iPhone 13': 55, 'iPhone 12': 49, 'Older': 45, 'Galaxy S24': 69, 'Galaxy S23': 65, 'Galaxy S22': 59, 'A-series': 45, 'Pixel 8': 65, 'Pixel 7': 59, 'Pixel 6': 55, 'Tell us': 0 }], ['Charge port', '🔌', { 'iPhone 15': 55, 'iPhone 14': 55, 'iPhone 13': 55, 'iPhone 12': 55, 'Older': 45, 'Galaxy S24': 55, 'Galaxy S23': 55, 'Galaxy S22': 55, 'A-series': 45, 'Pixel 8': 55, 'Pixel 7': 55, 'Pixel 6': 55, 'Tell us': 0 }], ['Back glass', '🪟', { 'iPhone 15': 89, 'iPhone 14': 79, 'iPhone 13': 69, 'iPhone 12': 59, 'Older': 49, 'Galaxy S24': 99, 'Galaxy S23': 89, 'Galaxy S22': 79, 'A-series': 49, 'Pixel 8': 79, 'Pixel 7': 69, 'Pixel 6': 59, 'Tell us': 0 }], ]; const Chip = ({ label, icon, selected, onClick }) => ( ); const useCountUp = (target, ms = 500) => { const [v, setV] = useState(target); const ref = useRef(target); useEffect(() => { const start = ref.current; const delta = target - start; const t0 = performance.now(); let raf; const tick = (t) => { const p = Math.min(1, (t - t0) / ms); const eased = 1 - Math.pow(1 - p, 3); setV(Math.round(start + delta * eased)); if (p < 1) raf = requestAnimationFrame(tick); else ref.current = target; }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target]); return v; }; const MCalculator = () => { const [brand, setBrand] = useState(null); const [model, setModel] = useState(null); const [fix, setFix] = useState(null); const price = fix && model ? (FIXES.find(f => f[0] === fix)?.[2]?.[model] ?? 0) : 0; const display = useCountUp(price); const reset = () => { setBrand(null); setModel(null); setFix(null); }; return (
Live pricing

Tap your
way to a quote.

Three taps. Real starting price. Firmed up in 5 minutes, in the shop.

{/* Steps */}
{/* Step 1 */} { setBrand(null); setModel(null); setFix(null); }}>
{BRANDS.map(b => setBrand(b)} />)}
{/* Step 2 */} {brand && ( { setModel(null); setFix(null); }}>
{MODELS[brand].map(m => setModel(m)} />)}
)} {/* Step 3 */} {model && ( setFix(null)}>
{FIXES.map(([name, icon]) => ( setFix(name)} /> ))}
)}
{/* Quote card */} {fix && (
Your quote
{model} · {fix}
{price === 0 ? (
Message us — we'll price it fairly
) : ( <>
£{display}
usually same day
Price includes parts, labour, and our 12-month warranty. No fix, no fee.
)}
window.location.href = 'tel:01782343842'} icon={☎}>Call to book Start again
)}
); }; const Step = ({ num, label, active, done, value, onEdit, children }) => (
{done ? '✓' : num}
{label}{value && · {value}}
{done && ( )}
{active && children}
); // ---------- BEFORE / AFTER ---------- const MBeforeAfter = () => { const [x, setX] = useState(50); const ref = useRef(null); const onMove = (clientX) => { const r = ref.current.getBoundingClientRect(); const pct = Math.max(2, Math.min(98, ((clientX - r.left) / r.width) * 100)); setX(pct); }; return (
Before / after

Drag to see
what 47 minutes does.

{ e.currentTarget.setPointerCapture(e.pointerId); onMove(e.clientX); }} onPointerMove={e => { if (e.buttons) onMove(e.clientX); }} style={{ position: 'relative', aspectRatio: '1 / 1', borderRadius: 16, background: 'var(--bg-2)', overflow: 'hidden', touchAction: 'none', border: `1px solid ${BORDER}`, cursor: 'ew-resize', userSelect: 'none', }}> {/* after (fixed) */} {/* before (cracked) */} {/* labels */}
BEFORE
AFTER
{/* slider line + handle */}
{/* stats */}
{[['47m', 'workbench to done'], ['£129', 'fixed, not refurb'], ['12mo', 'warranty']].map(([k, v]) => (
{k}
{v}
))}
); }; // ---------- SERVICES ---------- const MServices = () => { const items = [ ['01', 'phone', 'Phone repair', "Screens in 40 min. Boards same day. No send-offs."], ['02', 'tablet', 'Tablet repair', 'iPads, Samsung, Kindle. Digitisers relaminated — not bodged.'], ['03', 'laptop', 'Laptop repair', "Screens, keyboards, boards. Write-offs welcome — show us first."], ['04', 'console', 'Console repair', 'PS5, Xbox, Switch. HDMI drop-ins, disc drives, fan rebuilds.'], ]; const shapes = { phone: <>, tablet: <>, laptop: <>, console: <>, }; return (
Repairs

Whatever's broken.
Probably fixable.

{items.map(([n, slug, title, body]) => (
{shapes[slug]}
{n}

{title}

{body}

))}
); }; // ---------- SAME DAY INTERSTITIAL ---------- const MInterstitial = () => (
Same
day.
Most repairs, under an hour.
); // ---------- HOW ---------- const MHow = () => (
How it works

Three steps.
One morning.

{[ ['01', 'Drop in or message.', "No appointment needed. We're on The Strand."], ['02', 'Free diagnostic.', "We tell you exactly what's wrong. No pressure."], ['03', 'Fixed. Usually same day.', "Grab a coffee. We'll text when it's ready."], ].map(([n, h, b]) => (
{n}

{h}

{b}

))}
); // ---------- REVIEWS (horizontal scroll) ---------- const MReviews = () => { const reviews = [ { name: 'Sarah M.', src: 'GOOGLE', date: '18 APR', stars: 5, body: "Cracked my iPhone on the Sunday, dropped it in Monday morning, picked it up at lunch. Lovely folk, proper local shop." }, { name: 'Dave', src: 'FACEBOOK', date: '12 APR', stars: 0, body: "Honest, quick, fair price. Fixed my laptop screen when Currys said it was a write-off.", rec: true }, { name: 'Linda H.', src: 'GOOGLE', date: '04 APR', stars: 5, body: "My grandson smashed the back of my phone. Sorted in an hour. Only £45. Proper local." }, { name: 'Ahmed', src: 'FACEBOOK', date: '28 MAR', stars: 0, body: "PS5 HDMI port snapped off. Thought it was gone. £70 and 2 days later, good as new.", rec: true }, ]; return (
The word on the high street

Longton trusts
the Strand shop.

{reviews.map((r, i) => (
{r.date}
{r.src}
{r.name}
{r.stars > 0 &&
{'★'.repeat(r.stars)}
} {r.rec && (
Recommends
)}

{r.body}

))}
); }; // ---------- LIVE STATUS + MAP ---------- const MStatus = () => (
Open now · another 2h 14m
27 The Strand, Longton
Stoke-on-Trent, ST3 2NR
{/* Stylised map */}
THE STRAND {/* pin */}
window.location.href = 'tel:01782343842'}>☎ Call 01782 343 842 window.open('https://maps.google.com/?q=The+Fone+Shop+Longton+ST3+2NR', '_blank')}>Directions →
); // ---------- FOOTER ---------- const MFooter = () => ( ); // ---------- STICKY BOTTOM CTA ---------- const StickyCTA = () => (
window.location.href = 'tel:01782343842'}>☎ Call window.open('https://www.facebook.com/thefoneshopst3', '_blank')}>Message
); Object.assign(window, { MHeader, MenuSheet, MHero, MTrust, MCalculator, MBeforeAfter, MServices, MInterstitial, MHow, MReviews, MStatus, MFooter, StickyCTA, });