vobys.github.io/index.html at main · vobys/vobys.github.io · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vobys - Gestão de Pessoas</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
      rel="stylesheet"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

    <script
      src="https://kit.fontawesome.com/a076d05399.js"
      crossorigin="anonymous"
    ></script>

    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  </head>
  <body class="bg-gray-100 font-sans">
    <header class="bg-white shadow-lg sticky top-0 z-50">
      <div
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center py-4"
      >
        <div class="shrink-0">
          <img
            src="images/logo.png"
            alt="Logo"
            class="h-12 w-12 rounded-full"
          />
        </div>

        <div class="ml-4">
          <h1 class="text-3xl font-bold text-gray-800">
            Vobys - Gestão de Pessoas
          </h1>
        </div>
      </div>
    </header>

    <section
      class="bg-gradient-to-r from-green-400 to-blue-500 text-white py-20"
      data-aos="fade-up"
    >
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-4xl font-extrabold">Modernize sua Gestão de Pessoas</h2>
        <p class="mt-4 text-lg font-light">
          Descubra como Vobys pode transformar os processos de Recursos Humanos
          e engajar sua equipe no trabalho do futuro.
        </p>
      </div>
    </section>

    <section class="py-16" data-aos="fade-up">
      <div
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
      >
        <div
          class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transform transition duration-300 hover:scale-105"
          data-aos="zoom-in"
        >
          <div class="text-green-500 text-4xl mb-4">
            <i class="fas fa-user-plus"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800">Cadastro Funcional</h3>
          <p class="text-gray-600 mt-2">
            Nossa plataforma reúne dezenas de características indispensáveis
            para a gestão de pessoas.
          </p>
        </div>

        <div
          class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transform transition duration-300 hover:scale-105"
          data-aos="zoom-in"
        >
          <div class="text-yellow-500 text-4xl mb-4">
            <i class="fas fa-file-invoice-dollar"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800">Folha de Pagamento</h3>
          <p class="text-gray-600 mt-2">
            Nossa solução permite abertura de diversas folhas simultaneamente.
          </p>
        </div>

        <div
          class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transform transition duration-300 hover:scale-105"
          data-aos="zoom-in"
        >
          <div class="text-blue-500 text-4xl mb-4">
            <i class="fas fa-calendar-check"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800">
            Controle de Frequência
          </h3>
          <p class="text-gray-600 mt-2">
            Controle de frequência e jornadas de trabalho completo com sistema
            de biometria.
          </p>
        </div>

        <div
          class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transform transition duration-300 hover:scale-105"
          data-aos="zoom-in"
        >
          <div class="text-purple-500 text-4xl mb-4">
            <i class="fas fa-briefcase"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800">Gestão de Carreira</h3>
          <p class="text-gray-600 mt-2">
            Controle de cargos, funções e perfis de competência requeridos para
            o exercício das atividades.
          </p>
        </div>

        <div
          class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transform transition duration-300 hover:scale-105"
          data-aos="zoom-in"
        >
          <div class="text-pink-500 text-4xl mb-4">
            <i class="fas fa-chart-line"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800">Gestão de Desempenho</h3>
          <p class="text-gray-600 mt-2">
            Avaliação de competências e metas para monitoramento do desempenho.
          </p>
        </div>

        <div
          class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transform transition duration-300 hover:scale-105"
          data-aos="zoom-in"
        >
          <div class="text-red-500 text-4xl mb-4">
            <i class="fas fa-diagnoses"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800">
            Gestão Estratégica de Pessoas
          </h3>
          <p class="text-gray-600 mt-2">
            Monitoramento constante dos níveis de competências e do aprendizado
            organizacional.
          </p>
        </div>
      </div>
    </section>

    <section class="bg-white py-16" data-aos="fade-up">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img
                src="images/tela-1.png"
                alt="Imagem 1"
                class="rounded-lg"
              />
            </div>

            <div class="swiper-slide">
              <img
                src="images/tela-2.png"
                alt="Imagem 2"
                class="rounded-lg"
              />
            </div>
            <div class="swiper-slide">
              <img
                src="images/tela-3.png"
                alt="Imagem 3"
                class="rounded-lg"
              />
            </div>
            <div class="swiper-slide">
              <img
                src="images/tela-4.png"
                alt="Imagem 4"
                class="rounded-lg"
              />
            </div>
            <div class="swiper-slide">
              <img
                src="images/tela-5.png"
                alt="Imagem 5"
                class="rounded-lg"
              />
            </div>
            <div class="swiper-slide">
              <img
                src="images/tela-6.png"
                alt="Imagem 6"
                class="rounded-lg"
              />
            </div>
          </div>

          <div class="swiper-pagination"></div>

          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </section>

    <footer class="mt-16 bg-gray-800 text-gray-400 py-8">
      <div class="text-center text-sm">
        &copy; 2025 Vobys. Todos os direitos reservados.
      </div>
    </footer>

    <script>
      // Initialize AOS Animation Library
      AOS.init();

      // Initialize Swiper Carousel
      const swiper = new Swiper(".swiper-container", {
        slidesPerView: 1,
        spaceBetween: 20,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
      });
    </script>
    <style>
      .swiper-button-next,
      .swiper-button-prev {
        color: #4A5568;
      }

      .swiper-button-next:hover,
      .swiper-button-prev:hover {
        color: #2B6CB0;
      }
    </style>
  </body>
</html>