devdunia/footer.html at main · echobash/devdunia · 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
<!-- Footer -->
<footer class="mt-20 border-t border-white/10 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
  <div class="max-w-7xl mx-auto px-6 py-12">
    <!-- Main Footer Content -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-10">

      <!-- About Section -->
      <div class="space-y-4">
        <div class="flex items-center gap-3 mb-4">
          <img src="images/logo.png" alt="DevDunia logo" class="h-10 w-10 rounded-xl object-contain">
          <span class="text-2xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-teal-400 bg-clip-text text-transparent">DevDunia</span>
        </div>
        <p class="text-gray-400 text-sm leading-relaxed">
          Your all-in-one platform for developer and VAPT tools. 50+ free utilities to boost your productivity.
        </p>
        <!-- Social Icons -->
        <div class="flex items-center gap-4 text-2xl text-gray-400">
          <a href="https://github.com/echobash" target="_blank" class="hover:text-white transition-colors" aria-label="GitHub">
            <i class="fab fa-github"></i>
          </a>
          <a href="https://www.linkedin.com/in/echobash" target="_blank" class="hover:text-[#0A66C2] transition-colors" aria-label="LinkedIn">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="https://x.com/alianwar_rocker" target="_blank" class="hover:text-white transition-colors" aria-label="X (Twitter)">
            <i class="fab fa-x-twitter"></i>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div class="space-y-4">
        <h3 class="text-lg font-bold text-white mb-4">Quick Links</h3>
        <ul class="space-y-2">
          <li>
            <a href="home.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> All Tools
            </a>
          </li>
          <li>
            <a href="index.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> Home
            </a>
          </li>
          <li>
            <a href="contact.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> Contact Us
            </a>
          </li>
          <li>
            <a href="support.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> Support DevDunia
            </a>
          </li>
        </ul>
      </div>

      <!-- Popular Tools -->
      <div class="space-y-4">
        <h3 class="text-lg font-bold text-white mb-4">Popular Tools</h3>
        <ul class="space-y-2">
          <li>
            <a href="json-beautifier.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> JSON Beautifier
            </a>
          </li>
          <li>
            <a href="password-generator.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> Password Generator
            </a>
          </li>
          <li>
            <a href="base64-encoder.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> Base64 Encoder
            </a>
          </li>
          <li>
            <a href="jwt-decoder.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> JWT Decoder
            </a>
          </li>
          <li>
            <a href="regex-tester.html" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-chevron-right text-xs"></i> Regex Tester
            </a>
          </li>
        </ul>
      </div>

      <!-- Community & Support -->
      <div class="space-y-4">
        <h3 class="text-lg font-bold text-white mb-4">Community</h3>
        <ul class="space-y-2">
          <li>
            <a href="https://github.com/echobash/devdunia" target="_blank" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fab fa-github text-xs"></i> GitHub Repository
            </a>
          </li>
          <li>
            <a href="https://github.com/echobash/devdunia/issues" target="_blank" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-bug text-xs"></i> Report Issues
            </a>
          </li>
          <li>
            <a href="https://github.com/echobash/devdunia/issues/new?labels=feature" target="_blank" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-lightbulb text-xs"></i> Request Features
            </a>
          </li>
          <li>
            <a href="CONTRIBUTING.md" class="text-gray-400 hover:text-purple-400 transition-colors text-sm flex items-center gap-2">
              <i class="fas fa-code-branch text-xs"></i> Contribute
            </a>
          </li>
        </ul>
        <!-- Star Button -->
        <a
          href="https://github.com/echobash/devdunia"
          target="_blank"
          class="inline-flex items-center gap-2 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-200 shadow-lg mt-4"
        >
          <i class="fab fa-github text-lg"></i> ⭐ Star on GitHub
        </a>
      </div>

    </div>

    <!-- Divider -->
    <div class="border-t border-white/10 mb-4"></div>

    <!-- Bottom Footer -->
    <div class="flex flex-col md:flex-row justify-between items-center gap-3 py-2">
      <div class="text-center md:text-left">
        <p class="text-gray-400 text-sm">
          &copy; 2024-2025 DevDunia. All rights reserved.
        </p>
        <p class="text-gray-500 text-xs mt-0.5">
          Made with <span class="text-red-400">❤</span> by <a href="https://echobash.com" target="_blank" class="text-purple-400 hover:text-purple-300 font-semibold transition-colors">echobash.com</a> for the developer community
        </p>
      </div>

      <div class="flex flex-wrap justify-center gap-4 text-xs text-gray-400">
        <a href="CODE_OF_CONDUCT.md" class="hover:text-purple-400 transition-colors">Code of Conduct</a>
        <span class="text-gray-600">|</span>
        <a href="https://github.com/echobash/devdunia/blob/main/LICENSE" target="_blank" class="hover:text-purple-400 transition-colors">License</a>
        <span class="text-gray-600">|</span>
        <a href="https://github.com/echobash/devdunia" target="_blank" class="hover:text-purple-400 transition-colors">Open Source</a>
      </div>
    </div>

  </div>
</footer>

<!-- Font Awesome CDN for social icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>