NguyenThanhToan/ipv6-sims
1
0
Fork 0
forked from UKSOURCE/ipv6
Code Pull Requests Activity

fix: ui title home page, add pricing card registration page

Browse Source
This commit is contained in:
nthanhtoan
2026-05-19 15:06:59 +07:00
parent 8b061f7489
commit e5955d2e66
8 changed files with 79 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/forms/RegistrationPageClient.tsx
+40
View File
@@ -7,6 +7,13 @@ import RegistrationForm from "@/app/components/forms/RegistrationForm";
export default function RegistrationPageClient() {
const { registration, lang } = useTranslation();
const backLabel = lang === "vi" ? "Quay Về Trang Chủ" : "Back to Home";
const ticket = registration.ticket as {
label: string;
price: string;
currency: string;
note: string;
perks: string[];
};
return (
<main className="pt-[120px] pb-[80px] px-[var(--spacing-gutter)] flex justify-center">
@@ -31,6 +38,39 @@ export default function RegistrationPageClient() {
<p className="text-on-surface-variant text-lg">{registration.subtitle}</p>
</div>
{/* Pricing Card */}
<div className="mb-[32px] glass-panel rounded-xl p-6 md:p-8 relative overflow-hidden border border-primary/30">
<div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent" />
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl gold-gradient-bg flex items-center justify-center shrink-0">
<span className="material-symbols-outlined text-on-primary text-[22px]">confirmation_number</span>
</div>
<div>
<p className="text-outline text-xs uppercase tracking-widest mb-1">{ticket.label}</p>
<div className="flex items-baseline gap-2">
<span className="font-[var(--font-display-lg)] text-[2.5rem] leading-none text-primary">
{ticket.price}
</span>
<span className="text-on-surface-variant text-base font-medium">{ticket.currency}</span>
</div>
<p className="text-outline text-xs mt-1 flex items-center gap-1">
<span className="material-symbols-outlined text-[14px]">payments</span>
{ticket.note}
</p>
</div>
</div>
<ul className="space-y-2 sm:text-right">
{ticket.perks.map((perk, i) => (
<li key={i} className="flex sm:flex-row-reverse items-center gap-2 text-on-surface-variant text-sm">
<span className="material-symbols-outlined text-primary text-[16px]">check_circle</span>
{perk}
</li>
))}
</ul>
</div>
</div>
<div className="glass-panel p-[32px] md:p-12 rounded-xl shadow-2xl relative overflow-hidden">
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
<RegistrationForm data={registration} />