feat: cta & faq blocks

.gitignore

@@ -22,4 +22,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
+.env
+
+.yarn/
+
+install-state.gz

src/components/common/Header/connect-wallet-button.tsx

@@ -55,15 +55,15 @@ export const ConnectWalletButton = () => {
           <Button
             ref={buttonRef}
             variant={'outline'}
-            className="h-fit w-full bg-customYellow px-[24px] py-[15px] text-[22px] font-light leading-[26px] text-black"
+            className="h-fit w-full bg-customYellow px-[24px] py-[15px] font-poppins text-[22px] font-light leading-[26px] text-black"
           >
             {shortenAddress(publicKey.toBase58())}
           </Button>
         </PopoverTrigger>
         <PopoverContent style={{ width: popoverWidth }} className="border-0" asChild>
           <Button
             onClick={() => void handleDisconnect()}
-            className="h-fit w-full bg-customRed px-[24px] py-[15px] text-[20px] font-light leading-[24px] text-white"
+            className="h-fit w-full bg-customRed px-[24px] py-[15px] text-[20px] font-light leading-[24px] text-white hover:bg-customRed hover:opacity-80"
           >
             Disconnect
           </Button>

src/components/common/Header/index.tsx

@@ -44,7 +44,7 @@ export const Header = () => {
             isMenuOpen ? 'translate-x-0' : 'translate-x-full',
           )}
         >
-          <NavMenu className="flex h-full max-w-[327px] flex-col justify-end pb-[80px]" />
+          <NavMenu className="flex h-full max-w-[327px] flex-col justify-center pb-[80px]" />
         </div>
       )}
     </header>

src/components/common/Header/nav-menu.tsx

