alilo-website/index.html at master · AliloSCOP/alilo-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alilo SCOP, activateur de circuits courts</title>
    <link href="./output.css" rel="stylesheet" />
    <link rel="shortcut icon" href="alilo-favicon.png" />
  </head>
  <body class="bg-white text-slate-800">
    <!-- Header with Logo -->
    <header class="container mx-auto px-4 py-6">
      <div class="flex items-baseline">
        <img src="logo.png" alt="ALILO SCOP" class="h-24 w-auto" />
      </div>
    </header>

    <div class="container mx-auto px-4 py-6 text-slate-600">
      <p style="font-style: italic">
        Alilo est une coopérative qui associe <b>formation</b> et
        <b>outils numériques</b>
        pour soutenir les producteurs en vente directe et les acteurs de
        l'alimentation.
      </p>
    </div>

    <!-- Image Grid -->
    <main class="container mx-auto px-4 py-8">
      <div class="grid md:grid-cols-3 sm:grid-cols-1 gap-4">
        <div class="aspect-square">
          <img
            src="image1.jpg"
            title="Diane Mertens, Ferme du Flouquet, Gironde"
            class="w-full h-full object-cover rounded-lg shadow-lg"
          />
        </div>
        <div class="aspect-square">
          <img
            src="image2.jpg"
            title="Distribution de produits locaux à Douzillac, Dordogne"
            class="w-full h-full object-cover rounded-lg shadow-lg"
          />
        </div>
        <div class="aspect-square">
          <img
            src="image3.png"
            class="w-full h-full object-cover rounded-lg shadow-lg"
          />
        </div>
      </div>

      <!--apps-->
      <div class="grid md:grid-cols-3 sm:grid-cols-1 gap-4 mt-4">
        <a
          href="https://www.cagette.net"
          target="_blank"
          class="items-center text-center bg-white border border-slate-200 rounded-lg shadow-sm md:flex-row md:max-w-xl hover:bg-slate-200"
        >
          <img
            class="w-40 mx-auto mt-12"
            src="cagette.png"
            alt="Cagette.net"
            title="Cagette.net"
          />
          <div class="p-4">
            <p class="mb-3 font-normal text-slate-600">
              Notre plateforme de vente directe en ligne<br />pour les
              producteurs locaux.
            </p>
          </div>
        </a>

        <a
          href="https://epicerie-vrac.org/"
          target="_blank"
          class="items-center text-center bg-white border border-slate-200 rounded-lg shadow-sm md:flex-row md:max-w-xl hover:bg-slate-200"
        >
          <img
            class="w-40 mx-auto mt-12"
            src="vrac.png"
            alt="Epicerie VRAC"
            title="Epicerie VRAC"
          />
          <div class="p-4">
            <p class="mb-3 font-normal text-slate-600">
              Epicerie en ligne pour l'association VRAC
            </p>
          </div>
        </a>

        <a
          href="https://www.epiclic.fr"
          target="_blank"
          class="items-center text-center bg-white border border-slate-200 rounded-lg shadow-sm md:flex-row md:max-w-xl hover:bg-slate-200"
        >
          <img
            class="w-50 mx-auto mt-12"
            src="epiclic.png"
            alt="Epiclic.fr"
            title="Epiclic.fr"
          />
          <div class="p-4">
            <p class="mb-3 font-normal text-slate-600">
              Logiciel de click & collect<br />pour les épiceries solidaires
            </p>
          </div>
        </a>
      </div>
    </main>

    <!-- Footer -->
    <div class="bg-slate-200 text-slate-600 mt-12">
      <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-lg font-semibold">ALILO SCOP</h3>
            <p>4 impasse Durban</p>
            <p>33000 Bordeaux</p>
            <p>Nouvelle-Aquitaine, France</p>
          </div>

          <div>
            <p class="mb-2">
              Société coopérative à responsabilité limitée<br />et à capital
              variable
            </p>
            <p>
              <a
                href="https://www.pappers.fr/entreprise/alilo-829028315"
                target="_blank"
              >
                SIRET : 82902831500010
              </a>
            </p>
          </div>
          <div>
            <p class="mb-4">Email : contact <span>@</span> alilo.fr</p>
            <p>
              <a
                href="https://calendly.com/alilo/rdv-infos-conseils-avec-sebastien-zulke-clone-2"
                class="bg-slate-500 text-white px-4 py-2 rounded hover:bg-slate-600"
              >
                Prendre rendez-vous
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>