<!DOCTYPE html> <html lang="en" style="scroll-behavior: smooth;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SIGALIX | AI-First Software Engineering & SaaS Innovation from Africa</title>
<!-- SEO & Pitch Meta Tags --> <meta name="description" content="Sigalix is an AI-first technology platform and SaaS vendor based in Yaoundé, Cameroon. We engineer intelligent software, scalable cloud infrastructure, and world-class digital products connecting Africa to the global stage."> <meta name="keywords" content="Sigalix, AI Startup Africa, Software Engineering Cameroon, SaaS Vendor, AWS Startup, VC Backed Tech, Syllabus.cm, LoungeOS.app, IT Consultancy, Mission, Vision"> <meta name="author" content="Sunyin Elisbrown Sigala"> <meta name="robots" content="index, follow">
<!-- Open Graph Tags --> <meta property="og:title" content="SIGALIX | AI-First Software & Global Digital Innovation"> <meta property="og:description" content="Building next-generation intelligent platforms, custom applications, and SaaS ecosystems from Yaoundé, Cameroon to the world."> <meta property="og:type" content="website"> <meta property="og:url" content="https://sigalix.com"> <meta property="og:locale" content="en_US">
<!-- Twitter Card Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="SIGALIX | AI-First Software Engineering"> <meta name="twitter:description" content="Propelling African technological innovation to the global stage through intelligent software and scalable cloud architecture.">
<!-- Schema.org JSON-LD --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "SIGALIX", "url": "https://sigalix.com", "email": "info@sigalix.com", "telephone": "+237689699688", "address": { "@type": "PostalAddress", "streetAddress": "Damas", "addressLocality": "Yaoundé", "addressRegion": "Centre", "addressCountry": "CM" }, "founder": { "@type": "Person", "name": "Sunyin Elisbrown Sigala" }, "description": "AI-first software engineering startup and SaaS vendor building scalable digital infrastructure.", "knowsAbout": [ "Artificial Intelligence", "App Development", "Website Development", "Cloud Architecture", "SaaS Solutions", "IT Consultancy" ] } </script>
<!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<!-- Three.js for 3D Interactive Graphics --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style> :root { --bg-main: #FDFBF7; /* Cream white / --bg-surface: #F5F2EA; / Light warm beige container / --bg-card: #FFFFFF; / Pure white card / --text-primary: #111111; / Deep pitch black / --text-secondary: #555550; / Muted grey */ --accent: #0A0A0A; --border: #E5E0D3; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { background-color: var(--bg-main); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; }
/* 3D WebGL Canvas Layer */ #hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: auto; }
/* Ambient Glow Layer */ .ambient-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 700px; height: 450px; background: radial-gradient(circle, rgba(230, 222, 205, 0.5) 0%, rgba(253, 251, 247, 0) 70%); z-index: 1; pointer-events: none; }
/* Main Layout Containers */ .container { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* Header / Navbar */ header { padding: 1.75rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand-logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; text-transform: uppercase; }
nav { display: flex; gap: 1.75rem; align-items: center; }
nav a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s ease; }
nav a:hover { color: var(--text-primary); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.6rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; white-space: nowrap; }
.btn-primary { background-color: var(--accent); color: #FFFFFF; border: 1px solid var(--accent); }
.btn-primary:hover { background-color: #333333; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
.btn-secondary { background-color: rgba(253, 251, 247, 0.8); backdrop-filter: blur(8px); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background-color: var(--bg-surface); border-color: var(--text-secondary); transform: translateY(-2px); }
/* Hero Section */ .hero { padding: 4.5rem 0 3.5rem; text-align: center; position: relative; }
.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; background-color: rgba(245, 242, 234, 0.85); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 50px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 1.5rem; }
.badge-dot { width: 8px; height: 8px; background-color: #10B981; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
.hero h1 { font-family: var(--font-heading); font-size: clamp(2.4rem, 6.5vw, 4.2rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1.5rem; max-width: 950px; margin-left: auto; margin-right: auto; }
.hero h1 span { background: linear-gradient(135deg, #111111 30%, #555550 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--text-secondary); max-width: 720px; margin: 0 auto 2.5rem; font-weight: 400; }
.hero-cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
/* Metric / Pitch Bar */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 4rem 0 5rem; }
.metric-card { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem; text-align: left; transition: transform 0.2s ease; }
.metric-card:hover { transform: translateY(-3px); }
.metric-number { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; }
.metric-label { font-size: 0.9rem; color: var(--text-secondary); }
/* Section Headers */ .section-header { margin-bottom: 3.5rem; text-align: center; }
.section-header h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.section-header p { color: var(--text-secondary); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }
/* Mission, Vision, Values Section */ .mission-vision-section { padding: 4rem 0; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.mv-card { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; position: relative; overflow: hidden; }
.mv-card h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.mv-card p { color: var(--text-secondary); font-size: 0.98rem; }
.values-container { background-color: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 3rem; }
.values-container h3 { font-family: var(--font-heading); font-size: 1.6rem; text-align: center; margin-bottom: 2rem; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.value-item { background-color: var(--bg-card); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.value-item h4 { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 0.5rem; }
.value-item p { font-size: 0.88rem; color: var(--text-secondary); }
/* Services Grid */ .services-section { padding: 4rem 0; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.service-card { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.05); border-color: #D1CBB8; }
.service-icon { width: 56px; height: 56px; background-color: var(--bg-surface); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--text-primary); }
.service-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-family: var(--font-heading); font-size: 1.35rem; margin-bottom: 0.75rem; }
.service-card p { color: var(--text-secondary); font-size: 0.95rem; }
/* Products / Flagship Section */ .projects-section { padding: 5rem 0; background-color: var(--bg-surface); border-radius: var(--radius-lg); margin: 4rem 0; }
.product-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; padding: 0 2rem; }
.product-card { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s ease; }
.product-card:hover { transform: translateY(-4px); }
.product-header-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.product-logo-img { height: 48px; width: auto; max-width: 180px; object-fit: contain; }
.product-status { padding: 0.35rem 0.85rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background-color: #FEF3C7; color: #92400E; }
.product-title { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 0.75rem; }
.product-desc { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 2rem; flex-grow: 1; }
.product-link { text-decoration: none; color: var(--text-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; transition: gap 0.2s ease; }
.product-link:hover { gap: 0.8rem; }
.product-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Contact Section & Form */ .contact-section { padding: 4rem 0 6rem; }
.contact-box { background-color: var(--accent); color: #FFFFFF; border-radius: var(--radius-lg); padding: 4rem 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
@media (max-width: 850px) { .contact-box { grid-template-columns: 1fr; padding: 3rem 1.75rem; } nav { display: none; } }
.contact-info h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; color: #FFFFFF; }
.contact-info p { color: #A1A1AA; margin-bottom: 2rem; font-size: 1rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-detail-item { display: flex; align-items: center; gap: 1rem; color: #E4E4E7; font-size: 1rem; word-break: break-word; }
.contact-detail-item svg { width: 20px; height: 20px; stroke: #A1A1AA; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.contact-detail-item a { color: #FFFFFF; text-decoration: none; transition: opacity 0.2s; }
.contact-detail-item a:hover { opacity: 0.8; }
/* Web3Forms Branded Contact Form Container */ .form-card-container { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3.5rem; max-width: 900px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.04); }
.form-header { text-align: center; margin-bottom: 2.5rem; }
.form-header h3 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.form-header p { color: var(--text-secondary); font-size: 0.98rem; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .contact-form { grid-template-columns: 1fr; } .form-card-container { padding: 2rem 1.5rem; } }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.form-control { padding: 0.9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--bg-main); font-family: var(--font-body); font-size: 0.95rem; color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08); background-color: #FFFFFF; }
textarea.form-control { resize: vertical; min-height: 140px; }
.form-submit-btn { grid-column: 1 / -1; background-color: var(--accent); color: #FFFFFF; border: none; padding: 1rem; border-radius: 50px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.form-submit-btn:hover { background-color: #333333; transform: translateY(-2px); }
#form-result { grid-column: 1 / -1; text-align: center; font-weight: 600; font-size: 0.95rem; margin-top: 0.5rem; }
/* Footer & Modals */ footer { padding: 3rem 0; text-align: center; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 0.9rem; }
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; cursor: pointer; transition: color 0.2s; }
.footer-links a:hover { color: var(--text-primary); }
/* Modal Overlay Styling */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { background-color: var(--bg-card); border-radius: var(--radius-lg); width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; padding: 3rem; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); text-align: left; }
.modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: var(--bg-surface); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); transition: background 0.2s; }
.modal-close:hover { background: var(--border); }
.modal-content h3 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1rem; }
.modal-content h4 { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.modal-content p, .modal-content li { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1rem; }
.modal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; } </style> </head> <body>
<!-- 3D Interactive WebGL Background Canvas --> <canvas id="hero-canvas"></canvas>
<div class="ambient-glow"></div>
<div class="container"> <!-- Header --> <header> <a href="#" class="brand-logo">SIGALIX</a> <nav> <a href="#about">Mission & Vision</a> <a href="#services">Services</a> <a href="#products">Ecosystem</a> <a href="#contact">Contact</a> </nav> <a href="#contact" class="btn btn-primary">Get in Touch</a> </header>
<main> <!-- Hero Section --> <section class="hero"> <div class="badge"> <span class="badge-dot"></span> AI-First Engineering & Cloud SaaS Vendor </div> <h1>Bringing Africa to the World Stage with <span>Intelligent Software</span></h1> <p>Sigalix is a high-growth technology startup engineering bespoke cloud platforms, AI integrations, robust SaaS architecture, and elite digital infrastructure from Yaoundé, Cameroon.</p> <div class="hero-cta"> <a href="#services" class="btn btn-primary">Explore Services <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> <a href="#products" class="btn btn-secondary">Flagship Products</a> </div> </section>
<!-- Metrics Bar --> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-number">AI-First</div> <div class="metric-label">Intelligent automation & secure adaptive workflows</div> </div> <div class="metric-card"> <div class="metric-number">SaaS Scalability</div> <div class="metric-label">Proprietary multi-tenant cloud ecosystems</div> </div> <div class="metric-card"> <div class="metric-number">Global Standards</div> <div class="metric-label">Enterprise-grade engineering & security compliance</div> </div> </div>
<!-- Mission, Vision & Core Values Section --> <section id="about" class="mission-vision-section"> <div class="section-header"> <h2>Our Foundation & Direction</h2> <p>Driven by purpose, anchored in engineering excellence, and built for global market expansion.</p> </div>
<div class="mv-grid"> <div class="mv-card"> <h3> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg> Our Mission </h3> <p>To architect world-class, AI-driven software platforms and SaaS solutions that solve complex emerging market challenges while competing flawlessly on the global technology stage.</p> </div>
<div class="mv-card"> <h3> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg> Our Vision </h3> <p>To position Central Africa as an emerging powerhouse for elite software engineering, artificial intelligence innovation, and sustainable cloud technology infrastructure.</p> </div> </div>
<div class="values-container"> <h3>Core Values</h3> <div class="values-grid"> <div class="value-item"> <h4>Uncompromising Quality</h4> <p>Adhering to rigorous international code standards, robust security frameworks, and immaculate performance metrics.</p> </div> <div class="value-item"> <h4>Relentless Innovation</h4> <p>Leveraging artificial intelligence and modern cloud architectures to outpace conventional limitations.</p> </div> <div class="value-item"> <h4>Empowerment & Impact</h4> <p>Building localized tools like Syllabus.cm and LoungeOS.app that fundamentally improve institutional and business workflows.</p> </div> <div class="value-item"> <h4>Integrity & Transparency</h4> <p>Fostering dependable, long-term partnerships with clients, grant bodies, and global investors.</p> </div> </div> </div> </section>
<!-- Services Section --> <section id="services" class="services-section"> <div class="section-header"> <h2>Core Capabilities & Services</h2> <p>Delivering precision engineering, creative design, and strategic IT advisory to power modern enterprise growth.</p> </div>
<div class="services-grid"> <!-- App Development --> <div class="service-card"> <div class="service-icon"> <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> </div> <h3>App Development</h3> <p>High-performance cross-platform mobile and desktop applications engineered with scalable cloud backends and fluid UI/UX.</p> </div>
<!-- Website Development --> <div class="service-card"> <div class="service-icon"> <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> </div> <h3>Website Development</h3> <p>Lightning-fast, SEO-optimized, and semantic web portals built to establish commanding global brand presence.</p> </div>
<!-- Domain Purchase --> <div class="service-card"> <div class="service-icon"> <svg viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg> </div> <h3>Domain Purchase & Cloud</h3> <p>Seamless corporate identity management, secure domain registration, and optimized cloud infrastructure configuration.</p> </div>
<!-- IT Consultancy --> <div class="service-card"> <div class="service-icon"> <svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg> </div> <h3>IT Consultancy</h3> <p>Strategic technical advisory guiding institutions through digital transformation, security protocols, and system architecture.</p> </div>
<!-- Graphics Designing --> <div class="service-card"> <div class="service-icon"> <svg viewBox="0 0 24 24"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg> </div> <h3>Graphics Designing</h3> <p>Striking visual identity packages, product branding, and immersive UI/UX design systems that convert.</p> </div>
<!-- SaaS Vendor --> <div class="service-card"> <div class="service-icon"> <svg viewBox="0 0 24 24"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg> </div> <h3>SaaS Solutions</h3> <p>Proprietary software-as-a-service products built to solve complex vertical industry challenges across emerging markets.</p> </div> </div> </section>
<!-- Products Section --> <section id="products" class="projects-section"> <div class="section-header" style="padding-top: 1rem;"> <h2>Flagship Products & Ecosystem</h2> <p>Pioneering scalable software platforms currently scaling toward deployment.</p> </div>
<div class="product-cards"> <!-- Syllabus.cm Card --> <div class="product-card"> <div> <div class="product-header-container"> <!-- Syllabus Logo --> <img src="image_4.png" alt="Syllabus Logo" class="product-logo-img" onerror="this.onerror=null; this.src='image_5.png';"> <span class="product-status">Coming Soon</span> </div> <h3 class="product-title">Syllabus.cm</h3> <p class="product-desc"> A comprehensive web and mobile institutional management suite. Features automated fee collection, grade tracking, remote learning modules, and secure anti-fraud digital evaluations. </p> </div> <a href="https://syllabus.cm" target="_blank" rel="noopener" class="product-link"> Visit Syllabus.cm <svg viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> </div>
<!-- LoungeOS.app Card --> <div class="product-card"> <div> <div class="product-header-container"> <!-- LoungeOS Logo --> <img src="image_2.png" alt="LoungeOS Logo" class="product-logo-img" onerror="this.onerror=null; this.src='image_3.png';"> <span class="product-status">Coming Soon</span> </div> <h3 class="product-title">LoungeOS.app</h3> <p class="product-desc"> An all-in-one venue operating system built for modern restaurants, bars, and hospitality spaces. Streamlines table ordering, inventory tracking, financial billing, and guest access control. </p> </div> <a href="https://loungeos.app" target="_blank" rel="noopener" class="product-link"> Visit LoungeOS.app <svg viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> </div> </div> </section>
<!-- Contact & Inquiry Section --> <section id="contact" class="contact-section"> <div class="contact-box"> <div class="contact-info"> <h2>Partner with Sigalix.</h2> <p>We welcome collaboration inquiries from investors, grant partners, cloud providers, and forward-thinking enterprises.</p>
<div class="contact-details"> <div class="contact-detail-item"> <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> <a href="mailto:info@sigalix.com">info@sigalix.com</a> </div> <div class="contact-detail-item"> <svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> <a href="tel:+237689699688">+237 689 699 688</a> </div> <div class="contact-detail-item"> <svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg> <span>Damas, Yaoundé III, Cameroon</span> </div> </div> </div>
<div> <div style="background-color: rgba(255,255,255,0.06); padding: 2rem; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.1);"> <h4 style="font-family: var(--font-heading); margin-bottom: 0.75rem; color: #FFFFFF; font-size: 1.2rem;">Let's Build the Future</h4> <p style="font-size: 0.9rem; color: #A1A1AA; margin-bottom: 1.5rem;">Reach out directly to discuss partnership opportunities, technical integration, or venture backing.</p> <a href="mailto:info@sigalix.com" class="btn" style="background-color: #FFFFFF; color: var(--accent); width: 100%; justify-content: center;">Initiate Contact</a> </div> </div> </div>
<!-- Branded Web3Forms Contact Form Component --> <div class="form-card-container"> <div class="form-header"> <h3>Send Us a Secure Message</h3> <p>Fill out the form below and our executive engineering team will respond within 24 hours.</p> </div>
<form action="https://api.web3forms.com/submit" method="POST" id="sigalix-contact-form" class="contact-form"> <!-- WEB3FORMS ACCESS KEY INSERTED --> <input type="hidden" name="apikey" value="f5e0c4ad-a029-43e6-91a5-07847194e478">
<!-- Hidden dynamic subject input that updates via JS --> <input type="hidden" id="dynamic_subject" name="subject" value="New Inquiry from SIGALIX Enterprise Portal"> <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" name="name" class="form-control" placeholder="e.g. Dr. Jean Dupont" required> </div>
<div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" class="form-control" placeholder="jean@institution.org" required> </div>
<div class="form-group full-width"> <label for="inquiry_type">Inquiry Category</label> <select id="inquiry_type" name="inquiry_type" class="form-control" required> <option value="" disabled selected>Select partnership or project type...</option> <option value="Grant & Venture Partnership">Grant & Venture Partnership</option> <option value="Custom Software / App Development">Custom Software / App Development</option> <option value="SaaS Deployment (Syllabus / LoungeOS)">Syllabus.cm or LoungeOS.app Inquiry</option> <option value="IT Consultancy & Cloud Architecture">IT Consultancy & Cloud Architecture</option> <option value="General Press & Compliance">General Press & Compliance</option> <option value="Other">Other (Type your own subject)</option> </select> </div>
<!-- Conditionally shown custom subject input container --> <div class="form-group full-width" id="custom-subject-group" style="display: none;"> <label for="custom_subject">Custom Subject Line</label> <input type="text" id="custom_subject" class="form-control" placeholder="Type your custom inquiry subject here..."> </div>
<div class="form-group full-width"> <label for="message">Message Details</label> <textarea id="message" name="message" class="form-control" placeholder="Describe your project scope, funding vehicle, or collaboration objective..." required></textarea> </div>
<button type="submit" class="form-submit-btn"> Transmit Message <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> </button>
<div id="form-result"></div> </form> </div> </section> </main>
<!-- Footer --> <footer> <div class="footer-links"> <a onclick="openModal('privacyModal')">Privacy Policy</a> <a onclick="openModal('termsModal')">Terms of Service</a> <a href="mailto:info@sigalix.com">Compliance Inquiries</a> </div> <p>© 2026 SIGALIX. All Rights Reserved. Damas, Yaoundé, Cameroon.</p> </footer> </div>
<!-- Privacy Policy Modal --> <div id="privacyModal" class="modal-overlay" onclick="outsideClose(event, 'privacyModal')"> <div class="modal-content"> <button class="modal-close" onclick="closeModal('privacyModal')">×</button> <h3>Privacy Policy</h3> <p><strong>Effective Date:</strong> January 1, 2026</p> <p>At SIGALIX ("we", "our", or "us"), operating from Yaoundé, Cameroon, we prioritize the protection of your personal and institutional data. This Privacy Policy governs our web platforms, including sigalix.com, syllabus.cm, and loungeos.app.</p>
<h4>1. Information We Collect</h4> <p>We collect information you provide directly to us when requesting IT consultancy, registering interest in our SaaS products, or contacting our team via email or phone. This may include names, institutional affiliations, corporate email addresses, and phone numbers.</p>
<h4>2. Use of Information</h4> <p>Your data is utilized strictly to provide, maintain, and improve our software engineering services, communicate regarding partnerships or grant applications, and ensure cloud security compliance.</p>
<h4>3. Data Security</h4> <p>We implement enterprise-grade cryptographic protocols, secure cloud storage standards, and access control mechanisms to safeguard all information against unauthorized disclosure.</p>
<h4>4. Contact Us</h4> <p>For questions regarding our privacy practices, please contact us at <a href="mailto:info@sigalix.com">info@sigalix.com</a>.</p> </div> </div>
<!-- Terms of Service Modal --> <div id="termsModal" class="modal-overlay" onclick="outsideClose(event, 'termsModal')"> <div class="modal-content"> <button class="modal-close" onclick="closeModal('termsModal')">×</button> <h3>Terms of Service</h3> <p><strong>Effective Date:</strong> January 1, 2026</p> <p>Welcome to SIGALIX. By accessing our website or engaging with our software products and consulting services, you agree to comply with and be bound by the following terms and conditions.</p>
<h4>1. Intellectual Property Rights</h4> <p>All source code, UI/UX designs, trademarks, brand assets, logos (including Syllabus.cm and LoungeOS.app), and proprietary algorithms displayed on this platform are the exclusive intellectual property of SIGALIX and Founder Sunyin Elisbrown Sigala.</p>
<h4>2. Software Services & SaaS Use</h4> <p>Our proprietary platforms are provided under specific commercial licensing agreements. Unauthorized reverse engineering, redistribution, or data scraping of our software applications is strictly prohibited.</p>
<h4>3. Limitation of Liability</h4> <p>SIGALIX shall not be held liable for indirect, incidental, or consequential damages arising from the use or inability to use our web platforms or third-party cloud integrations.</p>
<h4>4. Governing Law</h4> <p>These terms are governed by the laws applicable in Yaoundé, Centre Region, Cameroon.</p> </div> </div>
<script> // Modal Control Functions function openModal(modalId) { document.getElementById(modalId).classList.add('active'); document.body.style.overflow = 'hidden'; }
function closeModal(modalId) { document.getElementById(modalId).classList.remove('active'); document.body.style.overflow = 'auto'; }
function outsideClose(event, modalId) { if (event.target.classList.contains('modal-overlay')) { closeModal(modalId); } }
// Dynamic Custom Subject Toggle Handler const inquirySelect = document.getElementById('inquiry_type'); const customSubjectGroup = document.getElementById('custom-subject-group'); const customSubjectInput = document.getElementById('custom_subject'); const hiddenSubjectInput = document.getElementById('dynamic_subject');
inquirySelect.addEventListener('change', function() { if (this.value === 'Other') { customSubjectGroup.style.display = 'flex'; customSubjectInput.setAttribute('required', 'true'); hiddenSubjectInput.value = customSubjectInput.value ? customSubjectInput.value : 'Custom Inquiry from SIGALIX Portal'; } else { customSubjectGroup.style.display = 'none'; customSubjectInput.removeAttribute('required'); hiddenSubjectInput.value = 'Inquiry: ' + this.value; } });
customSubjectInput.addEventListener('input', function() { hiddenSubjectInput.value = this.value ? this.value : 'Custom Inquiry from SIGALIX Portal'; });
// Web3Forms AJAX Submission Handler with On-Page Status Feedback const form = document.getElementById('sigalix-contact-form'); const result = document.getElementById('form-result');
form.addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(form); const object = Object.fromEntries(formData); const json = JSON.stringify(object);
result.style.color = '#555550'; result.innerHTML = "Transmitting secure message...";
fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: json }) .then(async (response) => { let jsonResponse = await response.json(); if (response.status == 200) { result.style.color = '#10B981'; result.innerHTML = "Message successfully transmitted! We will be in touch shortly."; form.reset(); customSubjectGroup.style.display = 'none'; } else { result.style.color = '#EF4444'; result.innerHTML = jsonResponse.message || "Something went wrong. Please try again."; } }) .catch(error => { console.error(error); result.style.color = '#EF4444'; result.innerHTML = "Network transmission error. Please email us directly at info@sigalix.com"; }); });
// Three.js Scene Setup (Restored spinning 3D wireframe globe) window.addEventListener('load', function () { const canvas = document.getElementById('hero-canvas'); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 7;
const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Create 3D Wireframe Globe (Icosahedron) const geometry = new THREE.IcosahedronGeometry(2.8, 2); const material = new THREE.MeshBasicMaterial({ color: 0xcccccc, wireframe: true, transparent: true, opacity: 0.2 }); const globe = new THREE.Mesh(geometry, material); scene.add(globe);
// Resize Handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });
// Standard Smooth Rotation Animation Loop function animate() { requestAnimationFrame(animate);
globe.rotation.y += 0.003; globe.rotation.x += 0.001;
renderer.render(scene, camera); }
animate(); }); </script> </body> </html>