Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FELIXIOTECH | Our Services</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Orbitron:wght@400;500;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> | |
| <style> | |
| /* ===== GLOBAL STYLES ===== */ | |
| :root { | |
| --primary: #6a11cb; | |
| --secondary: #2575fc; | |
| --accent: #00c9ff; | |
| --accent2: #ff00cc; | |
| --dark: #0a0a1a; | |
| --darker: #050515; | |
| --light: #f8f9ff; | |
| --gray: #8a8da8; | |
| --success: #00e676; | |
| --warning: #ffca28; | |
| --error: #ff5252; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .particles-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -3; | |
| } | |
| .welcome-text-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .welcome-text { | |
| position: absolute; | |
| font-size: 10rem; | |
| font-weight: 900; | |
| font-family: 'Orbitron', sans-serif; | |
| text-transform: uppercase; | |
| animation: floatText 15s infinite ease-in-out; | |
| white-space: nowrap; | |
| letter-spacing: 1rem; | |
| user-select: none; | |
| text-shadow: 0 0 20px rgba(0, 201, 255, 0.5); | |
| opacity: 0.1; | |
| transform: translateZ(50px); | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 30px; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 25px 0; | |
| z-index: 100; | |
| transition: all 0.4s ease; | |
| backdrop-filter: blur(12px); | |
| background: rgba(10, 10, 26, 0.85); | |
| border-bottom: 1px solid rgba(106, 17, 203, 0.3); | |
| box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| header.scrolled { | |
| padding: 15px 0; | |
| background: rgba(10, 10, 26, 0.98); | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| text-decoration: none; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .logo-icon { | |
| width: 55px; | |
| height: 55px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| animation: pulse 3s infinite alternate; | |
| box-shadow: 0 0 25px rgba(106, 17, 203, 0.6); | |
| } | |
| .logo-icon .f { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| font-size: 32px; | |
| color: white; | |
| position: relative; | |
| } | |
| .logo-text { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| font-size: 32px; | |
| background: linear-gradient(to right, var(--accent), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: 1px; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 35px; | |
| } | |
| nav a { | |
| color: var(--light); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 18px; | |
| position: relative; | |
| padding: 8px 0; | |
| transition: color 0.3s ease; | |
| } | |
| nav a:hover, nav a.active { | |
| color: var(--accent); | |
| text-shadow: 0 0 15px rgba(0, 201, 255, 0.7); | |
| } | |
| nav a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 3px; | |
| background: linear-gradient(to right, var(--primary), var(--accent)); | |
| transition: width 0.4s ease; | |
| border-radius: 3px; | |
| } | |
| nav a:hover::after, nav a.active::after { | |
| width: 100%; | |
| } | |
| /* Services Section */ | |
| .services { | |
| padding: 140px 0; | |
| position: relative; | |
| background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%); | |
| } | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 40px; | |
| position: relative; | |
| z-index: 2; | |
| margin-top: 60px; | |
| } | |
| .service-card { | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 25px; | |
| padding: 40px 30px; | |
| text-align: center; | |
| transition: all 0.5s ease; | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(106, 17, 203, 0.25); | |
| cursor: pointer; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-15px) rotateX(5deg); | |
| background: rgba(106, 17, 203, 0.15); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .service-icon { | |
| font-size: 60px; | |
| margin-bottom: 25px; | |
| color: var(--accent); | |
| transition: transform 0.5s ease; | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.2) rotate(5deg); | |
| } | |
| .service-card h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 20px; | |
| color: var(--light); | |
| } | |
| .service-card p { | |
| color: var(--gray); | |
| margin-bottom: 25px; | |
| line-height: 1.7; | |
| } | |
| .service-link { | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-weight: 600; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .service-link:hover { | |
| gap: 15px; | |
| text-shadow: 0 0 15px rgba(0, 201, 255, 0.7); | |
| } | |
| /* ===== FIXED MODAL STYLES - PROPER TEXT WRAPPING ===== */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(5, 5, 21, 0.96); | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| padding: 0px; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal-container { | |
| background: linear-gradient(135deg, rgba(10,10,26,0.98), rgba(5,5,21,0.98)); | |
| border-radius: 35px; | |
| border: 1px solid var(--accent); | |
| width: 100%; | |
| max-width: 950px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| position: relative; | |
| padding: 40px 45px; | |
| box-shadow: 0 30px 60px rgba(0,0,0,0.6); | |
| animation: modalFadeIn 0.4s ease; | |
| } | |
| .modal-container p { | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| white-space: normal; | |
| line-height: 1.7; | |
| } | |
| .modal-container .modal-section p { | |
| word-break: break-word; | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: 20px; | |
| right: 25px; | |
| font-size: 32px; | |
| font-weight: 300; | |
| color: var(--gray); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| line-height: 1; | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.05); | |
| z-index: 10; | |
| } | |
| .modal-close:hover { | |
| color: var(--accent); | |
| background: rgba(0,201,255,0.15); | |
| transform: rotate(90deg); | |
| } | |
| .modal-icon { | |
| font-size: 4rem; | |
| color: var(--accent); | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .modal-title { | |
| font-size: 2.5rem; | |
| font-family: 'Orbitron', sans-serif; | |
| background: linear-gradient(to right, var(--accent), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 25px; | |
| text-align: center; | |
| word-break: keep-all; | |
| } | |
| .modal-section { | |
| margin-bottom: 30px; | |
| border-left: 3px solid var(--accent); | |
| padding-left: 20px; | |
| } | |
| .modal-section h4 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| color: var(--accent); | |
| } | |
| .features-list, .tech-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| list-style: none; | |
| margin-top: 10px; | |
| padding-left: 0; | |
| } | |
| .features-list li, .tech-list li { | |
| background: rgba(0,201,255,0.1); | |
| padding: 8px 18px; | |
| border-radius: 40px; | |
| font-size: 0.9rem; | |
| word-break: keep-all; | |
| white-space: nowrap; | |
| } | |
| .pricing-grid-modal { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .price-card-modal { | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 20px; | |
| padding: 20px; | |
| flex: 1; | |
| text-align: center; | |
| min-width: 160px; | |
| } | |
| .price-card-modal h5 { | |
| font-size: 1.3rem; | |
| color: var(--accent); | |
| } | |
| .price-card-modal .price { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| margin: 10px 0; | |
| } | |
| .modal-cta { | |
| display: inline-block; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| padding: 12px 30px; | |
| border-radius: 40px; | |
| color: white; | |
| text-decoration: none; | |
| font-weight: bold; | |
| margin-top: 20px; | |
| margin-right: 15px; | |
| transition: 0.3s; | |
| } | |
| .modal-cta:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(106,17,203,0.4); | |
| } | |
| .modal-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .modal-container::-webkit-scrollbar-track { | |
| background: var(--dark); | |
| border-radius: 10px; | |
| } | |
| .modal-container::-webkit-scrollbar-thumb { | |
| background: var(--accent); | |
| border-radius: 10px; | |
| } | |
| @keyframes modalFadeIn { | |
| from { transform: scale(0.96); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| /* Footer */ | |
| footer { | |
| background: rgba(5, 5, 15, 0.98); | |
| padding: 80px 0 40px; | |
| border-top: 1px solid rgba(106, 17, 203, 0.3); | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 50px; | |
| margin-bottom: 60px; | |
| } | |
| .footer-logo p { | |
| color: var(--gray); | |
| line-height: 1.8; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 18px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| color: var(--gray); | |
| font-size: 22px; | |
| transition: 0.3s; | |
| } | |
| .social-links a:hover { | |
| color: var(--accent); | |
| } | |
| .footer-links h4 { | |
| font-size: 1.5rem; | |
| margin-bottom: 30px; | |
| font-family: 'Orbitron', sans-serif; | |
| background: linear-gradient(to right, var(--accent), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 18px; | |
| } | |
| .footer-links a { | |
| color: var(--gray); | |
| text-decoration: none; | |
| transition: 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .footer-links a:hover { | |
| color: var(--accent); | |
| transform: translateX(5px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 40px; | |
| border-top: 1px solid rgba(106, 17, 203, 0.2); | |
| color: var(--gray); | |
| } | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 24px; | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.4s ease; | |
| z-index: 99; | |
| } | |
| .scroll-top.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .chat-bubble { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 30px; | |
| width: 70px; | |
| height: 70px; | |
| background: linear-gradient(135deg, var(--accent), var(--secondary)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 28px; | |
| cursor: pointer; | |
| z-index: 99; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(106, 17, 203, 0.7);} | |
| 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(106, 17, 203, 0);} | |
| 100% { transform: scale(0.95);} | |
| } | |
| @keyframes floatText { | |
| 0% { transform: translate(-50%, -50%) rotateX(0deg); } | |
| 100% { transform: translate(-50%, -50%) rotateX(360deg); } | |
| } | |
| /* Responsive Fixes for Modal Text */ | |
| @media (max-width: 992px) { | |
| .modal-container { padding: 30px 30px; max-height: 80vh; } | |
| .modal-title { font-size: 2rem; } | |
| .modal-section h4 { font-size: 1.3rem; } | |
| } | |
| @media (max-width: 768px) { | |
| .container { padding: 0 20px; } | |
| .services-grid { gap: 25px; } | |
| .pricing-grid-modal { flex-direction: column; } | |
| .modal-container { padding: 25px 20px; margin: 10px; max-height: 85vh; } | |
| .modal-title { font-size: 1.6rem; text-align: center; } | |
| .modal-close { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 28px; } | |
| .modal-cta { display: block; margin-right: 0; margin-bottom: 12px; text-align: center; } | |
| .modal-section { padding-left: 12px; } | |
| .modal-section h4 { font-size: 1.2rem; } | |
| .modal-container p { font-size: 0.9rem; } | |
| .features-list li, .tech-list li { white-space: normal; word-break: break-word; text-align: center; } | |
| } | |
| @media (max-width: 480px) { | |
| .modal-container { padding: 20px 15px; } | |
| .features-list li, .tech-list li { font-size: 0.75rem; padding: 6px 10px; } | |
| .price-card-modal .price { font-size: 1.4rem; } | |
| .price-card-modal h5 { font-size: 1.1rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="welcome-text-container"> | |
| <div class="welcome-text">FELIXIOTECH SERVICES</div> | |
| </div> | |
| <div id="particles-bg" class="particles-bg"></div> | |
| <header id="header"> | |
| <div class="container header-container"> | |
| <a href="index.html" class="logo"> | |
| <div class="logo-icon"><span class="f">F</span></div> | |
| <span class="logo-text">FELIXIOTECH</span> | |
| </a> | |
| <nav> | |
| <ul> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="services.html" class="active">Services</a></li> | |
| <li><a href="pricing.html">Pricing</a></li> | |
| <li><a href="portfolio.html">Portfolio</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <section class="services" id="services"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Our Comprehensive Services</h2> | |
| <p>Specialized solutions to drive your digital transformation</p> | |
| </div> | |
| <div class="services-grid" id="servicesGrid"> | |
| <div class="service-card" data-service="web"> | |
| <i class="fas fa-laptop-code service-icon"></i> | |
| <h3>Web Development</h3> | |
| <p>Custom websites and web applications built with cutting-edge technologies for optimal performance and user experience.</p> | |
| <div class="service-link">Learn More <i class="fas fa-arrow-right"></i></div> | |
| </div> | |
| <div class="service-card" data-service="mobile"> | |
| <i class="fas fa-mobile-alt service-icon"></i> | |
| <h3>Mobile Applications</h3> | |
| <p>Native and cross-platform mobile apps designed to engage users and deliver exceptional performance on all devices.</p> | |
| <div class="service-link">Learn More <i class="fas fa-arrow-right"></i></div> | |
| </div> | |
| <div class="service-card" data-service="cloud"> | |
| <i class="fas fa-cloud service-icon"></i> | |
| <h3>Cloud Solutions</h3> | |
| <p>Secure and scalable cloud infrastructure tailored to your business needs, ensuring reliability and cost-efficiency.</p> | |
| <div class="service-link">Learn More <i class="fas fa-arrow-right"></i></div> | |
| </div> | |
| <div class="service-card" data-service="ai"> | |
| <i class="fas fa-robot service-icon"></i> | |
| <h3>AI & Automation</h3> | |
| <p>Intelligent systems that automate processes, analyze data, and deliver actionable insights for smarter decisions.</p> | |
| <div class="service-link">Learn More <i class="fas fa-arrow-right"></i></div> | |
| </div> | |
| <div class="service-card" data-service="security"> | |
| <i class="fas fa-shield-alt service-icon"></i> | |
| <h3>Cyber Security</h3> | |
| <p>Comprehensive security solutions to protect your data, infrastructure, and users from evolving threats.</p> | |
| <div class="service-link">Learn More <i class="fas fa-arrow-right"></i></div> | |
| </div> | |
| <div class="service-card" data-service="analytics"> | |
| <i class="fas fa-chart-line service-icon"></i> | |
| <h3>Data Analytics</h3> | |
| <p>Transform raw data into valuable insights that drive innovation, efficiency, and business growth.</p> | |
| <div class="service-link">Learn More <i class="fas fa-arrow-right"></i></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <a href="index.html" class="logo"><div class="logo-icon"><span class="f">F</span></div><span class="logo-text">FELIXIOTECH</span></a> | |
| <p>Transforming businesses through innovative software solutions since 2023. We build the technology that powers your vision.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| <a href="#"><i class="fab fa-dribbble"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="services.html">Services</a></li> | |
| <li><a href="pricing.html">Pricing</a></li> | |
| <li><a href="portfolio.html">Portfolio</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Our Services</h4> | |
| <ul> | |
| <li><a href="#" class="service-quick-link" data-service="web">Web Development</a></li> | |
| <li><a href="#" class="service-quick-link" data-service="mobile">Mobile Apps</a></li> | |
| <li><a href="#" class="service-quick-link" data-service="cloud">Cloud Solutions</a></li> | |
| <li><a href="#" class="service-quick-link" data-service="ai">AI & Automation</a></li> | |
| <li><a href="#" class="service-quick-link" data-service="security">Cyber Security</a></li> | |
| <li><a href="#" class="service-quick-link" data-service="analytics">Data Analytics</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Resources</h4> | |
| <ul> | |
| <li><a href="#"><i class="fas fa-chevron-right"></i> Blog</a></li> | |
| <li><a href="#"><i class="fas fa-chevron-right"></i> Case Studies</a></li> | |
| <li><a href="#"><i class="fas fa-chevron-right"></i> Support</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"><p>© 2025 Felixio Technologies. All rights reserved.</p></div> | |
| </div> | |
| </footer> | |
| <div class="scroll-top" id="scrollTop"><i class="fas fa-arrow-up"></i></div> | |
| <div class="chat-bubble" id="chatBubble"><i class="fas fa-comments"></i></div> | |
| <!-- Modal Structure --> | |
| <div id="serviceModal" class="modal-overlay"> | |
| <div class="modal-container"> | |
| <div class="modal-close">×</div> | |
| <div id="modalContent"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Service data - extensive content for each service (same as before) | |
| const serviceData = { | |
| web: { | |
| name: "Web Development", | |
| icon: "fas fa-laptop-code", | |
| overview: "We build high-performance, scalable websites and web applications tailored to your business goals. From corporate sites to complex SaaS platforms, we use modern frameworks to deliver exceptional user experiences.", | |
| features: [ | |
| "Responsive & Mobile-First Design", | |
| "Progressive Web Apps (PWA)", | |
| "E-commerce Solutions", | |
| "CMS Integration", | |
| "API Development", | |
| "Performance Optimization" | |
| ], | |
| technologies: ["React", "Vue.js", "Angular", "Node.js", "Python/Django", "Laravel", "GraphQL"], | |
| process: "Discovery → Wireframing → Agile Development → Testing → Deployment → Ongoing Support", | |
| pricing: [ | |
| { name: "Starter Website", price: "$2,499", desc: "5 pages, responsive, basic SEO" }, | |
| { name: "Business Web App", price: "$7,999", desc: "Custom features, database" }, | |
| { name: "Enterprise Platform", price: "$15,000+", desc: "Full-scale, API integrations" } | |
| ], | |
| caseStudy: "A logistics startup increased lead generation by 240% after our custom web portal.", | |
| ctaLink: "get-started.html?package=Starter" | |
| }, | |
| mobile: { | |
| name: "Mobile Applications", | |
| icon: "fas fa-mobile-alt", | |
| overview: "We develop native and cross-platform mobile apps that deliver seamless performance, stunning UI, and offline capabilities. Whether you need iOS, Android, or both, our apps are built to engage users and drive retention.", | |
| features: [ | |
| "Native iOS (Swift) & Android (Kotlin)", | |
| "Cross-Platform (React Native, Flutter)", | |
| "Push Notifications & Real-Time Sync", | |
| "Offline Mode & Local Storage", | |
| "Biometric Authentication", | |
| "App Store Optimization" | |
| ], | |
| technologies: ["React Native", "Flutter", "Swift", "Kotlin", "Firebase", "GraphQL"], | |
| process: "Ideation → UX/UI Design → Agile Development → Beta Testing → App Store Submission", | |
| pricing: [ | |
| { name: "Basic App", price: "$8,000", desc: "Single platform, essential features" }, | |
| { name: "Cross-Platform App", price: "$15,000", desc: "Both iOS & Android" }, | |
| { name: "Enterprise App", price: "$25,000+", desc: "Complex logic, backend integration" } | |
| ], | |
| caseStudy: "A health-tech startup achieved 150k downloads in 3 months with our telemedicine app.", | |
| ctaLink: "get-started.html?package=Professional" | |
| }, | |
| cloud: { | |
| name: "Cloud Solutions", | |
| icon: "fas fa-cloud", | |
| overview: "We design and implement secure, scalable cloud architectures on AWS, Azure, or Google Cloud. Our services include cloud migration, serverless computing, container orchestration, and DevOps automation.", | |
| features: [ | |
| "Cloud Migration Strategy", | |
| "Infrastructure as Code", | |
| "CI/CD Pipelines", | |
| "Monitoring & Auto-Scaling", | |
| "Disaster Recovery", | |
| "Cost Optimization" | |
| ], | |
| technologies: ["AWS", "Azure", "Google Cloud", "Docker", "Kubernetes", "Terraform"], | |
| process: "Assessment → Architecture Design → Pilot Migration → Full Cutover → Managed Services", | |
| pricing: [ | |
| { name: "Cloud Migration", price: "Custom", desc: "Based on workload complexity" }, | |
| { name: "Managed Cloud", price: "$1,500/month", desc: "Monitoring, backups" }, | |
| { name: "DevOps Setup", price: "$5,000", desc: "CI/CD pipeline" } | |
| ], | |
| caseStudy: "A fintech company reduced infrastructure costs by 40% after our AWS migration.", | |
| ctaLink: "get-started.html?package=Enterprise" | |
| }, | |
| ai: { | |
| name: "AI & Automation", | |
| icon: "fas fa-robot", | |
| overview: "We build intelligent systems using machine learning, natural language processing, and robotic process automation. From chatbots to predictive analytics, we help you automate workflows.", | |
| features: [ | |
| "Custom ML Models", | |
| "Chatbots & Virtual Assistants", | |
| "Image Recognition", | |
| "Process Automation (RPA)", | |
| "Predictive Maintenance", | |
| "Recommendation Engines" | |
| ], | |
| technologies: ["Python", "TensorFlow", "PyTorch", "OpenAI API", "UiPath"], | |
| process: "Problem Definition → Data Collection → Model Training → Integration → Monitoring", | |
| pricing: [ | |
| { name: "Chatbot Integration", price: "$4,000", desc: "AI-powered customer support" }, | |
| { name: "Custom ML Model", price: "$12,000+", desc: "Tailored model" }, | |
| { name: "RPA Implementation", price: "$8,000+", desc: "Process automation" } | |
| ], | |
| caseStudy: "An e-commerce company reduced support response time by 85% with our AI chatbot.", | |
| ctaLink: "get-started.html?package=Enterprise" | |
| }, | |
| security: { | |
| name: "Cyber Security", | |
| icon: "fas fa-shield-alt", | |
| overview: "We offer end-to-end cybersecurity services including vulnerability assessments, penetration testing, security audits, and managed SOC. Achieve compliance and implement zero-trust architectures.", | |
| features: [ | |
| "Vulnerability Scanning", | |
| "Penetration Testing", | |
| "Security Awareness Training", | |
| "SIEM Implementation", | |
| "Incident Response", | |
| "Compliance Audits" | |
| ], | |
| technologies: ["Nessus", "Burp Suite", "Splunk", "CrowdStrike", "Azure Sentinel"], | |
| process: "Risk Assessment → Penetration Testing → Remediation → Continuous Monitoring", | |
| pricing: [ | |
| { name: "Vulnerability Assessment", price: "$3,000", desc: "Scan + report" }, | |
| { name: "Penetration Test", price: "$7,000+", desc: "Manual ethical hacking" }, | |
| { name: "Managed SOC", price: "$2,500/month", desc: "24/7 monitoring" } | |
| ], | |
| caseStudy: "A healthcare provider achieved HIPAA compliance and reduced incidents by 95%.", | |
| ctaLink: "get-started.html?package=Enterprise" | |
| }, | |
| analytics: { | |
| name: "Data Analytics", | |
| icon: "fas fa-chart-line", | |
| overview: "We transform raw data into actionable insights through data warehousing, business intelligence dashboards, and predictive analytics. Consolidate data from multiple sources and visualize KPIs.", | |
| features: [ | |
| "Data Pipeline Construction", | |
| "Data Warehousing", | |
| "Interactive Dashboards", | |
| "Predictive Analytics", | |
| "Customer Segmentation", | |
| "Real-Time Analytics" | |
| ], | |
| technologies: ["SQL", "Python", "Tableau", "Power BI", "Snowflake", "dbt"], | |
| process: "Data Audit → Data Modeling → Dashboard Development → Training → Optimization", | |
| pricing: [ | |
| { name: "Dashboard Setup", price: "$5,000", desc: "Up to 10 dashboards" }, | |
| { name: "Data Warehouse", price: "$12,000+", desc: "ETL pipelines" }, | |
| { name: "Advanced Analytics", price: "$20,000+", desc: "Predictive models" } | |
| ], | |
| caseStudy: "A retail chain reduced overstock by 30% using our inventory analytics solution.", | |
| ctaLink: "get-started.html?package=Professional" | |
| } | |
| }; | |
| // Modal functionality | |
| const modal = document.getElementById('serviceModal'); | |
| const modalContent = document.getElementById('modalContent'); | |
| const closeModalBtn = document.querySelector('.modal-close'); | |
| function openModal(serviceKey) { | |
| const service = serviceData[serviceKey]; | |
| if (!service) return; | |
| const pricingHtml = service.pricing.map(p => ` | |
| <div class="price-card-modal"> | |
| <h5>${p.name}</h5> | |
| <div class="price">${p.price}</div> | |
| <p>${p.desc}</p> | |
| </div> | |
| `).join(''); | |
| const featuresHtml = `<ul class="features-list">${service.features.map(f => `<li><i class="fas fa-check-circle" style="color: var(--success); margin-right: 8px;"></i> ${f}</li>`).join('')}</ul>`; | |
| const techHtml = `<ul class="tech-list">${service.technologies.map(t => `<li>${t}</li>`).join('')}</ul>`; | |
| modalContent.innerHTML = ` | |
| <div class="modal-icon"><i class="${service.icon}"></i></div> | |
| <h2 class="modal-title">${service.name}</h2> | |
| <div class="modal-section"> | |
| <h4>Overview</h4> | |
| <p>${service.overview}</p> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>Key Features</h4> | |
| ${featuresHtml} | |
| </div> | |
| <div class="modal-section"> | |
| <h4>Technologies We Use</h4> | |
| ${techHtml} | |
| </div> | |
| <div class="modal-section"> | |
| <h4>Our Process</h4> | |
| <p>${service.process}</p> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>Investment Plans</h4> | |
| <div class="pricing-grid-modal">${pricingHtml}</div> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>Success Story</h4> | |
| <p><i class="fas fa-quote-left" style="color: var(--accent); margin-right: 10px;"></i> ${service.caseStudy}</p> | |
| </div> | |
| <div> | |
| <a href="${service.ctaLink}" class="modal-cta">Request a Quote <i class="fas fa-arrow-right"></i></a> | |
| <a href="contact.html" class="modal-cta" style="background: transparent; border: 2px solid var(--accent);">Contact Sales</a> | |
| </div> | |
| `; | |
| modal.classList.add('active'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeModal() { | |
| modal.classList.remove('active'); | |
| document.body.style.overflow = ''; | |
| } | |
| // Event listeners | |
| document.querySelectorAll('.service-card').forEach(card => { | |
| const serviceKey = card.getAttribute('data-service'); | |
| card.addEventListener('click', (e) => { | |
| if (!e.target.closest('.service-link')) { | |
| openModal(serviceKey); | |
| } | |
| }); | |
| const serviceLink = card.querySelector('.service-link'); | |
| if (serviceLink) { | |
| serviceLink.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| openModal(serviceKey); | |
| }); | |
| } | |
| }); | |
| document.querySelectorAll('.service-quick-link').forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| openModal(link.getAttribute('data-service')); | |
| }); | |
| }); | |
| closeModalBtn.addEventListener('click', closeModal); | |
| modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); | |
| document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('active')) closeModal(); }); | |
| // Header scroll | |
| const header = document.getElementById('header'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) header.classList.add('scrolled'); | |
| else header.classList.remove('scrolled'); | |
| const scrollBtn = document.getElementById('scrollTop'); | |
| if (window.scrollY > 400) scrollBtn.classList.add('visible'); | |
| else scrollBtn.classList.remove('visible'); | |
| }); | |
| document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); | |
| document.getElementById('chatBubble')?.addEventListener('click', () => alert("💬 FelixioTech assistant: How can we help you?")); | |
| // Particles | |
| (function initParticles() { | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('particles-bg').appendChild(renderer.domElement); | |
| const geometry = new THREE.BufferGeometry(); | |
| const count = 5000; | |
| const positions = new Float32Array(count * 3); | |
| for (let i = 0; i < count * 3; i += 3) { | |
| positions[i] = (Math.random() - 0.5) * 200; | |
| positions[i+1] = (Math.random() - 0.5) * 100; | |
| positions[i+2] = (Math.random() - 0.5) * 80; | |
| } | |
| geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); | |
| const material = new THREE.PointsMaterial({ color: 0x6a11cb, size: 0.12, transparent: true, opacity: 0.5 }); | |
| const points = new THREE.Points(geometry, material); | |
| scene.add(points); | |
| camera.position.z = 25; | |
| function animate() { requestAnimationFrame(animate); points.rotation.y += 0.002; points.rotation.x += 0.001; renderer.render(scene, camera); } | |
| animate(); | |
| window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); | |
| })(); | |
| gsap.utils.toArray('.service-card').forEach(card => { | |
| gsap.from(card, { scrollTrigger: { trigger: card, start: 'top 90%' }, opacity: 0, y: 50, duration: 0.8 }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |