árak

app/arak/page.tsx

@@ -102,6 +102,17 @@ export default function PricingPage() {
         ? ["1-3 fő (Mercedes E-class): 75.000 Ft", "4-6 fő (Mercedes Vito / Ford Tourneo Custom): 95.000 Ft"]
         : ["1-3 pax (Mercedes E-class): 75.000 Ft", "4-6 pax (Mercedes Vito / Ford Tourneo Custom): 95.000 Ft"]
 
+    
+    const expressInfoText = (price: string) =>
+        language === "hu"
+            ? `Amennyiben nincs más utas a viteldíj ${price}. (22:00-05:00 utasfelvétel esetén Private transzfer keretében tudjuk vállalni, ha nincs más)`
+            : `If there are no other passengers, the fare is ${price}. (For pickups between 22:00-05:00 we can only provide Private transfer if there are no other passengers.)`
+
+    const expressInfoBecs = expressInfoText("23.500 HUF")
+    const expressInfoBudapest = expressInfoText("28.000 HUF")
+    const expressInfoPozsony = expressInfoText("23.500 HUF")
+    const expressInfoBudapestBecs = expressInfoText("50.000 HUF")
+
     const routeNav = [
         {
             id: "gyor-becs",
@@ -207,6 +218,7 @@ export default function PricingPage() {
                             specials={specials}
                             vipInfo={vipInfo}
                             effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
+                            expressInfo={expressInfoBecs}
                         />
                     </div>
 
@@ -217,6 +229,7 @@ export default function PricingPage() {
                             specials={specials}
                             vipInfo={vipInfo}
                             effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
+                            expressInfo={expressInfoBudapest}
                         />
                     </div>
 
@@ -229,6 +242,7 @@ export default function PricingPage() {
                             specials={specialsPozsony}
                             vipInfo={vipInfo}
                             effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
+                            expressInfo={expressInfoPozsony}
                         />
                     </div>
 
@@ -239,6 +253,7 @@ export default function PricingPage() {
                             specials={specialsBudapestVienna}
                             vipInfo={vipInfoBudapestVienna}
                             effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
+                            expressInfo={expressInfoBudapestBecs}
                         />
                     </div>
                     {/* Additional Info Cards */}

components/pricing-table.tsx

@@ -23,6 +23,7 @@ interface PricingTableProps {
     specials?: SpecialPackage[]
     vipInfo?: string[]
     effectiveFrom?: string
+    expressInfo?: string
 }
 
 const PricingTable = ({
@@ -30,7 +31,8 @@ const PricingTable = ({
     rows,
     specials,
     vipInfo,
-    effectiveFrom
+    effectiveFrom,
+    expressInfo
 }: PricingTableProps) => {
     const { t } = useLanguage()
 
@@ -51,12 +53,47 @@ const PricingTable = ({
             </div>
 
             <div className="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
-                <div className="overflow-x-auto">
+                {/* Mobile cards */}
+                <div className="block md:hidden divide-y divide-slate-100">
+                    {rows.map((row, idx) => (
+                        <div key={idx} className={cn("p-5", idx % 2 === 0 ? "bg-white" : "bg-slate-50/30")}>
+                            <div className="flex items-center gap-3 text-slate-900 font-bold mb-4">
+                                <div className="w-1.5 h-1.5 rounded-full bg-primary" />
+                                <span>{row.persons}</span>
+                            </div>
+                            <div className="grid grid-cols-2 gap-4 text-sm">
+                                <div className="text-center">
+                                    <div className="text-[10px] uppercase tracking-[0.2em] text-slate-400 mb-2">{t.pricing.table.express}</div>
+                                    <div className="font-extrabold text-blue-950 flex items-center justify-center gap-2">
+                                        <span>{row.express}</span>
+                                        {idx === 0 && expressInfo && (
+                                            <span className="relative inline-flex items-center group">
+                                                <Info className="w-3 h-3 text-slate-300 hover:text-primary cursor-help transition-colors" />
+                                                <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-64 -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-2 text-[11px] font-medium text-white opacity-0 shadow-lg transition-opacity duration-150 group-hover:opacity-100">
+                                                    {expressInfo}
+                                                </span>
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="text-[10px] uppercase tracking-[0.2em] text-slate-400 mb-2">{t.pricing.table.private}</div>
+                                    <div className="font-extrabold text-white px-4 py-1.5 bg-secondary rounded-full text-xs tracking-wider shadow-sm inline-block">
+                                        {row.private}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Desktop table */}
+                <div className="hidden md:block overflow-x-auto">
                     <table className="w-full text-left border-collapse">
                         <thead>
                             <tr className="bg-slate-50/50 text-slate-500 text-[10px] uppercase tracking-[0.2em] border-b border-slate-100">
-                                <th className="py-8 px-10 font-bold">{t.pricing.table.passengers}</th>
+                                <th className="py-6 px-4 md:py-8 md:px-10 font-bold whitespace-nowrap">{t.pricing.table.passengers}</th>
-                                <th className="py-8 px-4 font-bold text-center">
+                                <th className="py-6 px-2 md:py-8 md:px-4 font-bold text-center">
                                     <div className="flex flex-col items-center gap-1 opacity-40">
                                         <span className="text-slate-400">{t.pricing.table.classic}</span>
                                         <span className="text-[10px] lowercase normal-case tracking-normal">{t.pricing.table.classicNote}</span>
@@ -89,19 +126,26 @@ const PricingTable = ({
                                         idx % 2 === 0 ? "bg-white" : "bg-slate-50/20"
                                     )}
                                 >
-                                    <td className="py-5 px-10 font-bold text-slate-900">
+                                    <td className="py-4 px-4 md:py-5 md:px-10 font-bold text-slate-900 whitespace-nowrap">
                                         <div className="flex items-center gap-3">
                                             <div className="w-1.5 h-1.5 rounded-full bg-primary" />
                                             {row.persons}
                                         </div>
                                     </td>
-                                    <td className="py-5 px-4 text-center text-slate-300">
+                                    <td className="py-4 px-2 md:py-5 md:px-4 text-center text-slate-300">
                                         <span className="text-xs">—</span>
                                     </td>
                                     <td className="py-5 px-4 text-center">
                                         <div className="flex items-center justify-center gap-2">
                                             <span className="font-extrabold text-blue-950">{row.express}</span>
+                                            {idx === 0 && expressInfo && (
+                                                <span className="relative inline-flex items-center group">
                                                     <Info className="w-3 h-3 text-slate-300 hover:text-primary cursor-help transition-colors" />
+                                                    <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-64 -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-2 text-[11px] font-medium text-white opacity-0 shadow-lg transition-opacity duration-150 group-hover:opacity-100">
+                                                        {expressInfo}
+                                                    </span>
+                                                </span>
+                                            )}
                                         </div>
                                     </td>
                                     <td className="py-5 px-10 text-center">