feat: initialize promotions-center page

src/app/[locale]/(main)/page.tsx

@@ -81,7 +81,7 @@ export default async function Home() {
 
   return (
     <main>
-      <Container maxWidth="xl">
+      <Container maxWidth="xl" sx={{ mt: 2 }}>
         <Grid container spacing={2}>
           <Grid item xs={12}>
             <HomePageSlider items={sliders} />

src/app/[locale]/(main)/promotion-center/components/Header.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Box, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+const Header = () => {
+  const t = useTranslations();
+  return (
+    <Box
+      sx={{
+        background: 'linear-gradient(45deg,#b500d0,#ff3a49)',
+        textAlign: 'center',
+        minHeight: 150,
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography
+        component="h1"
+        sx={{
+          color: '#fff',
+          fontWeight: 600,
+          fontSize: '1.75rem',
+          pt: 5,
+        }}
+      >
+        {t('header.navigation.promotions')}
+      </Typography>
+    </Box>
+  );
+};
+
+export default Header;

src/app/[locale]/(main)/promotion-center/page.tsx

@@ -0,0 +1,22 @@
+import { Card, CardContent, Container } from '@mui/material';
+import Header from './components/Header';
+
+const page = () => {
+  return (
+    <>
+      <Header />
+      <Container
+        maxWidth="xl"
+        sx={{
+          mt: -4,
+        }}
+      >
+        <Card variant="outlined">
+          <CardContent></CardContent>
+        </Card>
+      </Container>
+    </>
+  );
+};
+
+export default page;

src/components/Header/Header.tsx

@@ -18,7 +18,6 @@ const Header = () => {
         top: 0,
         zIndex: 10,
         backgroundColor: '#ffffff',
-        mb: 2,
       }}
     >
       <Container maxWidth="xl">