add MessageBox section below end of content in App.js and add some re…

…sponsive style to Container.style.js and some style change in Footer.styled.js and Global.js and Button.styled.js
FMghaccount · Feb 3, 2023 · e464523 · e464523
1 parent 8ee3227
commit e464523
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 4 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import { ThemeProvider } from 'styled-components'
 import Header from './components/Header'
 import Footer from './components/Footer'
 import Card from './components/Card'
+import MessageBox from './components/MessageBox'
 import { Container } from './components/styles/Container.styled'
 import GlobalStyles from './components/styles/Global'
 import content from './content'
@@ -13,6 +14,9 @@ const theme = {
     footer: '#003333',
   },
   mobile: '768px',
+  desktop: '1440px',
+  largeScreen: '1860px',
+  WideScreen: '2240px',
 }
 
 function App() {
@@ -24,6 +28,7 @@ function App() {
         {content.map((item, index) => (
           <Card key={index} item={item} />
         ))}
+        <MessageBox />
       </Container>
       <Footer />
     </ThemeProvider>

diff --git a/src/components/MessageBox.js b/src/components/MessageBox.js
@@ -0,0 +1,17 @@
+import { CallToAction, StyledMessageBox } from "./styles/MessageBox.styled"
+import { Button } from "./styles/Button.styled"
+
+const MessageBox = () => {
+  return (
+    <StyledMessageBox>
+      <CallToAction>
+        <h2 class="subtitle">آماده هستی تا جامعه خودت رو بسازی؟</h2>
+        <Button bg='#ff0099' color='#fff'>
+          شروع رایگان است !
+        </Button>
+      </CallToAction>
+    </StyledMessageBox>
+  )
+}
+
+export default MessageBox
diff --git a/src/components/styles/Button.styled.js b/src/components/styles/Button.styled.js
@@ -6,7 +6,7 @@ export const Button = styled.button`
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
   cursor: pointer;
   font-family: 'Vazir';
-  font-size: 18px;
+  font-size: 1rem;
   font-weight: 700;
   padding: 10px 40px;
   background-color: ${({ bg }) => bg || '#fff'};

diff --git a/src/components/styles/Container.styled.js b/src/components/styles/Container.styled.js
@@ -5,4 +5,15 @@ export const Container = styled.div`
   max-width: 100%;
   padding: 0 20px;
   margin: 0 auto;
+
+  @media (min-width: ${({ theme }) => theme.desktop}) {
+    width: 1200px ;
+  }
+  @media (min-width: ${({ theme }) => theme.largeScreen}) {
+    width: 1640px ;
+  }
+  @media (min-width: ${({ theme }) => theme.WideScreen}) {
+    width: 1880px ;
+  }
+
 `
diff --git a/src/components/styles/Footer.styled.js b/src/components/styles/Footer.styled.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const StyledFooter = styled.footer`
   background-color: ${({ theme }) => theme.colors.footer};
   color: #fff;
-  padding: 100px 0 60px;
+  padding: 180px 0 60px;
 
   ul {
     list-style-type: none;

diff --git a/src/components/styles/Global.js b/src/components/styles/Global.js
@@ -17,6 +17,10 @@ const GlobalStyles = createGlobalStyle`
    font-style: normal;
  }
 
+ :root{
+  font-size: 16px
+ }
+
   * {
     box-sizing: border-box;
   }
@@ -25,7 +29,7 @@ const GlobalStyles = createGlobalStyle`
     background: ${({ theme }) => theme.colors.body};
     color: hsl(192, 100%, 9%);
     font-family: 'Vazir', 'Poppins', sans-serif;
-    font-size: 1.15em;
+    font-size: 1.15rem;
     margin: 0;
   }
 
@@ -36,7 +40,11 @@ const GlobalStyles = createGlobalStyle`
 
   img {
     max-width: 100%;
-}
+  }
+
+  @media (max-width: ${({ theme }) => theme.mobile}) {
+    body{font-size: 0.8rem}
+  }
 `
 
 export default GlobalStyles

diff --git a/src/components/styles/MessageBox.styled.js b/src/components/styles/MessageBox.styled.js
@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+export const StyledMessageBox = styled.div`
+  position: relative;
+  margin-top: 12rem;
+`
+export const CallToAction = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 31.25rem;
+  margin: 0 1.25rem;
+  background-color: white;
+  border-radius: 0.9375rem;
+  padding: 1.875rem 1.25rem;
+  box-shadow: 0.625rem 0.625rem 1rem 0.25rem rgb(0 0 0 / 22%);
+  left: 50%;
+  left: 0;
+  right: 0;
+  top: -90px;
+  margin: 0 auto;
+  text-align: center;
+
+  & > .subtitle {
+    margin-top: unset;
+    margin-bottom: 2.5rem;
+  }
+
+  & > button {
+    direction: rtl;
+  }
+
+`
+