Skip to content

Commit dd94f50

Browse files
mathcodesmathcodes
committed
services
1 parent a3565e5 commit dd94f50

File tree

10 files changed

+365
-3
lines changed

10 files changed

+365
-3
lines changed

‎src/assets/img/blueBackground.png‎

1.78 MB
Loading

‎src/components/Offers/Offers.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.offers {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: flex-start;
6+
/* min-height: 100vh; */
7+
overflow-x: hidden;
8+
padding: 2rem;
9+
}
10+
11+
.offers--header {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
width: 100%;
16+
margin: 1rem;
17+
}
18+
19+
.offers--header h1 {
20+
margin-bottom: 40px;
21+
font-size: 3.5rem;
22+
font-family: var(--primaryFont);
23+
}
24+
25+
.offers--body {
26+
width: 100%;
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
justify-content: center;
31+
font-family: 'Poppins', sans-serif;
32+
}
33+
34+
.offers--bodyContainer {
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
gap: 4.5rem;
39+
width: 100%;
40+
}
41+
42+
.offers--viewAll {
43+
width: 100%;
44+
padding: 2rem;
45+
display: flex;
46+
align-items: center;
47+
justify-content: flex-end;
48+
margin-top: 2rem;
49+
}
50+
51+
52+
53+
.offer--lang,
54+
.offer--desc {
55+
z-index: 1;
56+
}
57+
58+
.offer--desc:hover,
59+
.offer--lang:hover {
60+
z-index: 1000;
61+
}
62+
63+
.break{
64+
opacity:0;
65+
}
66+
67+
/* ------------------------------------ MEDIA QUERIES ------------------------------------ */
68+
@media screen and (min-width: 992px) {
69+
.offers--bodyContainer {
70+
display: flex;
71+
flex-direction: row;
72+
align-items: center;
73+
justify-content: center;
74+
width: 100%;
75+
}
76+
}
77+
@media screen and (max-width: 992px) {
78+
.offers--bodyContainer {
79+
display: flex;
80+
flex-direction: column;
81+
align-items: center;
82+
justify-content: center;
83+
/* width: 100%; */
84+
}
85+
}
86+
87+
@media screen and (max-width: 800px) {
88+
.offers--header h1 {
89+
font-size: 2.8rem;
90+
margin-bottom: 30px;
91+
}
92+
div.offerContent > img{
93+
width: 100%;
94+
height: 60%;
95+
transition: opacity 0.7s 0.3s;
96+
}
97+
}
98+

‎src/components/Offers/Offers.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, { useContext } from 'react';
2+
import { Link } from 'react-router-dom'
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import { ThemeContext } from '../../contexts/ThemeContext';
5+
import { offersData } from '../../data/offersData'
6+
import { HiArrowRight } from "react-icons/hi";
7+
import './Offers.css'
8+
9+
function Offer() {
10+
11+
const { theme } = useContext(ThemeContext);
12+
13+
const useStyles = makeStyles(() => ({
14+
viewAllBtn: {
15+
color: '#eaeaea',
16+
fontFamily: "'Poppins', sans-serif",
17+
backgroundColor: '#232526',
18+
borderRadius: '10px',
19+
fontSize: '2rem',
20+
padding: '1rem',
21+
transition: 'color 0.2s',
22+
"&:hover": {
23+
color: '#232526',
24+
backgroundColor: '#eaeaea ',
25+
fontFamily: "'Poppins', sans-serif"
26+
}
27+
},
28+
viewArr: {
29+
color: theme.tertiary,
30+
backgroundColor: theme.secondary70,
31+
width: '40px',
32+
height: '40px',
33+
padding: '0.5rem',
34+
fontSize: '1.05rem',
35+
borderRadius: '50%',
36+
cursor: 'pointer',
37+
transition: 'background-color 0.2s',
38+
"&:hover": {
39+
color: theme.tertiary,
40+
backgroundColor: theme.secondary,
41+
}
42+
},
43+
}));
44+
45+
const classes = useStyles();
46+
47+
return (
48+
<>
49+
<div style={{ backgroundColor: theme.secondary50, height: '1rem' }}> </div>
50+
51+
{offersData.length > 0 && (
52+
<div className="offers" id="offers" style={{ backgroundColor: theme.secondary }}>
53+
<div className="offers--header">
54+
<h1 style={{ color: theme.secondary70 }}>Offer</h1>
55+
</div>
56+
<div className="offers--body">
57+
58+
</div>
59+
<div className="break"><hr /><hr /><hr /><hr /><hr /></div>
60+
<div className="break"><hr /><hr /><hr /><hr /><hr /></div>
61+
62+
<div>
63+
<h1 style={{color:'#333333'}}className="offers--body">Viewing 4 of {offersData.length} offers</h1>
64+
</div>
65+
{offersData.length > 3 && (
66+
<div className="offers--viewAll">
67+
<Link to="/offers">
68+
<button className={classes.viewAllBtn}>
69+
View All ⇨
70+
</button>
71+
</Link>
72+
</div>
73+
)}
74+
</div>
75+
)}
76+
</>
77+
)
78+
};
79+
80+
export default Offer;

