initialisation du site

This commit is contained in:
Simon 2024-02-02 12:39:18 +01:00
commit fc5c2f4972
73 changed files with 1305 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.hugo_build.lock
resources

17
README.md Normal file
View File

@ -0,0 +1,17 @@
# Source du site web Takubeh
Le site web de Takubeh a été créé de façon éco-responsable par l'association RésiLien pour présenter la coopérative Takubeh.
Il utilise un générateur de site statique ([Hugo](https://gohugo.io/)) permettant un faible impact énergétique.
## Mettre à jour le site
Pour la mise à jour vous, devez vous connecter sur la forge logiciel de RésiLien. Puis éditer les fichiers en ligne.
## Les environnements
Actuellement il y a 3 environnements :
- développement, permettant d'afficher le site web localement et d'avancer dans le développement
- [staging](https://staging.takubeh.fr), permettant d'afficher l'avancement du développement
- [production](https://takubeh.fr) qui est le site officiel

Binary file not shown.

Binary file not shown.

2
assets/styles/main.scss Normal file
View File

@ -0,0 +1,2 @@
@import "reset.scss";
@import "style.scss";

274
assets/styles/reset.scss Normal file
View File

@ -0,0 +1,274 @@
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
html {
/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
font-family:
system-ui,
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
line-height: 1.15; /* 1. Correct the line height in all browsers. */
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
tab-size: 4; /* 3 */
}
/*
Sections
========
*/
body {
margin: 0; /* Remove the margin in all browsers. */
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}

353
assets/styles/style.scss Normal file
View File

@ -0,0 +1,353 @@
/* RESET */
:root {
line-height: 1.25;
font-size: 17px;
}
h1, h2, h3, h4, h5, figure, p, ol, ul {
margin: 0;
}
/* ol, ul {
list-style: none;
padding-inline: 0;
} */
img {
display: block;
max-inline-size: 100%;
}
/* COLOR */
body {
--color-white: white;
--color-green1: #739761;
--color-green2: #3a7f44;
--color-green3: #336f5f;
--color-green4: #3f6463;
--color-green5: #92c83e;
--color-red1: #d43e45;
--color-red2: #69282f;
--color-red3: #f36561;
--color-yellow1: #d39734;
--color-yellow2: #fac247;
--color-yellow3: #dac161;
--color-orange1: #d88250;
--color-orange2: #bb5c46;
--color-blue1: #3ea1da;
--color-blue2: #154f8e;
--color-blue3: #002830;
--color-black: black;
--gutter: 4rem;
--header-height: 90vh;
--bottle-width: 100px;
--bottle-height: 300px;
}
.-white { --color: var(--color-black); --bg-color: var(--color-white) }
.-green1 { --color: var(--color-white); --bg-color: var(--color-green1) }
.-green2 { --color: var(--color-white); --bg-color: var(--color-green2) }
.-green3 { --color: var(--color-white); --bg-color: var(--color-green3) }
.-green4 { --color: var(--color-white); --bg-color: var(--color-green4) }
.-green5 { --color: var(--color-white); --bg-color: var(--color-green5) }
.-red1 { --color: var(--color-white); --bg-color: var(--color-red1) }
.-red2 { --color: var(--color-white); --bg-color: var(--color-red2) }
.-red3 { --color: var(--color-white); --bg-color: var(--color-red3) }
.-yellow1 { --color: var(--color-white); --bg-color: var(--color-yellow1) }
.-yellow2 { --color: var(--color-white); --bg-color: var(--color-yellow2) }
.-yellow3 { --color: var(--color-white); --bg-color: var(--color-yellow3) }
.-orange1 { --color: var(--color-white); --bg-color: var(--color-orange1) }
.-orange2 { --color: var(--color-white); --bg-color: var(--color-orange2) }
.-blue1 { --color: var(--color-white); --bg-color: var(--color-blue1) }
.-blue2 { --color: var(--color-white); --bg-color: var(--color-blue2) }
.-blue3 { --color: var(--color-white); --bg-color: var(--color-blue3) }
.-black { --color: var(--color-white); --bg-color: var(--color-black) }
.color {
background-color: var(--bg-color);
color: var(--color);
}
/* FONTS */
@font-face {
font-family: 'Tox Typewriter';
src: url('../fonts/ToxTypewriter.woff2') format('woff2'),
url('../fonts/ToxTypewriter.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* DESIGN */
.header {
height: var(--header-height);
/* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
background-image: url(../images/fond.webp);
background-repeat: none;
background-size: cover;
background-position: center;
text-align: center;
}
.header h1 {
padding: calc(var(--h1-size) / 4);
background-color: var(--color-red3);
color: var(--color-white);
line-height: .5;
text-align: right;
}
.header h1 small {
color: var(--color-yellow2);
font-size: calc(var(--h1-size) / 2);
}
.container, header, footer {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
align-items: stretch;
}
.-c2 > div {
width: 50%;
}
.-c2 > div.picture {
width: 45%;
}
.-c2 > div.content {
width: 55%;
}
.content {
padding: var(--gutter);
width: 100%;
}
.boxes {
display: flex;
justify-content: center;
gap: var(--gutter);
}
.tag {
text-align: center;
margin: 0 auto 2rem;
width: fit-content;
}
.tag h3 {
padding: 0.5rem 1.5rem;
width: fit-content;
margin: 0 auto;
}
.picture {
position: relative;
padding: 3rem;
color: var(--color-white);
}
.picture img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.footer, .footer .content {
min-height: inherit;
width: inherit;
}
.footer p {
padding: 0;
}
.footer a {
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
}
.gamme h2 { text-align: center }
.gamme .boxes { flex-wrap: wrap; gap: calc(var(--gutter) * 2) var(--gutter); max-width: 1400px; margin: 0 auto; }
.gamme .box {
width: calc(33% - var(--gutter) + 1rem);
display: flex;
align-items: center;
max-width: 500px;
}
.gamme img {
width: var(--bottle-width);
height: var(--bottle-height);
display: inline-block;
}
.gamme .detail {
--detail-gutter: 1rem;
width: calc(100% - (var(--bottle-width) + var(--detail-gutter)));
display: inline-block;
margin-left: var(--detail-gutter);
}
.gamme .title {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.gamme .title h3, .gamme .title h4, .gamme .detail p { display: inline; margin: 0; margin: 0 }
.gamme h3 {
padding: .1rem .5rem;
font-size: 1.2rem;
}
.gamme h4 {
font-size: .8rem;
}
.ombre {
text-shadow: 2px 2px 4px #444,-2px -2px 4px #444,-2px 2px 4px #444,2px -2px 4px #444;
}
/* GENERAL */
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
--h1-size: 8rem;
--h2-size: 4rem;
--h3-size: 2rem;
--h4-size: 1.5rem;
--h5-size: 1.1rem;
}
a { color: var(--color-white); }
h1, h2, h3, h4, h5, .scribe, blockquote {
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
}
h1 { font-size: var(--h1-size) }
h2 { font-size: var(--h2-size); padding-bottom: 3rem; }
h3 { font-size: var(--h3-size) }
h4 { font-size: var(--h4-size) }
h5 { font-size: var(--h5-size) }
p, ul { padding-bottom: 1.5rem; }
strong {
font-weight: bold;
}
blockquote {
text-align: right;
font-size: 1.2rem;
border-right: 3px solid white;
padding-right: 1rem;
margin: 1rem 1rem 1rem 0;
}
.center { text-align: center }
.flower { list-style: none; padding: 0 }
.flower li {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.5,12A3.5,3.5 0 0,0 22,8.5A6.5,6.5 0 0,0 15.5,2A3.5,3.5 0 0,0 12,5.5A3.5,3.5 0 0,0 8.5,2A6.5,6.5 0 0,0 2,8.5A3.5,3.5 0 0,0 5.5,12A3.5,3.5 0 0,0 2,15.5A6.5,6.5 0 0,0 8.5,22A3.5,3.5 0 0,0 12,18.5A3.5,3.5 0 0,0 15.5,22A6.5,6.5 0 0,0 22,15.5A3.5,3.5 0 0,0 18.5,12M12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16M14.5,12A2.5,2.5 0 0,1 12,14.5A2.5,2.5 0 0,1 9.5,12A2.5,2.5 0 0,1 12,9.5A2.5,2.5 0 0,1 14.5,12Z'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E") no-repeat left top;
background-size: 1rem;
padding: 0 0 .5rem 1.5rem;
}
/* MOBILE
Les media query permettent d'adapter le design selon la largeur des appareils :
320px480px: Mobile devices
481px768px: iPads, Tablets
769px1024px: Small screens, laptops
1025px1200px: Desktops, large screens
1201px and more Extra large screens, TV
*/
@media screen and (max-width: 1200px) {
body {
/* background-color: yellow; */
--h1-size: 7rem;
--h2-size: 3.5rem;
--h3-size: 1.75rem;
--h4-size: 1.5rem;
--h5-size: 1.1rem;
--gutter: 3rem;
}
}
@media screen and (max-width: 1024px) {
body {
/* background-color: green; */
--h1-size: 6rem;
--h2-size: 3rem;
--h3-size: 1.5rem;
--h4-size: .75rem;
--h5-size: .5rem;
--gutter: 2rem;
}
.gamme .box {
width: calc(50% - var(--gutter) / 2);
}
}
@media screen and (max-width: 768px) {
body {
/* background-color: red; */
--h1-size: 5rem;
--h2-size: 2.5rem;
--h3-size: 1.75rem;
--h4-size: 1.5rem;
--h5-size: 1.1rem;
--gutter: 1.5rem;
--bottle-width: 75px;
--bottle-height: 225px;
}
.gamme .box {
width: 100%;
}
.container { flex-wrap: wrap ;}
.container .picture { min-height: 80vh; }
.container .picture { order: 2 }
.container .content { order: 1 }
.-c2 > div, .-c2 > div.picture, .-c2 > div.content {
width: 100%;
}
}
@media screen and (max-width: 480px) {
body {
/* background-color: blue; */
--h1-size: 4rem;
--h2-size: 2rem;
--h3-size: 1rem;
--h4-size: .75rem;
--h5-size: .5rem;
--header-height: 50vh;
--gutter: 1rem;
--bottle-width: 50px;
--bottle-height: 150px;
}
h2 { text-align: center }
.boxes { flex-wrap: wrap }
}

View File

@ -0,0 +1,29 @@
languageCode: fr-fr
defaultContentLanguage: fr
title: Takubeh
disableKinds:
- taxonomy
- term
params:
description: Site officiel de la commune de Crémeaux qui fait partie de la communauté de communes du Pays d'Urfé (CCPU) dans la Loire (42)
Keywords: Crémeaux, commune, Pays d'Urfé, CCPU, Loire, Site officiel, 42
markup:
goldmark:
renderer:
unsafe: true
parser:
attribute:
block: true
title: true
tableOfContents:
endLevel: 3
ordered: false
startLevel: 2
disableHugoGeneratorInject: true
enableRobotsTXT: true

View File

@ -0,0 +1 @@
baseURL: http://localhost:1313/

View File

@ -0,0 +1,7 @@
baseURL: https://takubeh.fr/
deployment:
targets:
- name: production
URL: >-
s3://takubeh.fr?endpoint=https://s3.garage.resilien.cloud&disableSSL=true&s3ForcePathStyle=true&region=garage

View File

@ -0,0 +1,7 @@
baseURL: https://staging.takubeh.fr/
deployment:
targets:
- name: staging
URL: >-
s3://staging.takubeh.fr?endpoint=https://s3.garage.resilien.cloud&disableSSL=true&s3ForcePathStyle=true&region=garage

8
content/_index.html Normal file
View File

@ -0,0 +1,8 @@
---
type: 'single'
---
{{< takubeh_kombucha >}}
{{< gamme >}}
{{< kombucha_en_fut >}}
{{< instagram >}}

8
content/a-propos.html Normal file
View File

@ -0,0 +1,8 @@
---
title: À propos
description: [A COMPLETER PAR TAKUBEH]
---
{{< fondateurs >}}
{{< histoire >}}
{{< identite >}}

8
content/engagements.html Normal file
View File

@ -0,0 +1,8 @@
---
title: Engagements
description: [A COMPLETER PAR TAKUBEH]
---
{{< philosophie >}}
{{< engagement >}}
{{< consigne >}}

View File

@ -0,0 +1,32 @@
---
title: RésiLien, Mentions légales
description: Les mentions légales de RésiLien
layout: simple
---
# Mentions légales
## Édition du site web
Édité par Weko
### Weko
Simon Constans - Weko
Entrepreneur titulaire dun contrat CAPE au sein de la Coopérative dActivités et dEmploi CAP Services.
Siège social : 11 rue Duphot 69003 Lyon
Site Web : weko.io
SIRET : 402 636 757 00039
Code APE : 8299Z
TVA Intracommunautaire : FR32 402 636 757
## Hébergement
Services et données actives hébergés sur micro-ordinateurs dans les locaux de Weko à Crémeaux (42).
Siège social : 11 rue Duphot 69003 Lyon
Service de VPN et de surveillance des services à usage interne pour l'infrastructure décentralisée de RésiLien hébergé par [Hetzner](https://hetzner.com/)
Siège social : Hetzner Online GmbH, Industriestr. 25, 91710 Gunzenhausen, Allemagne
Sauvegardes des données chiffrées par mot de passe hébergées par [Scaleway](https://www.scaleway.fr).
Siège social : Scaleway, 8 rue de la Ville lEvêque, 75008 Paris, France

View File

@ -0,0 +1,7 @@
---
title: Où nous trouver ?
description: [A COMPLETER PAR TAKUBEH]
---
{{< reseau >}}
{{< points_de_vente >}}

View File

@ -0,0 +1,11 @@
{{/*
S'il n'y a pas de / dans l'url d'une image alors on ajoute le path de l'article
*/}}
{{ $path := cond (in .Destination "/") .Destination (path.Join "/" .Page.File.Dir .Destination) }}
{{ $image := .Page.Resources.GetMatch (printf "*%s*" .Destination) }}
{{ with $image }}
{{ $width := cond (gt .Width 960) 960 .Width }}
{{ $resized := $image.Resize (printf "%sx q100 webp" (string $width)) }}
{{ $path = $resized.RelPermalink }}
{{ end }}
<img src="{{ $path | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} loading="lazy" />

View File

@ -0,0 +1,35 @@
{{/*
S'il n'y a pas de / dans l'url d'un lien alors on ajoute le path du répertoire
*/}}
{{ $isExternalLink := strings.HasPrefix .Destination "http" }}
{{ $isWebLink := or $isExternalLink (eq 0 (.Destination | strings.Count ":")) }}
{{ $isTelLink := strings.HasPrefix .Destination "tel:" }}
{{ $isMailtoLink := strings.HasPrefix .Destination "mailto:" }}
{{ $hasSlash := in .Destination "/" }}
{{- if $isWebLink -}}
{{ $link := cond (and $isWebLink (and (not $hasSlash) (not $isExternalLink))) (path.Join "/" .Page.File.Dir .Destination) .Destination }}
<a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isExternalLink }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
{{- else -}}
{{- $separators := cond $isMailtoLink ":@." ":" -}}
{{- $regex := cond $isMailtoLink "[a-z]*:(.*)" "[a-z]*:([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})"}}
{{- $replace := cond $isMailtoLink "$1" "$1 $2 $3 $4 $5" -}}
{{- $string := .Destination -}}
{{- $params := slice -}}
{{- range split $separators "" }}
{{ $parts := split $string . }}
{{ $params = $params | append (index $parts 0) }}
{{ $string = index $parts 1 }}
{{ end }}
{{- $params = $params | append (string $string) -}}
<span
class="obfuscate{{ if $isMailtoLink }} at{{ end }}"
data-separators="{{ $separators }}"
{{ range $param_index, $param_value := $params }}
data-param{{add $param_index 1}}="{{ range $index := seq (sub (len $param_value) 1) 0}}{{ substr $param_value $index 1}}{{ end }}"
{{ end }}
data-regex="{{ $regex }}"
data-replace="{{ $replace }}"
>
</span>
{{- end -}}

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Takubeh - Kombucha</title>
<link rel="canonical" href="{{ .Permalink }}" />
{{ with .OutputFormats.Get "RSS" }}<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" />{{ end }}
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
{{ if ne hugo.Environment "production" }}<meta name="robots" content="noindex">{{ end }}
{{ partial "styles.html" . }}
</head>
<body>
{{ partial "en_tete.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "pied_de_page.html" . }}
{{ partial "javascripts.html" . }}
</body>
</html>

View File

@ -0,0 +1,3 @@
{{ define "main" }}
{{ .Content }}
{{ end }}

View File

@ -0,0 +1,15 @@
{{ define "main" }}
<div class="container">
<h1>{{ .RenderString .Title }}</h1>
<div class="container md">
{{ .Content }}
<ul>
{{ block "list" . }}
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .RenderString .Title }}</a></li>
{{ end }}
{{ end }}
</ul>
</div>
</div>
{{ end }}

View File

@ -0,0 +1,3 @@
{{ define "main" }}
{{ .Content }}
{{ end }}

5
layouts/page/simple.html Normal file
View File

@ -0,0 +1,5 @@
{{ define "main" }}
<div style="max-width: 800px; margin: 0 auto">
{{ .Content }}
</div>
{{ end }}

View File

@ -0,0 +1,3 @@
<header class="header">
<h1>Takubeh<br><small>Kombucha</small></h1>
</header>

View File

@ -0,0 +1,9 @@
{{ $js := resources.Get "js/main.js" }}
{{ with $js }}
{{ $secureJS := . | js.Build }}
{{ if not $.Site.Params.debug }}
{{ $secureJS = $secureJS | minify }}
{{ end }}
{{ $secureJS = $secureJS | fingerprint }}
<script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{ end }}

View File

@ -0,0 +1,10 @@
<footer class="footer color -red3">
<div class="content">
<p>
E-mail : <a href="mailto:murielle@takubeh.fr">murielle@takubeh.fr</a><br>
Site web : <a href="https://takubeh.fr/">takubeh.fr</a><br>
Instagram : <a href="https://www.instagram.com/takubehkombucha/">www.instagram.com/takubehkombucha/</a><br>
Facebook : <a href="https://www.facebook.com/profile.php?id=100076292530719">Takubeh Kombucha</a><br>
</p>
</div>
</footer>

View File

@ -0,0 +1,9 @@
{{ $style := resources.Get "styles/main.scss" }}
{{ with $style }}
{{ $styleCSS := . | toCSS }}
{{ if not $.Site.Params.debug }}
{{ $styleCSS = $styleCSS | minify }}
{{ end }}
{{ $styleCSS = $styleCSS | fingerprint }}
<link rel="stylesheet" href="{{ $styleCSS.Permalink }}" integrity="{{ $styleCSS.Data.Integrity }}">
{{ end }}

View File

@ -0,0 +1 @@
<p>La partie « Consigne » est encore à construire</p>

View File

@ -0,0 +1,42 @@
<!-- Une production locale & engagée -->
<div class="container -c2">
<div class="content color -yellow1">
<h2>Une production locale & engagée</h2>
<p>
Takubeh Kombucha, ce nest pas seulement une boisson artisanale produite
dans un petit atelier.
</p>
<p>
Ce qui rend Takubeh unique, cest le soin tout particulier apporté à chaque
bouteille, mais aussi notre engagement éthique et responsable dans cette
aventure :
</p>
<ul class="flower">
<li>
Utilisation de produits <strong>biologiques</strong> et <strong>responsables</strong>, pour une boisson
100% naturelle et respectueuse de lenvironnement
</li>
<li>
Un conditionnement durable : consigne sur les bouteilles, étiquettes
issues de matières minérales, caisses de transport réutilisables
</li>
<li>
Une empreinte énergétique contrôlée : machines entièrement
mécaniques, électricité issue dénergies renouvelables, atelier semi-
enterré et tempéré, distribution à moins de 150 km, pas denvoi
</li>
<li>
Une ambition: toujours faire mieux, comme développer une production
locale dingrédients pour de nouvelles recettes, ou encore déployer
une distribution de kombucha en fûts inox lavables
</li>
</ul>
<blockquote>
Takubeh Kombucha, c'est plus qu'une boisson.<br>
C'est un mode de vie.
</blockquote>
</div>
<div class="picture">
<img src="/images/takubeh-engagement.jpg" alt="">
</div>
</div>

View File

@ -0,0 +1,85 @@
<div class="container fondateur -c2">
<div class="picture">
<img src="/images/takubeh-fondateurs.webp" alt="">
</div>
<div class="content color -red2">
<h2 class="center">Les fondateurs</h2>
<div class="boxes -c2">
<div>
<div class="tag color -orange1">
<h3>Grégory</h3>
</div>
<p>
Originaire de Saint-Paul-de-Vence (06),
Grégory est un amoureux des beaux paysages.
</p>
<p>
Engagé depuis toujours dans la cause
environnementale et le respect de la nature,
il a co-créé une association à but non lucratif
ayant pour objectif de nettoyer les fôrets et
rivières de sa région.
</p>
<p>
Après une période de sa vie où il jonglait entre
différentes activités, dont la comptabilité,
il décide de partir à létranger, explorer le
monde.
</p>
<p>
De la Thaïlande jusquau Chili, en passant par
lInde, le Brésil et la Bolivie, Grégory découvre
dautres cultures, dautres populations, et
même dautres boissons, puisque ce sera
lors dun voyage en Amérique du Nord quil
découvrira, avec Murielle, le Kombucha.
</p>
</div>
<div>
<div class="tag color -orange1">
<h3>Murielle</h3>
</div>
<p>
Attachée à la Loire, Murielle a grandi à Saint-
Étienne, et y est restée jusquà ses études de
gestion.
</p>
<p>
Désireuse de perfectionner son anglais et en
quête daventure, elle décide de partir en Australie
en mettant une parenthèse à ses études : elle
y restera près de trois ans.
</p>
<p>
Après plusieurs expériences dans la
restauration, elle croisera la route de
Gregory lors dune escale professionnelle
en Suisse avant de continuer de
voyager à ses cotés.
</p>
<p>
Ayant un véritable coup de coeur pour la
région de lOregon aux États-Unis, Murielle et
Grégory feront plusieurs allers-retours entre la
France et les États-Unis, jusquà la naissance
de leur fils Zadig, dans la vallée de Takubeh,
doù le nom de leur entreprise.
</p>
</div>
</div>
<p>
<strong>
Partageant les mêmes valeurs, Murielle et Grégory décident de lancer leur production de
Kombucha, dans un premier temps pour eux-mêmes, avant den faire leur quotidien en créant
une entreprise et en y consacrant tout leur temps.
</strong>
</p>
<p>
<strong>
Au-delà de produire une boisson, Murielle et Grégory ont lancé cette activité pour partager
leur passion, mais aussi une certaine idée dun retour à une consommation de produits
locaux, raisonnés et biologiques.
</strong>
</p>
</div>
</div>

View File

@ -0,0 +1,89 @@
<!-- Notre gamme -->
<div class="container gamme">
<div class="content color -white">
<h2>Notre gamme</h2>
<div class="boxes">
<div class="box">
<img src="/images/bouteilles/chai_rooibos.webp" alt="" width="100" height="300">
<div class="detail">
<div class="title">
<h3 class="tag color -red2">Chai Rooibos</h3>
<h4>33 cl / 1 L</h4>
</div>
<p>
Le Rooibos, lor rouge dAfrique du Sud,
soutenu par les incontournables épices
indiennes de cannelle, clou de girofle,
cardamome, gingembre, appelle au voyage.
</p>
</div>
</div>
<div class="box">
<img src="/images/bouteilles/pu_erh.webp" alt="" width="100" height="300">
<div class="detail">
<div class="title">
<h3 class="tag color -green5">L'Original</h3>
<h4>33 cl / 1 L</h4>
</div>
<p>
Issu de théiers anciens, sauvages et
originels, le thé vert PuErh** est apprécié
pour ses vertus désaltérante et ses
parfums frais et subtils.
Sa très faible teneur en théine
permet de consommer ce kombucha tout
au long de la journée.
</p>
</div>
</div>
<div class="box">
<img src="/images/bouteilles/citronelle_hibiscus.webp" alt="" width="100" height="300">
<div class="detail">
<div class="title">
<h3 class="tag color -red1">Citronnelle Hibiscus</h3>
<h4>33 cl / 1 L</h4>
</div>
<p>
Un kombucha légèrement acidulé plus que
séduisant, mêlant les parfums bien connus
de la citronnelle à la gourmandise de la
fleur dhibiscus.
</p>
</div>
</div>
<div class="box">
<img src="/images/bouteilles/vanille.webp" alt="" width="100" height="300">
<div class="detail">
<div class="title">
<h3 class="tag color -yellow3">Vanille</h3>
<h4>33 cl / 1 L</h4>
</div>
<p>
Au parfum subtil de châtaignes grillées, de
fleurs et rehaussé dune note liquoreuse, le
thé Lien Son FOP** regorge darômes.
Ce kombucha est la rencontre des saveurs
des forêts du Vietnam et de la douceur de
la vanille Bourbon**.
</p>
</div>
</div>
<div class="box">
<img src="/images/bouteilles/eucalyptus.webp" alt="" width="100" height="300">
<div class="detail">
<div class="title">
<h3 class="tag color -blue3">Eucalyptus</h3>
<h4>33 cl / 1 L</h4>
</div>
<p>
Leucalyptus, sans doute une des plantes
les plus désaltérantes !
Ce kombucha servi bien frais est
extrêmement parfumé et parfait
pour étancher les grandes soifs.
</p>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,49 @@
<!-- Takubeh x Hempalicious -->
<div class="container -c2">
<div class="picture">
<img src="/images/kombucha-cbd.webp" alt="">
</div>
<div class="content color -green2">
<h2>Takubeh x Hempalicious</h2>
<p>
La philosophie de Takubeh et les ambitions qui y sont associées résident aussi
dans le désir de travailler avec des acteurs locaux partageant leurs valeurs.
</p>
<p>
Cest notamment le cas de la collaboration entre Takubeh et Les Botanistes, une
entreprise de production de chanvre installée dans la Drôme, ayant une chaîne de
production et de distribution entièrement française, naturelle et biologique, sous
la marque Hempalicious.
</p>
<p>
Créée par deux amis, lentreprise Hempalicious est née de deux reconversions
professionnelles : Ben, venant de lunivers de la haute gastronomie, et Alex, étant
auparavant directrice artistique. Leurs envies respectives et leurs expériences ont
donc permises à Hempalicious de voir le jour.
</p>
<p>
Une amitié de longue date entre les fondateurs de Hempalicious et Murielle et
Greg a permis aux deux univers de se rencontrer : le Kombucha et le chanvre riche
en CBD.
</p>
<p>
Suite à de nombreux essais pour trouver laccord parfait entre la fraîcheur du
Kombucha et le goût subtil du chanvre, la balance est trouvée en 2021 pour aboutir
à une boisson entièrement naturelle et biologique.
</p>
<p>
Cette boisson est aujourdhui distribuée sous la marque Hempalicious, avec la
mention «Brassée par Takubeh», chaque acteur de ce projet étant conscient de
limplication de lautre dans laboutissement de cette boisson, et par conséquent,
de la nécessité de mettre chaque producteur en avant.
</p>
<div class="boxes">
<div class="box">
<a href="https://www.hempalicious.fr/">hempalicious.fr</a>
</div>
<div class="box">
<a href="https://www.lesbotanistes.fr/">lesbotanistes.fr</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,7 @@
<!-- L'histoire de Takubeh
<div class="container">
<div class="content color -green4">
<h2>L'histoire de Takubeh</h2>
</div>
</div> -->
<p>La partie « L'histoire de Takubeh » est encore à construire</p>

View File

@ -0,0 +1,44 @@
<!-- L'identité de Takubeh -->
<div class="container -c2">
<div class="content color -blue2">
<h2>L'identité de Takubeh</h2>
<p>
Comment représenter tout lesprit de Takubeh dans une identité graphique ?
</p>
<p>
Tous les créateurs dentreprise se sont posés cette question. Pas facile dy répondre
seul. Pourtant cest une étape cruciale ! Une identité qui nous ressemble, assez
originale pour être unique, et en même temps facilement reconnaissable.
</p>
<p>
Cest à ce moment que notre amie Clara Rival, une artiste-peintre argentine, fait son
entrée. On a travaillé ensemble pour trouver le design parfait, celui qui collerait au
plus près à notre projet. Pas facile.. jusquà ce quelle remonte dans ses archives
pour nous dégoter LA toile. Celle qui nous a mis daccord en un coup doeil.
</p>
<p>
Nous sommes tombés immédiatement sous le charme : le mélange de couleurs,
laspect nature de la toile avec sa végétation luxuriante, ainsi que la gaieté que
dégage ce tableau étaient une évidence.
</p>
<p>
Ainsi, cette toile est devenue lidentité graphique de Takubeh, déclinée sur tous
les supports (packaging, communication, transport...). Cest simple, ce design est
devenu la marque de fabrique de Takubeh !
</p>
<p>
Pour en savoir plus sur Clara :
</p>
<div class="boxes">
<div class="box">
<a href="https://clararival.com/">clararival.com</a>
</div>
<div class="box">
<a href="https://www.instagram.com/claririval/">instagram.com/claririval/</a>
</div>
</div>
</div>
<div class="picture">
<img src="/images/clara-rival.webp" alt="">
</div>
</div>

View File

@ -0,0 +1 @@
<p>La partie « Instagram » est encore à construire</p>

View File

@ -0,0 +1 @@
<p>La partie « kombucha en fût » est encore à construire</p>

View File

@ -0,0 +1,46 @@
<!-- Notre philosophie -->
<div class="container -c2">
<div class="picture">
<img src="/images/avion.webp" alt="">
</div>
<div class="content color -red1">
<h2>Notre philosophie</h2>
<p>
Takubeh est une entreprise relativement jeune, mais dores et déjà bien ancrée
dans son territoire (Loire, Rhône, Nord Ardèche, Ouest Isère, Beaujolais) et ne
cesse dinnover pour développer son activité.
</p>
<p>
Lors de la création de lentreprise, lobjectif était de distribuer la production de
kombucha en fûts en inox, notamment lors de festivals, mais également dans les
bars et les restaurants. Pratique et écologique, le fût devait être le fer de lance
de lactivité. Mais la crise sanitaire est passée par là. Ayant contraint tous les
évènements à être reportés, ce modèle de distribution nétait plus adapté à la
situation, doù le modèle de distribution actuel : en bouteilles (33cl et 1 litre), mais
toujours dans le respect de lenvironnement et sans perdre de vue notre objectif
de limiter limpact sur la biodiversité. Le choix du verre sest donc simplement
imposé à nous.
</p>
<p>
La distribution est réalisée par nous même, sans envoi.
</p>
<p>
Au-delà de la production, Takubeh est une entreprise avec un véritable esprit de
famille, considérant chaque partenaire comme un maillon essentiel de lactivité et
de la réussite de ce projet.
</p>
<p>
Une consommation raisonnée, locale et conviviale sont les maîtres-mots de notre
philosophie de vie, que nous avons tout naturellement appliquée à notre
entreprise.
</p>
<p>
Nous produisons notre kombucha comme nous le ferions pour nous-même, avec
passion et dévouement.
</p>
<blockquote>
Toute cette philosophie se ressent dans nos boissons :<br>
simple, authentique, faite avec amour et passion.
</blockquote>
</div>
</div>

View File

@ -0,0 +1 @@
<p>La partie « Les points de vente » est encore à construire</p>

View File

@ -0,0 +1,7 @@
<!-- Notre réseau
<div class="container -c2">
<div class="content">
<h2>Notre réseau</h2>
</div>
</div> -->
<p>La partie « Notre réseau » est encore à construire</p>

View File

@ -0,0 +1,49 @@
<!-- Takubeh Kombucha ? -->
<div class="container -c2">
<div class="content color -green3">
<h2>Takubeh Kombucha ?</h2>
<p>
Takubeh est une jeune entreprise de production artisanale de kombucha, une
boisson fermentée à base de thé, naturellement pétillante, extrêmement peu
sucrée, désaltérante et savoureuse.
</p>
<p>
Cette boisson, dont les origines restent floues, est utilisée depuis des
millénaires en Asie, où la consommation de thé y est ancestrale.
</p>
<p>
Le kombucha est probablement apparu dans cette région du monde, que ce
soit grâce à lHumain, ou alors, comme le raconte la légende, grâce à une
tasse de thé sucré oubliée sur le rebord dune fenêtre.
</p>
<p>
Amoureux de cette boisson et désireux de faire perdurer son histoire,
nous avons fondé Takubeh en 2020 à Rochetaillée, un petit village
près de Saint-Étienne (42), afin dy produire un kombucha local, biologique
et responsable.
</p>
<div class="boxes scribe center">
<div class="box">
<img src="" alt="">
<p>
Boisson<br>vivante
</p>
</div>
<div class="box">
<img src="" alt="">
<p>
Finement<br>pétillante
</p>
</div>
<div class="box">
<img src="" alt="">
<p>
Délicieusement<br>peu sucrée
</p>
</div>
</div>
</div>
<div class="picture">
<img src="/images/takubeh-kombucha.jpg" alt="Un verre avec la bouteille de Kombucha de Takubeh">
</div>
</div>

BIN
static/images/avion.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 MiB

BIN
static/images/avion.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

BIN
static/images/avion1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
static/images/fond.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 MiB

BIN
static/images/fond.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
static/images/fond1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 MiB

BIN
static/images/fond2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 435 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB