302 lines
No EOL
16 KiB
HTML
302 lines
No EOL
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="de"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Startseite (Warm) - markemacht.de</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-tertiary-fixed-variant": "#7a2f15",
|
|
"surface-bright": "#fbfaf2",
|
|
"on-error-container": "#93000a",
|
|
"on-secondary-fixed-variant": "#910035",
|
|
"tertiary-container": "#390b00",
|
|
"surface-container": "#efeee6",
|
|
"primary-fixed-dim": "#c8c6c5",
|
|
"on-surface-variant": "#444748",
|
|
"tertiary": "#000000",
|
|
"tertiary-fixed-dim": "#ffb59e",
|
|
"on-tertiary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"outline": "#747878",
|
|
"on-secondary-fixed": "#400013",
|
|
"primary-container": "#1c1b1b",
|
|
"surface": "#fbfaf2",
|
|
"surface-dim": "#dbdad3",
|
|
"surface-container-low": "#f5f4ec",
|
|
"primary": "#000000",
|
|
"secondary": "#b80046",
|
|
"on-primary-fixed-variant": "#474746",
|
|
"background": "#fbfaf2",
|
|
"secondary-fixed-dim": "#ffb2bc",
|
|
"on-primary-fixed": "#1c1b1b",
|
|
"on-background": "#1b1c17",
|
|
"on-primary-container": "#858383",
|
|
"tertiary-fixed": "#ffdbd0",
|
|
"inverse-primary": "#c8c6c5",
|
|
"on-primary": "#ffffff",
|
|
"surface-variant": "#e3e3db",
|
|
"surface-container-high": "#e9e8e1",
|
|
"inverse-surface": "#30312c",
|
|
"outline-variant": "#c4c7c7",
|
|
"on-surface": "#1b1c17",
|
|
"on-error": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary-fixed": "#e5e2e1",
|
|
"secondary-container": "#e4115a",
|
|
"inverse-on-surface": "#f2f1e9",
|
|
"on-tertiary-fixed": "#390b00",
|
|
"surface-tint": "#5f5e5e",
|
|
"on-tertiary-container": "#c8694b",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-container": "#fffbff",
|
|
"surface-container-highest": "#e3e3db",
|
|
"secondary-fixed": "#ffd9dd",
|
|
"on-secondary": "#ffffff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin": "32px",
|
|
"gutter": "24px",
|
|
"sm": "16px",
|
|
"base": "4px",
|
|
"lg": "48px",
|
|
"xl": "80px",
|
|
"md": "24px",
|
|
"xs": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"body-editorial": [
|
|
"Noto Serif"
|
|
],
|
|
"accent-label": [
|
|
"Space Grotesk"
|
|
],
|
|
"h1": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"h3": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"h2": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"body-ui": [
|
|
"Plus Jakarta Sans"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"body-editorial": [
|
|
"18px",
|
|
{
|
|
"lineHeight": "1.6",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"accent-label": [
|
|
"13px",
|
|
{
|
|
"lineHeight": "1",
|
|
"letterSpacing": "0.05em",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"h1": [
|
|
"48px",
|
|
{
|
|
"lineHeight": "1.1",
|
|
"letterSpacing": "-0.02em",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"h3": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.3",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"h2": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"letterSpacing": "-0.01em",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-ui": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.5",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.text-magenta {
|
|
color: #E8175D;
|
|
}
|
|
.bg-magenta {
|
|
background-color: #E8175D;
|
|
}
|
|
.border-magenta {
|
|
border-color: #E8175D;
|
|
}
|
|
.ambient-shadow {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
|
}
|
|
.ambient-shadow-hover:hover {
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
|
|
transform: translateY(-2px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-ui antialiased">
|
|
<!-- TopNavBar -->
|
|
<header class="sticky top-0 z-50 w-full bg-[#F9F8F0] border-b border-[#E6E1D3]">
|
|
<div class="flex justify-between items-center w-full px-8 py-4 max-w-[1280px] mx-auto">
|
|
<a class="text-xl font-bold text-[#191919]" href="#">markemacht.de</a>
|
|
<nav class="hidden md:flex gap-8 items-center font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight">
|
|
<a class="text-[#E8175D] border-b-2 border-[#E8175D] pb-1" href="#">Start</a>
|
|
<a class="text-[#191919] opacity-80 hover:text-[#E8175D] transition-colors duration-200" href="#">Manifest</a>
|
|
<a class="text-[#191919] opacity-80 hover:text-[#E8175D] transition-colors duration-200" href="#">Methode</a>
|
|
<a class="text-[#191919] opacity-80 hover:text-[#E8175D] transition-colors duration-200" href="#">Denken</a>
|
|
</nav>
|
|
<a class="hidden md:inline-flex items-center justify-center px-4 py-2 bg-[#191919] text-white rounded-[8px] font-medium text-sm hover:bg-[#E8175D] transition-colors duration-200 active:scale-95" href="#">
|
|
Audit anfragen
|
|
</a>
|
|
<button class="md:hidden text-[#191919]">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="w-full max-w-[1280px] mx-auto px-8 py-xl min-h-[819px] flex flex-col justify-center relative overflow-hidden">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter relative z-10">
|
|
<div class="lg:col-span-8 flex flex-col items-start space-y-md">
|
|
<span class="font-accent-label text-accent-label text-magenta bg-magenta/10 px-3 py-1 rounded-full uppercase tracking-widest">Markenstrategie & Design</span>
|
|
<h1 class="font-h1 text-h1 text-primary max-w-4xl leading-tight">
|
|
Wachstum durch radikale <span class="text-magenta">Klarheit.</span>
|
|
</h1>
|
|
<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-2xl mt-sm">
|
|
Wir transformieren komplexe B2B-Unternehmen in unwiderstehliche Marken. Mit einem fundierten, methodischen Ansatz lösen wir nicht nur Gestaltungsprobleme, sondern strategische Wachstumsbarrieren.
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 mt-lg">
|
|
<a class="inline-flex items-center justify-center px-6 py-3 bg-primary text-on-primary rounded-[8px] font-medium text-base hover:bg-magenta transition-colors duration-300" href="#">
|
|
Methode entdecken
|
|
</a>
|
|
<a class="inline-flex items-center justify-center px-6 py-3 bg-transparent border border-primary text-primary rounded-[8px] font-medium text-base hover:bg-surface-dim transition-colors duration-300" href="#">
|
|
Manifest lesen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Soft Monolith Motif Background -->
|
|
<div class="absolute right-0 top-1/2 -translate-y-1/2 w-[600px] h-[800px] z-0 opacity-20 pointer-events-none hidden lg:block">
|
|
<img alt="Abstract soft textured geometric shape resembling a monolith in light warm tones" class="w-full h-full object-cover rounded-tl-[100px] rounded-bl-[20px]" data-alt="Abstract soft textured geometric shape resembling a monolith in light warm tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBjn2BlKGjL4PWHmR2kVypP6_eL1uWJJ7rf36Nq16ggdS9IH0trn5j07Dej4mHzbbpcfbDOV2-7-5DK_41Qjjoi9ejP4qvH-QAvuG_69zo5qA2F4IgZLiyv9oWae9BHUnseqPzu_uhtt0cE_Qwuc1i3Y3ZbnH94LmPwtSC5R4hdMjLZIAmOspmTyHuHE13lGRvDKe2E1AZMpU5V43XJJCRVTSfckGxYyydwcCzUPGoFkGYSp2P5MMLFVRXCX1Q7LkWgU_EIZLT8Ums"/>
|
|
</div>
|
|
</section>
|
|
<!-- Symptome Section (Bento Grid) -->
|
|
<section class="w-full bg-surface-container-low py-xl">
|
|
<div class="max-w-[1280px] mx-auto px-8">
|
|
<div class="mb-lg flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div>
|
|
<span class="font-accent-label text-accent-label text-on-surface-variant uppercase tracking-widest mb-2 block">Die Realität</span>
|
|
<h2 class="font-h2 text-h2 text-primary">Symptome unklarer Positionierung</h2>
|
|
</div>
|
|
<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-md">
|
|
Wenn die Strategie fehlt, zeigt sich das im operativen Alltag. Erkennen Sie Ihr Unternehmen hier wieder?
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
|
|
<!-- Card 1 -->
|
|
<div class="bg-surface-container-lowest rounded-[16px] p-[32px] ambient-shadow ambient-shadow-hover border border-[#E6E1D3] flex flex-col h-full">
|
|
<div class="w-12 h-12 rounded-full bg-magenta/10 flex items-center justify-center text-magenta mb-6">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">trending_down</span>
|
|
</div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-3">Preiskampf statt Wertschöpfung</h3>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant flex-grow">
|
|
Ihre Angebote werden primär über den Preis verglichen, weil der einzigartige Wert für den Kunden nicht sofort greifbar ist.
|
|
</p>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div class="bg-surface-container-lowest rounded-[16px] p-[32px] ambient-shadow ambient-shadow-hover border border-[#E6E1D3] flex flex-col h-full">
|
|
<div class="w-12 h-12 rounded-full bg-magenta/10 flex items-center justify-center text-magenta mb-6">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">diversity_3</span>
|
|
</div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-3">Fachkräftemangel</h3>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant flex-grow">
|
|
Es fällt schwer, Top-Talente zu gewinnen und zu binden, da eine klare und attraktive Arbeitgebermarke (Employer Brand) fehlt.
|
|
</p>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div class="bg-surface-container-lowest rounded-[16px] p-[32px] ambient-shadow ambient-shadow-hover border border-[#E6E1D3] flex flex-col h-full">
|
|
<div class="w-12 h-12 rounded-full bg-magenta/10 flex items-center justify-center text-magenta mb-6">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">campaign</span>
|
|
</div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-3">Ineffizientes Marketing</h3>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant flex-grow">
|
|
Marketingbudgets verpuffen, da die Botschaften inkonsistent sind und die Zielgruppe nicht emotional oder rational abholen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- CTA Section -->
|
|
<section class="w-full max-w-[1280px] mx-auto px-8 py-xl">
|
|
<div class="bg-primary rounded-[24px] p-8 md:p-16 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-12">
|
|
<div class="absolute inset-0 z-0 opacity-10 mix-blend-overlay">
|
|
<img alt="Dark textured abstract background with subtle organic grain" class="w-full h-full object-cover" data-alt="Dark textured abstract background with subtle organic grain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7PcaHMLfRo-_lbUSZYL2vnUpQ_-pxEKqckLQlmg-lYO5vxnifdAeLZV8VMMQVJG9WpOKjy7NcBTXVzKQJMLK3jAVdtGglMif8f2xf709ys_Rv15okFwhUeRMEZGblG4fFYCgaoPpdum-cKCjmDyEn7q-GQVRVuKD1ca_BCXl01OJD2eCk4_gS31ArZqRnogt_5Vh5iRTmCGX5H495shDumo2K7-WGk_qkYQo6V0PqtBoUyhgbr7GlUaP-o4Og-FmygreLEml_LGA"/>
|
|
</div>
|
|
<div class="relative z-10 max-w-2xl text-on-primary">
|
|
<h2 class="font-h2 text-h2 mb-4">Bereit für den Wandel?</h2>
|
|
<p class="font-body-editorial text-body-editorial opacity-80 mb-8">
|
|
Lassen Sie uns in einem unverbindlichen Gespräch herausfinden, wie wir Ihre Marke stärken können.
|
|
</p>
|
|
<a class="inline-flex items-center justify-center px-6 py-3 bg-magenta text-white rounded-[8px] font-medium text-base hover:bg-white hover:text-primary transition-colors duration-300" href="#">
|
|
Audit anfragen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full bg-[#F9F8F0] border-t border-[#E6E1D3]">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full px-8 py-12 max-w-[1280px] mx-auto">
|
|
<div class="flex flex-col gap-4">
|
|
<span class="text-lg font-black text-[#191919]">markemacht.de</span>
|
|
<p class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500">© 2024 markemacht.de. Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
<div class="flex flex-wrap md:justify-end gap-6 items-center">
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Impressum</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Datenschutz</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Kontakt</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |