karyamanswasta/karyaman-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial commit for camping rental webapp

Browse Source 
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:
karyamanswasta
2025-07-31 00:07:28 +07:00
commit 12c65e4f9f
68 changed files with 55300 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
adventure-rental-app/project-brief/home.md Normal file
View 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&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;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] [&amp;::-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>