synexus-dev.github.io/index.html at main · synexus-dev/synexus-dev.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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Synexus delivers high-performance Enterprise Java backends and scalable Game Server solutions. Clean architecture, zero-lag focus, and modern infrastructure.">
    <meta name="keywords" content="Java, Enterprise Java, Minecraft Plugins, Game Servers, Backend, Spring Boot, Microservices">
    <meta name="author" content="Synexus">
    <meta name="robots" content="index, follow">

    <link rel="canonical" href="https://synexus.dev">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://synexus.dev">
    <meta property="og:title" content="Synexus | Enterprise Java & Game Solutions">
    <meta property="og:description" content="The central hub of your digital infrastructure. Enterprise Java backends and high-performance game server solutions.">
    <meta property="og:image" content="assets/images/synexus-logo.webp">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Synexus - Enterprise Java & Game Solutions">
    <meta property="og:site_name" content="Synexus">
    <meta property="og:locale" content="en_US">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://synexus.dev">
    <meta name="twitter:title" content="Synexus | Enterprise Java & Game Solutions">
    <meta name="twitter:description" content="Enterprise-grade Java architecture combined with scalable game server infrastructure.">
    <meta name="twitter:image" content="assets/images/synexus-logo.webp">
    <meta name="twitter:creator" content="@synexus">

    <meta name="theme-color" content="#2563EB">
    <meta name="msapplication-TileColor" content="#2563EB">


    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <title>Synexus | Enterprise Java & Game Solutions</title>

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

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        synexus: {
                            blue: '#2563EB',
                            cyan: '#06B6D4',
                            orange: '#F97316',
                            dark: '#0F172A',
                            light: '#F8FAFC',
                        }
                    },
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

    <script src="https://unpkg.com/lucide@latest"></script>

    <style>
        body { font-family: 'Poppins', sans-serif; }

        /* Gradient Text Effect */
        .text-gradient {
            background: linear-gradient(to right, #2563EB, #06B6D4, #F97316);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Smooth Fade-in Animation */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-synexus-light text-synexus-dark antialiased overflow-x-hidden">

    <nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 transition-all duration-300" id="navbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <div class="flex-shrink-0 flex items-center gap-3 cursor-pointer" onclick="window.scrollTo(0,0)">
                    <img class="h-12 w-auto hover:scale-105 transition-transform" src="assets/images/synexus-logo.webp" alt="Synexus Logo">
                    <span class="font-bold text-2xl tracking-tight text-slate-800 hidden sm:block">synexus</span>
                </div>

                <div class="hidden md:flex space-x-8 items-center">
                    <a href="#about" class="text-gray-600 hover:text-synexus-blue font-medium transition-colors">About</a>
                    <a href="#services" class="text-gray-600 hover:text-synexus-blue font-medium transition-colors">Solutions</a>
                    <a href="#tech" class="text-gray-600 hover:text-synexus-blue font-medium transition-colors">Technology</a>
                    <a href="#contact" class="px-5 py-2.5 rounded-full bg-slate-900 text-white font-medium hover:bg-synexus-blue transition-all shadow-lg hover:shadow-synexus-blue/30">
                        Get in Touch
                    </a>
                </div>

                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-btn" class="text-gray-600 hover:text-synexus-blue focus:outline-none">
                        <i data-lucide="menu" class="h-8 w-8"></i>
                    </button>
                </div>
            </div>
        </div>

        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 absolute w-full shadow-xl">
            <div class="px-4 pt-2 pb-6 space-y-1 text-center">
                <a href="#about" class="block px-3 py-3 text-gray-700 hover:text-synexus-blue font-medium">About</a>
                <a href="#services" class="block px-3 py-3 text-gray-700 hover:text-synexus-blue font-medium">Solutions</a>
                <a href="#tech" class="block px-3 py-3 text-gray-700 hover:text-synexus-blue font-medium">Technology</a>
                <a href="#contact" class="block px-3 py-3 mt-4 text-synexus-blue font-bold">Get in Touch</a>
            </div>
        </div>
    </nav>

    <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-synexus-blue/10 blur-3xl"></div>
        <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-synexus-cyan/10 blur-3xl"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center fade-in">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-synexus-blue text-sm font-semibold mb-6">
                <span class="w-2 h-2 rounded-full bg-synexus-orange animate-pulse"></span>
                Innovation in Java Backend
            </div>

            <h1 class="text-5xl md:text-7xl font-bold tracking-tight text-slate-900 mb-6 leading-tight">
                The central hub of your <br>
                <span class="text-gradient">Digital Infrastructure.</span>
            </h1>

            <p class="mt-4 max-w-2xl mx-auto text-xl text-gray-500 font-light">
                We bridge the robustness of <strong>Enterprise Java</strong> with the high-performance demands of scalable <strong>Game Servers</strong>.
            </p>

            <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
                <a href="#services" class="px-8 py-4 rounded-full bg-gradient-to-r from-synexus-blue to-synexus-cyan text-white font-bold text-lg shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 hover:-translate-y-1 transition-all">
                    Explore Solutions
                </a>
                <a href="https://discord.gg/yf5BxbQsQ9" target="_blank" class="px-8 py-4 rounded-full bg-white border border-gray-200 text-slate-700 font-bold text-lg hover:border-synexus-blue hover:text-synexus-blue transition-all flex items-center justify-center gap-2">
                    <i data-lucide="message-square" class="w-5 h-5"></i>
                    Discord Community
                </a>
            </div>
        </div>
    </section>

    <section id="about" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div class="fade-in">
                    <img src="https://images.unsplash.com/photo-1555099962-4199c345e5dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"
                         alt="Clean Code Architecture"
                         class="rounded-3xl shadow-2xl border-4 border-white/50 grayscale hover:grayscale-0 transition-all duration-500">
                </div>
                <div class="fade-in">
                    <h2 class="text-3xl font-bold text-slate-900 mb-6">More than Plugins. <br>Software Architecture.</h2>
                    <p class="text-lg text-gray-600 mb-6">
                        In the development market, <strong>Synexus</strong> stands as the link between Enterprise stability and Gaming creativity.
                    </p>
                    <p class="text-gray-600 mb-8">
                        We don't just write scripts. We develop distributed systems, asynchronous integrations, and optimized databases. Our philosophy is to treat your Minecraft server with the same seriousness as a banking system.
                    </p>

                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <div class="p-1 rounded bg-green-100 text-green-600"><i data-lucide="check" class="w-4 h-4"></i></div>
                            <span class="text-gray-700">Clean Architecture & SOLID Principles</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <div class="p-1 rounded bg-green-100 text-green-600"><i data-lucide="check" class="w-4 h-4"></i></div>
                            <span class="text-gray-700">High Performance (Zero Lag Focus)</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <div class="p-1 rounded bg-green-100 text-green-600"><i data-lucide="check" class="w-4 h-4"></i></div>
                            <span class="text-gray-700">Native Integration (Discord, Web, MySQL)</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="services" class="py-24 bg-slate-50 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-sm font-bold text-synexus-orange uppercase tracking-wider mb-2">Our Verticals</h2>
                <h3 class="text-4xl font-bold text-slate-900">What does Synexus build?</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 group fade-in">
                    <div class="w-16 h-16 rounded-2xl bg-blue-50 text-synexus-blue flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <i data-lucide="gamepad-2" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4">Game Plugins & Infra</h4>
                    <p class="text-gray-600 mb-6">
                        Solutions for Minecraft servers (Spigot/Paper/Velocity). Focused on management, network data synchronization, and administrative tools.
                    </p>
                    <ul class="text-sm text-gray-500 space-y-2 mb-8">
                        <li>• Cross-Server Sync (Redis/MySQL)</li>
                        <li>• Discord <-> Minecraft Integration</li>
                        <li>• Economy & Punishment Systems</li>
                    </ul>
                    <a href="#" class="text-synexus-blue font-semibold group-hover:translate-x-2 transition-transform inline-flex items-center">
                        View Products <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                    </a>
                </div>

                <div class="bg-white p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 group fade-in">
                    <div class="w-16 h-16 rounded-2xl bg-cyan-50 text-synexus-cyan flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <i data-lucide="server" class="w-8 h-8"></i>
                    </div>
                    <h4 class="text-2xl font-bold text-slate-900 mb-4">Corporate Java</h4>
                    <p class="text-gray-600 mb-6">
                        Robust Backend development for enterprises. RESTful APIs, Microservices, and business process automation using cutting-edge technologies.
                    </p>
                    <ul class="text-sm text-gray-500 space-y-2 mb-8">
                        <li>• Spring Boot Ecosystem</li>
                        <li>• Microservices Architecture</li>
                        <li>• Scalable & Secure APIs</li>
                    </ul>
                    <a href="#" class="text-synexus-cyan font-semibold group-hover:translate-x-2 transition-transform inline-flex items-center">
                        Consulting <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section id="tech" class="py-16 bg-white border-y border-gray-100">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-gray-400 font-semibold mb-8">POWERED BY MODERN STACK</p>
            <div class="flex flex-wrap justify-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
                <div class="flex items-center gap-2"><i data-lucide="coffee" class="w-6 h-6"></i> <span class="font-bold text-xl">Java 21</span></div>
                <div class="flex items-center gap-2"><i data-lucide="database" class="w-6 h-6"></i> <span class="font-bold text-xl">MySQL</span></div>
                <div class="flex items-center gap-2"><i data-lucide="zap" class="w-6 h-6"></i> <span class="font-bold text-xl">Redis</span></div>
                <div class="flex items-center gap-2"><i data-lucide="box" class="w-6 h-6"></i> <span class="font-bold text-xl">Docker</span></div>
                <div class="flex items-center gap-2"><i data-lucide="layers" class="w-6 h-6"></i> <span class="font-bold text-xl">Spring Boot</span></div>
                <div class="flex items-center gap-2"><i data-lucide="bot" class="w-6 h-6"></i> <span class="font-bold text-xl">JDA</span></div>
            </div>
        </div>
    </section>

    <section id="contact" class="bg-slate-900 text-white py-20 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-96 h-96 bg-synexus-blue/20 rounded-full blur-3xl -mr-20 -mt-20"></div>

        <div class="max-w-4xl mx-auto px-4 text-center relative z-10 fade-in">
            <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready to level up?</h2>
            <p class="text-gray-400 text-lg mb-10">
                Whether you need to optimize your server infrastructure or build an exclusive plugin.
                Synexus is the missing link in your project.
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="mailto:contact@synexus.dev" class="px-8 py-4 rounded-full bg-synexus-orange hover:bg-orange-600 text-white font-bold transition-colors">
                    Request a Quote
                </a>
                <a href="#" class="px-8 py-4 rounded-full border border-gray-600 hover:border-white hover:bg-white/10 transition-colors">
                    View Portfolio
                </a>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 mt-20 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
            <div class="flex items-center gap-2 mb-4 md:mb-0">
                <span class="font-bold text-xl text-white tracking-tight lowercase">synexus</span>
                <span>© <span id="year"></span>. All rights reserved.</span>
            </div>
            <div class="flex gap-6">
                <a href="#" class="hover:text-synexus-cyan transition-colors">Terms</a>
                <a href="#" class="hover:text-synexus-cyan transition-colors">Privacy</a>
                <a href="https://github.com/synexus-dev" class="hover:text-synexus-cyan transition-colors">GitHub</a>
                <a href="#" class="hover:text-synexus-cyan transition-colors">Twitter</a>
            </div>
        </div>
    </section>

    <script>

        lucide.createIcons();

        const btn = document.getElementById('mobile-menu-btn');
        const menu = document.getElementById('mobile-menu');

        btn.addEventListener('click', () => {
            menu.classList.toggle('hidden');
        });

        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });

        document.getElementById("year").textContent = new Date().getFullYear();
    </script>
</body>
</html>