Fix: update font urbanist (#86)

.github/workflows/e2e.yml

@@ -46,7 +46,7 @@ jobs:
           VITE_APP_NETWORK: local
           VITE_NETWORK_TYPE: testnet
           VITE_RPC_URL_1337: http://127.0.0.1:8545
-          VITE_RPC_URL_80002: https://rpc-amoy.polygon.technology/
+          VITE_RPC_URL_80002: https://polygon-amoy.drpc.org
           VITE_RPC_URL_137: https://rpc.ankr.com/polygon
           # Analytics disabled in E2E — no events sent to GA4/GTM during test runs
           VITE_GTM_CONTAINER_ID: ''

public/fonts/Urbanist/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Urbanist Project Authors (https://github.com/coreyhu/Urbanist)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/components/about/CapabilityCard/CapabilityCard.tsx

@@ -33,7 +33,7 @@ const CapabilityCard = ({ cap, isDarkMode }: CapabilityCardProps) => (
         {cap.tags.map(tag => (
           <span
             key={tag}
-            className="font-gilroy font-bold rounded-full inline-flex items-center justify-center"
+            className="font-urbanist font-bold rounded-full inline-flex items-center justify-center"
             style={{
               width: '128px',
               height: '24px',
@@ -49,7 +49,7 @@ const CapabilityCard = ({ cap, isDarkMode }: CapabilityCardProps) => (
 
     <h3
       className={clsx(
-        'font-gilroy font-bold',
+        'font-urbanist font-bold',
         isDarkMode ? 'text-neutral-60' : 'text-[#1E2026]'
       )}
       style={{ fontSize: '18px', lineHeight: '136%' }}

src/components/about/EcosystemCard/EcosystemCard.tsx

@@ -4,7 +4,7 @@ const EcosystemCard = () => (
       <div className="about-ecosystem-card">
         <div className="relative z-10">
           <h2
-            className="font-gilroy font-bold text-center text-white"
+            className="font-urbanist font-bold text-center text-white"
             style={{ fontSize: '24px', lineHeight: '133%' }}
           >
             How TrustVC Powers Multiple Ecosystems

src/components/common/AddressBookOverlay/AddressBookOverlay.tsx

@@ -73,7 +73,7 @@ const AddressBookOverlay: React.FC<AddressBookOverlayProps> = ({
       {/* Header */}
       <div className="self-stretch pt-6 pb-4 px-6 flex items-start gap-4">
         <span
-          className="flex-1 font-['Gilroy'] font-bold text-[24px] leading-[31.92px]"
+          className="flex-1 font-urbanist font-bold text-[24px] leading-[31.92px]"
           style={{ color: isDarkMode ? '#C8CDD3' : '#1E2026' }}
         >
           Address Book
@@ -102,7 +102,7 @@ const AddressBookOverlay: React.FC<AddressBookOverlayProps> = ({
             <div className="flex-1 basis-0 min-w-[290px] max-w-[600px] p-1 flex items-center overflow-visible">
               <div className="p-1 shrink-0">
                 <span
-                  className="font-['Gilroy'] font-medium text-[16px] leading-[20px] whitespace-nowrap"
+                  className="font-urbanist font-medium text-[16px] leading-[20px] whitespace-nowrap"
                   style={{ color: isDarkMode ? '#808894' : '#3D444D' }}
                 >
                   Address Book
@@ -241,7 +241,7 @@ const AddressBookOverlay: React.FC<AddressBookOverlayProps> = ({
                         {/* Wallet Name */}
                         <div className="flex-1 basis-0 max-w-[320px] min-w-[240px] p-2 rounded-lg flex flex-col justify-center gap-1">
                           <span
-                            className="self-stretch font-['Gilroy'] font-bold text-[14px] leading-[21.7px]"
+                            className="self-stretch font-urbanist font-bold text-[14px] leading-[21.7px]"
                             style={{
                               color: isDarkMode ? '#C8CDD3' : '#1E2026',
                             }}
@@ -264,7 +264,7 @@ const AddressBookOverlay: React.FC<AddressBookOverlayProps> = ({
                           <div className="p-1 flex items-center">
                             {copiedAddress === entry.address ? (
                               <span
-                                className="min-w-[32px] min-h-[32px] flex items-center justify-center font-['Gilroy'] font-bold text-[11px]"
+                                className="min-w-[32px] min-h-[32px] flex items-center justify-center font-urbanist font-bold text-[11px]"
                                 style={{
                                   color: isDarkMode ? '#7D80D7' : '#5B5BB3',
                                 }}
@@ -339,7 +339,7 @@ const AddressBookOverlay: React.FC<AddressBookOverlayProps> = ({
               border: '1px solid rgba(169, 178, 187, 0.33)',
             }}
           >
-            <span className="px-1 py-1 text-center text-white text-[14px] font-bold font-['Gilroy'] leading-[21.7px]">
+            <span className="px-1 py-1 text-center text-white text-[14px] font-bold font-urbanist leading-[21.7px]">
               Dismiss
             </span>
           </button>

src/components/common/Button/Button.tsx

@@ -19,7 +19,7 @@ const buttonSizeStyles = {
 
 // Base styles for all button components
 const baseButtonStyles =
-  'flex flex-col justify-center items-center gap-2.5 box-border transition-colors duration-200 ease-out cursor-pointer font-gilroy font-bold text-center align-middle'
+  'flex flex-col justify-center items-center gap-2.5 box-border transition-colors duration-200 ease-out cursor-pointer font-urbanist font-bold text-center align-middle'
 
 // Button type styles
 const getButtonTypeStyles = (btnType: 'solid' | 'transparent') =>
@@ -174,7 +174,7 @@ export const TextButton: FunctionComponent<TextButtonProps> = ({
       onClick={onClick}
       disabled={disabled}
       className={clsx(
-        'bg-transparent border-none p-0 cursor-pointer font-gilroy font-bold',
+        'bg-transparent border-none p-0 cursor-pointer font-urbanist font-bold',
         'text-primary-50',
         `${disabled ? 'cursor-not-allowed opacity-50' : ''}`,
         className

src/components/common/FormAlert/FormAlert.tsx

@@ -13,7 +13,7 @@ const FormAlert = ({ isDarkMode, error, success }: FormAlertProps) => {
       role={error ? 'alert' : 'status'}
       aria-live={error ? 'assertive' : 'polite'}
       aria-atomic="true"
-      className={`form-alert w-full px-4 py-3 rounded-lg text-sm font-medium font-gilroy flex items-start gap-2 ${
+      className={`form-alert w-full px-4 py-3 rounded-lg text-sm font-medium font-urbanist flex items-start gap-2 ${
         error
           ? 'form-alert-error'
           : isDarkMode

src/components/common/Icons/Icons.tsx

@@ -223,7 +223,7 @@ export const FileIcon = ({
         fill="white"
         fontSize="9"
         fontWeight="700"
-        fontFamily="Gilroy, sans-serif"
+        fontFamily="Urbanist, sans-serif"
       >
         {ext}
       </text>

src/components/common/Navbar/Navbar.tsx

@@ -109,7 +109,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
                 }}
               >
                 <div
-                  className="px-1 py-1 text-center text-sm font-bold font-['Gilroy'] leading-snug"
+                  className="px-1 py-1 text-center text-sm font-bold font-urbanist leading-snug"
                   style={{
                     color: isAboutActive
                       ? isDarkMode
@@ -140,7 +140,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
                 }}
               >
                 <div
-                  className="px-1 py-1 text-center text-sm font-bold font-['Gilroy'] leading-snug"
+                  className="px-1 py-1 text-center text-sm font-bold font-urbanist leading-snug"
                   style={{
                     color: isPartnersActive
                       ? isDarkMode
@@ -172,7 +172,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
                 }}
               >
                 <div
-                  className="px-1 py-1 text-center text-sm font-bold font-['Gilroy'] leading-snug"
+                  className="px-1 py-1 text-center text-sm font-bold font-urbanist leading-snug"
                   style={{
                     color: isNewsActive
                       ? isDarkMode
@@ -246,7 +246,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
                 to="/contact"
                 className="contact-button w-full min-h-[48px] px-2 py-2 rounded-full overflow-hidden flex items-center justify-center"
               >
-                <div className="px-2 py-1 text-center text-white text-lg font-bold font-['Gilroy'] leading-normal">
+                <div className="px-2 py-1 text-center text-white text-lg font-bold font-urbanist leading-normal">
                   Contact Us
                 </div>
               </Link>
@@ -274,7 +274,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
           <div className="flex flex-col p-4 space-y-2">
             <Link
               to="/about"
-              className="px-4 py-3 text-left text-sm font-bold font-['Gilroy'] rounded-lg transition-colors duration-200"
+              className="px-4 py-3 text-left text-sm font-bold font-urbanist rounded-lg transition-colors duration-200"
               style={{
                 color: isAboutActive
                   ? isDarkMode
@@ -298,7 +298,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
             </Link>
             <Link
               to="/partners"
-              className="px-4 py-3 text-left text-sm font-bold font-['Gilroy'] rounded-lg transition-colors duration-200"
+              className="px-4 py-3 text-left text-sm font-bold font-urbanist rounded-lg transition-colors duration-200"
               style={{
                 color: isPartnersActive
                   ? isDarkMode
@@ -323,7 +323,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
             {/* Ecosystem and Gallery temporarily removed - restore from git */}
             <Link
               to="/news-updates"
-              className="px-4 py-3 text-left text-sm font-bold font-['Gilroy'] rounded-lg transition-colors duration-200"
+              className="px-4 py-3 text-left text-sm font-bold font-urbanist rounded-lg transition-colors duration-200"
               style={{
                 color: isNewsActive
                   ? isDarkMode
@@ -397,7 +397,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
                   />
                 </svg>
                 <span
-                  className="text-sm font-bold font-['Gilroy']"
+                  className="text-sm font-bold font-urbanist"
                   style={{
                     color: isSettingsActive
                       ? isDarkMode
@@ -414,7 +414,7 @@ const Navbar = ({ isDarkMode, setIsDarkMode: _setIsDarkMode }: NavbarProps) => {
               <Link
                 to="/contact"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="contact-button w-full px-6 py-3 rounded-full text-white text-lg font-bold font-['Gilroy'] block text-center mt-2"
+                className="contact-button w-full px-6 py-3 rounded-full text-white text-lg font-bold font-urbanist block text-center mt-2"
               >
                 Contact Us
               </Link>

src/components/common/PartnerCard/index.tsx

@@ -84,7 +84,7 @@ const PartnerCard = ({ partner, isDarkMode }: PartnerCardProps) => {
       {/* Company name */}
       <h3
         className={clsx(
-          'font-gilroy font-bold text-base leading-snug',
+          'font-urbanist font-bold text-base leading-snug',
           isDarkMode ? 'text-neutral-60' : 'text-neutral-10'
         )}
       >

src/components/common/Recaptcha/Recaptcha.tsx

@@ -8,7 +8,14 @@ declare global {
        * reCAPTCHA v2 global helper (loaded from https://www.google.com/recaptcha/api.js)
        */
       ready: (cb: () => void) => void
-      render: (container: HTMLElement, params: { sitekey: string }) => number
+      render: (
+        container: HTMLElement,
+        params: {
+          sitekey: string
+          callback?: (token: string) => void
+          'expired-callback'?: () => void
+        }
+      ) => number
       getResponse: (widgetId?: number) => string
       reset: (widgetId?: number) => void
     }
@@ -25,13 +32,15 @@ interface RecaptchaProps {
   siteKey: string
   className?: string
   onChange?: (token: string) => void
+  onExpire?: () => void
 }
 
 export const Recaptcha = forwardRef<RecaptchaHandle, RecaptchaProps>(
-  function Recaptcha({ siteKey, className, onChange }, ref) {
+  function Recaptcha({ siteKey, className, onChange, onExpire }, ref) {
     const { containerRef, getToken, reset } = useRecaptcha({
       siteKey,
       onChange,
+      onExpire,
     })
 
     useImperativeHandle(

src/components/common/Tag/Tag.tsx

@@ -51,7 +51,7 @@ export const TagBorderedLg: FunctionComponent<TagProps> = ({
 }) => {
   return (
     <TagBordered
-      className={`border-4 text-4xl py-2 px-4 font-gilroy-bold ${className}`}
+      className={`border-4 text-4xl py-2 px-4 font-urbanist-bold ${className}`}
       {...props}
     >
       {children}

src/components/common/TextAreaField/TextAreaField.tsx

@@ -46,7 +46,7 @@ const TextAreaField = ({
         rows={rows}
         aria-invalid={!!error}
         aria-describedby={error ? `${id}-error` : undefined}
-        className={`w-full px-3 py-2 rounded-lg border text-sm font-medium font-gilroy outline-none transition-colors resize-none ${
+        className={`w-full px-3 py-2 rounded-lg border text-sm font-medium font-urbanist outline-none transition-colors resize-none ${
           isDarkMode
             ? `bg-transparent border-white/10 text-neutral-60 placeholder:text-neutral-30 focus:border-primary-60 ${error ? 'border-red-500 focus:border-red-500' : ''}`
             : `bg-white/70 border-black/10 text-neutral-10 placeholder:text-neutral-30 focus:border-primary-60 ${error ? 'border-red-500 focus:border-red-500' : ''}`

src/components/common/TextField/TextField.tsx

@@ -46,7 +46,7 @@ const TextField = ({
         required={required}
         aria-invalid={!!error}
         aria-describedby={error ? `${id}-error` : undefined}
-        className={`w-full h-10 px-3 rounded-lg border text-sm font-medium font-gilroy outline-none transition-colors ${
+        className={`w-full h-10 px-3 rounded-lg border text-sm font-medium font-urbanist outline-none transition-colors ${
           isDarkMode
             ? `bg-transparent border-white/10 text-neutral-60 placeholder:text-neutral-30 focus:border-primary-60 ${error ? 'border-red-500 focus:border-red-500' : ''}`
             : `bg-white/70 border-black/10 text-neutral-10 placeholder:text-neutral-30 focus:border-primary-60 ${error ? 'border-red-500 focus:border-red-500' : ''}`

src/components/home/PartnersSection/index.tsx

@@ -17,7 +17,7 @@ const PartnersSection = ({ isDarkMode }: PartnersSectionProps) => {
     <div className="w-full py-12">
       <div className="text-center mb-10">
         <h2
-          className="font-gilroy font-bold"
+          className="font-urbanist font-bold"
           style={{ fontSize: '36px', lineHeight: '122%', letterSpacing: '0%' }}
         >
           <span
@@ -80,7 +80,7 @@ const PartnersSection = ({ isDarkMode }: PartnersSectionProps) => {
         <button
           type="button"
           onClick={() => navigate('/partners')}
-          className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-white font-gilroy font-bold text-sm transition-opacity hover:opacity-90"
+          className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-white font-urbanist font-bold text-sm transition-opacity hover:opacity-90"
           style={{ backgroundColor: '#5B5BB3' }}
         >
           View All Partners