Repository: pusdatin-ittoday/ittod-web-frontend
Pull request #17: Halaman kompetisi
Author: login: TaufiqSadri
Created: 2025-05-01T04:45:34Z | Merged: 2025-05-01T04:48:24Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added a new page accessible at /competition/hack_today.
- **Enhancements**
  - Updated the Navbar to use client-side navigation for smoother page transitions.
  - Improved Navbar and dropdown menu styling and layering.
  - Increased hover scale effect on social media icons in the footer for better visual feedback.
  - Changed the footer's phone contact link to open a WhatsApp chat instead of initiating a phone call.
- **Style**
  - Reformatted route declarations and standardized import statement quotes for improved code consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/App.jsx b/src/App.jsx
index d22d3ed..886eb82 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Home from './pages/Home';
 import Login from './pages/LoginPage/Login';
 import Register from './pages/LoginPage/Register';
@@ -7,29 +7,55 @@ import Event from './pages/Event';
 import Lomba from './pages/Lomba';
 import TimelineUmum from './pages/TimelineUmum';
 import DashboardBeranda from './pages/DashboardBeranda';
-import IkutLomba from './pages/IkutLomba'; 
+import IkutLomba from './pages/IkutLomba';
 import ForgetPassword from './pages/LoginPage/ForgetPassword';
 import VerifyPassword from './pages/LoginPage/VerifyPassword';
 import NewPassword from './pages/LoginPage/NewPassword';
 import ContactUs from './pages/ContactUs';
