style: button center text in case link, project details card rounded-0

src/App.tsx

@@ -39,7 +39,7 @@ function App() {
 
 
 
-  return <div id="app" className=''>
+  return <div id="app" className='w-screen overflow-hidden'>
     <Navbar />
     <Suspense fallback={<LoadingPage />}>
       <Routes>

src/Components/Button/Button.tsx

@@ -72,7 +72,7 @@ export default function Button({ color = 'white',
     ...props }: Props) {
 
     let classes = `
-    inline-block font-sans rounded-lg font-regular border border-gray-300 hover:cursor-pointer
+    inline-block font-sans rounded-lg font-regular border border-gray-300 hover:cursor-pointer text-center
     ${baseBtnStyles[variant]}
     ${btnPadding[size]}
     ${variant === 'fill' ? btnStylesFill[color] : btnStylesOutline[color]}

src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx

@@ -92,6 +92,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
             <div className="px-32">
                 <Carousel
                     showDots={false}
+                    autoPlay={false}
                     // arrows={false}
                     responsive={responsive}
                     // centerMode

src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx

@@ -14,9 +14,12 @@ const Template: ComponentStory<typeof ProjectDetailsCard> = (args) => <ProjectDe
 export const Default = Template.bind({});
 Default.args = {
     projectId: 1,
+    isPageModal: true
 }
 
 
 
 const LoadingTemplate: ComponentStory<typeof ProjectDetailsCardSkeleton> = (args) => <ProjectDetailsCardSkeleton {...args} />;
-export const LoadingState = LoadingTemplate.bind({})
+export const LoadingState = LoadingTemplate.bind({
+    isPageModal: true
+})

src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx

@@ -97,11 +97,11 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
     return (
         <div
-            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && 'rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && '!rounded-0 w-full min-h-screen'}`}
         >
             <div className="relative h-[80px] lg:h-[152px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <button className="w-[48px] h-[48px] bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={closeModal}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
+                <button className="w-40 h-40 md:w-48 md:h-48 bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={closeModal}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
             </div>
             <div className="p-24">
                 <div className="flex gap-24 items-start">