Merge branch 'main' into dependabot/npm_and_yarn/framer-motion-10.2.5

.github/workflows/deploy.yml

@@ -29,5 +29,5 @@ jobs:
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
-          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          github_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}
           publish_dir: ./out

.gitignore

@@ -111,4 +111,7 @@ gh-pages
 gh-pages.pub
 
 # ignore dir _next
-_next
+_next
+public/images/.DS_Store
+public/.DS_Store
+.DS_Store

README.md

@@ -1,35 +1,73 @@
-# kakadigi.github.io
-Karya Kami Digital Landing Page
+# Karya Kami Digital Landing Page
 
-## Get started
-1. Clone this repo
-```
-git clone git@github.com:kakadigi/kakadigi.github.io.git
-```
-2. Go to project folder
-```
-cd kakadigi.github.io.git
-```
-4. Install dependencies
-```
-npm install
-```
-5. Run app
-```
+Welcome to the Karya Kami Digital landing page repository. This web page is built with NextJS version 12.x and utilizes the Chakra UI design system version 1.8.x for a sleek and modern design. We also use React icons for the icons, Prettier for code formatting, and Jest for testing.
+
+## Requirements
+
+Before you begin, ensure you have met the following requirements:
+
+- Node.js: Make sure you have Node.js installed on your machine. You can download it from [nodejs.org](https://nodejs.org/).
+
+## Installation
+
+Follow these steps to install and set up the project:
+
+1. Clone the repository to your local machine:
+
+   ```bash
+   git clone git@github.com:kakadigi/kakadigi.github.io.git
+   ```
+
+2. Change to the project directory:
+
+   ```bash
+   cd karya-kami-digital-landing-page
+   ```
+
+3. Install the project dependencies:
+
+   ```bash
+   npm install
+   ```
+
+## Run App
+
+To run the Karya Kami Digital landing page on your local machine, use the following command:
+
+```bash
 npm run dev
 ```
 
-## Code Cleaning
-We used prettier library, so you can run to clean up the code
-> ./bin-prettier.js --write [dir]
+This will start the development server, and you can access the web page in your browser at `http://localhost:3000`.
 
-```
-./node_modules/prettier/bin-prettier.js --write pages/
-```
+## How to Contribute
 
-## Deployment
-Run this command to generate Deploy public and secret key
+We welcome contributions from the community. To contribute to this project, please follow these steps:
 
-```
-ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
-```
+1. Fork the repository by clicking the "Fork" button on GitHub.
+
+2. Clone your forked repository to your local machine:
+
+   ```bash
+   git clone git@github.com:kakadigi/kakadigi.github.io.git
+   ```
+
+3. Create a new branch for your feature or bug fix:
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+4. Make your changes and commit them with descriptive commit messages.
+
+5. Push your changes to your forked repository:
+
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+6. Create a Pull Request (PR) on the main repository, explaining the changes you made and why they should be merged.
+
+7. Your PR will be reviewed, and once approved, it will be merged into the main branch.
+
+Thank you for contributing to the Karya Kami Digital landing page!

components/Hero.jsx

@@ -0,0 +1,34 @@
+import {
+  Container,
+  Flex,
+  Heading,
+  VStack,
+  Text,
+} from "@chakra-ui/react";
+
+const Hero = () => {
+  return (
+    <Container maxW="container.xl">
+      <Flex
+        w="full"
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+        gap={4}
+      >
+        <VStack w="container.md" textAlign="center" spacing={8} pt={32} pb={8}>
+          <Heading as="h1" size="4xl">
+            Revolutionize Your Startup!
+          </Heading>
+          <Text fontSize="lg">
+            Welcome to the world of <u>Karya Kami Digital</u>, where we turn your app
+            dreams into reality. Dive into the magical realm of innovative
+            solutions and world-class tech consulting!
+          </Text>
+        </VStack>
+      </Flex>
+    </Container>
+  );
+};
+
+export default Hero;

components/Layout/Header.jsx

