pierre/lesfrouzivores.fr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Pierre Martin
2024-12-04 00:35:35 +01:00
commit 1e41b24330
3 changed files with 447 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+442
View File
@@ -0,0 +1,442 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Les Frouzivores - Commandes directes producteurs</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
</head>
<body>
<!-- Hero Section -->
<div class="relative bg-green-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="text-center">
<h1
class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl"
>
<span class="block">Les Frouzivores</span>
<span class="block text-green-600 mt-2"
>Consommez local, créez du lien</span
>
</h1>
<p class="mt-6 max-w-2xl mx-auto text-xl text-gray-500">
Notre association organise chaque mois, une commande groupée en
ligne et une distribution conviviale à Frouzins.
</p>
<div
class="mt-12 bg-white rounded-lg shadow-lg p-6 max-w-2xl mx-auto"
>
<div
class="flex items-center justify-center space-x-2 text-green-600 mb-4"
>
<i class="fas fa-calendar text-xl"></i>
<span class="text-lg font-semibold">Prochaine distribution</span>
</div>
<p class="text-2xl font-bold text-gray-900">29 novembre</p>
<p class="text-gray-600 mt-2">7 rue du Vieux Moulin (FIC)</p>
<div class="mt-8">
<a
href="https://local.direct"
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700"
>
Je commande maintenant
</a>
</div>
</div>
<div class="mt-8 bg-green-100 rounded-lg p-4">
<div
class="flex items-center justify-center space-x-2 text-green-700"
>
<i class="fas fa-leaf"></i>
<p class="text-lg">
🍷🌰 Plongez dans l'automne avec notre distribution spéciale de
vin nouveau et de marrons chauds !
</p>
</div>
<p class="mt-2 text-green-600">
🍏 Nouveauté : pommes et jus de fruits par Les jardins de
Labourdette
</p>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
<div class="flex">
<div class="flex-shrink-0">
<div
class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"
>
<i class="fas fa-shopping-bag"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">
Pourquoi commander ?
</h3>
<p class="mt-2 text-base text-gray-500">
Commander aux Frouzivores cela signifie soutenir les producteurs
et retisser du lien avec eux. Cela signifie aussi manger des
produits de qualité, et les partager solidairement.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div
class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"
>
<i class="fas fa-users"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">
Ouvert à tout le monde
</h3>
<p class="mt-2 text-base text-gray-500">
Passez commande sans inscription, sans engagement, simplement en
quelques clics. Il n'est pas nécessaire d'être adhérent de
l'association pour commander.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div
class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"
>
<i class="fas fa-percent"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">
Pas de commission
</h3>
<p class="mt-2 text-base text-gray-500">
Votre paiement sur le site de commande est directement réparti
entre les producteurs des produits composants votre commande.
Les Frouzivores ne prennent pas de commission.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div
class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"
>
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Que du local</h3>
<p class="mt-2 text-base text-gray-500">
Les Frouzivores vous permettent de consommer des produits issus
d'un rayon de 50 kms autour de chez vous.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div
class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"
>
<i class="fas fa-balance-scale"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">
Un prix gagnant-gagnant
</h3>
<p class="mt-2 text-base text-gray-500">
Les Frouzivores promeuvent une approche équitable tant pour les
producteurs que pour les consommateurs en demandant un juste
prix aux producteurs.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Solidarity Section -->
<div class="bg-green-50 py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<i class="fas fa-heart text-4xl text-green-600"></i>
<h2 class="mt-4 text-3xl font-bold text-gray-900">Solidarité</h2>
<p class="mt-4 text-xl text-gray-500">
Des produits au profit du Secours Populaire Frouzins
</p>
</div>
<div class="mt-12 max-w-3xl mx-auto text-center">
<p class="text-lg text-gray-500">
Faites également preuve de solidarité en commandant des produits au
profit de l'antenne de Frouzins du Secours Populaire Français.
</p>
<p class="mt-4 text-lg text-gray-500">
Ajoutez un ou plusieurs produits portant la mention « au profit du
secours populaire » à votre panier. Ils seront distribués aux
bénéficiaires dans les jours qui suivent la commande.
</p>
<p class="mt-4 text-lg text-gray-600 font-medium">
💡 Dons possibles : yaourts, farine, steaks hachés…
</p>
<div class="mt-8">
<a
href="https://local.direct"
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700"
>
Je donne
</a>
</div>
</div>
</div>
</div>
<!-- Calendar Section -->
<div class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<i class="fas fa-calendar text-4xl text-green-600"></i>
<h2 class="mt-4 text-3xl font-bold text-gray-900">
Une commande par mois
</h2>
<p class="mt-4 text-xl text-gray-500">
On se retrouve chaque mois, un mercredi, pour une distribution
conviviale.
</p>
</div>
<div class="mt-12 grid grid-cols-2 gap-4 md:grid-cols-4">
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">29 novembre 2023</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">20 décembre 2023</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">31 janvier 2024</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">28 février 2024</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">27 mars 2024</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">24 avril 2024</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">29 mai 2024</p>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<p class="text-lg font-medium text-green-800">3 juillet 2024</p>
</div>
</div>
</div>
</div>
<!-- Producers Section -->
<div class="bg-green-50 py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<i class="fas fa-tractor text-4xl text-green-600"></i>
<h2 class="mt-4 text-3xl font-bold text-gray-900">Nos Producteurs</h2>
<p class="mt-4 text-xl text-gray-500">
Découvrez les producteurs locaux qui nous font confiance
</p>
</div>
<div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- 0-10km -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900">0-10 km</h3>
<span
class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
>Très proche</span
>
</div>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>La Ferme de Borde Bio (Frouzins) - Légumes</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Les Ruchers de Manon (Seysses) - Miel</span>
</li>
</ul>
</div>
</div>
<!-- 10-25km -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900">10-25 km</h3>
<span
class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
>Proche</span
>
</div>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span
>Les Jardins de Labourdette (Poucharramet) - Pommes, jus de
fruits</span
>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>La Ferme du Couget (Rieumes) - Volailles</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Les Fromages de Marie (Bérat) - Fromages</span>
</li>
</ul>
</div>
</div>
<!-- 25-50km -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900">25-50 km</h3>
<span
class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
>Local</span
>
</div>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Domaine de Cantalauze (Gaillac) - Vins</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span
>La Ferme des Violettes (Lavaur) - Produits laitiers</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="bg-gray-50 py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<i class="fas fa-question-circle text-4xl text-green-600"></i>
<h2 class="mt-4 text-3xl font-bold text-gray-900">Des questions ?</h2>
<p class="mt-4 text-xl text-gray-500">
Nous avons les réponses ! Elles devraient vous permettre de mieux
comprendre notre fonctionnement.
</p>
</div>
<div class="mt-12 max-w-3xl mx-auto">
<dl class="space-y-8">
<div>
<dt class="text-lg font-medium text-gray-900">
Comment se déroule une commande ?
</dt>
<dd class="mt-2 text-base text-gray-500">
La commande se fait en ligne sur local.direct. Une fois votre
commande validée, vous la récupérez lors de la distribution
mensuelle.
</dd>
</div>
<div>
<dt class="text-lg font-medium text-gray-900">
J'ai un problème avec ma commande. Que faire ?
</dt>
<dd class="mt-2 text-base text-gray-500">
Contactez-nous directement par email ou via notre page Facebook.
Nous vous répondrons dans les plus brefs délais.
</dd>
</div>
<div>
<dt class="text-lg font-medium text-gray-900">
Comment fonctionne l'association ?
</dt>
<dd class="mt-2 text-base text-gray-500">
L'association est gérée par des bénévoles qui organisent les
commandes et les distributions mensuelles.
</dd>
</div>
<div>
<dt class="text-lg font-medium text-gray-900">
Puis-je m'impliquer dans l'association ?
</dt>
<dd class="mt-2 text-base text-gray-500">
Oui ! Nous accueillons avec plaisir toute personne souhaitant
s'investir dans l'association.
</dd>
</div>
<div>
<dt class="text-lg font-medium text-gray-900">
Comment être informé des actualités de l'association ?
</dt>
<dd class="mt-2 text-base text-gray-500">
Suivez-nous sur notre page Facebook et inscrivez-vous à notre
newsletter.
</dd>
</div>
</dl>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-green-800 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center justify-center space-y-6">
<div class="flex space-x-6">
<a
href="https://facebook.com/lesfrouzivores"
class="text-white hover:text-green-200"
>
<i class="fab fa-facebook text-2xl"></i>
<span class="sr-only">Facebook</span>
</a>
<a
href="https://www.instagram.com/les_frouzivores/"
class="text-white hover:text-green-200"
>
<i class="fab fa-instagram text-2xl"></i>
<span class="sr-only">Instagram</span>
</a>
</div>
<a
href="mailto:contact@lesfrouzivores.fr"
class="text-white hover:text-green-200 flex items-center space-x-2"
>
<i class="fas fa-envelope"></i>
<span>contact@lesfrouzivores.fr</span>
</a>
<p class="text-sm text-green-200">
© 2024 Les Frouzivores. Tous droits réservés.
</p>
</div>
</div>
</footer>
</body>
</html>