├── .gitignore
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── assets
        ├── chakraHero.jpg
        └── teamImage.jpg
    ├── components
        ├── AboutUs.js
        ├── ContactUs.js
        ├── DrawerComponent.js
        ├── Footer.js
        ├── Hero.js
        ├── Nav.js
        ├── Services.js
        └── Testimonials.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── theme.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 | 
 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 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 App Generator
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [React Chakra Introduction](https://blog.appseed.us/chakra-ui-react-coding-landing-page/)
 2 | 
 3 | Sample Code for the blog article [React Chakra UI Components - Learn by Coding](https://blog.appseed.us/chakra-ui-react-coding-landing-page/) - Provided by **[App-Generator](https://app-generator.dev/)**.
 4 | 
 5 | The article explains how to use the Chakra UI library in React.js by building a responsive website. The website will be built with Chakra components only, no HTML elements will be used.
 6 | 
 7 | - 👉 [React Chakra Landing Page](https://react-chakra-ui-landing-page.appseed-srv1.com/) - LIVE Demo
 8 | - 👉 [React Apps](https://app-generator.dev/product/?search=react) - index provided by **[App-Generator](https://app-generator.dev/)**
 9 | 
10 | <br />
11 | 
12 | ## How to use it 
13 | 
14 | - Install `NodejS` - version 14.x or higher 
15 | - Install dependencies via `yarn`
16 | - Start the project: `yarn start` 
17 | 
18 | <br />
19 | 
20 | ![React MUI Introduction - Sample Page crafted with MUI.](https://user-images.githubusercontent.com/51070104/167240339-dc157d52-8fc1-410f-b5f1-74ab11205b0b.gif)
21 | 
22 | <br />
23 | 
24 | ## Components
25 | 
26 | - `Header` 
27 | - `Hero`
28 | - `Info Section`
29 | - `AboutUs`
30 | - `Testimonial`
31 | - `ContactUs`
32 | - `Footer`   
33 | 
34 | <br />
35 | 
36 | ## [Getting Started with React](https://app-generator.dev/docs/technologies/react/index.html)
37 | 
38 | React.js is a JavaScript library that allows you to build fast and efficient web applications using the minimum amount of code possible. In React.js, you can break the web layout into components - reusable bits of code that return HTML elements. 
39 | 
40 | - 👉 [JavaScript concepts for React Beginners](https://blog.appseed.us/10-javascript-concepts-for-react-beginners/)
41 | 
42 | <br />
43 | 
44 | ## Chakra UI Library 
45 | 
46 | Chakra UI is a library that allows you to build stunning and modern web applications using various layout components. It differs from other UI frameworks in that it offers accessibility and dark mode support by default. 
47 | 
48 | With Chakra UI, you spend less time building responsive and beautiful websites. If you want to create a web application that allows users to switch between different color modes with minimal lines of code, then Chakra UI is an excellent choice.
49 | 
50 | - 👉 [Chakra UI](https://chakra-ui.com/) - official website  
51 | 
52 | <br />
53 | 
54 | --- 
55 | [React Chakra Introduction](https://blog.appseed.us/chakra-ui-react-coding-landing-page/) - provided by **[App-Generator](https://app-generator.dev/)**. 
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chakra-ui",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@chakra-ui/icons": "^1.1.7",
 7 |     "@chakra-ui/react": "^1.8.8",
 8 |     "@emotion/react": "^11.9.0",
 9 |     "@emotion/styled": "^11.8.1",
10 |     "@testing-library/jest-dom": "^5.16.4",
11 |     "@testing-library/react": "^13.1.1",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "framer-motion": "^6.3.3",
14 |     "react": "^18.1.0",
15 |     "react-dom": "^18.1.0",
16 |     "react-icons": "^4.3.1",
17 |     "react-scripts": "5.0.1",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/app-generator/sample-react-chakra-ui-introduction/65b66d592b0f069c6bd6443993274a91fb5a9db0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Website tutorial built using Chakra UI"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <link rel="preconnect" href="https://fonts.googleapis.com">
19 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20 | <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
21 |     <!--
22 |       Notice the use of %PUBLIC_URL% in the tags above.
23 |       It will be replaced with the URL of the `public` folder during the build.
24 |       Only files inside the `public` folder can be referenced from the HTML.
25 | 
26 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
27 |       work correctly both with client-side routing and a non-root public URL.
28 |       Learn how to configure a non-root public URL by running `npm run build`.
29 |     -->
30 |     <title>Chakra UI | AppSeed</title>
31 |   </head>
32 |   <body>
33 |     <noscript>You need to enable JavaScript to run this app.</noscript>
34 |     <div id="root"></div>
35 |     <!--
36 |       This HTML file is a template.
37 |       If you open it directly in the browser, you will see an empty page.
38 | 
39 |       You can add webfonts, meta tags, or analytics to this file.
40 |       The build step will place the bundled scripts into the <body> tag.
41 | 
42 |       To begin the development, run `npm start` or `yarn start`.
43 |       To create a production bundle, use `npm run build` or `yarn build`.
44 |     -->
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/app-generator/sample-react-chakra-ui-introduction/65b66d592b0f069c6bd6443993274a91fb5a9db0/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/app-generator/sample-react-chakra-ui-introduction/65b66d592b0f069c6bd6443993274a91fb5a9db0/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 AboutUs from './components/AboutUs';
 2 | import ContactUs from './components/ContactUs';
 3 | import Footer from './components/Footer';
 4 | import Hero from './components/Hero';
 5 | import Nav from './components/Nav';
 6 | import Services from './components/Services';
 7 | import Testimonials from './components/Testimonials';
 8 | import React, { useRef } from 'react';
 9 | import { useDisclosure, Box } from '@chakra-ui/react';
10 | import DrawerComponent from './components/DrawerComponent';
11 | 
12 | function App() {
13 |   const { isOpen, onOpen, onClose } = useDisclosure();
14 |   const btnRef = useRef();
15 |   return (
16 |     <Box>
17 |       <Nav ref={btnRef} onOpen={onOpen} />
18 |       <Hero />
19 |       <AboutUs />
20 |       <Services />
21 |       <Testimonials />
22 |       <ContactUs />
23 |       <Footer />
24 | 
25 |       <DrawerComponent isOpen={isOpen} onClose={onClose} btnRef={btnRef} />
26 |     </Box>
27 |   );
28 | }
29 | 
30 | export default App;


--------------------------------------------------------------------------------
/src/assets/chakraHero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/app-generator/sample-react-chakra-ui-introduction/65b66d592b0f069c6bd6443993274a91fb5a9db0/src/assets/chakraHero.jpg


--------------------------------------------------------------------------------
/src/assets/teamImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/app-generator/sample-react-chakra-ui-introduction/65b66d592b0f069c6bd6443993274a91fb5a9db0/src/assets/teamImage.jpg


--------------------------------------------------------------------------------
/src/components/AboutUs.js:
--------------------------------------------------------------------------------
 1 | import { Flex, Spacer, Text, useMediaQuery } from '@chakra-ui/react';
 2 | import { Icon } from '@chakra-ui/react';
 3 | import { FaTools, FaHandshake, FaStar } from 'react-icons/fa';
 4 | import React from 'react';
 5 | 
 6 | const AboutUs = () => {
 7 |   const [isLargerThanMD] = useMediaQuery('(min-width: 48em)');
 8 |   const array = [
 9 |     {
10 |       id: 1,
11 |       text: ' Solving world problems through various web applications using efficient programs and tools',
12 |       icon: FaTools,
13 |     },
14 |     {
15 |       id: 2,
16 |       text: 'Through team work, we collaborate and deliver quality projects of high standards',
17 |       icon: FaHandshake,
18 |     },
19 |     {
20 |       id: 3,
21 |       text: 'Five star service with installament plan is readily available',
22 |       icon: FaStar,
23 |     },
24 |   ];
25 |   return (
26 |     <Flex
27 |       minH="70vh"
28 |       alignItems="center"
29 |       justifyContent="space-between"
30 |       w="full"
31 |       py="16"
32 |       px={isLargerThanMD ? '16' : '6'}
33 |       flexWrap="wrap"
34 |       flexDirection={isLargerThanMD ? 'row' : 'column'}
35 |     >
36 |       {array.map((arr) => (
37 |         <>
38 |           <Flex
39 |             height="300px"
40 |             bg="blackAlpha.200"
41 |             width={isLargerThanMD ? '32%' : 'full'}
42 |             shadow="md"
43 |             p="6"
44 |             alignItems="center"
45 |             justifyContent="center"
46 |             borderRadius="md"
47 |             flexDirection="column"
48 |             textAlign="center"
49 |             mb={isLargerThanMD ? '0' : '4'}
50 |             border="1px solid #C4DDFF"
51 |           >
52 |             <Icon as={arr.icon} boxSize={14} color="blue.600" mb="5" />
53 |             <Text>{arr.text}</Text>
54 |           </Flex>
55 | 
56 |           <Spacer />
57 |         </>
58 |       ))}
59 |     </Flex>
60 |   );
61 | };
62 | 
63 | export default AboutUs;


--------------------------------------------------------------------------------
/src/components/ContactUs.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Flex,
 3 |   FormControl,
 4 |   Text,
 5 |   Input,
 6 |   Textarea,
 7 |   Button,
 8 |   useMediaQuery,
 9 |   useToast,
10 | } from '@chakra-ui/react';
11 | import React from 'react';
12 | 
13 | const ContactUs = () => {
14 |   const [isLargerThanLG] = useMediaQuery('(min-width: 62em)');
15 |   const toast = useToast();
16 |   const submitForm = () => {
17 |     return toast({
18 |       title: 'Message sent!🚀',
19 |       description: 'Thank you for contacting us!',
20 |       status: 'success',
21 |       duration: 9000,
22 |       isClosable: true,
23 |     });
24 |   };
25 |   return (
26 |     <Flex
27 |       w="full"
28 |       minHeight="90vh"
29 |       py="16"
30 |       px={isLargerThanLG ? '16' : '6'}
31 |       alignItems="center"
32 |       flexDirection="column"
33 |       justifyContent="center"
34 |     >
35 |       <Text fontSize="3xl" mb="6">
36 |         Contact Us
37 |       </Text>
38 | 
39 |       <FormControl
40 |         w={isLargerThanLG ? '60%' : 'full'}
41 |         display="flex"
42 |         flexDirection="column"
43 |         alignItems="start"
44 |       >
45 |         <Input
46 |           id="fullName"
47 |           type="text"
48 |           placeholder="Full Name"
49 |           mb="5"
50 |           h="14"
51 |         />
52 | 
53 |         <Input id="email" type="email" placeholder="Email" mb="5" h="14" />
54 | 
55 |         <Input id="subject" type="text" placeholder="Subject" mb="5" h="14" />
56 | 
57 |         <Textarea placeholder="Enter a message" mb="5" rows={7} p="5" />
58 | 
59 |         <Button
60 |           colorScheme="blue"
61 |           size="lg"
62 |           textAlign="left"
63 |           width="200px"
64 |           type="submit"
65 |           onClick={submitForm}
66 |         >
67 |           SUBMIT
68 |         </Button>
69 |       </FormControl>
70 |     </Flex>
71 |   );
72 | };
73 | 
74 | export default ContactUs;
75 | 
76 | 


--------------------------------------------------------------------------------
/src/components/DrawerComponent.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   Drawer,
 4 |   DrawerBody,
 5 |   DrawerHeader,
 6 |   DrawerOverlay,
 7 |   DrawerContent,
 8 |   DrawerCloseButton,
 9 |   Link,
10 |   Flex,
11 | } from '@chakra-ui/react';
12 | 
13 | const DrawerComponent = ({ isOpen, onClose, btnRef }) => {
14 |   return (
15 |     <Drawer
16 |       isOpen={isOpen}
17 |       placement="right"
18 |       onClose={onClose}
19 |       finalFocusRef={btnRef}
20 |       zIndex="popover"
21 |     >
22 |       <DrawerOverlay />
23 | 
24 |       <DrawerContent>
25 |         <DrawerCloseButton />
26 |         <DrawerHeader>Chakra</DrawerHeader>
27 | 
28 |         <DrawerBody>
29 |           <Flex flexDirection="column">
30 |             <Link mb="5">About</Link>
31 |             <Link>More Apps</Link>
32 |           </Flex>
33 |         </DrawerBody>
34 |       </DrawerContent>
35 |     </Drawer>
36 |   );
37 | };
38 | 
39 | export default DrawerComponent;


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import { Flex, Text, Link } from '@chakra-ui/react';
 2 | import React from 'react';
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <Flex
 7 |       w="full"
 8 |       bg="blackAlpha.50"
 9 |       minHeight="20vh"
10 |       flexDirection="column"
11 |       alignItems="center"
12 |       textAlign="center"
13 |       justifyContent="center"
14 |     >
15 |       <Text mb="3">
16 |         Provided by{' '}
17 |         <Link href="https://appseed.us" isExternal color="blue.500">
18 |           AppSeed
19 |         </Link>
20 |       </Text>
21 |       <Text opacity="0.5">Open-Source Sample - Buit with Chakra UI</Text>
22 |     </Flex>
23 |   );
24 | };
25 | 
26 | export default Footer;


--------------------------------------------------------------------------------
/src/components/Hero.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Button,
 4 |   Flex,
 5 |   Img,
 6 |   Spacer,
 7 |   Text,
 8 |   useMediaQuery,
 9 | } from '@chakra-ui/react';
10 | import React from 'react';
11 | import chakraHero from '../assets/chakraHero.jpg';
12 | 
13 | const Hero = () => {
14 |   const [isLargerThanLG] = useMediaQuery('(min-width: 62em)');
15 |   return (
16 |     <Flex
17 |       alignItems="center"
18 |       w="full"
19 |       px={isLargerThanLG ? '16' : '6'}
20 |       py="16"
21 |       minHeight="90vh"
22 |       justifyContent="space-between"
23 |       flexDirection={isLargerThanLG ? 'row' : 'column'}
24 |     >
25 |       <Box mr={isLargerThanLG ? '6' : '0'} w={isLargerThanLG ? '60%' : 'full'}>
26 |         <Text
27 |           fontSize={isLargerThanLG ? '5xl' : '4xl'}
28 |           fontWeight="bold"
29 |           mb="4"
30 |         >
31 |           {' '}
32 |           Chakra UI Sample
33 |         </Text>
34 | 
35 |         <Text mb="6" fontSize={isLargerThanLG ? 'lg' : 'base'} opacity={0.7}>
36 |           Sample Code for the blog article React MUI Components - Learn by Coding. The article explains how to code from scratch all components: 
37 |           navBar, hero section, app features, contact, and footer. 
38 |         </Text>
39 | 
40 |         <Button
41 |           w="200px"
42 |           colorScheme="blue"
43 |           variant="solid"
44 |           h="50px"
45 |           size={isLargerThanLG ? 'lg' : 'md'}
46 |           mb={isLargerThanLG ? '0' : '10'}
47 |           onClick={(e) => {
48 |             e.preventDefault();
49 |             window.location.href='https://blog.appseed.us/chakra-ui-react-coding-landing-page/';
50 |             }}
51 |         >
52 |           Read More
53 |         </Button>
54 |       </Box>
55 |       <Spacer />
56 |       <Flex
57 |         w={isLargerThanLG ? '40%' : 'full'}
58 |         alignItems="center"
59 |         justifyContent="center"
60 |       >
61 |         <Img src={chakraHero} alt="Chakra UI" />
62 |       </Flex>
63 |     </Flex>
64 |   );
65 | };
66 | 
67 | export default Hero;


--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import {
 3 |   Text,
 4 |   Flex,
 5 |   Spacer,
 6 |   IconButton,
 7 |   useColorMode,
 8 |   useColorModeValue,
 9 |   useMediaQuery,
10 | } from '@chakra-ui/react';
11 | import { MoonIcon, SunIcon } from '@chakra-ui/icons';
12 | import { FaAlignJustify } from 'react-icons/fa';
13 | import { Icon } from '@chakra-ui/react';
14 | 
15 | const Nav = ({ onOpen, ref }) => {
16 |   const [scroll, setScroll] = useState(false);
17 |   const { colorMode, toggleColorMode } = useColorMode();
18 |   const navBg = useColorModeValue('white', 'blackAlpha.200');
19 |   const [isLargerThanMD] = useMediaQuery('(min-width: 48em)');
20 | 
21 |   const changeScroll = () =>
22 |     document.body.scrollTop > 80 || document.documentElement.scrollTop > 80
23 |       ? setScroll(true)
24 |       : setScroll(false);
25 | 
26 |   window.addEventListener('scroll', changeScroll);
27 | 
28 |   return (
29 |     <Flex
30 |       h="10vh"
31 |       alignItems="center"
32 |       p="6"
33 |       boxShadow={scroll ? 'base' : 'none'}
34 |       position="sticky"
35 |       top="0"
36 |       zIndex="sticky"
37 |       w="full"
38 |       bg={navBg}
39 |     >
40 |       <Text fontSize="xl" fontWeight="bold">
41 |         Chakra Sample
42 |       </Text>
43 | 
44 |       <Spacer />
45 |       
46 |       <Flex alignItems="center">
47 |         <IconButton mr="10" w={6} h={6} p={5} onClick={toggleColorMode}>
48 |           {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
49 |         </IconButton>
50 | 
51 |         {isLargerThanMD ? (
52 |           <>
53 |             <a target="_blank" rel="noreferrer" href="https://appseed.us/apps/react/" fontSize="md" mr="10">
54 |               More Apps
55 |             </a>
56 |           </>
57 |         ) : (
58 |           <IconButton ref={ref} onClick={onOpen}>
59 |             <Icon as={FaAlignJustify} />
60 |           </IconButton>
61 |         )}
62 | 
63 |       </Flex>
64 |     </Flex>
65 |   );
66 | };
67 | 
68 | export default Nav;


--------------------------------------------------------------------------------
/src/components/Services.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Flex,
 3 |   Spacer,
 4 |   Image,
 5 |   Text,
 6 |   Button,
 7 |   useMediaQuery,
 8 | } from '@chakra-ui/react';
 9 | import React from 'react';
10 | import teamImage from '../assets/teamImage.jpg';
11 | 
12 | const Services = () => {
13 |   const [isLargerThanLG] = useMediaQuery('(min-width: 62em)');
14 | 
15 |   return (
16 |     <Flex
17 |       width="full"
18 |       minHeight="70vh"
19 |       alignItems="center"
20 |       px={isLargerThanLG ? '16' : '6'}
21 |       py="16"
22 |       justifyContent="center"
23 |       flexDirection={isLargerThanLG ? 'row' : 'column'}
24 |     >
25 |       <Flex
26 |         w={isLargerThanLG ? '40%' : 'full'}
27 |         mb={isLargerThanLG ? '0' : '6'}
28 |         alignItems="center"
29 |         justifyContent="center"
30 |       >
31 |         <Image src={teamImage} alt="Chakra Team" w="full" />
32 |       </Flex>
33 |       <Spacer />
34 |       <Flex
35 |         w={isLargerThanLG ? '60%' : 'full'}
36 |         flexDirection="column"
37 |         ml={isLargerThanLG ? '7' : '0'}
38 |       >
39 |         <Text fontSize={isLargerThanLG ? '5xl' : '4xl'} fontWeight="bold">
40 |           We build, We revive
41 |         </Text>
42 | 
43 |         <Text mb="6" opacity="0.8">
44 |           Your business needs to be in safe hands at all times. We ensure you
45 |           never run out of customers and not run at loss. We are trusted by over
46 |           500+ companies to deliver quality marketing campaigns using Digital
47 |           marketing & Offline marketing channels.
48 |         </Text>
49 | 
50 |         <Button width="200px" size="lg" colorScheme="blue">
51 |           CONTACT US
52 |         </Button>
53 |       </Flex>
54 |     </Flex>
55 |   );
56 | };
57 | 
58 | export default Services;


--------------------------------------------------------------------------------
/src/components/Testimonials.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Flex,
  3 |     Spacer,
  4 |     Text,
  5 |     Wrap,
  6 |     WrapItem,
  7 |     Avatar,
  8 |     Box,
  9 |     useMediaQuery,
 10 |   } from '@chakra-ui/react';
 11 |   import React from 'react';
 12 |   
 13 |   const Testimonials = () => {
 14 |     const [isLargerThanLG] = useMediaQuery('(min-width: 62em)');
 15 |   
 16 |     return (
 17 |       <Flex
 18 |         maxWidth={isLargerThanLG ? '1400px' : 'full'}
 19 |         minHeight="70vh"
 20 |         justifyContent="center"
 21 |         alignItems="center"
 22 |         py="16"
 23 |         px={isLargerThanLG ? '16' : '6'}
 24 |         mx="auto"
 25 |         flexDirection={isLargerThanLG ? 'row' : 'column'}
 26 |       >
 27 |         <Flex
 28 |           width={isLargerThanLG ? '380px' : 'full'}
 29 |           shadow="md"
 30 |           minHeight="250px"
 31 |           flexDirection="column"
 32 |           p="8"
 33 |           m="4"
 34 |           border="1px solid #C4DDFF"
 35 |           borderRadius="md"
 36 |           justifyContent="center"
 37 |         >
 38 |           <Text mb="5">
 39 |             "The team perfectly fit the specialized skill set required. They
 40 |             focused on the most essential features helping us launch the platform
 41 |             eight months faster than planned."
 42 |           </Text>
 43 |           <Wrap>
 44 |             <WrapItem>
 45 |               <Avatar
 46 |                 name="Karl Brighton"
 47 |                 src="https://sweta-myteam-website-fm.netlify.app/static/media/avatar-kady.78fc482c.jpg"
 48 |               />
 49 |             </WrapItem>
 50 |   
 51 |             <WrapItem>
 52 |               <Box>
 53 |                 <Text fontSize="sm">Karl Brighton</Text>
 54 |                 <Text fontSize="sm" opacity="0.7">
 55 |                   Software Engineer at Kadex
 56 |                 </Text>
 57 |               </Box>
 58 |             </WrapItem>
 59 |           </Wrap>
 60 |         </Flex>
 61 |   
 62 |         <Spacer />
 63 |         <Flex
 64 |           width={isLargerThanLG ? '380px' : 'full'}
 65 |           shadow="md"
 66 |           minHeight="250px"
 67 |           flexDirection="column"
 68 |           p="8"
 69 |           m="4"
 70 |           border="1px solid #C4DDFF"
 71 |           borderRadius="md"
 72 |           justifyContent="center"
 73 |         >
 74 |           <Text mb="5">
 75 |             "We needed to automate our entire onboarding process. The team came in
 76 |             and built out the whole journey. Since going live, user retention has
 77 |             gone through the roof!"
 78 |           </Text>
 79 |   
 80 |           <Wrap>
 81 |             <WrapItem>
 82 |               <Avatar
 83 |                 name="Karl Brighton"
 84 |                 src="https://sweta-myteam-website-fm.netlify.app/static/media/avatar-aiysha.e119a0c1.jpg"
 85 |               />
 86 |             </WrapItem>
 87 |   
 88 |             <WrapItem>
 89 |               <Box>
 90 |                 <Text fontSize="sm">Krishna Bells</Text>
 91 |                 <Text fontSize="sm" opacity="0.7">
 92 |                   Product Manager at Google
 93 |                 </Text>
 94 |               </Box>
 95 |             </WrapItem>
 96 |           </Wrap>
 97 |         </Flex>
 98 |         <Spacer />
 99 |   
100 |         <Flex
101 |           width={isLargerThanLG ? '380px' : 'full'}
102 |           shadow="md"
103 |           minHeight="250px"
104 |           flexDirection="column"
105 |           p="8"
106 |           m="4"
107 |           border="1px solid #C4DDFF"
108 |           borderRadius="md"
109 |           justifyContent="center"
110 |         >
111 |           <Text mb="5">
112 |             "Amazing. Our team helped us build an app that delivered a new
113 |             experience for hiring a physio. The launch was an instant success with
114 |             100k downloads in the first month."
115 |           </Text>
116 |           <Wrap>
117 |             <WrapItem>
118 |               <Avatar
119 |                 name="Ben Spiff"
120 |                 src="https://sweta-myteam-website-fm.netlify.app/static/media/avatar-arthur.098c2e26.jpg"
121 |               />
122 |             </WrapItem>
123 |   
124 |             <WrapItem>
125 |               <Box>
126 |                 <Text fontSize="sm">Ben Spiff</Text>
127 |                 <Text fontSize="sm" opacity="0.7">
128 |                   Founder of Crypto Inc.
129 |                 </Text>
130 |               </Box>
131 |             </WrapItem>
132 |           </Wrap>
133 |         </Flex>
134 |       </Flex>
135 |     );
136 |   };
137 | export default Testimonials


--------------------------------------------------------------------------------
/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 | * {
11 |   margin: 0;
12 |   box-sizing: border-box;
13 |   font-family: 'Poppins', sans-serif;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import { ChakraProvider } from '@chakra-ui/react'
 7 | import { ColorModeScript } from '@chakra-ui/react'
 8 | import theme from './theme';
 9 | 
10 | const root = ReactDOM.createRoot(document.getElementById('root'));
11 | root.render(
12 |   <React.StrictMode>
13 |     <ChakraProvider>
14 |     <ColorModeScript initialColorMode={theme.config.initialColorMode} />
15 |     <App />
16 |     </ChakraProvider>
17 |   </React.StrictMode>
18 | );
19 | 
20 | 
21 | reportWebVitals();
22 | 


--------------------------------------------------------------------------------
/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/theme.js:
--------------------------------------------------------------------------------
1 | import { extendTheme } from '@chakra-ui/react'
2 | const config = {
3 |   initialColorMode: 'light',
4 |   useSystemColorMode: false,
5 | }
6 | const theme = extendTheme({ config })
7 | 
8 | export default theme


--------------------------------------------------------------------------------