├── src ├── views │ ├── home │ │ ├── index.js │ │ └── home.js │ ├── projectDetails │ │ └── index.js │ ├── sMediaService │ │ └── index.js │ ├── services │ │ └── index.js │ ├── contactUs │ │ └── index.js │ ├── individualService │ │ └── index.js │ └── aboutUs │ │ └── index.js ├── components │ ├── AboutUs │ │ ├── Top │ │ │ ├── index.js │ │ │ ├── Top.js │ │ │ └── Top.module.css │ │ ├── Bottom │ │ │ ├── index.js │ │ │ ├── Bottom.js │ │ │ ├── Bottom.module.css │ │ │ └── fakeData.js │ │ └── Middle │ │ │ ├── index.js │ │ │ ├── Middle.module.css │ │ │ └── Middle.js │ ├── Real │ │ ├── index.js │ │ ├── Real.js │ │ └── Real.module.css │ ├── Banner │ │ ├── index.js │ │ ├── Banner.js │ │ └── Banner.module.css │ ├── Footer │ │ ├── index.js │ │ ├── Footer.module.css │ │ └── Footer.js │ ├── CaseStudy │ │ ├── index.js │ │ ├── fakeData.js │ │ ├── CaseStudy.module.css │ │ └── CaseStudy.js │ ├── ChoosingUs │ │ ├── index.js │ │ ├── ChoosingUs.module.css │ │ └── ChoosingUs.js │ ├── Services │ │ ├── index.js │ │ ├── Services.js │ │ ├── Services.module.css │ │ └── data.js │ ├── SubBanner │ │ ├── index.js │ │ ├── SubBanner.js │ │ └── SubBanner.module.css │ ├── AboutUsHome │ │ ├── index.js │ │ ├── AboutUsHome.js │ │ └── AboutUsHome.module.css │ ├── Testimonial │ │ ├── index.js │ │ ├── style.css │ │ ├── fakeData.js │ │ ├── Testimonial.module.css │ │ └── Testimonial.js │ ├── NavbarMain │ │ ├── index.js │ │ ├── data │ │ │ └── urls.js │ │ ├── NavbarMain.module.css │ │ └── NavbarMain.js │ ├── ServiceHome │ │ ├── index.js │ │ ├── ServiceHome.js │ │ └── ServiceHome.module.css │ ├── ServicesHome │ │ ├── index.js │ │ ├── ServicesHome.module.css │ │ ├── ServicesHome.js │ │ └── data.js │ ├── ContactUsForm │ │ ├── index.js │ │ ├── ContactUsForm.module.css │ │ └── ContactUsForm.js │ ├── ProjectDetails │ │ ├── index.js │ │ ├── OtherProjects │ │ │ ├── index.js │ │ │ ├── styles.css │ │ │ ├── OtherProjects.module.css │ │ │ ├── fakeData.js │ │ │ └── OtherProjects.js │ │ ├── ProjectDetails.module.css │ │ ├── ProjectDetails.js │ │ └── fakeData.js │ ├── IndividualService │ │ ├── index.js │ │ ├── IndividualService.module.css │ │ ├── IndividualService.js │ │ └── data.js │ ├── ScrollToTop │ │ └── ScrollToTop.js │ └── SMediaServices │ │ ├── SMediaServices.js │ │ └── SMediaServices.module.css ├── assets │ ├── home │ │ ├── seo.png │ │ ├── web.png │ │ ├── insta.png │ │ ├── about1.png │ │ ├── about2.png │ │ ├── about3.png │ │ ├── comfort.png │ │ ├── facebook.png │ │ ├── improves.png │ │ ├── linkdin.png │ │ ├── experience.png │ │ ├── communication.png │ │ ├── testimonial1.png │ │ ├── testimonial2.png │ │ └── testimonial3.png │ ├── background.png │ ├── subBanner.jpg │ ├── aboutUs │ │ ├── img1.png │ │ ├── img2.png │ │ ├── banner.png │ │ ├── bottom1.png │ │ ├── bottom2.png │ │ ├── middle1.png │ │ ├── middle2.png │ │ └── middle3.png │ ├── caseStudy │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── gradient.png │ ├── sMediaService │ │ ├── main.png │ │ ├── bottom.png │ │ ├── middle.png │ │ ├── Mask_2@3x.png │ │ ├── bottom1.png │ │ └── middle1.png │ ├── projectDetails │ │ ├── card.png │ │ ├── banner.png │ │ ├── project1.png │ │ ├── project2.png │ │ ├── project4.png │ │ ├── testimonial1.png │ │ ├── testimonial2.png │ │ └── testimonial3.png │ └── individualService │ │ ├── Image.png │ │ ├── det.png │ │ ├── timer.png │ │ ├── tren.png │ │ └── Image_2.png ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── index.js ├── router │ └── route.js ├── App.css └── App.js ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/views/home/index.js: -------------------------------------------------------------------------------- 1 | import Home from './home'; 2 | export default Home; -------------------------------------------------------------------------------- /src/components/AboutUs/Top/index.js: -------------------------------------------------------------------------------- 1 | import Top from "./Top"; 2 | export default Top; -------------------------------------------------------------------------------- /src/components/Real/index.js: -------------------------------------------------------------------------------- 1 | import Real from './Real'; 2 | export default Real; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/components/Banner/index.js: -------------------------------------------------------------------------------- 1 | import Banner from './Banner'; 2 | export default Banner; -------------------------------------------------------------------------------- /src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from "./Footer"; 2 | export default Footer; -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/home/seo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/seo.png -------------------------------------------------------------------------------- /src/assets/home/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/web.png -------------------------------------------------------------------------------- /src/components/AboutUs/Bottom/index.js: -------------------------------------------------------------------------------- 1 | import Bottom from './Bottom'; 2 | export default Bottom; -------------------------------------------------------------------------------- /src/components/AboutUs/Middle/index.js: -------------------------------------------------------------------------------- 1 | import Middle from "./Middle"; 2 | export default Middle; -------------------------------------------------------------------------------- /src/assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/background.png -------------------------------------------------------------------------------- /src/assets/home/insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/insta.png -------------------------------------------------------------------------------- /src/assets/subBanner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/subBanner.jpg -------------------------------------------------------------------------------- /src/components/CaseStudy/index.js: -------------------------------------------------------------------------------- 1 | import CaseStudy from './CaseStudy'; 2 | export default CaseStudy; -------------------------------------------------------------------------------- /src/components/ChoosingUs/index.js: -------------------------------------------------------------------------------- 1 | import ChoosingUs from './ChoosingUs'; 2 | export default ChoosingUs; -------------------------------------------------------------------------------- /src/components/Services/index.js: -------------------------------------------------------------------------------- 1 | import Services from "./Services"; 2 | 3 | export default Services; -------------------------------------------------------------------------------- /src/components/SubBanner/index.js: -------------------------------------------------------------------------------- 1 | import SubBanner from './SubBanner'; 2 | export default SubBanner; -------------------------------------------------------------------------------- /src/assets/aboutUs/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/img1.png -------------------------------------------------------------------------------- /src/assets/aboutUs/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/img2.png -------------------------------------------------------------------------------- /src/assets/caseStudy/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/caseStudy/1.png -------------------------------------------------------------------------------- /src/assets/caseStudy/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/caseStudy/2.png -------------------------------------------------------------------------------- /src/assets/caseStudy/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/caseStudy/3.png -------------------------------------------------------------------------------- /src/assets/caseStudy/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/caseStudy/4.png -------------------------------------------------------------------------------- /src/assets/home/about1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/about1.png -------------------------------------------------------------------------------- /src/assets/home/about2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/about2.png -------------------------------------------------------------------------------- /src/assets/home/about3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/about3.png -------------------------------------------------------------------------------- /src/assets/home/comfort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/comfort.png -------------------------------------------------------------------------------- /src/assets/home/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/facebook.png -------------------------------------------------------------------------------- /src/assets/home/improves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/improves.png -------------------------------------------------------------------------------- /src/assets/home/linkdin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/linkdin.png -------------------------------------------------------------------------------- /src/components/AboutUsHome/index.js: -------------------------------------------------------------------------------- 1 | import AboutUsHome from './AboutUsHome' 2 | export default AboutUsHome -------------------------------------------------------------------------------- /src/components/Testimonial/index.js: -------------------------------------------------------------------------------- 1 | import Testimonial from "./Testimonial"; 2 | export default Testimonial; -------------------------------------------------------------------------------- /src/assets/aboutUs/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/banner.png -------------------------------------------------------------------------------- /src/assets/aboutUs/bottom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/bottom1.png -------------------------------------------------------------------------------- /src/assets/aboutUs/bottom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/bottom2.png -------------------------------------------------------------------------------- /src/assets/aboutUs/middle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/middle1.png -------------------------------------------------------------------------------- /src/assets/aboutUs/middle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/middle2.png -------------------------------------------------------------------------------- /src/assets/aboutUs/middle3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/aboutUs/middle3.png -------------------------------------------------------------------------------- /src/assets/home/experience.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/experience.png -------------------------------------------------------------------------------- /src/components/NavbarMain/index.js: -------------------------------------------------------------------------------- 1 | import NavbarMain from "./NavbarMain"; 2 | 3 | export default NavbarMain; 4 | -------------------------------------------------------------------------------- /src/components/ServiceHome/index.js: -------------------------------------------------------------------------------- 1 | import ServicesHome from "../ServicesHome"; 2 | export default ServicesHome; -------------------------------------------------------------------------------- /src/assets/caseStudy/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/caseStudy/gradient.png -------------------------------------------------------------------------------- /src/assets/home/communication.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/communication.png -------------------------------------------------------------------------------- /src/assets/home/testimonial1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/testimonial1.png -------------------------------------------------------------------------------- /src/assets/home/testimonial2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/testimonial2.png -------------------------------------------------------------------------------- /src/assets/home/testimonial3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/home/testimonial3.png -------------------------------------------------------------------------------- /src/assets/sMediaService/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/sMediaService/main.png -------------------------------------------------------------------------------- /src/components/ServicesHome/index.js: -------------------------------------------------------------------------------- 1 | import ServicesHome from "./ServicesHome"; 2 | 3 | export default ServicesHome; -------------------------------------------------------------------------------- /src/assets/projectDetails/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/card.png -------------------------------------------------------------------------------- /src/assets/sMediaService/bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/sMediaService/bottom.png -------------------------------------------------------------------------------- /src/assets/sMediaService/middle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/sMediaService/middle.png -------------------------------------------------------------------------------- /src/components/ContactUsForm/index.js: -------------------------------------------------------------------------------- 1 | import ContactUsForm from "./ContactUsForm"; 2 | 3 | export default ContactUsForm; -------------------------------------------------------------------------------- /src/components/ProjectDetails/index.js: -------------------------------------------------------------------------------- 1 | import ProjectDetails from "./ProjectDetails"; 2 | export default ProjectDetails; -------------------------------------------------------------------------------- /src/assets/individualService/Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/individualService/Image.png -------------------------------------------------------------------------------- /src/assets/individualService/det.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/individualService/det.png -------------------------------------------------------------------------------- /src/assets/individualService/timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/individualService/timer.png -------------------------------------------------------------------------------- /src/assets/individualService/tren.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/individualService/tren.png -------------------------------------------------------------------------------- /src/assets/projectDetails/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/banner.png -------------------------------------------------------------------------------- /src/assets/projectDetails/project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/project1.png -------------------------------------------------------------------------------- /src/assets/projectDetails/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/project2.png -------------------------------------------------------------------------------- /src/assets/projectDetails/project4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/project4.png -------------------------------------------------------------------------------- /src/assets/sMediaService/Mask_2@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/sMediaService/Mask_2@3x.png -------------------------------------------------------------------------------- /src/assets/sMediaService/bottom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/sMediaService/bottom1.png -------------------------------------------------------------------------------- /src/assets/sMediaService/middle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/sMediaService/middle1.png -------------------------------------------------------------------------------- /src/assets/individualService/Image_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/individualService/Image_2.png -------------------------------------------------------------------------------- /src/components/IndividualService/index.js: -------------------------------------------------------------------------------- 1 | import IndividualService from "./IndividualService"; 2 | export default IndividualService; -------------------------------------------------------------------------------- /src/components/ProjectDetails/OtherProjects/index.js: -------------------------------------------------------------------------------- 1 | import OtherProjects from './OtherProjects'; 2 | export default OtherProjects; -------------------------------------------------------------------------------- /src/assets/projectDetails/testimonial1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/testimonial1.png -------------------------------------------------------------------------------- /src/assets/projectDetails/testimonial2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/testimonial2.png -------------------------------------------------------------------------------- /src/assets/projectDetails/testimonial3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mirrahat/miritus/HEAD/src/assets/projectDetails/testimonial3.png -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/Testimonial/style.css: -------------------------------------------------------------------------------- 1 | .react-multi-carousel-dot > button{ 2 | background-color: #6f6d71; 3 | border: 0px !important; 4 | width: 10px !important; 5 | height: 10px !important; 6 | } 7 | .react-multi-carousel-dot--active > button{ 8 | background-color: #f64f59 !important; 9 | } -------------------------------------------------------------------------------- /src/components/ProjectDetails/OtherProjects/styles.css: -------------------------------------------------------------------------------- 1 | .react-multi-carousel-dot > button{ 2 | background-color: #ff4b0a62; 3 | border: 0px !important; 4 | width: 10px !important; 5 | height: 10px !important; 6 | } 7 | .react-multi-carousel-dot--active > button{ 8 | background-color: #ff4c0a !important; 9 | } -------------------------------------------------------------------------------- /src/components/ScrollToTop/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | 4 | export default function ScrollToTop() { 5 | const { pathname } = useLocation(); 6 | 7 | useEffect(() => { 8 | window.scrollTo(0, 0); 9 | }, [pathname]); 10 | 11 | return null; 12 | } -------------------------------------------------------------------------------- /src/components/NavbarMain/data/urls.js: -------------------------------------------------------------------------------- 1 | const navUrls = [ 2 | { 3 | url: "/", 4 | text: "Home", 5 | }, 6 | { 7 | url: "/about", 8 | text: "About Us", 9 | }, 10 | { 11 | url: "/Services", 12 | text: "Services", 13 | }, 14 | { 15 | url: "/contact", 16 | text: "Contact", 17 | }, 18 | ]; 19 | 20 | export default navUrls; 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/views/projectDetails/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ProjectDetails from '../../components/ProjectDetails'; 3 | import Footer from "../../components/Footer"; 4 | 5 | const individualServices = () => { 6 | return ( 7 | <> 8 | {/* Banner Section */} 9 |
10 | 11 |
12 | 13 | {/* Footer Section */} 14 |
15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export default individualServices; -------------------------------------------------------------------------------- /src/views/sMediaService/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Footer from "../../components/Footer"; 3 | import SMediaServices from '../../components/SMediaServices/SMediaServices'; 4 | const sMediaServices = () => { 5 | 6 | return ( 7 | <> 8 | {/* Footer Section */} 9 |
10 | 11 |
12 | 13 | {/* Footer Section */} 14 |
15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export default sMediaServices; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Banner/Banner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Banner.module.css'; 3 | 4 | const Banner = () => { 5 | 6 | return ( 7 | <> 8 |
9 |
10 |

We are the solutions provider for all home

11 | 12 |
13 | 14 |
15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Banner; 21 | -------------------------------------------------------------------------------- /src/components/SubBanner/SubBanner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './SubBanner.module.css'; 3 | 4 | const SubBanner = ({heading, subHeading, img}) => { 5 | 6 | return ( 7 | <> 8 |
9 |
10 |

{heading}

11 |

{subHeading}

12 |
13 |
14 | 15 | 16 | ); 17 | }; 18 | 19 | export default SubBanner; 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | // Importing the Bootstrap CSS 8 | import 'bootstrap/dist/css/bootstrap.min.css'; 9 | 10 | ReactDOM.render( 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/views/services/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SubBanner from '../../components/SubBanner'; 3 | import Services from '../../components/Services'; 4 | import Footer from "../../components/Footer"; 5 | import bg from '../../assets/subBanner.jpg'; 6 | 7 | const ServicesHome = () => { 8 | 9 | return ( 10 | <> 11 | {/* Banner Section */} 12 |
13 | 14 |
15 | 16 | {/* Services Section */} 17 |
18 | 19 |
20 | 21 | {/* Footer Section */} 22 |
23 |
24 |
25 | 26 | ); 27 | }; 28 | 29 | export default ServicesHome; -------------------------------------------------------------------------------- /src/views/contactUs/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SubBanner from '../../components/SubBanner'; 3 | import ContactUsForm from "../../components/ContactUsForm"; 4 | import Footer from "../../components/Footer"; 5 | import bg from '../../assets/subBanner.jpg'; 6 | 7 | const ServicesHome = () => { 8 | return ( 9 | <> 10 | {/* Banner Section */} 11 |
12 | 13 |
14 | 15 | {/* Form Section */} 16 |
17 | 18 |
19 | 20 | {/* Footer Section */} 21 |
22 |
23 |
24 | 25 | ); 26 | }; 27 | 28 | export default ServicesHome; -------------------------------------------------------------------------------- /src/views/individualService/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SubBanner from '../../components/SubBanner'; 3 | import Footer from "../../components/Footer"; 4 | import bg from '../../assets/subBanner.jpg'; 5 | import IndividualService from "../../components/IndividualService"; 6 | 7 | const individualServices = () => { 8 | return ( 9 | <> 10 | {/* Banner Section */} 11 |
12 | 13 |
14 | 15 | {/* Services Section */} 16 |
17 | 18 |
19 | 20 | {/* Footer Section */} 21 |
22 |
23 |
24 | 25 | ); 26 | }; 27 | 28 | export default individualServices; -------------------------------------------------------------------------------- /src/components/ServiceHome/ServiceHome.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./ServiceHome.module.css"; 3 | import { Link } from "react-router-dom"; 4 | import { HiOutlineArrowNarrowRight } from "react-icons/hi"; 5 | 6 | const ServiceHome = (props) => { 7 | return ( 8 |
9 | 10 |

{props.heading}

11 |

{props.content}

12 | 13 | 18 | 19 |
20 | ); 21 | }; 22 | export default ServiceHome; 23 | -------------------------------------------------------------------------------- /src/views/aboutUs/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import bg from '../../assets/aboutUs/banner.png'; 3 | import SubBanner from '../../components/SubBanner'; 4 | import Footer from "../../components/Footer"; 5 | import Top from "../../components/AboutUs/Top"; 6 | import Middle from "../../components/AboutUs/Middle"; 7 | import Bottom from "../../components/AboutUs/Bottom"; 8 | 9 | const aboutUs = () => { 10 | return ( 11 | <> 12 | {/* Banner Section */} 13 |
14 | 15 |
16 | 17 | {/* Top Section */} 18 |
19 | 20 |
21 | 22 | {/* Middle Section */} 23 |
24 | 25 |
26 | 27 | {/* Bottom Section */} 28 |
29 | 30 |
31 | 32 | {/* Footer Section */} 33 |
34 |
35 |
36 | 37 | ); 38 | }; 39 | 40 | export default aboutUs; -------------------------------------------------------------------------------- /src/router/route.js: -------------------------------------------------------------------------------- 1 | import Home from "../views/home"; 2 | import Service from "../views/services"; 3 | import ContactUs from '../views/contactUs'; 4 | import IndividualService from "../views/individualService"; 5 | import AboutUs from '../views/aboutUs'; 6 | import ProjectDetails from "../views/projectDetails"; 7 | import SMediaService from '../views/sMediaService'; 8 | 9 | const routes = [ 10 | { 11 | components: , 12 | to: '/' 13 | }, 14 | { 15 | components: , 16 | to: '/services' 17 | }, 18 | { 19 | components: , 20 | to: '/contactUs' 21 | }, 22 | { 23 | components: , 24 | to: '/individualService' 25 | }, 26 | { 27 | components: , 28 | to: '/aboutUs' 29 | }, 30 | { 31 | components: , 32 | to: '/projectDetails' 33 | }, 34 | { 35 | components: , 36 | to: '/sMediaService' 37 | } 38 | ]; 39 | 40 | export default routes; -------------------------------------------------------------------------------- /src/components/Services/Services.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Services.module.css'; 3 | import ServiceHome from "../ServiceHome/ServiceHome"; 4 | import data from './data'; 5 | 6 | const Services = () => { 7 | return( 8 |
9 |