‎src/components/PackageCards/PackageCards/PackageCards.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { Grid, Paper, CardContent, Typography } from '@material-ui/core';
2+
// import icons frmo mui
3+
// import mui icon
4+
import ReadMoreIcon from '@mui/icons-material/ReadMore';
5+
6+
export const packages = [
7+
{
8+
key: 1,
9+
name: "Basic SEO",
10+
description: "Includes keyword research, on-page optimization, and monthly reporting on traffic and keyword rankings.",
11+
price: "$500/month",
12+
link: <ReadMoreIcon />
13+
},
14+
{
15+
key: 2,
16+
name: "Advanced SEO",
17+
description: "Includes everything in the Basic SEO p, plus link building and competitor analysis.",
18+
price: "$1000/month",
19+
link: <ReadMoreIcon />
20+
},
21+
{
22+
key: 3,
23+
name: "Social Media Marketing",
24+
description: "Includes social media account setup and management, content creation and scheduling, and monthly reporting on engagement and follower growth.",
25+
price: "$800/month",
26+
link: <ReadMoreIcon />
27+
},
28+
{
29+
key: 4,
30+
name: "Branding",
31+
description: "Includes a brand audit, brand strategy development, and visual identity design (logo, color scheme, typography, etc.).",
32+
price: "$2000/month",
33+
link: <ReadMoreIcon />
34+
35+
},
36+
{
37+
key: 5,
38+
name: "Marketing",
39+
description: "Includes everything in the SEO, Social Media Marketing, and Branding packages, plus email marketing, paid advertising management, and market research.",
40+
price: "$3000/month",
41+
link: <ReadMoreIcon />
42+
43+
},
44+
{
45+
key: 6,
46+
name: "Basic SEO Startup Suite",
47+
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!!!",
48+
price: "$500 / site",
49+
link: <ReadMoreIcon />
50+
51+
},
52+
{
53+
key: 7,
54+
name: "Advanced SEO Startup Suite",
55+
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.",
56+
price: "$1000 / site",
57+
link: <ReadMoreIcon alignItems="right" style={{ justifyContent: "right" }} />
58+
59+
},
60+
{
61+
key: 8,
62+
name: "Social Media Marketing Startup Suite",
63+
description: "Includes 1-6 social media account setup and management, content creation and scheduling, and monthly reporting on engagement and follower growth.",
64+
price: "$400 / account",
65+
link: <ReadMoreIcon />
66+
67+
},
68+
{
69+
key: 9,
70+
name: "Branding Startup Suite",
71+
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.).",
72+
price: "$800 / brand",
73+
link: <ReadMoreIcon />
74+
75+
},
76+
{
77+
key: 10,
78+
name: "Marketing Startup Suite",
79+
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.",
80+
price: "$3000 / site",
81+
link: <ReadMoreIcon />
82+
83+
}
84+
];
85+
86+
function PackageCards() {
87+
return (
88+
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
89+
{packages.map((p) => (
90+
<Grid item xs={2} sm={4} md={4} id={p.key}>
91+
<Paper flex elevation={6}>
92+
<CardContent>
93+
<Typography variant="h5" component="h2">
94+
{p.name}
95+
</Typography>
96+
<Typography variant="body2" component="p">
97+
{p.description}
98+
</Typography>
99+
<Typography variant="body2" component="p">
100+
{p.price}
101+
</Typography>
102+
<Typography variant="body2" component="p" >
103+
{p.link}
104+
</Typography>
105+
</CardContent>
106+
</Paper>
107+
</Grid>
108+
))}
109+
</Grid>
110+
);
111+
}
112+
113+
export default PackageCards;

