mr601s's picture
Create index.html
406c640 verified
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bullish Minds AI — Learn Personal Finance</title>
<meta name="description" content="AI-powered, teacher-friendly personal finance lessons aligned to Virginia EPF. Fast to start, safe by design." />
<meta property="og:title" content="Bullish Minds AI" />
<meta property="og:description" content="AI-powered, teacher-friendly personal finance lessons aligned to Virginia EPF." />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#0e7490" />
<link rel="icon" href="favicon.ico" />
<style>
:root{
--bg: #0b1220;
--card: #0f172a;
--muted: #94a3b8;
--text: #e2e8f0;
--accent: #06b6d4; /* teal-400 */
--accent-2: #22d3ee; /* cyan-400 */
--ring: rgba(34,211,238,.35);
--shadow: rgba(2,6,23,.6);
}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b1220 0%,#0b1220 60%,#0a0f1a 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 6px 18px var(--shadow);object-fit:contain;background:white}
.brand .name{font-weight:700;letter-spacing:.2px}
.nav a{margin-left:18px;color:var(--text);opacity:.9}
.nav a.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#003341;padding:10px 14px;border-radius:12px;font-weight:700;box-shadow:0 10px 22px rgba(6,182,212,.25);}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:36px 0 18px}
.hero h1{font-size: clamp(28px, 5vw, 44px);line-height:1.1;margin:0 0 12px}
.eyebrow{display:inline-block;background:rgba(34,211,238,.12);color:#a5f3fc;border:1px solid rgba(34,211,238,.35);padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:10px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 22px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:12px 16px;border:1px solid rgba(148,163,184,.15);color:var(--text);background:#0b1220;box-shadow:0 10px 26px rgba(2,6,23,.3)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#002a34;border-color:transparent;font-weight:800}
.btn:hover{transform:translateY(-1px);}
.hero-card{background:radial-gradient(1200px 500px at 10% -10%, rgba(34,211,238,.18), transparent 50%),var(--card);border:1px solid rgba(148,163,184,.12);border-radius:20px;box-shadow:0 30px 60px rgba(2,6,23,.45);padding:22px}
.hero-card img{width:100%;border-radius:12px;border:1px solid rgba(148,163,184,.15);background:white}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:16px;padding:18px;box-shadow:0 20px 40px rgba(2,6,23,.45)}
.card h3{margin:0 0 6px;font-size:18px}
.muted{color:var(--muted)}
.section{padding:36px 0}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;background:rgba(148,163,184,.15);padding:0 6px;border-radius:6px;border:1px solid rgba(148,163,184,.25)}
details{background:var(--card);border:1px solid rgba(148,163,184,.15);border-radius:16px;padding:16px}
details>summary{cursor:pointer;font-weight:700}
.footer{border-top:1px solid rgba(148,163,184,.12);padding:20px 0;color:var(--muted);font-size:14px}
.legal{font-size:12px;color:#8aa0b8}
@media (max-width: 900px){.hero{grid-template-columns:1fr}.hero-card{order:-1}}
</style>
</head>
<body>
<header>
<div class="container nav" role="navigation" aria-label="Main Navigation">
<div class="brand">
<img src="logo.png" alt="Bullish Minds AI logo" />
<div class="name">Bullish Minds AI<span style="opacity:.7"></span></div>
</div>
<nav>
<a href="#features">Features</a>
<a href="#trust">Trust</a>
<a href="#contact">Contact</a>
<a class="cta" href="https://huggingface.co/spaces/mr601s/BullishMindsAI-livedemo">Start Learning</a>
</nav>
</div>
</header>
<main>
<section class="container hero" aria-labelledby="hero-title">
<div>
<div class="eyebrow">Aligned to Virginia EPF • Teacher‑friendly • Student‑ready</div>
<h1 id="hero-title">Learn Personal Finance with AI—safe, engaging, and fast to start</h1>
<p>Bring <strong>Bullish Minds AI</strong> into your classroom in minutes. Teacher‑controlled lessons with quick checks, rural SWVA/NETN context, and a clear path to mastery.</p>
<div class="btns">
<a class="btn primary" href="https://huggingface.co/spaces/mr601s/BullishMindsAI-livedemo" aria-label="Start Learning">
<span></span> Start Learning
</a>
<a class="btn" href="mailto:hello@bullishminds.ai?subject=Pilot%20Request%20—%20Bullish%20Minds%20AI" aria-label="Request a pilot by email">Request a Pilot</a>
<a class="btn" href="#trust" aria-label="Read our Trust & Privacy details">Trust & Privacy</a>
</div>
</div>
<div class="hero-card" aria-hidden="true">
<img src="hero-preview.png" alt="App preview (placeholder)" />
<div class="muted" style="margin-top:8px;font-size:12px">Add a screenshot of your demo as <span class="kbd">hero-preview.png</span></div>
</div>
</section>
<section id="features" class="container section" aria-labelledby="features-title">
<h2 id="features-title">Why teachers choose Bullish Minds AI</h2>
<div class="grid" style="margin-top:12px">
<div class="card">
<h3>Time‑to‑value &lt; 15 min</h3>
<p class="muted">Open the demo and teach your first lesson. No SIS integration required for pilots.</p>
</div>
<div class="card">
<h3>Aligned & measurable</h3>
<p class="muted">Built for Virginia EPF; quick‑check pass rates and time‑on‑task reinforce learning goals.</p>
</div>
<div class="card">
<h3>Trust by design</h3>
<p class="muted">Pseudonymous by default, export/delete controls, and a clear FERPA/COPPA stance.</p>
</div>
</div>
</section>
<section class="container section" aria-labelledby="cta-title">
<h2 id="cta-title">Get started in one click</h2>
<p class="muted">Use the live demo now or book a 20‑minute onboarding. Your first pilot can start this week.</p>
<div class="btns" style="margin-top:8px">
<a class="btn primary" href="https://huggingface.co/spaces/mr601s/BullishMindsAI-livedemo">Start Learning</a>
<a class="btn" href="mailto:hello@bullishminds.ai?subject=Onboarding%20Request">Book Onboarding</a>
</div>
</section>
<section id="trust" class="container section" aria-labelledby="trust-title">
<h2 id="trust-title">Privacy, Safety & Responsible AI</h2>
<p class="muted">We minimize data, give teachers control, and publish how the system works. Highlights below—expand for details.</p>
<div class="grid" style="margin-top:12px">
<div class="card">
<h3>Plain‑English Summary</h3>
<p class="muted">No student PII required in demo. Pseudonymous IDs, export/delete controls, no ads. Encryption in transit.</p>
</div>
<div class="card">
<h3>Compliance</h3>
<p class="muted">Supports FERPA, COPPA (with school/parental consent), and PPRA. District DPAs available.</p>
</div>
<div class="card">
<h3>Model Card</h3>
<p class="muted">Intended for EPF learning support; not for high‑stakes grading. Age‑appropriate guardrails in place.</p>
</div>
</div>
<div style="margin-top:16px;display:grid;gap:12px">
<details>
<summary>Full Trust Pack (expand)</summary>
<div style="margin-top:12px;display:grid;gap:10px">
<h3>1) Trust Principles</h3>
<ul>
<li>Minimal data: pseudonymous by default</li>
<li>Transparency: plain‑language disclosures</li>
<li>Control: teacher export/delete</li>
<li>Security: TLS; least‑privilege access</li>
<li>Compliance by design: FERPA/COPPA/PPRA support</li>
</ul>
<h3>2) Data Inventory (demo mode)</h3>
<ul>
<li>StudentID (pseudonymous), ClassID, LessonID, responses, time‑on‑task</li>
<li>No names/emails/addresses/photos collected by default</li>
</ul>
<h3>3) Data Flow</h3>
<pre style="white-space:pre-wrap;background:#0a1222;padding:10px;border-radius:10px;border:1px solid rgba(148,163,184,.2)">[Student Browser] --TLS--> [Hosting/Inference] --in‑memory--> [Lesson Output]
| (optional export by teacher)
v
[CSV/JSON local export]</pre>
<h3>4) Security</h3>
<ul>
<li>Encryption in transit; encrypted backups in pilots</li>
<li>Role‑based access; vendor risk reviews</li>
<li>Incident response with timely notification</li>
</ul>
<h3>5) Model Card (excerpt)</h3>
<ul>
<li>Intended use: EPF learning support</li>
<li>Out‑of‑scope: high‑stakes grading; sensitive PII</li>
<li>Safety: age‑appropriate filtering, misuse refusals</li>
<li>Evaluation signals: ≥70% quick‑check pass; ≥8 min median session</li>
</ul>
<p class="muted">For the full policy and templates (DPA, consent), email <a href="mailto:privacy@bullishminds.ai">privacy@bullishminds.ai</a>.</p>
</div>
</details>
</div>
</section>
<section id="contact" class="container section" aria-labelledby="contact-title">
<h2 id="contact-title">Contact</h2>
<p class="muted">Questions, pilots, or partnerships:</p>
<ul>
<li>Email: <a href="mailto:hello@bullishminds.ai">hello@bullishminds.ai</a></li>
<li>Privacy/Security: <a href="mailto:privacy@bullishminds.ai">privacy@bullishminds.ai</a><a href="mailto:security@bullishminds.ai">security@bullishminds.ai</a></li>
</ul>
</section>
</main>
<footer class="container footer">
<div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between">
<div>© 2025 Bullish Minds AI. All rights reserved.</div>
<div class="legal">“Bullish Minds AI” and the bull logo are trademarks of Bullish Minds AI, LLC. All product names, logos, and brands are property of their respective owners.</div>
</div>
</footer>
<script>
// Optional: smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(a=>{
a.addEventListener('click', e=>{
const id=a.getAttribute('href').slice(1);
const el=document.getElementById(id);
if(el){e.preventDefault(); el.scrollIntoView({behavior:'smooth', block:'start'});}
});
});
</script>
</body>
</html>