Services

10 |
11 |

Modernize your workflow and maximize result

12 |
13 | 14 |
15 | { 16 | data && data.map(x=>( 17 |
18 | 19 |
20 | )) 21 | } 22 |
23 |
24 | ) 25 | } 26 | export default Services; -------------------------------------------------------------------------------- /src/components/Services/Services.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | margin-top: 83px; 3 | margin-bottom: 174px; 4 | } 5 | .cont{ 6 | padding-left: 60px; 7 | padding-right: 60px; 8 | padding-bottom: 20px; 9 | } 10 | .heading{ 11 | font-size: 30px; 12 | color: #ff4c0a; 13 | font-weight: 500; 14 | } 15 | .subHeading{ 16 | font-size: 34px; 17 | font-weight: bold; 18 | color: #222a41; 19 | width: 645px; 20 | } 21 | 22 | @media screen and (max-width: 1200px) { 23 | .cont{ 24 | padding-left: 30px; 25 | padding-right: 30px; 26 | } 27 | } 28 | 29 | @media screen and (max-width: 770px) { 30 | .subHeading{ 31 | font-size: 25px; 32 | width: auto; 33 | } 34 | .heading{ 35 | font-size: 20px; 36 | } 37 | } 38 | 39 | @media screen and (max-width: 430px) { 40 | .subHeading{ 41 | font-size: 20px; 42 | } 43 | .heading{ 44 | font-size: 17px; 45 | } 46 | .contain{ 47 | margin-top: 80px; 48 | margin-bottom: 100px; 49 | } 50 | } 51 | @media screen and (max-width: 380px) { 52 | .cont{ 53 | padding-left: 10px; 54 | padding-right: 10px; 55 | } 56 | } -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | .custom_btn{ 32 | background-color: #ff4c0a !important; 33 | border-radius: 0px !important; 34 | color: white !important; 35 | } 36 | .custom_btn:hover{ 37 | background-color: #ff4400 !important; 38 | } 39 | 40 | .dropdown-toggle::after{ 41 | display: none !important; 42 | } 43 | 44 | @keyframes App-logo-spin { 45 | from { 46 | transform: rotate(0deg); 47 | } 48 | to { 49 | transform: rotate(360deg); 50 | } 51 | } 52 | 53 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&display=swap'); 54 | 55 | body, html { 56 | font-family: 'Poppins', sans-serif; 57 | } 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "miritus-website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "aos": "^3.0.0-beta.6", 10 | "bootstrap": "^5.1.3", 11 | "google-maps-react": "^2.0.6", 12 | "react": "^17.0.2", 13 | "react-bootstrap": "^2.1.0", 14 | "react-dom": "^17.0.2", 15 | "react-icons": "^4.3.1", 16 | "react-multi-carousel": "^2.6.5", 17 | "react-router-dom": "^6.2.1", 18 | "react-scripts": "5.0.0", 19 | "web-vitals": "^2.1.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/ServicesHome/ServicesHome.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | margin-top: 130px; 3 | margin-bottom: 130px; 4 | padding-left: 60px !important; 5 | padding-right: 60px !important; 6 | } 7 | 8 | .heading{ 9 | font-size: 30px; 10 | color: #ff4c0a; 11 | font-weight: 500; 12 | } 13 | .subHeading{ 14 | font-size: 34px; 15 | font-weight: bold; 16 | color: #222a41; 17 | width: 645px; 18 | } 19 | 20 | @media screen and (max-width: 1200px) { 21 | .contain{ 22 | margin-top: 80px; 23 | margin-bottom: 80px; 24 | padding-left: 40px !important; 25 | padding-right: 40px !important; 26 | } 27 | } 28 | 29 | @media screen and (max-width: 770px) { 30 | .subHeading{ 31 | font-size: 25px; 32 | width: auto; 33 | } 34 | .heading{ 35 | font-size: 20px; 36 | } 37 | } 38 | 39 | @media screen and (max-width: 430px) { 40 | .subHeading{ 41 | font-size: 20px; 42 | } 43 | .heading{ 44 | font-size: 17px; 45 | } 46 | .contain{ 47 | margin-top: 80px; 48 | margin-bottom: 100px; 49 | } 50 | } 51 | @media screen and (max-width: 380px) { 52 | .contain{ 53 | padding-left: 20px !important; 54 | padding-right: 20px !important; 55 | } 56 | } -------------------------------------------------------------------------------- /src/components/ProjectDetails/OtherProjects/OtherProjects.module.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin-top: 0px; 3 | margin-bottom: 0px; 4 | } 5 | .box{ 6 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 7 | margin-top: 7px; 8 | margin-bottom: 60px; 9 | padding: 15px 10px 15px 15px; 10 | border-radius: 25px; 11 | cursor: pointer; 12 | 13 | -webkit-user-select: none; 14 | -khtml-user-select: none; 15 | -moz-user-select: none; 16 | -ms-user-select: none; 17 | -o-user-select: none; 18 | user-select: none; 19 | } 20 | 21 | .img{ 22 | border-radius: 20px; 23 | width: 90%; 24 | height: auto; 25 | 26 | } 27 | 28 | .title{ 29 | font-size: 20px; 30 | font-weight: bold; 31 | color: #010101; 32 | text-align: left; 33 | margin-bottom: 10px; 34 | } 35 | .content{ 36 | color: #6f6d71; 37 | text-align: left; 38 | font-size: 16px; 39 | } 40 | @media screen and (max-width: 1200px) { 41 | .title{ 42 | font-size: 18px; 43 | margin-bottom: 5px; 44 | } 45 | .content{ 46 | font-size: 15px; 47 | } 48 | 49 | } 50 | @media screen and (max-width: 768px) { 51 | .title{ 52 | text-align: center; 53 | margin-top: 20px; 54 | } 55 | .content{ 56 | text-align: center; 57 | } 58 | } -------------------------------------------------------------------------------- /src/components/CaseStudy/fakeData.js: -------------------------------------------------------------------------------- 1 | import img1 from '../../assets/caseStudy/1.png'; 2 | import img2 from '../../assets/caseStudy/2.png'; 3 | import img3 from '../../assets/caseStudy/3.png'; 4 | import img4 from '../../assets/caseStudy/4.png'; 5 | 6 | const fakeData = [ 7 | { 8 | id: 1, 9 | designation: 'Marketing, SEO', 10 | title: 'Dicta Sunt Explicabo', 11 | img: img1, 12 | category: 'financial' 13 | }, 14 | { 15 | id: 2, 16 | designation: 'Marketing, SEO', 17 | title: 'Dicta Sunt Explicabo', 18 | img: img2, 19 | category: 'human resources' 20 | }, 21 | { 22 | id: 3, 23 | designation: 'Marketing, SEO', 24 | title: 'Dicta Sunt Explicabo', 25 | img: img3, 26 | category: 'start up' 27 | }, 28 | { 29 | id: 4, 30 | designation: 'Marketing, SEO', 31 | title: 'Dicta Sunt Explicabo', 32 | img: img4, 33 | category: 'strategy' 34 | }, 35 | { 36 | id: 5, 37 | designation: 'Marketing, SEO', 38 | title: 'Dicta Sunt Explicabo', 39 | img: img1, 40 | category: 'financial' 41 | }, 42 | { 43 | id: 6, 44 | designation: 'Marketing, SEO', 45 | title: 'Dicta Sunt Explicabo', 46 | img: img2, 47 | category: 'human resources' 48 | } 49 | ] 50 | export default fakeData; -------------------------------------------------------------------------------- /src/components/ServicesHome/ServicesHome.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./ServicesHome.module.css"; 3 | import ServiceHome from "../ServiceHome/ServiceHome"; 4 | import data from "./data"; 5 | 6 | const ServicesHome = () => { 7 | return ( 8 |
9 |

10 | Services 11 |

12 |
13 |

17 | Modernize your workflow and maximize result 18 |

19 |
20 | 21 |
22 | {data && 23 | data.map((x) => ( 24 |
25 | 32 |
33 | ))} 34 |
35 |
36 | ); 37 | }; 38 | export default ServicesHome; 39 | -------------------------------------------------------------------------------- /src/components/ProjectDetails/OtherProjects/fakeData.js: -------------------------------------------------------------------------------- 1 | import image1 from '../../../assets/projectDetails/testimonial1.png'; 2 | import image2 from '../../../assets/projectDetails/testimonial2.png'; 3 | import image3 from '../../../assets/projectDetails/testimonial2.png'; 4 | 5 | export const fakeData = [ 6 | { 7 | id: 1, 8 | img: image1, 9 | title: 'Profesional', 10 | content: 'Amet minim mollit non deserunt ullamco est sit aliqua minim mollit.' 11 | }, 12 | { 13 | id: 2, 14 | img: image2, 15 | title: 'Profesional', 16 | content: 'Amet minim mollit non deserunt ullamco est sit aliqua minim mollit.' 17 | }, 18 | { 19 | id: 3, 20 | img: image3, 21 | title: 'Profesional', 22 | content: 'Amet minim mollit non deserunt ullamco est sit aliqua minim mollit.' 23 | }, 24 | { 25 | id: 4, 26 | img: image1, 27 | title: 'Profesional', 28 | content: 'Amet minim mollit non deserunt ullamco est sit aliqua minim mollit.' 29 | }, 30 | { 31 | id: 5, 32 | img: image2, 33 | title: 'Profesional', 34 | content: 'Amet minim mollit non deserunt ullamco est sit aliqua minim mollit.' 35 | }, 36 | { 37 | id: 6, 38 | img: image3, 39 | title: 'Profesional', 40 | content: 'Amet minim mollit non deserunt ullamco est sit aliqua minim mollit.' 41 | }, 42 | ] -------------------------------------------------------------------------------- /src/components/ServiceHome/ServiceHome.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 3 | padding-top: 75px; 4 | padding-bottom: 60px; 5 | padding-left: 10px; 6 | padding-right: 10px; 7 | margin-top: 24px; 8 | height: 400px; 9 | } 10 | .box:hover{ 11 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 12 | transform: scale(1.02); 13 | transition: .5s ease; 14 | } 15 | .heading{ 16 | font-size: 24px; 17 | color: #222a41; 18 | font-weight: bold; 19 | margin-top: 20px; 20 | } 21 | .text{ 22 | font-size: 18px; 23 | color: #6d7783; 24 | /* width: 80%; */ 25 | margin-left: auto; 26 | margin-right: auto; 27 | } 28 | .to{ 29 | cursor: pointer; 30 | top: 00px; 31 | } 32 | .to:hover{ 33 | transform: scale(1.1); 34 | } 35 | 36 | @media screen and (max-width: 1000px) { 37 | .heading{ 38 | font-size: 20px; 39 | } 40 | .text{ 41 | font-size: 16px; 42 | } 43 | 44 | } 45 | @media screen and (max-width: 992px) { 46 | .box{ 47 | height: 400px; 48 | } 49 | } 50 | 51 | @media screen and (max-width: 768px) { 52 | .box{ 53 | padding-right: 20px; 54 | padding-left: 20px; 55 | height: 350px; 56 | } 57 | } 58 | 59 | @media screen and (max-width: 410px) { 60 | .heading{ 61 | font-size: 18px; 62 | } 63 | .text{ 64 | font-size: 14px; 65 | } 66 | } -------------------------------------------------------------------------------- /src/views/home/home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Banner from '../../components/Banner'; 3 | import ChoosingUs from "../../components/ChoosingUs"; 4 | import ServicesHome from "../../components/ServicesHome"; 5 | import CaseStudy from "../../components/CaseStudy"; 6 | import Real from "../../components/Real"; 7 | import Footer from "../../components/Footer"; 8 | import AboutUsHome from "../../components/AboutUsHome"; 9 | import Testimonial from "../../components/Testimonial"; 10 | 11 | 12 | const Home = () => { 13 | return ( 14 | <> 15 | {/* Banner Section */} 16 |
17 | 18 |
19 | 20 | {/* About Us Section */} 21 |
22 | 23 |
24 | 25 | {/* Why Choosing Us Section */} 26 |
27 | 28 |
29 | 30 | {/* Services Section */} 31 |
32 | 33 |
34 | 35 | {/* Case Study Section */} 36 |
37 | 38 |
39 | 40 | {/* Real Section */} 41 |
42 | 43 |
44 | 45 | {/* Testimonial Section */} 46 |
47 | 48 |
49 | 50 | {/* Footer Section */} 51 |
52 |
53 |
54 | 55 | ); 56 | }; 57 | 58 | export default Home; -------------------------------------------------------------------------------- /src/components/NavbarMain/NavbarMain.module.css: -------------------------------------------------------------------------------- 1 | .nav_text{ 2 | font-size: 16px; 3 | color: #111111 !important; 4 | width: 120px; 5 | 6 | } 7 | .nav_text:hover{ 8 | padding-top: 6px; 9 | font-size: 18px; 10 | color: #ff4c0a !important; 11 | font-weight: bold; 12 | } 13 | .active{ 14 | padding-top: 6px !important; 15 | font-size: 18px; 16 | color: #ff4c0a !important; 17 | font-weight: bold; 18 | } 19 | 20 | .drop{ 21 | width: 120px; 22 | } 23 | 24 | .drop:hover .nav_text{ 25 | color: #ff4c0a !important; 26 | font-weight: bold; 27 | cursor: pointer; 28 | font-size: 18px; 29 | /* padding-top: 7px; */ 30 | } 31 | .logo{ 32 | color: #ff4c0a !important; 33 | font-weight: bold; 34 | font-family: 'Montserrat', sans-serif; 35 | font-size: 40px !important; 36 | } 37 | .dropdownText{ 38 | text-decoration: none; 39 | color: #111111; 40 | } 41 | 42 | .dropdownItem:hover .dropdownText{ 43 | color: #ff4c0a; 44 | } 45 | .drop a:hover{ 46 | background-color: white; 47 | } 48 | 49 | 50 | @media screen and (max-width: 991px) { 51 | .dropdownItem{ 52 | text-align: center !important; 53 | } 54 | .nav_text{ 55 | width: auto; 56 | padding-top: 0px; 57 | } 58 | .drop{ 59 | width: auto; 60 | } 61 | .logo{ 62 | font-size: 35px !important; 63 | } 64 | } 65 | 66 | @media screen and (max-width: 600px) { 67 | .logo{ 68 | font-size: 25px !important; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/IndividualService/IndividualService.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | margin-top: 125px; 3 | margin-bottom: 125px; 4 | } 5 | .heading{ 6 | font-size: 40px; 7 | font-family: 'Poppins'; 8 | color: #212121; 9 | margin-bottom: 0px; 10 | } 11 | .heading_content{ 12 | font-size: 18px; 13 | font-family: 'Poppins'; 14 | color: #444554; 15 | margin-bottom: 0px; 16 | } 17 | .logo_head{ 18 | font-size: 22px; 19 | color: #212121; 20 | margin-top: 35px; 21 | margin-bottom: 21px; 22 | } 23 | .img{ 24 | margin-top: 67px; 25 | } 26 | .contentImg{ 27 | width: 80%; 28 | } 29 | .subHead{ 30 | margin-top: 60px; 31 | margin-bottom: 60px; 32 | text-align: left; 33 | } 34 | .justify{ 35 | text-align: justify; 36 | } 37 | 38 | @media screen and (max-width:1200px){ 39 | .contentImg{ 40 | width: 90%; 41 | } 42 | .heading{ 43 | font-size: 30px; 44 | } 45 | .subHead{ 46 | margin-top: 40px; 47 | margin-bottom: 40px; 48 | } 49 | .heading_content{ 50 | font-size: 16px; 51 | } 52 | .logo_head{ 53 | font-size: 20px; 54 | } 55 | 56 | } 57 | 58 | @media screen and (max-width: 992px){ 59 | .contentImg{ 60 | width: 100%; 61 | } 62 | .heading{ 63 | font-size: 25px; 64 | } 65 | .subHead{ 66 | margin-top: 0px; 67 | margin-bottom: 30px; 68 | } 69 | } 70 | 71 | @media screen and (max-width: 768px){ 72 | .contentImg{ 73 | 74 | } 75 | 76 | } -------------------------------------------------------------------------------- /src/components/Real/Real.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Real.module.css'; 3 | import improveImg from '../../assets/home/improves.png'; 4 | 5 | const Real = () =>{ 6 | return( 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |

Real

15 |

Improves Customer Experiences

16 |

Responsive web design supply chain crowdfunding agile development analytics technology ownership startup. Network effects social proof user experience prototype buzz product management deployment metrics sales infographic equity holy grail crowdfunding release.

17 |
18 | 19 |
20 |
21 |
22 |
23 |
24 | ) 25 | } 26 | export default Real; -------------------------------------------------------------------------------- /src/components/SubBanner/SubBanner.module.css: -------------------------------------------------------------------------------- 1 | .imgbox { 2 | width: 100%; 3 | height: 65vh; 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | } 7 | .center{ 8 | position: absolute; 9 | text-align: center; 10 | top: 45%; 11 | left: 50%; 12 | transform: translate(-50%, -50%); 13 | } 14 | .head{ 15 | font-size: 50px; 16 | color: #fefefe; 17 | font-weight: bold; 18 | margin-bottom: 9px; 19 | } 20 | .subHead{ 21 | font-size: 16px; 22 | color: #fefefe; 23 | } 24 | 25 | @media screen and (max-width: 1080px){ 26 | .imgbox{ 27 | height: 50vh; 28 | } 29 | .head{ 30 | font-size: 40px; 31 | } 32 | .center{ 33 | top: 37%; 34 | } 35 | } 36 | @media screen and (max-width: 900px){ 37 | .imgbox{ 38 | height: 40vh; 39 | } 40 | .head{ 41 | font-size: 30px; 42 | margin-bottom: 0px; 43 | } 44 | .subHead{ 45 | font-size: 15px; 46 | } 47 | .center{ 48 | top: 32%; 49 | } 50 | } 51 | @media screen and (max-width: 600px){ 52 | .imgbox{ 53 | height: 30vh; 54 | } 55 | .head{ 56 | font-size: 26px; 57 | } 58 | .subHead{ 59 | font-size: 14px; 60 | } 61 | .center{ 62 | top: 24%; 63 | } 64 | } 65 | @media screen and (max-width: 450px){ 66 | .imgbox{ 67 | height: 25vh; 68 | } 69 | .head{ 70 | font-size: 20px; 71 | } 72 | .subHead{ 73 | font-size: 13px; 74 | } 75 | .center{ 76 | top: 20%; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/components/ServicesHome/data.js: -------------------------------------------------------------------------------- 1 | import seo from '../../assets/home/seo.png'; 2 | import web from '../../assets/home/web.png'; 3 | 4 | const data = [ 5 | { 6 | id: 1, 7 | heading: 'SEO Service', 8 | content: 'Launch party pitch technology user experience innovator buzz stealth MVP business model.', 9 | to: '/', 10 | icon: seo, 11 | }, 12 | { 13 | id: 2, 14 | heading: 'Web migration services', 15 | content: 'Launch party pitch technology user experience innovator buzz stealth MVP business model.', 16 | to: '/', 17 | icon: web, 18 | }, 19 | { 20 | id: 3, 21 | heading: 'Corporate Web Design', 22 | content: 'Launch party pitch technology user experience innovator buzz stealth MVP business model.', 23 | to: '/', 24 | icon: seo, 25 | }, 26 | { 27 | id: 4, 28 | heading: 'E-Commerce System', 29 | content: 'Launch party pitch technology user experience innovator buzz stealth MVP business model.', 30 | to: '/', 31 | icon: seo, 32 | }, 33 | { 34 | id: 5, 35 | heading: 'Web Maintenance Service', 36 | content: 'Launch party pitch technology user experience innovator buzz stealth MVP business model.', 37 | to: '/', 38 | icon: seo, 39 | }, 40 | { 41 | id: 6, 42 | heading: 'UI/UX Design', 43 | content: 'Launch party pitch technology user experience innovator buzz stealth MVP business model.', 44 | to: '/', 45 | icon: seo, 46 | }, 47 | ] 48 | 49 | export default data; -------------------------------------------------------------------------------- /src/components/Banner/Banner.module.css: -------------------------------------------------------------------------------- 1 | .imgbox { 2 | height: 94vh; 3 | background: url('../../assets/background.png'); 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | } 7 | .center{ 8 | position: absolute; 9 | text-align: center; 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%, -50%); 13 | } 14 | .text{ 15 | font-size: 67px; 16 | /* width: 335px; */ 17 | color: #fff; 18 | font-weight: 400; 19 | } 20 | .btn{ 21 | width: 272px; 22 | height: 64px; 23 | font-size: 14px; 24 | } 25 | 26 | @media screen and (max-width: 1266px) { 27 | .text{ 28 | font-size: 57px; 29 | } 30 | .btn{ 31 | width: 250px; 32 | height: 58px; 33 | } 34 | } 35 | 36 | @media screen and (max-width: 1090px) { 37 | .text{ 38 | font-size: 47px; 39 | } 40 | .btn{ 41 | width: 220px; 42 | height: 48px; 43 | } 44 | } 45 | @media screen and (max-width: 921px) { 46 | .text{ 47 | font-size: 37px; 48 | } 49 | } 50 | @media screen and (max-width: 715px) { 51 | .text{ 52 | font-size: 27px; 53 | } 54 | .btn{ 55 | width: 160px; 56 | height: 38px; 57 | } 58 | } 59 | @media screen and (max-width: 524px) { 60 | .text{ 61 | width: 100%; 62 | } 63 | 64 | .btn{ 65 | width: 140px; 66 | height: 36px; 67 | font-size: 12px; 68 | } 69 | 70 | } 71 | @media screen and (max-width: 396px) { 72 | .text{ 73 | font-size: 20px; 74 | } 75 | .btn{ 76 | width: 110px; 77 | font-size: 11px; 78 | } 79 | } -------------------------------------------------------------------------------- /src/components/AboutUs/Bottom/Bottom.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Bottom.module.css'; 3 | import fakeData from './fakeData'; 4 | 5 | const Bottom = () =>{ 6 | return( 7 | <> 8 |
9 | { 10 | fakeData.map((x, idx)=>( 11 | idx%2 === 0? 12 |
13 |
14 |

{x.heading}

15 |

{x.content}

16 |
17 |
18 | 19 |
20 |
21 | : 22 |
23 |
24 | 25 |
26 |
27 |

{x.heading}

28 |

{x.content}

29 |
30 |
31 | )) 32 | } 33 |
34 | 35 | ) 36 | } 37 | export default Bottom; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 25 | 26 | React App 27 | 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | .logo{ 2 | font-size: 40px; 3 | font-family: 'Montserrat'; 4 | font-weight: bold; 5 | color: #ff4c0a; 6 | text-align: left; 7 | } 8 | 9 | .text{ 10 | color: #fefefe; 11 | text-align: left; 12 | font-size: 16px; 13 | margin-bottom: 0px; 14 | } 15 | .social_logo{ 16 | text-align: left; 17 | margin-top: 25px; 18 | } 19 | .img{ 20 | margin-right: 14px; 21 | margin-bottom: 40px; 22 | cursor: pointer; 23 | } 24 | .img:hover{ 25 | transform: scale(1.1); 26 | } 27 | .head{ 28 | color: #fefefe; 29 | font-size: 22px; 30 | text-align: left; 31 | margin-top: 15px; 32 | margin-bottom: 28px; 33 | font-weight: 500; 34 | 35 | } 36 | .bottom{ 37 | color: #fefefe; 38 | font-size: 16px; 39 | margin-bottom: 0px; 40 | height: 49px; 41 | padding-top: 12px; 42 | } 43 | 44 | @media screen and (max-width: 992px){ 45 | .text{ 46 | width: 230px; 47 | } 48 | .logo{ 49 | font-size: 35px; 50 | } 51 | } 52 | @media screen and (max-width: 600px){ 53 | .logo{ 54 | font-size: 28px; 55 | } 56 | .head{ 57 | font-size: 17px; 58 | } 59 | .text{ 60 | font-size: 14px; 61 | } 62 | .bottom{ 63 | font-size: 14px; 64 | height: 45px; 65 | } 66 | } 67 | @media screen and (max-width: 575px){ 68 | .contain{ 69 | padding-left: 30% !important; 70 | margin-bottom: 25px; 71 | } 72 | .head{ 73 | margin-bottom: 10px; 74 | } 75 | .img{ 76 | margin-bottom: 25px; 77 | } 78 | } 79 | @media screen and (max-width: 455px){ 80 | .contain{ 81 | padding-left: 20% !important; 82 | } 83 | } 84 | 85 | @media screen and (max-width: 350px){ 86 | .contain{ 87 | padding-left: 10% !important; 88 | } 89 | .text{ 90 | width: 100%; 91 | } 92 | 93 | } -------------------------------------------------------------------------------- /src/components/AboutUs/Middle/Middle.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | padding-top: 146px; 3 | padding-bottom: 145px; 4 | } 5 | .mainHead{ 6 | font-family: 'Poppins'; 7 | font-size: 50px; 8 | font-weight: bold; 9 | color: #222a41; 10 | margin-bottom: 30px; 11 | } 12 | .mainContent{ 13 | font-family: 'Poppins'; 14 | font-size: 20px; 15 | color: #989e9d; 16 | padding-bottom: 110px; 17 | } 18 | .box{ 19 | background-color: rgba(79, 76, 134, 0.1); 20 | border: solid 2px rgba(220, 216, 226, 0.5); 21 | border-radius: 10px; 22 | padding: 40px 27px 55.4px 28px; 23 | } 24 | .head{ 25 | font-family: 'Poppins'; 26 | font-size: 20px; 27 | font-weight: bold; 28 | color: #222a41; 29 | margin-bottom: 23px; 30 | margin-top: 33px; 31 | } 32 | .content{ 33 | font-family: 'Poppins'; 34 | font-size: 18px; 35 | color: #222a41; 36 | opacity: .6; 37 | } 38 | 39 | @media screen and (max-width: 992px) { 40 | .mainHead{ 41 | font-size: 30px; 42 | } 43 | .mainContent{ 44 | font-size: 18px; 45 | padding-bottom: 70px; 46 | } 47 | .contain{ 48 | padding-top: 100px; 49 | padding-bottom: 100px; 50 | } 51 | .box{ 52 | padding: 20px 10px 20px; 53 | } 54 | .head{ 55 | margin-bottom: 15px; 56 | margin-top: 15px; 57 | } 58 | .content{ 59 | font-size: 16px; 60 | } 61 | } 62 | 63 | @media screen and (max-width: 768px) { 64 | .box{ 65 | margin-bottom: 10px; 66 | } 67 | } 68 | @media screen and (max-width: 650px) { 69 | .contain{ 70 | padding-top: 50px; 71 | padding-bottom: 50px; 72 | } 73 | .mainHead{ 74 | font-size: 25px; 75 | } 76 | .mainContent{ 77 | font-size: 16px; 78 | } 79 | .head{ 80 | font-size: 18px; 81 | } 82 | .content{ 83 | font-size: 15px; 84 | } 85 | } -------------------------------------------------------------------------------- /src/components/ChoosingUs/ChoosingUs.module.css: -------------------------------------------------------------------------------- 1 | .heading{ 2 | font-size: 48px; 3 | padding-top: 155px; 4 | width: 700px; 5 | color: #333333; 6 | margin: auto; 7 | font-weight: bold; 8 | } 9 | 10 | .sub_text{ 11 | font-size: 20px; 12 | color: #222a41; 13 | margin-top: 23px; 14 | margin-bottom: 90px; 15 | } 16 | .logo_head{ 17 | font-size: 22px; 18 | font-weight: bold; 19 | color: #222a41; 20 | margin-top: 24px; 21 | } 22 | .logo_text{ 23 | font-size: 16px; 24 | color: #222a41; 25 | margin-top: 19px; 26 | margin-left: 40px; 27 | margin-right: 40px; 28 | } 29 | .sub{ 30 | margin-top: 113px; 31 | padding-bottom: 125px; 32 | } 33 | 34 | @media screen and (max-width: 1000px) { 35 | .heading{ 36 | font-size: 35px; 37 | padding-top: 100px; 38 | } 39 | .sub{ 40 | padding-bottom: 100px; 41 | margin-top: 80px; 42 | } 43 | .sub_text{ 44 | margin-bottom: 70px; 45 | } 46 | } 47 | 48 | @media screen and (max-width: 770px) { 49 | .heading{ 50 | font-size: 25px; 51 | padding-top: 70px; 52 | width: 400px; 53 | } 54 | .sub_text{ 55 | font-size: 17px; 56 | } 57 | .sub{ 58 | padding-bottom: 70px; 59 | margin-top: 60px; 60 | } 61 | .logo_head{ 62 | font-size: 18px; 63 | margin-top: 8px; 64 | margin-bottom: 0px; 65 | } 66 | .logo_text{ 67 | font-size: 14px; 68 | margin-top: 8px; 69 | margin-bottom: 30px; 70 | } 71 | } 72 | 73 | @media screen and (max-width: 430px) { 74 | 75 | .heading{ 76 | font-size: 18px; 77 | padding-top: 50px; 78 | width: 100%; 79 | } 80 | .sub_text{ 81 | font-size: 13px; 82 | margin-top: 5px; 83 | } 84 | .logo_head{ 85 | font-size: 15px; 86 | } 87 | .sub{ 88 | padding-bottom: 13px; 89 | } 90 | } -------------------------------------------------------------------------------- /src/components/Real/Real.module.css: -------------------------------------------------------------------------------- 1 | .img{ 2 | width: 100%; 3 | } 4 | .heading{ 5 | font-size: 30px; 6 | font-weight: 500; 7 | color: #ff4c0a; 8 | font-family: 'Poppins'; 9 | text-align: left; 10 | font-weight: 500; 11 | } 12 | .subHeading{ 13 | font-size: 34px; 14 | font-family: 'Poppins'; 15 | font-weight: bold; 16 | text-align: left; 17 | width: 400px; 18 | margin-bottom: 45px; 19 | } 20 | .content{ 21 | font-size: 15px; 22 | font-family: 'Poppins'; 23 | text-align: left; 24 | color: #6d7783; 25 | width: 80%; 26 | text-align: justify; 27 | margin-bottom: 40px; 28 | } 29 | .btn{ 30 | width: 272px; 31 | height: 64px; 32 | font-size: 14px; 33 | } 34 | .text{ 35 | margin-left: 50px; 36 | margin-top: 50px; 37 | } 38 | 39 | @media screen and (max-width:1200px) { 40 | .text{ 41 | margin-top: 20px 42 | } 43 | } 44 | 45 | @media screen and (max-width:1100px) { 46 | .heading{ 47 | font-size: 25px; 48 | } 49 | .subHeading{ 50 | font-size: 28px; 51 | width: 300px; 52 | } 53 | .btn{ 54 | height: 50px; 55 | width: 200px; 56 | } 57 | } 58 | @media screen and (max-width:950px) { 59 | .imgDiv{ 60 | margin-top: 100px; 61 | } 62 | } 63 | 64 | @media screen and (max-width:767px) { 65 | .imgDiv{ 66 | margin-top: 0px; 67 | } 68 | .heading{ 69 | font-size: 20px; 70 | } 71 | .subHeading{ 72 | font-size: 22px; 73 | margin-bottom: 22px; 74 | } 75 | } 76 | @media screen and (max-width:500px) { 77 | .heading{ 78 | font-size: 18px; 79 | } 80 | .subHeading{ 81 | font-size: 20px; 82 | margin-bottom: 20px; 83 | width: 70%; 84 | } 85 | .content{ 86 | margin-bottom: 23px; 87 | } 88 | } 89 | 90 | @media screen and (max-width:355px) { 91 | .subHeading{ 92 | width: 100%; 93 | } 94 | } -------------------------------------------------------------------------------- /src/components/Testimonial/fakeData.js: -------------------------------------------------------------------------------- 1 | import image1 from '../../assets/home/testimonial1.png'; 2 | import image2 from '../../assets/home/testimonial2.png'; 3 | import image3 from '../../assets/home/testimonial2.png'; 4 | 5 | export const fakeData = [ 6 | { 7 | id: 1, 8 | img: image1, 9 | name: 'Howard Arlene', 10 | profession: 'Finance Manager', 11 | message: "Your company is truly upstanding and is behind its product 100%. It's the perfect solution for our business. It has really helped our business." 12 | }, 13 | { 14 | id: 2, 15 | img: image2, 16 | name: 'Miles Esther', 17 | profession: 'Public Relations Specialist', 18 | message: "You won't regret it. I was amazed at the quality of it. I am really satisfied with my it." 19 | }, 20 | { 21 | id: 3, 22 | img: image3, 23 | name: 'Pena Norma', 24 | profession: 'Public Relations Specialist', 25 | message: "It fits our needs perfectly. Man, this thing is getting better and better as I learn more about it. You've saved our business!" 26 | }, 27 | { 28 | id: 4, 29 | img: image1, 30 | name: 'Howard Arlene', 31 | profession: 'Finance Manager', 32 | message: "Your company is truly upstanding and is behind its product 100%. It's the perfect solution for our business. It has really helped our business." 33 | }, 34 | { 35 | id: 5, 36 | img: image2, 37 | name: 'Miles Esther', 38 | profession: 'Public Relations Specialist', 39 | message: "You won't regret it. I was amazed at the quality of it. I am really satisfied with my it." 40 | }, 41 | { 42 | id: 6, 43 | img: image3, 44 | name: 'Pena Norma', 45 | profession: 'Public Relations Specialist', 46 | message: "It fits our needs perfectly. Man, this thing is getting better and better as I learn more about it. You've saved our business!" 47 | }, 48 | ] -------------------------------------------------------------------------------- /src/components/AboutUs/Bottom/Bottom.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | padding-bottom: 130px; 3 | } 4 | .row{ 5 | margin-top: 130px !important; 6 | } 7 | .head{ 8 | font-family: 'Poppins'; 9 | font-size: 30px; 10 | font-weight: bold; 11 | color: #4f4c86; 12 | text-align: left; 13 | margin-top: 135px; 14 | margin-left: 150px; 15 | } 16 | .content{ 17 | font-family: 'Poppins'; 18 | font-size: 14px; 19 | color: #0f0a18; 20 | opacity: .5; 21 | text-align: left; 22 | margin-left: 150px; 23 | } 24 | .img{ 25 | width: 100%; 26 | height: auto; 27 | margin-left: -150px; 28 | } 29 | .head1{ 30 | font-family: 'Poppins'; 31 | font-size: 30px; 32 | font-weight: bold; 33 | color: #4f4c86; 34 | text-align: left; 35 | margin-top: 135px; 36 | } 37 | .content1{ 38 | font-family: 'Poppins'; 39 | font-size: 14px; 40 | color: #0f0a18; 41 | opacity: .5; 42 | text-align: left; 43 | margin-right: 100px; 44 | } 45 | .img1{ 46 | width: 100%; 47 | height: auto; 48 | margin-left: 90px; 49 | } 50 | 51 | @media screen and (max-width: 992px) { 52 | .head{ 53 | margin-left: 0px; 54 | margin-top: 90px; 55 | } 56 | .content{ 57 | margin-left: 0px; 58 | } 59 | .img{ 60 | margin-left: -60px; 61 | } 62 | .img1{ 63 | margin-left: 40px; 64 | } 65 | .head1{ 66 | margin-top: 90px; 67 | } 68 | .content1{ 69 | margin-right: 0px; 70 | } 71 | .row{ 72 | margin-top: 80px !important; 73 | } 74 | .contain{ 75 | padding-bottom: 80px; 76 | } 77 | 78 | } 79 | @media screen and (max-width: 768px) { 80 | .img, .img1{ 81 | margin-left: 0px; 82 | } 83 | .head, .head1{ 84 | margin-top: 50px; 85 | } 86 | } 87 | @media screen and (max-width: 768px) { 88 | .head, .head1{ 89 | font-size: 22px; 90 | margin-top: 30px; 91 | } 92 | .row{ 93 | margin-top: 50px !important; 94 | } 95 | } -------------------------------------------------------------------------------- /src/components/AboutUs/Bottom/fakeData.js: -------------------------------------------------------------------------------- 1 | import img1 from '../../../assets/aboutUs/bottom1.png'; 2 | import img2 from '../../../assets/aboutUs/bottom2.png' 3 | 4 | const fakeData = [ 5 | { 6 | id: 1, 7 | heading: 'We Do with Creativity', 8 | img: img1, 9 | content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita' 10 | }, 11 | { 12 | id: 2, 13 | heading: 'We Do with Creativity', 14 | img: img2, 15 | content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita' 16 | }, 17 | ] 18 | export default fakeData; -------------------------------------------------------------------------------- /src/components/ChoosingUs/ChoosingUs.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './ChoosingUs.module.css'; 3 | import experience from '../../assets/home/experience.png'; 4 | import communication from '../../assets/home/communication.png'; 5 | import comfort from '../../assets/home/comfort.png'; 6 | 7 | const ChoosingUs = () =>{ 8 | return( 9 |
10 |
11 |

Top three the reason why you should choosing us.

12 |

In quo quaerimus, non numquam eius modi tempora incidunt

13 |
14 |
15 | experience 16 |

Experience

17 |

Probabo, inquit, modo ista sis aequitate, quam interrogare aut in voluptate ponit.

18 |
19 | 20 |
21 | experience 22 |

Easy Communication

23 |

Probabo, inquit, modo ista sis aequitate, quam nihil impedit, quo.

24 |
25 | 26 |
27 | experience 28 |

Comfortable

29 |

Alii autem, quibus ego cum teneam sententiam, quid bonum esse fugiendum.

30 |
31 |
32 |
33 |
34 | ) 35 | } 36 | 37 | export default ChoosingUs; -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import NavbarMain from './components/NavbarMain' 2 | import AOS from 'aos'; 3 | import 'aos/dist/aos.css'; 4 | import './App.css'; 5 | import routes from './router/route'; 6 | import ScrollToTop from './components/ScrollToTop/ScrollToTop'; 7 | import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; 8 | 9 | function App() { 10 | // Animation global setting 11 | AOS.init({ 12 | // Global settings: 13 | disable: 'mobile', // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function 14 | startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on 15 | initClassName: 'aos-init', // class applied after initialization 16 | animatedClassName: 'aos-animate', // class applied on animation 17 | useClassNames: false, // if true, will add content of `data-aos` as classes on scroll 18 | disableMutationObserver: false, // disables automatic mutations' detections (advanced) 19 | debounceDelay: 50, // the delay on debounce used while resizing window (advanced) 20 | throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced) 21 | 22 | // Settings that can be overridden on per-element basis, by `data-aos-*` attributes: 23 | offset: 70, // offset (in px) from the original trigger point 24 | delay: 0, // values from 0 to 3000, with step 50ms 25 | duration: 800, // values from 0 to 3000, with step 50ms 26 | easing: 'ease', // default easing for AOS animations 27 | once: false, // whether animation should happen only once - while scrolling down 28 | mirror: false, // whether elements should animate out while scrolling past them 29 | anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation 30 | 31 | }); 32 | return ( 33 | 34 | 35 |
36 | 37 |
38 | 39 | { 40 | routes.map(x => ( 41 | 42 | )) 43 | } 44 | 45 |
46 |
47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /src/components/ContactUsForm/ContactUsForm.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | margin-top: 68px; 3 | margin-bottom: 68px; 4 | } 5 | .heading{ 6 | font-family: 'Poppins'; 7 | font-size: 40px; 8 | color: #222a41; 9 | font-weight: bold; 10 | /* margin-bottom: 76px; */ 11 | width: 400px; 12 | } 13 | .head{ 14 | font-family: 'Poppins'; 15 | font-size: 20px; 16 | color: #222a41; 17 | font-weight: bold; 18 | margin-top: 76px; 19 | } 20 | .content{ 21 | font-family: 'Poppins'; 22 | font-size: 20px; 23 | color: #232323; 24 | opacity: 0.6; 25 | margin-bottom: 5px; 26 | } 27 | .email{ 28 | font-family: 'Poppins'; 29 | font-size: 30px; 30 | color: #222a41; 31 | font-weight: bold; 32 | margin-top: 43px; 33 | margin-bottom: 43px; 34 | } 35 | .label{ 36 | font-family: 'Poppins'; 37 | font-size: 16px; 38 | color: #232323; 39 | margin-bottom: 9px; 40 | margin-left: 10px; 41 | } 42 | .msg{ 43 | height: 183px !important; 44 | padding-top: 15px; 45 | } 46 | .input{ 47 | width: 100%; 48 | background-color: #f7f7f7; 49 | border-radius: 6px; 50 | border: solid 1px #e8e8e8; 51 | height: 60px; 52 | margin: 9px 0px 20px; 53 | padding-left: 15px; 54 | } 55 | .input:focus{ 56 | outline: none; 57 | border: solid 1px #afacac; 58 | } 59 | .btn{ 60 | font-size: 16px; 61 | height: 60px; 62 | width: 160px; 63 | border-radius: 5px !important; 64 | margin-top: 37px; 65 | } 66 | 67 | @media screen and (max-width: 1200px) { 68 | .heading{ 69 | font-size: 30px; 70 | } 71 | .head{ 72 | font-size: 18px; 73 | margin-top: 50px; 74 | } 75 | .content{ 76 | font-size: 18px; 77 | } 78 | .email{ 79 | font-size: 25px; 80 | } 81 | } 82 | 83 | @media screen and (max-width: 768px){ 84 | .heading{ 85 | width: 100%; 86 | } 87 | .head{ 88 | margin-top: 30px; 89 | } 90 | } 91 | 92 | @media screen and (max-width: 600px){ 93 | .heading{ 94 | font-size: 23px; 95 | } 96 | .head{ 97 | margin-top: 25px; 98 | font-size: 16px; 99 | } 100 | .content{ 101 | font-size: 16px; 102 | } 103 | .label{ 104 | font-size: 14px; 105 | } 106 | .input{ 107 | height: 40px; 108 | } 109 | } -------------------------------------------------------------------------------- /src/components/AboutUsHome/AboutUsHome.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './AboutUsHome.module.css'; 3 | import img1 from '../../assets/home/about1.png'; 4 | import img2 from '../../assets/home/about2.png'; 5 | import img3 from '../../assets/home/about3.png'; 6 | 7 | const AboutUsHome = () =>{ 8 | return( 9 | <> 10 |
11 |
12 |
13 |

ABOUT US

14 |

We have a great team in terms of technology

15 |
16 |

A highly specialized Management team with over 20 combined years of experience in the Healthcare industry with proven ability to optimally combine digital technology, skilled resources and efficient business processes to implement creative as well as proven market solutions to suit an ever-evolving market. Our forte has been to successfully tailor our solutions to support your needs whether it is in the space of Consulting, Product Management or Service Delivery

17 |
18 |
19 | 20 |
21 | 22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 | ) 41 | } 42 | 43 | export default AboutUsHome; -------------------------------------------------------------------------------- /src/components/Testimonial/Testimonial.module.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin-top: 150px; 3 | margin-bottom: 150px; 4 | } 5 | .box{ 6 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 7 | margin-top: 7px; 8 | margin-bottom: 60px; 9 | padding-top: 19px; 10 | padding-left: 20px; 11 | padding-right: 20px; 12 | padding-bottom: 20px; 13 | border-radius: 15px; 14 | cursor: pointer; 15 | 16 | -webkit-user-select: none; 17 | -khtml-user-select: none; 18 | -moz-user-select: none; 19 | -ms-user-select: none; 20 | -o-user-select: none; 21 | user-select: none; 22 | } 23 | .head{ 24 | font-family: 'Poppins'; 25 | font-size: 30px; 26 | font-weight: 500; 27 | color: #ff4c0a; 28 | } 29 | .subHead{ 30 | font-family: 'Poppins'; 31 | font-size: 42px; 32 | font-weight: bold; 33 | color: #222a41; 34 | margin-bottom: 60px; 35 | } 36 | 37 | .img{ 38 | width: 60px; 39 | height: auto; 40 | border-radius: 50px; 41 | } 42 | .name{ 43 | font-size: 20px; 44 | font-family: 'Poppins'; 45 | text-align: left; 46 | margin-bottom: 0px; 47 | color: #222a41; 48 | font-weight: bold; 49 | } 50 | .profession{ 51 | font-family: 'Poppins'; 52 | font-size: 16px; 53 | text-align: left; 54 | color: #222a41; 55 | } 56 | .msg{ 57 | font-family: 'Poppins'; 58 | text-align: left; 59 | color: #222a41; 60 | font-size: 15px; 61 | padding-top: 5px; 62 | } 63 | 64 | @media screen and (max-width: 1200px) { 65 | .head{ 66 | font-size: 25px; 67 | } 68 | .subHead{ 69 | font-size: 40px; 70 | } 71 | .name{ 72 | font-size: 19px; 73 | } 74 | .profession{ 75 | font-size: 15px; 76 | } 77 | .msg{ 78 | font-size: 14px; 79 | } 80 | .img{ 81 | width: 55px; 82 | } 83 | } 84 | @media screen and (max-width: 810px) { 85 | .head{ 86 | font-size: 22px; 87 | } 88 | .subHead{ 89 | font-size: 32px; 90 | margin-bottom: 60px; 91 | } 92 | .container{ 93 | margin-bottom: 100px; 94 | margin-top: 100px; 95 | } 96 | .msg{ 97 | padding-top: 10px; 98 | } 99 | } 100 | 101 | @media screen and (max-width: 575px) { 102 | .name{ 103 | text-align: center; 104 | margin-top: 10px; 105 | } 106 | .profession{ 107 | text-align: center; 108 | } 109 | .msg{ 110 | text-align: justify; 111 | } 112 | 113 | } -------------------------------------------------------------------------------- /src/components/AboutUs/Middle/Middle.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Middle.module.css'; 3 | import logo1 from '../../../assets/aboutUs/middle1.png'; 4 | import logo2 from '../../../assets/aboutUs/middle2.png'; 5 | import logo3 from '../../../assets/aboutUs/middle3.png'; 6 | 7 | const Middle = () =>{ 8 | return( 9 |
10 |
11 |

Lorem ipsum dolor sit amet

12 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

13 | 14 |
15 |
16 |
17 | 18 |

Web Design

19 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

20 |
21 |
22 | 23 |
24 |
25 | 26 |

Web Design

27 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

28 |
29 |
30 | 31 |
32 |
33 | 34 |

Web Design

35 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

36 |
37 |
38 | 39 |
40 |
41 |
42 | ) 43 | } 44 | export default Middle; -------------------------------------------------------------------------------- /src/components/ProjectDetails/OtherProjects/OtherProjects.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './OtherProjects.module.css'; 3 | import Carousel from "react-multi-carousel"; 4 | import "react-multi-carousel/lib/styles.css"; 5 | import './styles.css'; 6 | import { fakeData } from "./fakeData"; 7 | 8 | const OtherProjects=()=>{ 9 | 10 | const responsive = { 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 2.5, 14 | slidesToSlide: 2, 15 | 16 | }, 17 | tablet: { 18 | breakpoint: { max: 1024, min: 560 }, 19 | items: 2, 20 | slidesToSlide: 2, 21 | 22 | }, 23 | mobile: { 24 | breakpoint: { max: 560, min: 0 }, 25 | items: 1.5, 26 | slidesToSlide: 1, 27 | 28 | } 29 | }; 30 | 31 | return ( 32 |
33 | 52 | { 53 | fakeData.map((x) =>( 54 |
55 |
56 |
57 | 58 |
59 |
60 |

{x.title}

61 |

{x.content}

62 |
63 |
64 |
65 | )) 66 | } 67 | 68 | 69 |
70 |
71 | ) 72 | } 73 | export default OtherProjects; -------------------------------------------------------------------------------- /src/components/AboutUs/Top/Top.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Top.module.css'; 3 | import img1 from '../../../assets/aboutUs/img1.png'; 4 | import img2 from '../../../assets/aboutUs/img2.png'; 5 | 6 | const Top =()=>{ 7 | return( 8 |
9 |

