diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..e5474dd509f5efd2e6945c53b8a31f13820f7ea5
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache
@@ -0,0 +1,14 @@
+<div class="flex flex-col space-y-1">
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline font-bold">Aktuálně</a>
+ </div>
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline">Tiskové výstupy</a>
+ </div>
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline">2017-2021</a>
+ </div>
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline">Resortní týmy</a>
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..851bec63d55229e3a0901c667e4bb297de6d5c20
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
@@ -0,0 +1,21 @@
+<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8">
+ <img src="https://i.picsum.photos/id/689/576/281.jpg?hmac=yIwOFV185zFy4fwVE3lF1UDqLDAm_bpLr9LZprQ26eo" alt=""
+ class="mb-7">
+ <h2 class="head-2xl mb-4">Konec mezinárodní ostudy. Evropská komise uzavřela řízení o střetu zájmů</h2>
+ <div class="flex font-bold mb-4 text-xs text-white uppercase">
+ <span class="bg-green-400 mr-1 p-2">Duben 2022</span>
+ <span class="bg-violet-400 mr-1 p-2">#ENERGETIKA</span>
+ </div>
+ <p class="mb-8">
+ Zachránili jsme 180 miliard korun pro naše občany. Ostuda, kterou Česká republika musela podstupovat, je u konce.
+ Babiš,
+ podle závěrů auditu, spoluvytvářel prostředí, ve kterém jeho firmy čerpaly dotace, čímž ohrozil čerpání 180 miliard
+ korun
+ z evropských dotací. Ministerstvo pro místní rozvoj obdrželo rozhodnutí od Evropské komise, podle kterého auditní
+ řízení
+ ke střetu zájmů, které se týkalo i bývalého premiéra Babiše, bylo uzavřeno.
+ </p>
+ <div>
+ {{> atoms-button-animated(btn-text: "Číst dále", classes-btn-hidden: "bg-black") }}
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/molecules/simple_header.mustache b/main/styleguide/source/_patterns/molecules/simple_header.mustache
index ab2e2d2b6e100b4af5acb542fae1aded9cf12dfc..373d2273b5051e02c679f10bc4cbdaf5d3591084 100644
--- a/main/styleguide/source/_patterns/molecules/simple_header.mustache
+++ b/main/styleguide/source/_patterns/molecules/simple_header.mustache
@@ -1,7 +1,11 @@
-<header class="bg-black flex items-center h-96 header-clip mb-24 pt-24 w-full">
- <div class="container--narrow flex items-center">
- <h1 class="font-alt text-7xl text-white">
- {{ title }}
- </h1>
+<header
+ class="bg-black flex items-center h-96 header-clip mb-24 pt-24 w-full"
+>
+ <div class="grid-container header-max-width pt-16">
+ <div class="col-start-2 col-end-13">
+ <h1 class="font-alt text-7xl text-white">
+ {{ title }}
+ </h1>
+ </div>
</div>
</header>
diff --git a/main/styleguide/source/_patterns/pages/how-we-works.mustache b/main/styleguide/source/_patterns/pages/how-we-works.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..bfc503b648f96c6e9d1cf83c88009b6f06245787
--- /dev/null
+++ b/main/styleguide/source/_patterns/pages/how-we-works.mustache
@@ -0,0 +1 @@
+{{> templates-how-we-works }}
diff --git a/main/styleguide/source/_patterns/templates/how-we-works.mustache b/main/styleguide/source/_patterns/templates/how-we-works.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..fbe10647f3d571c5f9bc25b4d4ff9f0a30807d2d
--- /dev/null
+++ b/main/styleguide/source/_patterns/templates/how-we-works.mustache
@@ -0,0 +1,55 @@
+{{> organisms-header }}
+
+{{> molecules-simple_header(title: "Jak piráti pracují") }}
+
+<main role="main">
+ <div class="grid-container mx-auto mb-12">
+ <div class="col-start-1 col-end-2 left-tab">
+ {{> molecules-sidebar-menu }}
+ </div>
+ <div class="col-start-2 col-end-4 leading-6">
+ <h2 class="head-xl mb-6">
+ Piráti pracují pro občany ČR na všech úrovních. V zastupitelstev obcí působí 400 zastupitelů, dalších 100 v krajích.
+ Piráti prosazují svůj program i na celostátní úrovni prostřednictvím 4 poslanců, 3 senátorů, 3 ministrů a v EU díky 3 europoslancům.
+ </h2>
+ <h2 class="head-xl">
+ Projděte si archiv tiskových zpráv a souhrn našich nejvýraznějších aktivit
+ </h2>
+ </div>
+ </div>
+
+ <div class="grid-container mx-auto mb-4">
+ <div class="col-start-1 col-end-4 flex justify-between">
+ <div class="pt-8">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ <div class="relative border border-violet-400 mx-8">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">Červenec</div>
+ </div>
+ <div class="pt-14">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ </div>
+ <div class="col-start-1 col-end-4 flex justify-between">
+ <div class="pt-8">
+ {{> molecules-work-article-preview }}
+ </div>
+ <div class="relative border border-violet-400 mx-8 pt-8">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">Srpen</div>
+ </div>
+ <div class="pt-14">
+ {{> molecules-work-article-preview }}
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="flex justify-center">
+ {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
+ </div>
+ </div>
+</main>
+{{> organisms-newsletter-section }}
+
+{{> organisms-footer }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 0088b9986a18b4fe0926c05d32525a7cfe1aa456..1e3444dc5024ecfbedafa2207b2aa91ff3c5c35f 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -25,6 +25,11 @@
max-width: 1340px !important;
}
+.container {
+ @apply: mx-auto;
+ max-width: 1150px;
+}
+
.grid-container {
@apply grid;
grid-template-columns: 240px 1fr 102px;
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 5ac9895f05b7be0f3885b445784ea4c8916241ff..77dfe0fc23c1cb42b963ccb6187112fedfb34f60 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -149,6 +149,15 @@
@apply text-4xl font-bold leading-10 uppercase mb-5;
}
+.head-2xl {
+ @apply text-2xl font-bold leading-8 uppercase
+}
+
p {
@apply leading-6;
}
+
+
+.vertical-time-line {
+ border-left: 1px solid green;
+}