|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Progressão Aritmética - Sofia Rosa</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.formula-box { |
|
|
background-color: #f8f9fa; |
|
|
border-left: 4px solid #4f46e5; |
|
|
} |
|
|
.scroll-smooth { |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
.highlight { |
|
|
background-color: rgba(79, 70, 229, 0.1); |
|
|
border-left: 3px solid #4f46e5; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg scroll-smooth font-sans antialiased text-gray-800"> |
|
|
|
|
|
<header class="bg-indigo-600 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<i class="fas fa-chart-line text-3xl mr-3"></i> |
|
|
<h1 class="text-2xl md:text-3xl font-bold">Progressão Aritmética</h1> |
|
|
</div> |
|
|
<div class="text-sm md:text-base"> |
|
|
<span class="font-semibold">Por Sofia Rosa</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-graduation-cap text-indigo-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800">Resumo Didático: Progressão Aritmética (PA)</h2> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Olá, Sofia! Vamos aprender juntos sobre progressão aritmética. Vou explicar de forma simples, com exemplos do cotidiano, para você entender de vez!</p> |
|
|
<div class="border-t border-gray-200 my-4"></div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-lightbulb text-yellow-400 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">O que é Progressão Aritmética?</h3> |
|
|
<p class="text-gray-600">É uma sequência de números em que cada termo, a partir do segundo, é igual ao anterior somado a um número fixo, chamado de razão (r).</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition-all duration-300"> |
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-square-root-alt text-indigo-500 mr-3"></i> |
|
|
Fórmula do Termo Geral |
|
|
</h2> |
|
|
<div class="formula-box p-4 rounded mb-6"> |
|
|
<p class="text-center text-xl font-mono font-bold text-indigo-700"> |
|
|
a<sub>n</sub> = a<sub>1</sub> + (n - 1) × r |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="highlight p-4 rounded-lg"> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Onde:</h3> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li><span class="font-bold">a<sub>n</sub>:</span> termo que você quer achar</li> |
|
|
<li><span class="font-bold">a<sub>1</sub>:</span> primeiro termo da sequência</li> |
|
|
<li><span class="font-bold">n:</span> posição do termo</li> |
|
|
<li><span class="font-bold">r:</span> razão (quanto aumenta ou diminui)</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Exemplo do cotidiano:</h3> |
|
|
<p class="text-gray-600 mb-2">Imagine que você ganha uma mesada de R$ 50,00 e todo mês sua mãe aumenta R$ 10,00.</p> |
|
|
<ul class="list-disc list-inside text-gray-600 space-y-1"> |
|
|
<li>1º mês: R$ 50,00</li> |
|
|
<li>2º mês: R$ 60,00</li> |
|
|
<li>3º mês: R$ 70,00</li> |
|
|
<li>4º mês: R$ 80,00</li> |
|
|
</ul> |
|
|
<p class="text-gray-600 mt-2">Aqui, a razão é 10, pois todo mês soma-se 10 ao valor anterior.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 bg-blue-50 p-4 rounded-lg border border-blue-100"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-brain text-blue-500 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800 mb-1">Analogia:</h4> |
|
|
<p class="text-gray-600">É como subir uma escada, onde cada degrau tem sempre a mesma altura.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition-all duration-300"> |
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-clipboard-list text-indigo-500 mr-3"></i> |
|
|
Exemplos Práticos para Sofia |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-money-bill-wave text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Mesada Crescente</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Sofia recebe R$ 100,00 de mesada com aumento mensal de R$ 20,00:</p> |
|
|
<ul class="text-sm text-gray-600 space-y-1"> |
|
|
<li>1º mês: R$ 100,00</li> |
|
|
<li>2º mês: R$ 120,00</li> |
|
|
<li>3º mês: R$ 140,00</li> |
|
|
<li>4º mês: R$ 160,00</li> |
|
|
<li>5º mês: R$ 180,00</li> |
|
|
</ul> |
|
|
<div class="mt-3 text-xs bg-indigo-50 text-indigo-700 p-2 rounded"> |
|
|
<span class="font-bold">Razão (r):</span> R$ 20,00 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-piggy-bank text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Economia para Celular</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Sofia economiza R$ 50,00 por semana para comprar um celular:</p> |
|
|
<ul class="text-sm text-gray-600 space-y-1"> |
|
|
<li>1ª semana: R$ 50,00</li> |
|
|
<li>2ª semana: R$ 100,00</li> |
|
|
<li>3ª semana: R$ 150,00</li> |
|
|
<li>4ª semana: R$ 200,00</li> |
|
|
</ul> |
|
|
<div class="mt-3 text-xs bg-indigo-50 text-indigo-700 p-2 rounded"> |
|
|
<span class="font-bold">Razão (r):</span> R$ 50,00 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors"> |
|
|
<div class="flex items-center mb-3"> |
|
|
|
|
|
</html> |
