PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/afrbioidv.com/public_html/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AFR-Bio-IDV - AI-Native Identity Verification</title>
    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary-orange: #ff8c00; --primary-orange-hover: #e67e00;
            --text-dark: #1a1a1a; --text-gray: #666666;
            --bg-light: #f9fafb; --bg-green: #e6f5ea;
            --footer-bg: #0b0b0b; --container-width: 1200px;
        }
        body { font-family: 'Inter', sans-serif; color: var(--text-dark); line-height: 1.6; background-color: #ffffff; }
        a { text-decoration: none; color: inherit; cursor: pointer; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; border-radius: 12px; object-fit: cover; }
        .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        .btn-primary { display: inline-block; background-color: var(--primary-orange); color: #fff; padding: 12px 24px; border-radius: 50px; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.3s ease; }
        .btn-primary:hover { background-color: var(--primary-orange-hover); }
        .btn-secondary { display: inline-block; background-color: transparent; color: #fff; padding: 12px 24px; border-radius: 50px; font-weight: 600; border: 1px solid #fff; cursor: pointer; transition: all 0.3s ease; }
        .btn-secondary:hover { background-color: #fff; color: var(--text-dark); }
        .btn-outline { display: inline-block; background-color: transparent; color: var(--text-dark); padding: 12px 24px; border-radius: 50px; font-weight: 600; border: 1px solid #d1d5db; cursor: pointer; transition: all 0.3s ease; }
        .btn-outline:hover { border-color: var(--text-dark); }
        .flex-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
        .flex-col { display: flex; flex-direction: column; gap: 20px; }
        .text-center { text-align: center; }
        header { padding: 20px 0; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background: #fff; z-index: 1000; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 5px; }
        .logo span { color: var(--primary-orange); }
        .logo svg { width: 24px; height: 24px; }
        .nav-links { display: flex; gap: 30px; font-weight: 500; color: var(--text-gray); font-size: 14px; }
        .nav-links a:hover { color: var(--text-dark); }
        .header-actions { display: flex; align-items: center; gap: 15px; }
        .btn-auth { padding: 8px 20px; font-size: 14px; border-radius: 50px; cursor: pointer; font-weight: 500; }
        .btn-login { border: 1px solid var(--text-dark); background: transparent; transition: 0.3s; }
        .btn-login:hover { background: var(--text-dark); color: #fff; }
        .btn-register { background: var(--primary-orange); color: #fff; border: 1px solid var(--primary-orange); transition: 0.3s; }
        .btn-register:hover { background: var(--primary-orange-hover); border-color: var(--primary-orange-hover); }
        .page-content { display: none; width: 100%; }
        #page-home { display: block; }
        .sub-page-content { padding: 80px 0; text-align: center; min-height: 60vh; }
        .sub-page-content h1 { font-size: 40px; margin-bottom: 20px; }
        .sub-page-content p { max-width: 600px; margin: 0 auto; color: var(--text-gray); font-size: 18px; }
        .hero { padding: 80px 0; background: linear-gradient(135deg, #fdfdfd 0%, #f8f9fa 100%); }
        .hero-content { width: 50%; }
        .hero-image { width: 50%; position: relative; perspective: 1000px; transform-style: preserve-3d; transition: transform 0.2s ease-out; }
        .hero-image img { box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .hero h1 { font-size: 48px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
        .hero h1 span { color: var(--primary-orange); }
        .hero p { color: var(--text-gray); font-size: 18px; margin-bottom: 30px; max-width: 80%; }
        .hero-buttons { display: flex; gap: 15px; }
        .hero-buttons .btn-secondary { color: var(--text-dark); border-color: #d1d5db; }
        .hero-buttons .btn-secondary:hover { background-color: var(--text-dark); color: #fff; border-color: var(--text-dark); }
        .section-block { padding: 80px 0; }
        .section-block h2 { font-size: 36px; font-weight: 600; margin-bottom: 20px; }
        .section-block p { color: var(--text-gray); font-size: 16px; max-width: 600px; }
        .section-block .feature-image { background-color: #f3f4f6; border-radius: 12px; width: 45%; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .feature-image img { width: 100%; height: 100%; object-fit: cover; }
        .feature-text { width: 50%; }
        .bg-green { background-color: var(--bg-green); }
        .trust-section { padding: 60px 0; text-align: center; border-top: 1px solid #eaeaea; }
        .trust-section h3 { font-size: 28px; margin-bottom: 10px; font-weight: 500; }
        .trust-section p { color: var(--text-gray); margin-bottom: 40px; font-size: 18px; }
        .logos-grid { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; opacity: 0.7; }
        .logos-grid img { height: 25px; width: auto; border-radius: 0; }
        .services-section { padding: 80px 0; background-color: #fafafa; }
        .services-section h2 { text-align: center; margin-bottom: 60px; }
        .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .service-card { background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); text-align: center; }
        .service-card img { height: 150px; width: 100%; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
        .service-card h3 { font-size: 20px; margin-bottom: 10px; }
        .service-card p { color: var(--text-gray); font-size: 14px; }
        .testimonial-block { padding: 60px 0; }
        .testimonial-container { background-color: #2c3e50; color: white; border-radius: 20px; padding: 0; display: flex; overflow: hidden; position: relative; min-height: 400px; }
        .testimonial-left { flex: 1.5; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
        .testimonial-left p { font-size: 22px; font-style: italic; line-height: 1.5; margin-bottom: 30px; }
        .testimonial-left h4 { font-weight: 600; margin-bottom: 5px; }
        .testimonial-left span { font-size: 14px; opacity: 0.8; }
        .testimonial-stats { display: flex; gap: 40px; margin-top: 30px; }
        .stat-item h3 { font-size: 32px; margin-bottom: 5px; }
        .stat-item p { font-size: 12px; opacity: 0.8; margin: 0; }
        .testimonial-right { flex: 1; background-image: url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=1000&auto=format&fit=crop'); background-size: cover; background-position: center; }
        .partner-logos { padding: 40px 0; border-bottom: 1px solid #eaeaea; }
        .partner-grid { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
        .partner-grid img { height: 40px; width: auto; border-radius: 0; opacity: 0.8; }
        .final-cta { padding: 80px 0; background-color: #111; color: #fff; }
        .final-cta h2 { font-size: 32px; margin-bottom: 30px; }
        .cta-content { display: flex; align-items: center; gap: 50px; }
        .cta-text { flex: 1; }
        .cta-image { flex: 1; }
        .cta-actions { display: flex; gap: 15px; margin-top: 20px; }
        footer { background-color: var(--footer-bg); color: #9ca3af; padding: 60px 0 20px; font-size: 14px; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 40px; border-bottom: 1px solid #222; padding-bottom: 40px; }
        .footer-col h4 { color: #fff; margin-bottom: 15px; font-weight: 600; }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col ul li a:hover { color: #fff; }
        .newsletter input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #333; background: transparent; color: #fff; margin-bottom: 10px; }
        .newsletter button { width: 100%; background: #fff; color: #000; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: 600; }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
        .social-icons { display: flex; gap: 15px; }
        .auth-container { max-width: 450px; margin: 60px auto; background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: left; }
        .auth-container h2 { text-align: center; margin-bottom: 30px; font-size: 28px; }
        .auth-container label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; }
        .auth-container input { width: 100%; padding: 14px; margin-bottom: 20px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; transition: 0.3s; }
        .auth-container input:focus { border-color: var(--primary-orange); outline: none; background: #fff; }
        .auth-container .btn-primary { width: 100%; padding: 14px; font-size: 16px; border-radius: 8px; }
        .auth-link { text-align: center; margin-top: 15px; font-size: 14px; }
        .auth-link a { color: var(--primary-orange); font-weight: 600; }
        .toast { position: fixed; top: 80px; right: 20px; padding: 16px 24px; border-radius: 8px; color: #fff; z-index: 9999; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateX(100%); transition: transform 0.3s ease; }
        .toast.show { transform: translateX(0); }
        .toast.success { background: #10b981; }
        .toast.error { background: #ef4444; }
        @media (max-width: 992px) {
            .flex-row { flex-direction: column; text-align: center; }
            .hero-content, .hero-image, .feature-image, .feature-text { width: 100%; }
            .hero p { max-width: 100%; }
            .hero-buttons { justify-content: center; }
            .services-grid { grid-template-columns: 1fr; }
            .testimonial-container { flex-direction: column; }
            .testimonial-left { padding: 30px; text-align: center; }
            .testimonial-stats { justify-content: center; }
            .testimonial-right { min-height: 200px; }
            .cta-content { flex-direction: column-reverse; }
            .cta-actions { justify-content: center; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-bottom { flex-direction: column; gap: 20px; }
            .header-actions .btn-primary { display: none; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .hero h1 { font-size: 32px; }
            .logos-grid { gap: 20px; }
            .footer-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo" onclick="showPage('page-home')">
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 0L30 8V24L16 32L2 24V8L16 0Z" fill="#0b0b0b"/>
                    <path d="M16 4L26 10V22L16 28L6 22V10L16 4Z" fill="#ff8c00"/>
                    <circle cx="16" cy="16" r="4" fill="#fff"/>
                </svg>
                <span>AFR-Bio-IDV</span>
            </div>
            <nav>
                <ul class="nav-links">
                    <li><a onclick="showPage('page-products')">Products</a></li>
                    <li><a onclick="showPage('page-company')">Company</a></li>
                    <li><a onclick="showPage('page-solutions')">Solutions</a></li>
                    <li><a onclick="showPage('page-resources')">Resources</a></li>
                    <li><a onclick="showPage('page-docs')">Docs</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <a onclick="showPage('page-login')" class="btn-auth btn-login">LOGIN</a>
                <a onclick="showPage('page-register')" class="btn-auth btn-register">Register</a>
                <a onclick="showPage('page-contact')" class="btn-primary">Contact Sales</a>
            </div>
        </div>
    </header>
    <div id="toast-message" class="toast"></div>
    <main>
        <div id="page-home" class="page-content">
            <section class="hero">
                <div class="container flex-row">
                    <div class="hero-content">
                        <h1>AI-Native Identity Verification built for<br>your <span>market</span></h1>
                        <p>AI powered identity verification and compliance built for mobile first, real-world use cases. High-fidelity biometric verification that scales with your business across Africa.</p>
                        <div class="hero-buttons">
                            <a onclick="showPage('page-register')" class="btn-primary">Get started</a>
                            <a onclick="showPage('page-solutions')" class="btn-outline">View Solutions</a>
                        </div>
                    </div>
                    <div class="hero-image" id="hero-3d">
                        <img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?q=80&w=1000&auto=format&fit=crop" alt="Woman using smartphone identity verification" style="height:500px; width:100%; object-fit:cover;">
                    </div>
                </div>
            </section>
            <section class="section-block">
                <div class="container flex-row">
                    <div class="feature-image"><img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1000&auto=format&fit=crop" alt="Professional using network intelligence tools"></div>
                    <div class="feature-text">
                        <h2 style="margin-top:0;">Built in Silicon Valley. Proven in the world's most rapidly digitizing markets. 400M+ identity checks completed.</h2>
                        <br><h3>Network Intelligence</h3>
                        <p>Enhance identity checks with network intelligence. Identify fraud rings through advanced device fingerprinting. Fast-track KYC.</p>
                    </div>
                </div>
            </section>
            <section class="section-block bg-green">
                <div class="container flex-row">
                    <div class="feature-text">
                        <h3>Layered Defence</h3>
                        <p>Seamlessly combine AI-powered biometric verification and document checks to deliver the most advanced fraud detection. Our proprietary technology reduces false positives by 95%.</p>
                    </div>
                    <div class="feature-image"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=1000&auto=format&fit=crop" alt="Two women undergoing layered identity defense"></div>
                </div>
            </section>
            <section class="section-block">
                <div class="container flex-row">
                    <div class="feature-image"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1000&auto=format&fit=crop" alt="Market Know-How dashboard interface"></div>
                    <div class="feature-text">
                        <h3>Market Know-How</h3>
                        <p>Our models are trained on local datasets and have been built specifically for the unique challenges of emerging markets. We understand how to spot fake IDs, fraudulent documents, and synthetic identities specific to your location.</p>
                    </div>
                </div>
            </section>
            <section class="section-block bg-green">
                <div class="container flex-row">
                    <div class="feature-text">
                        <h3>Built for the Real World</h3>
                        <p>Our SDKs are built for mobile. Our models are trained on real-use conditions—low light, poor network connectivity, and various device cameras. We handle the challenges so you can focus on user adoption.</p>
                    </div>
                    <div class="feature-image"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1000&auto=format&fit=crop" alt="Woman verifying identity outdoors in agricultural setting"></div>
                </div>
            </section>
            <section class="trust-section container">
                <h3>4 of 5 top Nigerian banks and<br>3 of 4 South African BNL leaders trust AFR-Bio-IDV</h3>
                <div class="logos-grid">
                    <img src="https://placehold.co/120x40/transparent/333?text=Uber" alt="Uber Logo">
                    <img src="https://placehold.co/120x40/transparent/333?text=Binance" alt="Binance Logo">
                    <img src="https://placehold.co/120x40/transparent/333?text=MTN" alt="MTN Logo">
                    <img src="https://placehold.co/120x40/transparent/333?text=Paystack" alt="Paystack Logo">
                    <img src="https://placehold.co/120x40/transparent/333?text=Flutterwave" alt="Flutterwave Logo">
                </div>
                <p style="margin-top:30px; font-size:14px;">Partnered with Flutterwave</p>
            </section>
            <section class="services-section">
                <div class="container">
                    <h2>Onboard. Authenticate. Screen—<br>one platform to build a trusted customer base</h2>
                    <div class="services-grid">
                        <div class="service-card">
                            <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=600&auto=format&fit=crop" alt="Onboarding Illustration">
                            <h3>Onboard</h3><p>Verify new users with the right method for each use case. Our KYC onboarding covers over 3000 document types.</p>
                        </div>
                        <div class="service-card">
                            <img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=600&auto=format&fit=crop" alt="Authentication Illustration">
                            <h3>Authenticate</h3><p>Verify existing users with biometrics, PIN, or tokens for high-security transactions. Build confidence across your customer base.</p>
                        </div>
                        <div class="service-card">
                            <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=600&auto=format&fit=crop" alt="Screen Illustration">
                            <h3>Screen</h3><p>Continuously screen existing customers for heightened risk profiles using real-time data and proprietary algorithms.</p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="testimonial-block container">
                <div class="testimonial-container">
                    <div class="testimonial-left">
                        <p>“We find that the features they provide on this solution help make it easy for our company to verify and trust the identity of new and existing partners, which is what we've done before now.”</p>
                        <div><h4>Yinka O.</h4><span>COO, Flutterwave</span></div>
                        <div class="testimonial-stats">
                            <div class="stat-item"><h3>90%</h3><p>Reduction in customer friction</p></div>
                            <div class="stat-item"><h3>10 min</h3><p>Average speed for new customer signup</p></div>
                        </div>
                    </div>
                    <div class="testimonial-right"></div>
                </div>
                <div style="text-align: center; margin-top: 30px;">
                    <h3>How Flutterwave built trust with users while reducing fictitious sign-ups by 90%</h3><br>
                    <a onclick="showPage('page-resources')" class="btn-primary">Read case study →</a>
                </div>
            </section>
            <section class="partner-logos container">
                <div class="partner-grid">
                    <img src="https://placehold.co/80x80/transparent/333?text=ISO" alt="ISO 27001">
                    <img src="https://placehold.co/80x80/transparent/333?text=SOC2" alt="SOC 2">
                    <img src="https://placehold.co/80x80/transparent/333?text=NCA" alt="NCA">
                    <img src="https://placehold.co/120x40/transparent/333?text=Partner1" alt="Partner 1">
                    <img src="https://placehold.co/120x40/transparent/333?text=Partner2" alt="Partner 2">
                    <img src="https://placehold.co/120x40/transparent/333?text=Partner3" alt="Partner 3">
                </div>
            </section>
            <section class="final-cta">
                <div class="container cta-content">
                    <div class="cta-text">
                        <h2>See what AFR-Bio-IDV can do in your market!</h2>
                        <div class="cta-actions">
                            <a onclick="showPage('page-contact')" class="btn-primary">Talk to Sales</a>
                            <a onclick="showPage('page-docs')" class="btn-secondary">View Developer Docs</a>
                        </div>
                    </div>
                    <div class="cta-image"><img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?q=80&w=1000&auto=format&fit=crop" alt="Woman using identity verification app"></div>
                </div>
            </section>
        </div>
        <div id="page-products" class="page-content sub-page-content">
            <h1>Our Products</h1>
            <p>Streamlined identity management for the modern enterprise.</p>
            <div class="services-grid container" style="margin-top: 50px; text-align: left;">
                <div class="service-card"><h3>Biometric KYC</h3><p>Advanced facial recognition and liveness detection for secure onboarding.</p></div>
                <div class="service-card"><h3>Document Verification</h3><p>AI-driven validation of over 3,000 global document types.</p></div>
                <div class="service-card"><h3>Fraud Screening</h3><p>Real-time network analysis to detect and prevent sophisticated fraud rings.</p></div>
            </div>
        </div>
        <div id="page-company" class="page-content sub-page-content">
            <h1>About Our Company</h1>
            <p>Securing digital identities across Africa and beyond.</p>
            <div style="max-width: 600px; margin: 40px auto; text-align: left; color: var(--text-gray);">
                <p><strong>Owner:</strong> John A. Doe</p>
                <p><strong>Founded:</strong> 2020</p>
                <p><strong>Mission:</strong> To bridge the trust gap in emerging digital economies with superior AI technology.</p>
                <hr style="border:0; border-top:1px solid #eee; margin:20px 0;">
                <p><strong>Contact Number:</strong> +234 800 555 0199</p>
                <p><strong>Email:</strong> support@afr-bio-idv.com</p>
                <p><strong>Address:</strong> 42 Innovation Crescent, Victoria Island, Lagos, Nigeria.</p>
            </div>
        </div>
        <div id="page-solutions" class="page-content sub-page-content">
            <h1>Industry Solutions</h1>
            <p>Tailored identity verification for your sector.</p>
            <div class="services-grid container" style="margin-top: 50px; text-align: left;">
                <div class="service-card"><h3>Banking & Finance</h3><p>Compliance solutions for KYC, AML, and high-value transactions.</p></div>
                <div class="service-card"><h3>Fintech</h3><p>Seamless digital onboarding to reduce customer drop-off.</p></div>
                <div class="service-card"><h3>Government</h3><p>Secure national ID programs and citizen verification.</p></div>
            </div>
        </div>
        <div id="page-resources" class="page-content sub-page-content">
            <h1>Resources</h1>
            <p>Insights and guides to navigate the identity verification landscape.</p>
            <div class="services-grid container" style="margin-top: 50px; text-align: left;">
                <div class="service-card"><h3>Blog</h3><p>Latest updates, product releases, and industry news.</p></div>
                <div class="service-card"><h3>Whitepapers</h3><p>In-depth research on biometric security and fraud prevention.</p></div>
                <div class="service-card"><h3>Case Studies</h3><p>How leading companies leverage AFR-Bio-IDV for growth.</p></div>
            </div>
        </div>
        <div id="page-docs" class="page-content sub-page-content">
            <h1>Developer Documentation</h1>
            <p>Build seamlessly with our robust API and SDKs.</p>
            <div class="services-grid container" style="margin-top: 50px; text-align: left;">
                <div class="service-card"><h3>Quickstart Guide</h3><p>Get your first API call up and running in 10 minutes.</p></div>
                <div class="service-card"><h3>API Reference</h3><p>Comprehensive endpoints and parameters for advanced integration.</p></div>
                <div class="service-card"><h3>Status</h3><p>Check real-time health and uptime metrics for our services.</p></div>
            </div>
        </div>
        <div id="page-contact" class="page-content sub-page-content">
            <h1>Contact Sales</h1>
            <p>Let's discuss how AFR-Bio-IDV can transform your identity verification process.</p>
            <div style="max-width: 600px; margin: 40px auto; color: var(--text-gray); text-align: center; line-height: 2;">
                <p><strong>Call us:</strong> +234 800 555 0199</p>
                <p><strong>Email:</strong> sales@afr-bio-idv.com</p>
                <p><strong>Address:</strong> 42 Innovation Crescent, Victoria Island, Lagos, Nigeria.</p>
                <br><a onclick="showPage('page-home')" class="btn-primary">Back to Home</a>
            </div>
        </div>
        <div id="page-login" class="page-content sub-page-content">
            <div class="auth-container">
                <h2>Welcome Back</h2>
                <form id="loginForm">
                    <label>Email Address</label>
                    <input type="email" id="loginEmail" placeholder="you@example.com" required>
                    <label>Password</label>
                    <input type="password" id="loginPassword" placeholder="Enter your password" required>
                    <button type="submit" class="btn-primary">Sign In</button>
                    <div class="auth-link">Don't have an account? <a onclick="showPage('page-register')">Register</a></div>
                </form>
            </div>
        </div>
        <div id="page-register" class="page-content sub-page-content">
            <div class="auth-container">
                <h2>Create Account</h2>
                <form id="registerForm">
                    <label>Full Name</label>
                    <input type="text" id="regName" placeholder="John Doe" required>
                    <label>Email Address</label>
                    <input type="email" id="regEmail" placeholder="you@example.com" required>
                    <label>Phone Number</label>
                    <input type="text" id="regPhone" placeholder="+2348000000000" oninput="this.value = this.value.replace(/[^0-9+]/g, '')" required>
                    <label>Password</label>
                    <input type="password" id="regPassword" placeholder="Create a password" required>
                    <button type="submit" class="btn-primary">Create Account</button>
                    <div class="auth-link">Already have an account? <a onclick="showPage('page-login')">Log in</a></div>
                </form>
            </div>
        </div>
    </main>
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col"><h4>Products</h4><ul><li><a onclick="showPage('page-products')">Biometric KYC</a></li><li><a onclick="showPage('page-products')">Document Verification</a></li><li><a onclick="showPage('page-products')">Liveness Detection</a></li><li><a onclick="showPage('page-products')">Fraud Screening</a></li><li><a onclick="showPage('page-products')">Smart Selfie</a></li></ul></div>
                <div class="footer-col"><h4>Company</h4><ul><li><a onclick="showPage('page-company')">About Us</a></li><li><a onclick="showPage('page-company')">Careers</a></li><li><a onclick="showPage('page-resources')">Press</a></li><li><a onclick="showPage('page-resources')">Blog</a></li></ul></div>
                <div class="footer-col"><h4>Solutions</h4><ul><li><a onclick="showPage('page-solutions')">Banks & Financial Services</a></li><li><a onclick="showPage('page-solutions')">Fintechs</a></li><li><a onclick="showPage('page-solutions')">Telecommunications</a></li><li><a onclick="showPage('page-solutions')">E-commerce & Retail</a></li><li><a onclick="showPage('page-solutions')">Gaming & Betting</a></li></ul></div>
                <div class="footer-col"><h4>Developers</h4><ul><li><a onclick="showPage('page-docs')">Overview</a></li><li><a onclick="showPage('page-docs')">API Docs</a></li><li><a onclick="showPage('page-docs')">SDKs</a></li><li><a onclick="showPage('page-docs')">Status</a></li><li><a onclick="showPage('page-contact')">Contact Support</a></li></ul></div>
                <div class="footer-col newsletter"><h4>Connect with us</h4><p style="margin-bottom: 15px;">Join our newsletter to get the latest insights and updates on identity verification in emerging markets.</p><input type="email" placeholder="Enter your email address"><button type="button">Subscribe</button></div>
            </div>
            <div class="footer-bottom">
                <div class="logo" onclick="showPage('page-home')" style="cursor:pointer;">
                    <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:24px; height:24px;"><path d="M16 0L30 8V24L16 32L2 24V8L16 0Z" fill="#fff"/><path d="M16 4L26 10V22L16 28L6 22V10L16 4Z" fill="#ff8c00"/><circle cx="16" cy="16" r="4" fill="#fff"/></svg>
                    AFR-Bio-IDV
                </div>
                <div>&copy; 2026 AFR-Bio-IDV. All rights reserved.<br>Owner: John A. Doe | +234 800 555 0199 | 42 Innovation Crescent, Lagos, NG.</div>
                <div class="social-icons"><span>LinkedIn</span><span>Twitter</span><span>YouTube</span></div>
            </div>
        </div>
    </footer>
    <script>
        function showPage(pageId) {
            const pages = document.querySelectorAll('.page-content');
            pages.forEach(page => page.style.display = 'none');
            const activePage = document.getElementById(pageId);
            if (activePage) { activePage.style.display = 'block'; window.scrollTo(0, 0); window.location.hash = pageId; }
        }
        window.onhashchange = function() { if(location.hash) { showPage(location.hash.substring(1)); } };
        if(location.hash) { showPage(location.hash.substring(1)); }
        const hero3d = document.getElementById('hero-3d');
        if(hero3d) {
            hero3d.addEventListener('mousemove', (e) => {
                const rect = hero3d.getBoundingClientRect();
                const x = (e.clientX - rect.left) / rect.width - 0.5;
                const y = (e.clientY - rect.top) / rect.height - 0.5;
                hero3d.style.transform = `rotateY(${x * 20}deg) rotateX(${-y * 20}deg) scale(1.02)`;
            });
            hero3d.addEventListener('mouseleave', () => { hero3d.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)'; });
        }
        function showToast(msg, type) {
            const t = document.getElementById('toast-message');
            t.textContent = msg; t.className = 'toast ' + type;
            setTimeout(() => t.classList.add('show'), 10);
            setTimeout(() => { t.classList.remove('show'); }, 4000);
        }
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const fd = new FormData(); fd.append('email', document.getElementById('loginEmail').value); fd.append('password', document.getElementById('loginPassword').value);
            const res = await fetch('api.php?action=login', { method: 'POST', body: fd });
            const data = await res.json();
            if(data.status === 'success') { sessionStorage.setItem('afr_user', JSON.stringify(data.user)); showToast('Login Successful! Redirecting...', 'success'); setTimeout(() => window.location.href = 'dashboard.php', 1500); }
            else { showToast(data.message || 'Invalid credentials', 'error'); }
        });
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const fd = new FormData(); fd.append('name', document.getElementById('regName').value); fd.append('email', document.getElementById('regEmail').value); fd.append('phone', document.getElementById('regPhone').value); fd.append('password', document.getElementById('regPassword').value);
            const res = await fetch('api.php?action=register', { method: 'POST', body: fd });
            const data = await res.json();
            if(data.status === 'success') { showToast('Registration Successful! Please Login.', 'success'); setTimeout(() => showPage('page-login'), 1000); }
            else { showToast(data.message || 'Registration failed', 'error'); }
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`