Update site changes

frontend/.env.example

@@ -19,6 +19,7 @@ NEXT_PUBLIC_WHATSAPP=+595991234567
 NEXT_PUBLIC_INSTAGRAM=spanglish_py
 NEXT_PUBLIC_EMAIL=hola@spanglish.com.py
 NEXT_PUBLIC_TELEGRAM=spanglish_py
+NEXT_PUBLIC_TIKTOK=spanglishsocialpy
 
 # Plausible Analytics (optional - leave empty to disable tracking)
 NEXT_PUBLIC_PLAUSIBLE_URL=https://analytics.azzamo.net

frontend/src/app/(public)/book/[eventId]/page.tsx

@@ -160,6 +160,13 @@ export default function BookingPage() {
             router.push('/events');
             return;
           }
+          
+          // Redirect to external booking if enabled
+          if (eventRes.event.externalBookingEnabled && eventRes.event.externalBookingUrl) {
+            window.location.href = eventRes.event.externalBookingUrl;
+            return;
+          }
+          
           setEvent(eventRes.event);
           setPaymentConfig(paymentRes.paymentOptions);
           
@@ -696,6 +703,34 @@ export default function BookingPage() {
               <p className="font-mono font-bold text-lg">{bookingResult.qrCode}</p>
             </div>
             
+            {/* Manual verification notice */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+              <div className="flex gap-3">
+                <div className="flex-shrink-0">
+                  <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                  </svg>
+                </div>
+                <div className="text-sm text-blue-800">
+                  <p className="font-medium mb-1">
+                    {locale === 'es' ? 'Verificación manual' : 'Manual verification'}
+                  </p>
+                  <p className="text-blue-700">
+                    {locale === 'es' 
+                      ? 'El equipo de Spanglish revisará el pago manualmente. Tu reserva solo será confirmada después de recibir un email de confirmación de nuestra parte.'
+                      : 'The Spanglish team will review the payment manually. Your booking is only confirmed after you receive a confirmation email from us.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            {/* Warning before I Have Paid button */}
+            <p className="text-sm text-center text-amber-700 font-medium mb-3">
+              {locale === 'es'
+                ? 'Solo haz clic aquí después de haber completado el pago.'
+                : 'Only click this after you have actually completed the payment.'}
+            </p>
+            
             {/* I Have Paid Button */}
             <Button
               onClick={handleMarkPaymentSent}
@@ -1016,48 +1051,90 @@ export default function BookingPage() {
                       : 'No payment methods available for this event.'}
                   </div>
                 ) : (
-                  paymentMethods.map((method) => (
-                    <button
-                      key={method.id}
-                      type="button"
-                      onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
-                      className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
-                        formData.paymentMethod === method.id
-                          ? 'border-primary-yellow bg-primary-yellow/10'
-                          : 'border-secondary-light-gray hover:border-gray-300'
-                      }`}
-                    >
-                      <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-                        formData.paymentMethod === method.id
-                          ? 'bg-primary-yellow'
-                          : 'bg-gray-100'
-                      }`}>
-                        <method.icon className={`w-5 h-5 ${
+                  <>
+                    {paymentMethods.map((method) => (
+                      <button
+                        key={method.id}
+                        type="button"
+                        onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
+                        className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
                           formData.paymentMethod === method.id
-                            ? 'text-primary-dark'
-                            : 'text-gray-500'
-                        }`} />
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2">
-                          <p className="font-medium text-primary-dark">{method.label}</p>
-                          {method.badge && (
-                            <span className={`text-xs px-2 py-0.5 rounded-full ${
-                              method.badge === 'Instant' || method.badge === 'Instantáneo'
-                                ? 'bg-green-100 text-green-700'
-                                : 'bg-gray-100 text-gray-600'
-                            }`}>
-                              {method.badge}
-                            </span>
-                          )}
+                            ? 'border-primary-yellow bg-primary-yellow/10'
+                            : 'border-secondary-light-gray hover:border-gray-300'
+                        }`}
+                      >
+                        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                          formData.paymentMethod === method.id
+                            ? 'bg-primary-yellow'
+                            : 'bg-gray-100'
+                        }`}>
+                          <method.icon className={`w-5 h-5 ${
+                            formData.paymentMethod === method.id
+                              ? 'text-primary-dark'
+                              : 'text-gray-500'
+                          }`} />
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            <p className="font-medium text-primary-dark">{method.label}</p>
+                            {method.badge && (
+                              <span className={`text-xs px-2 py-0.5 rounded-full ${
+                                method.badge === 'Instant' || method.badge === 'Instantáneo'
+                                  ? 'bg-green-100 text-green-700'
+                                  : 'bg-gray-100 text-gray-600'
+                              }`}>
+                                {method.badge}
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-sm text-gray-500">{method.description}</p>
+                        </div>
+                        {formData.paymentMethod === method.id && (
+                          <CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
+                        )}
+                      </button>
+                    ))}
+                    
+                    {/* Manual payment instructions - shown when TPago or Bank Transfer is selected */}
+                    {(formData.paymentMethod === 'tpago' || formData.paymentMethod === 'bank_transfer') && (
+                      <div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
+                        <div className="flex gap-3">
+                          <div className="flex-shrink-0">
+                            <svg className="w-5 h-5 text-amber-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                            </svg>
+                          </div>
+                          <div className="text-sm text-amber-800">
+                            <p className="font-medium mb-1">
+                              {locale === 'es' ? 'Proceso de pago manual' : 'Manual payment process'}
+                            </p>
+                            <ol className="list-decimal list-inside space-y-1 text-amber-700">
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Por favor completa el pago primero.' 
+                                  : 'Please complete the payment first.'}
+                              </li>
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Después de pagar, haz clic en "Ya pagué" para notificarnos.' 
+                                  : 'After you have paid, click "I have paid" to notify us.'}
+                              </li>
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Nuestro equipo verificará el pago manualmente.' 
+                                  : 'Our team will manually verify the payment.'}
+                              </li>
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Una vez aprobado, recibirás un email confirmando tu reserva.' 
+                                  : 'Once approved, you will receive an email confirming your booking.'}
+                              </li>
+                            </ol>
+                          </div>
                         </div>
