Claude/rebrand globereach 0n k nv

.env.example

@@ -0,0 +1,6 @@
+# Supabase credentials (get these from your Supabase project dashboard)
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+
+# Admin password for the /admin page
+ADMIN_PASSWORD=choose-a-strong-password

README.md

@@ -12,7 +12,7 @@
 
 # Website
 
-https://visamap.io
+https://globereach.io
 
 # Contribute
 

components/GithubLogo.tsx

@@ -1,19 +1,35 @@
 import Image from 'next/image'
-import logo from '../public/github-mark-white.svg'
+import Link from 'next/link'
+import logo from '../public/globereach-logo.svg'
 
-const GithubLogo:React.FC = () => {
+const GlobeReachLogo:React.FC = () => {
   return (
     <div className={'container'}>
       <style jsx>{`
         .container {
-          top:4px;
+          top:3px;
           left:20px;
           position: absolute;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          cursor: pointer;
+        }
+        .brand {
+          color: #00D4AA;
+          font-size: 16px;
+          font-weight: 700;
+          letter-spacing: 1px;
+          text-decoration: none;
+          white-space: nowrap;
         }
       `}</style>
-      <a href='https://github.com/ChengCPU/visa-map' target='_blank' rel="noreferrer"><Image height={38} width={40} src={logo} alt={'Github'}/></a>
+      <Link href='/' style={{display:'flex',alignItems:'center',gap:'8px',textDecoration:'none'}}>
+        <Image height={34} width={34} src={logo} alt={'GlobeReach'}/>
+        <span className={'brand'}>GlobeReach</span>
+      </Link>
     </div>
   )
 }
 
-export default GithubLogo
+export default GlobeReachLogo

components/Header.tsx

@@ -1,15 +1,15 @@
 import { useMemo, useContext } from 'react'
 import { DimensionsContext } from '../logic/context/DimensionsContext'
 import { Stack, createTheme, ThemeProvider } from '@mui/material'
-import GithubLogo from './GithubLogo'
+import GlobeReachLogo from './GithubLogo'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import LanguageSelect from './LanguageSelect'
-const headerEN:string[] = ['map','table','rank','visa','blog','faq']
-const headerES:string[] = ['mapa','tabla','rango','visado','blog','faq']
-const headerPT:string[] = ['mapa','tabela','classe','visado','blog','faq']
-const headerFR:string[] = ['carte','tableau','rang','visa','blog','faq']
-const headerHR:string[] = ['karta','tablica','rang','viza','blog','faq']
+const headerEN:string[] = ['Map','Rank','The Elite','Blog','FAQ']
+const headerES:string[] = ['Mapa','Rango','La Élite','Blog','FAQ']
+const headerPT:string[] = ['Mapa','Classe','A Elite','Blog','FAQ']
+const headerFR:string[] = ['Carte','Rang','L\'Élite','Blog','FAQ']
+const headerHR:string[] = ['Karta','Rang','Elita','Blog','FAQ']
 interface Props {
   language:string;
   setLanguage:Function;
@@ -59,57 +59,47 @@ const Header:React.FC<Props> = ({ language, setLanguage }) => {
           position: fixed;
           left: 0px;
           top: 0px;
-          height: 40px;
+          height: 44px;
           width: 100%;
-          background-color: #111111;
+          background: linear-gradient(135deg, #0A0F1C 0%, #131B2E 100%);
           z-index: 2;
+          border-bottom: 1px solid rgba(0,212,170,0.15);
         }
-        .screenshot {
-          top: 13px;
-          right: 550px;
-          position: absolute;
-          color: #FFFFFF;
-        }
-        .map {
-          ${(pathname === '/') && 'text-decoration: underline;'}
-        }
-        .table {
-          ${(pathname.includes('/table')) && 'text-decoration: underline;'}
-        }
-        .rank {
-          ${(pathname.includes('/rank')) && 'text-decoration: underline;'}
-        }
-        .visapolicy {
-          ${(pathname.includes('/visapolicy')) && 'text-decoration: underline;'}
-        }
-        .blog {
-          ${(pathname.includes('/blog')) && 'text-decoration: underline;'}
-        }
-        .faq {
-          ${(pathname.includes('/faq')) && 'text-decoration: underline;'}
-        }
-        p {
-          color: #FFFFFF;
+        .header-btn {
+          display: inline-block;
+          padding: 6px 16px;
+          border-radius: 6px;
+          border: 1px solid rgba(255,255,255,0.15);
+          background: rgba(255,255,255,0.05);
+          color: rgba(255,255,255,0.8);
+          font-size: 13px;
+          font-weight: 500;
+          letter-spacing: 0.3px;
           text-decoration: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          white-space: nowrap;
         }
-        p:visited {
-          color: #FFFFFF;
-          text-decoration: none;
+        .header-btn:hover {
+          background: rgba(0,212,170,0.1);
+          border-color: rgba(0,212,170,0.4);
+          color: #00D4AA;
         }
-        p:hover {
-          color: #FFFFFF;
-          text-decoration: underline;
+        .header-btn.active {
+          background: rgba(0,212,170,0.15);
+          border-color: #00D4AA;
+          color: #00D4AA;
+          font-weight: 600;
         }
       `}</style>
       <ThemeProvider theme={theme}>
-        <Stack direction="row" spacing={1}>
-          {dimensions.width > 800 && <GithubLogo />}
-          <Link href='/'><p className={'map'}>{'/' + languageCaculation[0] + '/'}</p></Link>
-          <Link href='/table'><p className={'table'}>{'/' + languageCaculation[1] + '/'}</p></Link>
-          <Link href='/rank'><p className={'rank'}>{'/' + languageCaculation[2] + '/'}</p></Link>
-          <Link href='/visapolicy'><p className={'visapolicy'}>{'/' + languageCaculation[3] + '/'}</p></Link>
-          <Link href='/blog'><p className={'blog'}>{'/' + languageCaculation[4] + '/'}</p></Link>
-          {dimensions.width > 800 && <Link href='/faq'><p className={'faq'}>{'/' + languageCaculation[5] + '/'}</p></Link>}
+        <Stack direction="row" spacing={1.5}>
+          {dimensions.width > 800 && <GlobeReachLogo />}
+          <Link href='/'><span className={`header-btn${pathname === '/' ? ' active' : ''}`}>{languageCaculation[0]}</span></Link>
+          <Link href='/rank'><span className={`header-btn${pathname.includes('/rank') ? ' active' : ''}`}>{languageCaculation[1]}</span></Link>
+          <Link href='/elite'><span className={`header-btn${pathname.includes('/elite') ? ' active' : ''}`}>{languageCaculation[2]}</span></Link>
+          <Link href='/blog'><span className={`header-btn${pathname.includes('/blog') ? ' active' : ''}`}>{languageCaculation[3]}</span></Link>
+          {dimensions.width > 800 && <Link href='/faq'><span className={`header-btn${pathname.includes('/faq') ? ' active' : ''}`}>{languageCaculation[4]}</span></Link>}
           <LanguageSelect
             language={language}
             setLanguage={setLanguage}