atomnext/about.html at main · shaanlabs/atomnext · 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
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="AtomNext Solutions - Expert team building scalable SaaS platforms, AI automation, ERP systems, n8n workflows, and custom business software for modern enterprises.">
    <meta name="keywords"
        content="AtomNext, AI automation, n8n workflows, SaaS development, ERP systems, business automation, API integrations">
    <meta name="author" content="AtomNext Solutions">
    <meta name="robots" content="index, follow">
    <title>About AtomNext | AI & Automation Experts</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="mobile-first.css">
    <link rel="stylesheet" href="mobile-sidebar.css">
    <link rel="stylesheet" href="onboarding.css">
</head>

<body>
    <!-- Navigation -->
    <nav>
        <div class="container">
            <div class="logo">
                <a href="index.html" class="logo-link">
                    <div class="logo-container">
                        <span class="logo-atom">
                            <span class="atom-circle"></span>
                            <span class="atom-orbit">
                                <span class="electron"></span>
                            </span>
                            <span class="atom-orbit" style="transform: rotate(60deg)">
                                <span class="electron"></span>
                            </span>
                            <span class="atom-orbit" style="transform: rotate(-60deg)">
                                <span class="electron"></span>
                            </span>
                        </span>
                        <div class="logo-text-container">
                            <span class="logo-text">
                                <span class="text-atom">Atom</span>
                                <span class="text-next">Next</span>
                            </span>
                            <span class="logo-text-solutions">Solutions</span>
                            <span class="logo-glowing-line"></span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="nav-items">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html" class="active">About</a></li>
                    <li><a href="order.html">Request Service</a></li>
                </ul>
                <a href="book-call.html" class="btn">Book a Call</a>
            </div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="about-hero" class="hero" style="min-height: 60vh; padding: 100px 20px 60px;">
        <div class="container" style="text-align: center;">
            <h1 class="glowing-text" style="font-size: 3.5em; margin-bottom: 1rem;">
                About <span class="gradient-text">AtomNext</span>
            </h1>
            <p style="font-size: 1.3em; max-width: 700px; margin: 0 auto 2rem; color: rgba(255,255,255,0.85);">
                Building intelligent systems that scale. AI-driven automation and enterprise software for modern
                businesses.
            </p>
        </div>
    </section>

    <!-- Who We Are -->
    <section class="services" style="padding: 60px 0;">
        <div class="container">
            <h2 style="text-align: center; margin-bottom: 50px;">Who We Are</h2>
            <div class="service-box">
                <div class="service">
                    <i class="fas fa-rocket service-icon"></i>
                    <h3>Product-First Company</h3>
                    <p>We build software products, not just code. Scalable architecture, clean design, long-term
                        thinking.</p>
                </div>
                <div class="service">
                    <i class="fas fa-brain service-icon"></i>
                    <h3>Automation & AI Driven</h3>
                    <p>Automate everything. AI agents, n8n workflows, intelligent systems that work while you sleep.</p>
                </div>
                <div class="service">
                    <i class="fas fa-chart-line service-icon"></i>
                    <h3>Built for Scale</h3>
                    <p>From MVP to enterprise. We architect systems that grow with your business without breaking.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- What We Build -->
    <section class="technologies" style="background: #1a2a3d;">
        <div class="container">
            <h2>What We Build</h2>
            <p style="text-align: center; margin-bottom: 40px; color: rgba(255,255,255,0.8);">
                Production-grade systems for modern businesses
            </p>
            <div class="service-box">
                <div class="service">
                    <i class="fas fa-cloud service-icon"></i>
                    <h3>SaaS Platforms</h3>
                    <p>Multi-tenant architecture, billing, auth, admin panels</p>
                </div>
                <div class="service">
                    <i class="fas fa-network-wired service-icon"></i>
                    <h3>ERP & ERPNext</h3>
                    <p>Custom ERP systems, ERPNext implementation & customization</p>
                </div>
                <div class="service">
                    <i class="fas fa-users-cog service-icon"></i>
                    <h3>HRMS & CRM</h3>
                    <p>Employee management, customer tracking, sales pipelines</p>
                </div>
                <div class="service">
                    <i class="fas fa-briefcase service-icon"></i>
                    <h3>Custom Business Software</h3>
                    <p>Tailored solutions for unique business requirements</p>
                </div>
                <div class="service">
                    <i class="fas fa-robot service-icon"></i>
                    <h3>AI & Automation Systems</h3>
                    <p>Intelligent agents, chatbots, workflow automation</p>
                </div>
                <div class="service">
                    <i class="fas fa-bullhorn service-icon"></i>
                    <h3>Growth & Digital Solutions</h3>
                    <p>SEO, analytics, marketing automation, performance optimization</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Automation & Integrations -->
    <section class="process">
        <div class="container">
            <h2>Automation & Integrations</h2>
            <p style="text-align: center; margin-bottom: 50px; color: rgba(255,255,255,0.8);">
                Connect everything. Automate workflows. Build powerful integrations.
            </p>
            <div class="steps">
                <div class="step">
                    <div class="step-number"><i class="fab fa-node-js"></i></div>
                    <h3>n8n Workflows</h3>
                    <p>Custom automation workflows, event-driven systems, scheduled tasks, data sync, and intelligent
                        routing.</p>
                </div>
                <div class="step">
                    <div class="step-number"><i class="fas fa-plug"></i></div>
                    <h3>API Orchestration</h3>
                    <p>Connect CRMs, ERPs, payment gateways, messaging platforms. Build middleware that just works.</p>
                </div>
                <div class="step">
                    <div class="step-number"><i class="fas fa-bolt"></i></div>
                    <h3>Event-Driven Systems</h3>
                    <p>Webhooks, pub/sub, message queues. Real-time data processing and reactive architectures.</p>
                </div>
                <div class="step">
                    <div class="step-number"><i class="fas fa-cogs"></i></div>
                    <h3>Internal Automation</h3>
                    <p>Automate repetitive tasks, data entry, report generation, email campaigns, and business
                        processes.</p>
                </div>
                <div class="step">
                    <div class="step-number"><i class="fas fa-exchange-alt"></i></div>
                    <h3>Third-Party Integrations</h3>
                    <p>Stripe, Twilio, SendGrid, Slack, Google Workspace. Connect your entire tech stack.</p>
                </div>
                <div class="step">
                    <div class="step-number"><i class="fas fa-database"></i></div>
                    <h3>Data Pipelines</h3>
                    <p>ETL processes, data warehousing, analytics pipelines, and real-time data synchronization.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section class="team" style="background: #1a2a3d;">
        <div class="container">
            <h2>Why Choose AtomNext</h2>
            <p style="text-align: center; margin-bottom: 50px; color: rgba(255,255,255,0.8);">
                We're not consultants. We're builders.
            </p>
            <div class="team-members" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                <div class="member" style="text-align: center;">
                    <div
                        style="width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #ff6f61, #ff8a7f); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white;">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3>Clean Architecture</h3>
                    <p class="intro">SOLID principles, well-documented code, maintainable systems that don't become
                        legacy nightmares.</p>
                </div>
                <div class="member" style="text-align: center;">
                    <div
                        style="width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #ff6f61, #ff8a7f); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white;">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3>Scalable Systems</h3>
                    <p class="intro">Built to handle 10x growth. Microservices, caching, load balancing, database
                        optimization.</p>
                </div>
                <div class="member" style="text-align: center;">
                    <div
                        style="width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #ff6f61, #ff8a7f); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white;">
                        <i class="fas fa-life-ring"></i>
                    </div>
                    <h3>Long-Term Support</h3>
                    <p class="intro">We stick around. Ongoing maintenance, feature updates, performance monitoring, 24/7
                        support.</p>
                </div>
                <div class="member" style="text-align: center;">
                    <div
                        style="width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #ff6f61, #ff8a7f); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white;">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Security-First</h3>
                    <p class="intro">OWASP compliance, encryption, secure auth, regular audits. Your data is sacred.</p>
                </div>
                <div class="member" style="text-align: center;">
                    <div
                        style="width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #ff6f61, #ff8a7f); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white;">
                        <i class="fas fa-bullseye"></i>
                    </div>
                    <h3>Business-Focused</h3>
                    <p class="intro">We understand ROI, conversion rates, customer lifetime value. Tech serves business
                        goals.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="contact"
        style="background: linear-gradient(135deg, rgba(26, 42, 61, 0.95), rgba(15, 52, 96, 0.95)); padding: 80px 20px; position: relative; overflow: hidden;">
        <div
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 111, 97, 0.1) 0%, transparent 70%); pointer-events: none;">
        </div>
        <div class="container" style="position: relative; z-index: 1; text-align: center;">
            <h2 style="font-size: 2.8rem; margin-bottom: 20px;">Ready to Build Something Great?</h2>
            <p
                style="font-size: 1.2rem; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.9);">
                Let's discuss your project. Get a custom proposal within 24 hours.
            </p>
            <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
                <a href="order.html" class="btn" style="padding: 16px 40px; font-size: 1.2rem;">Request a Quote</a>
                <a href="book-call.html" class="btn"
                    style="padding: 16px 40px; font-size: 1.2rem; background: transparent; border: 2px solid #ff6f61;">Book
                    a Call</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>AtomNext Solutions</h3>
                    <p>Building intelligent systems that scale</p>
                </div>
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html#services">Services</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="order.html">Request Service</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Connect</h3>
                    <div class="social-icons">
                        <a href="https://www.linkedin.com/company/atom-next-ai/" target="_blank" aria-label="LinkedIn">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="https://www.instagram.com/atomnextai" target="_blank" aria-label="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" target="_blank" aria-label="GitHub">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 AtomNext Solutions. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile hamburger menu
        document.querySelector('.hamburger').addEventListener('click', function () {
            document.querySelector('.nav-items').classList.toggle('active');
            this.classList.toggle('active');
        });

        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                const href = this.getAttribute('href');
                if (href !== '#' && href.length > 1) {
                    const target = document.querySelector(href);
                    if (target) {
                        e.preventDefault();
                        target.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            });
        });
    </script>
    <script src="mobile-sidebar.js"></script>
    <script src="onboarding.js"></script>
</body>

</html>