Mama's Ruhe – Weboldal Brief & Design Javaslat

Tartalmi javaslat

Javasolt oldalstruktúra és tartalmak

1.1 Főoldal (Homepage)

Hero szekció

Javasolt főcím (H1)

Mama's Ruhe – Frühstück direkt vor Ihre Zimmertür

Javasolt alcím

Genießen Sie ein entspanntes Frühstück im Urlaub. Wählen Sie aus drei hochwertigen Frühstückspaketen – frisch, regional und bequem online bestellbar.

Bevezető szöveg (2-3 mondat)

Im Urlaub hat Mama tausend Dinge im Kopf – aber das Frühstück übernehmen jetzt wir. Mit den Mama's Ruhe Paketen erhalten Sie ein reichhaltiges, gewohntes Frühstück, ohne Ihr Zimmer verlassen zu müssen. Wählen Sie einfach Ihr Lieblingspaket, bestellen Sie online mit nur wenigen Klicks.

Call-to-Action gombok

Elsődleges CTA: "Frühstückspakete ansehen" (ugrás a csomagok szekcióhoz)
Másodlagos CTA: "Frühstück bestellen" (ugrás a rendelő formhoz)

Reggeli csomagok előnézet – 3 kártya

Blokk címe: "Welches Frühstück passt heute zu Ihnen?"

Kártya 1: Ich snacke nur schnell etwas

Rövid leírás: Leichtes Frühstück mit frischen Brötchen, Butter, Marmelade, Tee, Gemüse und Obst.
CTA gomb: "Details ansehen"

Kártya 2: Wir sind schließlich im Urlaub

Rövid leírás: Ausgewogenes, süß-salziges Frühstück mit Aufschnitt, Käse, Aufstrichen, Smoothie und Tee.
CTA gomb: "Details ansehen"

Kártya 3: Heute gönn' ich mir was Besonderes

Rövid leírás: Luxuriöses Frühstück mit extra Auswahl, Smoothie, Honig und kleiner Süßigkeit.
CTA gomb: "Details ansehen"

Bemutatkozás szekció

Címsor

Was ist Mama's Ruhe?

Szöveg (3-4 bekezdés)

Wenn die Familie in den Urlaub fährt, denken die Eltern – besonders die Mütter – trotzdem an alles. Mama's Ruhe wurde geschaffen, um ihnen zumindest die Last des Frühstücks von den Schultern zu nehmen.

Wir haben drei Frühstückspakete zusammengestellt: ein leichtes Snack-Frühstück, ein klassisches „Urlaubs-Frühstück" und ein echtes Luxuspaket. Jedes enthält frische Backwaren, ausgewählte Aufschnitte und Käsesorten, süße Cremes und Getränke – direkt vor Ihrer Zimmertür.

Die Website ist geschlossen und nur für unsere Gäste zugänglich. So können Sie Ihre Frühstücksbestellung bequem online aufgeben, und die Anfragen landen sofort an der Rezeption.

1.2 Reggeli csomagok oldal

Bevezető szekció

Főcím

Unsere Frühstückspakete

Bevezető

Wählen Sie aus drei liebevoll zusammengestellten Frühstückspaketen – vom leichten Snack bis zum luxuriösen Genießerfrühstück. Alle Pakete werden pro Person berechnet und frisch vorbereitet.

Csomag 1: "Ich snacke nur schnell etwas"

Leírás: Ein einfaches, leichtes Frühstück für alle, die nur etwas Kleines essen möchten.

Ár: 20 € / Person

Tartalom:

2 Brötchen (wählbare Sorten)
1× 20 g Butter
2 Sorten Aufschnitt (Schinken/Salami)
2 Sorten Käse
1 Aufstrich
1 Marmelade (nach Wahl)
1 Teebeutel
Gemüseportion (z.B. Paprika, Tomaten, Gurke)
Obstportion

Csomag 2: "Wir sind schließlich im Urlaub"

Leírás: Ein süß-salzig ausgewogenes Frühstück – perfekt für einen entspannten Urlaubsmorgen.

Ár: 30 € / Person

Tartalom:

3 Brötchen (wählbare Sorten)
1× 20 g Butter
2 Sorten Aufschnitt
2 Sorten Käse
2 Aufstriche
1 Marmelade (nach Wahl)
1 Honig
Gemüseportion
1 Teebeutel
1 Smoothie (Tagesangebot)

Csomag 3: "Heute gönn' ich mir was Besonderes"

Leírás: Ein reichhaltiges Frühstück für besondere Tage – mit extra Auswahl und kleiner Süßigkeit.

Ár: 40 € / Person

Tartalom:

4 Brötchen
2× 20 g Butter
3 Sorten Aufschnitt
3 Sorten Käse
2 Aufstriche
2 Marmeladen
1 Honig
Gemüseportion
Obstportion
1 Teebeutel
1 Smoothie (Tagesangebot)
Kleine Süßigkeit (z.B. Bonbon, Mini-Gebäck)

