Skip to content

133 implement redesigned gym booking tornaterem igénylés page #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peterlipt merged 3 commits into from
Jul 25, 2026
Merged

133 implement redesigned gym booking tornaterem igénylés page #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5cf589f
feat: implement redesigned Gym Support Content and update PageHeader …
DankaMarci Jul 3, 2026
f7c65b0
feat: redesign Sportterem booking page layout and improve content str…
DankaMarci Jul 3, 2026
c562fff
feat: update container styling for Sportterem booking page
peterlipt Jul 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 63 additions & 95 deletions src/app/(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {ReactNode} from 'react';
import { ReactNode } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { parseFormattedText } from '@/utils/parseFormattedText';
import { parseFormattedText } from '@/utils/parseFormattedText';

interface SportpalyaTamogatasContentData {
title: string;
Expand Down Expand Up @@ -34,109 +34,77 @@ interface SportpalyaTamogatasContentData {

export default function SportpalyaTamogatasContent({ content }: { content: SportpalyaTamogatasContentData }) {
return (
<div className="flex flex-col gap-4 md:gap-6 lg:px-4 px-2 py-8">
{/* Introduction */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<Paragraph>
{parseFormattedText(content.description)}
</Paragraph>
</div>
</CardContent>
</Card>
<div className="flex flex-col gap-4 rounded-b-2xl border-x border-b border-[#e9e2d6] bg-[#fffefc] p-4 md:p-8">
<SectionCard title={content.application.title}>
<Paragraph>{parseFormattedText(content.application.description)}</Paragraph>
</SectionCard>

{/* Application */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.application.title}
</h3>
<Paragraph>{parseFormattedText(content.application.description)}</Paragraph>
</div>
</CardContent>
</Card>
<SectionCard title={content.period.title}>
<TextList items={content.period.items} />
</SectionCard>

{/* Support Period and Location */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.period.title}
</h3>
<div className="space-y-2 text-gray-700">
<ul className="list-disc pl-5 space-y-2">
{content.period.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ul>
</div>
</div>
</CardContent>
</Card>
<SectionCard title={content.condition.title}>
<Paragraph>{parseFormattedText(content.condition.intro)}</Paragraph>
<TextList items={content.condition.items} ordered />
<NoticeBox>{parseFormattedText(content.condition.outro)}</NoticeBox>
</SectionCard>

{/* Conditions */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.condition.title}
</h3>
<p>{parseFormattedText(content.condition.intro)}</p>
<ol className="list-decimal pl-5 space-y-1">
{content.condition.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ol>
<div className="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-100 text-sm font-semibold">
{parseFormattedText(content.condition.outro)}
</div>
</div>
</CardContent>
</Card>
<SectionCard title={content.selection.title}>
<Paragraph>{parseFormattedText(content.selection.description)}</Paragraph>
<TextList items={content.selection.items} />
</SectionCard>

{/* Selection */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.selection.title}
</h3>
<Paragraph>{parseFormattedText(content.selection.description)}</Paragraph>
<ul className="list-disc pl-5 space-y-1">
{content.selection.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ul>
</div>
</CardContent>
</Card>
<SectionCard title={content.result.title}>
<TextList items={content.result.items} />
</SectionCard>

{/* Result */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.result.title}
</h3>
<ul className="list-disc pl-5 space-y-1">
{content.result.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ul>
</div>
</CardContent>
</Card>
<p className="text-center text-sm text-gray-400 italic mt-4">{parseFormattedText(content.footer)}</p>
<p className="px-2 text-center font-open-sans text-sm italic leading-[1.6] text-[#6e6660]">
{parseFormattedText(content.footer)}
</p>
</div>
);
};

function SectionCard({ title, children }: { title: string; children: ReactNode }) {
return (
<Card className="rounded-2xl border-[#e9e2d6] bg-transparent py-0 shadow-none">
<CardContent className="flex flex-col gap-4 p-4">
<h2 className="font-playfair text-base font-semibold leading-[1.4] text-black">
{title}
</h2>
<div className="h-px w-full bg-[#e9e2d6]" />
<div className="flex flex-col gap-4 font-open-sans text-sm leading-[1.6] text-black">
{children}
</div>
</CardContent>
</Card>
);
}

function Paragraph({ children }: { children: ReactNode }) {
return (
<div className="prose max-w-none text-gray-700 richtext">
<p>{children}</p>
<p className="richtext max-w-none">{children}</p>
);
}

function TextList({ items, ordered = false }: { items: string[]; ordered?: boolean }) {
const ListTag = ordered ? 'ol' : 'ul';

return (
<ListTag className={`${ordered ? 'list-decimal' : 'list-disc'} space-y-2 pl-5 marker:text-[#862633]`}>
{items.map((item, index) => (
<li key={`${item}-${index}`} className="pl-1">
{parseFormattedText(item)}
</li>
))}
</ListTag>
);
}

function NoticeBox({ children }: { children: ReactNode }) {
return (
<div className="richtext rounded-2xl border border-[#e9e2d6] bg-[#f9f4f0] px-4 py-2 font-open-sans text-sm leading-[1.6] text-[#6b0f1a]">
{children}
</div>
);
}
}
Comment on lines +104 to +110

@coderabbitai coderabbitai Bot Jul 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

NoticeBox text color looks copy-pasted from a warning style.

NoticeBox uses text-[#6b0f1a] (dark red/maroon) on a neutral cream background/border — the same alarming text color used by SportteremContent.tsx's WarningBox (which pairs it with a red-tinted bg/border). On this neutral notice box, the red text likely misleads users into reading routine info as a warning.

🎨 Proposed fix 
 function NoticeBox({ children }: { children: ReactNode }) {
   return (
-    <div className="richtext rounded-2xl border border-[`#e9e2d6`] bg-[`#f9f4f0`] px-4 py-2 font-open-sans text-sm leading-[1.6] text-[`#6b0f1a`]">
+    <div className="richtext rounded-2xl border border-[`#e9e2d6`] bg-[`#f9f4f0`] px-4 py-2 font-open-sans text-sm leading-[1.6] text-black">
       {children}
     </div>
   );
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function NoticeBox({ children }: { children: ReactNode }) {
return (
<div className="richtext rounded-2xl border border-[#e9e2d6] bg-[#f9f4f0] px-4 py-2 font-open-sans text-sm leading-[1.6] text-[#6b0f1a]">
{children}
</div>
);
}
\ No newline at end of file
}
function NoticeBox({ children }: { children: ReactNode }) {
return (
<div className="richtext rounded-2xl border border-[`#e9e2d6`] bg-[`#f9f4f0`] px-4 py-2 font-open-sans text-sm leading-[1.6] text-black">
{children}
</div>
);
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/`(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx
around lines 104 - 110, Update the NoticeBox component’s text color to a
neutral, non-warning color appropriate for its cream background, replacing the
dark maroon text class while preserving its existing layout, border, and
typography classes.

22 changes: 14 additions & 8 deletions src/app/(app)/[lang]/sport/sportpalya-tamogatas/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,28 @@ import { getDictionary } from '@/get-dictionary';
import type { Locale } from '@/i18n-config';
import GymSupportContent from './components/GymSupportContent';
import { PageHeader } from '@/components/common/PageHeader';
import { parseFormattedText } from '@/utils/parseFormattedText';

type SportpalyaTamogatasPageProps = {
params: Promise<{ lang: Locale }>;
};

export default async function SportpalyaTamogatasPage({
params,
}: SportpalyaTamogatasPageProps) {
const { lang } = await params;
const dictionary = await getDictionary(lang, 'sport');
const dictionary = await getDictionary(lang, 'sport');
const content = dictionary.sport.sportpalyaTamogatas;

return (
<div className="min-h-screen bg-gray-50">
<div className="container mx-auto px-2 md:px-4 py-8">
<PageHeader title={dictionary.sport.sportpalyaTamogatas.title} />
<GymSupportContent
content={dictionary.sport.sportpalyaTamogatas}
/>
<div className="min-h-screen bg-[#f9f4f0]">
<div className="container mx-auto max-w-5xl px-3 py-6 md:px-8 md:py-8">
<PageHeader
title={content.title}
subtitle={parseFormattedText(content.description)}
/>
<GymSupportContent content={content} />
</div>
</div>
);
}
}
Loading