add header navbar, fix social media arrangement

src/components/Header/Header.jsx

@@ -29,7 +29,7 @@ const headerStyle = createStyles({
 const Header = () => {
 
     return (
-        <Container sx={{display:"none"}}>
+        <Container>
             <Box sx={{color:"white", px:23}}>
                 <Box sx={{display:"flex", gap:1}}>
                     <InstagramIcon style={headerStyle.icon} />

src/components/Navbar/Navbar.jsx

@@ -282,7 +282,7 @@ const Navbar = () => {
       >
 
         {/* Conditionally render the Header */}
-        {/* {showHeader && <Header />} */}
+        {showHeader && <Header />}
 
         <Toolbar sx={{
           px: {

src/components/NewsLetter/NewsLetter.jsx

@@ -33,7 +33,14 @@ const NewsLetter = () => {
         }}
       >
 
-        <Box sx={{ width: {xs:"80%", md:"35%"}, backgroundColor: "rgba(255,255,255, 0.5)", padding: 10, textAlign:"center", color:"black" }}>
+        <Box sx={{ 
+          width: {xs:"80%", md:"40%"}, 
+          backgroundColor: "rgba(255,255,255, 0.5)", 
+          px: 15,
+          py: 10,
+          textAlign:"center", 
+          color:"black" 
+        }}>
 
           <Typography variant='h3'>
             Let's Stay in touch

src/components/ProductSelected/ProductSelected.jsx

@@ -26,7 +26,7 @@ const ProductSelected = () => {
       //sort
       selectedProducts = selectedProducts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
       setFilterProducts(selectedProducts)
-      
+
     }
 
   }, [products])
@@ -73,11 +73,25 @@ const ProductSelected = () => {
               }}
             />
 
-            <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+            <Button sx={{ 
+              position: "absolute", 
+              top:{
+                xs:0,
+                sm:0,
+                md:20
+              }, 
+              left: {
+                xs:0,
+                sm:0,
+                md:20
+              }, 
+              boxShadow: 0,
+              fontSize:10
+            }} variant="contained">
               NEW
             </Button>
 
-            <Box sx={{ pb: 5, pt: 3 }}>
+            <Box sx={{ pt: 3 }}>
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
                 {collection_name}
               </Typography>

src/components/SocialMedia/SocialMedia.jsx

@@ -15,7 +15,7 @@ const SocialMedia = () => {
     <Box
       sx={{
         display: 'flex',
-        flexDirection: { xs: 'column', sm: 'row' }, // Stack on small screens
+        flexDirection: 'row', // Stack on small screens
         justifyContent: 'center',
         gap: 8,
         padding: 2,

src/pages/Home.jsx

@@ -41,7 +41,7 @@ const Home = () => {
       </Box>
 
       <VideoAds width={"100%"} height={{
-        xs: 350,
+        xs: 250,
         md: 500,
         lg: 750,
       }} />
@@ -59,7 +59,7 @@ const Home = () => {
         }
       }}>
 
-        <Box sx={{ flexGrow: 1, mt: 10 }}>
+        <Box sx={{ flexGrow: 1, mt: 5 }}>
           <Grid container spacing={2}>
             <Grid size={12}>
               <ProductType title={'CLOTHING'} link={'/collection/clothing'} img_url={AmberClothing}/>