Skip to content

Commit 21f3363

Browse files
futurestackintelfuturestackintel
authored
Add files via upload
1 parent bf46b9f commit 21f3363

1 file changed

Lines changed: 256 additions & 0 deletions

File tree

‎services.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
6+
<title>FutureStack Intelligence — Services</title>
7+
<link rel="stylesheet" href="shared.css">
8+
<style>
9+
.page-hero {
10+
position: relative;
11+
z-index: 1;
12+
background: linear-gradient(135deg, #04061a 0%, #060a1e 100%);
13+
padding: 64px 40px 48px;
14+
border-bottom: 1px solid var(--glass-border);
15+
text-align: center;
16+
}
17+
18+
.services-grid {
19+
display: grid;
20+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
21+
gap: 20px;
22+
margin-top: 0;
23+
}
24+
25+
.service-card {
26+
background: var(--glass);
27+
border: 1px solid var(--glass-border);
28+
border-radius: 6px;
29+
padding: 28px;
30+
cursor: pointer;
31+
transition: all 0.3s;
32+
position: relative;
33+
overflow: hidden;
34+
display: flex;
35+
flex-direction: column;
36+
}
37+
38+
.service-card::before {
39+
content:'';
40+
position:absolute;
41+
top:0;left:0;right:0;
42+
height:2px;
43+
background:linear-gradient(90deg,var(--cyan),var(--purple));
44+
transform:scaleX(0);
45+
transition:transform 0.3s;
46+
}
47+
48+
.service-card:hover {
49+
transform: translateY(-4px);
50+
border-color: rgba(0,234,255,0.3);
51+
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
52+
background: rgba(0,234,255,0.07);
53+
}
54+
55+
.service-card:hover::before { transform: scaleX(1); }
56+
57+
.s-icon { font-size: 36px; margin-bottom: 16px; display: block; }
58+
.service-card h3 { font-family: var(--font-head); font-size: 13px; color: white; margin-bottom: 10px; letter-spacing: 1px; }
59+
.service-card p { font-size: 14px; color: var(--muted); line-height: 1.7; font-weight: 300; flex: 1; margin-bottom: 20px; }
60+
61+
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
62+
63+
.btn-order {
64+
display: inline-flex;
65+
align-items: center;
66+
gap: 6px;
67+
background: linear-gradient(135deg, rgba(0,234,255,0.12), rgba(26,109,255,0.12));
68+
border: 1px solid rgba(0,234,255,0.4);
69+
color: var(--cyan);
70+
font-family: var(--font-head);
71+
font-size: 9px;
72+
letter-spacing: 1.5px;
73+
text-transform: uppercase;
74+
padding: 10px 16px;
75+
border-radius: 3px;
76+
font-weight: 700;
77+
transition: all 0.3s;
78+
}
79+
80+
.btn-order:hover, .service-card:hover .btn-order {
81+
background: linear-gradient(135deg, rgba(0,234,255,0.22), rgba(26,109,255,0.22));
82+
box-shadow: 0 0 16px rgba(0,234,255,0.3);
83+
}
84+
85+
.arrow-icon { transition: transform 0.3s; display: inline-block; }
86+
.service-card:hover .arrow-icon { transform: translateX(4px); }
87+
88+
@media (max-width: 768px) {
89+
.page-hero { padding: 48px 20px 36px; }
90+
.services-grid { grid-template-columns: 1fr; gap: 14px; }
91+
.service-card { padding: 22px; }
92+
}
93+
94+
@media (max-width: 480px) {
95+
.services-grid { grid-template-columns: 1fr; }
96+
}
97+
</style>
98+
</head>
99+
<body>
100+
101+
<nav class="navbar">
102+
<a href="index.html" class="nav-logo">
103+
<img src="logo.png" alt="FutureStack">
104+
<div class="nav-brand-text">FutureStack<span>Intelligence</span></div>
105+
</a>
106+
<ul class="nav-links">
107+
<li><a href="index.html">Home</a></li>
108+
<li><a href="services.html" class="active">Services</a></li>
109+
<li><a href="ebooks.html">Ebooks</a></li>
110+
<li><a href="courses.html">Courses</a></li>
111+
<li><a href="contact.html" class="nav-cta active">Work With Us</a></li>
112+
</ul>
113+
<div class="hamburger" id="ham"><span></span><span></span><span></span></div>
114+
</nav>
115+
116+
<div class="mobile-menu" id="mobileMenu">
117+
<a href="index.html">Home</a>
118+
<a href="services.html" class="active">Services</a>
119+
<a href="ebooks.html">Ebooks</a>
120+
<a href="courses.html">Courses</a>
121+
<a href="contact.html" class="m-cta">Work With Us</a>
122+
</div>
123+
124+
<div class="page-wrap">
125+
<div class="page-hero">
126+
<div class="section-tag" style="justify-content:center;">What We Do</div>
127+
<h1 class="section-title">Our <span>Services</span></h1>
128+
<p style="color:var(--muted);font-size:15px;max-width:500px;margin:0 auto;line-height:1.8;font-weight:300;">Click any available service to place your order directly. We respond within 24 hours.</p>
129+
</div>
130+
131+
<div class="page-wrap">
132+
<div class="container">
133+
<div class="services-grid">
134+
135+
<div class="service-card" onclick="openModal('AI Workflow Automation','Build end-to-end automated workflows using Make.com and n8n that eliminate repetitive manual tasks and run 24/7 without human input.')">
136+
<span class="s-icon">⚡</span>
137+
<h3>AI Workflow Automation</h3>
138+
<p>End-to-end automated workflows using Make.com and n8n that eliminate repetitive manual tasks, connect your tools, and run 24/7 without human input.</p>
139+
<div class="card-footer">
140+
<span class="badge-available">Available Now</span>
141+
<div class="btn-order">Order Now <span class="arrow-icon">→</span></div>
142+
</div>
143+
</div>
144+
145+
<div class="service-card" onclick="openModal('Shopify Store Automation','Abandoned cart recovery, order notifications, customer email sequences, inventory alerts and review requests — fully automated for your Shopify store.')">
146+
<span class="s-icon">🛒</span>
147+
<h3>Shopify Store Automation</h3>
148+
<p>Abandoned cart recovery, order notifications, customer email sequences, inventory alerts and review requests — fully automated for your Shopify store.</p>
149+
<div class="card-footer">
150+
<span class="badge-available">Available Now</span>
151+
<div class="btn-order">Order Now <span class="arrow-icon">→</span></div>
152+
</div>
153+
</div>
154+
155+
<div class="service-card" onclick="openModal('Cybersecurity Services','Vulnerability assessments, penetration testing, security audits and digital asset protection for businesses that take their security seriously.')">
156+
<span class="s-icon">🔐</span>
157+
<h3>Cybersecurity Services</h3>
158+
<p>Vulnerability assessments, penetration testing, security audits, and digital asset protection for businesses that take their security seriously.</p>
159+
<div class="card-footer">
160+
<span class="badge-available">Available Now</span>
161+
<div class="btn-order">Order Now <span class="arrow-icon">→</span></div>
162+
</div>
163+
</div>
164+
165+
<div class="service-card" onclick="openModal('AI Chatbot & Support Systems','Intelligent AI-powered chatbots for websites and stores that handle customer queries, qualify leads, and respond instantly around the clock.')">
166+
<span class="s-icon">🤖</span>
167+
<h3>AI Chatbot & Support Systems</h3>
168+
<p>Intelligent AI-powered chatbots for websites and stores that handle customer queries, qualify leads, and respond instantly around the clock.</p>
169+
<div class="card-footer">
170+
<span class="badge-available">Available Now</span>
171+
<div class="btn-order">Order Now <span class="arrow-icon">→</span></div>
172+
</div>
173+
</div>
174+
175+
<div class="service-card" onclick="openModal('Cloud Computing & Cloud Security','Cloud infrastructure setup, migration, management and security hardening to scale your business safely and efficiently in the cloud.')">
176+
<span class="s-icon">☁️</span>
177+
<h3>Cloud Computing & Cloud Security</h3>
178+
<p>Cloud infrastructure setup, migration, management and security hardening — scale your business operations safely and efficiently in the cloud.</p>
179+
<div class="card-footer">
180+
<span class="badge-available">Available Now</span>
181+
<div class="btn-order">Order Now <span class="arrow-icon">→</span></div>
182+
</div>
183+
</div>
184+
185+
<div class="service-card" onclick="openModal('Data & Reporting Automation','Automated data collection, processing and reporting systems that give you business intelligence without manual spreadsheet work.')">
186+
<span class="s-icon">📊</span>
187+
<h3>Data & Reporting Automation</h3>
188+
<p>Automated data collection, processing, and reporting systems that give you business intelligence without manual spreadsheet work.</p>
189+
<div class="card-footer">
190+
<span class="badge-available">Available Now</span>
191+
<div class="btn-order">Order Now <span class="arrow-icon">→</span></div>
192+
</div>
193+
</div>
194+
195+
</div>
196+
</div>
197+
</div>
198+
</div>
199+
200+
<!-- ORDER MODAL -->
201+
<div class="modal-overlay" id="orderModal">
202+
<div class="modal-box">
203+
<button class="modal-close" onclick="closeModal()">✕</button>
204+
<div id="mForm">
205+
<div class="modal-tag">Service Order</div>
206+
<div class="modal-title" id="mTitle"></div>
207+
<div class="modal-desc" id="mDesc"></div>
208+
<form action="https://formspree.io/f/xbdqnerv" method="POST" onsubmit="submitModal(event)">
209+
<input type="hidden" name="service" id="mService" />
210+
<div class="form-group"><label class="form-label">Your Name</label><input class="form-input" type="text" name="name" placeholder="John Smith" required /></div>
211+
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input" type="email" name="email" placeholder="john@example.com" required /></div>
212+
<div class="form-group">
213+
<label class="form-label">Budget Range</label>
214+
<select class="form-input" name="budget">
215+
<option value="">Select range...</option>
216+
<option>Under $100</option><option>$100 – $500</option>
217+
<option>$500 – $1,000</option><option>$1,000 – $3,000</option><option>$3,000+</option>
218+
</select>
219+
</div>
220+
<div class="form-group"><label class="form-label">Project Details</label><textarea class="form-input" name="message" placeholder="Describe what you need, your timeline, any requirements..." required></textarea></div>
221+
<button type="submit" class="btn-submit">Send Order Request →</button>
222+
</form>
223+
</div>
224+
<div class="modal-success" id="mSuccess">
225+
<span class="s-icon">✅</span>
226+
<h3>Request Sent!</h3>
227+
<p>We received your order for <strong id="mSuccessService"></strong>. We'll reply within 24 hours.</p>
228+
</div>
229+
</div>
230+
</div>
231+
232+
<footer class="footer">
233+
<div class="footer-inner">
234+
<div class="footer-brand"><img src="logo.png" alt="FutureStack"><div class="footer-brand-name">FutureStack Intelligence<span>© 2026 All Rights Reserved</span></div></div>
235+
<div class="footer-links">
236+
<a href="index.html">Home</a><a href="services.html">Services</a><a href="ebooks.html">Ebooks</a>
237+
<a href="courses.html">Courses</a><a href="contact.html">Contact</a>
238+
<a href="https://x.com/FUTURESTACK001" target="_blank">X / Twitter</a>
239+
<a href="https://www.linkedin.com/in/futurestackintelligence" target="_blank">LinkedIn</a>
240+
</div>
241+
<div class="footer-copy">Built with precision. Delivered globally.</div>
242+
</div>
243+
</footer>
244+
245+
<div class="bottom-nav">
246+
<div class="bottom-nav-inner">
247+
<a href="index.html" class="bnav-item"><span class="bnav-icon">🏠</span><span class="bnav-label">Home</span></a>
248+
<a href="services.html" class="bnav-item active"><span class="bnav-icon">⚡</span><span class="bnav-label">Services</span></a>
249+
<a href="ebooks.html" class="bnav-item"><span class="bnav-icon">📚</span><span class="bnav-label">Ebooks</span></a>
250+
<a href="contact.html" class="bnav-item"><span class="bnav-icon">✉️</span><span class="bnav-label">Contact</span></a>
251+
</div>
252+
</div>
253+
254+
<script src="shared.js"></script>
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)