feat: update About and Footer components for improved layout and resp…

…onsiveness
RedDuck-Software · Jan 10, 2025 · 7d2df2e · 7d2df2e
1 parent 0f246e9
commit 7d2df2e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/components/common/About/index.tsx b/src/components/common/About/index.tsx
@@ -2,11 +2,11 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
 
 export const AboutSection = () => {
   return (
-    <div className="grid w-full grid-cols-2 bg-[url('/images/textures/green.png')] bg-repeat font-inknut *:pb-[60px] *:pt-[80px]">
-      <div className="flex h-full min-h-full w-full flex-col justify-between border-r border-black pl-[140px] pr-[100px]">
+    <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="space-y-8">
-          <p className="text-[60px] font-light leading-[72px]">About Tarot</p>
-          <p className="text-[20px] font-light leading-[28px]">
+          <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]">
             Lorem ipsum dolor sit amet consectetur. Posuere auctor vivamus sed leo non pellentesque. Massa sed eget est
             porta facilisis rhoncus mauris. Pellentesque malesuada morbi volutpat dictum. Sollicitudin suspendisse
             aliquam imperdiet rutrum interdum. Dignissim in diam vestibulum sodales nibh nec scelerisque id. Sit
@@ -15,13 +15,17 @@ export const AboutSection = () => {
           </p>
         </div>
 
-        <img src="/images/sun.png" alt="tarot1" className="!mt-auto ml-auto h-[320px] w-[305px]" />
+        <img
+          src="/images/sun.png"
+          alt="tarot1"
+          className="mt-12 h-[320px] w-[305px] max-md:mx-auto md:!ml-auto md:!mt-auto"
+        />
       </div>
 
-      <div className="w-full space-y-8 pl-[100px] pr-[140px]">
-        <p className="text-[60px] font-light leading-[72px]">Rules</p>
+      <div className="w-full space-y-8 px-[24px] lg:pl-[100px] lg:pr-[140px]">
+        <p className="text-[40px] font-light leading-[48px] md:text-[60px] md:leading-[72px]">Rules</p>
 
-        <div className="flex w-full max-w-full flex-row justify-between overflow-x-hidden *:h-[248px] *:w-[173px] 2xl:*:h-[310px] 2xl:*:w-[217px]">
+        <div className="flex w-full max-w-full flex-row justify-between overflow-x-auto *:h-[248px] *:w-[173px] max-md:gap-6 2xl:*:h-[310px] 2xl:*:w-[217px]">
           <img src="/images/libra-card.png" alt="tarot1" />
           <img src="/images/libra-card.png" alt="tarot2" />
           <img src="/images/libra-card.png" alt="tarot3" />

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -1,7 +1,7 @@
 export const Footer = () => {
   return (
-    <div className="flex h-[920px] w-full flex-col items-end justify-end bg-[url('/images/footer/footer.png')] bg-center font-inknut">
-      <p className="mb-[100px] flex w-full flex-row justify-between px-[140px] text-[20px] font-light leading-[28px]">
+    <div className="flex h-[820px] w-full flex-col items-end justify-end bg-[url('/images/footer/footer.png')] bg-center font-inknut md:h-[920px]">
+      <p className="mb-[100px] flex w-full flex-col justify-between px-[28px] text-[20px] font-light leading-[28px] max-md:gap-10 max-md:text-center md:flex-row md:px-[140px]">
         <span>@{new Date().getFullYear()}. All rights reserved.</span>
         <span>Powered by TarotSol AI</span>
       </p>

diff --git a/src/pages/game-page.tsx b/src/pages/game-page.tsx
@@ -5,7 +5,7 @@ import { GameSection } from '@/components/pages/game/game';
 export default function GamePage() {
   return (
     <>
-      <GameSection />
+      {/* <GameSection /> */}
       <AboutSection />
       <Footer />
     </>