This commit is contained in:
Bognar 2026-01-30 17:20:31 +01:00
parent 49c67013db
commit ee2eb206ee
2 changed files with 90 additions and 31 deletions

View File

@ -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 */}

View File

@ -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-8 px-4 font-bold text-center">
<th className="py-6 px-4 md:py-8 md:px-10 font-bold whitespace-nowrap">{t.pricing.table.passengers}</th>
<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">