ignode.github.io/index.html at main · ignode/ignode.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
<!DOCTYPE html>
<html lang="pt-br" class="scroll-smooth">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ignode | Lógica em cada linha.</title>

    <link rel="shortcut icon" href="assets/favicon.png" type="image/png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

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

    <script>
      tailwind.config = {
        theme: {
          fontFamily: {
            sans: ['Nunito', 'sans-serif']
          },
          extend: {
            colors: {
              ignode: {
                bg: '#1e2123',
                node: '#32373A',
                fireStart: '#F12E10',
                fireEnd: '#F75A0B'
              }
            }
          }
        }
      }
    </script>
  </head>

  <body class="bg-ignode-bg text-gray-200 antialiased selection:bg-ignode-fireEnd selection:text-white flex flex-col min-h-screen">

    <header class="w-full px-5 md:px-12 py-5 md:py-6 flex justify-between items-center border-b border-ignode-node/50 bg-ignode-bg/80 backdrop-blur-md sticky top-0 z-50">
      <div class="flex items-center gap-3">
        <img src="assets/logo.png" alt="Ignode logo" class="w-8 h-8 md:w-10 md:h-10 object-contain">
      </div>
      <nav>
        <a href="#aplicacoes" class="text-sm md:text-base font-semibold hover:text-white transition-colors duration-200">Aplicações</a>
      </nav>
    </header>

    <main class="flex-1 flex flex-col items-center justify-center text-center px-5 py-16 md:py-32 max-w-4xl mx-auto">

      <div class="inline-flex items-center gap-2 px-4 py-1.5 md:py-2 rounded-full bg-ignode-node/50 border border-ignode-node mb-6 md:mb-8">
        <span class="w-2 h-2 rounded-full bg-ignode-fireEnd animate-pulse"></span>
        <span class="text-xs md:text-sm font-semibold tracking-wide text-gray-300">Desenvolvimento Fullstack & Mobile</span>
      </div>

      <h1 class="text-6xl md:text-8xl lg:text-9xl font-black mb-4 tracking-tighter text-white lowercase flex items-center justify-center">
        <span class="sr-only">ignode</span>

        <span aria-hidden="true" class="flex items-center">
          ign
          <img src="assets/logo.png" alt="" class="h-[1em] w-auto object-contain mx-1 md:mx-2 drop-shadow-lg">
          de
        </span>
      </h1>

      <h2 class="text-2xl md:text-4xl lg:text-5xl font-extrabold mb-8 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-ignode-fireStart to-ignode-fireEnd">
        Lógica em cada linha.
      </h2>

      <p class="text-base md:text-xl text-gray-400 mb-10 md:mb-12 leading-relaxed max-w-2xl px-2">
        A faísca que inicia a inovação, a estrutura que a mantém de pé.
        Transformamos ideias complexas em soluções escaláveis e eficientes, combinando a ignição criativa com a robustez do código.
      </p>

      <a href="#aplicacoes" class="inline-flex items-center justify-center px-6 md:px-8 py-3 md:py-4 text-sm md:text-base font-bold text-white transition-all duration-200 bg-gradient-to-r from-ignode-fireStart to-ignode-fireEnd rounded-xl hover:shadow-[0_0_20px_rgba(247,90,11,0.4)] hover:-translate-y-1 w-full sm:w-auto">
        Conheça nosso trabalho
      </a>
    </main>

    <section id="aplicacoes" class="w-full bg-[#17191a] py-16 md:py-20 px-5 md:px-12 border-t border-ignode-node/30 scroll-mt-16 md:scroll-mt-20">
      <div class="max-w-6xl mx-auto">
        <div class="mb-10 md:mb-12">
          <h2 class="text-2xl md:text-4xl font-bold text-white mb-3 md:mb-4">Nossas Aplicações</h2>
          <div class="w-12 md:w-16 h-1 md:h-1.5 bg-gradient-to-r from-ignode-fireStart to-ignode-fireEnd rounded-full"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">

          <a href="sudokka/index.html" class="group flex flex-col bg-ignode-node rounded-2xl p-1 transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:shadow-ignode-fireEnd/10">
            <div class="bg-ignode-bg rounded-xl p-5 md:p-6 h-full border border-transparent group-hover:border-ignode-fireEnd/30 transition-colors flex flex-col">

              <div class="w-14 h-14 md:w-16 md:h-16 bg-white rounded-xl mb-5 md:mb-6 flex items-center justify-center overflow-hidden shadow-sm">
                <img src="sudokka/assets/icon.png" alt="Sudokka logo" class="w-full h-full object-cover">
              </div>

              <h3 class="text-lg md:text-xl font-bold text-white mb-2 group-hover:text-ignode-fireEnd transition-colors">Sudokka</h3>
              <p class="text-gray-400 text-sm leading-relaxed mb-6 flex-1">
                Acesse nossa plataforma e confira a política de privacidade e os detalhes de funcionamento da aplicação.
              </p>

              <div class="flex items-center text-sm font-semibold text-ignode-fireEnd mt-auto">
                Acessar página
                <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </div>
            </div>
          </a>

          <div class="flex flex-col bg-ignode-node/30 rounded-2xl p-6 border border-dashed border-ignode-node items-center justify-center text-center opacity-70 min-h-[250px]">
            <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-500 mb-3 md:mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            <h3 class="text-base md:text-lg font-bold text-gray-400 mb-1">Novidades em breve</h3>
            <p class="text-gray-500 text-xs md:text-sm">Mais aplicações estão no forno.</p>
          </div>

        </div>
      </div>
    </section>

    <footer class="w-full bg-[#121415] py-6 md:py-8 text-center border-t border-ignode-node/50 mt-auto">
      <p class="text-xs md:text-sm text-gray-500">
        &copy; 2026 ignode. Todos os direitos reservados.
      </p>
    </footer>

  </body>
</html>