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

app/components/forms/RegistrationPageClient.tsx

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

app/components/home/HeroSection.tsx

@@ -25,7 +25,15 @@ export default function HeroSection({
             </span>
           </div>
           <h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-8 leading-[1.1] text-[clamp(1.75rem,3.5vw+1rem,4.25rem)]">
-            {data.title}
+            {data.title.includes(" AI") ? (
+              <>
+                {data.title.split(" AI")[0]}
+                <br />
+                {"AI" + data.title.split(" AI").slice(1).join(" AI")}
+              </>
+            ) : (
+              data.title
+            )}
           </h1>
           <p className="text-on-surface-variant text-base lg:text-[22px] mb-8 lg:mb-16 max-w-3xl leading-relaxed opacity-90">
             {data.subtitle}