├── .env ├── .github └── FUNDING.yml ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── build.zip ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── components │ ├── Clients.js │ ├── Cta.js │ ├── CustomHook.js │ ├── Footer.js │ ├── Hero.js │ ├── Intro.js │ ├── Navbar │ │ ├── NavBar.js │ │ └── NavLinks.js │ ├── Portfolio.js │ ├── ScrollToTop.js │ └── Services.js ├── images │ ├── Web-developer.svg │ ├── app.svg │ ├── clients │ │ ├── geps.png │ │ ├── kws.png │ │ └── protergia.png │ ├── consultation.svg │ ├── footer.svg │ ├── hero-bg.svg │ ├── hero-img.svg │ ├── hosting.svg │ ├── web-dev.svg │ └── web.svg ├── index.css ├── index.js └── pages │ ├── Contact.js │ ├── DemoProduct.js │ └── Home.js └── tailwind.config.js /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_CONTACT_API=https://mld.ng/api/api/v1/contact-requests 2 | REACT_APP_DEMO_REQUEST_API=https://mld.ng/api/api/v1/demo-requests -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: akugbeStephen 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "minimap.background": "#00000000", 4 | "scrollbar.shadow": "#00000000" 5 | } 6 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React JS Startup and small business website template 2 | 3 | [![Buy Me a Coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=&slug=yourname&button_colour=FFDD00&font_colour=000000&font_family=Comic&outline_colour=000000&coffee_colour=ffffff)](https://www.buymeacoffee.com/akugbeStephen) 4 | 5 | ### This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 6 | 7 | # Screenshot 8 | 9 | ![mld edit](https://user-images.githubusercontent.com/43953425/212030864-cf3aa272-e070-4e1b-8e25-f488ca56873e.png) 10 | 11 | 12 | 13 | The Live demo is available [Here](https://mld-prototype.netlify.app) 14 | 15 | ## Description 16 | 17 | This is a ReactJS based startup and small business website template. 18 | It was designed using TailwindCSS and React. 19 | The Contact form was made functional using EmailJS, to learn how to use EmailJS, you can check out the official documentation [here](https://www.emailjs.com/docs/) or follow this short tutorial [here](https://senuravihanjayadeva.medium.com/send-emails-using-react-through-emailjs-a9d4b21193a7) 20 | 21 | ## How to use it 22 | 23 | To use this template: 24 | 1. Clone the repository to your local machine, 25 | 2. run `npm install` to install all the required dependencies and 26 | 3. run `npm start` to view the website locally. 27 | Feel free to edit and make changes. 28 | 29 | You can also Fork the repo and clone to your local machine, make desired changes and enjoy. 30 | -------------------------------------------------------------------------------- /build.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/build.zip -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mld", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://mld.ng/", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.1", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "aos": "^3.0.0-beta.6", 11 | "axios": "^0.24.0", 12 | "emailjs-com": "^3.2.0", 13 | "notiflix": "^3.2.2", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-router-dom": "^6.2.1", 17 | "react-router-hash-link": "^2.4.3", 18 | "react-scripts": "5.0.0", 19 | "react-transition-group": "^4.4.2", 20 | "web-vitals": "^2.1.2" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "autoprefixer": "^10.4.0", 48 | "postcss": "^8.4.5", 49 | "tailwindcss": "^3.0.7" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import AOS from 'aos'; 3 | import "aos/dist/aos.css"; 4 | import './index.css'; 5 | import { 6 | BrowserRouter as Router, 7 | Routes, 8 | Route 9 | } from 'react-router-dom'; 10 | // All pages 11 | import Home from './pages/Home'; 12 | import Contact from './pages/Contact'; 13 | import DemoProduct from './pages/DemoProduct'; 14 | 15 | import {useDocTitle} from './components/CustomHook'; 16 | import ScrollToTop from './components/ScrollToTop'; 17 | 18 | function App() { 19 | useEffect(() => { 20 | const aos_init = () => { 21 | AOS.init({ 22 | once: true, 23 | duration: 1000, 24 | easing: 'ease-out-cubic', 25 | }); 26 | } 27 | 28 | window.addEventListener('load', () => { 29 | aos_init(); 30 | }); 31 | }, []); 32 | 33 | useDocTitle("MLD | Molad e Konsult - Bespoke Web and Mobile Applications"); 34 | 35 | return ( 36 | <> 37 | 38 | 39 | 40 | } /> 41 | } /> 42 | } /> 43 | 44 | 45 | 46 | 47 | ); 48 | } 49 | 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /src/components/Clients.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import kws from '../images/clients/kws.png'; 3 | import geps from '../images/clients/geps.png'; 4 | import protergia from '../images/clients/protergia.png'; 5 | 6 | const clientImage = { 7 | height: '10rem', 8 | width: 'auto', 9 | mixBlendMode: 'colorBurn' 10 | } 11 | 12 | const Clients = () => { 13 | return ( 14 |
15 |
16 |
17 |

