From a8370f0b4d6b46be29a4f031a62be964b7b1ea58 Mon Sep 17 00:00:00 2001
From: sonln99 <sonln4793@gmail.com>
Date: Fri, 6 Dec 2024 10:58:59 +0700
Subject: [PATCH] update ui

---
 src/sections/blogs/index.tsx         |  6 +++---
 src/sections/entertainment/index.tsx | 22 +++++++++++-----------
 src/sections/get-started/index.tsx   | 20 ++++++++++----------
 src/sections/statistics/index.tsx    |  4 ++--
 4 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/sections/blogs/index.tsx b/src/sections/blogs/index.tsx
index 41dcd1a..1240c86 100644
--- a/src/sections/blogs/index.tsx
+++ b/src/sections/blogs/index.tsx
@@ -9,8 +9,8 @@ function Blogs() {
   return (
     <div className="py-[64px] sm:py-[120px] flex flex-col gap-10 w-full" id="press">
       <div className="w-full">
-        <div className="main-container px-0 sm:px-24">
-          <div className="px-0 sm:px-[200px] flex justify-between">
+        <div className="w-full sm:max-w-[1360px] mx-auto">
+          <div className="flex justify-between mx-[24px]">
             <div className="text-[#1c1f2a] text-[40px] font-semibold font-interTight leading-[52px]">
               Press
             </div>
@@ -33,7 +33,7 @@ function Blogs() {
         />
       </div> */}
 
-      <div className="pl-[24px] sm:pl-6 w-[calc(100vw_-_24px)] sm:w-[calc(100vw_-_6px)] xl:pl-0">
+      <div className="pl-6 w-[calc(100vw_-_24px)]">
         <BlogsSlider ref={sliderRef} />
       </div>
     </div>
diff --git a/src/sections/entertainment/index.tsx b/src/sections/entertainment/index.tsx
index 060c69b..d347186 100644
--- a/src/sections/entertainment/index.tsx
+++ b/src/sections/entertainment/index.tsx
@@ -7,13 +7,9 @@ function Entertainment() {
   return (
     <div className="main-container">
       <div className="py-[64px] sm:py-[120px] justify-start items-center gap-10 sm:gap-5 flex flex-col sm:flex-row w-full">
-        <div className="grow shrink basis-0 flex justify-end">
+        <div className="flex-1 basis-auto flex justify-end">
           <div className="w-full sm:w-[670px] h-auto sm:h-[480px] relative rounded-lg overflow-hidden">
-            <Image
-              className="w-full h-full"
-              src={ic_section_4}
-              alt="bg"
-            />
+            <Image className="w-full h-full" src={ic_section_4} alt="bg" />
             <Image
               className="mix-blend-screen top-0 left-[50px] sm:left-[100px] absolute w-[70%] h-auto sm:w-[464px] sm:h-[464px]"
               src={ic_section_42}
@@ -21,19 +17,23 @@ function Entertainment() {
             />
           </div>
         </div>
-        <div className="px-0 sm:px-6 2xl:px-24 py-0 sm:py-20 flex-col justify-start items-start gap-12 flex grow shrink basis-0">
-          <div className="self-stretch flex-col justify-start items-start gap-6 flex">
-            <div className="self-stretch text-[#1c1f2a] text-[28px] sm:text-[38px] font-semibold font-nacelle leading-[41.80px]">
+        <div className="flex-1 basis-auto px-0 sm:px-6 2xl:px-24 py-0 sm:py-20 flex-col justify-start items-start gap-12 flex">
+          <div className="flex-col justify-start items-start gap-6 flex">
+            <div className="text-[#1c1f2a] text-[28px] sm:text-[38px] font-semibold font-nacelle leading-[41.80px] max-w-[500px]">
               Entertainment Through Blockchain
             </div>
-            <div className="self-stretch text-[#64656a] text-lg font-normal font-interTight leading-[27px]">
+            <div className="text-[#64656a] text-lg font-normal font-interTight leading-[27px] max-w-[500px]">
               Transform creative content and real world assets into digital
               value through innovative tokenization capabilities. A
               comprehensive foundation to protect, manage, monetize, and
               distribute entertainment properties in the digital ecosystem.
             </div>
           </div>
-          <Link href={"https://app.aura.network/"} target="_blank" className="group h-14 px-6 py-3.5 bg-[#3189e2] rounded-[99px] justify-center items-center gap-2 inline-flex hover:bg-blue-600 transition-all">
+          <Link
+            href={"https://app.aura.network/"}
+            target="_blank"
+            className="group h-14 px-6 py-3.5 bg-[#3189e2] rounded-[99px] justify-center items-center gap-2 inline-flex hover:bg-blue-600 transition-all"
+          >
             <div className="text-white text-lg font-semibold font-interTight leading-[27px]">
               Try Aura now
             </div>
diff --git a/src/sections/get-started/index.tsx b/src/sections/get-started/index.tsx
index 7b99b08..1d597b0 100644
--- a/src/sections/get-started/index.tsx
+++ b/src/sections/get-started/index.tsx
@@ -7,19 +7,19 @@ function GetStarted() {
     <div className="w-full bg-[#eff2f4]">
       <div className="main-container">
         <div className="py-[64px] sm:py-20 justify-start items-start gap-14 flex flex-col">
-          <div className="self-stretch justify-start items-start gap-5 flex flex-col sm:flex-row w-full">
-            <div className="grow shrink basis-0 text-[#1c1f2a] text-[38px] font-semibold font-nacelle leading-[41.80px]">
+          <div className="self-stretch justify-center items-start gap-5 flex flex-col sm:flex-row w-full">
+            <div className="grow shrink basis-0 text-[#1c1f2a] text-[38px] font-semibold font-nacelle leading-[41.80px] sm:max-w-[650px]">
               Get Started with Aura
             </div>
-            <div className="grow shrink basis-0 text-[#64656a] text-lg font-normal font-interTight leading-[27px]">
+            <div className="grow shrink basis-0 text-[#64656a] text-lg font-normal font-interTight leading-[27px] sm:max-w-[650px]">
               Ready to dive into Aura? Here's how, whether you're a developer or
               a web3 enthusiast.
             </div>
           </div>
-          <div className="self-stretch justify-start items-start gap-5 flex flex-col sm:flex-row">
-            <div className="grow shrink basis-0 p-10 bg-white rounded-lg flex-col justify-start items-start gap-10 inline-flex w-full">
-              <div className="self-stretch h-[67px] flex-col justify-start items-start gap-4 flex">
-                <div className="self-stretch h-[31px] flex-col justify-start items-start gap-1 flex">
+          <div className="self-stretch justify-center items-start gap-5 flex flex-col sm:flex-row">
+            <div className="grow shrink basis-0 p-10 bg-white rounded-lg flex-col justify-start items-start gap-10 inline-flex w-full sm:max-w-[670px]">
+              <div className="self-stretch flex-col justify-start items-start gap-4 flex">
+                <div className="self-stretch flex-col justify-start items-start gap-1 flex">
                   <div className="self-stretch text-[#1c1f2a] text-[28px] font-semibold font-nacelle leading-[30.80px]">
                     For developers
                   </div>
@@ -38,9 +38,9 @@ function GetStarted() {
                 </div>
               </Link>
             </div>
-            <div className="grow shrink basis-0 p-10 bg-[#1a3151] rounded-lg flex-col justify-start items-start gap-10 inline-flex w-full">
-              <div className="self-stretch h-[67px] flex-col justify-start items-start gap-4 flex">
-                <div className="self-stretch h-[31px] flex-col justify-start items-start gap-1 flex">
+            <div className="grow shrink basis-0 p-10 bg-[#1a3151] rounded-lg flex-col justify-start items-start gap-10 inline-flex w-full sm:max-w-[670px]">
+              <div className="self-stretch flex-col justify-start items-start gap-4 flex">
+                <div className="self-stretch flex-col justify-start items-start gap-1 flex">
                   <div className="self-stretch text-white text-[28px] font-semibold font-nacelle leading-[30.80px]">
                     For web3 enthusiast
                   </div>
diff --git a/src/sections/statistics/index.tsx b/src/sections/statistics/index.tsx
index 63ae18f..841c191 100644
--- a/src/sections/statistics/index.tsx
+++ b/src/sections/statistics/index.tsx
@@ -235,12 +235,12 @@ function Statistics() {
     <div className="w-full py-[64px] sm:py-20 bg-[#1a3151] bg-[url('../assets/images/ic_section_5.png')] bg-cover bg-no-repeat">
       <div className="main-container">
         <div className="flex flex-col gap-14 sm:gap-6 w-full items-center lg:gap-14">
-          <div className="text-white text-[38px] font-semibold font-nacelle leading-[41.80px] sm:w-[1376px]">
+          <div className="text-white text-[38px] font-semibold font-nacelle leading-[41.80px] sm:max-w-[1360px] w-full">
             The most thriving blockchain <br />
             in emerging countries
           </div>
           <div className="flex justify-center gap-4 w-full">
-            <div className="hidden lg:flex">
+            <div className="hidden lg:flex w-full">
               <Swiper
                 modules={[A11y, Navigation]}
                 spaceBetween={16}