Merge pull request #282 from adi790uu/playCard-ui-changes

Improves Landing Page UI

Author: hkirat

apps/frontend/public/chess.png

@@ -1,9 +1,3 @@
-import GameModeComponent from './GameModeComponent';
-import {
-  EyeNoneIcon,
-  PersonIcon,
-  LightningBoltIcon,
-} from '@radix-ui/react-icons';
 import { useNavigate } from 'react-router-dom';
 import {
   Card,
@@ -12,45 +6,99 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import chessIcon from '../../public/chess.png';
+import computerIcon from '../../public/computer.png';
+import lightningIcon from '../../public/lightning-bolt.png';
+import friendIcon from '../../public/friendship.png';
+import tournamentIcon from '../../public/trophy.png';
+import variantsIcon from '../../public/strategy.png';
+import GameModeComponent from './GameModeComponent';
 
 export function PlayCard() {
-  const navigate = useNavigate();
-  return (
-    <Card>
-      <CardHeader className="pb-3 text-center">
-        <CardTitle>Play Chess</CardTitle>
-        <CardDescription></CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-1">
-        <GameModeComponent
-          icon={<LightningBoltIcon />}
-          title="Play Online"
-          description="Play vs a Person of Similar Skill"
-          onClick={() => {
-            navigate('/game/random');
-          }}
+  const gameModeData = [
+    {
+      icon: (
+        <img
+          src={lightningIcon}
+          className="inline-block mt-1 h-7 w-7"
+          alt="online"
         />
-        <GameModeComponent
-          icon={<PersonIcon className="mt-px h-5 w-5" />}
-          title="Computer"
-          description="Challenge a bot from easy to master (coming soon)"
+      ),
+      title: 'Play Online',
+      description: 'Play vs a Person of Similar Skill',
+      onClick: () => {
+        navigate('/game/random');
+      },
+      disabled: false,
+    },
+    {
+      icon: (
+        <img
+          src={computerIcon}
+          className="inline-block mt-1 h-7 w-7"
+          alt="computer"
         />
-        <GameModeComponent
-          icon={<PersonIcon className="mt-px h-5 w-5" />}
-          title="Play a Friend"
-          description="Invite a Friend to a game of Chess (coming soon)"
+      ),
+      title: 'Computer',
+      description: 'Challenge a bot from easy to master',
+      disabled: true,
+    },
+    {
+      icon: (
+        <img
+          src={friendIcon}
+          className="inline-block mt-1 h-7 w-7"
+          alt="friend"
         />
-        <GameModeComponent
-          icon={<EyeNoneIcon className="mt-px h-5 w-5" />}
-          title="Tournaments"
-          description="Join an Arena where anyone can Win (coming soon)"
+      ),
+      title: 'Play a Friend',
+      description: 'Invite a Friend to a game of Chess',
+      disabled: true,
+    },
+    {
+      icon: (
+        <img
+          src={tournamentIcon}
+          className="inline-block mt-1 h-7 w-7"
+          alt="tournament"
         />
-        <GameModeComponent
-          icon={<EyeNoneIcon className="mt-px h-5 w-5" />}
-          title="Chess Variants"
-          description="Find Fun New ways to play chess (coming soon)"
+      ),
+      title: 'Tournaments',
+      description: 'Join an Arena where anyone can Win',
+      disabled: true,
+    },
+    {
+      icon: (
+        <img
+          src={variantsIcon}
+          className="inline-block mt-1 h-7 w-7"
+          alt="variants"
         />
-      </CardContent>{' '}
+      ),
+      title: 'Chess Variants',
+      description: 'Find Fun New ways to play chess',
+      disabled: true,
+    },
+  ];
+
+  const navigate = useNavigate();
+  return (
+    <Card className="bg-transparent border-none">
+      <CardHeader className="pb-3 text-center text-white shadow-md">
+        <CardTitle className="font-semibold tracking-wide flex flex-col items-center justify-center">
+          <p>
+            Play
+            <span className="text-green-700 font-bold pt-1"> Chess</span>
+          </p>
+          <img className="pl-1 w-1/2 mt-4" src={chessIcon} alt="chess" />
+        </CardTitle>
+        <CardDescription></CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-2 cursor-pointer shadow-md mt-1">
+        {gameModeData.map((data) => {
+          return <GameModeComponent {...data} />;
+        })}
+      </CardContent>
     </Card>
   );
 }

apps/frontend/public/computer.png

@@ -5,24 +5,30 @@ interface GameModeComponent {
   title: string;
   description: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
+  disabled: boolean;
 }
 
 const GameModeComponent = ({
   icon,
   title,
   description,
   onClick,
+  disabled,
 }: GameModeComponent) => (
   <div
     onClick={onClick}
-    className={`-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground ${
-      onClick ? 'cursor-pointer' : 'cursor-default'
-    }`}
+    className="-mx-2 mt-1 bg-stone-800 flex items-start space-x-4 rounded-sm p-2 transition-all hover:bg-stone-700 hover:text-accent-foreground shadow-lg"
   >
     {icon}
+
     <div className="space-y-1">
-      <p className="text-sm font-medium leading-none">{title}</p>
-      <p className="text-sm text-muted-foreground">{description}</p>
+      <p className="text-sm pt-1 font-medium leading-none text-slate-200">
+        {title}
+      </p>
+      <p className="text-xs pt-2 text-muted-foreground">{description}</p>
+      {disabled && (
+        <p className="text-xs text-red-500 font-semibold">Coming Soon ...</p>
+      )}
     </div>
   </div>
 );

apps/frontend/src/assets/facebook.png renamed to apps/frontend/public/facebook.png

@@ -5,7 +5,7 @@ export const Landing = () => {
     <div className="max-w-full h-screen chess-board mt-0">
       <div className="flex flex-col md:flex-row w-full md:w-3/4 max-w-screen-lg mx-auto gap-x-4 p-4">
         <img
-          className="rounded-xl w-full md:h-3/4  hidden md:block"
+          className="rounded-md w-full md:h-3/4  hidden md:block"
           src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713647295/standardboard.1d6f9426_asqzum.png"
           alt="chess-board"
         />