wisdombits.github.io/index.html at main · WisdomBits/wisdombits.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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WisdomBits - Learn. Share. Build.</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      /* Custom glass effect */
      .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
    </style>
  </head>
  <body class="bg-gradient-to-br from-slate-900 via-indigo-900 to-gray-900 text-white font-sans">

    <!-- Navbar -->
    <header class="fixed w-full top-0 z-50 bg-transparent">
      <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
        <h1 class="text-2xl font-extrabold tracking-tight">WisdomBits</h1>
        <nav class="space-x-6 hidden sm:block">
          <a href="#about" class="hover:text-indigo-300 transition">About</a>
          <a href="#projects" class="hover:text-indigo-300 transition">Projects</a>
          <a href="#contact" class="hover:text-indigo-300 transition">Contact</a>
          <a href="https://dev.to/wisdombits" class="hover:text-indigo-300 transition">Blog</a>
          <a href="https://github.com/wisdombits" class="hover:text-indigo-300 transition">Github</a>
        </nav>
      </div>
    </header>

    <!-- Hero Section -->
    <section class="h-screen flex items-center justify-center relative px-6 pt-24 text-center">
      <div class="glass max-w-3xl p-10 rounded-xl shadow-lg">
        <h2 class="text-4xl sm:text-5xl font-bold mb-4">Open Source. Open Learning.</h2>
        <p class="text-lg text-gray-200 mb-8">
          WisdomBits is a collaborative learning space where knowledge and code grow together. Explore our open-source tools and resources.
        </p>
        <a href="#projects" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-full font-medium transition">
          Discover Projects
        </a>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-24 px-6 bg-white text-gray-800">
      <div class="max-w-5xl mx-auto text-center">
        <h3 class="text-3xl font-bold mb-4">What is WisdomBits?</h3>
        <p class="text-lg leading-relaxed">
          We're building a space where curious minds come together to create, learn, and share openly. From beginner tutorials to advanced tools, WisdomBits empowers developers and learners to grow through open-source contributions and community-driven knowledge.
        </p>
      </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-24 px-6 bg-gray-100 text-gray-900">
      <div class="max-w-6xl mx-auto text-center">
        <h3 class="text-3xl font-bold mb-10">Featured Projects</h3>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- Card 1 -->
          <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
            <h4 class="text-xl font-semibold mb-2">Overwatch</h4>
            <p class="text-gray-600 mb-4">Lightweight by design. Powerful in action. A modern state manager built for React.</p>
            <a href="https://github.com/WisdomBits/overwatch" class="text-indigo-600 hover:underline font-medium">Github </a> | <a href="https://docs.overwatchts.in/docs" class="text-indigo-600 hover:underline font-medium">Read Docs →</a>
          </div>
          <!-- Card 2 -->
           <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
            <h4 class="text-xl font-semibold mb-2">Watchly</h4>
            <p class="text-gray-600 mb-4">A Dev Tool designed to facilitate the debugging of state management in your applications.</p>
            <a href="https://github.com/WisdomBits/watchly-overwatch-devtools" class="text-indigo-600 hover:underline font-medium">View on GitHub →</a>
          </div>
          <!-- Card 3 -->
          <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
            <h4 class="text-xl font-semibold mb-2">Open-Doc</h4>
            <p class="text-gray-600 mb-4">A collaborative, web-based code editor built for the open-source community.</p>
            <a href="https://github.com/WisdomBits/Open-Doc" class="text-indigo-600 hover:underline font-medium">Explore →</a>
          </div>

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

    <!-- Contact Section -->
    <section id="contact" class="py-24 px-6 bg-indigo-900 text-white text-center">
      <div class="max-w-3xl mx-auto">
        <h3 class="text-3xl font-bold mb-4">Let's Connect</h3>
        <p class="text-lg mb-8">Whether you want to contribute, collaborate, or just say hello — we’d love to hear from you.</p>
        <!-- <a href="mailto:info@wisdombits.org" class="bg-white text-indigo-900 font-semibold px-6 py-3 rounded-full hover:bg-gray-200 transition">
          📬 Send us an Email
        </a> -->
        <a href="https://github.com/orgs/WisdomBits/discussions" class="bg-white text-indigo-900 font-semibold px-6 py-3 rounded-full hover:bg-gray-200 transition">
          📬 Connect
        </a>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 text-center py-6">
      <p>&copy; 2025 WisdomBits — Built with 💡 and ❤️</p>
      <div class="mt-2 space-x-4">
        <a href="https://github.com/wisdombits" class="hover:text-white">GitHub</a>
        <a href="https://dev.to/wisdombits" class="hover:text-white">DEV Community</a>
        <!-- <a href="#" class="hover:text-white">LinkedIn</a> -->
      </div>
    </footer>

  </body>
</html>