├── .gitignore ├── README.md ├── package.json ├── public ├── _redirects ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── assets │ ├── carousel │ │ ├── 1-new.jpg │ │ ├── 2-new.jpg │ │ ├── 3-new.jpg │ │ └── 4-new.jpg │ ├── categories │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ └── 07.jpg │ ├── img-1.jpg │ ├── nav-logo.png │ ├── project │ │ ├── 01.jpeg │ │ ├── 02.jpeg │ │ ├── 03.jpeg │ │ └── 04.jpeg │ └── services │ │ └── services-new.jpg ├── components │ ├── about │ │ └── About.jsx │ ├── carousel │ │ └── CarouselContainer.jsx │ ├── footer │ │ └── Footer.jsx │ ├── navbar │ │ └── Navbar.jsx │ └── services │ │ └── Services.jsx ├── config │ └── firebase │ │ └── firebase-config.js ├── index.css ├── index.js ├── pages │ ├── auth │ │ └── Login.jsx │ ├── contact │ │ └── ContactUs.jsx │ ├── dashboard │ │ ├── DashboardHome.jsx │ │ ├── DashboardProjects.jsx │ │ └── DashboardProjectsAdd.jsx │ ├── home │ │ └── HomePage.jsx │ ├── projects │ │ └── ProjectsPage.jsx │ └── services │ │ └── ServicesPage.jsx └── routes │ ├── ClientRoutes.jsx │ └── router.js └── tailwind.config.js /.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 | package-lock.json 8 | /.idea 9 | 10 | # testing 11 | /coverage 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glimpseofdesign-frontend 2 | This repo contains the folder of front end development of the Glimpse of design website 3 | 4 | This is official Glimpse of Design Website 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glimpse-frontend-new", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emailjs/browser": "^3.10.0", 7 | "@emotion/react": "^11.10.5", 8 | "@emotion/styled": "^11.10.5", 9 | "@firebase/firestore": "^3.8.0", 10 | "@headlessui/react": "^1.7.7", 11 | "@heroicons/react": "^2.0.13", 12 | "@react-icons/all-files": "^4.1.0", 13 | "@testing-library/jest-dom": "^5.16.5", 14 | "@testing-library/react": "^13.4.0", 15 | "@testing-library/user-event": "^13.5.0", 16 | "firebase": "^9.15.0", 17 | "formik": "^2.2.9", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "react-icons": "^4.7.1", 21 | "react-multi-carousel": "^2.8.2", 22 | "react-paginate": "^8.1.4", 23 | "react-router-dom": "^6.6.2", 24 | "react-scripts": "5.0.1", 25 | "react-spinners": "^0.13.8", 26 | "styled-components": "^5.3.6", 27 | "sweetalert2": "^11.7.0", 28 | "uuid": "^9.0.0", 29 | "web-vitals": "^2.1.4", 30 | "yup": "^0.32.11" 31 | }, 32 | "scripts": { 33 | "start": "react-scripts start", 34 | "build": "react-scripts build", 35 | "test": "react-scripts test", 36 | "eject": "react-scripts eject" 37 | }, 38 | "eslintConfig": { 39 | "extends": [ 40 | "react-app", 41 | "react-app/jest" 42 | ] 43 | }, 44 | "browserslist": { 45 | "production": [ 46 | ">0.2%", 47 | "not dead", 48 | "not op_mini all" 49 | ], 50 | "development": [ 51 | "last 1 chrome version", 52 | "last 1 firefox version", 53 | "last 1 safari version" 54 | ] 55 | }, 56 | "devDependencies": { 57 | "tailwindcss": "^3.2.4" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/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/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/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/assets/carousel/1-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/carousel/1-new.jpg -------------------------------------------------------------------------------- /src/assets/carousel/2-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/carousel/2-new.jpg -------------------------------------------------------------------------------- /src/assets/carousel/3-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/carousel/3-new.jpg -------------------------------------------------------------------------------- /src/assets/carousel/4-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/carousel/4-new.jpg -------------------------------------------------------------------------------- /src/assets/categories/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/01.jpg -------------------------------------------------------------------------------- /src/assets/categories/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/02.jpg -------------------------------------------------------------------------------- /src/assets/categories/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/03.jpg -------------------------------------------------------------------------------- /src/assets/categories/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/04.jpg -------------------------------------------------------------------------------- /src/assets/categories/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/05.jpg -------------------------------------------------------------------------------- /src/assets/categories/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/06.jpg -------------------------------------------------------------------------------- /src/assets/categories/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/categories/07.jpg -------------------------------------------------------------------------------- /src/assets/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/img-1.jpg -------------------------------------------------------------------------------- /src/assets/nav-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/nav-logo.png -------------------------------------------------------------------------------- /src/assets/project/01.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/project/01.jpeg -------------------------------------------------------------------------------- /src/assets/project/02.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/project/02.jpeg -------------------------------------------------------------------------------- /src/assets/project/03.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/project/03.jpeg -------------------------------------------------------------------------------- /src/assets/project/04.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/project/04.jpeg -------------------------------------------------------------------------------- /src/assets/services/services-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glimpse-of-Design/glimpseofdesign-frontend/2b9d6b6fc48ded91c46d83c4629c56b8e3d3b8e3/src/assets/services/services-new.jpg -------------------------------------------------------------------------------- /src/components/about/About.jsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
6 |
7 |