About Us

10 |

Web Development Service

11 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

12 | 13 |
14 |
15 |

About Us

16 |

We Do with Creativity

17 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 18 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita

19 |
20 |
21 | 22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 |
30 | ) 31 | } 32 | 33 | export default Top; -------------------------------------------------------------------------------- /src/components/CaseStudy/CaseStudy.module.css: -------------------------------------------------------------------------------- 1 | .contain{ 2 | margin-bottom: 150px; 3 | } 4 | .head{ 5 | font-family: 'Poppins'; 6 | font-size: 30px; 7 | font-weight: 500; 8 | color: #ff4c0a; 9 | margin-bottom: 13px; 10 | } 11 | .our{ 12 | display: inline; 13 | font-size: 34px; 14 | font-weight: 500; 15 | color: #000000; 16 | font-weight: bold; 17 | } 18 | .study{ 19 | display: inline; 20 | font-size: 34px; 21 | font-weight: bold; 22 | color: #ff4c0a; 23 | } 24 | .grp_btn{ 25 | margin-top: 40px; 26 | margin-bottom: 40px; 27 | } 28 | 29 | .filter{ 30 | display: inline; 31 | margin-left: 25px; 32 | margin-right: 25px; 33 | font-family: 'Poppins'; 34 | font-size: 20px; 35 | color: #000; 36 | font-weight: 500; 37 | cursor: pointer; 38 | } 39 | .filter:hover{ 40 | color: #ff4c0a; 41 | font-weight: bold; 42 | } 43 | .active{ 44 | color: #ff4c0a; 45 | font-weight: bold; 46 | } 47 | .img{ 48 | width: 100%; 49 | height: 100%; 50 | background-repeat: no-repeat; 51 | background-size: cover; 52 | background-image: url("../../assets/caseStudy/gradient.png"), linear-gradient(#eb01a5, #d13531); 53 | border-radius: 10px; 54 | cursor: pointer; 55 | } 56 | .img:hover{ 57 | transform: scale(1.04); 58 | transition: .5s; 59 | } 60 | .imgText1{ 61 | font-family: 'Poppins'; 62 | font-size: 14px; 63 | color: white; 64 | text-align: left; 65 | padding-top: 74%; 66 | padding-left: 30px; 67 | margin-bottom: 2px; 68 | } 69 | .imgText2{ 70 | font-family: 'Poppins'; 71 | font-size: 22px; 72 | color: white; 73 | font-weight: bold; 74 | text-align: left; 75 | padding-left: 30px; 76 | padding-bottom: 15px; 77 | } 78 | 79 | @media screen and (max-width: 992px) { 80 | .head{ 81 | font-size: 25px; 82 | } 83 | .our, .study{ 84 | font-size: 30px; 85 | } 86 | .filter{ 87 | font-size: 18px; 88 | margin-left: 15px; 89 | margin-right: 15px; 90 | } 91 | .imgText2{ 92 | font-size: 18px; 93 | padding-left: 20px; 94 | } 95 | .imgText1{ 96 | padding-left: 20px; 97 | } 98 | .grp_btn{ 99 | margin-top: 30px; 100 | margin-bottom: 30px; 101 | } 102 | } 103 | 104 | @media screen and (max-width: 768px) { 105 | .head{ 106 | font-size: 18px; 107 | } 108 | .our, .study{ 109 | font-size: 22px; 110 | } 111 | .filter{ 112 | font-size: 14px; 113 | margin-left: 8px; 114 | margin-right: 8px; 115 | } 116 | .grp_btn{ 117 | margin-top: 25px; 118 | margin-bottom: 25px; 119 | } 120 | } -------------------------------------------------------------------------------- /src/components/CaseStudy/CaseStudy.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styles from './CaseStudy.module.css'; 3 | import { Link } from 'react-router-dom'; 4 | import fakeData from './fakeData'; 5 | 6 | const CaseStudy = () =>{ 7 | const [data, setData] = useState(fakeData); 8 | const [active, setActive] = useState([true, false, false, false, false]); 9 | 10 | const filterData = (category) => { 11 | let temp = fakeData.filter((x) => x.category === category); 12 | setData([...temp]); 13 | } 14 | const activeNav = (i) =>{ 15 | let temp = [false, false, false, false, false]; 16 | temp[i] = true; 17 | setActive([...temp]); 18 | } 19 | 20 | return( 21 |
22 |

WHAT WE DO

23 |
24 |

OUR CASE 

25 |

STUDIES

26 |
27 |
28 |

{ setData(fakeData); activeNav(0) }} className={`${styles.filter} ${active[0] ? styles.active : null}`}>ALL