Our Clients

18 |
19 |
20 |
21 |

Some of our clients.

22 |
23 | 24 |
25 |
26 |
27 | client 28 |
29 | 30 |
31 | client 32 |
33 | 34 |
35 | client 36 |
37 | 38 | 39 |
40 |
41 |
42 |
43 | ) 44 | } 45 | 46 | export default Clients; -------------------------------------------------------------------------------- /src/components/Cta.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | const Cta = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |

Are you ready to scale your business?

10 |

Get in touch and let us build something amazing together!

11 |
12 | 13 |
14 | Send a message 15 | 16 | 17 |
18 |
19 |
20 |
21 | ); 22 | } 23 | 24 | export default Cta; -------------------------------------------------------------------------------- /src/components/CustomHook.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | const useDocTitle = title => { 4 | const [doctitle, setDocTitle] = useState(title); 5 | 6 | useEffect(() => { 7 | document.title = doctitle; 8 | }, [doctitle]); 9 | 10 | return [doctitle, setDocTitle]; 11 | }; 12 | 13 | export {useDocTitle}; -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | import { HashLink } from 'react-router-hash-link'; 4 | 5 | const Footer = () => { 6 | return ( 7 | <> 8 | 110 | 111 | ) 112 | } 113 | export default Footer; 114 | -------------------------------------------------------------------------------- /src/components/Hero.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import NavBar from '../components/Navbar/NavBar'; 4 | import heroImg from '../images/web-dev.svg'; 5 | 6 | const Hero = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 |

19 | {/* We build digital solutions to help businesses scale */} 20 | Bespoke software solutions for your unique business needs 21 |

