study-friendly design: warm colors, animations, motivation

index.html

@@ -27,15 +27,19 @@
 
   <section class="hero">
     <div class="container">
-      <h1>Welcome to <span>English Easy</span></h1>
-      <p>Learn English step by step with vocabulary, grammar, exercises, reading texts, and tests. Start your journey today!</p>
+      <div class="hero-badge">Start your journey</div>
+      <h1>Learn English with <span class="highlight">Easy</span> Steps</h1>
+      <p>Vocabulary, grammar, exercises, reading texts, and tests — everything you need to start speaking English with confidence.</p>
+      <div class="hero-buttons">
         <a href="vocabulary.html" class="btn">Start Learning</a>
+        <a href="exercises.html" class="btn btn-outline">Try Exercises</a>
+      </div>
     </div>
   </section>
 
   <section class="section">
     <div class="container">
-      <h2 class="section-title">What You Will Learn</h2>
+      <h2 class="section-title">What You'll <span>Learn</span></h2>
       <p class="section-subtitle">We make learning English simple and fun with clear explanations and interactive exercises.</p>
       <div class="cards-grid">
         <div class="card">
@@ -72,9 +76,18 @@
     </div>
   </section>
 
-  <section class="section how-it-works">
+  <section class="section motivation-banner" style="padding:0;background:none;">
     <div class="container">
-      <h2 class="section-title">How It Works</h2>
+      <div class="motivation-banner">
+        <h3>Ready to Start?</h3>
+        <p>Every expert was once a beginner. Take the first step today!</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="section section-alt">
+    <div class="container">
+      <h2 class="section-title">How It <span>Works</span></h2>
       <p class="section-subtitle">Three simple steps to start learning English.</p>
       <div class="steps">
         <div class="step">