feat: initial commit for camping rental webapp
This commit establishes the foundational structure for the Karyaman project, focusing on the camping equipment rental web application. Key additions include: - Scaffolding for three React applications: `adventure-rental-app`, `motel-app`, and `pakrete-app` using Create React App. - Initial implementation of `HomePage` and `CategoriesPage` components for the `adventure-rental-app`, based on provided design mockups. - Project documentation including PRDs and design files for the applications. - Configuration of the Kilo Code memory bank with core project details such as architecture, product vision, and tech stack.
This commit is contained in:
47
adventure-rental-app/.gitignore
vendored
Normal file
47
adventure-rental-app/.gitignore
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
70
adventure-rental-app/README.md
Normal file
70
adventure-rental-app/README.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
17392
adventure-rental-app/package-lock.json
generated
Normal file
17392
adventure-rental-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
adventure-rental-app/package.json
Normal file
35
adventure-rental-app/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "adventure-rental-app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.30.1",
|
||||
"react-scripts": "5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
264
adventure-rental-app/project-brief/home.md
Normal file
264
adventure-rental-app/project-brief/home.md
Normal file
@@ -0,0 +1,264 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
as="style"
|
||||
onload="this.rel='stylesheet'"
|
||||
href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800"
|
||||
/>
|
||||
|
||||
<title>Stitch Design</title>
|
||||
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
|
||||
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="relative flex size-full min-h-screen flex-col bg-[#fcf8f8] group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
|
||||
<div class="layout-container flex h-full grow flex-col">
|
||||
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f3e7e8] px-10 py-3">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex items-center gap-4 text-[#1b0e0e]">
|
||||
<div class="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 class="text-[#1b0e0e] text-lg font-bold leading-tight tracking-[-0.015em]">CampRent</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-9">
|
||||
<a class="text-[#1b0e0e] text-sm font-medium leading-normal" href="#">Beranda</a>
|
||||
<a class="text-[#1b0e0e] text-sm font-medium leading-normal" href="#">Peralatan</a>
|
||||
<a class="text-[#1b0e0e] text-sm font-medium leading-normal" href="#">Tentang Kami</a>
|
||||
<a class="text-[#1b0e0e] text-sm font-medium leading-normal" href="#">Kontak</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-end gap-8">
|
||||
<label class="flex flex-col min-w-40 !h-10 max-w-64">
|
||||
<div class="flex w-full flex-1 items-stretch rounded-lg h-full">
|
||||
<div
|
||||
class="text-[#994d51] flex border-none bg-[#f3e7e8] items-center justify-center pl-4 rounded-l-lg border-r-0"
|
||||
data-icon="MagnifyingGlass"
|
||||
data-size="24px"
|
||||
data-weight="regular"
|
||||
>
|
||||
<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"
|
||||
class="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"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="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 class="truncate">Masuk</span>
|
||||
</button>
|
||||
<button
|
||||
class="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 class="truncate">Daftar</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="px-40 flex flex-1 justify-center py-5">
|
||||
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
|
||||
<div class="@container">
|
||||
<div class="@[480px]:p-4">
|
||||
<div
|
||||
class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat @[480px]:gap-8 @[480px]:rounded-lg items-center justify-center p-4"
|
||||
style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuCWyBJbobacHRpR2rZFfGuiAHDut1lUwnrS7Ne1qIwJmVoHIZ9jSH8pBbiNxfQVxaolM_fOzTrnkl3gJf7cvEZ82ca9FDwOAWghh3tHnGt7nmYJJwwBa_JEBLu_ZX32TtrwIevABNmTkTsFrVR_lREK-3BBHvfEfNa-B3xStitvuMhiaQ0uemjEQZ8dj18r8epa8t9Ub17dok8VigDsim9rif4kOgg7eIVn_ssoTCj5Wy-rvkUMYOE5yXcm-EdNoY2ktTTgA--gV5Q");'
|
||||
>
|
||||
<div class="flex flex-col gap-2 text-center">
|
||||
<h1
|
||||
class="text-white text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-5xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em]"
|
||||
>
|
||||
Sewa Peralatan Camping Berkualitas
|
||||
</h1>
|
||||
<h2 class="text-white text-sm font-normal leading-normal @[480px]:text-base @[480px]:font-normal @[480px]:leading-normal">
|
||||
Nikmati petualangan alam bebas dengan peralatan camping terbaik. Sewa sekarang dan rasakan pengalaman camping yang tak terlupakan.
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-[#e92932] text-[#fcf8f8] text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base @[480px]:font-bold @[480px]:leading-normal @[480px]:tracking-[0.015em]"
|
||||
>
|
||||
<span class="truncate">Lihat Peralatan</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-[#1b0e0e] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Penawaran Spesial</h2>
|
||||
<div class="flex overflow-y-auto [-ms-scrollbar-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
<div class="flex items-stretch p-4 gap-3">
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-lg min-w-60">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-lg flex flex-col"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAvRp6hsxMTXE1tJYF0MjKVRm0zysHK3ClRz5HwJfP34ELGDJvktXlsjUJQ9Fv1VPsUwEE-CU6w25CN9geU18xHw_yTh3jzpJheLyDwrnMZOChC3HaBlYmv28UKhGV76P2LHMDvu5dEtobTm0QD3YLAvwT6L7SK0m33paUlXxna9CuR2MMgKZ17P_a46q2zBwCSnYf1GuZEZNzePW-HPWd0tyuJ9UYOblL2T3_w-d44UkbiHKT9lIKk6y4piJTESqj7LuO0NfHHe7E");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Tenda Camping Kapasitas 4 Orang</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Sewa mulai dari Rp 50.000/hari</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-lg min-w-60">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-lg flex flex-col"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC5BQ5uUUuMKq6VhjKep8tyvrmeGT0nvgx86fyEVrUqTTGzcZDO8z2ayqxSxnzdk8gjpgGmjLbhZL-HnpOV-5r-GwGs3FssAhhgcBi4HoCthNTn2zUYytotzBWVDDXylxGeKAzhOw2dgbM6oD_AfknM_6kWWr6CBobDasznxJuC2JNbzV-PEDmhPT_8qzeKh6mWYY8-KXDM3jHcVZZhhEvde6tBRwBzpHGlkrDrog_6C_Yiagmz9JN9lVE4xHuAWtFLX1IQRvGfwak");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Kompor Camping Portable</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Sewa mulai dari Rp 25.000/hari</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-lg min-w-60">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-lg flex flex-col"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDow9uli5aTA-tdn0N14A0jP3UNtUVlAlo6rbp-rV-YlTVoQq_A4uTMqbRo9HoIVi_K1xBfxfRYrWxF0w9ZCDh_6rydQLIHbmaqwUOeTGs0irjrBfPRa2hWAbtOFRic0JBuHPAMm_Hm7hotKO5-wj7uIg0aMMmuyE2Y92toM47T2yH0-eRtaBLUgSTNP90FWAS7Z95iOEslTdb3tdsXFC9KTc55u4vP9COi09M-GVD0PBEnSWz4PzAcCyNGfpGSs4E18CIwg9L32I8");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Ransel Camping 60L</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Sewa mulai dari Rp 30.000/hari</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-[#1b0e0e] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Peralatan Terbaru</h2>
|
||||
<div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAv4vQr6Z0wpBiZoy5iTs_t1XGlkBeai4R1tIzBmjAIM9gIZKrRcT8-4JDlsLvKDfZvIQYl8loCnkO7lIFP9S2mPQVyozPsjsKkPFmSCF5wjMOBhTs1_d7D5aW6JKsAsxe89mtb2muBN9oXK-xBZHnROjxTxkNMOYJMcTwBm80Qkrvnf27WztRK_49JXRJB4Q1YJ2zLR32yuGD-6rCx5kUm8vu3fZuK-iSUxbAD232TW2A7EU54GGtPRDubJNHdeBVjR2JccH1aG_Y");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Sleeping Bag</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Nyaman dan hangat untuk tidur di alam</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBUg3yW3gYWdIVJPyX4CV_RdT5hghqLHRTcqsAbL5SCGAHCO9P8g44Kim-ul3zrjOnPqmOg8gH-kMAtlG7DsoB5JbSwJ9_uVnpV1TVCmJEpvcYO8P3lurZNVr19zFejVvvohLzehcwy0CxSQcCuKy38ljowG5vSjqc3iP8D0KPHC6Gn44Onh3PTe6E1m7EyX-89LdFbV6yGB1_Vj_XJF2_5wcQlt7yJ362WJlJFVXjONywcWNRvh22uuj498k4yMk9ZOslxX_JRmCk");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Matras Camping</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Alas tidur yang empuk dan isolatif</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuASMEBXbQxfu1_7DcxvyUWeYt70VrkXJp8jYf_vI5-NDsvAyvnARncM3N1BP_RxnUeOR-mPihZzOZW_AmJBRbWBquoaoSsxV4RYpCGBVWQnyWLStHBXQNspO39JdHMF0SnEzNGv8TKGcd3IPFShYf0A26-Xr59HP99s5UErJb-d3DM_9T1lec9aiCPQOqcrmauDQDlOqLVLzyIX3jcArLSOwFkhyxG-ksvQb0-UgnuE2SKJ0ZKKX2obPJmK-7124grO84UipPJZ_UM");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Lampu Tenda</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Penerangan yang praktis untuk tenda</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB_a0CqFMmJkN-KIpw5ACcEZ5mjuOHwxr_j73KyC89fRjx6okZb178lwTQz7zrGXbAsAe4Xdf52EVns7ROW3TF2OYxOtE2dQI_ldoXD0JeXLi9CvKKL_s697Xk9nC7-UmwaJ5UK4fxSNFbxS4ABmMbmvHTwJ82aIHaNdNzJzjlnWSQVCxC29fGtj3UaU7uX7GTWXuXJMJLXBUqo7EDY8iujDHj_JQZ3mFN1ydxR764qk1rnWmACbXiCA-tBk5j5GVpCeHmhphKMhyw");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Peralatan Masak</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Set lengkap untuk memasak di luar ruangan</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-[#1b0e0e] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Kategori Populer</h2>
|
||||
<div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDI6Hr5q3ThScjaCpB8TwRqtKk2nljIxFOtDR2xcZs7X5i3P1Fn86QsPm30m2bd_qKW_v15nErkTgj5RGMXR8bTJ1w_nLgQKDS8jzhcwJGmAf-2fv7rTSNMf4-odTSEQI0tza0bberwHeuW1vy2Thsha9IugC5bGX_AC12PIqhLOGn85KWEhi4uCsnNXuAwt1nuli81M9ew2ILQqMjco64DJpdozvGHeDmu8-MAsy6_kCuQQkEC7dBpB8S5pO3uoTVbOAnmhdByoss");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Tenda</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Berbagai pilihan tenda untuk semua kebutuhan</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAGrYFPtDbX3TZObxkWWwy8FgZlSrrK7WxCnzMuDzQgrL2a_VeqpPy7D1-XCxOYk_P_ys4l475lvBTeZqFy8zosbb433EdiiyBrRmyIG4Wgq0N8B_tjSccIO7WAsCoa7FyMV2ttdP_8QTtXOT5Y6JDoSlxxqzlQ_qHxu-v477d7QQexUuwmnpEV3oiFrmbmoJmAUrASUzIDuA3cuaRF9tJ9o6nKNLTIs0uLyMHiskMjhQKJHEnpkrG4Q0e-Y2V-0ksI9yPX6BY2vTM");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Ransel</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Ransel dengan kapasitas dan fitur lengkap</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBGVtDm8LwfWVZfEkxJUZFSWPkp8BfQsc9L__99XArHJE4CKYXw-0BXlGuQ7BwLTPFDgTqz-9keOWyk9SR-XJBJx7TwkL22uC76w86RcSBzvBmJsymWkKbqNZgHgYiGhszhoiFY08lcj2mUAzS88LjBNeVhWwEeBgKCDr6Y9VgDRuHA-vH6GRSzMZUU89AOBlgu5jw9xtkjILSq3NgUfBP2mmz6ntCLGLRSuH6QGv0VtsDYGzyCW8bk63XW9bzs1A-aROyELH1Yu84");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Peralatan Masak</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Set peralatan masak praktis dan ringan</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-lg"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC3s14he8A8hsfHyQjfRX2mrYgNBXXXnndXjkC3UK8SPV7qXuZ58ZIU1DIZrDNxKJifgFAfpPcUs2h9sAWxBphoMqk1nCuABUxcqvzw3WvWFSjIoEDvmQ5_bnmOA8vklUUzq-E26X06ngQEUcqH1PyFWLAPJuPzCk9tMHgRJl9dyBq4SsMa9Q985SSzAxDmjjXzx3lUL7NNFYG9Gtoe-BPMC0rzIeWbD_WlFe-KlrsyzcbjyOedp_x8jzFZSs57vLARipoU7aPxnIY");'
|
||||
></div>
|
||||
<div>
|
||||
<p class="text-[#1b0e0e] text-base font-medium leading-normal">Peralatan Tidur</p>
|
||||
<p class="text-[#994d51] text-sm font-normal leading-normal">Sleeping bag dan matras untuk tidur nyaman</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="flex justify-center">
|
||||
<div class="flex max-w-[960px] flex-1 flex-col">
|
||||
<footer class="flex flex-col gap-6 px-5 py-10 text-center @container">
|
||||
<div class="flex flex-wrap items-center justify-center gap-6 @[480px]:flex-row @[480px]:justify-around">
|
||||
<a class="text-[#994d51] text-base font-normal leading-normal min-w-40" href="#">Tentang Kami</a>
|
||||
<a class="text-[#994d51] text-base font-normal leading-normal min-w-40" href="#">Kebijakan Privasi</a>
|
||||
<a class="text-[#994d51] text-base font-normal leading-normal min-w-40" href="#">Syarat dan Ketentuan</a>
|
||||
<a class="text-[#994d51] text-base font-normal leading-normal min-w-40" href="#">Kontak</a>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="#">
|
||||
<div class="text-[#994d51]" data-icon="InstagramLogo" data-size="24px" data-weight="regular">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="text-[#994d51]" data-icon="TwitterLogo" data-size="24px" data-weight="regular">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="text-[#994d51]" data-icon="FacebookLogo" data-size="24px" data-weight="regular">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-[#994d51] text-base font-normal leading-normal">@2024 CampRent. All rights reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
203
adventure-rental-app/project-brief/kategori-peralatan.md
Normal file
203
adventure-rental-app/project-brief/kategori-peralatan.md
Normal file
@@ -0,0 +1,203 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
as="style"
|
||||
onload="this.rel='stylesheet'"
|
||||
href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800"
|
||||
/>
|
||||
|
||||
<title>Stitch Design</title>
|
||||
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
|
||||
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="relative flex size-full min-h-screen flex-col bg-[#fbf9f9] group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
|
||||
<div class="layout-container flex h-full grow flex-col">
|
||||
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f1e9ea] px-10 py-3">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex items-center gap-4 text-[#191011]">
|
||||
<div class="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 class="text-[#191011] text-lg font-bold leading-tight tracking-[-0.015em]">CampRent</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-9">
|
||||
<a class="text-[#191011] text-sm font-medium leading-normal" href="#">Beranda</a>
|
||||
<a class="text-[#191011] text-sm font-medium leading-normal" href="#">Kategori</a>
|
||||
<a class="text-[#191011] text-sm font-medium leading-normal" href="#">Pemesanan</a>
|
||||
<a class="text-[#191011] text-sm font-medium leading-normal" href="#">Tentang Kami</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-end gap-8">
|
||||
<label class="flex flex-col min-w-40 !h-10 max-w-64">
|
||||
<div class="flex w-full flex-1 items-stretch rounded-xl h-full">
|
||||
<div
|
||||
class="text-[#8b5b5d] flex border-none bg-[#f1e9ea] items-center justify-center pl-4 rounded-l-xl border-r-0"
|
||||
data-icon="MagnifyingGlass"
|
||||
data-size="24px"
|
||||
data-weight="regular"
|
||||
>
|
||||
<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"
|
||||
class="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"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="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 class="text-[#191011]" data-icon="Heart" data-size="20px" data-weight="regular">
|
||||
<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
|
||||
class="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 class="text-[#191011]" data-icon="ShoppingCart" data-size="20px" data-weight="regular">
|
||||
<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
|
||||
class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBxaF5v6Zbu9bB82x_wP5pkjogVV5iFabxe8ySILcRyEdf47hhsJZXw1sLOwUUS88fTlb7fgkXL_uMZqqrl23CGFaQ_TXb11ZHBSSe-_nnX8OA8nNEzJCM558mTSUEQDfd08OlgUOycu_eRnnWYkwz7j4Pq5F7aPyjpTRPvs1mA9us4DhS_EYCCUDaU6lfHerzOvHS3yP0JMS6aAGm1WLQkXoj36__9PePJvdNhbRcRVRuizP7t3Ugb70q3mtiJ8nsWCOtxRPSmZdE");'
|
||||
></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="px-40 flex flex-1 justify-center py-5">
|
||||
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
|
||||
<div class="flex flex-wrap justify-between gap-3 p-4"><p class="text-[#191011] tracking-light text-[32px] font-bold leading-tight min-w-72">Kategori Peralatan</p></div>
|
||||
<div class="flex gap-3 p-3 flex-wrap pr-4">
|
||||
<button class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f1e9ea] pl-4 pr-2">
|
||||
<p class="text-[#191011] text-sm font-medium leading-normal">Harga</p>
|
||||
<div class="text-[#191011]" data-icon="CaretDown" data-size="20px" data-weight="regular">
|
||||
<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 class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f1e9ea] pl-4 pr-2">
|
||||
<p class="text-[#191011] text-sm font-medium leading-normal">Merek</p>
|
||||
<div class="text-[#191011]" data-icon="CaretDown" data-size="20px" data-weight="regular">
|
||||
<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 class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f1e9ea] pl-4 pr-2">
|
||||
<p class="text-[#191011] text-sm font-medium leading-normal">Kapasitas</p>
|
||||
<div class="text-[#191011]" data-icon="CaretDown" data-size="20px" data-weight="regular">
|
||||
<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 class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCNHokO6q-y0WWuIHxzj0NwuqG6bj2wHCfFp5C925XV6UC9pzZDqunT5gN3LBK645qCCXzyqxn6-eY7k8b_zRBPm4LzV8huqbjEmoa2KfQmS2FxGkTLNyPUdBx9s27nIS1QvHo_1xRSRCdQvwUz8W-7Ff544DTny-I7nKmoLnKp4q_MhP0pr5UmHdMCWwAhAmfJop8afuMpeR2cwgJb8U-_GgLi11JRJcanuH9fVOqqqxsbuAoQXOjJPWiJ6P8UhpFmGJJpet1_AzA");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Tenda</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDrxeYAqxgHvXBLRxyW6GONxUV4CreNviEp49SxXd6r_PHkczD1Hl5f_qkFAvhnjD4BzOPXvkBALnESILNgTVoH8SRDj2655B-UgV1EeydVlo7_vqXLPL00EOej920wYxn3ciRqc8T8T5NSiwyvFzHWcY6QLJUYT2cQRemIPDpSFJR76cPAyHk2umMOh_WKXrBOoZJ7vE9kaSZOshh-PkxUi92Pi3bolxcOm7eiRXB8K8e6yqhOqLMV5KtxP5UmZg05c0IevCQYsBk");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Sleeping Bag</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCWwcGTGRxXLPLB4NE3vT-cPBnJs0rs2JlyPQn0YSKWIaZkp5__D-P05aaUTSha1lfgbPeyIIseEOVlX30J5zkTf3oMZXYZV9HlV1ckh_3PJJULcIQJ6QdlQuxiTHEpF-qRkbhwXrsQhPLgqvXyB3eaRUxcFu179dHzmkU4OfspLCye8U6LHjdp30zT1DDn87a_SgnLm77wlIpwS9PhjbGKdC9jy_g2Kgt_Wdn-OgHwnefT9Hl7KiRfdZ2RwPz-J5dcAw6gwYEUm1I");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Matras</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD4aZqSSgxUwH2PtTZoWZkHJyBnImCvJ3E5_XDv1fYv_2mcnq8P3dMOLoARlHsJC4aeRhxxlr58hkUk120Mq_Uk5unxMAbDFYNn4TM_h5QEm0ZBIqOKgEAx4QKf93XE68uVLwT4sB_6dnMHs9gjxMS5vdalwAPTCbwlANQrQELLiBA-055ZYSa-8Kwop__Ygzyp2OrxA4cwYcPC5wlgogD7R5BSVq-vOnKUtrcfLezPUu49wwdufZYdJ9C33pUske_FQLhLA2pHrJQ");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Kompor</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDO6RTDKia5PJXnjXf1HFAmayyakeUrXzX7OWUANvGHTUYfzrb8YlZxLm3PwBud6k9uc_r4YER-cA7SXx3kWjK5eMD9clyFU4_NdIfr4865_FLDUmM4tUmRShNQMuis0aFoVGgkiIgsRVhXqLmp2W836eIFHix1UqUxcKhGuKRu9GbPTAgQZlEo4PMntizkCPEOsNYpnLFpYtbUeD0afJ8erKPZQU3vnpxeP_G8atJBAVV1MEgHNd2W6FOMPqfVV2XhgTiu3WrIqZo");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Peralatan Masak</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDymPy_KGw4A3sbMoc2a1_u51Tgtpl2UFR9BSb8ywke8yk3d34Qz8B75ty20CinoBsqxRxOs0JsHWqBV0X7n-BRmMEfi2HAxWUptg6gh5NZZHxdSXNamBtzhhflifOM06t2A_EWDu79T_6vDDPlSG76fSwdTm_4mC_ei85AuW8mFxGBIqOxldQhZESsg9SWM0p3XPUUy6tYFxtXf7zWDb3mpU1D1XPZC5_po3yXYksmJVqngFAmV8DKOgkyPWOks88pkyc0SQks6YE");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Lampu</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBklJDG4ebGr2t_CncSfmiA7gZEABiAjzzuSBFQIPn3vDjwkHDIJjKDjEW3SU7Mrz9QexsdDpbR3i5uuWFAr-ZhARMooHtK20wK1dmkJ-tGSYuwpWfWDQYuPnoSsGCWY2c3V7Zs_oACjHjl4tVYS_giJblk24wHx2nlVBrBGdbsPCRrcIl7wAkJvYT0TUvyQmG69ijfmjeGuoq41s3u8_wxh_dILQiaPxXScvalC_oXgM9ScT6HsYMe02uPOKSk9yG8ERhmVofTyhM");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Tas Gunung</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 pb-3">
|
||||
<div
|
||||
class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAkCyY-0wbXffws3P_0WZUFYBmPCLO4R8uFjLuPPoHykdg3djqLJkO7wgZ6P95PY_3ZMoklu8TynW3gU46rvYC-co3yvMLuYv0VZ7p5QknLqVDUBGHbcVS3QqNz5VOtw4bq8WtW_OK8-3nzePCawaZWD4N5SFByCXQ4d9MO6UwhOIfmBQP5N7xDkNIlvjxYyJDzY_rJ7NF5d1FlS0py72Bi8yFEHSLGP4k1YFji8in5T-6ZnJ4O_fNGOJ2-EveQHoR68DvH_oRvKbs");'
|
||||
></div>
|
||||
<p class="text-[#191011] text-base font-medium leading-normal">Sepatu Gunung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end overflow-hidden px-5 pb-5">
|
||||
<button
|
||||
class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-14 bg-[#e8b4b7] text-[#191011] text-base font-bold leading-normal tracking-[0.015em] min-w-0 px-2 gap-4 pl-4 pr-6"
|
||||
>
|
||||
<div class="text-[#191011]" data-icon="ChatCircleDots" data-size="24px" data-weight="regular">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="flex justify-center">
|
||||
<div class="flex max-w-[960px] flex-1 flex-col">
|
||||
<footer class="flex flex-col gap-6 px-5 py-10 text-center @container">
|
||||
<div class="flex flex-wrap items-center justify-center gap-6 @[480px]:flex-row @[480px]:justify-around">
|
||||
<a class="text-[#8b5b5d] text-base font-normal leading-normal min-w-40" href="#">Kebijakan Privasi</a>
|
||||
<a class="text-[#8b5b5d] text-base font-normal leading-normal min-w-40" href="#">Syarat dan Ketentuan</a>
|
||||
<a class="text-[#8b5b5d] text-base font-normal leading-normal min-w-40" href="#">Pusat Bantuan</a>
|
||||
</div>
|
||||
<p class="text-[#8b5b5d] text-base font-normal leading-normal">@2024 CampRent. All rights reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
202
adventure-rental-app/project-brief/prd-adventure-rental-app.md
Normal file
202
adventure-rental-app/project-brief/prd-adventure-rental-app.md
Normal file
@@ -0,0 +1,202 @@
|
||||
Tentu, saya akan merevisi PRD Anda untuk mencerminkan penggunaan Create React App (CRA) sebagai tool utama untuk frontend React Anda. Perubahan utamanya akan ada di bagian teknologi yang digunakan dan beberapa penyesuaian di alur pengguna, meskipun tidak signifikan karena fokus tetap pada React.
|
||||
|
||||
Product Requirement Document (PRD) - Webapp Rental Peralatan Camping (Revisi untuk Create React App)
|
||||
1. Pendahuluan
|
||||
Dokumen ini menguraikan persyaratan fungsional dan non-fungsional untuk pengembangan aplikasi web rental peralatan camping. Tujuannya adalah menyediakan platform yang mudah digunakan bagi pelanggan untuk mencari, menyewa, dan mengembalikan peralatan camping. Bagi pemilik bisnis, ini akan membantu mengelola inventaris, pesanan, dan pelanggan secara efisien. Proyek ini akan dibangun menggunakan Create React App (CRA) untuk frontend React, n8n untuk backend, dan PostgreSQL sebagai database.
|
||||
|
||||
2. Sasaran
|
||||
Meningkatkan efisiensi operasional bisnis rental.
|
||||
|
||||
Mempermudah proses pemesanan bagi pelanggan dengan visualisasi ketersediaan melalui kalender.
|
||||
|
||||
Memperluas jangkauan pelanggan melalui platform online.
|
||||
|
||||
Memberikan visibilitas inventaris real-time.
|
||||
|
||||
Mengurangi kesalahan manual dalam pengelolaan pesanan dan inventaris.
|
||||
|
||||
3. Audiens
|
||||
Pengguna Akhir (Penyewa): Individu atau kelompok yang mencari peralatan camping untuk disewa.
|
||||
|
||||
Admin/Pemilik Bisnis: Pengelola bisnis rental yang bertanggung jawab atas inventaris, pesanan, dan operasional.
|
||||
|
||||
4. Fitur Utama
|
||||
4.1. Modul Pengguna (Penyewa)
|
||||
4.1.1. Pencarian & Penemuan Peralatan
|
||||
Pencarian Berdasarkan Kategori: Pengguna dapat mencari peralatan berdasarkan kategori (misalnya, tenda, sleeping bag, alat masak, dll.).
|
||||
|
||||
Pencarian Berdasarkan Kata Kunci: Pengguna dapat mencari peralatan dengan memasukkan kata kunci.
|
||||
|
||||
Filter & Sortir:
|
||||
|
||||
Filter: Berdasarkan harga, ketersediaan, kapasitas (untuk tenda), merek, dll.
|
||||
|
||||
Sortir: Berdasarkan harga terendah/tertinggi, popularitas, ulasan, dll.
|
||||
|
||||
Detail Produk: Menampilkan informasi lengkap setiap peralatan, termasuk:
|
||||
|
||||
Nama produk
|
||||
|
||||
Deskripsi lengkap
|
||||
|
||||
Harga sewa (per hari/paket)
|
||||
|
||||
Gambar produk (galeri)
|
||||
|
||||
Ketersediaan (Integrasi Kalender): Menampilkan kalender interaktif yang menunjukkan tanggal-tanggal ketersediaan dan ketidaktersediaan untuk setiap item. Pengguna dapat langsung memilih tanggal sewa dari kalender ini.
|
||||
|
||||
Spesifikasi (ukuran, bahan, kapasitas)
|
||||
|
||||
Ulasan dan rating pelanggan
|
||||
|
||||
4.1.2. Proses Pemesanan
|
||||
Pilihan Tanggal Sewa (Melalui Kalender): Pengguna dapat memilih tanggal mulai dan selesai sewa langsung dari kalender di halaman detail produk atau keranjang belanja. Sistem harus secara otomatis memperbarui ketersediaan dan harga.
|
||||
|
||||
Keranjang Belanja: Pengguna dapat menambahkan beberapa peralatan.
|
||||
|
||||
Ringkasan Pesanan: Menampilkan total biaya, durasi sewa, dan daftar peralatan yang disewa.
|
||||
|
||||
Formulir Data Diri: Pengguna harus mengisi data diri (nama, alamat, nomor telepon, email).
|
||||
|
||||
Metode Pembayaran: Integrasi dengan berbagai metode pembayaran (transfer bank, e-wallet, kartu kredit).
|
||||
|
||||
Konfirmasi Pesanan: Pengguna menerima konfirmasi pesanan melalui email/notifikasi dalam aplikasi.
|
||||
|
||||
4.1.3. Manajemen Akun Pengguna
|
||||
Registrasi & Login: Pengguna dapat mendaftar dengan email/nomor telepon atau melalui media sosial.
|
||||
|
||||
Profil Pengguna: Mengelola informasi pribadi, alamat, dan preferensi.
|
||||
|
||||
Riwayat Pesanan: Melihat daftar pesanan yang pernah dibuat (aktif, selesai, dibatalkan).
|
||||
|
||||
Notifikasi: Pembaruan status pesanan, promosi, pengingat pengembalian.
|
||||
|
||||
4.2. Modul Admin/Pemilik Bisnis
|
||||
4.2.1. Manajemen Inventaris
|
||||
Tambah/Edit/Hapus Peralatan: Admin dapat menambahkan produk baru dengan detail lengkap (nama, deskripsi, harga, stok, gambar, kategori, spesifikasi).
|
||||
|
||||
Manajemen Kategori: Tambah/edit/hapus kategori peralatan.
|
||||
|
||||
Pelacakan Stok Real-time (Terintegrasi Kalender):
|
||||
|
||||
Stok otomatis berkurang saat disewa dan bertambah saat dikembalikan.
|
||||
|
||||
Admin dapat melihat kalender inventaris global yang menunjukkan kapan setiap item atau kategori item tersedia atau sedang disewa.
|
||||
|
||||
Kemampuan untuk memblokir tanggal tertentu untuk perawatan atau alasan lain.
|
||||
|
||||
Status Peralatan: Menandai peralatan sebagai "tersedia," "disewa," "dalam perawatan," atau "rusak."
|
||||
|
||||
4.2.2. Manajemen Pesanan
|
||||
Daftar Pesanan: Melihat semua pesanan dengan status (pending, dikonfirmasi, sedang disewa, selesai, dibatalkan).
|
||||
|
||||
Detail Pesanan: Melihat detail lengkap setiap pesanan, termasuk informasi pelanggan, daftar peralatan yang disewa, tanggal sewa, dan total pembayaran.
|
||||
|
||||
Perubahan Status Pesanan: Admin dapat mengubah status pesanan secara manual (misalnya, dari "pending" ke "dikonfirmasi" setelah pembayaran diterima). Perubahan status ini harus memicu pembaruan ketersediaan di kalender.
|
||||
|
||||
Pencarian & Filter Pesanan: Berdasarkan tanggal, status, nama pelanggan.
|
||||
|
||||
4.2.3. Manajemen Pelanggan
|
||||
Daftar Pelanggan: Melihat daftar semua pelanggan yang terdaftar.
|
||||
|
||||
Detail Pelanggan: Melihat riwayat pesanan pelanggan.
|
||||
|
||||
4.2.4. Manajemen Pengembalian
|
||||
Pencatatan Pengembalian: Admin dapat mencatat peralatan yang telah dikembalikan.
|
||||
|
||||
Inspeksi Peralatan: Fitur untuk mencatat kondisi peralatan saat dikembalikan (baik, rusak minor, rusak parah).
|
||||
|
||||
Penalti/Denda: Jika ada kerusakan atau keterlambatan pengembalian, sistem dapat menghitung dan mencatat penalti/denda.
|
||||
|
||||
4.2.5. Laporan & Analitik
|
||||
Laporan Pendapatan: Ringkasan pendapatan harian, mingguan, bulanan.
|
||||
|
||||
Laporan Inventaris: Peralatan paling populer, peralatan yang jarang disewa, peralatan yang sering rusak.
|
||||
|
||||
Laporan Ketersediaan: Prediksi ketersediaan di masa mendatang berdasarkan data kalender.
|
||||
|
||||
5. Persyaratan Non-Fungsional
|
||||
5.1. Kinerja
|
||||
Waktu muat halaman yang memadai.
|
||||
|
||||
Dapat menangani hingga 100 transaksi bersamaan tanpa penurunan kinerja yang signifikan.
|
||||
|
||||
5.2. Keamanan
|
||||
Enkripsi SSL/TLS untuk semua komunikasi data.
|
||||
|
||||
Perlindungan terhadap serangan XSS dan SQL Injection.
|
||||
|
||||
Autentikasi dan otorisasi pengguna yang kuat.
|
||||
|
||||
Penyimpanan data sensitif pelanggan yang aman.
|
||||
|
||||
5.3. Skalabilitas
|
||||
Mampu mengakomodasi peningkatan jumlah pengguna dan inventaris di masa mendatang.
|
||||
|
||||
5.4. Ketersediaan
|
||||
Uptime minimal 99,5%.
|
||||
|
||||
5.5. Usability (Kemudahan Penggunaan)
|
||||
Antarmuka yang intuitif dan responsif untuk desktop dan perangkat mobile.
|
||||
|
||||
Proses pemesanan yang sederhana dan jelas, terutama interaksi dengan kalender.
|
||||
|
||||
5.6. Kompatibilitas
|
||||
Kompatibel dengan browser web modern (Chrome, Firefox, Safari, Edge).
|
||||
|
||||
6. Integrasi
|
||||
Payment Gateway: Integrasi dengan penyedia layanan pembayaran lokal (misalnya, Midtrans, Xendit, Duitku). n8n akan menjadi orkestrator untuk memproses webhook dari payment gateway dan memperbarui status pesanan di database.
|
||||
|
||||
Email Service Provider: Untuk pengiriman notifikasi transaksi dan promosi. n8n dapat digunakan untuk memicu pengiriman email berdasarkan event tertentu (misalnya, pesanan baru, konfirmasi pembayaran, pengingat pengembalian).
|
||||
|
||||
7. Teknologi yang Digunakan
|
||||
Frontend: Create React App (CRA) (untuk setup awal proyek React, pembangunan UI, dan development server bawaan)
|
||||
|
||||
Backend: n8n (sebagai orkestrator workflow, API endpoint, dan penghubung ke database PostgreSQL)
|
||||
|
||||
Database: PostgreSQL (untuk menyimpan data inventaris, pesanan, pengguna, dan informasi ketersediaan kalender)
|
||||
|
||||
Hosting: Server pribadi Anda
|
||||
|
||||
8. Alur Pengguna (Contoh Sederhana)
|
||||
8.1. Alur Pemesanan (Penyewa)
|
||||
Pengguna membuka webapp React yang di-build dengan CRA.
|
||||
|
||||
Mencari peralatan (misal: "tenda dome").
|
||||
|
||||
Di halaman detail tenda, komponen kalender React menampilkan ketersediaan. Data ketersediaan ini ditarik dari API yang diekspos oleh n8n (yang kemudian mengambil data dari PostgreSQL).
|
||||
|
||||
Pengguna memilih tanggal sewa dari kalender.
|
||||
|
||||
Menambahkan ke keranjang belanja.
|
||||
|
||||
Melanjutkan ke checkout.
|
||||
|
||||
Mengisi data diri.
|
||||
|
||||
Memilih metode pembayaran.
|
||||
|
||||
Melakukan pembayaran.
|
||||
|
||||
Frontend React mengirim data pesanan ke API n8n.
|
||||
|
||||
n8n menerima data pesanan, memprosesnya (misalnya, memverifikasi stok, membuat entri pesanan di PostgreSQL), dan memicu pengiriman konfirmasi email ke pengguna.
|
||||
|
||||
n8n juga memperbarui status ketersediaan item di database PostgreSQL untuk mencerminkan item yang sedang disewa, yang akan terlihat di kalender.
|
||||
|
||||
8.2. Alur Pengelolaan Pesanan (Admin)
|
||||
Admin login ke dashboard React yang di-build dengan CRA.
|
||||
|
||||
Melihat daftar pesanan baru. Data ini ditarik dari API n8n (yang mengambil dari PostgreSQL).
|
||||
|
||||
Admin memverifikasi pembayaran pesanan.
|
||||
|
||||
Admin mengubah status pesanan melalui UI React, yang mengirim permintaan ke API n8n.
|
||||
|
||||
n8n menerima permintaan, memperbarui status pesanan di PostgreSQL, dan memicu pembaruan ketersediaan di kalender secara otomatis.
|
||||
|
||||
Saat pelanggan mengembalikan peralatan, admin mencatat pengembalian melalui UI React.
|
||||
|
||||
Permintaan dikirim ke n8n, yang kemudian memperbarui status inventaris di PostgreSQL dan mengembalikan ketersediaan item di kalender.
|
||||
|
||||
Jika ada kerusakan atau keterlambatan, n8n dapat memicu workflow untuk menghitung denda dan mengirim notifikasi.
|
||||
BIN
adventure-rental-app/public/favicon.ico
Normal file
BIN
adventure-rental-app/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
28
adventure-rental-app/public/index.html
Normal file
28
adventure-rental-app/public/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
as="style"
|
||||
onload="this.rel='stylesheet'"
|
||||
href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<title>Stitch Design</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
adventure-rental-app/public/logo192.png
Normal file
BIN
adventure-rental-app/public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
adventure-rental-app/public/logo512.png
Normal file
BIN
adventure-rental-app/public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
25
adventure-rental-app/public/manifest.json
Normal file
25
adventure-rental-app/public/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
3
adventure-rental-app/public/robots.txt
Normal file
3
adventure-rental-app/public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
38
adventure-rental-app/src/App.css
Normal file
38
adventure-rental-app/src/App.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@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 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
17
adventure-rental-app/src/App.js
Normal file
17
adventure-rental-app/src/App.js
Normal file
@@ -0,0 +1,17 @@
|
||||
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;
|
||||
8
adventure-rental-app/src/App.test.js
Normal file
8
adventure-rental-app/src/App.test.js
Normal file
@@ -0,0 +1,8 @@
|
||||
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();
|
||||
});
|
||||
177
adventure-rental-app/src/components/CategoriesPage.jsx
Normal file
177
adventure-rental-app/src/components/CategoriesPage.jsx
Normal file
@@ -0,0 +1,177 @@
|
||||
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">© 2024 CampRent. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoriesPage;
|
||||
271
adventure-rental-app/src/components/HomePage.jsx
Normal file
271
adventure-rental-app/src/components/HomePage.jsx
Normal file
@@ -0,0 +1,271 @@
|
||||
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">© 2024 CampRent. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
13
adventure-rental-app/src/index.css
Normal file
13
adventure-rental-app/src/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
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;
|
||||
}
|
||||
11
adventure-rental-app/src/index.js
Normal file
11
adventure-rental-app/src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
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>
|
||||
);
|
||||
1
adventure-rental-app/src/logo.svg
Normal file
1
adventure-rental-app/src/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
13
adventure-rental-app/src/reportWebVitals.js
Normal file
13
adventure-rental-app/src/reportWebVitals.js
Normal file
@@ -0,0 +1,13 @@
|
||||
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;
|
||||
5
adventure-rental-app/src/setupTests.js
Normal file
5
adventure-rental-app/src/setupTests.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// 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';
|
||||
Reference in New Issue
Block a user