29 |

{ filterData('financial'); activeNav(1) }} className={`${styles.filter} ${active[1] ? styles.active : null}`}>FINANCIAL

30 |

{ filterData('human resources'); activeNav(2) }} className={`${styles.filter} ${active[2] ? styles.active : null}`}>HUMAN RESOURCES

31 |

{ filterData('start up'); activeNav(3) }} className={`${styles.filter} ${active[3] ? styles.active : null}`}>START UP

32 |

{ filterData('strategy'); activeNav(4) }} className={`${styles.filter} ${active[4] ? styles.active : null}`}>STRATEGY

33 |
34 | 35 |
36 | { 37 | data.map((x) =>( 38 |
39 | 40 |
41 |

{x.designation}

42 |

{x.title}

43 |
44 | 45 |
46 | )) 47 | } 48 |
49 |
50 | ) 51 | } 52 | 53 | export default CaseStudy; -------------------------------------------------------------------------------- /src/components/AboutUsHome/AboutUsHome.module.css: -------------------------------------------------------------------------------- 1 | .head{ 2 | font-size: 30px; 3 | font-family: 'Poppins'; 4 | font-weight: 500; 5 | color: #ff4c0a; 6 | text-align: left; 7 | margin-bottom: 29px; 8 | } 9 | .heading{ 10 | font-size: 48px; 11 | color: #222a41; 12 | font-family: 'Poppins'; 13 | font-weight: 600; 14 | text-align: left; 15 | margin-bottom: 34px; 16 | width: 80%; 17 | line-height: 1.3; 18 | } 19 | .content{ 20 | font-size: 14px; 21 | color: #222a41; 22 | font-family: 'Poppins'; 23 | text-align: left; 24 | margin-bottom: 36px; 25 | text-align: justify; 26 | } 27 | .btn{ 28 | width: 272px; 29 | height: 64px; 30 | } 31 | .contain{ 32 | margin-top: 143px; 33 | margin-bottom: 143px; 34 | } 35 | 36 | .row{ 37 | display: flex; 38 | flex-wrap: wrap; 39 | padding: 0 8px; 40 | margin-top: 65px; 41 | justify-content: right; 42 | 43 | } 44 | .column { 45 | flex: 25%; 46 | max-width: 45%; 47 | padding: 0 8px; 48 | } 49 | .column img { 50 | margin-top: 15px; 51 | vertical-align: middle; 52 | width: 100%; 53 | } 54 | .col1{ 55 | margin-top: 100px; 56 | } 57 | 58 | @media screen and (max-width: 1200px){ 59 | .heading{ 60 | font-size: 40px; 61 | } 62 | .row{ 63 | padding: 0px 6px; 64 | margin-top: 85px; 65 | } 66 | .column{ 67 | padding: 0px 6px; 68 | } 69 | .column img{ 70 | margin-top: 11px; 71 | } 72 | .col1{ 73 | margin-top: 70px; 74 | } 75 | } 76 | @media screen and (max-width: 991px){ 77 | .head{ 78 | font-size: 25px; 79 | } 80 | .heading{ 81 | width: 100%; 82 | } 83 | .row{ 84 | margin-top: 110px; 85 | } 86 | .col1{ 87 | margin-top: 60px; 88 | } 89 | } 90 | @media screen and (max-width: 768px){ 91 | .row{ 92 | margin-top: 50px; 93 | justify-content: center; 94 | } 95 | .col1{ 96 | margin-top: 80px; 97 | } 98 | } 99 | 100 | @media screen and (max-width: 500px){ 101 | .head{ 102 | font-size: 20px; 103 | } 104 | .heading{ 105 | font-size: 34px; 106 | } 107 | .btn{ 108 | width: 200px; 109 | height: 54px; 110 | } 111 | 112 | .row{ 113 | padding: 0px 4px; 114 | margin-top: 20px; 115 | } 116 | .column{ 117 | padding: 0px 4px; 118 | } 119 | .column img{ 120 | margin-top: 8px; 121 | } 122 | } 123 | 124 | @media screen and (max-width: 428px){ 125 | .col1{ 126 | margin-top: 60px; 127 | } 128 | .contain{ 129 | margin-bottom: 80px; 130 | margin-top: 80px; 131 | } 132 | } 133 | @media screen and (max-width: 340px){ 134 | .col1{ 135 | margin-top: 40px; 136 | } 137 | 138 | } -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Footer.module.css'; 3 | import fb from '../../assets/home/facebook.png'; 4 | import linkdin from '../../assets/home/linkdin.png'; 5 | import insta from '../../assets/home/insta.png'; 6 | 7 | const Footer = () =>{ 8 | return ( 9 | <> 10 |
11 |
12 |
13 |
14 |

Miritus

15 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed

16 |

Lorem ipsum dolor sit amet

17 |

Lorem ipsum dolor sit amet

18 |
19 | fb 20 | in 21 | insta 22 |
23 |
24 | 25 |
26 |

Services

27 |

4517 Washington Ave. Manchester, Kentucky 39495

28 |

deanna.curtis@example.com

29 |

(671) 555-0110

30 | 31 |
32 | 33 |
34 |

Head Office

35 |

4517 Washington Ave. Manchester, Kentucky 39495

36 |

deanna.curtis@example.com

37 |

(671) 555-0110

38 |
39 | 40 |
41 |

Opening Hour

42 |

Mon - Sat : 8:00 - 17:00

43 |

Sun : Closed

44 | 45 |
46 |
47 | 48 |
49 |
50 | 51 | 52 |
53 |

Copyright © 2020. All right reserved

54 |
55 | 56 | ) 57 | } 58 | export default Footer; -------------------------------------------------------------------------------- /src/components/AboutUs/Top/Top.module.css: -------------------------------------------------------------------------------- 1 | .heading{ 2 | font-family: 'Poppins'; 3 | font-size: 30px; 4 | font-weight: 500; 5 | color: #ff4c0a; 6 | margin-top: 77px; 7 | margin-bottom: 0px; 8 | } 9 | .subHeading{ 10 | font-family: 'Poppins'; 11 | font-size: 34px; 12 | font-weight: bold; 13 | color: #2e2d26; 14 | margin-top: 36px; 15 | } 16 | .content{ 17 | font-family: 'Poppins'; 18 | font-size: 14px; 19 | color: #989e9d; 20 | margin-top: 14px; 21 | width: 700px; 22 | margin-left: auto; 23 | margin-right: auto; 24 | margin-bottom: 70px; 25 | } 26 | .contain{ 27 | padding-left: 100px; 28 | } 29 | .about{ 30 | font-family: 'Poppins'; 31 | font-size: 50px; 32 | font-weight: bold; 33 | color: #0f0a18; 34 | text-align: left; 35 | margin-bottom: 4px; 36 | margin-top: 119px; 37 | } 38 | 39 | .imgContain{ 40 | margin-left: -90px; 41 | } 42 | .img1{ 43 | width: 100%; 44 | height: auto; 45 | } 46 | .img2{ 47 | text-align: left; 48 | padding-left: 100px; 49 | margin-top: 14px; 50 | width: 100%; 51 | height: auto; 52 | margin-bottom: 82px; 53 | } 54 | .creativity{ 55 | font-family: 'Poppins'; 56 | font-size: 30px; 57 | font-weight: bold; 58 | color: #4f4c86; 59 | text-align: left; 60 | } 61 | .contn{ 62 | font-family: 'Poppins'; 63 | font-size: 14px; 64 | color: #989e9d; 65 | text-align: left; 66 | } 67 | 68 | @media screen and (max-width: 1200px) { 69 | .contain{ 70 | padding-left: 40px; 71 | } 72 | .img2{ 73 | padding-left: 40px; 74 | } 75 | .imgContain{ 76 | margin-left: -60px; 77 | } 78 | } 79 | @media screen and (max-width: 992px) { 80 | .heading{ 81 | font-size: 25px; 82 | margin-top: 60px; 83 | } 84 | .subHeading{ 85 | font-size: 29px; 86 | margin-top: 30px; 87 | } 88 | .contain{ 89 | padding-left: 0px; 90 | } 91 | .img2{ 92 | padding-left: 0px; 93 | margin-bottom: 60px; 94 | } 95 | .imgContain{ 96 | margin-left: -30px; 97 | } 98 | .about{ 99 | font-size: 40px; 100 | } 101 | .creativity{ 102 | font-size: 25px; 103 | } 104 | 105 | } 106 | @media screen and (max-width: 768px) { 107 | .content{ 108 | width: 100%; 109 | } 110 | .about{ 111 | margin-top: 80px; 112 | } 113 | .imgContain{ 114 | margin-left: 0px; 115 | } 116 | } 117 | 118 | @media screen and (max-width: 650px) { 119 | .heading{ 120 | font-size: 20px; 121 | margin-top: 40px; 122 | } 123 | .subHeading{ 124 | font-size: 24px; 125 | margin-top: 20px; 126 | } 127 | .img2{ 128 | margin-bottom: 40px; 129 | } 130 | .about{ 131 | font-size: 30px; 132 | margin-top: 60px; 133 | } 134 | .creativity{ 135 | font-size: 20px; 136 | } 137 | 138 | } -------------------------------------------------------------------------------- /src/components/Testimonial/Testimonial.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import styles from "./Testimonial.module.css"; 4 | import Carousel from "react-multi-carousel"; 5 | import "react-multi-carousel/lib/styles.css"; 6 | 7 | import { fakeData } from "./fakeData"; 8 | 9 | function Testimonial() { 10 | const responsive = { 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 2, 14 | slidesToSlide: 2, // optional, default to 1. -35 15 | }, 16 | tablet: { 17 | breakpoint: { max: 1024, min: 560 }, 18 | items: 1, 19 | slidesToSlide: 1, // optional, default to 1. 20 | }, 21 | mobile: { 22 | breakpoint: { max: 560, min: 0 }, 23 | items: 0.6, 24 | slidesToSlide: 1, // optional, default to 1. 25 | }, 26 | }; 27 | 28 | return ( 29 |
30 |

31 | Our Testimonial 32 |

33 |

34 | Our trusted client review 35 |

36 | 37 | 57 | {fakeData.map((x) => ( 58 |
59 |
60 |
61 | 66 |
67 |
68 |

{x.name}

69 |

70 | {x.profession} 71 |

72 |
73 |
74 | 75 |
76 |

{x.message}

77 |
78 |
79 | ))} 80 |
81 |
82 | ); 83 | } 84 | 85 | export default Testimonial; 86 | -------------------------------------------------------------------------------- /src/components/SMediaServices/SMediaServices.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './SMediaServices.module.css'; 3 | import img1 from '../../assets/sMediaService/main.png'; 4 | import img2 from '../../assets/sMediaService/middle1.png'; 5 | import img3 from '../../assets/sMediaService/bottom1.png'; 6 | 7 | const SMediaServices = () =>{ 8 | return ( 9 | <> 10 |
11 | {/* Top */} 12 |
13 |
14 |
15 |

Social Media

16 |

Marketing

17 |

Identity on Social Media

18 |

More than ever users are seeking information and basing decisions on their peers’ advice and opinions. Customers head to your Facebook and Twitter sometimes based on a post or a re-tweet. Let your brand identity on social media be consistent with the brand you have worked so hard to develop.

19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 | {/* Middle */} 27 |
28 |
29 |
30 |

Next Level

31 |

Bringing your business into the social media scene will bring you to the next level of advertising as well as a whole new way to connect with your market. This is the next step.

32 |
33 |
34 | 35 |
36 |
37 |
38 | 39 | {/* Bottom */} 40 |
41 |
42 |
43 | 44 |
45 |
46 |

Custom Approach

47 |

Our team will help you establish a presence on both Facebook and Twitter with custom designed graphical elements that will make a lasting impression on all who visit your page. Combine this visibility with the ability to link directly to your website and you have a recipe for major exposure and traffic.

48 |
49 | 50 |
51 |
52 | 53 |
54 | 55 | ) 56 | } 57 | export default SMediaServices; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /src/components/ContactUsForm/ContactUsForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import styles from './ContactUsForm.module.css'; 3 | // import {Map, GoogleApiWrapper} from 'google-maps-react'; 4 | 5 | const ContactUsForm = () =>{ 6 | const [formContent, setFormContent ] = useState({}); 7 | 8 | const handleChange = ( event ) =>{ 9 | const { value, name } = event.target; 10 | 11 | setFormContent(prevState => ({ 12 | ...prevState, 13 | [name]: value 14 | })) 15 | } 16 | 17 | 18 | return( 19 | <> 20 |
21 |

We'd Love to Hear From You

22 | 23 |
24 |
25 |

Address

26 |

1201 New Zealand Metropolis 3452

27 |
28 | 29 |
30 |

Contact

31 |

Mobile : +00 123 456 78

32 |

Phone : +00 123 678 90

33 |

Email: contact@gmail.com

34 |
35 | 36 |
37 |

Address

38 |

Monday - Friday: 09:00 - 20:00

39 |

Sunday & Saturday: 10:30 - 22:00

40 |
41 |
42 | 43 |

You can email us

44 | 45 |
46 |
47 |
48 | 49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 |