Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ | Rejoignez-nous sur le Chat 💬

Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • froggit/www/froggit.fr
1 result
Show changes
Commits on Source (8)
......@@ -3,8 +3,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
/** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = {
title: "Simplifiez-vous le code !",
tagline: "Améliorez la coopération de vos équipes autour du code source, sans gérer votre forge logicielle !",
title: "Simplifiez-vous le code",
tagline: "",
url: process.env.DOCUSAURUS_URL || "https://froggit.fr",
baseUrl: process.env.DOCUSAURUS_BASEURL || "/",
onBrokenLinks: "throw",
......
source diff could not be displayed: it is too large. Options to address this: view the blob.
......@@ -27,10 +27,13 @@
"@svgr/webpack": "^6.2.1",
"clsx": "^1.1.1",
"file-loader": "^6.2.0",
"jquery": "^3.6.0",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.3.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"url-loader": "^4.1.1"
},
"browserslist": {
......
/* eslint react/prop-types: 0 */
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
function CarouselElement({name, img, link}) {
if (typeof link === "undefined" && typeof name === "undefined") {
return (
<div className="box_carousel">
<div>
<img src={useBaseUrl(img)} className="carousel-img" />
</div>
</div>
);
}
else if (typeof link === "undefined") {
return (
<div className="box_carousel">
<div>
<img src={useBaseUrl(img)} className="carousel-img" />
<h6 className="title_carousel">{name}</h6>
</div>
</div>
);
}
else if (typeof name === "undefined") {
return (
<div className="box_carousel">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} className="carousel-img" />
</a>
</div>
);
}
else {
return (
<div className="box_carousel">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} className="carousel-img" />
<h6 className="title_carousel">{name}</h6>
</a>
</div>
);
}
}
export default function Carousel(props) {
const list = props.list;
//https://react-slick.neostack.com/docs/api/
const settings = {
dots: false,
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
speed: 4000,
autoplaySpeed: 4000,
variableWidth: true,
cssEase: "linear"
};
return (
<div>
<Slider {...settings}>
{list.map((props, idx) => (
<CarouselElement key={idx} {...props} />
))}
</Slider>
</div>
);
}
import React from "react";
import Carousel from "./Carousel";
const CarouselList = [
{
name: "Acceuil",
img: "/img/docusaurus.png",
link: "https://froggit.fr/",
},
{
img: "/img/bouclier.svg",
},
{
img: "/img/logo_froggit.svg",
link: "/communaute",
},
{
name: "hello",
img: "/img/logo_froggit.svg",
},
{
name: "ki jan'w",
img: "/img/chemistry.svg",
},
{
name: "bom dia",
img: "/img/read-smile.svg",
},
];
export default function CarouselLibre() {
return (
<Carousel list={CarouselList} />
);
}
/* eslint-disable react/prop-types */
import React from "react";
export default function Highlight ({children, color}) {
return (
<span
style={{
backgroundColor: color,
borderRadius: "2px",
color: "#fff",
padding: "0.2rem",
}}>
{children}
</span>
);
}
......@@ -4,11 +4,11 @@ import styles from "./HomepagePromises.module.css";
const PromiseList = [
{
title: "Sûr",
title: "Sécurisé",
Svg: require("../../static/img/bouclier.svg").default,
description: (
<>
<p>Vos données sont en lieu sûr et sauvegardées toutes les nuits.</p>
<p>Vos données sont en lieu sûr et sauvegardées à deux endroits différents toutes les nuits.</p>
</>
),
},
......@@ -17,7 +17,7 @@ const PromiseList = [
Svg: require("../../static/img/rgpd.svg").default,
description: (
<>
<p>Nous sommes hébergés en France et conformes au RGPD.</p>
<p>Dites bye-bye au <i>Cloud Act</i> et aux risques d’espionnage industriel. Avec Froggit vous êtes hébergé en France et protégé par les normes RGPD.</p>
</>
),
},
......@@ -26,7 +26,7 @@ const PromiseList = [
Svg: require("../../static/img/liberte.svg").default,
description: (
<>
<p>Notre solution s&apos;appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
<p>Froggit se base sur des logiciels libres reconnus et des conditions générales dutilisation complètement éthiques.</p>
</>
),
},
......@@ -49,12 +49,15 @@ function Promise({Svg, title, description}) {
export default function HomepagePromises() {
return (
<section className="section-promises">
<div className="row">
{PromiseList.map((props, idx) => (
<Promise key={idx} {...props} />
))}
</div>
</section>
<div>
<h2 className="promise-title">Faites la différence</h2>
<section className="section-promises">
<div className="row">
{PromiseList.map((props, idx) => (
<Promise key={idx} {...props} />
))}
</div>
</section>
</div>
);
}
/* CAROUSEL */
.box_carousel {
display: flex;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.carousel-img {
margin: 20px;
max-width: 110px;
/* text-align: center; */
justify-content: space-between;
}
.title_carousel {
display: flex;
justify-content: center;
}
......@@ -3,6 +3,8 @@
@import url("footer.css");
@import url("dark-theme.css");
@import url("matomo.css");
@import url("tarifs.css");
@import url("carousel.css");
html, body {
......@@ -124,6 +126,10 @@ ul {
padding-bottom: 20px;
}
.btn-little-txt {
font-size: small;
}
/***** BUTTON *****/
.button {
margin: 10px;
......@@ -135,15 +141,15 @@ ul {
}
.button--beta {
background-color: var(--ifm-color-success);
border-color: var(--ifm-color-success);
color: var(--ifm-color-frame);
border-style: none;
background-color: var(--ifm-color-frame);
color: var(--ifm-color-black);
}
.button--beta:hover {
color: var(--ifm-color-secondary);
background-color: var(--ifm-color-info);
background-color: var(--ifm-color-success);
border-style: none;
}
......@@ -245,3 +251,8 @@ ul {
width: 330px;
}
}
.promise-title {
display: flex;
justify-content: center;
}
......@@ -23,13 +23,13 @@ html[data-theme='dark'] {
html[data-theme='dark'] {
--ifm-background-color: #18191a;
--ifm-background-surface-color: var(--ifm-background-color);
--ifm-hover-overlay: #ffffff0d;
--ifm-hover-overlay: var(--ifm-color-gray-800);
--ifm-color-content-secondary: var(--ifm-color-primary-light);
--ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
background-color: var(--ifm-background-color);
}
html[data-theme='dark'] .clean-btn {
......@@ -99,6 +99,27 @@ html[data-theme='dark'] .menu__link {
color: var(--ifm-color-warning);
}
/* cards prices page */
html[data-theme='dark'] .tabs-monthly-annual .tabs__item--active{
background-color: var(--ifm-color-light-green);
}
html[data-theme='dark'] .headband p {
color: var(--ifm-color-success);
}
html[data-theme='dark'] .card_price {
color: var(--ifm-color-black);
}
html[data-theme='dark'] .tabs-etang .tabs__item {
color: var(--ifm-color-gray-900);
}
html[data-theme='dark'] .tabs-etang .tabs__item:hover {
background-color: var(--ifm-color-gray-200);
}
/* dark footer */
html[data-theme='dark'] .footer__link-item {
color: var(--ifm-color-secondary);
......@@ -111,6 +132,10 @@ html[data-theme='dark'] .footer {
--ifm-footer-title-color: var(--ifm-color-secondary);
}
html[data-theme='dark'] .footer a:hover {
color: var(--ifm-color-frame);
}
html[data-theme='dark'] .footer__copyright {
color: var(--ifm-color-secondary);
}
......@@ -46,3 +46,7 @@ a.footer__link-item:hover {
font-family: var(--ifm-font-family);
font-weight: 600;
}
.footer__copyright a {
text-decoration: underline;
}
/************* TARIFS *************/
/******* price tab ********/
.headband {
background-color: var(--ifm-color-frame);
border-radius: var(--ifm-button-border-radius);
padding-bottom: 2px;
padding-top: 10px;
margin-bottom: -30px;
width: 170px;
margin-left: auto;
margin-right: auto;
}
.headband p {
font-weight: 600;
color: var(--ifm-color-success);
}
.price {
text-align: center;
}
.card_price {
background-color: var(--ifm-color-secondary-lightest);
margin-top: 20px;
margin-bottom: 20px;
}
.tabs-etang .tabs__item {
line-height: 16px;
margin: 4px;
padding: 0.5em;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
}
.tabs-etang .tabs__item--active {
background-color: var(--ifm-color-light-green);
border: 0;
border-radius: var(--ifm-global-radius);
color: var(--ifm-color-white);
}
.tabs-etang-hide {
display: none;
}
/******** Monthly & annual buttons********/
.tabs-monthly-annual {
margin-top: 30px;
margin-bottom: 30px;
width: 21rem;
height: 3.7rem;
margin-left: auto;
margin-right: auto;
}
.tabs-monthly-annual .tabs__item {
line-height: 50px;
margin: 10px;
padding: 0.2em;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
background-color: var(--ifm-button-selection);
color: var(--ifm-color-light-green);
border: 2px solid var(--ifm-color-light-green);
}
.tabs-monthly-annual .tabs__item:hover {
transition: 0.4s;
background-color: var(--ifm-color-light-green);
color: var(--ifm-color-white);
border: 2px solid var(--ifm-color-light-green);
}
.tabs-monthly-annual .tabs__item--active {
border: 0;
border-radius: var(--ifm-global-radius);
color: var(--ifm-color-white);
background-color: var(--ifm-color-light-green);
}
/********Buttons in cards ********/
.button-noclick:not(.button--outline) {
color: var(--ifm-color-secondary-darkest);
border: 2px solid var(--ifm-color-secondary-darkest);
}
.button--price:not(.button--outline) {
background-color: var(--ifm-button-selection);
color: var(--ifm-color-light-green);
border: 2px solid var(--ifm-color-light-green);
}
.button--price:not(.button--outline):hover {
background-color: var(--ifm-color-light-green);
color: var(--ifm-color-white);
border: 2px solid var(--ifm-color-light-green);
}
/******** Text in cards ********/
.small_price {
font-size: 12px;
}
/******** Disabled cards ********/
.disable_col p, .disable_col h2 {
color: var(--ifm-color-secondary-darkest);
}
.disable_col, .card-demo {
margin-top: 50px;
box-shadow: var(--ifm-global-shadow-tl);
border-radius: var(--ifm-card-border-radius);
}
......@@ -2,6 +2,7 @@
title: dummy
description: "page factice"
---
import CarouselLibre from "@site/src/components/CarouselLibre";
# Page factice
......@@ -12,6 +13,12 @@ Page factice penser à créer une vraie page !
echo "Hello World"
```
## Hello mon carousel Libre !
<div>
<CarouselLibre />
</div>
:::note
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
......
......@@ -7,19 +7,16 @@ import HomepageFeatures from "../components/HomepageFeatures";
import Link from "@docusaurus/Link";
function HomepageHeader(){
const { siteConfig } = useDocusaurusContext();
return (
<header className={styles.heroBanner}>
<div className="sections container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w">
▶️ En savoir plus
</Link>
<Link className="button button--beta button--lg" to="http://beta.froggit.fr/">
Rejoindre la bêta gratuite 🧪
</Link>
<h1 className="hero__title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</h1>
<p className="hero__subtitle">Collaborez autour du code sur la première plateforme intégrée DevOps <i>Made in France</i>. Avec Froggit, sécurisez vos données, améliorez vos performances et protégez enfin la planète.</p>
<div className="button-frame">
<Link className="button button--beta button--lg" to="/tarifs">
Je mabonne sans engagement<br /><div className="btn-little-txt">30 jours satisfaits ou remboursés !</div>
</Link>
</div>
</div>
</header>
);
......
---
title: "Tarifs"
description: "Les tarifs de Froggit"
keywords: Lydra, SaaS, pricing, tarifs
---
# Les tarifs de Froggit
| Limites | Têtard | 🥇 Grenouille | 🥈 Étang |
|---------------|----------|------------|----------|----------|----------|
| | ![Têtard](../../static/img/pricing/hidden.png) | ![Grenouille](../../static/img/pricing/computer.png) | ![Étang](../../static/img/pricing/cauldron.png) | ![Étang](../../static/img/pricing/cauldron.png) | ![Étang](../../static/img/pricing/cauldron.png) |
| 👥 Utilisateurs | 1️⃣ | 1️⃣ | 1️⃣0️⃣ | 5️⃣0️⃣ | 1️⃣0️⃣0️⃣ |
| 🏢 Groupes | ❌ Aucun | Illimité | Illimité | Illimité | Illimité |
| 📥 Projets | 24 | Illimité | Illimité | Illimité | Illimité |
| 🤖 CI | Illimité | Illimité | Illimité | Illimité | Illimité |
| 💰 **Prix** | 🔜 | 🔜 | 🔜 | 🔜 | 🔜 |
🔜 Les prix arrivent !
# Les tarifs de Froggit
:::tip Bêta en cours 🧪
[En attendant rejoignez la bêta !](http://beta.froggit.fr/)
:::tip
---
title: "Tarifs"
description: "Les tarifs de Froggit"
keywords: Lydra, SaaS, pricing, tarifs
---
import useBaseUrl from "@docusaurus/useBaseUrl";
import Highlight from "@site/src/components/Highlight";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import { GiTadpole, GiFrogFoot, GiFrogPrince } from "react-icons/gi";
# Les tarifs de Froggit
:::caution Bêta en cours 🧪
🔜 **Les tarifs arrivent !** <a class="button button--warning" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
:::
Tarifs simples, transparents, et tout inclus en fonction du nombre d'utilisateurs.
:::tip Cumuler les plans
Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumulerez les sièges.
:::
<Tabs
className="tabs-monthly-annual"
defaultValue="grenouille"
values={[
{label: 'Mensuel', value: 'grenouille'},
{label: 'Annuel -20%', value: 'annuel'},
]}>
<TabItem value="grenouille">
<div class="row price">
<div class="col">
<div class="disable_col">
<div class="card card_price">
<div class="card__image margin-top--md">
<img
src={useBaseUrl("img/pricing/hidden.png")}
alt="Image alt text"
title="Plan Têtard" />
</div>
<div class="card__body">
<h2>Têtard</h2>
<p>Idéal pour <strong>débuter</strong> !</p>
<p>
<strong>XX €HT/an</strong><br/>
<small class="small_price">soit XX €HT/mois</small><br/>
<a class="button disabled button-noclick"><GiTadpole size="20px"/> Démarrer</a>
</p>
</div>
<div class="card__footer margin-top--lg">
<small>
<p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
<p><Highlight color="var(--ifm-color-danger)">aucun</Highlight> groupe</p>
<p><Highlight color="var(--ifm-color-warning)">24</Highlight> projets</p>
<p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="headband">
<p>Le plus populaire</p>
</div>
<div class="card-test">
<div class="card shadow--tl card_price card_price_main">
<div class="card__image margin-top--md">
<img
src={useBaseUrl("img/pricing/computer.png")}
alt="Image alt text"
title="Plan Grenouille" />
</div>
<div class="card__body">
<h2>Grenouille</h2>
<p>Parfait pour les <strong>solo</strong></p>
<p>
<strong>XX €HT/mois</strong><br/>
<a class="button button--price margin-bottom--lg" href="#url"><GiFrogFoot size="20px"/> Coder sans limites</a>
</p>
</div>
<div class="card__footer">
<small>
<p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
<p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
</small>
<small>
<p>Bénéficiez de <Highlight color="var(--ifm-color-light-green)">2 mois offerts</Highlight> en choisissant l'abonnement annuel
<small> ou XX € /mois (plan annuel)</small><br/></p>
</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="disable_col">
<div class="card card_price">
<div class="card__image margin-top--md">
<img
src={useBaseUrl("img/pricing/cauldron.png")}
alt="Image alt text"
title="Plan Étang" />
</div>
<div class="card__body">
<h2>Étang</h2>
<p>Adapté aux <strong>entreprises</strong></p>
<Tabs
groupId="etang"
className="tabs-etang-hide">
<TabItem value="50">
<p>
<strong>XX €HT/an</strong><br/>
<small class="small_price">soit XX €HT/mois/utilisateur</small><br/>
<a class="button disabled button-noclick" href="#url-10"><GiFrogPrince size="20px"/> Acheter <br/> <small>50 sièges</small></a>
</p>
</TabItem>
</Tabs>
</div>
<div class="card__footer">
<small>
<p><Highlight color="var(--ifm-color-light-green)">10, 50 ou 100</Highlight> utilisateurs</p>
<p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
</small>
</div>
</div>
</div>
</div>
</div>
</TabItem>
<TabItem value="annuel">
<div class="row price">
<div class="col">
<div class="card-demo">
<div class="card card_price">
<div class="card__image margin-top--md">
<img
src={useBaseUrl("img/pricing/hidden.png")}
alt="Image alt text"
title="Plan Têtard" />
</div>
<div class="card__body">
<h2>Têtard</h2>
<p>Idéal pour <strong>débuter</strong> !</p>
<p>
<strong>XX €HT/an</strong><br/>
<small class="small_price">soit XX €HT/mois</small><br/>
<a class="button button--price" href="#url"><GiTadpole size="20px"/> Démarrer</a>
</p>
</div>
<div class="card__footer margin-top--lg">
<small>
<p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
<p><Highlight color="var(--ifm-color-danger)">aucun</Highlight> groupe</p>
<p><Highlight color="var(--ifm-color-warning)">24</Highlight> projets</p>
<p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="headband">
<p>Le plus populaire</p>
</div>
<div class="card-test">
<div class="card shadow--tl card_price card_price_main">
<div class="card__image margin-top--md">
<img
src={useBaseUrl("img/pricing/computer.png")}
alt="Image alt text"
title="Plan Grenouille" />
</div>
<div class="card__body">
<h2>Grenouille</h2>
<p>Parfait pour les <strong>solo</strong></p>
<strong>XX €HT/mois</strong><br/>
<small class="small_price">
<del>XX € /mois</del>
</small>
<a class="button button--price" href="#url"><GiFrogFoot size="20px"/> Coder sans limites<br/></a>
</div>
<div class="card__footer">
<small>
<p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
<p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card-demo">
<div class="card card_price">
<div class="card__image margin-top--md">
<img
src={useBaseUrl("img/pricing/cauldron.png")}
alt="Image alt text"
title="Plan Étang" />
</div>
<div class="card__body">
<h2>Étang</h2>
<p>Adapté aux <strong>entreprises</strong></p>
<Tabs
groupId="etang"
className="tabs-etang-hide">
<TabItem value="10">
<p>
<strong>X €HT/an</strong><br/>
<small class="small_price">soit X €HT/mois/utilisateur</small><br/>
<a class="button button button--price" href="#url-10"><GiFrogPrince size="20px"/> Acheter <br/> <small>10 sièges</small></a>
</p>
</TabItem>
<TabItem value="50">
<p>
<strong>XX €HT/an</strong><br/>
<small class="small_price">soit XX €HT/mois/utilisateur</small><br/>
<a class="button button button--price" href="#url-50"><GiFrogPrince size="20px"/> Acheter <br/> <small>50 sièges</small></a>
</p>
</TabItem>
<TabItem value="100">
<p>
<strong>XXX €HT/an</strong><br/>
<small class="small_price">soit XXX €HT/mois/utilisateur</small><br/>
<a class="button button button--price" href="#url-100"><GiFrogPrince size="20px"/> Acheter <br/> <small>100 sièges</small></a>
</p>
</TabItem>
</Tabs>
</div>
<div class="card__footer">
<small>
<Tabs
groupId="etang"
className="tabs-etang"
defaultValue="10"
values={[
{label: '10', value: '10'},
{label: '50', value: '50'},
{label: '100', value: '100'},
]}>
<TabItem value="10"><p><Highlight color="var(--ifm-color-light-green)">10</Highlight> utilisateurs</p></TabItem>
<TabItem value="50"><p><Highlight color="var(--ifm-color-light-green)">50</Highlight> utilisateurs</p></TabItem>
<TabItem value="100"><p><Highlight color="var(--ifm-color-light-green)">100</Highlight> utilisateurs</p></TabItem>
</Tabs>
<p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
<p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
</small>
</div>
</div>
</div>
</div>
</div>
</TabItem>
</Tabs>
:::info tarifs de lancement
Ces **tarifs de lancement** évolueront en fonction du nombre de fonctionnalités que nous ajouterons.
:::