boxes and buttons

This commit is contained in:
sameeranageshwar
2025-04-13 01:05:30 -04:00
parent 3af9ad2acc
commit b7ce205898
3 changed files with 31 additions and 27 deletions

View File

@@ -6,15 +6,17 @@ const InfoContent = () => {
return (
<div>
<h1 className="text-3xl dark:text-3xl font-bold mb-4">
Beverage Consumption Info!
</h1>
<p className="mb-6 ">
Learn what's best for your body and how to earn points and win! Making
informed drink choices supports hydration, energy regulation, and
overall health. Below are basic guidelines based on established public
health recommendations.
</p>
<div className="bg-[color:var(--color-success-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
<h1 className="text-3xl dark:text-3xl font-bold mb-4">
Beverage Consumption Info!
</h1>
<p className="mb-6 ">
Learn what's best for your body and how to earn points and win! Making
informed drink choices supports hydration, energy regulation, and
overall health. Below are basic guidelines based on established public
health recommendations.
</p>
</div>
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">

View File

@@ -57,25 +57,27 @@ const PointGuide = () => {
return (
<div>
<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
Points Guide
</h1>
<p className="mb-6 text-sm sm:text-base text-white">
Learn how many points you receive for each drink!
</p>
<div className="bg-[color:var(--color-success-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
Points Guide
</h1>
<p className="mb-6 text-sm sm:text-base text-white">
Learn how many points you receive for each drink!
</p>
<ul>
<span className="text-base sm:text-lg">Game Points System:</span>
<ul className="list-disc pl-5 mt-1 space-y-1 text-sm sm:text-base">
<li> +150 points for drinking 100 oz of water </li>
<li> +100 points for keeping caffeine &lt; 200 mg </li>
<li> +150 points for staying under the sugar cap all day </li>
<div>
<span className="text-base sm:text-lg text-white">Game Points System:</span>
<ul className="list-disc pl-5 mt-1 space-y-1 text-sm sm:text-base text-white">
<li>+150 points for drinking 100 oz of water</li>
<li>+100 points for keeping caffeine &lt; 200 mg</li>
<li>+150 points for staying under the sugar cap all day</li>
<li>
Exceeding 400mg caffeine limit or 30.5g sugar limit = 0 pts logged for
those drinks
</li>
</ul>
</ul>
</ul>
</div>
</div>
<div className="bg-surface-700 rounded-xl px-4 py-4 my-6 shadow-sm">
<div className="overflow-x-auto rounded-xl scroll-auto">

View File

@@ -14,8 +14,8 @@ export default function InfoPage() {
<button
className={`px-4 py-2 rounded ${
activeComponent === "info"
? "bg-primary-500 text-white"
: "bg-secondary-700 text-gray-300"
? "bg-success-500 text-white"
: "bg-surface-700 text-gray-300"
}`}
onClick={() => setActiveComponent("info")}
>
@@ -24,8 +24,8 @@ export default function InfoPage() {
<button
className={`px-4 py-2 rounded ${
activeComponent === "points"
? "bg-primary-500 text-white"
: "bg-secondary-700 text-gray-300"
? "bg-success-500 text-white"
: "bg-surface-700 text-gray-300"
}`}
onClick={() => setActiveComponent("points")}
>