@@ -10,7 +10,7 @@ export const NavMenu = ({ className }: BaseComponentProps) => {
       <a
         href={env.VITE_TWITTER_URL}
         target="_blank"
-        className="order-last flex h-[56px] min-w-[56px] max-w-[56px] cursor-pointer items-center justify-center rounded-md border border-customBlack bg-customYellow md:order-none"
+        className="order-last flex h-[56px] min-w-[56px] max-w-[56px] cursor-pointer items-center justify-center rounded-md border border-customBlack bg-customYellow transition-all ease-linear hover:bg-customYellow-secondary md:order-none"
         rel="noreferrer"
       >
         <img src="/icons/socials/twitter.svg" alt="twitter" />

src/components/common/PredictFutureBtn/index.tsx

@@ -8,7 +8,7 @@ export const PredictFutureBtn = () => {
     <Link to={routes.GAME}>
       <Button
         variant={'outline'}
-        className="min-h-[60px] w-full bg-[url('/images/textures/green.png')] bg-repeat text-[22px]"
+        className="min-h-[60px] w-full bg-[url('/images/textures/green.png')] bg-repeat text-[22px] transition-all ease-in-out hover:opacity-80"
       >
         Predict Future
       </Button>

src/components/pages/game/game.tsx

@@ -42,7 +42,7 @@ export const GameSection = () => {
 
   return (
     <div className="container flex flex-col gap-[20px] py-[20px] font-inknut">
-      <div className="font-bona-nova-sc text-center text-[50px]">Your Future In One Bet</div>
+      <div className="text-center font-bona-nova-sc text-[50px]">Your Future In One Bet</div>
       <div>
         <img src="images/tarot-game/bord.png" alt="bord" />
       </div>

src/components/pages/home/cta.tsx

@@ -1,9 +1,58 @@
+import { PredictFutureBtn } from '@/components/common/PredictFutureBtn';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
+import { cn } from '@/lib/utils';
+import { BaseComponentProps } from '@/types';
+
 export const CtaBlock = () => {
+  const isMd = useBreakpoint('md');
+
   return (
-    <div className="col flex min-h-[600px] items-center justify-center bg-[url('/images/textures/light-yellow.png')] bg-repeat">
-      <p className="max-w-[327px] gap-[50px] text-center text-[30px] md:max-w-[1113px] md:text-[50px]">
+    <div className="relative flex min-h-[600px] flex-col items-center gap-10 bg-[url('/images/textures/light-yellow.png')] bg-repeat px-6 pb-10 pt-[100px] md:px-10 md:pb-[120px] md:pt-[170px]">
+      <div className="flex items-center gap-7 md:hidden">
+        <Dot className="w-[16px]" />
+        <Star className="-translate-y-10" />
+        <Dot className="w-[16px]" />
+      </div>
+      <p className="max-w-none gap-5 text-center text-[30px] md:max-w-[1113px] md:gap-[50px] md:text-[50px]">
         Lorem ipsum dolor sit amet consectetur. Tellus auctor dignissim nulla gravida volutpat.
       </p>
+      <div className="flex items-center gap-8 md:hidden">
+        <Hand className="max-w-[100px]" />
+        <Dot className="translate-y-4" />
+        <Hand className="max-w-[100px] scale-x-[-1]" />
+      </div>
+      <div className="w-full md:max-w-max lg:max-w-[400px]">
+        <PredictFutureBtn />
+      </div>
+      <Sunburst className="block md:hidden" />
+      {isMd && (
+        <>
+          <Hand className="absolute left-[5%] top-[36%] hidden xl:block 2xl:left-[12%]" />
+          <Hand className="absolute right-[15%] top-1/2 hidden scale-x-[-1] xl:block" />
+          <Dot className="absolute left-[2%] top-1/2 2xl:left-[6%]" />
+          <Dot className="absolute right-[22%] top-[15%]" />
+          <Star className="absolute left-[15%] top-[15%]" />
+          <Star className="absolute bottom-[15%] right-[8%]" />
+          <Sunburst className="absolute bottom-[20%] left-[25%]" />
+          <Sunburst className="absolute right-[8%] top-[60px] max-w-[51px] lg:top-[25%]" />
+        </>
+      )}
     </div>
   );
 };
+
+const Star = ({ className }: BaseComponentProps) => (
+  <img src="/icons/star.svg" alt="star" className={cn('pointer-events-none', className)} />
+);
+
+const Dot = ({ className }: BaseComponentProps) => (
+  <img src="/icons/dot.svg" alt="dot" className={cn('pointer-events-none', className)} />
+);
+
+const Hand = ({ className }: BaseComponentProps) => (
+  <img src="/images/hand.png" alt="hand" className={cn('pointer-events-none', className)} />
+);
+
+const Sunburst = ({ className }: BaseComponentProps) => (
+  <img src="/icons/sunburst.svg" alt="sunburst" className={cn('pointer-events-none', className)} />
+);

src/components/pages/home/faq.tsx

@@ -0,0 +1,46 @@
+import { GoToTwitterBtn } from '@/components/common/GoToTwitterBtn';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+
+const FAQ_MOCK = [
+  { title: 'What is Tarot?', description: 'Lorem ipsum' },
+  { title: 'How does this site work?', description: 'Lorem ipsum' },
+  { title: 'How many questions can I ask?', description: 'Lorem ipsum' },
+  { title: 'How much does this cost?', description: 'Lorem ipsum' },
+  { title: 'Can I share my reading with others?', description: 'Lorem ipsum' },
+];
+
+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">
+        <p className="text-[40px] font-light leading-[48px] md:text-[60px] md:leading-[72px]">
+          Frequently Asked Questions
+        </p>
+
+        <Accordion type="single" defaultValue="item-0">
+          {FAQ_MOCK.map((el, i) => (
+            <AccordionItem value={`item-${i}`} key={i}>
+              <AccordionTrigger>{el.title}</AccordionTrigger>
+              <AccordionContent>{el.description}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </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="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
+          </p>
+          <div className="w-full md:max-w-[210px]">
+            <GoToTwitterBtn />
+          </div>
+          <img
+            src="/images/horoscope.png"
+            alt="horoscope"
+            className="mx-auto h-[327px] w-[327px] md:mx-0 md:h-auto md:w-auto"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/pages/home/hero.tsx

@@ -4,7 +4,7 @@ import { PredictFutureBtn } from '@/components/common/PredictFutureBtn';
 export const Hero = () => {
   return (
     <div className="relative flex min-h-[812px] flex-col items-center justify-between pb-[52px] pt-20 md:min-h-[988px] md:pb-[72px] md:pt-24">
-      <h1 className="font-bona-nova-sc text-center text-[40px] md:text-[60px]">TarotSol AI</h1>
+      <h1 className="text-center font-bona-nova-sc text-[40px] md:text-[60px]">TarotSol AI</h1>
       <div className="flex flex-col gap-6 md:flex-row md:gap-10">
         <GoToTwitterBtn />
         <PredictFutureBtn />

src/components/ui/button.tsx

@@ -5,12 +5,12 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 transition-all ease-linear',
   {
     variants: {
       variant: {
         default: 'bg-customYellow text-black hover:bg-customYellow-secondary',
-        outline: 'border border-customBlack hover:bg-customYellow-secondary',
+        outline: 'border border-customBlack bg-customYellow hover:bg-customYellow-secondary',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
       },
       size: {

src/pages/home-page.tsx

@@ -1,15 +1,17 @@
 import { AboutSection } from '@/components/common/About';
 import { TarotLine } from '@/components/common/TarotLine';
 import { CtaBlock } from '@/components/pages/home/cta';
+import { Faq } from '@/components/pages/home/faq';
 import { Hero } from '@/components/pages/home/hero';
 
 export default function HomePage() {
   return (
     <>
       <Hero />
-      <TarotLine words={new Array(5).fill(['Love', 'Money', 'Life', 'Deals', 'Work']).flat(Infinity)} />
+      <TarotLine words={new Array(10).fill(['Love', 'Money', 'Life', 'Deals', 'Work']).flat(Infinity)} />
       <AboutSection />
       <CtaBlock />
+      <Faq />
     </>
   );
 }