style: summary and user info 2026

frontend/src/pages/client/pycon/register/Register.tsx

@@ -103,7 +103,13 @@ const Register: FC = () => {
             </div>
           )}
 
-          {currentStep.id !== 'EventDetails' && currentStep.id !== 'Success' && <h1 className="text-xl">{currentStep.title}</h1>}
+          {currentStep.id !== 'EventDetails' && currentStep.id !== 'Success' && (
+            <div className="space-y-2.5 text-left w-full mb-2">
+              {currentStep.category && <p className="text-m font-bold tracking-widest text-[#04b1a4] uppercase font-inter">{currentStep.category}</p>}
+              <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#F99508]! font-sora tracking-tight leading-tight">{currentStep.title}</h1>
+              {currentStep.description && <p className="text-sm sm:text-base text-neutral-400 font-inter">{currentStep.description}</p>}
+            </div>
+          )}
 
           <div className="flex flex-col md:flex-row w-full h-full grow">
             {showStepper && shouldBeVertical && (

frontend/src/pages/client/pycon/register/steps/RegistrationSteps.ts

@@ -4,6 +4,8 @@ export type RegisterStepId = 'EventDetails' | 'BasicInfo' | 'TicketSelection' |
 
 export interface RegisterStep extends Step {
   id: RegisterStepId;
+  category?: string;
+  description?: string;
 }
 
 export const STEP_EVENT_DETAILS: RegisterStep = {
@@ -32,7 +34,9 @@ export const STEP_PAYMENT: RegisterStep = {
 
 export const STEP_SUMMARY: RegisterStep = {
   id: 'Summary',
-  title: 'Summary'
+  title: 'Confirm Details',
+  description: 'Review your information before submitting.',
+  category: 'REGISTRATION'
 };
 
 export const STEP_SUCCESS: RegisterStep = {

frontend/src/pages/client/pycon/register/steps/SummaryCard.tsx

@@ -0,0 +1,42 @@
+import { FC, ReactNode } from 'react';
+import { cn } from '@/utils/classes';
+
+interface SummaryCardProps {
+  title: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const SummaryCard: FC<SummaryCardProps> = ({ title, children, className }) => {
+  return (
+    <div className={cn('flex flex-col gap-5 w-full', className)}>
+      <p className="text-[11px] sm:text-xs font-bold uppercase tracking-wider text-neutral-400 px-1 text-left">{title}</p>
+      {/* <p className="text-[11px] sm:text-xs font-bold uppercase tracking-wider text-[#04B1A4]! px-1 text-left">
+        {title}
+      </p> */}
+      <div className="rounded-2xl bg-[#fffef8] shadow-xs overflow-hidden border border-[#faedd6]/60">{children}</div>
+    </div>
+  );
+};
+
+interface SummaryRowProps {
+  label: string;
+  value: ReactNode;
+  isAlt?: boolean;
+  className?: string;
+}
+
+export const SummaryRow: FC<SummaryRowProps> = ({ label, value, isAlt = false, className }) => {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-[150px_1fr] sm:grid-cols-[180px_1fr] md:grid-cols-[200px_1fr] items-center px-5 py-2.5 sm:px-6 sm:py-3 text-left transition-colors',
+        isAlt ? 'bg-[#FFFFFF4D]' : 'bg-[#FFF9F299]',
+        className
+      )}
+    >
+      <span className="text-[11px] sm:text-xs font-bold tracking-wider text-[#F99508] uppercase select-none mr-5">{label}</span>
+      <span className="text-xs sm:text-sm font-medium text-[#1e293b] break-words text-left">{value}</span>
+    </div>
+  );
+};