Startseite

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MiniWorld – Hero Section</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--cream: #FDF8F2;
--warm-white: #FFFCF7;
--blush: #F5C8B0;
--blush-deep: #E8A882;
--sage: #B8CEBD;
--sage-deep: #7FA891;
--butter: #F7E8C4;
--butter-deep: #E8CC88;
--text-dark: #2C2420;
--text-mid: #6B5C54;
--text-light: #A08C82;
--accent: #D4735A;
}

body {
font-family: 'DM Sans', sans-serif;
background: var(--cream);
min-height: 100vh;
overflow-x: hidden;
}

/* NAV */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 20px 48px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(253,248,242,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(44,36,32,0.06);
}

.logo {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 700;
color: var(--text-dark);
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 8px;
}

.logo-dot {
width: 8px; height: 8px;
background: var(--accent);
border-radius: 50%;
display: inline-block;
}

.nav-links {
display: flex;
gap: 32px;
list-style: none;
}

.nav-links a {
font-size: 14px;
font-weight: 400;
color: var(--text-mid);
text-decoration: none;
letter-spacing: 0.02em;
transition: color 0.2s;
}

.nav-links a:hover { color: var(--text-dark); }

.nav-cta {
background: var(--text-dark);
color: var(--cream) !important;
padding: 10px 22px;
border-radius: 100px;
font-size: 13px !important;
font-weight: 500 !important;
transition: background 0.2s, transform 0.15s !important;
}

.nav-cta:hover {
background: var(--accent) !important;
color: white !important;
transform: translateY(-1px);
}

/* HERO */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding-top: 80px;
position: relative;
overflow: hidden;
}

/* Background blobs */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
pointer-events: none;
}

.blob-1 {
width: 500px; height: 500px;
background: var(--blush);
top: -100px; right: -80px;
animation: float1 8s ease-in-out infinite;
}

.blob-2 {
width: 350px; height: 350px;
background: var(--sage);
bottom: 0; left: -60px;
animation: float2 10s ease-in-out infinite;
}

.blob-3 {
width: 250px; height: 250px;
background: var(--butter);
top: 40%; left: 35%;
animation: float3 7s ease-in-out infinite;
}

@keyframes float1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 30px) scale(1.05); }
}
@keyframes float2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -25px) scale(1.03); }
}
@keyframes float3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-15px, 20px) scale(0.97); }
}

/* LEFT CONTENT */
.hero-left {
padding: 60px 48px 60px 72px;
position: relative;
z-index: 2;
animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--butter);
border: 1px solid var(--butter-deep);
color: #8B6914;
font-size: 12px;
font-weight: 500;
padding: 6px 14px;
border-radius: 100px;
margin-bottom: 28px;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.badge-dot {
width: 6px; height: 6px;
background: var(--butter-deep);
border-radius: 50%;
}

h1 {
font-family: 'Fraunces', serif;
font-size: clamp(42px, 5.5vw, 72px);
font-weight: 700;
color: var(--text-dark);
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 24px;
}

h1 em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}

.hero-desc {
font-size: 17px;
font-weight: 300;
color: var(--text-mid);
line-height: 1.7;
max-width: 420px;
margin-bottom: 40px;
}

.cta-group {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}

.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--text-dark);
color: var(--cream);
padding: 16px 32px;
border-radius: 100px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
letter-spacing: -0.01em;
transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
box-shadow: 0 4px 20px rgba(44,36,32,0.18);
}

.btn-primary:hover {
background: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(212,115,90,0.3);
}

.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-mid);
font-size: 15px;
font-weight: 400;
text-decoration: none;
transition: color 0.2s;
}

.btn-secondary:hover { color: var(--text-dark); }

