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/climfinchain.com/public_html/8index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clim Fin-Chain - Open Infrastructure for Carbon Markets</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-black: #0d1110;
            --primary-white: #ffffff;
            --bg-offwhite: #f5f7f7;
            --accent-green: #00cc66;
            --accent-blue: #0088cc;
            --text-gray: #4a5553;
            --border-light: #e0e5e3;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }

        body {
            background-color: var(--primary-white);
            color: var(--primary-black);
            line-height: 1.6;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* SPA Page Logic */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .page.active {
            display: block;
            opacity: 1;
        }

        .inner-page-wrapper {
            padding: 160px 0 100px;
            min-height: 70vh;
            background: var(--bg-offwhite);
        }

        .inner-title {
            font-size: 48px;
            margin-bottom: 24px;
            color: var(--primary-black);
        }

        /* Buttons */
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            border: none;
        }

        .btn-primary {
            background-color: var(--primary-black);
            color: var(--primary-white);
        }

        .btn-primary:hover {
            background-color: #333;
        }

        .btn-outline {
            background-color: transparent;
            color: var(--primary-white);
            border: 1px solid var(--primary-white);
        }
        
        .btn-outline:hover {
            background-color: rgba(255,255,255,0.1);
        }

        .btn-accent {
            background-color: var(--accent-green);
            color: var(--primary-black);
            font-weight: 700;
        }

        /* Header & Nav */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: background-color 0.3s ease;
        }

        /* Header bg changes on inner pages via JS */
        header.solid-bg {
            background-color: var(--primary-black);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* AI Generated Style CSS Logo */
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            z-index: 10;
        }

        .logo-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
            border-radius: 8px 20px 8px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 204, 102, 0.4);
            transform: rotate(-10deg);
        }

        .logo-icon::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            background: var(--primary-white);
            border-radius: 50%;
        }

        .brand-name {
            font-size: 22px;
            font-weight: 800;
            color: var(--primary-white);
            letter-spacing: -0.5px;
            text-transform: uppercase;
        }

        .nav-links {
            display: flex;
            gap: 28px;
            color: var(--primary-white);
            font-size: 14px;
            font-weight: 500;
        }

        .nav-links a:hover {
            color: var(--accent-green);
        }

        .auth-btns {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        /* Hero Section - Full Screen */
        .hero {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            /* Implementation of requested background */
            background: linear-gradient(180deg, rgba(13, 17, 16, 0.8) 0%, rgba(0, 204, 102, 0.4) 100%), 
                        url('herobanner.png') center/cover no-repeat;
            background-color: #1a2421; /* Fallback */
        }

        .hero .container {
            position: relative;
            z-index: 2;
        }

        .hero-label {
            color: var(--accent-green);
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 72px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            color: var(--primary-white);
        }

        .hero p {
            font-size: 20px;
            color: rgba(255,255,255,0.8);
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-btns {
            display: flex;
            gap: 16px;
            justify-content: center;
        }

        /* Existing Sections (Problem, Infra, etc.) */
        .problem-section { padding: 100px 0; background: var(--primary-white); }
        .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; }
        .problem-title { font-size: 32px; font-weight: 600; padding-left: 24px; border-left: 4px solid var(--accent-green); line-height: 1.3; }
        .problem-text { color: var(--text-gray); font-size: 16px; }
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 40px; border-top: 1px solid var(--border-light); }
        .stat-item h3 { font-size: 48px; color: var(--accent-green); margin-bottom: 8px; font-weight: 600; }
        .stat-item p { font-size: 14px; color: var(--text-gray); font-weight: 500; }

        .infrastructure-section { padding: 100px 0; background-color: var(--bg-offwhite); }
        .section-label { color: var(--accent-green); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: inline-block; }
        .infrastructure-section h2 { font-size: 40px; margin-bottom: 40px; max-width: 600px; line-height: 1.2; }
        .feature-card { background: var(--primary-white); border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
        .feature-card h3 { font-size: 24px; margin-bottom: 16px; }
        .feature-card p { color: var(--text-gray); margin-bottom: 24px; }
        .check-list li { position: relative; padding-left: 32px; margin-bottom: 16px; font-weight: 500; }
        .check-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--accent-green); font-weight: bold; }

        .split-section { padding: 120px 0; background: var(--primary-white); }
        .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .split-content h2 { font-size: 40px; margin: 16px 0 24px; line-height: 1.2; }
        .split-content p { color: var(--text-gray); margin-bottom: 32px; font-size: 18px; }
        .icon-list li { display: flex; gap: 16px; margin-bottom: 32px; }
        .icon-box { width: 40px; height: 40px; background: var(--bg-offwhite); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-green); flex-shrink: 0; font-weight: bold;}
        .icon-list-content h4 { font-size: 16px; margin-bottom: 8px; }
        .icon-list-content p { font-size: 14px; color: var(--text-gray); }

        /* Forms */
        .form-container {
            max-width: 500px;
            margin: 0 auto;
            background: var(--primary-white);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 14px;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 14px;
            border: 1px solid var(--border-light);
            border-radius: 8px;
            font-family: inherit;
        }
        .form-btn {
            width: 100%;
            padding: 14px;
            background: var(--primary-black);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }
        .form-btn:hover { background: #333; }

        /* Contact Grid */
        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
        }
        .contact-info-card {
            background: var(--primary-white);
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .contact-info-card h4 { margin-bottom: 10px; color: var(--accent-green); }

        /* Footer */
        footer {
            background: var(--primary-black);
            color: var(--primary-white);
            padding: 80px 0 40px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .footer-col h5 {
            font-size: 16px;
            margin-bottom: 24px;
            color: var(--primary-white);
        }

        .footer-col ul li { margin-bottom: 16px; }
        .footer-col ul li a { color: #a0aab2; font-size: 14px; transition: color 0.3s; }
        .footer-col ul li a:hover { color: var(--accent-green); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            padding-top: 24px;
            border-top: 1px solid #2a3432;
            color: #a0aab2;
            font-size: 12px;
        }

    </style>
</head>
<body>

    <header id="main-header">
        <div class="container nav-container">
            <div class="brand" onclick="navigateTo('home')">
                <div class="logo-icon"></div>
                <div class="brand-name">Clim Fin-Chain</div>
            </div>
            <nav class="nav-links">
                <a onclick="navigateTo('ecosystem')">Ecosystem</a>
                <a onclick="navigateTo('resources')">Resources</a>
                <a onclick="navigateTo('governance')">Governance</a>
                <a onclick="navigateTo('blog')">Blog</a>
                <a onclick="navigateTo('contact')">Contact</a>
            </nav>
            <div class="auth-btns">
                <a onclick="navigateTo('login')" class="btn btn-outline">LOGIN</a>
                <a onclick="navigateTo('register')" class="btn btn-accent">Register</a>
            </div>
        </div>
    </header>

    <main>
        <div id="page-home" class="page active">
            <section class="hero">
                <div class="container">
                    <div class="hero-label">CLIM FIN-CHAIN</div>
                    <h1>Open infrastructure for carbon markets.</h1>
                    <p>A public good for climate finance, bridging decentralized tech with ecological assets.</p>
                    <div class="hero-btns">
                        <a onclick="navigateTo('register')" class="btn btn-accent">Get Started</a>
                        <a onclick="navigateTo('resources')" class="btn btn-outline">Read the Docs</a>
                    </div>
                </div>
            </section>

            <section class="problem-section">
                <div class="container">
                    <div class="problem-grid">
                        <div class="problem-title">
                            Carbon markets suffer from fragmentation, opacity, and inconsistent quality standards.
                        </div>
                        <div class="problem-text">
                            <p style="margin-bottom: 16px; font-weight: 600; color: #111;">Clim Fin-Chain solves this.</p>
                            <p>Traditional carbon markets rely on outdated infrastructure, making it difficult for individuals and businesses to navigate, verify, and retire carbon credits effectively.</p>
                            <br>
                            <p>By bringing carbon credits onto the blockchain, Clim Fin-Chain creates an open, transparent, and programmable ecosystem for carbon markets—driving climate action at scale.</p>
                        </div>
                    </div>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <h3>6+</h3>
                            <p>Supported Registries</p>
                        </div>
                        <div class="stat-item">
                            <h3>500K+</h3>
                            <p>Tons Retired</p>
                        </div>
                        <div class="stat-item">
                            <h3>12</h3>
                            <p>Carbon Bridges</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="infrastructure-section">
                <div class="container">
                    <span class="section-label">THE PLATFORM</span>
                    <h2>Infrastructure for transparent & programmatic carbon markets</h2>
                    
                    <div class="feature-card">
                        <div>
                            <h3>Traceable, verified transactions.</h3>
                            <p>Interacting with tokenized carbon credits ensures absolute transparency. Every transaction is immutably recorded on our robust blockchain infrastructure.</p>
                            <a onclick="navigateTo('resources')" class="btn btn-primary">Learn more</a>
                        </div>
                        <div>
                            <ul class="check-list">
                                <li>Transparent, live data</li>
                                <li>Zero counterparty risk</li>
                                <li>Global standardization</li>
                                <li>Public, immutable ledger</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section class="split-section">
                <div class="container">
                    <div class="split-grid">
                        <div class="split-content">
                            <span class="section-label">FOR ORGANIZATIONS</span>
                            <h2>Procure and retire carbon with confidence</h2>
                            <p>Offset your carbon footprint programmatically, instantly, and transparently using tokenized carbon credits sourced from the highest quality global registries.</p>
                            <a onclick="navigateTo('login')" class="btn btn-primary">Enter App - Retire Credits</a>
                        </div>
                        <div class="split-list">
                            <ul class="icon-list">
                                <li>
                                    <div class="icon-box">✓</div>
                                    <div class="icon-list-content">
                                        <h4>Transparent Pricing</h4>
                                        <p>Access deep liquidity pools ensuring fair market value without hidden broker fees.</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="icon-box">✓</div>
                                    <div class="icon-list-content">
                                        <h4>Verified Issuance</h4>
                                        <p>Source credits bridged from top tier verified registries globally.</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div id="page-ecosystem" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <span class="section-label">ECOSYSTEM</span>
                    <h1 class="inner-title">Join the Climate Web3 Network</h1>
                    <p style="max-width: 600px; color: var(--text-gray); margin-bottom: 40px;">
                        Connect directly to the largest web3 ecosystem of environmentally conscious individuals, organizations, and protocols looking to offset their emissions.
                    </p>
                    <div class="split-grid">
                        <div class="contact-info-card">
                            <h3>Build a Dapp</h3>
                            <p style="margin-top: 10px;">Leverage our open-source contracts to integrate carbon offsetting natively into your application.</p>
                        </div>
                        <div class="contact-info-card">
                            <h3>Provide Liquidity</h3>
                            <p style="margin-top: 10px;">Earn rewards by providing liquidity to carbon pools on decentralized exchanges.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="page-resources" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <span class="section-label">RESOURCES</span>
                    <h1 class="inner-title">Documentation & Guides</h1>
                    <p>Access everything you need to start building, trading, and retiring on Clim Fin-Chain.</p>
                    <br>
                    <a href="#" class="btn btn-primary">View Developer Docs</a>
                    <a href="#" class="btn btn-outline" style="color: var(--primary-black); border-color: var(--primary-black);">Read the Whitepaper</a>
                </div>
            </div>
        </div>

        <div id="page-governance" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <span class="section-label">GOVERNANCE</span>
                    <h1 class="inner-title">Decentralized Decision Making</h1>
                    <p>Clim Fin-Chain is governed by its community. Propose, debate, and vote on the future of the protocol.</p>
                    <br>
                    <div class="contact-info-card" style="max-width: 500px;">
                        <h4>Active Proposals</h4>
                        <p>No active proposals at this time. Check back later or join the forum to start a discussion.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="page-blog" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <span class="section-label">LATEST NEWS</span>
                    <h1 class="inner-title">Clim Fin-Chain Blog</h1>
                    <div class="split-grid">
                        <div class="contact-info-card">
                            <span style="font-size: 12px; color: var(--text-gray);">Jul 7, 2026</span>
                            <h3 style="margin: 10px 0;">Expanding our Bridge Network</h3>
                            <p>Read about our latest integration with new global carbon registries.</p>
                        </div>
                        <div class="contact-info-card">
                            <span style="font-size: 12px; color: var(--text-gray);">Jun 22, 2026</span>
                            <h3 style="margin: 10px 0;">The Future of On-Chain Liquidity</h3>
                            <p>How AMMs are solving the traditional carbon market's liquidity crisis.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="page-contact" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <div class="contact-layout">
                        <div>
                            <span class="section-label">GET IN TOUCH</span>
                            <h1 class="inner-title">Contact Us</h1>
                            <p style="margin-bottom: 40px; color: var(--text-gray);">Have questions about integrating with Clim Fin-Chain or retiring credits? Reach out to our team.</p>
                            
                            <div class="contact-info-card">
                                <h4>ClimFin Innovations Ltd.</h4>
                                <p><strong>Address:</strong><br>123 Green Block Ave, Tech District<br>San Francisco, CA 94105</p>
                                <br>
                                <p><strong>Phone:</strong><br>+1 (555) 019-8472</p>
                                <br>
                                <p><strong>Email:</strong><br>hello@climfinchain.io</p>
                            </div>
                        </div>
                        <div>
                            <div class="form-container">
                                <h3 style="margin-bottom: 24px;">Send a Message</h3>
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" placeholder="John Doe">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" placeholder="john@company.com">
                                </div>
                                <div class="form-group">
                                    <label>Message</label>
                                    <textarea rows="4" placeholder="How can we help you?"></textarea>
                                </div>
                                <button class="form-btn">Submit Request</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="page-login" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <div class="form-container" style="margin-top: 40px;">
                        <h2 style="text-align: center; margin-bottom: 30px;">Welcome Back</h2>
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" placeholder="Enter your email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" placeholder="Enter your password">
                        </div>
                        <button class="form-btn">Login to Dashboard</button>
                        <p style="text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-gray);">
                            Don't have an account? <a onclick="navigateTo('register')" style="color: var(--accent-green); font-weight: 600;">Register here</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="page-register" class="page">
            <div class="inner-page-wrapper">
                <div class="container">
                    <div class="form-container" style="margin-top: 40px;">
                        <h2 style="text-align: center; margin-bottom: 30px;">Create an Account</h2>
                        <div class="form-group">
                            <label>Full Name / Organization</label>
                            <input type="text" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" placeholder="Enter your email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" placeholder="Create a strong password">
                        </div>
                        <button class="form-btn">Register Account</button>
                        <p style="text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-gray);">
                            Already have an account? <a onclick="navigateTo('login')" style="color: var(--accent-green); font-weight: 600;">Login here</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col" style="grid-column: span 2;">
                    <div class="brand" style="margin-bottom: 20px; cursor: default;">
                        <div class="logo-icon"></div>
                        <div class="brand-name">Clim Fin-Chain</div>
                    </div>
                    <p style="color: #a0aab2; font-size: 14px; max-width: 280px; margin-bottom: 20px;">
                        Owned by <strong>ClimFin Innovations Ltd.</strong><br>
                        123 Green Block Ave, Tech District,<br>San Francisco, CA 94105
                    </p>
                    <p style="color: #a0aab2; font-size: 14px;">
                        hello@climfinchain.io <br> +1 (555) 019-8472
                    </p>
                </div>
                <div class="footer-col">
                    <h5>Ecosystem</h5>
                    <ul>
                        <li><a onclick="navigateTo('login')">Enter App</a></li>
                        <li><a onclick="navigateTo('ecosystem')">Retire Credits</a></li>
                        <li><a onclick="navigateTo('ecosystem')">Carbon Data</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h5>Resources</h5>
                    <ul>
                        <li><a onclick="navigateTo('resources')">Documentation</a></li>
                        <li><a onclick="navigateTo('blog')">Blog</a></li>
                        <li><a onclick="navigateTo('contact')">Support</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h5>Protocol</h5>
                    <ul>
                        <li><a onclick="navigateTo('governance')">Governance</a></li>
                        <li><a href="#">Github</a></li>
                        <li><a href="#">Contracts</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <div>© 2026 Clim Fin-Chain (ClimFin Innovations Ltd.). All rights reserved.</div>
                <div><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></div>
            </div>
        </div>
    </footer>

    <script>
        function navigateTo(pageId) {
            // Hide all pages
            const pages = document.querySelectorAll('.page');
            pages.forEach(page => {
                page.classList.remove('active');
            });

            // Show selected page
            const targetPage = document.getElementById('page-' + pageId);
            if(targetPage) {
                targetPage.classList.add('active');
            }

            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });

            // Manage header style (solid background on inner pages, transparent on home hero)
            const header = document.getElementById('main-header');
            if(pageId === 'home') {
                header.classList.remove('solid-bg');
            } else {
                header.classList.add('solid-bg');
            }
        }

        // Add scroll listener for home page header behavior
        window.addEventListener('scroll', () => {
            const header = document.getElementById('main-header');
            const homePage = document.getElementById('page-home');
            
            // Only toggle transparent/solid on scroll if we are on the home page
            if(homePage.classList.contains('active')) {
                if (window.scrollY > 50) {
                    header.classList.add('solid-bg');
                } else {
                    header.classList.remove('solid-bg');
                }
            }
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`