Ashish-K's picture
Update index.html
1439795 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analytics for Managers - AI Companions</title>
<meta name="description" content="AI-powered learning companions for the Analytics for Managers textbook. Develop disciplined analytical thinking with guided exercises and hands-on practice.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #1a365d;
--primary-light: #2c5282;
--secondary: #38a169;
--accent: #ed8936;
--background: #f7fafc;
--card-bg: #ffffff;
--text: #2d3748;
--text-light: #718096;
--border: #e2e8f0;
--companion-color: #3182ce;
--sandbox-color: #38a169;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--background);
color: var(--text);
line-height: 1.6;
}
/* Navigation */
nav {
background: var(--primary);
padding: 1rem 2rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: white;
font-weight: 700;
font-size: 1.25rem;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s;
}
.nav-links a:hover {
color: white;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
padding: 8rem 2rem 5rem;
text-align: center;
}
.hero h1 {
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 1rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero .subtitle {
font-size: 1.25rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto 2rem;
}
.hero-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
/* Main Content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Companions Section */
.companions-section {
padding: 5rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
}
.companions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.companion-card {
background: var(--card-bg);
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid var(--border);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.companion-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.companion-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
}
.companion-card.reasoning::before {
background: var(--companion-color);
}
.companion-card.sandbox::before {
background: var(--sandbox-color);
}
.card-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 1.75rem;
}
.companion-card.reasoning .card-icon {
background: rgba(49, 130, 206, 0.1);
}
.companion-card.sandbox .card-icon {
background: rgba(56, 161, 105, 0.1);
}
.companion-card h3 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
color: var(--primary);
}
.companion-card .tagline {
color: var(--text-light);
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
margin-bottom: 2rem;
}
.feature-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}
.best-for {
background: #f7fafc;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.best-for-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.best-for p {
font-size: 0.95rem;
margin: 0;
}
.cta-button {
display: inline-block;
width: 100%;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.2s;
font-size: 1rem;
}
.companion-card.reasoning .cta-button {
background: var(--companion-color);
color: white;
}
.companion-card.reasoning .cta-button:hover {
background: #2c5aa0;
}
.companion-card.sandbox .cta-button {
background: var(--sandbox-color);
color: white;
}
.companion-card.sandbox .cta-button:hover {
background: #2f8a5a;
}
/* How It Works Section */
.how-it-works {
background: white;
padding: 5rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.step-card {
text-align: center;
padding: 1.5rem;
}
.step-number {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
margin: 0 auto 1.25rem;
}
.step-card h3 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
color: var(--primary);
}
.step-card p {
color: var(--text-light);
font-size: 0.95rem;
}
/* Resources Section */
.resources {
padding: 5rem 0;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.resource-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
text-decoration: none;
color: var(--text);
transition: all 0.2s;
}
.resource-card:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.resource-card h4 {
font-size: 1rem;
margin-bottom: 0.5rem;
color: var(--primary);
}
.resource-card p {
font-size: 0.9rem;
color: var(--text-light);
margin: 0;
}
/* Comparison Section */
.comparison {
background: white;
padding: 5rem 0;
border-top: 1px solid var(--border);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 2rem;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.comparison-table th,
.comparison-table td {
padding: 1rem 1.5rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.comparison-table th {
background: var(--primary);
color: white;
font-weight: 600;
}
.comparison-table th:nth-child(2) {
background: var(--companion-color);
}
.comparison-table th:nth-child(3) {
background: var(--sandbox-color);
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table tr:hover {
background: #f7fafc;
}
/* Disclaimer Section */
.disclaimer {
background: #fffbeb;
padding: 3rem 0;
border-top: 1px solid #fbbf24;
}
.disclaimer-box {
background: white;
border: 1px solid #fbbf24;
border-left: 4px solid #f59e0b;
border-radius: 8px;
padding: 1.5rem 2rem;
}
.disclaimer-box h4 {
color: #b45309;
margin: 0 0 1rem 0;
font-size: 1.1rem;
}
.disclaimer-box ul {
margin: 0;
padding-left: 1.25rem;
}
.disclaimer-box li {
margin: 0.75rem 0;
font-size: 0.9rem;
color: #78350f;
line-height: 1.5;
}
.disclaimer-box li strong {
color: #92400e;
}
/* Footer */
footer {
background: var(--primary);
color: white;
padding: 3rem 2rem;
text-align: center;
}
footer p {
opacity: 0.8;
font-size: 0.9rem;
}
footer a {
color: white;
text-decoration: underline;
}
/* Coming Soon Badge */
.coming-soon {
display: inline-block;
background: var(--accent);
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 50px;
margin-left: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Responsive */
@media (max-width: 900px) {
.companions-grid,
.steps-grid,
.resources-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2rem;
}
.nav-links {
display: none;
}
}
@media (max-width: 600px) {
.hero {
padding: 6rem 1rem 3rem;
}
.companion-card {
padding: 1.5rem;
}
.comparison-table {
font-size: 0.85rem;
}
.comparison-table th,
.comparison-table td {
padding: 0.75rem;
}
}
</style>
</head>
<body>
<nav>
<div class="nav-container">
<a href="#" class="logo">Analytics for Managers</a>
<div class="nav-links">
<a href="#companions">AI Companions</a>
<a href="#how-it-works">How It Works</a>
<a href="#comparison">Compare</a>
<a href="#resources">Resources</a>
</div>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="hero-badge">AI-Powered Learning</div>
<h1>Build Analytical Judgment, Not Just Technical Skills</h1>
<p class="subtitle">AI companions designed to develop disciplined analytical thinking as you work through the textbook.</p>
</div>
</section>
<section id="companions" class="companions-section">
<div class="container">
<div class="section-header">
<h2>Choose Your Companion</h2>
<p>Two AI tools designed for different stages of your learning journey</p>
</div>
<div class="companions-grid">
<!-- Reasoning Companion Card -->
<div class="companion-card reasoning">
<div class="card-icon">📚</div>
<h3>Analytics Reasoning Companion</h3>
<p class="tagline">Learn disciplined thinking with guided exercises</p>
<ul class="feature-list">
<li>Guided 7-stage analytical workflow</li>
<li>Works with book datasets only</li>
<li>Helps you test and strengthen your conclusions</li>
<li>Develops judgment through Socratic questioning</li>
<li>Example mode (learning) + Exercise mode (practice)</li>
</ul>
<div class="best-for">
<div class="best-for-label">Best For</div>
<p>Students and learners working through the textbook chapters who want to develop rigorous analytical thinking habits.</p>
</div>
<!-- UPDATE THIS LINK -->
<a href="https://chatgpt.com/g/g-6952028f3a088191ada3f9a6c98061d1-analytics-reasoning-companion" class="cta-button" target="_blank">
Launch Reasoning Companion →
</a>
</div>
<!-- Sandbox Card -->
<div class="companion-card sandbox">
<div class="card-icon">🔬</div>
<h3>Analytics Modeling Sandbox</h3>
<p class="tagline">Apply techniques to your own data</p>
<ul class="feature-list">
<li>Upload and analyze your own datasets</li>
<li>Flexible, practitioner-focused workflow</li>
<li>Generates code and model outputs</li>
<li>Maintains disciplined interpretation guidance</li>
<li>Export results and visualizations</li>
</ul>
<div class="best-for">
<div class="best-for-label">Best For</div>
<p>Practitioners and professionals who have completed the book and want to apply techniques to real business problems.</p>
</div>
<!-- UPDATE THIS LINK -->
<a href="https://chatgpt.com/g/g-69520c0db9a081919c68a9e17ab5588c-analytics-modeling-sandbox" class="cta-button" target="_blank">
Launch Modeling Sandbox →
</a>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="how-it-works">
<div class="container">
<div class="section-header">
<h2>How It Works</h2>
<p>A structured approach to building analytical judgment</p>
</div>
<div class="steps-grid">
<div class="step-card">
<div class="step-number">1</div>
<h3>Read the Chapter</h3>
<p>Start with the textbook to understand concepts, techniques, and interpretation principles.</p>
</div>
<div class="step-card">
<div class="step-number">2</div>
<h3>Work the Example</h3>
<p>Use the Reasoning Companion in Example Mode for a guided walkthrough with detailed explanations.</p>
</div>
<div class="step-card">
<div class="step-number">3</div>
<h3>Complete the Exercise</h3>
<p>Switch to Exercise Mode to practice independently. The companion challenges your reasoning with Socratic questions.</p>
</div>
</div>
</div>
</section>
<section id="comparison" class="comparison">
<div class="container">
<div class="section-header">
<h2>Quick Comparison</h2>
<p>Choose the right tool for your needs</p>
</div>
<table class="comparison-table">
<thead>
<tr>
<th>Feature</th>
<th>Reasoning Companion</th>
<th>Modeling Sandbox</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Primary Purpose</strong></td>
<td>Learn analytical thinking</td>
<td>Apply to real problems</td>
</tr>
<tr>
<td><strong>Data</strong></td>
<td>Book datasets only</td>
<td>Your own uploads</td>
</tr>
<tr>
<td><strong>Workflow</strong></td>
<td>Strict 7-stage structure</td>
<td>Flexible, user-driven</td>
</tr>
<tr>
<td><strong>Code Generation</strong></td>
<td>No (conceptual focus)</td>
<td>Yes (Python)</td>
</tr>
<tr>
<td><strong>Guidance Style</strong></td>
<td>Socratic questioning</td>
<td>Direct assistance</td>
</tr>
<tr>
<td><strong>Best For</strong></td>
<td>Students learning the material</td>
<td>Practitioners applying it</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="resources" class="resources">
<div class="container">
<div class="section-header">
<h2>Resources</h2>
<p>Guides and documentation to help you get started</p>
</div>
<div class="resources-grid">
<a href="Analytics_Reasoning_Companion_User_Guide.html" class="resource-card">
<h4>User Guide</h4>
<p>Complete guide to using the Reasoning Companion effectively.</p>
</a>
<a href="Examples_vs_Exercises_Guide.html" class="resource-card">
<h4>Examples vs. Exercises</h4>
<p>Understand the two learning modes and when to use each.</p>
</a>
<a href="#" class="resource-card">
<h4>FAQ</h4>
<p>Common questions about the AI companions answered.</p>
</a>
</div>
</div>
</section>
<section class="disclaimer">
<div class="container">
<div class="disclaimer-box">
<h4>Important Notice</h4>
<ul>
<li><strong>Platform Access:</strong> These AI companions are hosted on OpenAI's ChatGPT platform. Access is subject to OpenAI's current policies and terms of service.</li>
<li><strong>Availability:</strong> While these tools are currently accessible to ChatGPT users, we cannot guarantee their continued availability to free-tier users in the future. OpenAI may modify access policies at any time.</li>
<li><strong>Usage Limits:</strong> Usage limits for free-tier accounts are controlled by OpenAI and may be restricted. For uninterrupted access, consider a ChatGPT Plus subscription.</li>
<li><strong>No Warranty:</strong> These tools are provided for educational purposes. We make no warranties regarding availability, performance, or fitness for any particular purpose.</li>
</ul>
</div>
</div>
</section>
<footer>
<div class="container">
<p><strong>Analytics for Managers</strong></p>
<p style="margin-top: 0.5rem;">Building analytical judgment through disciplined thinking.</p>
<p style="margin-top: 1.5rem; font-size: 0.85rem;">
Questions? Contact us at <a href="mailto:support@example.com">support@example.com</a>
</p>
</div>
</footer>
</body>
</html>