Merge pull request #90 from CrackCode-dev/nadeesha-backup3

feat(home): update game icons and improve invite card layout

Author: vidun-upek

LandingPage/client/src/components/contact-section.jsx

@@ -360,7 +360,7 @@ export default function ContactSection() {
 
               <nav aria-label="CrackCode Social Media Links" className="space-y-3">
                 <a
-                  href="https://www.linkedin.com/in/crack-code-619461396"
+                  href="https://www.linkedin.com/company/crackcode"
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label="CrackCode on LinkedIn (opens in new tab)"

crackcode/client/src/components/common/Footer.jsx

@@ -19,14 +19,14 @@ const Footer = ({ variant = "default" }) => {
     const navigate = useNavigate();
     const location = useLocation();
 
-    const footerAtBottom = ['/', '/login', '/email-verify', '/reset-password', '/gamer-profile', '/privacy', '/terms', '/contact']
+    const footerAtBottom = ['/', '/login', '/email-verify', '/reset-password', '/gamer-profile']
     const footerAtEase = !footerAtBottom.includes(location.pathname);
 
     const handleLogoClick = () => {
         if (!footerAtEase) {
             navigate('/');
         } else {
-            navigate('/home');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         }
     }
 

crackcode/client/src/components/home/BrainBreaker.jsx

@@ -1,29 +1,29 @@
 import { useState } from 'react';
-import { Zap, X, ExternalLink } from 'lucide-react';
+import { Zap, X, ExternalLink, Gamepad2 ,FileDigit, SquarePen, BrickWallShield } from 'lucide-react';
 
 const GAMES = [
   {
     id: 'binary-bitz',
     name: 'Binary-Bitz',
     description: 'Master number systems! Learn decimal, hexadecimal, binary and more. Challenge yourself with fun interactive puzzles.',
-    icon: '🔢',
-    color: '#FF6B6B',
+    icon: <FileDigit />,
+    color: '#FF3E9B',
     url: 'https://crackcodegames.vercel.app'
   },
   {
     id: 'wordhunt',
     name: 'WordHunt',
     description: 'A word puzzle game like Wordle! Fill in related terms and words. Test your vocabulary and deduction skills.',
-    icon: '📝',
-    color: '#4ECDC4',
+    icon: <SquarePen />,
+    color: '#9D4EDD',
     url: 'https://wordhunt-beta.vercel.app'
   },
   {
     id: 'codedefense',
     name: 'CodeDefense',
     description: 'Protect your server from bugs! Answer programming questions correctly to defend against cyber threats.',
-    icon: '🛡️',
-    color: '#95E1D3',
+    icon: <BrickWallShield />,
+    color: '#48A111',
     url: 'https://codedefense.vercel.app'
   }
 ];
@@ -42,10 +42,10 @@ export default function BrainBreaker() {
           color: 'var(--text)'
         }}
       >
-        <div className='flex items-center gap-3 mb-6'>
-          <Zap className='w-6 h-6' style={{ color: 'var(--brand)' }} />
+        <div className='flex items-start gap-3 mb-6'>
+          <Gamepad2 className='w-6 h-6 mt-1' style={{ color: 'var(--brand)' }} />
           <div>
-            <h3 className='text-2xl font-bold'>🎮 Brain Breaker</h3>
+            <h3 className='text-2xl font-bold'> Brain Breaker</h3>
             <p style={{ color: 'var(--textSec)' }} className='text-sm'>
               Take a quick break with mini-games to refresh your mind!
             </p>
@@ -76,7 +76,9 @@ export default function BrainBreaker() {
               }}
             >
               <div className='flex justify-between items-start w-full'>
-                <span className='text-4xl'>{game.icon}</span>
+                <span className='text-4xl' style={{ color: game.color }}>
+                  {game.icon}
+                </span>
                 <ExternalLink size={16} style={{ color: game.color }} />
               </div>
               <div>