.play-icon {
width: 42px; height: 42px;
border-radius: 50%;
background: white;
border: 1px solid rgba(44,36,32,0.1);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(44,36,32,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}

.btn-secondary:hover .play-icon {
transform: scale(1.08);
box-shadow: 0 4px 16px rgba(44,36,32,0.12);
}

/* STATS */
.stats {
display: flex;
gap: 32px;
margin-top: 52px;
padding-top: 40px;
border-top: 1px solid rgba(44,36,32,0.08);
}

.stat-item {}

.stat-number {
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
letter-spacing: -1px;
line-height: 1;
}

.stat-label {
font-size: 13px;
color: var(--text-light);
margin-top: 4px;
letter-spacing: 0.01em;
}

/* RIGHT VISUAL */
.hero-right {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}

.visual-frame {
position: relative;
width: 400px;
height: 520px;
animation: fadeUp 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Main illustration card */
.main-card {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(145deg, var(--warm-white) 0%, var(--blush) 100%);
border-radius: 32px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.8);
box-shadow: 0 32px 80px rgba(44,36,32,0.14), 0 8px 24px rgba(44,36,32,0.06);
}

.illustration {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 120px;
position: relative;
overflow: hidden;
}

/* SVG illustration inside main card */
.baby-scene {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}

/* Floating product cards */
.float-card {
position: absolute;
background: white;
border-radius: 18px;
padding: 12px 16px;
box-shadow: 0 12px 40px rgba(44,36,32,0.12);
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255,255,255,0.9);
white-space: nowrap;
z-index: 10;
}

.fc-top {
top: -18px;
right: -30px;
animation: floatCard1 4s ease-in-out infinite;
}

.fc-bottom {
bottom: 30px;
left: -40px;
animation: floatCard2 5s ease-in-out infinite 0.5s;
}

.fc-mid {
top: 50%;
right: -44px;
transform: translateY(-50%);
animation: floatCard3 4.5s ease-in-out infinite 1s;
}

@keyframes floatCard1 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
@keyframes floatCard2 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
@keyframes floatCard3 {
0%, 100% { transform: translateY(-50%) translateX(0px); }
50% { transform: translateY(-50%) translateX(-5px); }
}

.fc-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}