Extrák szekció

Címsor: Extras – individuell ergänzbar

Bevezető: Sie können die Pakete nach Belieben mit separat erhältlichen Extras ergänzen. Die Preise für Extras werden pro Person berechnet.

Extra	Ár
Müsli	4 € / Portion
Smoothie	2 € / Portion
Marmelade	1,5 € / Portion
Teebeutel	1 € / Stück
Brötchen	1 € / Stück
Obstportion	2 € / Portion

Rendelő űrlap

Bevezető szöveg: Geben Sie hier Ihre Frühstücksbestellung auf. Bitte geben Sie die Anzahl der gewählten Pakete und eventuelle Extras genau an, damit wir alles nach Ihren Wünschen vorbereiten können.

Javasolt form mezők:

Mező neve (német)	Mező típus	Kötelező
Name	Text	Igen
E-Mail	Email	Nem
Zimmernummer / Appartement	Text	Igen
Datum des Frühstücks	Date	Igen
Lieferzeit	Select (07:30, 08:00, 08:30, 09:00)	Igen
Frühstückspaket auswählen	Radio button (Snack / Urlaub / Luxus)	Igen
Anzahl Personen	Number	Igen
Davon Kinder	Number	Nem
Extras (Müsli, Smoothie, stb.)	Number mezők külön-külön	Nem
Allergien / Besondere Hinweise	Textarea	Nem
Datenschutz-Akzeptanz	Checkbox	Igen

Gomb felirat: "Frühstück bestellen"

1.3 Kapcsolat oldal

Elérhetőségek szekció

Főcím

Kontakt & Erreichbarkeit

Bevezető

Wenn Sie Fragen zu den Frühstückspaketen, Allergenen oder zum Bestellablauf haben, kontaktieren Sie uns gerne über die folgenden Kanäle.

Megjelenítendő információk:

Unterkunft neve
Adresse (cím)
Telefon
E-Mail
Rezeption nyitvatartása

Kapcsolatfelvételi űrlap

Címsor: Schreiben Sie uns eine Nachricht

Form mezők:

Mező neve	Típus	Kötelező
Name	Text	Igen
E-Mail	Email	Igen
Zimmernummer / Appartement	Text	Nem
Betreff	Text	Igen
Nachricht	Textarea	Igen
Datenschutz-Akzeptanz	Checkbox	Igen

Gomb felirat: "Nachricht senden"

1.4 Képgaléria / Vizuális tartalmak

Javasolt képek témái:

Család reggelizik az ágyban – Hangulatos reggelizés a szobában
Közelkép friss zsemlékről – Péksütemények, vaj, lekvár
Vegyes sonka-sajttál zöldségekkel – "Urlaub" csomag illusztráció
Luxus reggelitál – Smoothie, méz, édesség, gyümölcsök
Reggeli kosár az ajtó előtt – Kiszállítás pillanata

📸 Megjegyzés a képekhez

A képeket professzionális minőségben javasolt készíteni vagy stock fotókat használni. Fontos, hogy a képek természetes fénnyel, otthonos, meleg hangulatot közvetítsenek, és tükrözzék a "Mama's Ruhe" nyugodt, gondoskodó jellegét.

Design javaslat

Vizuális irányelvek és stíluselemek

2.1 Design koncepció

Stílus: Minimalista, modern, tiszta vonalvezetés

Hangulat: Nyugodt, otthonos, barátságos, kicsit prémium

Inspiráció: Osztrák Alpok reggeli, természetes anyagok, "slow morning" érzés

Trendek (2025-26):

Bőséges white space (lélegző tér)
Soft shadows (finom árnyékok, nem kemény)
Organic color palette (természetes, meleg színek)
Clean typography (jól olvasható, elegáns)
Card-based layout (kártyás elrendezés)
Micro-interactions (finom hover animációk)

2.2 Színpaletta

Primary

#6C7B4C

Gombok, CTA-k, főcímek, linkek hover állapota, fontos kiemelések

Primary Hover

#5A6A3F

Primary elemek hover állapota (interakció)

Secondary

#C58A4A

Másodlagos kiemelések, badge-ek, címkék, kiegészítő színek

Accent

#D35B3F

Árak megjelenítése, fontos figyelmeztetések, kis mennyiségben használandó

Text

#2F3437

Fő szövegszín, címsorok, bekezdések (nem teljes fekete)

White

#FFFFFF

Tiszta fehér – kártyák háttere, gombok szövege

Light Background

#F7F3EC

Oldal fő háttérszíne – meleg, tört fehér

Light Accent

#EEE1D0

Kártyák háttere, formok, szakaszok finom elválasztása

Border

#D1C6B5

Input mezők kerete, elválasztó vonalak

