Add pricing page and update meal card interactions

- Introduced a new pricing page with mode-specific pricing options.
- Updated meal card data attributes and descriptions for clarity.
- Enhanced meal card interactions to navigate to the pricing page.
- Removed toast notifications for a cleaner user experience.
- Added pricing styles for better layout and responsiveness.

index.html

@@ -62,22 +62,22 @@
           <p>Every body has a different brief. Pick the one that sounds like your next chapter.</p>
         </div>
         <div class="meal-grid">
-          <article class="meal-card card-lime" data-goal="Lean" tabindex="0">
+          <article class="meal-card card-lime" data-goal="Lean" data-mode="lean" tabindex="0">
             <div class="card-number">01</div>
             <div class="food-orb orb-lime"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=700&q=88" alt="Fresh salad bowl with vegetables and grains" /><span>LOW<br />FAT</span></div>
             <div class="card-content"><p class="card-tag">The cut</p><h3>Lean<br />mode</h3><p>Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
           </article>
-          <article class="meal-card card-orange" data-goal="Muscle" tabindex="0">
+          <article class="meal-card card-orange" data-goal="Protein" data-mode="protein" tabindex="0">
             <div class="card-number">02</div>
             <div class="food-orb orb-orange"><img src="https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&w=700&q=88" alt="High protein chicken and vegetables meal" /><span>HIGH<br />PROTEIN</span></div>
-            <div class="card-content"><p class="card-tag">The build</p><h3>Muscle<br />mode</h3><p>Pure protein power for the work you put in, from first rep to last.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
+            <div class="card-content"><p class="card-tag">The build</p><h3>Protein<br />mode</h3><p>Pure protein power for the work you put in, from first rep to last.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
           </article>
-          <article class="meal-card card-violet" data-goal="Bulk" tabindex="0">
+          <article class="meal-card card-violet" data-goal="Bulk" data-mode="bulk" tabindex="0">
             <div class="card-number">03</div>
             <div class="food-orb orb-violet"><img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=700&q=88" alt="Colorful rice, vegetables and protein meal" /><span>CARBS +<br />PROTEIN</span></div>
             <div class="card-content"><p class="card-tag">The gain</p><h3>Bulk<br />mode</h3><p>Intentional calories, complex carbs and protein in a bigger, bolder box.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
           </article>
-          <article class="meal-card card-blue" data-goal="Balance" tabindex="0">
+          <article class="meal-card card-blue" data-goal="Balanced" data-mode="balanced" tabindex="0">
             <div class="card-number">04</div>
             <div class="food-orb orb-blue"><img src="https://images.unsplash.com/photo-1543352634-a1c51d9f1fa7?auto=format&fit=crop&w=700&q=88" alt="Balanced meal with vegetables, grains and protein" /><span>ALL-ROUND<br />GOOD</span></div>
             <div class="card-content"><p class="card-tag">The flow</p><h3>Balanced<br />mode</h3><p>A little bit of everything, dialed into a rhythm you can actually keep.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
@@ -99,7 +99,6 @@
     </main>
 
     <footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2024 The Tiffin Food / Made for your next.</p></footer>
-    <div class="toast" role="status" aria-live="polite"></div>
     <script src="script.js"></script>
   </body>
 </html>