.fc-icon.green { background: #E8F5EE; }
.fc-icon.peach { background: #FDEEE8; }
.fc-icon.yellow { background: #FEF5E4; }

.fc-text .fc-title {
font-size: 12px;
font-weight: 500;
color: var(--text-dark);
line-height: 1.2;
}

.fc-text .fc-sub {
font-size: 11px;
color: var(--text-light);
margin-top: 1px;
}

/* Trust badge */
.trust-badge {
position: absolute;
bottom: -20px;
right: 10px;
background: var(--text-dark);
color: var(--cream);
border-radius: 100px;
padding: 10px 18px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: 0 8px 24px rgba(44,36,32,0.2);
animation: floatCard1 5s ease-in-out infinite 0.8s;
z-index: 11;
}

.trust-stars {
color: #F7C948;
font-size: 11px;
letter-spacing: 1px;
}

@keyframes fadeUp {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}

/* Decorative ring */
.deco-ring {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(44,36,32,0.1);
pointer-events: none;
}

.ring-1 {
width: 560px; height: 560px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: spinSlow 40s linear infinite;
}

.ring-2 {
width: 460px; height: 460px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-color: rgba(44,36,32,0.04);
animation: spinSlow 30s linear infinite reverse;
}

@keyframes spinSlow {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Category pills */
.category-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 28px;
}

.cat-pill {
background: white;
border: 1px solid rgba(44,36,32,0.1);
color: var(--text-mid);
font-size: 13px;
font-weight: 400;
padding: 8px 16px;
border-radius: 100px;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}

.cat-pill:hover,
.cat-pill.active {
background: var(--text-dark);
color: var(--cream);
border-color: var(--text-dark);
}

.cat-pill span { font-size: 14px; }
</style>
</head>
<body>

<nav>
<div class="logo">
<span class="logo-dot"></span>
MiniWorld
</div>
<ul class="nav-links">
<li><a href="#">Füttern</a></li>
<li><a href="#">Schlafen</a></li>
<li><a href="#">Bad & Pflege</a></li>
<li><a href="#">Geschenke</a></li>
<li><a href="#" class="nav-cta">Shop entdecken</a></li>
</ul>
</nav>

<section class="hero">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>

<div class="hero-left">
<div class="badge">
<span class="badge-dot"></span>
Alles für kleine Entdecker
</div>

<h1>
Die <em>schönsten</em><br>
Produkte für<br>
dein Baby
</h1>

<p class="hero-desc">
Kuratierte Babyprodukte, die den Alltag leichter machen — von Füttern bis Schlafen. Alles sorgfältig ausgewählt, sicher & liebevoll gestaltet.
</p>

<div class="cta-group">
<a href="#" class="btn-primary">
Jetzt entdecken
<svg width="16" height="16" fill="none" viewBox="0 0 16 16">
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="#" class="btn-secondary">
<span class="play-icon">
<svg width="14" height="14" fill="none" viewBox="0 0 14 14">
<path d="M4.5 3l7 4-7 4V3z" fill="var(--text-dark)"/>
</svg>
</span>
Mehr erfahren
</a>
</div>

<div class="category-row">
<a href="#" class="cat-pill active"><span>🍼</span> Füttern</a>
<a href="#" class="cat-pill"><span>😴</span> Schlafen</a>
<a href="#" class="cat-pill"><span>🛁</span> Bad</a>
<a href="#" class="cat-pill"><span>🚗</span> Unterwegs</a>
<a href="#" class="cat-pill"><span>🎁</span> Geschenke</a>
</div>

<div class="stats">
<div class="stat-item">
<div class="stat-number">200+</div>
<div class="stat-label">Produkte</div>
</div>
<div class="stat-item">
<div class="stat-number">4.9★</div>
<div class="stat-label">Kundenbewertung</div>
</div>
<div class="stat-item">
<div class="stat-number">48h</div>
<div class="stat-label">Lieferzeit</div>
</div>
</div>
</div>

<ellipse cx="180" cy="390" rx="120" ry="18" fill="#F7E0D0" opacity="0.6"/>

<ellipse cx="180" cy="340" rx="58" ry="46" fill="#FDDFC8"/>

<ellipse cx="180" cy="355" rx="54" ry="38" fill="#B8CEBD"/>
<rect x="130" y="330" width="100" height="38" rx="4" fill="#B8CEBD"/>

<ellipse cx="180" cy="320" rx="32" ry="12" fill="#D4EAD8"/>
<line x1="180" y1="340" x2="180" y2="390" stroke="#A0C4A8" stroke-width="1.5" stroke-dasharray="4 3"/>

<ellipse cx="128" cy="350" rx="20" ry="11" fill="#FDDFC8" transform="rotate(-20 128 350)"/>
<ellipse cx="232" cy="348" rx="20" ry="11" fill="#FDDFC8" transform="rotate(20 232 348)"/>

<circle cx="112" cy="358" r="12" fill="#FDDFC8"/>
<circle cx="248" cy="356" r="12" fill="#FDDFC8"/>

<ellipse cx="158" cy="386" rx="22" ry="14" fill="#B8CEBD" transform="rotate(10 158 386)"/>
<ellipse cx="202" cy="386" rx="22" ry="14" fill="#B8CEBD" transform="rotate(-10 202 386)"/>

<ellipse cx="145" cy="396" rx="18" ry="11" fill="#FDDFC8" transform="rotate(15 145 396)"/>
<ellipse cx="215" cy="396" rx="18" ry="11" fill="#FDDFC8" transform="rotate(-15 215 396)"/>

<ellipse cx="143" cy="398" rx="14" ry="8" fill="#F5C8B0" transform="rotate(15 143 398)"/>
<ellipse cx="217" cy="398" rx="14" ry="8" fill="#F5C8B0" transform="rotate(-15 217 398)"/>

<circle cx="180" cy="270" r="66" fill="#FDDFC8"/>

<path d="M118 248 Q130 210 180 204 Q230 210 242 248" fill="#5C3D2E" opacity="0.7"/>
<ellipse cx="180" cy="208" rx="46" ry="16" fill="#5C3D2E" opacity="0.7"/>

<ellipse cx="147" cy="285" rx="14" ry="9" fill="#F5A88A" opacity="0.35"/>
<ellipse cx="213" cy="285" rx="14" ry="9" fill="#F5A88A" opacity="0.35"/>

<circle cx="160" cy="272" r="9" fill="white"/>
<circle cx="200" cy="272" r="9" fill="white"/>
<circle cx="162" cy="273" r="5.5" fill="#3C2415"/>
<circle cx="202" cy="273" r="5.5" fill="#3C2415"/>
<circle cx="164" cy="271" r="2" fill="white"/>
<circle cx="204" cy="271" r="2" fill="white"/>

<path d="M165 293 Q180 308 195 293" stroke="#C4826A" stroke-width="2.5" stroke-linecap="round" fill="none"/>

<ellipse cx="180" cy="285" rx="4" ry="3" fill="#E8A882" opacity="0.5"/>

<circle cx="115" cy="272" r="14" fill="#FDDFC8"/>
<circle cx="115" cy="272" r="8" fill="#F5C8B0"/>
<circle cx="245" cy="272" r="14" fill="#FDDFC8"/>
<circle cx="245" cy="272" r="8" fill="#F5C8B0"/>

<rect x="238" y="330" width="8" height="28" rx="4" fill="#D4735A"/>
<circle cx="242" cy="322" r="16" fill="#F5C8B0" stroke="#E8A882" stroke-width="1.5"/>
<circle cx="237" cy="318" r="3" fill="#D4735A"/>
<circle cx="247" cy="316" r="2.5" fill="#B8CEBD"/>
<circle cx="242" cy="313" r="2" fill="#F7C948"/>

<path d="M76 130 L80 142 L92 142 L83 149 L86 161 L76 154 L66 161 L69 149 L60 142 L72 142 Z" fill="#F7C948" opacity="0.5"/>
<path d="M284 100 L287 110 L297 110 L289 116 L292 126 L284 120 L276 126 L279 116 L271 110 L281 110 Z" fill="#B8CEBD" opacity="0.6"/>
<circle cx="92" cy="200" r="6" fill="#F5C8B0" opacity="0.5"/>
<circle cx="268" cy="300" r="5" fill="#B8CEBD" opacity="0.5"/>
<circle cx="70" cy="360" r="4" fill="#F7C948" opacity="0.4"/>

<path d="M290 200 Q290 196 294 196 Q298 196 298 200 Q298 204 290 208 Q282 204 282 200 Q282 196 286 196 Q290 196 290 200Z" fill="#F5C8B0" opacity="0.5"/>

<rect x="170" y="308" width="20" height="5" rx="2.5" fill="#D4735A" opacity="0.3"/>
<circle cx="180" cy="313" r="6" fill="none" stroke="#D4735A" stroke-width="1.5" opacity="0.4"/>
</svg>
</div>
</div>
</div>

<div class="float-card fc-top">
<div class="fc-icon green">🍼</div>
<div class="fc-text">
<div class="fc-title">Silikon-Fütterungsset</div>
<div class="fc-sub">BPA-frei & sicher</div>
</div>
</div>

<div class="float-card fc-mid">
<div class="fc-icon yellow">⭐</div>
<div class="fc-text">
<div class="fc-title">Neu eingetroffen</div>
<div class="fc-sub">12 neue Produkte</div>
</div>
</div>

<div class="float-card fc-bottom">
<div class="fc-icon peach">🛁</div>
<div class="fc-text">
<div class="fc-title">Bad & Pflege</div>
<div class="fc-sub">Sanft & natürlich</div>
</div>
</div>

<div class="trust-badge">
<span class="trust-stars">★★★★★</span>
Über 1.000 zufriedene Eltern
</div>
</div>
</div>
</section>

Dein Warenkorb ist leer

Dein Warenkorb

Geschätzte Gesamtkosten

Startseite