22 |
We are a team of highly motivated and skilled developers dedicated to delivering only the best software.
23 |
24 | 25 | Learn more 26 | 27 | 28 | {/* 29 | Get Started 30 | 31 | */} 32 | {/* 33 | Learn More 34 | 35 | */} 36 |
37 |
38 |
39 | card img 40 |
41 |
42 |
43 |
44 | 45 | ) 46 | } 47 | 48 | export default Hero; -------------------------------------------------------------------------------- /src/components/Intro.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import img from '../images/Web-developer.svg'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | const Intro = () => { 6 | return ( 7 | <> 8 |
9 | 10 |
11 |
12 | card img 13 |
14 |
15 | 16 |

We develop high quality bespoke web and mobile applications for organizations, institutions and SMEs

17 |
18 |

Our team is well vast in software development and is ready to help develop the applications of your choice.

19 |
20 | 21 |
22 |

We take responsibility for building custom software solutions that caters for automation of your business processes and improve efficiency.

23 |
24 | 25 | Contact us 26 | 27 | 28 |
29 |
30 |
31 | 32 | ) 33 | } 34 | 35 | export default Intro; -------------------------------------------------------------------------------- /src/components/Navbar/NavBar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import NavLinks from '../Navbar/NavLinks'; 3 | import { HashLink } from 'react-router-hash-link'; 4 | 5 | 6 | const NavBar = () => { 7 | const [top, setTop] = useState(!window.scrollY); 8 | const [isOpen, setisOpen] = React.useState(false); 9 | function handleClick() { 10 | setisOpen(!isOpen); 11 | } 12 | 13 | 14 | useEffect(() => { 15 | const scrollHandler = () => { 16 | window.pageYOffset > 10 ? setTop(false) : setTop(true) 17 | }; 18 | window.addEventListener('scroll', scrollHandler); 19 | return () => window.removeEventListener('scroll', scrollHandler); 20 | }, [top]); 21 | 22 | return ( 23 | 53 | ) 54 | 55 | } 56 | 57 | 58 | export default NavBar; 59 | -------------------------------------------------------------------------------- /src/components/Navbar/NavLinks.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { HashLink } from 'react-router-hash-link'; 3 | 4 | const NavLinks = () => { 5 | return ( 6 | <> 7 | 8 | About 9 | 10 | 11 | Services 12 | 13 | 14 | Portfolio 15 | 16 | 17 | Contact Us 18 | 19 | 20 | Demo our products 21 | 22 | 23 | ) 24 | } 25 | 26 | export default NavLinks; 27 | -------------------------------------------------------------------------------- /src/components/Portfolio.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | const Portfolio = () => { 5 | return ( 6 | <> 7 |
8 |

Products

9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |
17 |

Business Management System

18 |

19 | Our Business Management System is a robust and easily scalable system that streamlines business operations, increase efficiency, and ultimately drive growth and profitability for your business. 20 | With features such as employee management, finance control, and many more modules to effectively manage all aspects of a business. 21 | All data is stored in the cloud and as such it is easily accessible from all devices and from any location. 22 |

23 |
24 | 25 | Schedule Demo 26 | 27 | 28 |
29 |
30 |
31 | 32 |
33 |
34 |

School Management Portal

35 |

36 | Our all encompassing School Management Portal is the only solution needed for any institution. 37 | The School Management Portal (SMP) is a tool that can help educational institutions of all kinds manage their administrative tasks, automate processes, and streamline communication between teachers, students, parents, and administrators. 38 | The software can be used to manage all aspects of school operations, including student enrollment, attendance, grades, schedules, and more. 39 |

40 |
41 | 42 | Schedule Demo 43 | 44 | 45 |
46 | 47 | {/*
    48 |
  • 49 | 50 | 51 | 52 | 53 | 54 | Free Setup Guidance 55 |
    • 56 |
*/} 57 |
58 |
59 | 60 |
61 |
62 |

Payroll Management System

63 |

64 | The Payroll Management System automates the process of employee payments for businesses and organizations of different sizes. It helps to ensure that your employees get paid accurately and on time, while also reducing the time and effort required to manage payroll manually, with this system in place, you enjoy benefits such as: 65 | increased accuracy in employee payments. It can also integrate into an existing management system through well-structured APIs. 66 |

67 |
68 | 69 | Schedule Demo 70 | 71 | 72 |
73 |
74 |
75 | 76 |
77 |
78 |

Event Management System

79 |

80 | Our event management system helps to manage different types of events, whether weddings, burials or any kind of event. With an easily customizable menu, you get to define your user experience and make your event fully customizable and memorable. 81 | With use cases already recorded for quite a number of events, we can assure you of a stress-less event mangement platform. 82 |

83 |
84 | 85 | Schedule Demo 86 | 87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | ) 96 | } 97 | 98 | export default Portfolio; -------------------------------------------------------------------------------- /src/components/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | // import { useLocation } from "react-router-dom"; 3 | 4 | const ScrollToTop = (props) => { 5 | // const location = useLocation(); 6 | useEffect(() => { 7 | window.scrollTo({top: 0, left: 0, behavior: 'smooth' }); 8 | }, []); 9 | 10 | return <> 11 | {props.children} 12 | 13 | }; 14 | 15 | export default ScrollToTop; 16 | -------------------------------------------------------------------------------- /src/components/Services.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import img from '../images/web.svg'; 3 | import img2 from '../images/app.svg'; 4 | import img3 from '../images/hosting.svg'; 5 | import img4 from '../images/consultation.svg'; 6 | 7 | const Services = () => { 8 | 9 | return ( 10 |
11 |
12 |
13 |

