Update site changes

2026-01-31 22:32:54 +00:00
parent d3c69f2936
commit 6df3baf0be
25 changed files with 764 additions and 137 deletions
--- a/frontend/src/app/(public)/book/[eventId]/page.tsx
+++ b/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>
--- a/frontend/src/app/(public)/booking/[ticketId]/page.tsx
+++ b/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}
--- a/frontend/src/app/(public)/community/page.tsx
+++ b/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 */}
--- a/frontend/src/app/(public)/components/HeroSection.tsx
+++ b/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>
--- a/frontend/src/app/(public)/events/[id]/EventDetailClient.tsx
+++ b/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 
--- a/frontend/src/app/admin/events/page.tsx
+++ b/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}
--- a/frontend/src/app/globals.css
+++ b/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 */
--- a/frontend/src/app/layout.tsx
+++ b/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>
--- a/frontend/src/app/linktree/page.tsx
+++ b/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 */}