-                        <p className="text-sm text-gray-500">{method.description}</p>
                       </div>
-                      {formData.paymentMethod === method.id && (
-                        <CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
-                      )}
-                    </button>
-                  ))
+                    )}
+                  </>
                 )}
               </div>
             </Card>

frontend/src/app/(public)/booking/[ticketId]/page.tsx

@@ -457,6 +457,34 @@ export default function BookingPaymentPage() {
               <p className="font-mono font-bold text-lg">{ticket.qrCode}</p>
             </div>
             
+            {/* Manual verification notice */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+              <div className="flex gap-3">
+                <div className="flex-shrink-0">
+                  <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                  </svg>
+                </div>
+                <div className="text-sm text-blue-800">
+                  <p className="font-medium mb-1">
+                    {locale === 'es' ? 'Verificación manual' : 'Manual verification'}
+                  </p>
+                  <p className="text-blue-700">
+                    {locale === 'es' 
+                      ? 'El equipo de Spanglish revisará el pago manualmente. Tu reserva solo será confirmada después de recibir un email de confirmación de nuestra parte.'
+                      : 'The Spanglish team will review the payment manually. Your booking is only confirmed after you receive a confirmation email from us.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            {/* Warning before I Have Paid button */}
+            <p className="text-sm text-center text-amber-700 font-medium mb-3">
+              {locale === 'es'
+                ? 'Solo haz clic aquí después de haber completado el pago.'
+                : 'Only click this after you have actually completed the payment.'}
+            </p>
+            
             {/* I Have Paid Button */}
             <Button
               onClick={handleMarkPaymentSent}

frontend/src/app/(public)/community/page.tsx

@@ -14,7 +14,8 @@ import {
   socialConfig, 
   getWhatsAppUrl, 
   getInstagramUrl, 
-  getTelegramUrl 
+  getTelegramUrl,
+  getTikTokUrl 
 } from '@/lib/socialLinks';
 
 export default function CommunityPage() {
@@ -24,6 +25,7 @@ export default function CommunityPage() {
   const whatsappUrl = getWhatsAppUrl(socialConfig.whatsapp);
   const instagramUrl = getInstagramUrl(socialConfig.instagram);
   const telegramUrl = getTelegramUrl(socialConfig.telegram);
+  const tiktokUrl = getTikTokUrl(socialConfig.tiktok);
 
   const guidelines = t('community.guidelines.items') as unknown as string[];
 
@@ -36,7 +38,7 @@ export default function CommunityPage() {
         </div>
 
         {/* Social Links */}
-        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
           {/* WhatsApp Card */}
           {whatsappUrl && (
             <Card className="p-8 text-center card-hover">
@@ -76,7 +78,7 @@ export default function CommunityPage() {
                 rel="noopener noreferrer"
                 className="inline-block mt-6"
               >
-                <Button variant="outline">
+                <Button>
                   {t('community.telegram.button')}
                 </Button>
               </a>
@@ -103,6 +105,29 @@ export default function CommunityPage() {
               </a>
             </Card>
           )}
+
+          {/* TikTok Card */}
+          {tiktokUrl && (
+            <Card className="p-8 text-center card-hover">
+              <div className="w-20 h-20 mx-auto bg-black rounded-full flex items-center justify-center">
+                <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+                </svg>
+              </div>
+              <h3 className="mt-6 text-xl font-semibold">{t('community.tiktok.title')}</h3>
+              <p className="mt-3 text-gray-600">{t('community.tiktok.description')}</p>
+              <a 
+                href={tiktokUrl}
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="inline-block mt-6"
+              >
+                <Button>
+                  {t('community.tiktok.button')}
+                </Button>
+              </a>
+            </Card>
+          )}
         </div>
 
         {/* Guidelines */}

frontend/src/app/(public)/components/HeroSection.tsx

@@ -4,10 +4,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useLanguage } from '@/context/LanguageContext';
 import Button from '@/components/ui/Button';
-import { 
-  ChatBubbleLeftRightIcon,
-  UserGroupIcon 
-} from '@heroicons/react/24/outline';
 
 export default function HeroSection() {
   const { t } = useLanguage();
@@ -51,8 +47,6 @@ export default function HeroSection() {
                       priority
                       fetchPriority="high"
                     />
-                  <div className="absolute inset-0 bg-primary-yellow/60" />
-                  <ChatBubbleLeftRightIcon className="relative z-10 w-16 h-16 text-primary-dark opacity-50" />
                 </div>
                 <div className="relative rounded-card h-48 overflow-hidden">
                   <Image
@@ -76,7 +70,7 @@ export default function HeroSection() {
                     loading="lazy"
                   />
                 </div>
-                <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
+                <div className="relative rounded-card h-32 overflow-hidden">
                   <Image
                     src="/images/2026-01-29 13.09.59.jpg"
                     alt="Language exchange group practicing English and Spanish"
@@ -85,8 +79,6 @@ export default function HeroSection() {
                     className="object-cover"
                     loading="lazy"
                   />
-                  <div className="absolute inset-0 bg-secondary-brown/40" />
-                  <UserGroupIcon className="relative z-10 w-16 h-16 text-secondary-brown opacity-70" />
                 </div>
               </div>
             </div>

frontend/src/app/(public)/events/[id]/EventDetailClient.tsx

@@ -186,11 +186,23 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
               </div>
               
               {canBook ? (
-                <Link href={`/book/${event.id}`}>
-                  <Button className="w-full" size="lg">
-                    {t('events.booking.join')}
-                  </Button>
-                </Link>
+                event.externalBookingEnabled && event.externalBookingUrl ? (
+                  <a
+                    href={event.externalBookingUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button className="w-full" size="lg">
+                      {t('events.booking.join')}
+                    </Button>
+                  </a>
+                ) : (
+                  <Link href={`/book/${event.id}`}>
+                    <Button className="w-full" size="lg">
+                      {t('events.booking.join')}
+                    </Button>
+                  </Link>
+                )
               ) : (
                 <Button className="w-full" size="lg" disabled>
                   {isPastEvent 

frontend/src/app/admin/events/page.tsx

@@ -34,6 +34,8 @@ export default function AdminEventsPage() {
     capacity: number;
     status: 'draft' | 'published' | 'cancelled' | 'completed' | 'archived';
     bannerUrl: string;
+    externalBookingEnabled: boolean;
+    externalBookingUrl: string;
   }>({
     title: '',
     titleEs: '',
@@ -48,6 +50,8 @@ export default function AdminEventsPage() {
     capacity: 50,
     status: 'draft',
     bannerUrl: '',
+    externalBookingEnabled: false,
+    externalBookingUrl: '',
   });
 
   useEffect(() => {
@@ -80,6 +84,8 @@ export default function AdminEventsPage() {
       capacity: 50,
       status: 'draft' as const,
       bannerUrl: '',
+      externalBookingEnabled: false,
+      externalBookingUrl: '',
     });
     setEditingEvent(null);
   };
@@ -99,6 +105,8 @@ export default function AdminEventsPage() {
       capacity: event.capacity,
       status: event.status,
       bannerUrl: event.bannerUrl || '',
+      externalBookingEnabled: event.externalBookingEnabled || false,
+      externalBookingUrl: event.externalBookingUrl || '',
     });
     setEditingEvent(event);
     setShowForm(true);
@@ -109,6 +117,18 @@ export default function AdminEventsPage() {
     setSaving(true);
 
     try {
+      // Validate external booking URL if enabled
+      if (formData.externalBookingEnabled && !formData.externalBookingUrl) {
+        toast.error('External booking URL is required when external booking is enabled');
+        setSaving(false);
+        return;
+      }
+      if (formData.externalBookingEnabled && !formData.externalBookingUrl.startsWith('https://')) {
+        toast.error('External booking URL must be a valid HTTPS link');
+        setSaving(false);
+        return;
+      }
+
       const eventData = {
         title: formData.title,
         titleEs: formData.titleEs || undefined,
@@ -123,6 +143,8 @@ export default function AdminEventsPage() {
         capacity: formData.capacity,
         status: formData.status,
         bannerUrl: formData.bannerUrl || undefined,
+        externalBookingEnabled: formData.externalBookingEnabled,
+        externalBookingUrl: formData.externalBookingEnabled ? formData.externalBookingUrl : undefined,
       };
 
       if (editingEvent) {
@@ -340,6 +362,43 @@ export default function AdminEventsPage() {
                 </select>
               </div>
 
+              {/* External Booking Section */}
+              <div className="border border-secondary-light-gray rounded-lg p-4 space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">External Booking</label>
+                    <p className="text-xs text-gray-500">Redirect users to an external booking platform</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setFormData({ ...formData, externalBookingEnabled: !formData.externalBookingEnabled })}
+                    className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-yellow focus:ring-offset-2 ${
+                      formData.externalBookingEnabled ? 'bg-primary-yellow' : 'bg-gray-200'
+                    }`}
+                  >
+                    <span
+                      className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                        formData.externalBookingEnabled ? 'translate-x-5' : 'translate-x-0'
+                      }`}
+                    />
+                  </button>
+                </div>
+                
+                {formData.externalBookingEnabled && (
+                  <div>
+                    <Input
+                      label="External Booking URL"
+                      type="url"
+                      value={formData.externalBookingUrl}
+                      onChange={(e) => setFormData({ ...formData, externalBookingUrl: e.target.value })}
+                      placeholder="https://example.com/book"
+                      required
+                    />
+                    <p className="text-xs text-gray-500 mt-1">Must be a valid HTTPS URL</p>
+                  </div>
+                )}
+              </div>
+
               {/* Image Upload / Media Picker */}
               <MediaPicker
                 value={formData.bannerUrl}

frontend/src/app/globals.css

@@ -9,10 +9,35 @@
   
   body {
     @apply font-sans text-primary-dark antialiased;
+    @apply font-normal; /* Regular (400) for body */
+    @apply leading-relaxed; /* Good line spacing */
   }
   
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-heading;
+  /* Titles: Medium (500) / SemiBold (600) with good spacing */
+  h1 {
+    @apply font-semibold tracking-tight leading-tight;
+  }
+  
+  h2 {
+    @apply font-semibold tracking-tight leading-tight;
+  }
+  
+  h3 {
+    @apply font-semibold leading-snug;
+  }
+  
+  h4, h5, h6 {
+    @apply font-medium leading-snug;
+  }
+  
+  /* Paragraphs with good spacing */
+  p {
+    @apply leading-relaxed;
+  }
+  
+  /* Buttons: Medium weight */
+  button, .btn, [type="button"], [type="submit"], [type="reset"] {
+    @apply font-medium;
   }
 }
 
@@ -26,11 +51,11 @@
   }
   
   .section-title {
-    @apply text-3xl md:text-4xl font-bold text-primary-dark;
+    @apply text-3xl md:text-4xl font-semibold text-primary-dark tracking-tight;
   }
   
   .section-subtitle {
-    @apply text-lg text-gray-600 mt-4;
+    @apply text-lg text-gray-600 mt-4 leading-relaxed;
   }
   
   /* Form styles */

frontend/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter, Poppins } from 'next/font/google';
+import { Poppins } from 'next/font/google';
 import { Toaster } from 'react-hot-toast';
 import { LanguageProvider } from '@/context/LanguageContext';
 import { AuthProvider } from '@/context/AuthContext';
@@ -7,18 +7,14 @@ import PlausibleAnalytics from '@/components/PlausibleAnalytics';
 import './globals.css';
 
 // Self-hosted fonts via next/font - eliminates render-blocking external requests
-const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-inter',
-  weight: ['400', '500', '600', '700'],
-});
-
+// Poppins: entire site
+// - Titles: Medium (500) / SemiBold (600)
+// - Body: Regular (400)
 const poppins = Poppins({
   subsets: ['latin'],
   display: 'swap',
   variable: '--font-poppins',
-  weight: ['500', '600', '700'],
+  weight: ['400', '500', '600', '700'],
 });
 
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';
@@ -95,6 +91,10 @@ export const metadata: Metadata = {
   },
   category: 'events',
   manifest: '/manifest.json',
+  icons: {
+    icon: '/images/favicon.png',
+    apple: '/images/favicon_icon.png',
+  },
 };
 
 export const viewport: Viewport = {
@@ -110,8 +110,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${inter.variable} ${poppins.variable}`}>
-      <body className={inter.className}>
+    <html lang="en" className={poppins.variable}>
+      <body className={poppins.className}>
         <PlausibleAnalytics />
         <AuthProvider>
           <LanguageProvider>

frontend/src/app/linktree/page.tsx

@@ -19,6 +19,7 @@ export default function LinktreePage() {
   const whatsappLink = process.env.NEXT_PUBLIC_WHATSAPP;
   const instagramHandle = process.env.NEXT_PUBLIC_INSTAGRAM;
   const telegramHandle = process.env.NEXT_PUBLIC_TELEGRAM;
+  const tiktokHandle = process.env.NEXT_PUBLIC_TIKTOK;
 
   useEffect(() => {
     eventsApi.getNextUpcoming()
@@ -51,6 +52,10 @@ export default function LinktreePage() {
     ? (telegramHandle.startsWith('http') ? telegramHandle : `https://t.me/${telegramHandle.replace('@', '')}`)
     : null;
 
+  const tiktokUrl = tiktokHandle 
+    ? (tiktokHandle.startsWith('http') ? tiktokHandle : `https://www.tiktok.com/@${tiktokHandle.replace('@', '')}`)
+    : null;
+
   return (
     <div className="min-h-screen bg-gradient-to-b from-primary-dark via-gray-900 to-primary-dark">
       <div className="max-w-md mx-auto px-4 py-8 pb-16">
@@ -195,6 +200,31 @@ export default function LinktreePage() {
               </svg>
             </a>
           )}
+
+          {/* TikTok */}
+          {tiktokUrl && (
+            <a 
+              href={tiktokUrl} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="flex items-center gap-4 bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/10 transition-all duration-300 hover:bg-white/20 hover:border-white/30 hover:scale-[1.02] group"
+            >
+              <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center flex-shrink-0">
+                <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+                </svg>
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold text-white group-hover:text-white transition-colors">
+                  {t('linktree.tiktok.title')}
+                </p>
+                <p className="text-sm text-gray-400">{t('linktree.tiktok.subtitle')}</p>
+              </div>
+              <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </a>
+          )}
         </div>
 
         {/* Website Link */}

frontend/src/context/AuthContext.tsx

@@ -28,6 +28,7 @@ interface AuthContextType {
   logout: () => void;
   updateUser: (user: User) => void;
   setAuthData: (data: { user: User; token: string }) => void;
+  refreshUser: () => Promise<void>;
 }
 
 interface RegisterData {
@@ -48,6 +49,35 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [token, setToken] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  const refreshUser = useCallback(async () => {
+    const currentToken = localStorage.getItem(TOKEN_KEY);
+    if (!currentToken) return;
+
+    try {
+      const res = await fetch(`${API_BASE}/api/auth/me`, {
+        headers: { 
+          'Authorization': `Bearer ${currentToken}`,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setUser(data.user);
+        localStorage.setItem(USER_KEY, JSON.stringify(data.user));
+      } else if (res.status === 401) {
+        // Token is invalid, clear auth state
+        setToken(null);
+        setUser(null);
+        localStorage.removeItem(TOKEN_KEY);
+        localStorage.removeItem(USER_KEY);
+      }
+    } catch (error) {
+      // Network error, keep using cached data
+      console.error('Failed to refresh user data:', error);
+    }
+  }, []);
+
   useEffect(() => {
     // Load auth state from localStorage
     const savedToken = localStorage.getItem(TOKEN_KEY);
@@ -56,9 +86,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     if (savedToken && savedUser) {
       setToken(savedToken);
       setUser(JSON.parse(savedUser));
+      // Refresh user data from server to get latest role/permissions
+      refreshUser().finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
     }
-    setIsLoading(false);
-  }, []);
+  }, [refreshUser]);
 
   const setAuthData = useCallback((data: { user: User; token: string }) => {
     setToken(data.token);
@@ -159,6 +192,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         logout,
         updateUser,
         setAuthData,
+        refreshUser,
       }}
     >
       {children}

frontend/src/i18n/locales/en.json

@@ -164,6 +164,11 @@
       "description": "Join our Telegram channel for news and announcements",
       "button": "Join Telegram"
     },
+    "tiktok": {
+      "title": "TikTok",
+      "description": "Watch our videos and follow us for fun content",
+      "button": "Follow Us"
+    },
     "guidelines": {
       "title": "Community Guidelines",
       "items": [
@@ -316,6 +321,10 @@
     "instagram": {
       "title": "Instagram",
       "subtitle": "Photos & stories"
+    },
+    "tiktok": {
+      "title": "TikTok",
+      "subtitle": "Videos & fun content"
     }
   }
 }

frontend/src/i18n/locales/es.json

@@ -164,6 +164,11 @@
       "description": "Únete a nuestro canal de Telegram para noticias y anuncios",
       "button": "Unirse a Telegram"
     },
+    "tiktok": {
+      "title": "TikTok",
+      "description": "Mira nuestros videos y síguenos para contenido divertido",
+      "button": "Seguirnos"
+    },
     "guidelines": {
       "title": "Reglas de la Comunidad",
       "items": [
@@ -316,6 +321,10 @@
     "instagram": {
       "title": "Instagram",
       "subtitle": "Fotos e historias"
+    },
+    "tiktok": {
+      "title": "TikTok",
+      "subtitle": "Videos y contenido divertido"
     }
   }
 }

frontend/src/lib/api.ts

@@ -422,6 +422,8 @@ export interface Event {
   capacity: number;
   status: 'draft' | 'published' | 'cancelled' | 'completed' | 'archived';
   bannerUrl?: string;
+  externalBookingEnabled?: boolean;
+  externalBookingUrl?: string;
   bookedCount?: number;
   availableSeats?: number;
   createdAt: string;

frontend/src/lib/socialLinks.tsx

@@ -6,10 +6,11 @@ export interface SocialLinks {
   instagram?: string;
   email?: string;
   telegram?: string;
+  tiktok?: string;
 }
 
 export interface SocialLink {
-  type: 'whatsapp' | 'instagram' | 'email' | 'telegram';
+  type: 'whatsapp' | 'instagram' | 'email' | 'telegram' | 'tiktok';
   url: string;
   label: string;
   handle?: string;
@@ -21,6 +22,7 @@ export const socialConfig: SocialLinks = {
   instagram: process.env.NEXT_PUBLIC_INSTAGRAM || undefined,
   email: process.env.NEXT_PUBLIC_EMAIL || undefined,
   telegram: process.env.NEXT_PUBLIC_TELEGRAM || undefined,
+  tiktok: process.env.NEXT_PUBLIC_TIKTOK || undefined,
 };
 
 // Generate URLs from handles/values
@@ -62,6 +64,17 @@ export function getTelegramUrl(value?: string): string | null {
   return `https://t.me/${clean}`;
 }
 
+export function getTikTokUrl(value?: string): string | null {
+  if (!value) return null;
+  // If it's already a full URL, return as-is
+  if (value.startsWith('https://') || value.startsWith('http://')) {
+    return value;
+  }
+  // Otherwise, treat as handle - add @ if not present
+  const clean = value.startsWith('@') ? value : `@${value}`;
+  return `https://www.tiktok.com/${clean}`;
+}
+
 // Extract display handle from URL or value
 function extractInstagramHandle(value: string): string {
   // If it's a URL, extract the username from the path
@@ -83,6 +96,20 @@ function extractTelegramHandle(value: string): string {
   return `@${value.replace('@', '')}`;
 }
 
+function extractTikTokHandle(value: string): string {
+  // If it's a URL, extract the username from the path
+  if (value.startsWith('http')) {
+    const match = value.match(/tiktok\.com\/(@?[^/?]+)/);
+    if (match) {
+      const handle = match[1];
+      return handle.startsWith('@') ? handle : `@${handle}`;
+    }
+    return '@tiktok';
+  }
+  // Otherwise it's already a handle
+  return value.startsWith('@') ? value : `@${value}`;
+}
+
 // Get all active social links as an array
 export function getSocialLinks(): SocialLink[] {
   const links: SocialLink[] = [];
@@ -135,6 +162,18 @@ export function getSocialLinks(): SocialLink[] {
     }
   }
 
+  if (socialConfig.tiktok) {
+    const url = getTikTokUrl(socialConfig.tiktok);
+    if (url) {
+      links.push({
+        type: 'tiktok',
+        url,
+        label: 'TikTok',
+        handle: extractTikTokHandle(socialConfig.tiktok),
+      });
+    }
+  }
+
   return links;
 }
 
@@ -160,4 +199,9 @@ export const socialIcons = {
       <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
     </svg>
   ),
+  tiktok: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+    </svg>
+  ),
 };

frontend/tailwind.config.js

@@ -25,8 +25,9 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
-        heading: ['var(--font-poppins)', 'var(--font-inter)', 'system-ui', 'sans-serif'],
+        // Poppins everywhere
+        sans: ['var(--font-poppins)', 'system-ui', 'sans-serif'],
+        heading: ['var(--font-poppins)', 'system-ui', 'sans-serif'],
       },
       borderRadius: {
         'btn': '12px',