💡 Színhasználati elvek

Primary szín: Nyugodt olívazöld – természetes, megnyugtató hatású, jól illik a reggeli/nyaralás témához.
Secondary szín: Meleg ókker/barnás árnyalat – "kenyérhéj" vagy "méz" asszociáció.
Accent szín: Gyümölcsös, lekvárszerű vörös-narancs – kis mennyiségben használva érdekessé teszi a palettát.
Háttér: Ne legyen hideg, "kórházas" fehér – inkább meleg, tört árnyalatok.

2.3 Betűtípusok (Typography)

Playfair Display

Google Fonts

Felhasználás: Címsorok (H1, H2, H3, H4), csomag címek

H1 (48px / 3rem) – Font-weight: 600

Mama's Ruhe

H2 (36px / 2.25rem) – Font-weight: 600

Unsere Frühstückspakete

H3 (28px / 1.75rem) – Font-weight: 600

Ich snacke nur schnell etwas

Karakter: Elegáns, klasszikus serif – prémium érzést ad, de nem túl merev vagy "öregúras".
Miért jó választás: Jól áll a csomagnevek karakteréhez, olvasható német Umlaut karakterekkel is.

Nunito

Google Fonts

Felhasználás: Bekezdések, gombok, form mezők, navigáció, minden UI elem

Body / Paragraph (16px / 1rem) – Font-weight: 400, Line-height: 1.6

Lead text (18px / 1.125rem) – Font-weight: 400, Line-height: 1.7

Genießen Sie ein entspanntes Frühstück im Urlaub. Wählen Sie aus drei hochwertigen Frühstückspaketen.

Button text (16px / 1rem) – Font-weight: 600

Frühstück bestellen

Karakter: Kerek, barátságos, modern sans-serif – könnyen olvasható.
Miért jó választás: Kényelmes olvasás hosszabb szövegeknél, jól működik német karakterekkel (ä, ö, ü, ß).

📝 Tipográfiai skála

2.4 UI Elemek

Gombok (Buttons)

A gombok kapszula formájúak (lekerekített sarkok), jól látható CTA-k, hover animációval.

Primary Button

