feat: redesign landing page UI and improve header

web/src/pages/LandingPage.tsx

@@ -1,18 +1,18 @@
 import { useState } from 'react'
 import { motion } from 'framer-motion'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight, Github } from 'lucide-react'
 import HeaderBar from '../components/HeaderBar'
 import HeroSection from '../components/landing/HeroSection'
 import AboutSection from '../components/landing/AboutSection'
 import FeaturesSection from '../components/landing/FeaturesSection'
 import HowItWorksSection from '../components/landing/HowItWorksSection'
 import CommunitySection from '../components/landing/CommunitySection'
-import AnimatedSection from '../components/landing/AnimatedSection'
 import LoginModal from '../components/landing/LoginModal'
 import FooterSection from '../components/landing/FooterSection'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
+import { OFFICIAL_LINKS } from '../constants/branding'
 
 export function LandingPage() {
   const [showLoginModal, setShowLoginModal] = useState(false)
@@ -20,7 +20,6 @@ export function LandingPage() {
   const { language, setLanguage } = useLanguage()
   const isLoggedIn = !!user
 
-  console.log('LandingPage - user:', user, 'isLoggedIn:', isLoggedIn)
   return (
     <>
       <HeaderBar
@@ -32,7 +31,6 @@ export function LandingPage() {
         user={user}
         onLogout={logout}
         onPageChange={(page) => {
-          console.log('LandingPage onPageChange called with:', page)
           if (page === 'competition') {
             window.location.href = '/competition'
           } else if (page === 'traders') {
@@ -43,24 +41,30 @@ export function LandingPage() {
         }}
       />
       <div
-        className="min-h-screen px-4 sm:px-6 lg:px-8"
+        className="min-h-screen"
         style={{
-          background: 'var(--brand-black)',
-          color: 'var(--brand-light-gray)',
+          background: '#0B0E11',
+          color: '#EAECEF',
         }}
       >
         <HeroSection language={language} />
         <AboutSection language={language} />
         <FeaturesSection language={language} />
         <HowItWorksSection language={language} />
-        <CommunitySection />
+        <CommunitySection language={language} />
 
-        {/* CTA */}
-        <AnimatedSection backgroundColor="var(--panel-bg)">
-          <div className="max-w-4xl mx-auto text-center">
+        {/* Final CTA Section */}
+        <section className="py-24 relative overflow-hidden" style={{ background: '#0D1117' }}>
+          {/* Background Glow */}
+          <div
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full blur-3xl opacity-30"
+            style={{ background: 'radial-gradient(circle, rgba(240, 185, 11, 0.15) 0%, transparent 70%)' }}
+          />
+
+          <div className="max-w-4xl mx-auto px-4 text-center relative z-10">
             <motion.h2
-              className="text-5xl font-bold mb-6"
-              style={{ color: 'var(--brand-light-gray)' }}
+              className="text-4xl lg:text-5xl font-bold mb-6"
+              style={{ color: '#EAECEF' }}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
@@ -68,8 +72,8 @@ export function LandingPage() {
               {t('readyToDefine', language)}
             </motion.h2>
             <motion.p
-              className="text-xl mb-12"
-              style={{ color: 'var(--text-secondary)' }}
+              className="text-lg mb-10 max-w-2xl mx-auto"
+              style={{ color: '#848E9C' }}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
@@ -77,46 +81,55 @@ export function LandingPage() {
             >
               {t('startWithCrypto', language)}
             </motion.p>
-            <div className="flex flex-wrap justify-center gap-4">
+
+            <motion.div
+              className="flex flex-col sm:flex-row items-center justify-center gap-4"
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.2 }}
+            >
               <motion.button
                 onClick={() => setShowLoginModal(true)}
-                className="flex items-center gap-2 px-10 py-4 rounded-lg font-semibold text-lg"
+                className="group flex items-center gap-3 px-8 py-4 rounded-xl font-bold text-lg"
                 style={{
-                  background: 'var(--brand-yellow)',
-                  color: 'var(--brand-black)',
-                }}
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                {t('getStartedNow', language)}
-                <motion.div
-                  animate={{ x: [0, 5, 0] }}
-                  transition={{ duration: 1.5, repeat: Infinity }}
-                >
-                  <ArrowRight className="w-5 h-5" />
-                </motion.div>
-              </motion.button>
-              <motion.a
-                href="https://github.com/tinkle-community/nofx/tree/dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 px-10 py-4 rounded-lg font-semibold text-lg"
-                style={{
-                  background: 'transparent',
-                  color: 'var(--brand-light-gray)',
-                  border: '2px solid var(--brand-yellow)',
+                  background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+                  color: '#0B0E11',
+                  boxShadow: '0 4px 24px rgba(240, 185, 11, 0.3)',
                 }}
                 whileHover={{
-                  scale: 1.05,
-                  backgroundColor: 'rgba(240, 185, 11, 0.1)',
+                  scale: 1.02,
+                  boxShadow: '0 8px 32px rgba(240, 185, 11, 0.4)',
                 }}
-                whileTap={{ scale: 0.95 }}
+                whileTap={{ scale: 0.98 }}
               >
+                {t('getStartedNow', language)}
+                <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
+              </motion.button>
+
+              <motion.a
+                href={OFFICIAL_LINKS.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex items-center gap-3 px-8 py-4 rounded-xl font-bold text-lg"
+                style={{
+                  background: 'rgba(255, 255, 255, 0.05)',
+                  color: '#EAECEF',
+                  border: '1px solid rgba(255, 255, 255, 0.1)',
+                }}
+                whileHover={{
+                  scale: 1.02,
+                  background: 'rgba(255, 255, 255, 0.08)',
+                  borderColor: 'rgba(240, 185, 11, 0.3)',
+                }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <Github className="w-5 h-5" />
                 {t('viewSourceCode', language)}
               </motion.a>
-            </div>
+            </motion.div>
           </div>
-        </AnimatedSection>
+        </section>
 
         {showLoginModal && (
           <LoginModal