-import Sponsors from "./Sponsors";
+import Sponsors from './Sponsors';
+import Hack_Today from './pages/hack_today';
 
 const App = () => {
   return (
-
     <>
       <BrowserRouter>
         <Routes>
-
-          <Route path="/" element={<Home />} />
-          <Route path="/home" element={<Home />} />
-          <Route path="/event" element={<Event />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-          <Route path="ikutlomba" element={<IkutLomba />}></Route>
-          <Route path="/forget-password" element={<ForgetPassword />} />
-          <Route path="/verify-password" element={<VerifyPassword />} />
-          <Route path="/new-password" element={<NewPassword />} />
+          <Route
+            path="/"
+            element={<Home />}
+          />
+          <Route
+            path="/home"
+            element={<Home />}
+          />
+          <Route
+            path="/event"
+            element={<Event />}
+          />
+          <Route
+            path="/login"
+            element={<Login />}
+          />
+          <Route
+            path="/register"
+            element={<Register />}
+          />
+          <Route
+            path="ikutlomba"
+            element={<IkutLomba />}
+          ></Route>
+          <Route
+            path="/forget-password"
+            element={<ForgetPassword />}
+          />
+          <Route
+            path="/verify-password"
+            element={<VerifyPassword />}
+          />
+          <Route
+            path="/new-password"
+            element={<NewPassword />}
+          />
 
           <Route
             path="/timeline"
@@ -41,8 +67,18 @@ const App = () => {
           />
 
           {/* buat liat liat waktu bikin page */}
-          <Route path="/competition" element={<Lomba />}/>
-          <Route path="/sponsors" element={<Sponsors/>}></Route>
+          <Route
+            path="/competition"
+            element={<Lomba />}
+          />
+          <Route
+            path="/sponsors"
+            element={<Sponsors />}
+          ></Route>
+          <Route
+            path="/competition/hack_today"
+            element={<Hack_Today />}
+          ></Route>
         </Routes>
       </BrowserRouter>
     </>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 620bd36..5763a21 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -47,7 +47,7 @@ const Footer = () => {
                     className="flex justify-center"
                   >
                     <a href={item.url}>
-                      <div className="w-12 h-12 flex items-center justify-center rounded-md hover:scale-105 transition duration-300 ease-in-out">
+                      <div className="w-12 h-12 flex items-center justify-center rounded-md hover:scale-155 transition duration-300 ease-in-out">
                         <img
                           src={`/${item.icon}`}
                           alt={`Social Icon ${i + 1}`}
@@ -67,7 +67,7 @@ const Footer = () => {
               <p className="font-dm-sans hover:text-pink-400 cursor-pointer whitespace-nowrap">ittoday2025@gmail.com</p>
 
               <a
-                href="tel:+6281210242743"
+                href="https://wa.me/+6281210242743"
                 className="font-dm-sans hover:text-pink-400 cursor-pointer"
               >
                 +6281210242743
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index d488469..5790956 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom'; // Impor Link dari react-router-dom
 
 const Navbar = () => {
   const [active, setActive] = useState(false);
@@ -42,48 +43,48 @@ const Navbar = () => {
   let scrollActive = scroll ? 'backdrop-blur-md py-6 bg-white/30 shadow-md' : 'bg-transparent py-4';
 
   return (
-    <div className={`navbar fixed w-full transition-all ${scrollActive}`}>
+    <div className={`navbar fixed w-full transition-all z-[999] ${scrollActive}`}>
       <div className="container mx-auto px-4">
         <div className="navbar-box relative flex items-center justify-between font-dm-sans">
           <div className="logo">
             <h1 className="font-dm-playfair sm:text-2xl text-xl font-bold cursor-pointer">IT-TODAY</h1>
           </div>
           <ul
-            className={`flex lg:gap-12 flex-col gap-8 absolute top-full right-0 mt-4 z-40 w-64 px-8 py-6 rounded shadow-lg bg-[#6a316c] font-bold text-white transition duration-300
+            className={`flex lg:gap-12 flex-col gap-3 absolute top-full right-0 mt-1 z-[9999] w-36 px-4 py-4 rounded-lg shadow-lg bg-[#6a316c] font-bold text-white text-sm transition duration-300
             ${active ? 'opacity-100 visible pointer-events-auto' : 'opacity-0 invisible pointer-events-none'}
             md:opacity-100 md:visible md:pointer-events-auto md:static md:flex-row md:gap-12 md:shadow-none md:bg-transparent md:w-auto md:h-full md:p-0 md:text-black md:transition-none md:items-center md:mt-0`}
           >
-            <li className="flex items-center ">
-              <a
-                href="#"
-                className="font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer "
+            <li className="flex items-center">
+              <Link
+                to="/home"
+                className="font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer"
               >
                 Home
-              </a>
+              </Link>
             </li>
-            <li className="flex items-center ">
-              <a
-                href="#"
-                className=" font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer"
+            <li className="flex items-center">
+              <Link
+                to="/competition"
+                className="font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer"
               >
                 Competition
-              </a>
+              </Link>
             </li>
-            <li className="flex items-center ">
-              <a
-                href="#"
-                className=" font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer "
+            <li className="flex items-center">
+              <Link
+                to="/event"
+                className="font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer"
               >
                 Event
-              </a>
+              </Link>
             </li>
-            <li className="flex items-center ">
-              <a
-                href="#"
-                className=" font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer"
+            <li className="flex items-center">
+              <Link
+                to="/ContactUs"
+                className="font-dm-playfair font-medium opacity-75 text-white hover:text-pink-400 cursor-pointer"
               >
                 ContactUs
-              </a>
+              </Link>
             </li>
             <li className="block lg:hidden">
               <button className="font-dm-sans font-bold bg-gradient-to-r from-[#F97283] via-[#B247B4] to-[#9323C2] text-white py-3 px-4 rounded-xl custom-button-shadow hover:scale-105 transition duration-300 ease-in-out cursor-pointer">
diff --git a/src/pages/hack_today.jsx b/src/pages/hack_today.jsx
new file mode 100644
index 0000000..44e7a5e
--- /dev/null
+++ b/src/pages/hack_today.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+
+const Hack_Today = () => {
+  return (
+    <>
+      <Navbar />
+    </>
+  );
+};
+
+export default Hack_Today;


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/components/Footer.jsx (1)</summary><blockquote>

`50-50`: **Consider using a more subtle hover scale value**

The hover scale of 1.55 might be too dramatic for social media icons, potentially causing layout shifts or visual disruption. Consider using a more subtle value like 1.1 or 1.2 for a smoother interaction.

```diff
-                      <div className="w-12 h-12 flex items-center justify-center rounded-md hover:scale-155 transition duration-300 ease-in-out">
+                      <div className="w-12 h-12 flex items-center justify-center rounded-md hover:scale-125 transition duration-300 ease-in-out">
```

</blockquote></details>
<details>
<summary>src/App.jsx (1)</summary><blockquote>

`74-81`: **Use consistent JSX tag style for Routes**

For consistency, use the same JSX tag style for all Route components. Either use self-closing tags for all routes or explicit closing tags.

```diff
-          <Route
-            path="/sponsors"
-            element={<Sponsors />}
-          ></Route>
-          <Route
-            path="/competition/hack_today"
-            element={<Hack_Today />}
-          ></Route>
+          <Route
+            path="/sponsors"
+            element={<Sponsors />}
+          />
+          <Route
+            path="/competition/hack_today"
+            element={<Hack_Today />}
+          />
```

</blockquote></details>
<details>
<summary>src/components/Navbar.jsx (2)</summary><blockquote>

`2-2`: **Use English comments for better maintainability**

For better maintainability in international development environments, consider using English for comments.

```diff
-import { Link } from 'react-router-dom'; // Impor Link dari react-router-dom
+import { Link } from 'react-router-dom'; // Import Link from react-router-dom
```

---

`53-53`: **Consider extracting Tailwind classes for better maintainability**

The large string of Tailwind classes could be extracted into a constant or using a class name strategy to improve readability and maintainability.


```javascript
// Example approach using constants
const dropdownBaseClasses = "flex lg:gap-12 flex-col gap-3 absolute top-full right-0 mt-1 z-[9999] w-36 px-4 py-4 rounded-lg shadow-lg bg-[#6a316c] font-bold text-white text-sm transition duration-300";
const dropdownStateClasses = active 
  ? 'opacity-100 visible pointer-events-auto' 
  : 'opacity-0 invisible pointer-events-none';
const dropdownResponsiveClasses = "md:opacity-100 md:visible md:pointer-events-auto md:static md:flex-row md:gap-12 md:shadow-none md:bg-transparent md:w-auto md:h-full md:p-0 md:text-black md:transition-none md:items-center md:mt-0";

// Usage
className={`${dropdownBaseClasses} ${dropdownStateClasses} ${dropdownResponsiveClasses}`}
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between fa653d232b348308bf4036a0ff559003f0c51a9b and 8bf64e4334ded6063371ac97c9aa8e458ff1817d.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `src/App.jsx` (2 hunks)
* `src/components/Footer.jsx` (2 hunks)
* `src/components/Navbar.jsx` (2 hunks)
* `src/pages/hack_today.jsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>src/pages/hack_today.jsx (1)</summary><blockquote>

<details>
<summary>src/components/Navbar.jsx (1)</summary>

* `Navbar` (4-110)

</details>

</blockquote></details>
<details>
<summary>src/App.jsx (1)</summary><blockquote>

<details>
<summary>src/pages/hack_today.jsx (1)</summary>

* `Hack_Today` (4-10)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (6)</summary><blockquote>

<details>
<summary>src/components/Footer.jsx (1)</summary>

`69-70`: **LGTM! Good change from phone call to WhatsApp**

Changing from telephone protocol to WhatsApp direct message improves user experience by offering a more flexible communication method that many users prefer.

</details>
<details>
<summary>src/App.jsx (3)</summary>

`1-16`: **LGTM! Import formatting and additions look good**

The updated import statements with single quotes and the addition of the Hack_Today component import look good.

---

`23-81`: **Route formatting improvement and new route added successfully**

The multi-line formatting of routes improves readability. The new route for `/competition/hack_today` is properly implemented.

---

`44-46`: _⚠️ Potential issue_

**Fix missing leading slash in route path**

The path for the IkutLomba route is missing a leading slash, which could cause routing issues.

```diff
-            path="ikutlomba"
+            path="/ikutlomba"
```




> Likely an incorrect or invalid review comment.

</details>
<details>
<summary>src/components/Navbar.jsx (2)</summary>

`46-46`: **LGTM! Z-index improvement helps with UI layering**

Increasing the z-index to 999 helps ensure the navbar remains above other page elements, preventing UI issues.

---

`57-88`: **LGTM! Good switch from anchor tags to React Router Links**

Replacing anchor tags with React Router's Link components is a significant improvement that enables client-side routing and prevents full page reloads when navigating between pages.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T04:48:05Z

Review comments:
diff_hunk: @@ -0,0 +1,12 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+
+const Hack_Today = () => {
+  return (
+    <>
+      <Navbar />
+    </>
+  );
path: src/pages/hack_today.jsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>❓ Verification inconclusive</summary>

**Add content to the Hack Today page**

The component currently only renders the Navbar without any actual content. Consider adding page content that describes the Hack Today competition, such as:
- Competition description
- Rules and guidelines
- Prizes and timeline
- Registration information



Do you want me to help generate a skeleton structure for this page's content?

---



</details>

**Add a content skeleton to the Hack Today page**

The `src/pages/hack_today.jsx` component currently only renders the `<Navbar />`—we need to flesh out the page with the key sections of the Hack Today competition:

• Competition description  
• Rules & guidelines  
• Prizes & timeline  
• Registration information  

Locations to update:  
- `src/pages/hack_today.jsx`: replace the empty fragment with a `<main>` wrapper containing each section as its own semantic element (e.g., `<section id="overview">`, `<section id="rules">`, etc.).  

Would you like me to draft a basic JSX skeleton for these sections?

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-01T04:48:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,12 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+
+const Hack_Today = () => {
+  return (
+    <>
+      <Navbar />
+    </>
+  );
+};
path: src/pages/hack_today.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Follow React naming conventions with PascalCase**

Component names in React should use PascalCase without underscores. Rename the component from `Hack_Today` to `HackToday` to follow standard React naming conventions.

```diff
-const Hack_Today = () => {
+const HackToday = () => {
  return (
    <>
      <Navbar />
    </>
  );
};

-export default Hack_Today;
+export default HackToday;
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const HackToday = () => {
  return (
    <>
      <Navbar />
    </>
  );
};

export default HackToday;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-01T04:48:05Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-01T04:45:42Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: review in progress by coderabbit.ai -->

> [!NOTE]
> Currently processing new changes in this PR. This may take a few minutes, please wait...
> 
> <details>
> <summary>📥 Commits</summary>
> 
> Reviewing files that changed from the base of the PR and between fa653d232b348308bf4036a0ff559003f0c51a9b and 8bf64e4334ded6063371ac97c9aa8e458ff1817d.
> 
> </details>
> 
> <details>
> <summary>📒 Files selected for processing (4)</summary>
> 
> * `src/App.jsx` (2 hunks)
> * `src/components/Footer.jsx` (2 hunks)
> * `src/components/Navbar.jsx` (2 hunks)
> * `src/pages/hack_today.jsx` (1 hunks)
> 
> </details>
> 
> ```ascii
>  ____________________________________________________________________
> < Sometimes, I feel like a code reviewer in a world of copy-pasters. >
>  --------------------------------------------------------------------
>   \
>    \   (\__/)
>        (•ㅅ•)
>        / 　 づ
> ```

<!-- end of auto-generated comment: review in progress by coderabbit.ai -->
<!-- usage_tips_start -->

> [!TIP]
> <details>
> <summary>CodeRabbit can generate a title for your PR based on the changes with custom instructions.</summary>
> 
> Add the `reviews.auto_title_instructions` setting in your project's settings in CodeRabbit to generate a title for your PR based on the changes in the PR with custom instructions.
> 
> </details>

<!-- usage_tips_end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 🔥 Error while generating docstrings. (🔄  Check again to generate docstrings again)

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=pusdatin-ittoday/ittod-web-frontend&utm_content=17):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: coderabbitai[bot]
created_at: 2025-05-01T04:48:42Z
body: > [!CAUTION]
> No docstrings were generated.
author_association: CONTRIBUTOR