‎src/components/Projects/Projects.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { makeStyles } from '@material-ui/core/styles';
44
import { ThemeContext } from '../../contexts/ThemeContext';
55
import { projectsData } from '../../data/projectsData'
66
import { HiArrowRight } from "react-icons/hi";
7-
import './Projects.css'
87
import SingleProject from './SingleProject/SingleProject';
8+
import './Projects.css'
99

1010
function Projects() {
1111

‎src/components/Projects/SingleProject/SingleProject.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ function Item(props) {
3333
/>
3434
);
3535
}
36-
function SingleProject({ id, name, desc, tags, code, demo, image, theme }) {
36+
37+
export function SingleProject({ id, name, desc, tags, code, demo, image, theme }) {
3738
const [value, setValue] = React.useState(0);
3839

3940

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ export { default as Navbar } from './Navbar/Navbar'
22
export { default as Landing } from './Landing/Landing'
33
export { default as About } from './About/About'
44
export { default as Skills } from './Skills/Skills'
5+
export { default as Offers } from './Offers/Offers'
56
export { default as Testimonials } from './Testimonials/Testimonials'
67
export { default as Contacts } from './Contacts/Contacts'
78
export { default as PreContact } from './PreContact/PreContact'
89
export { default as Projects } from './Projects/Projects'
910
export { default as Services } from './Services/Services'
11+
export { default as PackageCards } from './PackageCards/PackageCards/PackageCards'
1012
export { default as SingleProject } from './Projects/SingleProject/SingleProject'
1113
export { default as SingleService } from './Services/SingleService/SingleService'
1214
export { default as BackToTop } from './BackToTop/BackToTop'

‎src/data/SERVprojectsData.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export const projectsData = [
2+
3+
{
4+
key:0,
5+
name: "Basic SEO Package",
6+
description: "Includes keyword research, on-page optimization, and monthly reporting on traffic and keyword rankings.",
7+
price: 500
8+
},
9+
{
10+
key:1,
11+
name: "Advanced SEO Package",
12+
description: "Includes everything in the Basic SEO Package, plus link building and competitor analysis.",
13+
price: 1000
14+
},
15+
{
16+
key:2,
17+
name: "Social Media Marketing Package",
18+
description: "Includes social media account setup and management, content creation and scheduling, and monthly reporting on engagement and follower growth.",
19+
price: 800
20+
},
21+
{
22+
key:3,
23+
name: "Branding Package",
24+
description: "Includes a brand audit, brand strategy development, and visual identity design (logo, color scheme, typography, etc.).",
25+
price: 2000
26+
},
27+
{
28+
key:4,
29+
name: "Marketing Package",
30+
description: "Includes everything in the SEO, Social Media Marketing, and Branding packages, plus email marketing, paid advertising management, and market research.",
31+
price: 3000
32+
},
33+
]

‎src/data/offersData.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export const offersData = [
2+
3+
{
4+
key:0,
5+
name: "Basic SEO Package",
6+
description: "Includes keyword research, on-page optimization, and monthly reporting on traffic and keyword rankings.",
7+
price: 500
8+
},
9+
{
10+
key:1,
11+
name: "Advanced SEO Package",
12+
description: "Includes everything in the Basic SEO Package, plus link building and competitor analysis.",
13+
price: 1000
14+
},
15+
{
16+
key:2,
17+
name: "Social Media Marketing Package",
18+
description: "Includes social media account setup and management, content creation and scheduling, and monthly reporting on engagement and follower growth.",
19+
price: 800
20+
},
21+
{
22+
key:3,
23+
name: "Branding Package",
24+
description: "Includes a brand audit, brand strategy development, and visual identity design (logo, color scheme, typography, etc.).",
25+
price: 2000
26+
},
27+
{
28+
key:4,
29+
name: "Marketing Package",
30+
description: "Includes everything in the SEO, Social Media Marketing, and Branding packages, plus email marketing, paid advertising management, and market research.",
31+
price: 3000
32+
},
33+
]

0 commit comments

Comments
 (0)