8 | About Us 9 |

10 |
11 |
12 |
13 |
14 |

15 | Who we are 16 |

17 |

18 | We are an interior design firm that creates unique interiors which 19 | builts functionality and easthetic apearance with a Glimpse to win 20 | clients hearts. 21 |

22 |
23 |
24 | A group of People 29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | export default About; 36 | -------------------------------------------------------------------------------- /src/components/carousel/CarouselContainer.jsx: -------------------------------------------------------------------------------- 1 | import Carousel from 'react-multi-carousel'; 2 | import 'react-multi-carousel/lib/styles.css'; 3 | import img1 from '../../assets/carousel/1-new.jpg'; 4 | import img2 from '../../assets/carousel/2-new.jpg'; 5 | import img3 from '../../assets/carousel/3-new.jpg'; 6 | import img4 from '../../assets/carousel/4-new.jpg'; 7 | 8 | const responsiveImageHero = { 9 | desktop: { 10 | breakpoint: {max: 3000, min: 1024}, 11 | items: 1 12 | }, 13 | tablet: { 14 | breakpoint: {max: 1024, min: 464}, 15 | items: 1 16 | }, 17 | mobile: { 18 | breakpoint: {max: 464, min: 0}, 19 | items: 1 20 | } 21 | }; 22 | 23 | const images = [ 24 | img1, img2, img3, img4 25 | ]; 26 | 27 | const CarouselContainer = () => { 28 | return ( 29 | 36 | {images.slice(0, 4).map((image, id) => { 37 | return ( 38 | {'img'} 50 | ); 51 | })} 52 | 53 | ); 54 | } 55 | 56 | export default CarouselContainer; 57 | -------------------------------------------------------------------------------- /src/components/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import {onAuthStateChanged} from 'firebase/auth'; 2 | import {useEffect, useState} from 'react'; 3 | import {Link} from 'react-router-dom'; 4 | import {auth} from '../../config/firebase/firebase-config'; 5 | 6 | const Footer = () => { 7 | const [user, setUser] = useState({}); 8 | 9 | useEffect(() => { 10 | onAuthStateChanged(auth, (currentUser) => { 11 | setUser(currentUser); 12 | }); 13 | }, [user]); 14 | return ( 15 | 161 | ) 162 | } 163 | 164 | export default Footer; 165 | -------------------------------------------------------------------------------- /src/components/navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import {Disclosure, Menu, Transition} from '@headlessui/react'; 2 | import {Bars3Icon, XMarkIcon} from '@heroicons/react/24/outline'; 3 | import {onAuthStateChanged, signOut} from 'firebase/auth'; 4 | import {Fragment, useEffect, useState} from 'react'; 5 | import {Link, NavLink} from 'react-router-dom'; 6 | import navLogo from '../../assets/nav-logo.png'; 7 | import {auth} from '../../config/firebase/firebase-config'; 8 | 9 | const navigation = [ 10 | {name: 'HOME', to: '/', current: false}, 11 | {name: 'PROJECTS', to: '/projects', current: false}, 12 | {name: 'SERVICES', to: '/services', current: false}, 13 | {name: 'CONTACT US', to: '/contact', current: false}, 14 | ] 15 | 16 | function classNames(...classes) { 17 | return classes.filter(Boolean).join(' ') 18 | } 19 | 20 | const logout = async () => { 21 | await signOut(auth); 22 | }; 23 | 24 | export default function Navbar() { 25 | const [user, setUser] = useState({}); 26 | 27 | useEffect(() => { 28 | onAuthStateChanged(auth, (currentUser) => { 29 | setUser(currentUser); 30 | }); 31 | }, [user]); 32 | 33 | return ( 34 | 35 | {({open}) => ( 36 | <> 37 |
38 |
39 |
40 | {/* Mobile menu button*/} 41 | 43 | Open main menu 44 | {open ? ( 45 | 50 |
51 |
53 | 54 | Glimpse of Design 59 | Glimpse of Design 64 | 65 |
67 |
68 | {navigation.map((item) => ( 69 | 75 | {item.name} 76 | 77 | ))} 78 |
79 |
80 |
81 | 82 | {user && ( 83 |
85 | 86 | {/* Profile dropdown */} 87 | 88 |
89 | 91 | Open user menu 92 | 97 | 98 |
99 | 108 | 110 | 111 | {({active}) => ( 112 | 116 | Dashboard 117 | 118 | )} 119 | 120 | 121 | {({active}) => ( 122 |
126 | Sign out 127 |
128 | )} 129 | 130 | 131 | 132 | 133 |
134 | )} 135 |
136 |
137 | 138 | {/*Mobile View*/} 139 | 140 |
141 | {navigation.map((item) => ( 142 | 149 | {item.name} 150 | 151 | ))} 152 |
153 | 154 | 155 | )} 156 | 157 | ) 158 | } 159 | -------------------------------------------------------------------------------- /src/components/services/Services.jsx: -------------------------------------------------------------------------------- 1 | import {BsArrowRight} from 'react-icons/bs'; 2 | import {Link} from 'react-router-dom'; 3 | 4 | const Services = () => { 5 | return ( 6 |
7 |
9 |
10 |

11 | Services 12 |

13 |
14 |
15 |
16 |
17 | A group of People 22 |
23 |
24 |

25 | What we do 26 |

27 |

28 | Our services in design process are always flexible to reach clients 29 | budgets. This includes layout planning, moodboard visualizing, 3D 30 | visualizing, technical detailing, Colour and Material selecting, 31 | Furniture Selecting and finally Accessorizing. 32 |

33 |
34 | 40 |
41 |
42 |
43 |
44 | ); 45 | }; 46 | 47 | export default Services; 48 | -------------------------------------------------------------------------------- /src/config/firebase/firebase-config.js: -------------------------------------------------------------------------------- 1 | import {getFirestore} from '@firebase/firestore'; 2 | import {getAnalytics} from 'firebase/analytics'; 3 | import {initializeApp} from 'firebase/app'; 4 | import {getAuth} from 'firebase/auth'; 5 | import {getStorage} from 'firebase/storage'; 6 | 7 | const firebaseConfig = { 8 | apiKey: 'AIzaSyDjPNj3UUd87nOJViI6cop1SjZ5o8hQRCE', 9 | authDomain: 'glimpseofdesign-backend.firebaseapp.com', 10 | projectId: 'glimpseofdesign-backend', 11 | storageBucket: 'glimpseofdesign-backend.appspot.com', 12 | messagingSenderId: '259832056346', 13 | appId: '1:259832056346:web:084370a87c57f5f266dfa3', 14 | measurementId: 'G-B5WGR8G115' 15 | }; 16 | 17 | const app = initializeApp(firebaseConfig); 18 | export const db = getFirestore(); 19 | export const storage = getStorage(app); 20 | export const auth = getAuth(app); 21 | 22 | getAnalytics(app); 23 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .active { 7 | background-color: #d9a527; 8 | color: white; 9 | } 10 | 11 | .text-error { 12 | color: red; 13 | } 14 | .carouselContainer{ 15 | margin: 0 auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import {RouterProvider} from 'react-router-dom'; 4 | import './index.css'; 5 | import router from './routes/router'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /src/pages/auth/Login.jsx: -------------------------------------------------------------------------------- 1 | import {onAuthStateChanged, signInWithEmailAndPassword} from 'firebase/auth'; 2 | import {Field, Form, Formik} from 'formik'; 3 | import React, {useState} from 'react'; 4 | import {useNavigate} from 'react-router-dom'; 5 | import Swal from 'sweetalert2'; 6 | import * as Yup from 'yup'; 7 | import logo from '../../assets/nav-logo.png'; 8 | import {auth} from '../../config/firebase/firebase-config'; 9 | 10 | const DisplayingErrorMessagesSchema = Yup.object().shape({ 11 | email: Yup.string() 12 | .min(2, 'Too Short!') 13 | .max(50, 'Too Long!') 14 | .required('Required'), 15 | password: Yup.string() 16 | .min(2, 'Too Short!') 17 | .max(50, 'Too Long!') 18 | .required('Required'), 19 | }); 20 | 21 | const Login = () => { 22 | const [, setUser] = useState({}); 23 | const navigate = useNavigate(); 24 | 25 | onAuthStateChanged(auth, (currentUser) => { 26 | setUser(currentUser); 27 | }); 28 | 29 | return ( 30 |
31 |

Displaying Error Messages

32 | { 39 | const login = async () => { 40 | try { 41 | await signInWithEmailAndPassword( 42 | auth, 43 | values.email, 44 | values.password 45 | ); 46 | await Swal.fire({ 47 | position: 'top-end', 48 | title: 'Successfully logged in', 49 | showConfirmButton: false, 50 | timer: 1500, 51 | }); 52 | navigate('/dashboard/projects'); 53 | } catch (e) { 54 | await Swal.fire({ 55 | position: 'top-end', 56 | icon: 'error', 57 | title: 'Your Username or password incorrect', 58 | showConfirmButton: false, 59 | timer: 1500, 60 | }); 61 | navigate('/login'); 62 | } 63 | } 64 | login().then(); 65 | }} 66 | > 67 | {({errors, touched}) => ( 68 |
69 |
70 | Glimpse of Design 71 |
73 |

74 | Login to your account 75 |

76 |
77 |
78 |
79 | 83 | 88 | {touched.email && errors.email && ( 89 |
{errors.email}
90 | )} 91 |
92 |
93 | 94 |
95 |
96 | 100 | 105 | {touched.password && errors.password && ( 106 |
{errors.password}
107 | )} 108 |
109 |
110 | 111 |
112 | 118 |
119 |
120 |
121 |
122 |
123 | )} 124 | 125 |
126 | ); 127 | }; 128 | 129 | export default Login; 130 | -------------------------------------------------------------------------------- /src/pages/contact/ContactUs.jsx: -------------------------------------------------------------------------------- 1 | import emailjs from '@emailjs/browser'; 2 | import React, {useRef, useState} from 'react'; 3 | import {FaPhoneAlt} from 'react-icons/fa'; 4 | import {MdEmail} from 'react-icons/md'; 5 | import {useNavigate} from 'react-router-dom'; 6 | import Swal from 'sweetalert2'; 7 | 8 | const ContactUs = () => { 9 | const [pressedEmail, setPressedEmail] = useState(false); 10 | const navigate = useNavigate(); 11 | 12 | const form = useRef(); 13 | 14 | const sendEmail = (e) => { 15 | e.preventDefault(); 16 | 17 | emailjs.sendForm('service_o5gc3lh', 'template_jk9ypea', form.current, '2ZGngDdyigPc-3rlJ') 18 | .then((result) => { 19 | Swal.fire({ 20 | position: 'top-end', 21 | title: 'Email Sent Successfully', 22 | showConfirmButton: false, 23 | timer: 1500, 24 | }).then(); 25 | navigate("/"); 26 | console.log(result.text); 27 | }, (error) => { 28 | Swal.fire({ 29 | position: 'top-end', 30 | icon: 'error', 31 | title: 'Email Send Error', 32 | showConfirmButton: false, 33 | timer: 1500, 34 | }).then(); 35 | console.log(error.text); 36 | }); 37 | }; 38 | 39 | return ( 40 |
41 | {!pressedEmail && ( 42 |
43 |
44 |

45 | Contact us 46 |

47 |

48 | Need to get in touch with us? 49 |

50 |
51 |
52 |
53 |
55 | 56 |
57 |

Phone:

58 |

+94 71 7662323

59 |
60 |
setPressedEmail(!pressedEmail)}> 62 |
64 | 65 |
66 |

Email:

67 |

glimpseofdesign@gmail.com

68 |
69 |
70 |
71 | )} 72 | 73 | {pressedEmail && ( 74 |
75 |
76 |
77 |
78 |

79 | Contact us 80 |

81 |

82 | Need to get in touch with us? 83 |

84 |
85 |
86 |
87 |
88 | 91 | 96 |
97 |
98 |
99 |
100 | 106 | 111 |
112 |
113 |
114 |
115 | 121 | 125 |
126 |
127 |
128 | 133 |
134 |
135 |
136 |
137 |
138 | )} 139 |
140 | ) 141 | } 142 | export default ContactUs; 143 | -------------------------------------------------------------------------------- /src/pages/dashboard/DashboardHome.jsx: -------------------------------------------------------------------------------- 1 | import {Menu, Transition} from '@headlessui/react'; 2 | import {signOut} from 'firebase/auth'; 3 | import {collection, getDocs} from 'firebase/firestore'; 4 | import {Fragment, useEffect, useState} from 'react'; 5 | import {Link, NavLink, Outlet, useNavigate} from 'react-router-dom'; 6 | import navLogo from '../../assets/nav-logo.png'; 7 | import {auth, db} from '../../config/firebase/firebase-config'; 8 | 9 | const projectsCollectionRef = collection(db, 'projects'); 10 | 11 | const DashboardHome = () => { 12 | const [projects, setProjects] = useState([]); 13 | const navigate = useNavigate(); 14 | 15 | const getProjects = async () => { 16 | const data = await getDocs(projectsCollectionRef); 17 | setProjects(data.docs.map((doc) => ({...doc.data(), id: doc.id}))); 18 | }; 19 | 20 | const logout = async () => { 21 | await signOut(auth); 22 | navigate('/'); 23 | }; 24 | 25 | useEffect(() => { 26 | getProjects().catch((err) => console.log(err)); 27 | }, []); 28 | 29 | return ( 30 |
31 |
32 |
33 | 34 | Glimpse of Design 35 | 36 |
37 |
38 | 74 |
75 |
76 | 77 |
78 |
79 |
80 |
82 |
83 |
84 | Dashboard 85 |
86 |
87 | 88 |
90 | 91 | {/* Profile dropdown */} 92 | 93 |
94 | 96 | Open user menu 97 | 102 | 103 |
104 | 113 | 115 | 116 | 120 | Go to Home 121 | 122 | 123 | 124 |
128 | Sign out 129 |
130 | 131 | 132 | 133 | 134 |
135 | 136 |
137 |
138 |
139 | 140 | Projects 141 | {projects.length} 143 | 144 | 148 | Add Projects 149 | 150 |
151 | 152 |
153 |
154 |
155 |
156 |
157 | ) 158 | } 159 | 160 | export default DashboardHome; 161 | -------------------------------------------------------------------------------- /src/pages/dashboard/DashboardProjects.jsx: -------------------------------------------------------------------------------- 1 | import {Menu, Transition} from '@headlessui/react'; 2 | import {collection, deleteDoc, doc, getDoc, getDocs, updateDoc} from 'firebase/firestore'; 3 | import {Field, Form, Formik, useField} from 'formik'; 4 | import React, {Fragment, useEffect, useState} from 'react'; 5 | import {AiOutlineClose} from 'react-icons/ai'; 6 | import ReactPaginate from 'react-paginate'; 7 | import Swal from 'sweetalert2'; 8 | import * as Yup from 'yup'; 9 | import img1 from '../../assets/project/01.jpeg'; 10 | import {db} from '../../config/firebase/firebase-config'; 11 | 12 | const projectsCollectionRef = collection(db, 'projects'); 13 | const PER_PAGE = 6; 14 | 15 | const DisplayingErrorMessagesSchema = Yup.object().shape({ 16 | projectName: Yup.string() 17 | .min(2, 'Too Short!') 18 | .max(50, 'Too Long!') 19 | .required('Required'), 20 | projectSummary: Yup.string() 21 | .min(2, 'Too Short!') 22 | .max(50, 'Too Long!') 23 | .required('Required'), 24 | }); 25 | 26 | const MyTextArea = ({label, ...props}) => { 27 | const [field, meta] = useField(props); 28 | return ( 29 | <> 30 | 31 |