Huisstijl MobilePoint

Telefoonwinkel (SBI 4742) – alle kleuren, knoppen en stijlen consistent. Gebaseerd op Strawberry-website.

Kleuren

Primary
#dc2626
Knoppen, logo, links
Secondary
#92340e
Gradient, iconen
Accent
#fde047
Hero secundaire knop, highlights
Achtergrond
#f9fafb
Pagina, secties
Hero gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 40%, #92340e 100%)
Geen patroon; onderrand: border-bottom + box-shadow voor strakke contour.

Huidige variant (voorbeeldpagina): lichte hero

  • Hero-achtergrond: licht gradient #f5f5f5 → #e5e5e5 → #fafafa (geen donkere gradient)
  • Titel / accent: geel #eab308 met lichte text-shadow
  • Bodytekst: zwart #1a1a1a, geen shadow
  • Stats cijfers (500+, 24/7, 5★): geel #eab308
  • Stats subtitels (Premium Producten, Expert Support, Premium Reviews): rood #b91c1c, font-weight 600
  • Bezoek Winkel-knop: zwarte tekst, rode rand #b91c1c; hover: rode vulling, witte tekst

Optioneel: donkere hero

Voor donkere gradient: wit/creme/geel tekst, zie .gradient-bg en .hero-left kleuren hierboven.

Knoppen

Op de pagina (content)

In de hero (lichte variant, huidig)

Nav CTA: bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700

Typografie

Heading 1
text-4xl font-bold text-gray-800
Sectietitel met accent
text-3xl font-bold | accent: text-red-600

Bodytekst: max-w-2xl mx-auto voor leesbare regelbreedte. Kleur text-gray-600 voor body, text-gray-800 voor headings.

text-gray-600 leading-relaxed
Prijzen / CTA-tekst
text-2xl font-bold text-red-600

Cards

Productnaam

Korte beschrijving.

€1.099

Dienst

Korte uitleg dienst.

Hero (huidige variant)

De Nieuwste Smartphones
Ultra Premium Kwaliteit

Korte hero-tekst. Lichte achtergrond, geel titel, zwarte body.

500+
Premium Producten
24/7
Expert Support
5★
Premium Reviews

Beelden

Zoals de Strawberry mockup één base-URL en een vaste lijst .webp-bestanden heeft (/cache/images/ + bestandsnamen), gebruikt de telefoonwinkel één base-URL en onderstaande vaste lijst. Alle relevante beelden voor de voorbeeld- en huisstijlpagina staan hier.

Base URL: https://examples.itlive.nl/sbi/4742/
Benodigde bestanden (8 stuks):
  • hero.webp
  • telefoonwinkel-hero-2.webp
  • telefoonwinkel-hero-3.webp
  • telefoonwinkel-iphone.webp
  • telefoonwinkel-samsung.webp
  • telefoonwinkel-ipad.webp
  • telefoonwinkel-airpods.webp
  • telefoonwinkel-repair.webp

Deze bestanden horen in examples.itlive.nl/sbi/4742/ te staan. Voorbeeldpagina laadt ze daar vandaan.

Beschikbare widgets

We hebben 90+ herbruikbare widgets (hero, productkaarten, stats, knoppen, formulieren, etc.) voor SBI-voorbeelden en gegenereerde sites. Zie het overzicht in de sitemap.

Naar sitemap & overzicht

Consistent gebruik

Gebruik op sbi-telefoonwinkel-voorbeeld.php en alle telefoonwinkel-pagina's exact deze kleuren en klassen. CSS-variabelen (--tel-primary, etc.) kun je in een gedeeld stylesheet zetten; de voorbeeldpagina gebruikt dezelfde waarden inline. Strawberry-structuur: max-w-7xl mx-auto px-4, sticky nav shadow-lg, card-hover, dubbele CTA in hero.

Naar voorbeeldpagina