Háttérszín:: Primary (#6C7B4C)
Szövegszín:: White (#FFFFFF)
Font:: Nunito, 16px, Font-weight: 600
Padding:: 14px 32px (függőleges vízszintes)
Border radius:: 999px (teljes lekerekítés – "pill" alak)
Hover állapot:: Háttér: Primary Hover (#5A6A3F)
Transform: translateY(-2px) – finom "felemelkedés"
Shadow: 0 4px 12px rgba(0,0,0,0.15)
Átmenet (transition):: 0.3s ease (minden tulajdonságra)

PÉLDA – Alapállapot:

Secondary Button

Háttérszín:: White (#FFFFFF)
Szövegszín:: Primary (#6C7B4C)
Border:: 2px solid Primary (#6C7B4C)
Hover állapot:: Háttér: Primary (#6C7B4C)
Szöveg: White (#FFFFFF)
Transform & Shadow: mint Primary Button

PÉLDA – Alapállapot:

Gombok együtt:

Kártyák (Cards)

A kártyák a főoldali csomag előnézetekhez, és egyéb tartalmi blokkokhoz használhatók.

Háttérszín:: White (#FFFFFF)
Border radius:: 16px
Padding:: 32px (belső térköz)
Shadow (alapállapot):: 0 2px 8px rgba(47, 52, 55, 0.08)
Shadow (hover):: 0 8px 32px rgba(47, 52, 55, 0.16)
Hover állapot:: Transform: translateY(-4px)
Árnyék erősödik (fenti shadow)
Transition: 0.3s ease
Layout:: Grid: 3 oszlop (desktop), 2 oszlop (tablet), 1 oszlop (mobil)
Gap (távolság kártyák között): 32px

PÉLDA – Kártya megjelenés:

Ich snacke nur schnell etwas

Leichtes Frühstück mit frischen Brötchen, Butter, Marmelade, Tee, Gemüse und Obst.

Wir sind schließlich im Urlaub

Ausgewogenes Frühstück mit Aufschnitt, Käse, Smoothie und Tee.

Form elemek (Input, Select, Textarea)

Tiszta, egyszerű input mezők, fókuszáláskor finom kiemelés.

Border:: 1px solid Border (#D1C6B5)
Border radius:: 8px
Padding:: 12px 16px
Font:: Nunito, 16px, Font-weight: 400
Háttérszín:: White (#FFFFFF)
Focus állapot:: Border: Primary (#6C7B4C)
Shadow: 0 0 0 3px rgba(108, 123, 76, 0.15)
Label:: Nunito, 15px, Font-weight: 600
Szín: Text (#2F3437)
Margin-bottom: 8px

PÉLDA – Form elemek:

Name *

E-Mail

Lieferzeit

Besondere Hinweise

Ich habe die Datenschutzbestimmungen gelesen und akzeptiere sie.

Térközök (Spacing)

Konzisztens térközrendszer a vizuális hierarchia kialakításához.

Név	Érték	Felhasználás
XS	8px (0.5rem)	Kis belső távolságok, ikonok melletti térköz
SM	16px (1rem)	Gombok közti táv, kártya padding, bekezdések közti táv
MD	32px (2rem)	Elemek közti normál távolság, szekción belüli blokkok
LG	64px (4rem)	Szekciók közti távolság
XL	96px (6rem)	Nagy szekciók közti távolság (desktop)

PÉLDA – Spacing skála vizualizálva:

XS – 8px

SM – 16px

MD – 32px

LG – 64px

XL – 96px

Árnyékok (Shadows)

Finom, lágy árnyékok – nem kemény, nem túl erős.

Név	Érték	Felhasználás
Small	0 2px 8px rgba(47, 52, 55, 0.08)	Navigáció, kis kártyák alapállapot
Medium	0 4px 16px rgba(47, 52, 55, 0.12)	Kártyák hover, gombok hover
Large	0 8px 32px rgba(47, 52, 55, 0.16)	Form konténerek, modal ablakok, nagyobb kiemelések

PÉLDA – Árnyékok összehasonlítva:

🍃

Small

🍃

Medium

🍃

Large

Lekerekítések (Border Radius)

Név	Érték	Felhasználás
Small	8px	Input mezők, kis boxok
Medium	16px	Kártyák, form konténerek
Large	24px	Nagy kártyák, csomag blokkok
Full	999px	Gombok (kapszula alak)

PÉLDA – Lekerekítések összehasonlítva:

8px

Small

16px

Medium

24px

Large

999px

Full (Pill)

2.5 Layout & Szerkezet

Navigáció

Típus: Sticky (ragadós) header – scrollozáskor is látható
Háttér: White, finom árnyékkal
Magasság: ~70-80px
Logo: Bal oldal – Playfair Display font vagy egyedi logo
Menüpontok: Jobb oldal – Home, Frühstückspakete, Kontakt
Mobilon: Hamburger menü

Oldalszélesség

Maximum szélesség (container): 1200px
Keskenyebb tartalom (szöveges részek): 800px
Padding (oldalsó): 40px (desktop), 20px (mobil)

Hero szekció

Háttér: Gradient (Light Accent → Light Background)
Szöveg elrendezés: Középre rendezett
Padding: 96px felül-alul (desktop), 60px (mobil)
CTA gombok: Egymás mellett (desktop), egymás alatt (mobil)

Szekciók

Padding: 96px felül-alul (desktop), 60px (mobil)
Háttérváltogatás: Light Background és White között váltakoznak a szekciók

Grid rendszer

Desktop (≥1024px): 3 oszlop kártyákhoz, 2 oszlop form mezőkhöz
Tablet (768-1023px): 2 oszlop
Mobil (<768px): 1 oszlop
Gap: 32px (desktop), 20px (mobil)

2.6 Responsive viselkedés

Desktop (≥1024px)

Teljes 3 oszlopos kártya elrendezés
Navigáció: teljes menü látható
Hero gombok: egymás mellett
Form: 2 oszlopos mezőelrendezés ahol lehetséges

Tablet (768-1023px)

2 oszlopos kártya elrendezés
H1-H4 méretek 10-15%-kal kisebbek
Padding értékek enyhén csökkentve

Mobil (<768px)

1 oszlopos elrendezés mindenütt
Hamburger menü a navigációban
H1: 36px, H2: 28px, H3: 24px
Gombok: full-width (100% szélesség)
Padding: XL → LG, LG → MD

📱 Mobil-first megközelítés

Javasolt, hogy a UI designer először mobilra tervezze meg az oldalt, majd onnan "felépítve" a desktopot. Ez biztosítja, hogy minden eszközön tökéletes legyen az élmény.

2.7 Animációk & Interakciók

Micro-interactions (finom animációk)

Gombok hover: Felemelkedés (translateY -2px), árnyék erősödés
Kártyák hover: Felemelkedés (translateY -4px), árnyék erősödés
Linkek: Színváltás Primary → Accent, 0.2s ease
Form mezők focus: Border színváltás, finom shadow 0.2s ease

Scroll animációk (opcionális)

Fade-in (elhalványulva belépés) kártyáknál
Slide-up (alulról felfelé csúszás) szekció címeknél
Fontos: Ne legyen túl sok vagy túl agresszív animáció – finomság!

Transition idők

Gyors: 0.2s (hover állapotok, linkek)
Normál: 0.3s (gombok, kártyák)
Lassú: 0.5s (nagyobb layout változások)
Easing: ease vagy ease-out (természetes mozgás)