add components from tenk website

React/comp_library/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",

React/comp_library/src/components/CaseStudy.tsx

@@ -0,0 +1,55 @@
+import { Box, Fade, Heading, Image, Text } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import React from "react";
+
+const MotionHeading = motion(Heading);
+const MotionText = motion(Text);
+
+type SectionType = {
+  heading: string;
+  content: string;}
+
+const CaseStudy = ({ sections }: { sections: SectionType[] }) => {
+  return (
+    <Box
+      backgroundSize="cover"
+      backgroundPosition="center"
+      minHeight="100vh"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Image
+        src={"https://picsum.photos/600/200"}
+        alt="Illustration"
+        width="600px"
+        mb={10}
+      />
+
+      {sections.map((section, index) => (
+        <Fade key={index} in>
+          <Box maxW="600px" p={6} bgColor="white" shadow="lg" mb={6}>
+            <MotionHeading
+              mb={4}
+              fontSize="xl"
+              textAlign="center"
+              whileHover={{ y: -5 }}
+            >
+              {section.heading}
+            </MotionHeading>
+            <MotionText
+              fontSize="md"
+              textAlign="justify"
+              whileHover={{ y: -3 }}
+            >
+              {section.content}
+            </MotionText>
+          </Box>
+        </Fade>
+      ))}
+    </Box>
+  );
+};
+
+export default CaseStudy;

React/comp_library/src/components/ColorModeToggle.tsx

@@ -0,0 +1,46 @@
+import { MoonIcon, SunIcon } from "@chakra-ui/icons";
+import {
+  AbsoluteCenter,
+  FormControl,
+  FormLabel,
+  Switch,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+export default function ColorModeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const icon_color = useColorModeValue(
+    "colors.brand.secondary.900",
+    "colors.brand.primary.900",
+  );
+  return (
+    <FormControl paddingInline={2} maxW={20} color={icon_color}>
+      <FormLabel htmlFor="colorMode" display={"none"} />
+      <Switch
+        id="colorMode"
+        colorScheme="colors.brand.primary"
+        onChange={toggleColorMode}
+        title=""
+        size={"lg"}
+        cursor={"pointer"}
+        aria-label="Toggle color mode"
+      >
+        <AbsoluteCenter>
+          {colorMode === "light" ? (
+            <MoonIcon
+              position={"relative"}
+              // boxSize={4}
+              left={-4}
+              // ml={-6}
+              userSelect={"none"}
+            />
+          ) : (
+            <SunIcon position={"relative"} right={-2} userSelect={"none"} />
+          )}
+        </AbsoluteCenter>
+      </Switch>
+    </FormControl>
+  );
+}

React/comp_library/src/components/ContactForm.tsx

@@ -0,0 +1,95 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Textarea,
+  VStack,
+} from "@chakra-ui/react";
+import React from "react";
+import { BsPerson } from "react-icons/bs/index.js";
+import { MdOutlineEmail } from "react-icons/md/index.js";
+
+export default function ContactForm() {
+  return (
+    <VStack>
+      <Heading >Contact Us</Heading>
+    <form
+      name="contact_form"
+      method="POST"
+      data-netlify="true"
+      data-netlify-recaptcha="true"
+      // action="/pages/success/" //netlify not allowing me to redirect properly; need further investigaion
+      // @ts-expect-error: 'netlify' prop is not on 'form' but required for netlify form-detection
+      netlify={"true"}
+    >
+      <FormControl id="subject" isRequired>
+        <Input
+          type="hidden"
+          name="subject"
+          value="New lead from TenKSolutions.com"
+        />
+      </FormControl>
+      <Input type="hidden" name="form-name" value="contact_form" />
+      {/**
+       * Hi, My name is *Name*, working at *company* as the *title*; We would like to *issues*. Contact me at *email/phone* 
+       */}
+      <VStack spacing={5} color="black">
+        <FormControl id="name" isRequired>
+          <FormLabel>Your Name</FormLabel>
+          <InputGroup borderColor="#E0E1E7">
+            <InputLeftElement
+              pointerEvents="none"
+              children={<BsPerson color="gray.800" />}
+            />
+            <Input type="text" size="md" name="name" autoComplete="name" />
+          </InputGroup>
+        </FormControl>
+        <FormControl id="email" isRequired>
+          <FormLabel>E-Mail</FormLabel>
+          <InputGroup borderColor="#E0E1E7">
+            <InputLeftElement
+              pointerEvents="none"
+              children={<MdOutlineEmail color="gray.800" />}
+            />
+            <Input type="email" size="md" name="email" autoComplete="email" />
+          </InputGroup>
+          {/* <FormHelperText>
+                  We'll never share your email.
+                </FormHelperText> */}
+        </FormControl>
+        <FormControl id="message" isRequired>
+          <FormLabel>Message</FormLabel>
+          <Textarea
+            borderColor="gray.300"
+            _hover={{
+              borderRadius: "gray.300",
+            }}
+            placeholder="I'd like to ..."
+            name="message"
+            autoComplete="off"
+          />
+        </FormControl>
+        <Box data-netlify-recaptcha="true" />
+        <FormControl id="submit" float="right">
+          <Button
+            w="100%"
+            variant="solid"
+            bg="#0D74FF"
+            color="white"
+            _hover={{}}
+            type="submit"
+            title="Contact TenK Solutions"
+          >
+            Send Message
+          </Button>
+        </FormControl>
+      </VStack>
+    </form>
+    </VStack>
+  );
+}