A szolgáltatáskártya akkor hasznos, ha a látogató gyorsan megérti, mit kínálsz, és egyértelmű következő lépést kap. Az alábbi működő mintában három szolgáltatás szerepel, mindegyik saját gombbal. A példabeli fodrászati nevek és árak kizárólag tesztadatok; nem valós ajánlatok.
Mit tudsz kipróbálni?
Kattints valamelyik Érdekel gombra. A visszajelzésben az adott kártya neve és mintaára jelenik meg. A demó nem küld üzenetet, nem rögzít megrendelést és nem mér konverziót. A cél az elrendezés és az eseménykezelés bemutatása.
A kártyák a rendelkezésre álló szélességhez igazodnak. Éles oldalon külön ellenőrizni kell a hosszú szolgáltatásneveket, a hosszabb leírásokat és a mobilos megjelenést is. A saját példádat a másolható HTML-ben szereplő szövegek átírásával készítheted el.
Hogyan használd a v0-t ehhez a feladathoz?
A feladatleírásban nevezd meg a szolgáltatásokat, az olvasó célját és a gombok szerepét. Például kérj három reszponzív szolgáltatáskártyát világos szöveggel, sötét háttérrel és jól felismerhető gombbal. Ne kérj kitalált ügyfélvéleményt vagy mérési eredményt. A v0 használatának kiindulópontja a hivatalos gyorsindító. Az itt látható önálló HTML/JavaScript minta működési illusztráció, nem egy konkrét v0-projekt exportja.
Próbáld ki a működő példát
A teljes másolható kód
A HTML, CSS és JavaScript egyetlen index.html fájlban van. Másold ki, mentsd el, majd nyisd meg a böngészőben. Nincs szükség külső könyvtárra.
Teljes, másolható index.html
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reszponzív szolgáltatáskártyák – demó</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #202632;
color: #e6eef8;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 2rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
max-width: 900px;
width: 100%;
}
.service-card {
background-color: #2d3340;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(57, 160, 255, 0.2);
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.75rem;
color: #39a0ff;
}
.card-desc {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1.25rem;
opacity: 0.9;
}
.card-price {
font-size: 1.25rem;
font-weight: bold;
color: #ffffff;
margin-bottom: 1.5rem;
}
.card-btn {
width: 100%;
padding: 0.75rem;
background-color: #39a0ff;
border: none;
border-radius: 8px;
color: #fff;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
.card-btn:hover {
background-color: #2789e0;
}
.status-message {
margin-top: 1.25rem;
min-height: 1.5rem;
text-align: center;
font-size: 0.95rem;
color: #a0c8f0;
}
@media (max-width: 480px) {
.card-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="card-grid">
<!-- 1. kártya -->
<div class="service-card" data-card-id="1">
<h2 class="card-title">Hajvágás</h2>
<p class="card-desc">Igazodási tanácsadással, hajformázással, mosással és szárítással.</p>
<div class="card-price">4 900 Ft</div>
<button class="card-btn" type="button" data-action="select">Érdekel</button>
</div>
<!-- 2. kártya -->
<div class="service-card" data-card-id="2">
<h2 class="card-title">Hajfestés</h2>
<p class="card-desc">Tartós hajfestés, tónusfrissítés és melírozás a kívánt árnyalatban.</p>
<div class="card-price">9 500 Ft-tól</div>
<button class="card-btn" type="button" data-action="select">Érdekel</button>
</div>
<!-- 3. kártya -->
<div class="service-card" data-card-id="3">
<h2 class="card-title">Tupírozás</h2>
<p class="card-desc">Alkalmi tupírozás és formázás hajlakkal, extrák nélkül, friss megjelenésért.</p>
<div class="card-price">3 200 Ft</div>
<button class="card-btn" type="button" data-action="select">Érdekel</button>
</div>
</div>
<div id="statusMessage" class="status-message"></div>
<script>
(function() {
// DOM elemek elérése
const statusEl = document.getElementById('statusMessage');
const selectButtons = document.querySelectorAll('button[data-action="select"]');
// Üzenet megjelenítése a kártya nevével és árával
function showMessage(title, price) {
if (statusEl) {
statusEl.textContent = "Köszönjük, a '" + title + "' (árazás: " + price + ") lehetőségre kattintott!";
}
}
// Kattintás-kezelő beállítása minden gombra
selectButtons.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
const card = btn.closest('.service-card');
if (!card) return;
const title = card.querySelector('.card-title')?.textContent || '';
const price = card.querySelector('.card-price')?.textContent || '';
showMessage(title, price);
});
});
})();
</script>
</body>
</html>Három ellenőrzési feladat
- Első kártya: kattints a Hajvágás melletti Érdekel gombra. A visszajelzésben a Hajvágás névnek és a 4 900 Ft tesztárnak kell szerepelnie.
- Másik szolgáltatás: válaszd a Hajfestés gombját. A visszajelzésnek az új szolgáltatásra és a 9 500 Ft-tól tesztárra kell váltania.
- Ismételt használat: kattints újra az első kártyára. Az oldal ne töltődjön újra; a visszajelzés ismét az első szolgáltatást mutassa.
Mi kell az éles beépítéshez?
A bemutatóban a gomb csak helyi visszajelzést ad. Valódi honlapon eldöntendő, hogy szolgáltatásleírást nyisson meg, ajánlatkérésre vezessen vagy foglalási folyamatot indítson. Az árakat és feltételeket saját, aktuális adatokra kell cserélni. Ha ügyféladatot gyűjtesz, a feldolgozást, a jogosultságokat és az adatkezelést is meg kell tervezni.
Az éles átvételnél ellenőrizd a billentyűzetes kezelést, a fókusz láthatóságát és a mobilos elrendezést. WordPressben a kártyák szerkeszthetősége is fontos: ne kelljen minden árfrissítéshez a teljes HTML-t kézzel módosítani.
Ha a példából karbantartható céges megoldást szeretnél, nézd meg a weboldal készítés vagy a WordPress weboldal készítés szolgáltatásunkat. Ajánlatkéréskor írd meg, hány szolgáltatásod van, és hová vezessenek a gombok.
A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.