@@ -1,26 +1,19 @@
 import Head from "next/head";
 
-const Header = ({ title, description, children }) => {
+const Header = ({ title, description }) => {
+  const pageTitle = title || "Karya Kami Digital";
+  const descriptionText =
+    description ||
+    "Karya Kami Digital | IT Consultant based in Purwokerto, Banyumas, Jawa Tengah";
   return (
-    <>
-      <Head>
-        <title>
-          {title
-            ? `${process.env.NEXT_PUBLIC_APP_NAME} | ${title}`
-            : process.env.NEXT_PUBLIC_APP_NAME || "Karya Kami Digital"}
-        </title>
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-        <meta
-          name="og:title"
-          property="og:title"
-          content={title || "Karya Kami Digital"}
-        />
-        <meta name="description" content={description || ""} />
-        <meta name="robots" content="index, follow" />
-        <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
-      </Head>
-      {children && <header>{children}</header>}
-    </>
+    <Head>
+      <title>{`${process.env.NEXT_PUBLIC_APP_NAME} | ${pageTitle}`}</title>
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      <meta name="og:title" property="og:title" content={pageTitle} />
+      <meta name="description" content={descriptionText} />
+      <meta name="robots" content="index, follow" />
+      <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    </Head>
   );
 };
 

components/Layout/NavHeader.jsx

@@ -0,0 +1,51 @@
+import { Box, Flex, Button } from "@chakra-ui/react";
+import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
+import NavBar from "./Navbar";
+import { UIStore } from "store";
+
+const NavHeader = () => {
+  const show = UIStore.useState((s) => s.toggleNav);
+  return (
+    <header>
+      <NavBar>
+        <Box>
+          <NavBar.Brand text="Kakadigi." fontWeight="bold" />
+        </Box>
+        <Box display={{ base: "block", md: "none" }}>
+          <Button
+            variant="link"
+            onClick={() => {
+              UIStore.update((s) => {
+                s.toggleNav = !show;
+              });
+            }}
+          >
+            {show ? <CloseIcon /> : <HamburgerIcon />}
+          </Button>
+        </Box>
+        <Box
+          w="fit-content"
+          display={{ base: show ? "block" : "none", md: "block" }}
+          flexBasis={{ base: "100%", md: "auto" }}
+          my={4}
+        >
+          <Flex
+            w="full"
+            align={["center", "center", "center", "center"]}
+            justify={["center", "space-between", "flex-end", "flex-end"]}
+            direction={["column", "row", "row", "row"]}
+            p={[4, 4, 0, 0]}
+          >
+            <NavBar.Menu mb={4}>
+              <NavBar.Menu.Item>Home</NavBar.Menu.Item>
+              <NavBar.Menu.Item to="/our-services">Services</NavBar.Menu.Item>
+              <NavBar.Menu.Item to="/contact-us">Contact</NavBar.Menu.Item>
+            </NavBar.Menu>
+          </Flex>
+        </Box>
+      </NavBar>
+    </header>
+  );
+};
+
+export default NavHeader;

components/Navbar/MenuItem.jsx → components/Layout/Navbar/MenuItem.jsx

@@ -15,7 +15,7 @@ const MenuItem = ({ children, to = "/", ...props }) => {
       <Text
         display="block"
         lineHeight="36px"
-        borderBottom={active ? "3px solid #3938B8" : "none"}
+        fontWeight={active ? 700 : 400}
         {...props}
       >
         {children}

components/Navbar/index.js → components/Layout/Navbar/index.js

@@ -10,17 +10,9 @@ const Brand = ({ image, text, size, ...props }) =>
     </Heading>
   );
 
-const NavBar = ({ children, ...props }) => {
+const NavBar = ({ children }) => {
   return (
-    <Flex
-      as="nav"
-      align="center"
-      justify="space-between"
-      wrap="wrap"
-      w="full"
-      p={4}
-      {...props}
-    >
+    <Flex as="nav" align="center" justify="space-between" wrap="wrap" w="full">
       {children}
     </Flex>
   );