feat: fix bugs

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@solana/spl-token": "^0.4.9",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.32",

src/components/common/About/index.tsx

@@ -3,7 +3,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
 export const AboutSection = () => {
   return (
     <div className="grid w-full grid-rows-[auto_auto] bg-[url('/images/textures/green.png')] bg-repeat font-inknut *:pb-[80px] *:pt-[80px] *:lg:pb-[60px] xl:grid-cols-2">
-      <div className="flex h-full min-h-full w-full flex-col justify-between border-b border-black px-[24px] lg:pl-[140px] lg:pr-[100px] xl:border-r">
+      <div className="flex h-full min-h-full w-full flex-col justify-between border-black px-[24px] lg:pl-[140px] lg:pr-[100px] xl:border-r">
         <div className="space-y-8">
           <p className="text-[40px] font-light leading-[48px] md:text-[60px] md:leading-[72px]">About Tarot</p>
           <p className="text-[18px] font-light leading-[25px] md:text-[20px] md:leading-[28px]">

src/components/common/BaseTooltip/index.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useState } from 'react';
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+
+interface BaseTooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  as?: 'div' | 'span';
+  ignoreOnKeyDown?: boolean;
+  forceOpen?: boolean;
+}
+
+export const BaseTooltip = ({
+  children,
+  content,
+  className,
+  contentClassName,
+  as,
+  ignoreOnKeyDown,
+  forceOpen,
+}: BaseTooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  const Slot = as ?? 'div';
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip open={forceOpen ?? open}>
+        <TooltipTrigger asChild>
+          <Slot
+            tabIndex={0}
+            className={cn(className)}
+            onClick={() => {
+              setOpen(!open);
+            }}
+            onMouseEnter={() => {
+              setOpen(true);
+            }}
+            onMouseLeave={() => {
+              setOpen(false);
+            }}
+            onTouchStart={() => {
+              setOpen(!open);
+            }}
+            onKeyDown={(e) => {
+              if (ignoreOnKeyDown) {
+                return;
+              }
+
+              e.preventDefault();
+              e.key === 'Enter' && setOpen(!open);
+            }}
+          >
+            {children}
+          </Slot>
+        </TooltipTrigger>
+        <TooltipContent className={cn(contentClassName, !content ? 'hidden' : '')}>
+          <span className="inline-block">{content}</span>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

src/components/pages/game/game.tsx

@@ -5,6 +5,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import { z } from 'zod';
 
+import { BaseTooltip } from '@/components/common/BaseTooltip';
 import Solana from '@/components/common/Svg/Solana.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import useMakePrediction from '@/hooks/contracts/write/use-make-prediction';
@@ -69,24 +70,35 @@ export const GameSection = () => {
 
   return (
     <div className="container flex flex-col gap-[20px] py-[20px] font-inknut">
-      <div className="text-center font-bona-nova-sc text-[50px]">Your Future In One Bet</div>
-
-      <div className="relative -z-50">
-        {predictionAnswer && (
-          <div className="absolute flex h-full w-full flex-row justify-evenly py-4">
-            {predictionAnswer.tarots.map((e) => {
-              return <img key={e.id} className="rounded-[8px]" src={`images/cards/${e.id}.jpg`} alt="card" />;
-            })}
-          </div>
-        )}
-        <img src="images/tarot-game/bord.png" alt="bord" className="relative -z-50" />
+      <div className="text-center font-bona-nova-sc text-[30px] sm:text-[50px]">Your Future In One Bet</div>
+
+      <div className="w-[90vw] overflow-x-auto sm:w-auto">
+        <div className="relative -z-50 h-[444px] w-[888px] sm:h-auto sm:w-auto">
+          {predictionAnswer && (
+            <div className="absolute flex h-[93%] w-full flex-row justify-around py-4 sm:h-full sm:justify-evenly">
+              {predictionAnswer.tarots.map((e) => {
+                return (
+                  <img
+                    key={e.id}
+                    className={cn('rounded-[8px]', e.reverted && 'rotate-180')}
+                    src={`images/cards/${e.id}.jpg`}
+                    alt="card"
+                  />
+                );
+              })}
+            </div>
+          )}
+          <img src="images/tarot-game/bord.png" alt="bord" className="relative -z-50" />
+        </div>
       </div>
 
-      <div className="flex flex-row items-center justify-between">
-        <div className="text-[24px]">Type your question and ask the cards</div>
-        <Button size="responsive" className="bg-[#D0C7A3] text-[22px]" variant="outline">
-          Suggest question
-        </Button>
+      <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+        <div className="text-center text-[24px]">Type your question and ask the cards</div>
+        <BaseTooltip content="COMING SOON">
+          <Button size="responsive" className="bg-[#D0C7A3] text-[22px]" variant="outline">
+            Suggest question
+          </Button>
+        </BaseTooltip>
       </div>
 
       <div className="grid">
@@ -100,7 +112,7 @@ export const GameSection = () => {
         />
       </div>
 
-      <div className="grid grid-cols-2 gap-10">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-10">
         <div className="flex flex-row items-center gap-4 rounded-[8px] border border-[#3A3939] bg-[#D0C7A3] p-[14px] text-[20px]">
           <Solana />
           <div className="font-poppins">0.002 SOL</div>

src/components/pages/home/faq.tsx

@@ -11,8 +11,8 @@ const FAQ_MOCK = [
 
 export const Faq = () => {
   return (
-    <div className="grid w-full grid-rows-[auto_auto] bg-[url('/images/textures/green.png')] bg-repeat pt-[80px] font-inknut *:pb-[80px] *:lg:pb-[140px] xl:grid-cols-2">
-      <div className="w-full space-y-8 px-[24px] lg:pl-[100px] lg:pr-[140px] xl:border-r">
+    <div className="grid w-full grid-rows-[auto_auto] bg-[url('/images/textures/green.png')] bg-repeat font-inknut *:pb-[80px] *:lg:pb-[140px] xl:grid-cols-2">
+      <div className="w-full space-y-8 border-black px-[24px] pt-[80px] lg:pl-[100px] lg:pr-[140px] xl:border-r">
         <p className="text-[40px] font-light leading-[48px] md:text-[60px] md:leading-[72px]">
           Frequently Asked Questions
         </p>
@@ -26,7 +26,7 @@ export const Faq = () => {
           ))}
         </Accordion>
       </div>
-      <div className="flex h-full min-h-full w-full flex-col justify-between border-b border-black px-[24px] lg:pl-[140px] lg:pr-[80px]">
+      <div className="flex h-full min-h-full w-full flex-col justify-between border-black px-[24px] pt-[80px] lg:pl-[140px] lg:pr-[80px]">
         <div className="space-y-8">
           <p className="text-[40px] font-light leading-[48px] max-sm:max-w-[327px] md:text-[60px] md:leading-[72px]">
             Horoscope on Twitter for every day

src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border border-[#3A3939] bg-[#C9A584] px-3 py-1.5 text-xs text-black',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/pages/game-page.tsx

@@ -1,12 +1,17 @@
 import { AboutSection } from '@/components/common/About';
 import { Header } from '@/components/common/Header';
+import { TarotLine } from '@/components/common/TarotLine';
 import { GameSection } from '@/components/pages/game/game';
 
 export default function GamePage() {
   return (
     <>
       <Header />
       <GameSection />
+      <TarotLine
+        className="border-t border-customBlack"
+        words={new Array(10).fill(['Love', 'Money', 'Life', 'Deals', 'Work']).flat(Infinity)}
+      />
       <AboutSection />
     </>
   );

yarn.lock

@@ -1932,6 +1932,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-tooltip@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@radix-ui/react-tooltip@npm:1.1.6"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.3"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.1"
+    "@radix-ui/react-portal": "npm:1.1.3"
+    "@radix-ui/react-presence": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-slot": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-visually-hidden": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/6e2e83b2ef448bcc486e8f73bfd303b18b723f86239f40f5e06cf930f074494f6fefb1a48bcaf24b215ec7bd7f87f6884d1ef9394cddcf50d1b30e26f9e15093
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
@@ -2018,6 +2048,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-visually-hidden@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-visually-hidden@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/9a34b8e09dc79983626194fdfb4bd24c79060034a226153a2bd9f726f056139316e7a6360583567c6ccd5d9589e6d230fe2c436abea455f73e2d27b73412c412
+  languageName: node
+  linkType: hard
+
 "@radix-ui/rect@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/rect@npm:1.1.0"
@@ -5061,6 +5110,7 @@ __metadata:
     "@radix-ui/react-dialog": "npm:^1.1.4"
     "@radix-ui/react-popover": "npm:^1.1.4"
     "@radix-ui/react-slot": "npm:^1.1.1"
+    "@radix-ui/react-tooltip": "npm:^1.1.6"
     "@solana/spl-token": "npm:^0.4.9"
     "@solana/wallet-adapter-react": "npm:^0.15.35"
     "@solana/wallet-adapter-wallets": "npm:^0.19.32"