42 |
69 |
43 |
68 |
44 |
64 | Why choose us
45 |Specialist in advising clients on
46 |financial challenges
47 |48 | At our company, we understand that navigating financial 49 | challenges can be daunting. That's why we offer expert 50 | advice and guidance to help you make informed decisions 51 | and achieve your financial goals. 52 |
53 |
54 | {chooseData.map((i, idx) => (
55 |
63 |
65 | 
66 |
67 |
12 |
13 |
14 |
15 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/Components/About/about.css:
--------------------------------------------------------------------------------
1 | .about__wrapper {
2 | display: flex;
3 | column-gap: 2rem;
4 | }
5 |
6 | .about__content, .about__img {
7 | width: 50%;
8 | }
9 |
10 | .about__img img {
11 | width: 100%;
12 | height: 90%;
13 | object-fit: cover;
14 | border-radius: .75rem;
15 | }
16 |
17 | .about__content-desc {
18 | margin-top: 30px;
19 | }
20 |
21 | .choose__us-item-wrapper {
22 | margin-top: 20px;
23 | }
24 |
25 | .choose__us-item {
26 | display: flex;
27 | column-gap: 1.5rem;
28 | margin-top: 45px;
29 | }
30 |
31 | .choose__us-icon {
32 | width: 50px;
33 | height: 60px;
34 | padding-inline: 30px;
35 | display: flex;
36 | align-items: center;
37 | justify-content: center;
38 | border: 1px solid var(--primary-color);
39 | border-radius: 5px;
40 | }
41 |
42 | .choose__us-icon i {
43 | color: var(--primary-color);
44 | font-size: 2rem;
45 | }
46 |
47 | .choose__us-title {
48 | color: var(--text-color);
49 | font-weight: 500;
50 | margin-bottom: 10px;
51 | }
52 |
53 | .choose__us-description {
54 | line-height: 25px;
55 | }
56 |
57 | @media only screen and (max-width:992px) {
58 | .about__wrapper {
59 | align-items: center;
60 | }
61 | .about__content h2 {
62 | font-size: 1.5rem;
63 | }
64 | .about__content-desc {
65 | margin-top: 10px;
66 | line-height: 25px;
67 | }
68 | .choose__us-item {
69 | margin-top: 30px;
70 | }
71 | .choose__us-icon i{
72 | font-size: 1.5rem;
73 | }
74 | .choose__us-icon {
75 | padding-inline: 10px;
76 | height: 40px;
77 | }
78 | }
79 |
80 | @media only screen and (max-width:768px) {
81 | .about__wrapper {
82 | flex-direction: column;
83 | gap: 2rem;
84 | }
85 | .about__content-desc {
86 | margin-top: 30px;
87 | line-height: 25px;
88 | }
89 | .about__content, .about__img {
90 | width: 100%;
91 | }
92 |
93 | .about__img{
94 | height: 400px;
95 | }
96 |
97 | .about__img img{
98 | object-position: 50% 40%;
99 | }
100 |
101 | .about__content h2, h6 {
102 | text-align: center;
103 | }
104 | }
--------------------------------------------------------------------------------
/src/Components/Blog/Blog.tsx:
--------------------------------------------------------------------------------
1 | import { useInView } from 'framer-motion';
2 | import { useRef } from 'react';
3 | import articleThumbnail from '../../images/article.png';
4 | import caseStudyThumbnail from '../../images/case-study.png';
5 | import videoThumbnail from '../../images/video.png';
6 | import { Post } from './Post';
7 | import './blog.css';
8 |
9 | const blogData = [
10 | {
11 | title: 'Video',
12 | category: 'Marketing',
13 | description: 'In this video you gonna learn how ...',
14 | thumbnail: videoThumbnail,
15 | link: '#',
16 | },
17 | {
18 | title: 'Case Study',
19 | category: 'SEO',
20 | description:
21 | "You've just written an article. And you think it's pretty good. But is it fit to compete with the millions of other articles in Google's index on the same topic? In this post ...",
22 | thumbnail: caseStudyThumbnail,
23 | link: '#',
24 | },
25 | {
26 | title: 'Article',
27 | category: 'Design',
28 | description: 'This article will give you a basic ...',
29 | thumbnail: articleThumbnail,
30 | link: '#',
31 | },
32 | ];
33 |
34 | export const Blog = () => {
35 | const ref = useRef(null);
36 | const isInView = useInView(ref, { once: true });
37 | return (
38 |
16 |
19 | {title}
17 |{description}
18 |
47 |
67 |
48 |
54 | Our Blog
49 |50 | Let's have a look at our 51 | recent posts 52 |
53 |
55 | {blogData.map((i, idx) => (
56 |
66 |
20 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/Components/Blog/blog.css:
--------------------------------------------------------------------------------
1 | .light-theme .blog {
2 |
3 | }
4 |
5 | .blog__wrapper {
6 | display: flex;
7 | align-items: center;
8 | justify-content: space-evenly;
9 | }
10 |
11 | .blog__top-content {
12 | text-align: center;
13 | margin-bottom: 50px;
14 | }
15 |
16 | .blog__item {
17 | width: 30%;
18 | padding: 25px 20px;
19 | background: var(--card-bg);
20 | border-radius: .5rem;
21 | }
22 |
23 | .light-theme .blog__item {
24 | box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
25 | background: white;
26 | }
27 |
28 | .blog__item:nth-child(2) {
29 | width: 35%;
30 | }
31 |
32 | .blog__img {
33 | margin-bottom: 20px;
34 | height: 220px;
35 | display: flex;
36 | }
37 |
38 | .blog__img img {
39 | width: 100%;
40 | align-items: center;
41 | justify-items: center;
42 | object-fit: contain;
43 | }
44 |
45 | .blog__item h3 {
46 | color: var(--text-color);
47 | font-weight: 400;
48 | font-size: 1.4rem;
49 | margin-bottom: 5px;
50 | }
51 |
52 | .blog__item h4{
53 | color: var(--primary-color);
54 | }
55 |
56 | .post__description {
57 | margin-bottom: 10px;
58 | }
59 |
60 | .learn__more {
61 | text-align: end;
62 | }
63 |
64 | .learn__more a{
65 | font-size: .85rem;
66 | color: var(--primary-color);
67 | cursor: pointer;
68 | }
69 |
70 | .learn__more a:hover {
71 | color: var(--text-color);
72 | }
73 |
74 | @media only screen and (max-width:992px) {
75 | .post__description {
76 | font-size: .8rem;
77 | }
78 | .blog__img {
79 | margin: 0;
80 | height: 150px;
81 | }
82 | .learn__more a{
83 | font-size: .7rem;
84 | }
85 | }
86 |
87 | @media only screen and (max-width:600px) {
88 | .blog__wrapper {
89 | flex-direction: column;
90 | gap: 1rem;
91 | }
92 | .blog__item, .blog__item:nth-child(2) {
93 | width: 75%;
94 | }
95 | .post__description {
96 | margin-top: 10px;
97 | }
98 | }
--------------------------------------------------------------------------------
/src/Components/Counter/Counter.tsx:
--------------------------------------------------------------------------------
1 | import CountUp from 'react-countup';
2 | import './counter.css';
3 |
4 | const counterData = [
5 | {
6 | number: 10,
7 | text: 'Happy clients',
8 | },
9 | {
10 | number: 350,
11 | text: 'Running projects',
12 | },
13 | {
14 | number: 1000,
15 | text: 'Projects Completed',
16 | },
17 | ];
18 |
19 | export const Counter = () => {
20 | return (
21 | {title}
21 |{category}
22 |
23 | 
24 |
25 | {description}
26 |
27 |
28 | Learn more...
29 |
30 |
31 |
23 |
39 |
24 | {counterData.map((i, idx) => (
25 |
38 |
26 |
27 |
34 |
36 | ))}
37 |
27 | 100 ? `+` : `K+`}
30 | separator=""
31 | enableScrollSpy={true}
32 | />
33 |
34 | {i.text}
35 |
100 |
137 |
101 |
136 |
102 |
106 | 103 | FutureMedia 104 |
105 |
111 |
125 | -
112 | {nav__links.map((i, idx) => (
113 |
- 114 | 119 | {i.display} 120 | 121 | 122 | ))} 123 |
126 |
135 |
127 |
130 |
131 |
132 |
133 |
134 |
18 |
63 |
19 |
62 |
27 |
48 |
28 |
32 | We're Creating Perfect
29 |Digital Products To
30 |Promote Your Brand
31 |33 | FutureMedia is a digital marketing agency that helps 34 | businesses grow online through services like SEO, social 35 | media marketing, and PPC advertising. We're dedicated to 36 | innovation and delivering results-driven strategies for 37 | our clients. 38 |
39 |
40 |
43 |
46 |
47 |
49 | 
60 |
61 |
10 |
47 |
11 |
46 |
12 |
45 | 19 | Be in the Know - 20 | 21 | {' '} 22 | Subscribe to Our Newsletter! 23 | 24 |
25 | 44 |
18 |
19 |
20 |
21 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/Components/Services/Services.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import { Card } from './Card';
3 | import './services.css';
4 | import { useInView } from 'framer-motion';
5 |
6 | const servicesData = [
7 | {
8 | icon: "ri-apps-line",
9 | title: "App Development",
10 | description: "It is the process of creating software applications for mobile devices that can range from simple applications designed for a specific purpose to complex apps with multiple features and integrations.",
11 | },
12 | {
13 | icon: "ri-code-s-slash-line",
14 | title: "Web Design",
15 | description: "A well-designed website can help businesses and organizations establish a strong online presence, improve user engagement, and increase conversions.",
16 | },
17 | {
18 | icon: "ri-landscape-line",
19 | title: "Graphics Design",
20 | description: "The goal of graphics design is to create visual content that is both aesthetically pleasing and informative, while also aligning with a brand's identity and marketing objectives.",
21 | },
22 | {
23 | icon: "ri-rocket-line",
24 | title: "Digital Marketing",
25 | description: "Digital marketing is promoting products or services using digital channels to reach and engage with target audiences, increase brand awareness, and drive conversions.",
26 | },
27 | ]
28 |
29 | export const Services = () => {
30 | const ref = useRef(null);
31 | const isInView = useInView(ref, { once: true });
32 | return (
33 | {title}
22 |{description}
23 |
35 |
46 |
36 |
40 | Our Services
37 |Save time managing your business with
38 |our best services
39 |
41 | {servicesData.map((i, idx) => (
42 |
45 |
27 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/src/Components/Team/Team.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import member1 from '../../images/team-01.png';
3 | import member2 from '../../images/team-02.png';
4 | import member3 from '../../images/team-03.png';
5 | import member4 from '../../images/team-04.png';
6 | import { Member } from './Member';
7 | import './team.css';
8 | import { useInView } from 'framer-motion';
9 |
10 | const teamData = [
11 | {
12 | image: member1,
13 | name: 'Ethan Garcia',
14 | position: 'SEO & Marketing Specialist',
15 | },
16 | {
17 | image: member2,
18 | name: 'Olivia Williams',
19 | position: 'Product Designer',
20 | },
21 | {
22 | image: member3,
23 | name: 'Lucas Patel',
24 | position: 'Software Engineer',
25 | },
26 | {
27 | image: member4,
28 | name: 'Sebastian Nguyen',
29 | position: 'CEO & Staff Developer',
30 | },
31 | ];
32 |
33 | export const Team = () => {
34 | const ref = useRef(null);
35 | const isInView = useInView(ref, { once: true });
36 | return (
37 |
28 | 
29 |
30 |
31 |
42 | {name}
32 |{position}
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
39 |
58 |
40 |
45 | Our Team
41 |42 | Meet our team 43 |
44 |
46 | {teamData.map((i, idx) => (
47 |
57 |
18 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/Components/Testimonial/Testimonial.tsx:
--------------------------------------------------------------------------------
1 | import { useInView } from 'framer-motion';
2 | import { useRef } from 'react';
3 | import Slider from 'react-slick';
4 | import customer1 from '../../images/ava-1.jpg';
5 | import customer2 from '../../images/ava-2.jpg';
6 | import customer3 from '../../images/ava-3.jpg';
7 | import { CustomerSlide } from './CustomerSlide';
8 | import './testimonial.css';
9 |
10 | const customerData = [
11 | {
12 | name: 'John Lee',
13 | description: `"I cannot recommend FutureMedia highly enough! As the CEO of a large corporation, I was initially hesitant to work with an external agency. However, the team at FutureMedia quickly put my fears to rest. They were professional, efficient, and most importantly, delivered results. Their expertise in digital marketing helped us to increase our online presence and generate more leads than ever before. I will definitely be using FutureMedia for all my marketing needs in the future!"`,
14 | image: customer1,
15 | position: 'CEO, DreamMakers',
16 | },
17 | {
18 | name: 'Sarah Thompson',
19 | description: `"I am so glad that we chose FutureMedia as our marketing agency! From the very beginning, they took the time to understand our business goals and develop a customized strategy that would help us achieve them. Their team is always available to answer questions and provide updates, and they have been instrumental in helping us to build brand awareness and drive more traffic to our website. Thanks to their hard work and dedication, we have been able to grow our business and reach new customers. I would highly recommend FutureMedia to any CEO looking for a reliable and effective marketing partner."`,
20 | image: customer2,
21 | position: 'CEO, WonderSon',
22 | },
23 | {
24 | name: 'Alexander Ramirez',
25 | description: `"FutureMedia is simply the best marketing agency out there! As a CEO, I have worked with several different agencies over the years, but none have matched the level of expertise and commitment that FutureMedia brings to the table. Their team is dedicated, creative, and always willing to go the extra mile to ensure that our campaigns are a success. Thanks to their efforts, we have seen a significant increase in traffic and conversions on our website. I would highly recommend FutureMedia to any business looking to take their marketing to the next level."`,
26 | image: customer3,
27 | position: 'CEO, RamiTech',
28 | },
29 | ];
30 |
31 | export const Testimonial = () => {
32 | const settings = {
33 | infinite: true,
34 | speed: 1000,
35 | autoplay: true,
36 | autoplaySpeed: 5000,
37 | slidesToShow: 1,
38 | };
39 |
40 | const ref = useRef(null);
41 | const isInView = useInView(ref, { once: true });
42 |
43 | return (
44 | {description}
19 |
20 |
28 |
21 |
22 |
23 |
24 |
27 | {name}
25 |{position}
26 |
53 |
74 |
54 |
60 | Testimonials
55 |56 | Trusted by more than 57 | 500 customers!{' '} 58 |
59 |
61 |
62 | {customerData.map((i, idx) => (
63 |
72 |
73 |