landing.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trifecta-Bro | Australian Gallops Trifecta Predictions</title>
    <meta name="description" content="Data-driven trifecta predictions for Australian Thoroughbred racing. PDF booklets, confidence ratings, and value combinations every race day.">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #1a1a1a; background: #ffffff; }
        .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
        
        /* Header */
        header { background: #0f172a; color: white; padding: 20px 0; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }
        .logo span { color: #38bdf8; }
        nav a { color: #cbd5e1; text-decoration: none; margin-left: 24px; font-size: 0.95rem; }
        nav a:hover { color: white; }
        
        /* Hero */
        .hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: white; padding: 80px 0 60px; text-align: center; }
        .hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 16px; line-height: 1.1; }
        .hero h1 span { color: #38bdf8; }
        .hero p { font-size: 1.25rem; color: #cbd5e1; max-width: 640px; margin: 0 auto 32px; }
        .hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: 1rem; text-decoration: none; display: inline-block; transition: transform 0.1s; border: none; cursor: pointer; }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { background: #38bdf8; color: #0f172a; }
        .btn-secondary { background: transparent; color: white; border: 1px solid #475569; }
        
        /* Stats bar */
        .stats { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 40px 0; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: center; }
        .stat h3 { font-size: 2rem; color: #0f172a; margin-bottom: 4px; }
        .stat p { color: #64748b; font-size: 0.9rem; }
        
        /* How it works */
        .section { padding: 64px 0; }
        .section-title { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 12px; }
        .section-subtitle { text-align: center; color: #64748b; margin-bottom: 40px; font-size: 1.1rem; }
        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
        .feature { padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: white; }
        .feature h3 { font-size: 1.15rem; margin-bottom: 8px; color: #0f172a; }
        .feature p { color: #475569; font-size: 0.95rem; }
        
        /* Sample predictions */
        .sample { background: #f8fafc; }
        .sample-table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .sample-table th { background: #0f172a; color: white; padding: 14px 16px; text-align: left; font-weight: 600; }
        .sample-table td { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
        .sample-table tr:last-child td { border-bottom: none; }
        .badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
        .badge-primary { background: #dbeafe; color: #1e40af; }
        .badge-secondary { background: #fef3c7; color: #92400e; }
        .badge-value { background: #d1fae5; color: #065f46; }
        
        /* Pricing */
        .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
        .pricing-card { border: 2px solid #e2e8f0; border-radius: 12px; padding: 32px; text-align: center; background: white; position: relative; }
        .pricing-card.featured { border-color: #38bdf8; box-shadow: 0 4px 12px rgba(56,189,248,0.15); }
        .pricing-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
        .price { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin: 16px 0; }
        .price span { font-size: 1rem; color: #64748b; font-weight: 400; }
        .pricing-card ul { list-style: none; margin: 20px 0; text-align: left; }
        .pricing-card li { padding: 8px 0; color: #334155; }
        .pricing-card li::before { content: "✓ "; color: #38bdf8; font-weight: 700; }
        .popular-badge { position: absolute; top: -12px; right: 20px; background: #38bdf8; color: #0f172a; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; }
        
        /* FAQ */
        .faq { max-width: 720px; margin: 0 auto; }
        .faq-item { border-bottom: 1px solid #e2e8f0; padding: 20px 0; }
        .faq-item h4 { font-size: 1.05rem; margin-bottom: 8px; color: #0f172a; }
        .faq-item p { color: #475569; }
        
        /* CTA */
        .cta { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: white; text-align: center; padding: 64px 0; }
        .cta h2 { font-size: 2.25rem; margin-bottom: 16px; }
        .cta p { color: #cbd5e1; margin-bottom: 24px; font-size: 1.1rem; }
        
        footer { background: #0f172a; color: #94a3b8; padding: 40px 0; text-align: center; font-size: 0.9rem; }
        footer a { color: #cbd5e1; text-decoration: none; }
        
        @media (max-width: 640px) {
            .hero h1 { font-size: 2rem; }
            .section-title { font-size: 1.5rem; }
        }
    </style>
</head>
<body>

<header>
    <div class="container header-content">
        <div class="logo">Trifecta<span>-Bro</span></div>
        <nav>
            <a href="#how-it-works">How it works</a>
            <a href="#predictions">Sample</a>
            <a href="#pricing">Pricing</a>
            <a href="#faq">FAQ</a>
        </nav>
    </div>
</header>

<section class="hero">
    <div class="container">
        <h1>Smarter trifectas for<br><span>Australian Gallops</span></h1>
        <p>Form-driven predictions, confidence ratings, and PDF race booklets delivered every meeting. Built for punters who want structure over noise.</p>
        <div class="hero-btns">
            <a href="#pricing" class="btn btn-primary">View Plans</a>
            <a href="#how-it-works" class="btn btn-secondary">See How It Works</a>
        </div>
    </div>
</section>

<section class="stats">
    <div class="container">
        <div class="stats-grid">
            <div class="stat">
                <h3>47+</h3>
                <p>Races covered per meeting day</p>
            </div>
            <div class="stat">
                <h3>6</h3>
                <p>Factor scoring model</p>
            </div>
            <div class="stat">
                <h3>Primary / Secondary / Value</h3>
                <p>Trifecta combinations per race</p>
            </div>
            <div class="stat">
                <h3>PDF</h3>
                <p>Booklet downloads included</p>
            </div>
        </div>
    </div>
</section>

<section id="how-it-works" class="section">
    <div class="container">
        <h2 class="section-title">How it works</h2>
        <p class="section-subtitle">From race data to finished trifecta selections, automatically.</p>
        <div class="features">
            <div class="feature">
                <h3>1. Race data ingestion</h3>
                <p>We pull runner form, track conditions, barrier draws, jockey and trainer stats for every available meeting.</p>
            </div>
            <div class="feature">
                <h3>2. Weighted scoring</h3>
                <p>Each runner is scored across form, ground suitability, jockey advantage, barrier position, value and trainer form.</p>
            </div>
            <div class="feature">
                <h3>3. Combination generation</h3>
                <p>We output primary, secondary and value trifecta combinations plus confidence ratings and roughie notes.</p>
            </div>
            <div class="feature">
                <h3>3. PDF delivery</h3>
                <p>Race booklets are generated and published so you can study selections offline before the gates open.</p>
            </div>
        </div>
    </div>
</section>

<section id="predictions" class="section sample">
    <div class="container">
        <h2 class="section-title">Sample predictions</h2>
        <p class="section-subtitle">What a race-day selection looks like.</p>
        <table class="sample-table">
            <thead>
                <tr>
                    <th>Race</th>
                    <th>Distance / Condition</th>
                    <th>Primary</th>
                    <th>Secondary</th>
                    <th>Value</th>
                    <th>Confidence</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>R1</td>
                    <td>1200m / Soft 6</td>
                    <td><span class="badge badge-primary">3-7-1</span></td>
                    <td><span class="badge badge-secondary">3-1-9</span></td>
                    <td><span class="badge badge-value">7-3-5</span></td>
                    <td>MEDIUM-HIGH</td>
                </tr>
                <tr>
                    <td>R2</td>
                    <td>1400m / Heavy 10</td>
                    <td><span class="badge badge-primary">6-2-4</span></td>
                    <td><span class="badge badge-secondary">6-4-8</span></td>
                    <td><span class="badge badge-value">2-6-11</span></td>
                    <td>MEDIUM</td>
                </tr>
                <tr>
                    <td>R3</td>
                    <td>1600m / Good 4</td>
                    <td><span class="badge badge-primary">1-5-2</span></td>
                    <td><span class="badge badge-secondary">1-2-9</span></td>
                    <td><span class="badge badge-value">5-1-3</span></td>
                    <td>MEDIUM-HIGH</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

<section id="pricing" class="section">
    <div class="container">
        <h2 class="section-title">Simple pricing</h2>
        <p class="section-subtitle">Start with a meet pass, then go weekly if it fits your workflow.</p>
        <div class="pricing-grid">
            <div class="pricing-card">
                <h3>Single Meet</h3>
                <div class="price">$4<span>/meet</span></div>
                <ul>
                    <li>One track PDF booklet</li>
                    <li>Primary, secondary and value combos</li>
                    <li>Confidence ratings</li>
                    <li>Instant download</li>
                </ul>
                <a href="#" class="btn btn-secondary" style="width:100%; margin-top:8px;">Buy Pass</a>
            </div>
            <div class="pricing-card featured">
                <div class="popular-badge">Most popular</div>
                <h3>Weekly Pass</h3>
                <div class="price">$9<span>/week</span></div>
                <ul>
                    <li>All Australian meetings</li>
                    <li>PDF booklets every race day</li>
                    <li>Backtest + ROI report</li>
                    <li>Priority updates</li>
                </ul>
                <a href="#" class="btn btn-primary" style="width:100%; margin-top:8px;">Get Weekly</a>
            </div>
            <div class="pricing-card">
                <h3>Monthly</h3>
                <div class="price">$19<span>/month</span></div>
                <ul>
                    <li>Everything in Weekly</li>
                    <li>Archived predictions</li>
                    <li>Model variant comparisons</li>
                    <li>Support via email</li>
                </ul>
                <a href="#" class="btn btn-secondary" style="width:100%; margin-top:8px;">Go Monthly</a>
            </div>
        </div>
    </div>
</section>

<section id="faq" class="section">
    <div class="container">
        <h2 class="section-title">FAQ</h2>
        <div class="faq">
            <div class="faq-item">
                <h4>What data do you use?</h4>
                <p>We combine publicly available race form with track-condition weighting, barrier analysis, jockey and trainer form. Predictions are generated from open tooling, not opaque tips.</p>
            </div>
            <div class="faq-item">
                <h4>Which tracks are covered?</h4>
                <p>We target major Australian Gallops meetings. Coverage depends on form-data availability for the day; if a track is missing, it is usually an API/availability issue, not a paywall.</p>
            </div>
            <div class="faq-item">
                <h4>Are these guaranteed wins?</h4>
                <p>No. Trifecta-Bro is an analysis and publishing tool. All predictions are informational only and should be treated as one input among many.</p>
            </div>
            <div class="faq-item">
                <h4>How do I get my PDF?</h4>
                <p>After purchase, a download link is issued for that meet's booklet. Weekly and monthly subscribers get race-morning access through the subscriber area.</p>
            </div>
        </div>
    </div>
</section>

<section class="cta">
    <div class="container">
        <h2>Ready to see the next meet?</h2>
        <p>Get PDF race booklets and trifecta combinations for the next Australian Gallops meeting.</p>
        <a href="#pricing" class="btn btn-primary">View Plans</a>
    </div>
</section>

<footer>
    <div class="container">
        <p>Trifecta-Bro is an analysis tool, not a gambling service. Gamble responsibly. 18+ only.</p>
        <p style="margin-top:8px;">© <span id="year"></span> Trifecta-Bro. All rights reserved.</p>
    </div>
</footer>

<script>document.getElementById('year').textContent = new Date().getFullYear();</script>

</body>
</html>