update view contents, fix footer, etc

najamuslim · Aug 21, 2024 · ba4c936 · ba4c936
1 parent 7c6aed0
commit ba4c936
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/apps/web/src/app/assets/css/Contents.css b/apps/web/src/app/assets/css/Contents.css
@@ -5,6 +5,25 @@
     align-items: center;
 }
 
+.b-t-contents{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    }
+    .icon-bt-3{
+        display: flex;
+        width: 100%;
+        height: auto;
+        padding: 20px;
+    }
+    .p-bt-3{
+        display: flex;
+        width: 100%;
+        height: auto;
+        padding: 20px;
+    }
+
 .line-top-br{
     display: flex;
     border-top: 1px solid #f5CC00;
@@ -15,15 +34,32 @@
     display: flex;
     width: 100%;
     height: auto;
-}
+    align-items: center;
+    justify-content: center;
+    }
+
 .c-bottom{
     display: grid;
     background-color: #f5CC00;
     margin-bottom: 0;
 }
 
+@media only screen and (max-width: 550px) {
+    .icon-bt-3{
+        flex-direction: column;
+        padding: 10px;
+        gap: 30px;
+    }
+    .p-bt-3{
+        flex-direction: column;
+        padding: 10px;
+        gap: 10px;
+    }
+}
+
 @media only screen and (max-width: 400px) {
     #txt-3-s{
         font-size: 40px!important;
     }
+
 }
diff --git a/apps/web/src/app/pages/contents.tsx b/apps/web/src/app/pages/contents.tsx
@@ -16,14 +16,15 @@ const Content_Area = () => {
         >
           How It Works
         </h2>
-        <div className="flex flex-col md:flex-row justify-between items-center space-y-12 md:space-y-0 max-w-6xl mx-auto">
+        <div className="b-t-contents">
+        <div className="icon-bt-3">
           <div className="flex flex-col items-center text-center text-white flex-1 px-4">
             <Image
               src="https://xottle.asia/images/scan.png"
               alt="Scan"
               className="mx-auto mb-4"
-              width={230}
-              height={230}
+              width={260}
+              height={260}
               objectFit="contain"
             />
           </div>
@@ -32,8 +33,8 @@ const Content_Area = () => {
               src="/images/throw.png"
               alt="Deposit"
               className="mx-auto mb-4"
-              width={230}
-              height={230}
+              width={260}
+              height={260}
               objectFit="contain"
             />
           </div>
@@ -42,15 +43,14 @@ const Content_Area = () => {
               src="https://xottle.asia/images/earn.png"
               alt="Earn"
               className="mx-auto mb-4"
-              width={230}
-              height={230}
+              width={260}
+              height={260}
               objectFit="contain"
             />
           </div>
         </div>
         <div
-          style={{ padding: 20 }}
-          className="flex flex-col md:flex-row justify-between items-center space-y-12 md:space-y-0 max-w-6xl mx-auto"
+          className="p-bt-3"
         >
           <div className="flex flex-col items-center text-center text-white flex-1 px-4">
             <h3 className="text-2xl md:text-3xl font-bold mb-2">Scan</h3>
@@ -72,6 +72,7 @@ const Content_Area = () => {
             </p>
           </div>
         </div>
+        </div>
       </div>
 
       <div
@@ -96,16 +97,13 @@ const Content_Area = () => {
           <br />
           <strong>The more you hold, the more you gain!</strong>
         </p>
-        <div className="flex justify-center px-1">
-          <div className="grid grid-cols-1 md:grid-cols-1 gap-1">
+        <div className="f-tr-img">
             <Image
               src="https://xottle.asia/images/domore.png"
               alt="do more"
-              className="f-tr-img"
-              width={800}
-              height={360}
+              width={850}
+              height={370}
             />
-          </div>
         </div>
       </div>
     </>