From 124defde64de6defe6f81e57f93b0ef10c92cdf8 Mon Sep 17 00:00:00 2001
From: HoangNDM6 <mhoang.9699@gmail.com>
Date: Wed, 24 Jul 2024 11:05:35 +0700
Subject: [PATCH] update

---
 src/app/globals.css                           | 10 ----------
 src/sections/abstraction/index.tsx            | 14 +++++++-------
 .../blogs/components/Slider/index.tsx         |  1 -
 src/sections/blogs/index.tsx                  |  2 +-
 .../statistics/components/Card/index.tsx      |  2 +-
 src/sections/statistics/index.tsx             | 19 ++++++-------------
 6 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index bf054d2..c9528e0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -86,16 +86,6 @@ body {
   .card {
     width: 272px;
   }
-
-  .swiper {
-    height: 370px !important;
-  }
-}
-
-@media screen and (min-width: 375px) {
-  .card {
-    width: 100%;
-  }
 }
 
 @media screen and (min-width: 425px) {
diff --git a/src/sections/abstraction/index.tsx b/src/sections/abstraction/index.tsx
index 9f67ad4..08eaa20 100644
--- a/src/sections/abstraction/index.tsx
+++ b/src/sections/abstraction/index.tsx
@@ -7,13 +7,13 @@ import { PAGE_ROUTE } from "../../common";
 
 function AbstractionLayer() {
     return (
-        <div className="bg-[url('../assets/images/bg_section_abstraction.png')] lg:w-[calc(100vw_-_6px)]  lg:h-[800px] lg:bg-[url('../assets/images/bg_abstract.png')] bg-cover bg-center lg:bg-bottom lg:px-[150px] bg-no-repeat w-screen flex flex-col items-center px-6 lg:flex-row lg:gap-[91px]">
-            <Image className="lg:hidden" alt="" src={img_abstract_layer} />
-            <Image className="lg:block hidden" alt="" src={img_abstrac_pc} />
-            <div className="flex flex-col gap-10 w-full items-center lg:gap-14 lg:items-start">
-                <div className="flex flex-col gap-4 items-center lg:items-start">
-                    <span className="font-ppmori-semibold text-[28px] leading-9 text-center lg:text-start">Aura as an Abstraction Layer</span>
-                    <span className="text-center text-lg text-medium-gray lg:text-start">
+        <div className="bg-[url('../assets/images/bg_section_abstraction.png')] w-[calc(100vw_-_6px)] xl:h-[800px] xl:bg-[url('../assets/images/bg_abstract.png')] bg-cover bg-center xl:bg-bottom xl:px-[150px] bg-no-repeat flex flex-col items-center px-6 xl:flex-row xl:gap-[91px]">
+            <Image className="xl:hidden" alt="" src={img_abstract_layer} />
+            <Image className="xl:block hidden" alt="" src={img_abstrac_pc} />
+            <div className="flex flex-col gap-10 w-full items-center xl:gap-14 xl:items-start">
+                <div className="flex flex-col gap-4 items-center xl:items-start">
+                    <span className="font-ppmori-semibold text-[28px] leading-9 text-center xl:text-start">Aura as an Abstraction Layer</span>
+                    <span className="text-center text-lg text-medium-gray xl:text-start">
                         A decentralized middleware infrastructure accelerates the interoperability of IPs across chains.
                     </span>
                 </div>
diff --git a/src/sections/blogs/components/Slider/index.tsx b/src/sections/blogs/components/Slider/index.tsx
index 1c24af4..2d25cf9 100644
--- a/src/sections/blogs/components/Slider/index.tsx
+++ b/src/sections/blogs/components/Slider/index.tsx
@@ -16,7 +16,6 @@ const BlogsSlider = forwardRef((props, ref: any) => {
     const [sliderReach, setSliderReach] = useState<string>("start")
     const [posts, setPosts] = useState<Post[]>([])
 
-
     useEffect(() => {
         const changeButtonStyle = (button: HTMLElement, isReached: boolean) => {
             if (isReached) {
diff --git a/src/sections/blogs/index.tsx b/src/sections/blogs/index.tsx
index 8d02cad..c8c02b5 100644
--- a/src/sections/blogs/index.tsx
+++ b/src/sections/blogs/index.tsx
@@ -16,7 +16,7 @@ function Blogs() {
                     <SwiperButton onClickPrev={() => sliderRef.current?.slidePrev()} onClickNext={() => sliderRef.current?.slideNext()} />
                 </div>
             </div>
-            <div className="w-screen pl-6 xl:w-[calc(100vw_-_6px)] xl:pl-0">
+            <div className="pl-6 w-[calc(100vw_-_6px)] xl:pl-0">
                 <BlogsSlider ref={sliderRef} />
             </div>
         </div>
diff --git a/src/sections/statistics/components/Card/index.tsx b/src/sections/statistics/components/Card/index.tsx
index 56e21ad..42d891f 100644
--- a/src/sections/statistics/components/Card/index.tsx
+++ b/src/sections/statistics/components/Card/index.tsx
@@ -13,7 +13,7 @@ type CardProps = {
 function Card({ data, className }: CardProps) {
     const { value, title, img } = data
     return (
-        <div className={`h-[216px] lg:h-[352px] max-w-[344px] w-[344px] lg:w-[427px] lg:min-w-[427px] p-8 lg:px-14 lg:pt-20 lg:pb-14 rounded-3xl bg-dark-charcoal flex flex-col gap-6 justify-between hover:pb-[72px] card statistic-card group ${className}`}>
+        <div className={`h-[272px] lg:h-[352px] max-w-[344px] w-[344px] lg:w-[427px] lg:min-w-[427px] p-8 lg:px-14 lg:pt-20 lg:pb-14 rounded-3xl bg-dark-charcoal flex flex-col gap-6 justify-between hover:pb-[72px] card statistic-card group ${className}`}>
             <div className="h-16 w-16">
                 <div className="w-12 h-12 lg:h-16 lg:w-16 flex justify-center items-center rocket-container group-hover:z-[1] group-hover:bg-brand-gradient bg-blur-brand-linear-gradient rounded-full">
                     {img}
diff --git a/src/sections/statistics/index.tsx b/src/sections/statistics/index.tsx
index 956c279..f13230f 100644
--- a/src/sections/statistics/index.tsx
+++ b/src/sections/statistics/index.tsx
@@ -108,24 +108,17 @@ function Statistics() {
                 <span className="text-light-yellow text-sm lg:text-xl font-normal font-jetBrains-mono">AURA IN NUMBERS</span>
                 <h2 className="font-ppmori-semibold self-stretch text-[28px] lg:text-[48px] text-center font-semibold leading-9 lg:leading-[56px] max-w-[659px] min-w-[313px]">The most thriving blockchain in emerging countries</h2>
             </div>
-            <div className="flex flex-col gap-3 xl:flex-row xl:gap-6 w-full xl:w-[calc(100vw_-_6px)] items-center justify-center">
+            <div className="w-[calc(100vw_-_6px)] flex justify-center">
                 <Swiper
                     modules={[A11y, Navigation]}
                     spaceBetween={16}
                     slidesPerView="auto"
-                    pagination={{
-                        clickable: true,
-                    }}
-
                 >
-                    <div className='flex gap-4'>
-                        {statisticData.map((item: any, i: number) => {
-                            return (
-                                <SwiperSlide key={i}> < Card data={item} /></SwiperSlide>
-                            )
-                        })}
-                    </div>
-
+                    {statisticData.map((item: any, i: number) => {
+                        return (
+                            <SwiperSlide key={i}> <Card data={item} /></SwiperSlide>
+                        )
+                    })}
                 </Swiper>
             </div>
         </div>