services

14 | 15 |
16 |
17 |
18 |

We are deeply committed to the growth and success of our clients.

19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | card img 27 |

Web Development

28 |

29 | We specialize in creating and optimizing high-quality, custom websites for businesses and organizations of all sizes. Building mobile-friendly and easy-to-use websites and applications for clients. 30 |

31 |
32 |
33 | 34 |
35 |
36 | card img 37 |

Mobile App Development

38 |

39 | We develop high-quality, custom cross-platform mobile applications that are robust and optimized for performance, scalability, and accessibility. 40 |

41 |
42 |
43 | 44 |
45 |
46 | card img 47 |

Domain and Hosting Services

48 |

49 | We provide domain registration and web hosting services to individuals and organizations to enable them gain visibility in the digital space. 50 |

51 |
52 |
53 | 54 |
55 |
56 | card img 57 |

General IT Consultations

58 |

59 | Our IT consultations service provides expert guidance and support for businesses and individuals looking to optimize their technology solutions. 60 |

61 |
62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 |
71 |
72 | 73 |
74 |

We Build

76 |
77 |

78 | With over 10 years experience in software analysis and design and a deep understanding of the latest IT trends and solutions, we provide customized recommendations and strategies to help you improve your operations, reduce costs, and increase efficiency. 79 |

80 |
81 |
82 |
83 |
84 | 85 |
86 |

We Collaborate

87 |
88 |

We can collaborate with your existing tech team to scale existing software applications or design customized software applications that suits your everyday need and simplifies various processes.

