final 0.9

app/components/InfoBox.tsx

@@ -1,25 +1,54 @@
 'use client'
 
+import { useState } from 'react'
 import { useI18n } from '@/lib/i18n'
+import UnlockModal from './UnlockModal'
 
 export default function InfoBox() {
   const { t } = useI18n()
+  const [showUnlockModal, setShowUnlockModal] = useState(false)
+  
+  // Process the text to make "referral link" clickable
+  const processTaxesLegalText = () => {
+    const text = t('infoBox.taxesLegalText')
+    
+    // Replace "referral link" or "Referral-Link" with a clickable link
+    // Preserve the original case of the matched text
+    const processed = text.replace(
+      /(referral link|Referral-Link)/gi,
+      (match) => `<a href="#" class="referral-link-clickable" style="cursor:pointer;text-decoration:underline;color:inherit;">${match}</a>`
+    )
+    
+    return processed
+  }
   
   return (
-    <div className="info-box">
-      <div>
-        <h3>{t('infoBox.whyCheap')}</h3>
-        <p>{t('infoBox.whyCheapText')}</p>
+    <>
+      <div className="info-box">
+        <div>
+          <h3>{t('infoBox.whyCheap')}</h3>
+          <p>{t('infoBox.whyCheapText')}</p>
+        </div>
+        <div>
+          <h3>{t('infoBox.taxesLegal')}</h3>
+          <p
+            dangerouslySetInnerHTML={{ __html: processTaxesLegalText() }}
+            onClick={(e) => {
+              const target = e.target as HTMLElement
+              if (target.classList.contains('referral-link-clickable')) {
+                e.preventDefault()
+                setShowUnlockModal(true)
+              }
+            }}
+          />
+        </div>
+        <div>
+          <h3>{t('infoBox.dropModel')}</h3>
+          <p>{t('infoBox.dropModelText')}</p>
+        </div>
       </div>
-      <div>
-        <h3>{t('infoBox.taxesLegal')}</h3>
-        <p>{t('infoBox.taxesLegalText')}</p>
-      </div>
-      <div>
-        <h3>{t('infoBox.dropModel')}</h3>
-        <p>{t('infoBox.dropModelText')}</p>
-      </div>
-    </div>
+      <UnlockModal isOpen={showUnlockModal} onClose={() => setShowUnlockModal(false)} />
+    </>
   )
 }