Merge branch 'dev'

src/app/components/PintxoRange.tsx

@@ -20,7 +20,7 @@ export const PintxoRange: React.FC<PintxoRangeProps> = ({
     const arrowColor = getArrowColor(pintxoCondition.condition);
 
     return (
-        <div className="flex flex-col gap-2 justify-center items-center mb-4">
+        <div className="flex flex-col gap-2 justify-center items-center">
             <div className="relative w-6 h-16 rounded-sm gradient-div opacity-70">
                 <div
                     className={`absolute left-[-25%] w-9 h-1 ${arrowColor} rounded-sm`}

src/app/components/SpotDetails.tsx

@@ -22,7 +22,7 @@ type PintxoName =
     | "Txuleta Feast";
 
 // Render pintxo color based on a name from condition
-function getPintxoColor(condition: PintxoName): string {
+function getPintxoColor(condition: string): string {
     switch (condition) {
         case "Empty Plate":
             console.log("condition", condition);
@@ -59,7 +59,7 @@ export default async function SpotDetails({
     const currentPintxoCondition = getCurrentPintxoConditions(
         spot,
         currentTime,
-        5
+        3
     );
 
     return (
@@ -69,13 +69,22 @@ export default async function SpotDetails({
                     <span className="text-light font-body font-regular text-xl">
                         {spot?.name?.slice(0, 21) ?? ""}
                     </span>
-                    <div className="flex flex-row gap-4 justify-start  items-start ml-2 lg:m-0">
+                    <div className="flex flex-row gap-4 justify-start  items-start ml-2 lg:m-0 align-middle pb-4">
                         {currentPintxoCondition.map((condition, index) => (
                             <PintxoRange
                                 key={index}
                                 pintxoCondition={condition}
                             />
                         ))}
+                        <div
+                            className={`ml-4 flex w-full h-20 justify-center items-center mx-auto rounded-sm ${getPintxoColor(
+                                currentPintxoCondition[0].condition
+                            )} opacity-80 hover:opacity-100`}
+                        >
+                            <div className="font-display text-dark">
+                                {currentPintxoCondition[0].condition}
+                            </div>
+                        </div>
                     </div>
                 </div>
 

src/app/constants/pintxosData.ts

@@ -4,45 +4,58 @@ import { StaticImageData } from "next/image";
 type PintxoItem = {
     color: string;
     title: string;
+    short: string;
     description: string;
     img: StaticImageData;
 };
 
 const pintxosData: PintxoItem[] = [
     {
-        color: "bg-purple-400",
+        color: "bg-gray-400",
         title: "Empty Plate",
-        description: "Flat, no waves. A day for other activities.",
+        short: "Unfavorable Conditions",
+        description:
+            "Conditions are either flat or too stormy for any kind of surfing. Better to stay out of the water.",
         img: pintxo,
     },
     {
         color: "bg-red-400",
         title: "Bread Only",
-        description: "Small waves, suitable for beginners.",
+        short: "Tricky Conditions",
+        description:
+            "Waves are present but conditions are tricky due to onshore winds or wrong tide. Suitable for experienced surfers who don't mind the challenge.",
         img: pintxo,
     },
     {
-        color: "bg-orange-400",
+        color: "bg-yellow-400",
         title: "Gilda",
-        description: "Moderate waves. Good for intermediate surfers.",
+        short: "Average Conditions",
+        description:
+            "Waves are moderate and conditions are surfable but not ideal. Offshore wind may be too strong or the swell direction isn't perfect.",
         img: pintxo,
     },
     {
-        color: "bg-yellow-400",
+        color: "bg-orange-400",
         title: "Txistorra",
-        description: "High waves with strong currents. For the experienced.",
+        short: "Good Conditions",
+        description:
+            "Good wave height and favorable wind and tide conditions. Suitable for most surfers.",
         img: pintxo,
     },
     {
-        color: "bg-lime-400",
+        color: "bg-green-400",
         title: "Gambas",
-        description: "Perfect conditions. The dream of every surfer.",
+        short: "Great Conditions",
+        description:
+            "Waves are firing with light offshore winds and the tide is just right. A great day for all surfers.",
         img: pintxo,
     },
     {
-        color: "bg-green-400",
+        color: "bg-blue-400",
         title: "Txuleta Feast",
-        description: "Extreme conditions. Only for the pros.",
+        short: "Epic Conditions",
+        description:
+            "Perfect alignment of swell, wind, and tide. These are the days you'll remember. Only for those who know how to handle such conditions.",
         img: pintxo,
     },
 ];

src/app/info/page.tsx

@@ -40,6 +40,9 @@ const Info = () => {
                             <h3 className="text-xl font-bold font-body text-dark">
                                 {item.title}
                             </h3>
+                            <p className="font-body text-dark font-normal">
+                                {item.short}
+                            </p>
                             <p className="font-body text-dark font-normal">
                                 {item.description}
                             </p>