From 0f17783ab51804aab93cad435bb0d1a6f11e0d7e Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Fri, 9 Jun 2023 21:55:13 -0400
Subject: [PATCH] Home top slider

---
 .../UserHeader/RecomendedSliders.jsx          | 259 ++++++++++--------
 src/index.css                                 |   1 +
 2 files changed, 141 insertions(+), 119 deletions(-)

diff --git a/src/components/UserHeader/RecomendedSliders.jsx b/src/components/UserHeader/RecomendedSliders.jsx
index 3f99d00..a452bc2 100644
--- a/src/components/UserHeader/RecomendedSliders.jsx
+++ b/src/components/UserHeader/RecomendedSliders.jsx
@@ -97,154 +97,175 @@ export default function RecomendedSliders({ className }) {
             {/*</div>*/}
             <div className="slider-content">
                 <SliderCom settings={settings} selector={sellSlider}>
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                               This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                               Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                                Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
 
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                                Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
 
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                                Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
 
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                                Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                                Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
-                    <div className="item commonHeaderSliderItem">
-                        {/* title */}
-                        <div className="flex justify-center">
-                            <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                This is short title
-                            </p>
-                        </div>
-                        {/* username */}
-                        <div className="flex justify-center mb-1">
-                            <p className="text-xs text-thin-light-gray">
-                                Some wondersull text here and more
-                            </p>
-                        </div>
-                        {/* items */}
-                        <div className="flex justify-center">
-                            <div className="flex space-x-1 items-center text-purple text-xs">
-                                <span>(button)</span>
+                    <div className="item">
+                        <div className="commonHeaderSliderItem">
+                            {/* title */}
+                            <div className="flex justify-center">
+                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    This is short title
+                                </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex justify-center mb-1">
+                                <p className="text-xs text-thin-light-gray">
+                                    Some wondersull text here and more
+                                </p>
+                            </div>
+                            {/* items */}
+                            <div className="flex justify-center">
+                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    <span>(button)</span>
+                                </div>
                             </div>
                         </div>
+
                     </div>
 
                 </SliderCom>
diff --git a/src/index.css b/src/index.css
index 75b3d78..a394e10 100644
--- a/src/index.css
+++ b/src/index.css
@@ -39,6 +39,7 @@
   border-radius: 10px;
   margin: 0px 5px 0px 5px;
   height: 95px;
+  padding: 5px;
 }
 .offer-slide-item{
   background: rgb(2,0,36);