still styling services

Author: mathcodes

.gitignore

@@ -6,6 +6,9 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+notes/
+
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

notes/README.md

@@ -36,7 +36,7 @@
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^2.1.3",
     "react-slick": "^0.28.1",
     "slick-carousel": "^1.8.1",
     "validator": "^13.6.0",

package-lock.json

@@ -0,0 +1,7 @@
+.service{
+  background-color: #fff444;
+}
+
+paper{
+  background-color: #fff444;
+}

package.json

@@ -1,112 +1,119 @@
-import { Grid, Paper, CardContent, Typography } from '@material-ui/core';
+import { Grid, Paper, Box, Typography } from '@material-ui/core';
 // import icons frmo  mui
 // import mui icon
-import ReadMoreIcon from '@mui/icons-material/ReadMore';
+import React, { useContext } from 'react';
+import { ThemeContext } from '../../../contexts/ThemeContext';
+import './PackageCards.css'
 
 export const packages = [
   {
     key: 1,
     name: "Basic SEO",
     description: "Includes keyword research, on-page optimization, and monthly reporting on traffic and keyword rankings.",
     price: "$500/month",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
   },
   {
     key: 2,
     name: "Advanced SEO",
     description: "Includes everything in the Basic SEO p, plus link building and competitor analysis.",
     price: "$1000/month",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
   },
   {
     key: 3,
     name: "Social Media Marketing",
     description: "Includes social media account setup and management, content creation and scheduling, and monthly reporting on engagement and follower growth.",
     price: "$800/month",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
   },
   {
     key: 4,
     name: "Branding",
     description: "Includes a brand audit, brand strategy development, and visual identity design (logo, color scheme, typography, etc.).",
     price: "$2000/month",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
 
   },
   {
     key: 5,
     name: "Marketing",
     description: "Includes everything in the SEO, Social Media Marketing, and Branding packages, plus email marketing, paid advertising management, and market research.",
     price: "$3000/month",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
 
   },
   {
-    key: 6, 
+    key: 6,
     name: "Basic SEO Startup Suite",
     description: "One time setup with instruction as needed to get your keywords setup,  discuss and implement on-page optimization, and review a monthly report on traffic and keyword rankings so you can continue improving your SEO!!!",
     price: "$500 / site",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
 
   },
   {
     key: 7,
     name: "Advanced SEO Startup Suite",
     description: "Includes everything in the Basic SEO setup 3-5 backlinks, to get your stats our of the red. Specialized competitor analysis and market analysis. Complete with online support and a custom 1-, 3-, 6-, AND 12-month plan of action.",
     price: "$1000 / site",
-    link: <ReadMoreIcon alignItems="right" style={{ justifyContent: "right" }} />
+    link: `<ReadMoreIcon alignItems="right" style={{ justifyContent: "right" }} />`
 
   },
   {
     key: 8,
     name: "Social Media Marketing Startup Suite",
     description: "Includes 1-6 social media account setup and management, content creation and scheduling, and monthly reporting on engagement and follower growth.",
     price: "$400 / account",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
 
   },
   {
     key: 9,
     name: "Branding Startup Suite",
     description: "Includes a brand audit, creative session with 1-2 expert digital marketers followed by brand strategy development and visual identity design (logo, color scheme, typography, etc.).",
     price: "$800 / brand",
-    link: <ReadMoreIcon />
-
+    link: `<ReadMoreIcon />`
   },
   {
     key: 10,
     name: "Marketing Startup Suite",
     description: "Includes everything in Advanced SEO Startup suites, including a complete review and revision of all Social Media sites, establishing or optiomizing your brand, email marketing setup including automation and defualt messages, information and optional walkthrough to setup paid advertising management.",
     price: "$3000 / site",
-    link: <ReadMoreIcon />
+    link: `<ReadMoreIcon />`
 
   }
 ];
 
- function PackageCards() {
+function PackageCards() {
+  const { theme } = useContext(ThemeContext);
+
   return (
-    <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
-      {packages.map((p) => (
-        <Grid item xs={2} sm={4} md={4} id={p.key}>
-          <Paper flex elevation={6}>
-            <CardContent>
-              <Typography variant="h5" component="h2">
-                {p.name}
-              </Typography>
-              <Typography variant="body2" component="p">
-                {p.description}
-              </Typography>
-              <Typography variant="body2" component="p">
-                {p.price}
-              </Typography>
-              <Typography variant="body2" component="p" >
-                {p.link}
-              </Typography>
-            </CardContent>
-          </Paper>
-        </Grid>
-      ))}
-    </Grid>
+    <>
+      <div className="services-header">
+        <h1 style={{ color: theme.secondary70 }}>Services</h1>
+      </div><Box>
+        <Grid container spacing={{ xs: 3, md: 1, }}  >
+          {packages.map((p) => (
+
+            <Grid container style={{ textAlign: "center", padding: '5px' }} mt={15} elevation={6} rowSpacing={3} xs={12} sm={6} md={4} lg={3}>
+              <Paper className="service servicePaper">
+                <Box className="service serviceBoxName" id={p.key} sx={{ mx: 'auto', py: 1, fontSize: '2rem', fontWeight: 500 }} Grid xs={12}>
+                  {p.name}
+                </Box>
+                <Box className="service serviceBoxDesc" Grid xs={12}>
+                  {p.description}
+                </Box>
+                <Box className="service serviceBox3" Grid xs={12}>
+                  <Box className="service serviceBox4">
+                    {p.price}
+                  </Box>
+                </Box>
+              </Paper>
+            </Grid>
+
+          ))}
+        </Grid></Box>
+    </>
   );
 }