crackcode/client/src/components/home/ChallengesThisWeek.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useTheme } from '../../context/theme/ThemeContext';
-import { Calendar, CheckCircle2, Clock, Flame, ArrowRight, ChartColumnBig, Scissors, Pyramid, Cog } from 'lucide-react';
+import { Calendar, CheckCircle2, Clock, Flame, ArrowRight, ListTodo } from 'lucide-react';
 import Badge from '../ui/Badge';
 import Button from '../ui/Button';
 import { useNavigate } from 'react-router-dom'
@@ -62,7 +62,7 @@ export default function ChallengesThisWeek() {
             points: t.variant?.points || t.points || 300,
             completed: it.completed || 0,
             total: it.total || 1,
-            icon: '📊',
+            icon: <ListTodo />,
             color: '#FF6B6B',
             raw: it,
             transformed: t,
@@ -139,7 +139,7 @@ export default function ChallengesThisWeek() {
                   {/* Header */}
                   <div className='flex items-start justify-between mb-4'>
                     <div className='flex items-start gap-3 flex-1'>
-                      <span className='text-3xl'>{challenge.icon || '📊'}</span>
+                      <span className='text-3xl mt-1'>{challenge.icon}</span>
                       <div className='flex-1 min-w-0'>
                         <h3 className='text-lg font-bold mb-1'>{challenge.title}</h3>
                         {/* Only show minimal meta on card. Full problem visible in editor. */}

crackcode/client/src/components/home/InviteCard.jsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useTheme } from '../../context/theme/ThemeContext'
-import { Mail, Link, Copy, CheckCircle2 } from 'lucide-react';
+import { Mail, Link, Link2, Copy, CheckCircle2 } from 'lucide-react';
 import Button from '../ui/Button';
 
 function InviteCard() {
   const { theme } = useTheme()
   const [copied, setCopied] = useState(false);
-  const inviteLink = 'https://codedetectives.com/invite/abc123xyz';
+  const inviteLink = 'https://app.crackcodehq.com';
   const friendsInvited = 3;
   const bonusPoints = 450;
 
@@ -26,13 +26,21 @@ function InviteCard() {
         borderWidth: '1px'
       }}
     >
-      <div className='grid grid-cols-1 md:grid-cols-3 gap-6 items-center'>
+      <div className='grid grid-cols-1 md:grid-cols-2 gap-6 items-center'>
         {/* Left: Info */}
-        <div className='md:col-span-1'>
-          <h3 className="text-lg font-bold mb-1">🎉 Invite Friends</h3>
-          <p style={{ color: 'var(--textSec)' }} className="text-xs">
-            Earn bonus points together
-          </p>
+        <div className='flex flex-row md:col-span-1 gap-6'>
+          <div>
+            <h3 className="flex items-center justify-baseline gap-2 text-lg font-bold mb-1">
+              <span><Link2 /></span>
+              Invite Friends
+            </h3>
+          </div>
+          <div>
+            <p style={{ color: 'var(--textSec)' }} className="text-xs">
+              Know someone who’d enjoy learning to code through challenges and stories? <br />
+              Send them this link and let them jump in!
+            </p>
+          </div>
         </div>
 
         {/* Center: Copy Link */}
@@ -45,7 +53,7 @@ function InviteCard() {
               className="flex-1 rounded-lg px-3 py-2 text-xs focus:outline-none transition-all duration-300"
               style={{
                 background: 'rgba(255, 165, 0, 0.05)',
-                color: 'var(--text)',
+                color: 'var(--muted)',
                 border: '1px solid var(--border)'
               }}
             />
@@ -72,7 +80,7 @@ function InviteCard() {
         </div>
 
         {/* Right: Stats */}
-        <div className='md:col-span-1 flex gap-4'>
+        {/* <div className='md:col-span-1 flex gap-4'>
           <div className='flex-1'>
             <p className="text-xs font-semibold mb-1" style={{ color: 'var(--textSec)' }}>
               Invited
@@ -89,7 +97,7 @@ function InviteCard() {
               +{bonusPoints}
             </p>
           </div>
-        </div>
+        </div> */}
       </div>
     </div>
   );