fixed issues

components/Carousel.tsx

@@ -1,14 +1,11 @@
-import { Box, Image } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+import Image from 'next/image';
 import React, { useState } from 'react';
 import { FaArrowCircleRight, FaArrowCircleLeft } from 'react-icons/fa';
 import MediaQuery from 'react-responsive';
 // help from: https://www.youtube.com/watch?v=l1MYfu5YWHc :)
 
-const images = [
-    'https://lh3.googleusercontent.com/pw/ACtC-3eAOr_3m8nkwHFxUGVCocpqAsfRXF9iBmFBJ9Vsu6cUNNBf1KblJizIy-ouzALEPFiO3cPxHnBdcnGmWSzupTLDEdmjrjyTsEiG9OnGPSL_Oq8VED1IQ3Wn3MSpokTIJXZANbbmcmg3Loq_rv-YK_8jJQ=w1258-h944-no?authuser=0',
-    'https://lh3.googleusercontent.com/pw/ACtC-3eRo1AoiFwa2Ae5_SHXdEWVHcCEOIELaImOC832EgsRSCjUmjfXXEPd9QMvYfiHfCW9yJhZWFc_Zj0pwBMcBf4MeqOEV-QwLYD8CTOjzWudM8BcO1Zj-cnOtQGdliJ8ggUliYJcorb-tbWrOGob4eXCAA=w1258-h944-no?authuser=0',
-    'https://lh3.googleusercontent.com/pw/ACtC-3cnkp2xlwwIbF8sYZ4U3ODlOg4MHlX4UNA2ZhM8XQ01IYLkT5ig7VmCMyHoJHz2-cBehp4_7kwn7jK7d5ruXbLUeLiqtHjuglkXUX4j8bll4x0AjNzZg9424ep6VQqEgCh9TOUdhc3qGgEoAmMt_PFLzg=w1258-h944-no?authuser=0',
-];
+const images = ['/img1.jpg', '/img2.jpg', '/img3.jpg', '/img4.jpg'];
 
 const Carousel = () => {
     const [current, setCurrent] = useState<number>(0);
@@ -52,7 +49,7 @@ const Carousel = () => {
                             })`}
                         >
                             {key === current && (
-                                <Image w="600px" h="400px" src={src} />
+                                <Image width="678px" height="456px" src={src} />
                             )}
                         </Box>
                     ))}
@@ -104,7 +101,7 @@ const Carousel = () => {
                             })`}
                         >
                             {key === current && (
-                                <Image w="328px" h="216px" src={src} />
+                                <Image width="337px" height="236px" src={src} />
                             )}
                         </Box>
                     ))}

components/Floating.tsx

@@ -13,6 +13,7 @@ const Floating = () => {
                     boxShadow="lg"
                     bgColor="#e94560"
                     style={{
+                        zIndex: 100,
                         opacity: 1,
                         position: 'fixed',
                         bottom: '30px',

components/Nav.tsx

@@ -1,4 +1,4 @@
-import { Link as L } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React, { FC } from 'react';
 import Link from 'next/link';
 
@@ -8,42 +8,31 @@ interface props {
     l3: String;
 }
 
-const Nav: FC<props> = ({ l1, l2, l3 }) => {
-    var lr = l2;
-    if (l2 == 'Home') {
-        lr = '/';
-    }
-    return (
-        <div
-            style={{
-                display: 'flex',
-                padding: '30px',
-                width: '100%',
-                justifyContent: 'space-around',
-            }}
-        >
-            <L
-                _hover={{ color: '#e94560' }}
-                color="whitesmoke"
-                style={{ fontSize: '20px', fontWeight: 'bold' }}
-            >
-                <Link href={l1.toLowerCase()}>{l1}</Link>
-            </L>
-            <L
-                _hover={{ color: '#e94560' }}
-                color="whitesmoke"
-                style={{ fontSize: '20px', fontWeight: 'bold' }}
-            >
-                <Link href={lr.toLowerCase()}>{l2}</Link>
-            </L>
-            <L
-                _hover={{ color: '#e94560' }}
-                color="whitesmoke"
-                style={{ fontSize: '20px', fontWeight: 'bold' }}
-            >
-                <Link href={l3=="Contact Us"?"contactus":l3.toLowerCase()}>{l3}</Link>
-            </L>
-        </div>
-    );
-};
+const LinkContainer = ({ children }) => (
+    <Box
+        userSelect="none"
+        _hover={{ color: '#e94560' }}
+        color="whitesmoke"
+        style={{ fontSize: '20px', fontWeight: 'bold' }}
+    >
+        {children}
+    </Box>
+);
+
+const Nav: FC<props> = ({ l1, l2, l3 }) => (
+    <Box display="flex" p="30px" w="100%" justifyContent="space-around">
+        <LinkContainer>
+            <Link href={l1.toLowerCase()}>{l1}</Link>
+        </LinkContainer>
+        <LinkContainer>
+            <Link href={l2 === 'Home' ? '/' : l2.toLowerCase()}>{l2}</Link>
+        </LinkContainer>
+        <LinkContainer>
+            <Link href={l3 == 'Contact Us' ? 'contactus' : l3.toLowerCase()}>
+                {l3}
+            </Link>
+        </LinkContainer>
+    </Box>
+);
+
 export default Nav;

pages/Calendar.tsx → pages/calendar.tsx

@@ -1,9 +1,9 @@
-import { ChakraProvider, Heading, Divider, Text } from '@chakra-ui/react';
-import React, { FC } from 'react';
-import Footer from '../components/Footer';
+import { Divider, Heading, Text } from '@chakra-ui/react';
 import Head from 'next/head';
-import Nav from '../components/Nav';
+import React from 'react';
 import MediaQuery from 'react-responsive';
+import Footer from '../components/Footer';
+import Nav from '../components/Nav';
 
 const Calendar = () => {
     return (
@@ -101,7 +101,7 @@ const Calendar = () => {
                             height: '800px',
                             margin: '20px auto 20px',
                         }}
-                    ></iframe>
+                    />
                 </div>
                 <Footer />
             </MediaQuery>

pages/index.tsx

@@ -1,11 +1,10 @@
-import { Box, ChakraProvider } from '@chakra-ui/react';
+import Head from 'next/head';
 import React from 'react';
 import AboutUs from '../components/AboutUs';
+import Carousel from '../components/Carousel';
 import Floating from '../components/Floating';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
-import Head from 'next/head';
-import Carousel from '../components/Carousel';
 
 const Landing = () => {
     return (

tsconfig.json

@@ -1,29 +1,19 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve"
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
 }