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/agrifood.cloud/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>AGRI-Food - Market Intelligence</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* --- CSS Variables & Resets --- */
        :root {
            --primary-color: #004d26; /* Deep Green */
            --secondary-green: #006b35;
            --dark-bg: #002812;
            --text-dark: #1a1a1a;
            --text-gray: #555555;
            --light-bg: #e8f4ed;
            --border-color: #e5e7eb;
            --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-main);
            color: var(--text-dark);
            line-height: 1.6;
            background-color: #fff;
            overflow-x: hidden;
        }

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

        ul {
            list-style: none;
        }

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

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

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

        .btn-outline {
            background-color: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .btn-outline:hover {
            background-color: #f0fdf4;
        }

        .btn-white {
            background-color: white;
            color: var(--primary-color);
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: inline-block;
        }

        .btn-white:hover {
            background-color: #e5f5ed;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .section-desc {
            font-size: 1rem;
            color: var(--text-gray);
            max-width: 700px;
            margin: 0 auto 3rem auto;
        }

        /* --- Page Management --- */
        .page {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }

        .page.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- Header / Navbar --- */
        .navbar {
            padding: 20px 0;
            border-bottom: 1px solid #f0f0f0;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

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

        .logo {
            font-weight: 800;
            font-size: 1.5rem;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .logo i {
            font-size: 1.2rem;
        }

        .nav-links {
            display: flex;
            gap: 25px;
            font-size: 0.9rem;
            font-weight: 500;
        }

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

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .nav-actions i {
            font-size: 1.1rem;
            color: #666;
            cursor: pointer;
        }

        /* --- Hero Section --- */
        .hero {
            padding: 80px 0;
            background: #fcfdfc;
        }
        
        .hero-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .hero-content h1 span {
            color: var(--primary-color);
        }

        .hero-content p {
            font-size: 1.1rem;
            color: var(--text-gray);
            margin-bottom: 30px;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .hero-buttons .btn-outline {
            border: none;
            background: transparent;
            color: #1a1a1a;
            text-decoration: underline;
            padding: 0;
        }

        .hero-image-wrap {
            position: relative;
            height: 450px;
            border-radius: 20px;
            border: 8px solid white;
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
            overflow: hidden;
            background: #e8f4ed;
        }

        .hero-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hero-image-overlay {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 15px 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .hero-image-overlay i {
            color: var(--primary-color);
        }

        /* --- Stats Section --- */
        .stats {
            background: #f9fbf9;
            padding: 30px 0;
            text-align: center;
        }

        .stats-grid {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 2px solid var(--primary-color);
            padding-top: 20px;
            position: relative;
        }
        
        .stats-grid::before {
            content: '';
            position: absolute;
            top: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e5e7eb;
            z-index: 1;
        }

        .stat-item {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .stat-item h3 {
            font-size: 2rem;
            margin-bottom: 5px;
        }

        .stat-item p {
            font-size: 0.9rem;
            color: var(--text-gray);
        }

        .stat-item::after {
            content: '';
            position: absolute;
            bottom: -22px;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background: var(--primary-color);
            border-radius: 50%;
        }

        /* --- Features Section --- */
        .features {
            padding: 80px 0;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .feature-card {
            padding: 20px;
        }

        .feature-card i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .feature-card h4 {
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .feature-card p {
            font-size: 0.9rem;
            color: var(--text-gray);
            line-height: 1.5;
        }

        /* --- Trusted By Section --- */
        .trusted-by {
            background: #f0f6f2;
            padding: 50px 0;
            text-align: center;
        }

        .trusted-by h4 {
            font-weight: 400;
            color: var(--text-dark);
            margin-bottom: 30px;
        }

        .logo-grid {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
        }

        .client-logo {
            font-weight: 700;
            font-size: 1.2rem;
            color: #666;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* --- Calculator Section --- */
        .calculator {
            padding: 80px 0;
            text-align: center;
        }

        .calc-box {
            background: white;
            border: 1px solid #e5e7eb;
            padding: 40px;
            border-radius: 20px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        }

        .calc-group {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            border: 1px solid #e5e7eb;
            padding: 5px;
            border-radius: 50px;
            align-items: center;
            background: white;
        }

        .calc-group select {
            flex: 1;
            border: none;
            padding: 15px 20px;
            outline: none;
            background: transparent;
            font-size: 1rem;
            color: #555;
        }

        .calc-group .btn-primary {
            border-radius: 50px;
            padding: 14px 30px;
        }

        .calc-desc {
            font-size: 0.8rem;
            color: #888;
            margin-top: 20px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Intelligence Section --- */
        .intelligence {
            padding: 80px 0;
            background: #f4f7f5;
            text-align: center;
        }

        .intelligence-imgs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 40px 0;
            flex-wrap: wrap;
        }

        .intelligence-imgs img {
            height: 350px;
            border-radius: 10px;
            border: 10px solid white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            object-fit: cover;
        }

        /* --- Powerful Tools Section --- */
        .tools {
            padding: 80px 0;
            text-align: center;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 40px;
            text-align: left;
        }

        .tool-card {
            background: white;
            border: 1px solid #f0f0f0;
            padding: 30px;
            border-radius: 15px;
            transition: transform 0.3s ease;
        }

        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .tool-card h4 {
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        .tool-card p {
            color: var(--text-gray);
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .tool-card a {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 0.9rem;
        }

        .tool-card img {
            width: 100%;
            border-radius: 8px;
            margin-top: 20px;
            border: 1px solid #eee;
        }

        /* --- Transform Business Section --- */
        .transform {
            padding: 80px 0;
            background: #f4f7f5;
            text-align: center;
        }

        .transform-pills {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .pill {
            padding: 8px 20px;
            border-radius: 20px;
            border: 1px solid #ccc;
            background: white;
            color: #555;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .pill.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .pill:hover {
            border-color: var(--primary-color);
        }

        .transform-content {
            display: flex;
            justify-content: space-between;
            text-align: left;
            gap: 40px;
            max-width: 900px;
            margin: 0 auto;
        }

        .transform-left h4 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .transform-left p {
            color: var(--text-gray);
            margin-bottom: 20px;
        }

        .transform-right ul {
            list-style: none;
        }

        .transform-right ul li {
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .transform-right ul li i {
            color: var(--primary-color);
        }

        .transform-cta {
            margin-top: 20px;
        }

        /* --- Testimonial Section --- */
        .testimonial {
            padding: 100px 0;
            background: #f9fbf9;
        }
        
        .testimonial-content {
            display: flex;
            gap: 40px;
            align-items: center;
            background: white;
            border-radius: 20px;
            padding: 50px;
            border: 1px solid #e5e7eb;
        }

        .testimonial-icon {
            font-size: 6rem;
            color: #dddfdd;
            font-family: serif;
            line-height: 0.8;
        }

        .testimonial-text h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .testimonial-text p {
            color: var(--text-gray);
            font-size: 0.95rem;
        }
        
        .testimonial-author {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .testimonial-author img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* --- Bottom CTA --- */
        .bottom-cta {
            background: var(--dark-bg);
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        .bottom-cta h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .bottom-cta p {
            max-width: 600px;
            margin: 0 auto 30px auto;
            color: #b7cfc2;
            font-size: 1.1rem;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        /* --- Footer --- */
        .footer-main {
            background: #011a0e;
            color: white;
            padding: 60px 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
            gap: 40px;
        }

        .footer-logo h3 {
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 20px;
        }

        .footer-logo p {
            color: #8fa89c;
            font-size: 0.9rem;
        }

        .footer-col h4 {
            margin-bottom: 20px;
            font-size: 1rem;
        }

        .footer-col ul li {
            margin-bottom: 10px;
        }

        .footer-col ul li a {
            color: #b7cfc2;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .footer-col ul li a:hover {
            color: white;
        }

        .footer-bottom {
            border-top: 1px solid #1a3a2b;
            padding-top: 30px;
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 0.85rem;
            color: #8fa89c;
            text-align: center;
            gap: 10px;
        }

        .footer-info {
            margin-bottom: 15px;
            border-bottom: 1px solid #1a3a2b;
            padding-bottom: 15px;
        }

        .footer-info span {
            display: inline-block;
            margin: 0 15px;
        }

        .footer-socials {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .footer-socials i {
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .footer-socials i:hover {
            color: white;
        }

        /* --- Internal Pages Styles --- */
        .page-content {
            padding: 80px 0;
            min-height: 60vh;
            text-align: center;
        }
        .page-content h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .page-content p {
            color: var(--text-gray);
            margin-bottom: 15px;
        }
        .page-content .container {
            max-width: 800px;
        }

        /* --- Responsive Design Tweaks --- */
        @media (max-width: 1024px) {
            .features-grid { grid-template-columns: 1fr 1fr; }
            .tools-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .hero-container { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-actions { gap: 10px; }
            .hero-content h1 { font-size: 2.5rem; }
            .stats-grid { flex-direction: column; gap: 30px; }
            .stat-item::after { display: none; }
            .transform-content { flex-direction: column; }
            .testimonial-content { flex-direction: column; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 20px; align-items: center; }
            .nav-container { justify-content: space-between; }
        }
    </style>
</head>
<body>

    <!-- Header / Navbar -->
    <header class="navbar">
        <div class="container nav-container">
            <div class="logo">
                <i class="fas fa-seedling"></i> AGRI-Food
            </div>
            <ul class="nav-links">
                <li><a href="#" onclick="showPage('home')">Home</a></li>
                <li><a href="#" onclick="showPage('markets')">Markets</a></li>
                <li><a href="#" onclick="showPage('forecasts')">Forecasts</a></li>
                <li><a href="#" onclick="showPage('solutions')">Solutions</a></li>
                <li><a href="#" onclick="showPage('products')">Products</a></li>
                <li><a href="#" onclick="showPage('why-expana')">Why AGRI-Food</a></li>
                <li><a href="#" onclick="showPage('insights')">Insights</a></li>
                <li><a href="#" onclick="showPage('methodologies')">Methodologies</a></li>
            </ul>
            <div class="nav-actions">
                <button class="btn-outline" onclick="alert('Login page clicked')">Login</button>
                <button class="btn-primary" onclick="alert('Register page clicked')">Register</button>
                <i class="fas fa-bars" style="display:none;"></i> <!-- Mobile icon -->
            </div>
        </div>
    </header>

    <!-- ========================================== -->
    <!-- START: HOME PAGE (10+ Sections included)    -->
    <!-- ========================================== -->
    <section id="home" class="page active">
        <!-- 1. Hero Section -->
        <section class="hero" style="padding-top: 20px;">
            <div class="container hero-container">
                <div class="hero-content">
                    <h1>Your market intelligence partner, guiding the decisions that <span>feed</span> our world</h1>
                    <p>AGRI-Food is the world's leading agrifood-focused Price Reporting Agency and provider of market intelligence and data. We empower market participants and agribusinesses across the globe to make informed decisions.</p>
                    <div class="hero-buttons">
                        <button class="btn-primary" onclick="showPage('products')">Get started</button>
                        <button class="btn-outline" onclick="showPage('why-expana')">Why AGRI-Food</button>
                    </div>
                </div>
                <div class="hero-image-wrap">
                    <!-- Replace src with "expanaAnimation.gif" -->
                    <img src="expanaAnimation.gif" alt="AGRI-Food Hero Banner">
                    <div class="hero-image-overlay">
                        <i class="fas fa-circle-check"></i>
                        <div>
                            <strong>Your trusted</strong><br>
                            <span style="font-size:0.8rem; color: #555;">market leader</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. Stats Section -->
        <section class="stats">
            <div class="container">
                <div class="stats-grid">
                    <div class="stat-item">
                        <h3>Largest</h3>
                        <p>P&R-A agrifood offering<br>globally</p>
                    </div>
                    <div class="stat-item">
                        <h3>36,000+</h3>
                        <p>Time series across food<br>and beverage</p>
                    </div>
                    <div class="stat-item">
                        <h3>2,000+</h3>
                        <p>Time series & prices<br>processed</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. Features Section -->
        <section class="features">
            <div class="container">
                <div class="features-grid">
                    <div class="feature-card">
                        <i class="fas fa-bullseye"></i>
                        <h4>Trusted market leader</h4>
                        <p>Our independent market data and actionable intelligence empower organizations to make informed decisions with confidence.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-chart-line"></i>
                        <h4>Actionable market intelligence</h4>
                        <p>Our unparalleled coverage empowers market participants across the agriculture and food supply chain.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-boxes-stacked"></i>
                        <h4>Comprehensive commodity data</h4>
                        <p>Our expansive data sets cover a full suite of commodities, from grains and oilseeds to dairy, seafood, meat, and more.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-landmark"></i>
                        <h4>Leading authority</h4>
                        <p>We provide market data and insights from industry experts, delivering actionable intelligence and independent benchmarks.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. Trusted By Section -->
        <section class="trusted-by">
            <div class="container">
                <h4>Empowering businesses across the globe</h4>
                <div class="logo-grid">
                    <div class="client-logo"><i class="fas fa-seedling"></i> Alliance</div>
                    <div class="client-logo"><i class="fas fa-ice-cream"></i> Unilever</div>
                    <div class="client-logo"><i class="fas fa-candy-cane"></i> Mars</div>
                    <div class="client-logo"><i class="fas fa-hamburger"></i> McDonald's</div>
                    <div class="client-logo"><i class="fas fa-bottle-water"></i> Kraft Heinz</div>
                </div>
            </div>
        </section>

        <!-- 5. Calculator Section -->
        <section class="calculator">
            <div class="container">
                <h2 class="section-title">Find out how much you could save by using AGRI-Food</h2>
                <div class="calc-box">
                    <div class="calc-group">
                        <select>
                            <option>Choose a category</option>
                            <option>Market Data</option>
                            <option>Analytics</option>
                        </select>
                        <button class="btn-primary">Calculate</button>
                    </div>
                    <p class="calc-desc">The AGRI-Food Savings Calculator offers an estimate of how much you can save by utilizing our market data. We do not collect, store, or track this data.</p>
                </div>
            </div>
        </section>

        <!-- 6. Intelligence Section -->
        <section class="intelligence">
            <div class="container">
                <h2 class="section-title">Intelligence at your fingertips</h2>
                <p class="section-desc">We offer powerful data, world-class analysis, and intuitive tools. Our global team of experts provides actionable insights to drive better decision-making.</p>
                <div class="intelligence-imgs">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" alt="Data Dashboard">
                    <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=2070&auto=format&fit=crop" alt="Mobile Dashboard">
                </div>
                <button class="btn-primary" onclick="showPage('products')">Discover our platform</button>
            </div>
        </section>

        <!-- 7. Powerful Tools Section -->
        <section class="tools">
            <div class="container">
                <h2 class="section-title">Powerful tools that drive business success</h2>
                <p class="section-desc">Choose AGRI-Food and gain a unique set of tools and resources across the supply chain tailored to your needs.</p>
                
                <div class="tools-grid">
                    <div class="tool-card">
                        <h4>Boost profitability</h4>
                        <p>Whether you need to benchmark raw materials, track ingredient price trends, or identify opportunities, our robust price data empowers you to make better decisions.</p>
                        <a href="#" onclick="showPage('solutions')">Learn more <i class="fas fa-arrow-right"></i></a>
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Chart">
                    </div>
                    <div class="tool-card">
                        <h4>Mitigate risk</h4>
                        <p>From evaluating sources of raw materials to navigating price volatility, you can make faster, smarter market decisions to manage risk and effectively drive decision making.</p>
                        <a href="#" onclick="showPage('solutions')">Learn more <i class="fas fa-arrow-right"></i></a>
                        <img src="https://images.unsplash.com/photo-1590282234046-2c038c89bc4a?q=80&w=800&auto=format&fit=crop" alt="Chart">
                    </div>
                    <div class="tool-card">
                        <h4>Improve cost control</h4>
                        <p>By providing transparent, independent pricing benchmarks, AGRI-Food empowers you to accurately identify key cost drivers and measure price volatility.</p>
                        <a href="#" onclick="showPage('solutions')">Learn more <i class="fas fa-arrow-right"></i></a>
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Chart">
                    </div>
                    <div class="tool-card">
                        <h4>Drive efficiency</h4>
                        <p>AGRI-Food's comprehensive coverage of the global agrifood value chain, from commodity sourcing to consumer packaged goods, provides you with actionable data.</p>
                        <a href="#" onclick="showPage('solutions')">Learn more <i class="fas fa-arrow-right"></i></a>
                        <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=800&auto=format&fit=crop" alt="Chart">
                    </div>
                </div>
            </div>
        </section>

        <!-- 8. Transform Business Section -->
        <section class="transform">
            <div class="container">
                <h2 class="section-title">Transform your business with market-leading solutions</h2>
                <p class="section-desc">Designed for 2,000+ customers across the globe, our industry-specific data and analytical insights help you navigate market volatility.</p>
                
                <div class="transform-pills">
                    <button class="pill active">Produce</button>
                    <button class="pill">Meat</button>
                    <button class="pill">Dairy</button>
                    <button class="pill">Seafood</button>
                    <button class="pill">Grain & Oilseeds</button>
                    <button class="pill">Fertilizer</button>
                    <button class="pill">Packaging</button>
                    <button class="pill">Consumer Packaged Goods</button>
                </div>

                <div class="transform-content">
                    <div class="transform-left">
                        <h4>Unlock your competitive advantage</h4>
                        <p>AGRI-Food delivers actionable insights to help you track pricing trends for key commodities, enabling you to benchmark your contracts against industry standards.</p>
                        <button class="btn-primary transform-cta" onclick="showPage('products')">Get started</button>
                    </div>
                    <div class="transform-right">
                        <ul>
                            <li><i class="fas fa-circle-check"></i> Streamline your business and ensure compliance by tracking industry benchmarks.</li>
                            <li><i class="fas fa-circle-check"></i> Enhance your procurement and production decision-making.</li>
                            <li><i class="fas fa-circle-check"></i> Gain full visibility into global ingredient and raw material markets.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 9. Testimonial Section -->
        <section class="testimonial">
            <div class="container">
                <h2 class="section-title" style="text-align: center; margin-bottom: 40px;">See why businesses around the world choose AGRI-Food</h2>
                <div class="testimonial-content">
                    <div class="testimonial-icon">“</div>
                    <div class="testimonial-text">
                        <h3>An invaluable tool that supports a whole range of activities from top line communication and reporting to market based cost model negotiations.</h3>
                        <div class="testimonial-author">
                            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=200&auto=format&fit=crop" alt="Dean Brabant">
                            <div>
                                <strong>Dean Brabant</strong><br>
                                <span style="font-size:0.8rem; color:#666;">CEO, Green Leaf Foods</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 10. Bottom CTA -->
        <section class="bottom-cta">
            <div class="container">
                <h2>Supercharge your business with the power of AGRI-Food</h2>
                <p>Get ahead of the competition with actionable pricing intelligence, real-time data, and expert analysis to help you make smarter, data-driven decisions.</p>
                <div class="cta-buttons">
                    <button class="btn-white" onclick="showPage('products')">Get started</button>
                    <button class="btn-outline" style="border-color: white; color: white;" onclick="showPage('why-expana')">Why AGRI-Food</button>
                </div>
            </div>
        </section>
    </section>
    <!-- ========================================== -->
    <!-- END: HOME PAGE                              -->
    <!-- ========================================== -->


    <!-- ========================================== -->
    <!-- START: INDIVIDUAL MENU PAGES                -->
    <!-- ========================================== -->

    <section id="markets" class="page page-content">
        <div class="container">
            <h1>Global Markets</h1>
            <p>Explore real-time market data, price benchmarks, and supply chain intelligence across the globe.</p>
            <div style="margin-top: 30px; display:flex; justify-content:center; gap:15px;">
                <button class="btn-primary">View North America</button>
                <button class="btn-outline">View Europe</button>
                <button class="btn-outline">View Asia</button>
            </div>
        </div>
    </section>

    <section id="forecasts" class="page page-content">
        <div class="container">
            <h1>Market Forecasts</h1>
            <p>Leverage our advanced predictive analytics to stay ahead of price trends and make proactive business decisions.</p>
            <div style="margin-top: 30px;">
                <button class="btn-primary">Explore Forecasts</button>
            </div>
        </div>
    </section>

    <section id="solutions" class="page page-content">
        <div class="container">
            <h1>Custom Solutions</h1>
            <p>We tailor our actionable market intelligence to fit your specific supply chain, risk management, and procurement strategies.</p>
            <div style="margin-top: 30px;">
                <button class="btn-primary">Contact Our Team</button>
            </div>
        </div>
    </section>

    <section id="products" class="page page-content">
        <div class="container">
            <h1>Our Product Suite</h1>
            <p>From our flagship dashboard to customizable data feeds, discover the tools designed to supercharge your agrifood business.</p>
            <div style="margin-top: 30px;">
                <button class="btn-primary">View Demo</button>
            </div>
        </div>
    </section>

    <section id="why-expana" class="page page-content">
        <div class="container">
            <h1>Why AGRI-Food?</h1>
            <p>We are the trusted partner for 2,000+ global businesses. Our commitment to accuracy, transparency, and independent pricing sets us apart.</p>
            <div style="margin-top: 30px;">
                <button class="btn-primary">Read Our Story</button>
            </div>
        </div>
    </section>

    <section id="insights" class="page page-content">
        <div class="container">
            <h1>Industry Insights</h1>
            <p>Stay informed with the latest reports, thought leadership articles, and in-depth analysis on global agrifood markets.</p>
            <div style="margin-top: 30px;">
                <button class="btn-primary">Read Our Blog</button>
            </div>
        </div>
    </section>

    <section id="methodologies" class="page page-content">
        <div class="container">
            <h1>Our Methodologies</h1>
            <p>Transparency is key. Learn how we collect, process, and verify our pricing data to ensure the highest standards of market integrity.</p>
            <div style="margin-top: 30px;">
                <button class="btn-primary">Download Methods PDF</button>
            </div>
        </div>
    </section>
    <!-- ========================================== -->
    <!-- END: INDIVIDUAL MENU PAGES                  -->
    <!-- ========================================== -->


    <!-- Footer (Shared across all pages) -->
    <footer class="footer-main">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-logo">
                    <h3><i class="fas fa-seedling"></i> AGRI-Food</h3>
                    <p>AGRI-Food provides you with actionable data and pricing intelligence to help you make smarter business decisions in the global food and agriculture market.</p>
                </div>
                <div class="footer-col">
                    <h4>Product</h4>
                    <ul>
                        <li><a href="#" onclick="showPage('products')">AGRI-Food platform</a></li>
                        <li><a href="#" onclick="showPage('solutions')">Pricing intelligence</a></li>
                        <li><a href="#" onclick="showPage('forecasts')">Market forecasts</a></li>
                        <li><a href="#" onclick="showPage('insights')">Insights</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Company</h4>
                    <ul>
                        <li><a href="#" onclick="showPage('why-expana')">About us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Partner with us</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Resources</h4>
                    <ul>
                        <li><a href="#" onclick="showPage('methodologies')">Methodologies</a></li>
                        <li><a href="#" onclick="showPage('insights')">Blog</a></li>
                        <li><a href="#">FAQs</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Why AGRI-Food</h4>
                    <ul>
                        <li><a href="#" onclick="showPage('solutions')">Produce</a></li>
                        <li><a href="#" onclick="showPage('solutions')">Meat</a></li>
                        <li><a href="#" onclick="showPage('solutions')">Dairy</a></li>
                        <li><a href="#" onclick="showPage('solutions')">Seafood</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Updated Footer Details -->
            <div class="footer-bottom">
                <div class="footer-info">
                    <span><i class="fas fa-user-circle"></i> Owner: AGRI-Food Ltd.</span>
                    <span><i class="fas fa-map-pin"></i> Address: 123 Green Valley Road, Agri City, AG 90210, USA</span>
                    <span><i class="fas fa-phone"></i> Contact: +1 (800) 555-0199</span>
                    <span><i class="fas fa-envelope"></i> Email: support@agri-food.com</span>
                </div>
                <div>&copy; 2026 AGRI-Food. All Rights Reserved.</div>
                <div class="footer-socials">
                    <i class="fab fa-linkedin"></i>
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-facebook"></i>
                    <i class="fab fa-instagram"></i>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript for Multi-Page Navigation (SPA) -->
    <script>
        function showPage(pageId) {
            // Get all elements that are pages
            const pages = document.querySelectorAll('.page');
            
            // Hide all pages
            pages.forEach(page => {
                page.classList.remove('active');
                page.style.display = 'none';
            });

            // Show the targeted page
            const targetPage = document.getElementById(pageId);
            if (targetPage) {
                targetPage.style.display = 'block';
                // Use setTimeout to ensure display:block is applied before adding class for animation
                setTimeout(() => {
                    targetPage.classList.add('active');
                }, 10);
                
                // Scroll to the top of the page smoothly
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }

        // Initialize the app - Ensure Home is active on load
        document.addEventListener('DOMContentLoaded', () => {
            // Note: index.html will default to Home
            const defaultPage = document.getElementById('home');
            if (defaultPage) {
                defaultPage.style.display = 'block';
                defaultPage.classList.add('active');
            }
        });
    </script>

</body>
</html>
Back to Directory=ceiIENDB`