89 |
90 |
91 |
92 |
93 |
94 |
95 | ) 96 | } 97 | 98 | export default Services; -------------------------------------------------------------------------------- /src/images/Web-developer.svg: -------------------------------------------------------------------------------- 1 | Web Developer -------------------------------------------------------------------------------- /src/images/app.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/clients/geps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/src/images/clients/geps.png -------------------------------------------------------------------------------- /src/images/clients/kws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/src/images/clients/kws.png -------------------------------------------------------------------------------- /src/images/clients/protergia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Osalumense/mld/edfb7820c6f6793a395e55d845750351730eb89f/src/images/clients/protergia.png -------------------------------------------------------------------------------- /src/images/consultation.svg: -------------------------------------------------------------------------------- 1 | 14 -------------------------------------------------------------------------------- /src/images/footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/hero-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/hero-img.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/hosting.svg: -------------------------------------------------------------------------------- 1 | Data hosting -------------------------------------------------------------------------------- /src/images/web-dev.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/web.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); 6 | 7 | body { 8 | margin: 0; 9 | font-family: 'Lato', sans-serif; 10 | } 11 | 12 | .hero { 13 | background: url(./images/hero-bg.svg) top center no-repeat; 14 | background-size: cover; 15 | } 16 | 17 | .footer { 18 | background: url(./images/footer.svg) top center no-repeat; 19 | background-size: cover; 20 | } 21 | 22 | .cta { 23 | background: linear-gradient(rgba(2,2,2,.7),rgba(0,0,0,.7)),url(https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80) fixed center center; 24 | } 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /src/pages/Contact.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import NavBar from '../components/Navbar/NavBar'; 3 | import Footer from '../components/Footer'; 4 | import {useDocTitle} from '../components/CustomHook'; 5 | import axios from 'axios'; 6 | // import emailjs from 'emailjs-com'; 7 | import Notiflix from 'notiflix'; 8 | 9 | const Contact = () => { 10 | useDocTitle('MLD | Molad e Konsult - Send us a message') 11 | const [firstName, setFirstName] = useState('') 12 | const [lastName, setLastName] = useState('') 13 | const [email, setEmail] = useState('') 14 | const [phone, setPhone] = useState('') 15 | const [message, setMessage] = useState('') 16 | const [errors, setErrors] = useState([]) 17 | 18 | const clearErrors = () => { 19 | setErrors([]) 20 | } 21 | 22 | const clearInput = () => { 23 | setFirstName('') 24 | setLastName('') 25 | setEmail('') 26 | setPhone('') 27 | setMessage('') 28 | } 29 | 30 | const sendEmail = (e) => { 31 | e.preventDefault(); 32 | document.getElementById('submitBtn').disabled = true; 33 | document.getElementById('submitBtn').innerHTML = 'Loading...'; 34 | let fData = new FormData(); 35 | fData.append('first_name', firstName) 36 | fData.append('last_name', lastName) 37 | fData.append('email', email) 38 | fData.append('phone_number', phone) 39 | fData.append('message', message) 40 | 41 | axios({ 42 | method: "post", 43 | url: process.env.REACT_APP_CONTACT_API, 44 | data: fData, 45 | headers: { 46 | 'Content-Type': 'multipart/form-data' 47 | } 48 | }) 49 | .then(function (response) { 50 | document.getElementById('submitBtn').disabled = false; 51 | document.getElementById('submitBtn').innerHTML = 'send message'; 52 | clearInput() 53 | //handle success 54 | Notiflix.Report.success( 55 | 'Success', 56 | response.data.message, 57 | 'Okay', 58 | ); 59 | }) 60 | .catch(function (error) { 61 | document.getElementById('submitBtn').disabled = false; 62 | document.getElementById('submitBtn').innerHTML = 'send message'; 63 | //handle error 64 | const { response } = error; 65 | if(response.status === 500) { 66 | Notiflix.Report.failure( 67 | 'An error occurred', 68 | response.data.message, 69 | 'Okay', 70 | ); 71 | } 72 | if(response.data.errors !== null) { 73 | setErrors(response.data.errors) 74 | } 75 | 76 | }); 77 | } 78 | return ( 79 | <> 80 |
81 | 82 |
83 |
84 |
85 | 86 |
87 | 88 |
89 |
90 |

Send us a message

91 |
92 |
93 |
94 | setFirstName(e.target.value)} 101 | onKeyUp={clearErrors} 102 | /> 103 | {errors && 104 |

{errors.first_name}

105 | } 106 |
107 | 108 |
109 | setLastName(e.target.value)} 116 | onKeyUp={clearErrors} 117 | /> 118 | {errors && 119 |

{errors.last_name}

120 | } 121 |
122 | 123 |
124 | setEmail(e.target.value)} 131 | onKeyUp={clearErrors} 132 | /> 133 | {errors && 134 |

{errors.email}

135 | } 136 |
137 | 138 |
139 | setPhone(e.target.value)} 146 | onKeyUp={clearErrors} 147 | /> 148 | {errors && 149 |

{errors.phone_number}

150 | } 151 |
152 |
153 |
154 | 162 | {errors && 163 |

{errors.message}

164 | } 165 |
166 |
167 | 171 |
172 |
173 |
174 |
176 |
177 | 178 |
179 |
180 | 181 |
182 |
183 |

Office Address

184 |

Ilo Awela, Ota, Ogun State

185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 | 193 |
194 |

Call Us

195 |

Tel: 08055384406

196 | 197 |
198 |

Send an E-mail

199 |

info@mld.ng

200 |
201 | 202 |
203 |
204 | 205 | 213 |
214 |
215 |
216 |
217 |