build: migrate to vite and update dependencies

Migrates the React app from Create React App (CRA) to Vite
for faster build times and improved development experience.
Also updates all dependencies to their latest versions.

BREAKING CHANGE: Removes react-scripts and CRA-related
dependencies.  The development and build processes now rely
on Vite.

adventure-rental-app/src/App.css

@@ -1,34 +1,24 @@
-.App {
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
+@keyframes logo-spin {
   from {
     transform: rotate(0deg);
   }
@@ -36,3 +26,17 @@
     transform: rotate(360deg);
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

adventure-rental-app/src/App.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import HomePage from './components/HomePage';
-import CategoriesPage from './components/CategoriesPage';
-
-function App() {
-  return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/categories" element={<CategoriesPage />} />
-      </Routes>
-    </Router>
-  );
-}
-
-export default App;

adventure-rental-app/src/App.jsx

@@ -0,0 +1,9 @@
+import LoginPage from './LoginPage'
+
+function App() {
+  return (
+    <LoginPage />
+  )
+}
+
+export default App

adventure-rental-app/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

adventure-rental-app/src/LoginPage.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+const LoginPage = () => {
+  return (
+    <div className="flex h-screen">
+      {/* Left side with description and image */}
+      <div className="w-1/2 bg-gray-200 p-10 flex flex-col justify-center items-center text-center">
+        <div className="mb-10">
+          <h1 className="text-4xl font-bold mb-4">Adventure Awaits!</h1>
+          <p className="text-lg">
+            Rent the best camping gear from us and embark on your next great adventure.
+          </p>
+        </div>
+        <div>
+          {/* Placeholder for an image */}
+          <div className="w-64 h-64 bg-gray-400 rounded-lg">
+            <span className="text-gray-600">Image Placeholder</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Right side with login form */}
+      <div className="w-1/2 flex justify-center items-center">
+        <div className="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md">
+          <h2 className="text-3xl font-bold text-center">Login</h2>
+          <form className="space-y-6">
+            <div>
+              <label htmlFor="email" className="text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              />
+            </div>
+            <div>
+              <label htmlFor="password">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              />
+            </div>
+            <div>
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Sign in
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

adventure-rental-app/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

adventure-rental-app/src/components/CategoriesPage.jsx

@@ -1,177 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const CategoriesPage = () => {
-  const categories = [
-    { name: 'Tenda', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCNHokO6q-y0WWuIHxzj0NwuqG6bj2wHCfFp5C925XV6UC9pzZDqunT5gN3LBK645qCCXzyqxn6-eY7k8b_zRBPm4LzV8huqbjEmoa2KfQmS2FxGkTLNyPUdBx9s27nIS1QvHo_1xRSRCdQvwUz8W-7Ff544DTny-I7nKmoLnKp4q_MhP0pr5UmHdMCWwAhAmfJop8afuMpeR2cwgJb8U-_GgLi11JRJcanuH9fVOqqqxsbuAoQXOjJPWiJ6P8UhpFmGJJpet1_AzA' },
-    { name: 'Sleeping Bag', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDrxeYAqxgHvXBLRxyW6GONxUV4CreNviEp49SxXd6r_PHkczD1Hl5f_qkFAvhnjD4BzOPXvkBALnESILNgTVoH8SRDj2655B-UgV1EeydVlo7_vqXLPL00EOej920wYxn3ciRqc8T8T5NSiwyvFzHWcY6QLJUYT2cQRemIPDpSFJR76cPAyHk2umMOh_WKXrBOoZJ7vE9kaSZOshh-PkxUi92Pi3bolxcOm7eiRXB8K8e6yqhOqLMV5KtxP5UmZg05c0IevCQYsBk' },
-    { name: 'Matras', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCWwcGTGRxXLPLB4NE3vT-cPBnJs0rs2JlyPQn0YSKWIaZkp5__D-P05aaUTSha1lfgbPeyIIseEOVlX30J5zkTf3oMZXYZV9HlV1ckh_3PJJULcIQJ6QdlQuxiTHEpF-qRkbhwXrsQhPLgqvXyB3eaRUxcFu179dHzmkU4OfspLCye8U6LHjdp30zT1DDn87a_SgnLm77wlIpwS9PhjbGKdC9jy_g2Kgt_Wdn-OgHwnefT9Hl7KiRfdZ2RwPz-J5dcAw6gwYEUm1I' },
-    { name: 'Kompor', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD4aZqSSgxUwH2PtTZoWZkHJyBnImCvJ3E5_XDv1fYv_2mcnq8P3dMOLoARlHsJC4aeRhxxlr58hkUk120Mq_Uk5unxMAbDFYNn4TM_h5QEm0ZBIqOKgEAx4QKf93XE68uVLwT4sB_6dnMHs9gjxMS5vdalwAPTCbwlANQrQELLiBA-055ZYSa-8Kwop__Ygzyp2OrxA4cwYcPC5wlgogD7R5BSVq-vOnKUtrcfLezPUu49wwdufZYdJ9C33pUske_FQLhLA2pHrJQ' },
-    { name: 'Peralatan Masak', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDO6RTDKia5PJXnjXf1HFAmayyakeUrXzX7OWUANvGHTUYfzrb8YlZxLm3PwBud6k9uc_r4YER-cA7SXx3kWjK5eMD9clyFU4_NdIfr4865_FLDUmM4tUmRShNQMuis0aFoVGgkiIgsRVhXqLmp2W836eIFHix1UqUxcKhGuKRu9GbPTAgQZlEo4PMntizkCPEOsNYpnLFpYtbUeD0afJ8erKPZQU3vnpxeP_G8atJBAVV1MEgHNd2W6FOMPqfVV2XhgTiu3WrIqZo' },
-    { name: 'Lampu', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDymPy_KGw4A3sbMoc2a1_u51Tgtpl2UFR9BSb8ywke8yk3d34Qz8B75ty20CinoBsqxRxOs0JsHWqBV0X7n-BRmMEfi2HAxWUptg6gh5NZZHxdSXNamBtzhhflifOM06t2A_EWDu79T_6vDDPlSG76fSwdTm_4mC_ei85AuW8mFxGBIqOxldQhZESsg9SWM0p3XPUUy6tYFxtXf7zWDb3mpU1D1XPZC5_po3yXYksmJVqngFAmV8DKOgkyPWOks88pkyc0SQks6YE' },
-    { name: 'Tas Gunung', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBklJDG4ebGr2t_CncSfmiA7gZEABiAjzzuSBFQIPn3vDjwkHDIJjKDjEW3SU7Mrz9QexsdDpbR3i5uuWFAr-ZhARMooHtK20wK1dmkJ-tGSYuwpWfWDQYuPnoSsGCWY2c3V7Zs_oACjHjl4tVYS_giJblk24wHx2nlVBrBGdbsPCRrcIl7wAkJvYT0TUvyQmG69ijfmjeGuoq41s3u8_wxh_dILQiaPxXScvalC_oXgM9ScT6HsYMe02uPOKSk9yG8ERhmVofTyhM' },
-    { name: 'Sepatu Gunung', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAkCyY-0wbXffws3P_0WZUFYBmPCLO4R8uFjLuPPoHykdg3djqLJkO7wgZ6P95PY_3ZMoklu8TynW3gU46rvYC-co3yvMLuYv0VZ7p5QknLqVDUBGHbcVS3QqNz5VOtw4bq8WtW_OK8-3nzePCawaZWD4N5SFByCXQ4d9MO6UwhOIfmBQP5N7xDkNIlvjxYyJDzY_rJ7NF5d1FlS0py72Bi8yFEHSLGP4k1YFji8in5T-6ZnJ4O_fNGOJ2-EveQHoR68DvH_oRvKbs' },
-  ];
-
-  return (
-    <div className="bg-[#fbf9f9]">
-      {/* Header */}
-      <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f1e9ea] px-10 py-3">
-        <div className="flex items-center gap-8">
-          <div className="flex items-center gap-4 text-[#191011]">
-            <div className="size-4">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 4H30.6666V17.3334H17.3334V30.6666H4V44H44V4Z" fill="currentColor"></path></svg>
-            </div>
-            <h2 className="text-[#191011] text-lg font-bold leading-tight tracking-[-0.015em]">CampRent</h2>
-          </div>
-          <div className="flex items-center gap-9">
-            <Link className="text-[#191011] text-sm font-medium leading-normal" to="/">Beranda</Link>
-            <Link className="text-[#191011] text-sm font-medium leading-normal" to="/categories">Kategori</Link>
-            <Link className="text-[#191011] text-sm font-medium leading-normal" to="/">Pemesanan</Link>
-            <Link className="text-[#191011] text-sm font-medium leading-normal" to="/">Tentang Kami</Link>
-          </div>
-        </div>
-        <div className="flex flex-1 justify-end gap-8">
-          <label className="flex flex-col min-w-40 !h-10 max-w-64">
-            <div className="flex w-full flex-1 items-stretch rounded-xl h-full">
-              <div
-                className="text-[#8b5b5d] flex border-none bg-[#f1e9ea] items-center justify-center pl-4 rounded-l-xl border-r-0"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
-                  <path
-                    d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"
-                  ></path>
-                </svg>
-              </div>
-              <input
-                placeholder="Search"
-                className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#191011] focus:outline-0 focus:ring-0 border-none bg-[#f1e9ea] focus:border-none h-full placeholder:text-[#8b5b5d] px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal"
-              />
-            </div>
-          </label>
-          <div className="flex gap-2">
-            <button
-              className="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 bg-[#f1e9ea] text-[#191011] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5"
-            >
-              <div className="text-[#191011]">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
-                  <path
-                    d="M178,32c-20.65,0-38.73,8.88-50,23.89C116.73,40.88,98.65,32,78,32A62.07,62.07,0,0,0,16,94c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,220.66,240,164,240,94A62.07,62.07,0,0,0,178,32ZM128,206.8C109.74,196.16,32,147.69,32,94A46.06,46.06,0,0,1,78,48c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,147.61,146.24,196.15,128,206.8Z"
-                  ></path>
-                </svg>
-              </div>
-            </button>
-            <button
-              className="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 bg-[#f1e9ea] text-[#191011] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5"
-            >
-              <div className="text-[#191011]">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
-                  <path
-                    d="M222.14,58.87A8,8,0,0,0,216,56H54.68L49.79,29.14A16,16,0,0,0,34.05,16H16a8,8,0,0,0,0,16h18L59.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,152,204a28,28,0,1,0,28-28H83.17a8,8,0,0,1-7.87-6.57L72.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,222.14,58.87ZM96,204a12,12,0,1,1-12-12A12,12,0,0,1,96,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,192,204Zm4-74.57A8,8,0,0,1,188.1,136H69.22L57.59,72H206.41Z"
-                  ></path>
-                </svg>
-              </div>
-            </button>
-          </div>
-          <div
-            className="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
-            style={{backgroundImage: 'url("https://lh3.googleusercontent.com/aida-public/AB6AXuBxaF5v6Zbu9bB82x_wP5pkjogVV5iFabxe8ySILcRyEdf47hhsJZXw1sLOwUUS88fTlb7fgkXL_uMZqqrl23CGFaQ_TXb11ZHBSSe-_nnX8OA8nNEzJCM558mTSUEQDfd08OlgUOycu_eRnnWYkwz7j4Pq5F7aPyjpTRPvs1mA9us4DhS_EYCCUDaU6lfHerzOvHS3yP0JMS6aAGm1WLQkXoj36__9PePJvdNhbRcRVRuizP7t3Ugb70q3mtiJ8nsWCOtxRPSmZdE")'}}
-          ></div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="flex flex-wrap justify-between gap-3 p-4">
-          <p className="text-[#191011] tracking-light text-[32px] font-bold leading-tight min-w-72">Kategori Peralatan</p>
-        </div>
-        <div className="flex gap-3 p-3 flex-wrap pr-4">
-          <button className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f1e9ea] pl-4 pr-2">
-            <p className="text-[#191011] text-sm font-medium leading-normal">Harga</p>
-            <div className="text-[#191011]">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
-                <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
-              </svg>
-            </div>
-          </button>
-          <button className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f1e9ea] pl-4 pr-2">
-            <p className="text-[#191011] text-sm font-medium leading-normal">Merek</p>
-            <div className="text-[#191011]">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
-                <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
-              </svg>
-            </div>
-          </button>
-          <button className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f1e9ea] pl-4 pr-2">
-            <p className="text-[#191011] text-sm font-medium leading-normal">Kapasitas</p>
-            <div className="text-[#191011]">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
-                <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
-              </svg>
-            </div>
-          </button>
-        </div>
-        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-          {categories.map((category) => (
-            <div key={category.name} className="group relative cursor-pointer overflow-hidden rounded-lg shadow-lg transition-transform duration-200 hover:scale-105">
-              <img
-                src={category.image}
-                alt={category.name}
-                className="h-full w-full object-cover"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-              <div className="absolute bottom-4 left-4">
-                <h3 className="text-2xl font-bold text-white">{category.name}</h3>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <footer className="bg-white">
-        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-          <div className="flex flex-wrap items-baseline justify-between">
-            <div className="flex items-center gap-4 text-[#1b0e0e]">
-              <div className="size-4">
-                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 4H30.6666V17.3334H17.3334V30.6666H4V44H44V4Z" fill="currentColor"></path></svg>
-              </div>
-              <h2 className="text-lg font-bold leading-tight tracking-[-0.015em] text-[#1b0e0e]">CampRent</h2>
-            </div>
-            <div className="mt-8 flex flex-wrap justify-center gap-x-8 gap-y-4 md:mt-0">
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">About Us</Link>
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">Privacy Policy</Link>
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">Terms and Conditions</Link>
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">Contact</Link>
-            </div>
-            <div className="mt-8 flex justify-center space-x-6 md:mt-0">
-              <a href="/" className="text-gray-400 hover:text-gray-500">
-                <span className="sr-only">Instagram</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" d="M12.315 2c-4.02.083-6.135 2.166-6.135 6.182 0 4.016 2.115 6.099 6.135 6.182s6.135-2.083 6.135-6.182c0-4.016-2.115-6.099-6.135-6.182zM12 15.818c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6zm4.805-10.318c-.949 0-1.719.77-1.719 1.719s.77 1.719 1.719 1.719 1.719-.77 1.719-1.719-.77-1.719-1.719-1.719zm-1.719 4.318c-1.439 0-2.6 1.161-2.6 2.6s1.161 2.6 2.6 2.6 2.6-1.161 2.6-2.6-1.161-2.6-2.6-2.6z" clipRule="evenodd" />
-                </svg>
-              </a>
-              <a href="/" className="text-gray-400 hover:text-gray-500">
-                <span className="sr-only">Twitter</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-                </svg>
-              </a>
-              <a href="/" className="text-gray-400 hover:text-gray-500">
-                <span className="sr-only">Facebook</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
-                </svg>
-              </a>
-            </div>
-          </div>
-          <div className="mt-8 border-t border-gray-200 pt-8 text-center">
-            <p className="text-base text-gray-400">&copy; 2024 CampRent. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-};
-
-export default CategoriesPage;

adventure-rental-app/src/components/HomePage.jsx

@@ -1,271 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const HomePage = () => {
-  return (
-    <div className="bg-[#fcf8f8]">
-      {/* Header */}
-      <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f3e7e8] px-10 py-3">
-        <div className="flex items-center gap-8">
-          <div className="flex items-center gap-4 text-[#1b0e0e]">
-            <div className="size-4">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 4H30.6666V17.3334H17.3334V30.6666H4V44H44V4Z" fill="currentColor"></path></svg>
-            </div>
-            <h2 className="text-[#1b0e0e] text-lg font-bold leading-tight tracking-[-0.015em]">CampRent</h2>
-          </div>
-          <div className="flex items-center gap-9">
-            <Link className="text-[#1b0e0e] text-sm font-medium leading-normal" to="/">Beranda</Link>
-            <Link className="text-[#1b0e0e] text-sm font-medium leading-normal" to="/categories">Peralatan</Link>
-            <Link className="text-[#1b0e0e] text-sm font-medium leading-normal" to="/">Tentang Kami</Link>
-            <Link className="text-[#1b0e0e] text-sm font-medium leading-normal" to="/">Kontak</Link>
-          </div>
-        </div>
-        <div className="flex flex-1 justify-end gap-8">
-          <label className="flex flex-col min-w-40 !h-10 max-w-64">
-            <div className="flex w-full flex-1 items-stretch rounded-lg h-full">
-              <div
-                className="text-[#994d51] flex border-none bg-[#f3e7e8] items-center justify-center pl-4 rounded-l-lg border-r-0"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
-                  <path
-                    d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"
-                  ></path>
-                </svg>
-              </div>
-              <input
-                placeholder="Search"
-                className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-[#1b0e0e] focus:outline-0 focus:ring-0 border-none bg-[#f3e7e8] focus:border-none h-full placeholder:text-[#994d51] px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal"
-              />
-            </div>
-          </label>
-          <div className="flex gap-2">
-            <button
-              className="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-[#e92932] text-[#fcf8f8] text-sm font-bold leading-normal tracking-[0.015em]"
-            >
-              <span className="truncate">Masuk</span>
-            </button>
-            <button
-              className="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-[#f3e7e8] text-[#1b0e0e] text-sm font-bold leading-normal tracking-[0.015em]"
-            >
-              <span className="truncate">Daftar</span>
-            </button>
-          </div>
-        </div>
-      </header>
-
-      {/* Hero Section */}
-      <div
-        className="flex min-h-[60vh] flex-col items-center justify-center bg-cover bg-center p-4 text-center"
-        style={{
-          backgroundImage:
-            'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
-        }}
-      >
-        <h1 className="text-5xl font-black leading-tight tracking-tighter text-white md:text-7xl">
-          Your Adventure Awaits.
-        </h1>
-        <h2 className="mt-4 text-lg font-normal text-white md:text-xl">
-          High-quality camping gear for your next escape into nature.
-        </h2>
-        <button className="mt-8 flex min-w-[120px] cursor-pointer items-center justify-center rounded-lg bg-[#e92932] px-6 py-3 text-base font-bold leading-normal text-white tracking-wide transition-transform duration-200 hover:scale-105">
-          Explore Equipment
-        </button>
-      </div>
-
-      {/* Bento Grid Section */}
-      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <h2 className="text-center text-4xl font-bold tracking-tight text-[#1b0e0e]">
-          Featured Categories
-        </h2>
-        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <div className="group relative col-span-1 row-span-2 cursor-pointer overflow-hidden rounded-lg shadow-lg transition-transform duration-200 hover:scale-105 sm:col-span-2">
-            <img
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNHokO6q-y0WWuIHxzj0NwuqG6bj2wHCfFp5C925XV6UC9pzZDqunT5gN3LBK645qCCXzyqxn6-eY7k8b_zRBPm4LzV8huqbjEmoa2KfQmS2FxGkTLNyPUdBx9s27nIS1QvHo_1xRSRCdQvwUz8W-7Ff544DTny-I7nKmoLnKp4q_MhP0pr5UmHdMCWwAhAmfJop8afuMpeR2cwgJb8U-_GgLi11JRJcanuH9fVOqqqxsbuAoQXOjJPWiJ6P8UhpFmGJJpet1_AzA"
-              alt="Tents"
-              className="h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-            <div className="absolute bottom-4 left-4">
-              <h3 className="text-2xl font-bold text-white">Tents</h3>
-            </div>
-          </div>
-          <div className="group relative cursor-pointer overflow-hidden rounded-lg shadow-lg transition-transform duration-200 hover:scale-105">
-            <img
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuDO6RTDKia5PJXnjXf1HFAmayyakeUrXzX7OWUANvGHTUYfzrb8YlZxLm3PwBud6k9uc_r4YER-cA7SXx3kWjK5eMD9clyFU4_NdIfr4865_FLDUmM4tUmRShNQMuis0aFoVGgkiIgsRVhXqLmp2W836eIFHix1UqUxcKhGuKRu9GbPTAgQZlEo4PMntizkCPEOsNYpnLFpYtbUeD0afJ8erKPZQU3vnpxeP_G8atJBAVV1MEgHNd2W6FOMPqfVV2XhgTiu3WrIqZo"
-              alt="Cooking Gear"
-              className="h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-            <div className="absolute bottom-4 left-4">
-              <h3 className="text-2xl font-bold text-white">Cooking Gear</h3>
-            </div>
-          </div>
-          <div className="group relative cursor-pointer overflow-hidden rounded-lg shadow-lg transition-transform duration-200 hover:scale-105">
-            <img
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuBklJDG4ebGr2t_CncSfmiA7gZEABiAjzzuSBFQIPn3vDjwkHDIJjKDjEW3SU7Mrz9QexsdDpbR3i5uuWFAr-ZhARMooHtK20wK1dmkJ-tGSYuwpWfWDQYuPnoSsGCWY2c3V7Zs_oACjHjl4tVYS_giJblk24wHx2nlVBrBGdbsPCRrcIl7wAkJvYT0TUvyQmG69ijfmjeGuoq41s3u8_wxh_dILQiaPxXScvalC_oXgM9ScT6HsYMe02uPOKSk9yG8ERhmVofTyhM"
-              alt="Backpacks"
-              className="h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-            <div className="absolute bottom-4 left-4">
-              <h3 className="text-2xl font-bold text-white">Backpacks</h3>
-            </div>
-          </div>
-          <div className="group relative col-span-1 row-span-1 cursor-pointer overflow-hidden rounded-lg shadow-lg transition-transform duration-200 hover:scale-105 sm:col-span-2 lg:col-span-2">
-            <img
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrxeYAqxgHvXBLRxyW6GONxUV4CreNviEp49SxXd6r_PHkczD1Hl5f_qkFAvhnjD4BzOPXvkBALnESILNgTVoH8SRDj2655B-UgV1EeydVlo7_vqXLPL00EOej920wYxn3ciRqc8T8T5NSiwyvFzHWcY6QLJUYT2cQRemIPDpSFJR76cPAyHk2umMOh_WKXrBOoZJ7vE9kaSZOshh-PkxUi92Pi3bolxcOm7eiRXB8K8e6yqhOqLMV5KtxP5UmZg05c0IevCQYsBk"
-              alt="Sleeping Bags"
-              className="h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-            <div className="absolute bottom-4 left-4">
-              <h3 className="text-2xl font-bold text-white">Sleeping Bags</h3>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Why Choose Us Section */}
-      <div className="bg-white py-16">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <h2 className="text-center text-4xl font-bold tracking-tight text-[#1b0e0e]">
-            Why Choose CampRent?
-          </h2>
-          <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            <div className="text-center">
-              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[#f3e7e8] text-[#e92932]">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
-              </div>
-              <h3 className="mt-6 text-lg font-medium text-[#1b0e0e]">Quality Inspected Gear</h3>
-              <p className="mt-2 text-base text-gray-500">
-                Every item is thoroughly inspected and cleaned after each rental to ensure it's in perfect condition for your adventure.
-              </p>
-            </div>
-            <div className="text-center">
-              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[#f3e7e8] text-[#e92932]">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
-              </div>
-              <h3 className="mt-6 text-lg font-medium text-[#1b0e0e]">Easy Online Booking</h3>
-              <p className="mt-2 text-base text-gray-500">
-                Our simple and secure online booking process makes it easy to rent the gear you need in just a few clicks.
-              </p>
-            </div>
-            <div className="text-center">
-              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[#f3e7e8] text-[#e92932]">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
-              </div>
-              <h3 className="mt-6 text-lg font-medium text-[#1b0e0e]">24/7 Support</h3>
-              <p className="mt-2 text-base text-gray-500">
-                Our team is available around the clock to answer your questions and provide support during your rental period.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Testimonials Section */}
-      <div className="bg-[#fcf8f8] py-16">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <h2 className="text-center text-4xl font-bold tracking-tight text-[#1b0e0e]">
-            What Our Customers Say
-          </h2>
-          <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-            <div className="rounded-lg bg-white p-8 shadow-lg">
-              <div className="flex items-center">
-                <img
-                  className="h-12 w-12 rounded-full"
-                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                  alt="Customer"
-                />
-                <div className="ml-4">
-                  <h4 className="text-lg font-medium text-[#1b0e0e]">John Doe</h4>
-                  <p className="text-sm text-gray-500">Happy Camper</p>
-                </div>
-              </div>
-              <p className="mt-6 text-base text-gray-500">
-                "The gear was in perfect condition and the online booking process was a breeze. I'll definitely be renting from CampRent again!"
-              </p>
-            </div>
-            <div className="rounded-lg bg-white p-8 shadow-lg">
-              <div className="flex items-center">
-                <img
-                  className="h-12 w-12 rounded-full"
-                  src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                  alt="Customer"
-                />
-                <div className="ml-4">
-                  <h4 className="text-lg font-medium text-[#1b0e0e]">Jane Smith</h4>
-                  <p className="text-sm text-gray-500">Weekend Adventurer</p>
-                </div>
-              </div>
-              <p className="mt-6 text-base text-gray-500">
-                "I was so impressed with the quality of the equipment and the friendly customer service. Highly recommended!"
-              </p>
-            </div>
-            <div className="rounded-lg bg-white p-8 shadow-lg">
-              <div className="flex items-center">
-                <img
-                  className="h-12 w-12 rounded-full"
-                  src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                  alt="Customer"
-                />
-                <div className="ml-4">
-                  <h4 className="text-lg font-medium text-[#1b0e0e]">Mike Johnson</h4>
-                  <p className="text-sm text-gray-500">Family Camper</p>
-                </div>
-              </div>
-              <p className="mt-6 text-base text-gray-500">
-                "Renting from CampRent made our family camping trip so much easier. The gear was top-notch and the kids had a blast!"
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <footer className="bg-white">
-        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-          <div className="flex flex-wrap items-baseline justify-between">
-            <div className="flex items-center gap-4 text-[#1b0e0e]">
-              <div className="size-4">
-                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 4H30.6666V17.3334H17.3334V30.6666H4V44H44V4Z" fill="currentColor"></path></svg>
-              </div>
-              <h2 className="text-lg font-bold leading-tight tracking-[-0.015em] text-[#1b0e0e]">CampRent</h2>
-            </div>
-            <div className="mt-8 flex flex-wrap justify-center gap-x-8 gap-y-4 md:mt-0">
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">About Us</Link>
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">Privacy Policy</Link>
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">Terms and Conditions</Link>
-              <Link to="/" className="text-base text-gray-500 hover:text-gray-900">Contact</Link>
-            </div>
-            <div className="mt-8 flex justify-center space-x-6 md:mt-0">
-              <a href="/" className="text-gray-400 hover:text-gray-500">
-                <span className="sr-only">Instagram</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" d="M12.315 2c-4.02.083-6.135 2.166-6.135 6.182 0 4.016 2.115 6.099 6.135 6.182s6.135-2.083 6.135-6.182c0-4.016-2.115-6.099-6.135-6.182zM12 15.818c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6zm4.805-10.318c-.949 0-1.719.77-1.719 1.719s.77 1.719 1.719 1.719 1.719-.77 1.719-1.719-.77-1.719-1.719-1.719zm-1.719 4.318c-1.439 0-2.6 1.161-2.6 2.6s1.161 2.6 2.6 2.6 2.6-1.161 2.6-2.6-1.161-2.6-2.6-2.6z" clipRule="evenodd" />
-                </svg>
-              </a>
-              <a href="/" className="text-gray-400 hover:text-gray-500">
-                <span className="sr-only">Twitter</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-                </svg>
-              </a>
-              <a href="/" className="text-gray-400 hover:text-gray-500">
-                <span className="sr-only">Facebook</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
-                </svg>
-              </a>
-            </div>
-          </div>
-          <div className="mt-8 border-t border-gray-200 pt-8 text-center">
-            <p className="text-base text-gray-400">&copy; 2024 CampRent. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-};
-
-export default HomePage;

adventure-rental-app/src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

adventure-rental-app/src/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

adventure-rental-app/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

adventure-rental-app/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

adventure-rental-app/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

adventure-rental-app/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';