Skip to content

Added the PRD with the Wireframe #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MananVyas01 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added the PRD with the Wireframe #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,046 changes: 1,046 additions & 0 deletions TheVibeQCom/PRD.md
View file
Open in desktop

Large diffs are not rendered by default.

223 changes: 223 additions & 0 deletions TheVibeQCom/Wireframe/home_feed_screen/code.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<html><head>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
<title>Vibe - Home</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<style type="text/tailwindcss">
:root {
--primary-color: #38e07b;
}
.scroll-hidden::-webkit-scrollbar {
display: none;
}
.scroll-hidden {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-gray-900 text-white font-splineSans">
<div class="flex flex-col min-h-screen">
<header class="sticky top-0 z-10 bg-gray-900/80 backdrop-blur-sm">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between py-4">
<button class="flex items-center gap-2">
<span class="material-symbols-outlined text-[var(--primary-color)]">
location_on
</span>
<div>
<p class="text-xs text-gray-400">Location</p>
<p class="text-sm font-bold flex items-center">
New York, USA
<span class="material-symbols-outlined text-sm">
expand_more
</span>
</p>
</div>
</button>
<div class="flex items-center gap-3">
<button class="p-2 rounded-full hover:bg-gray-800">
<span class="material-symbols-outlined">
search
</span>
</button>
<button class="relative p-2 rounded-full hover:bg-gray-800">
<span class="material-symbols-outlined">
shopping_bag
</span>
<span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-[var(--primary-color)]"></span>
</button>
</div>
</div>
</div>
</header>
<main class="flex-grow overflow-y-auto scroll-hidden">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="mb-8">
<div class="relative">
<div class="flex overflow-x-auto snap-x snap-mandatory scroll-hidden gap-4">
<div class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2">
<div class="relative aspect-video rounded-2xl overflow-hidden">
<img alt="Promotional banner 1" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTTiWSfbb18niwFEDKl4TTBoyvTLTZhWmFaJLPUF4MtQx4lWoyaC5qTHrxpoD4IWTov2_oidywynuPZvJ4EWuBiB8nvFAVy9iBXIGoxH_5hXPZQPd3dd8SFtFqDAHUxRD02OEzwDrKIxkyoYNJr1h_UMXORgFkefwtMxSuckd0knKa7wyoBuffDQYjZQAuI-X1Qgzw2Rzx37s1ZqBG0JC9o8nWD3fxtzSO1fy8nTamNLSo9UIkQHedXgZ5wcTLmV1GpWzYVWFmxIxO"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-2xl font-bold">Elevate Your Space</h3>
<p class="text-gray-300">Discover curated decor pieces</p>
</div>
</div>
</div>
<div class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2">
<div class="relative aspect-video rounded-2xl overflow-hidden">
<img alt="Promotional banner 2" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYcoj_YE4VO9epipCepqZ1CNRaFOf37IVhI2UoF9mo6tytg2ACecmCAAdM9cmidIc_8oUOGSAO3Q-z0eGvOhorjt53k8l8lJMBgE6sVtK_V4gmlLAljbjSLj1OEuzzKRKrBXKQF8xmZvKbhUe3AI03MUu46HWt0xqBuzgsRjR0Y-3r1Uss0Ah9w7MAqf0fLkfZnKenScK8KwwIryVw-2n8AB7uDBJciQRxgbdxn5_7aMdin9Nuzo9MdtBXWl1wtG6p_vhl5HUr_imW"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-2xl font-bold">Curated Collections</h3>
<p class="text-gray-300">Find your unique style</p>
</div>
</div>
</div>
<div class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2">
<div class="relative aspect-video rounded-2xl overflow-hidden">
<img alt="Promotional banner 3" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_CCMMzWvmRQ-4tBT7Uto76SaaSbvKTp_YuyFcbTdwOTrEFG5sE-GPFCFe8Fto6H0vkfvyFCFBeVzDq_MHJvG0BcDV5IDS-7kLVaUVN4prF11cLKBtLhpmXkTyoaXnWHnb_KIaBE3kXGax0oJl2_zP7rKkmxXf65QC0gqCWgMHSudlwYXPGMR91N-r1eVclr-_mCIPzadVQdYwd9_muDntG2ndcf96g3eiiIoN9WElXO61G6AIUH5AKx8i7poO009asqR8iOQdSr-e"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-2xl font-bold">Find Your Vibe</h3>
<p class="text-gray-300">Gamify your productivity</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Just For You</h2>
<div class="flex overflow-x-auto scroll-hidden -mx-4 px-4 gap-4">
<div class="shrink-0 w-32 text-center">
<img alt="Desk Essentials" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuADx3x2SKDhHsPW4AhKiV34b0KJJhMAkowOI7k12rnaXu21m6k3isC3WsD9JEV6_trZaO_LsaCG7LUQcQoZVJBo65Cd176NmzEG030rExxYQ_Iennk3l6zyEjzx-6GDyZxC0h1NP0imcutP6NJLLOogvnw_NI9XFph7Y9VqK-ZYt5aXvXsmdpF2BZThhZdzx3ngT0aFSfo0ju0OVjERYeHEabOPHoSEgFawmCpK32Oz0nUkEWEcwaNE9vt4Bpt7oyT8gb1fVmoN6n07"/>
<p class="text-sm font-medium">Desk Essentials</p>
</div>
<div class="shrink-0 w-32 text-center">
<img alt="Wall Decor" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4qbnjJ2EDlK4BUkZ2NjUrl8ZamfzgUymTsAXCLiQaxSnuKpuNtrygbzMumdmPsTlIEKHVE7KkdXg0DHhMB3jTNNX3BVVwxe-X-eFMmOwxPQfuLOHiID1Emb5xox_cIEY4C4D5pIhUB_BqdNE0QQEWxOok6B9-qL1PxuDDYn76n8Pus_NJYnMNtMoc39oPQiDXU1_rWn-o6KgvOsIiQ9dygQ6MFV-wN_ikRrmdo0LfX0kVGND-CyVUXi2IrZkkSI1G8J_WXIQoVODp"/>
<p class="text-sm font-medium">Wall Decor</p>
</div>
<div class="shrink-0 w-32 text-center">
<img alt="Cozy Comforts" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDlpjnC_dzde-GTIy6ejy_O96GfydHs75NtMt4-uXcpsz08N2tK5Qcw7CXq7FfLtaEDovlHk-Dbv6fjSEFE9tKO0GMalbHV12vzh2GdCj6SMinr_BrPxiD8xnfB-FsktxMncy2Mmf3zyzF35Q1TUJdIz2fowYS-c0_HWIZqqo9IbFsl1ASQ-lrZliPVuu1UWIy2TkTYxasSeg6pUT7BAJpes9NHGjPaQXs2_zz0MZUbFya9wXUnoxr7xz7cmwN6AV-FIGiitIWtk6Y"/>
<p class="text-sm font-medium">Cozy Comforts</p>
</div>
<div class="shrink-0 w-32 text-center">
<img alt="Lighting" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCK20g8e4YYgNN6PLH0jWp-SiyTBfuprBrYG2XM25tj_CodCeJdrkqPa2V5EZrkRBsi6zXTEdqoN0Y32I3Qec3KXAoH56VnCsNtB9O8FcLk1-K_PV6WvC-WlJTlAqBHXuYxX0GQ0QTKRvGruD2TXknjm4gADdqkZUgNsiNmX8Qk5i0xhc-iPxV1sqzczYPQium5y3427vK5VYB9ZMPKwFj4IhAz4Q-Ax1fopY0NSRDG9o6xKpfBniypfDpHAuAyKvlkVMjb3gBSNjeB"/>
<p class="text-sm font-medium">Lighting</p>
</div>
<div class="shrink-0 w-32 text-center">
<div class="w-full aspect-square rounded-full mb-2 bg-gray-800 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-[var(--primary-color)]">arrow_forward</span>
</div>
<p class="text-sm font-medium">See All</p>
</div>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Shop by Category</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<a class="group" href="#">
<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
<span class="material-symbols-outlined text-5xl text-[var(--primary-color)] group-hover:text-gray-900 transition-all duration-300">desktop_windows</span>
</div>
<p class="text-center mt-2 font-semibold">Home Office</p>
</a>
<a class="group" href="#">
<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
<span class="material-symbols-outlined text-5xl text-gray-400 group-hover:text-gray-900 transition-all duration-300">living</span>
</div>
<p class="text-center mt-2 text-gray-400 group-hover:text-white font-semibold">Living Room</p>
</a>
<a class="group" href="#">
<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
<span class="material-symbols-outlined text-5xl text-gray-400 group-hover:text-gray-900 transition-all duration-300">bed</span>
</div>
<p class="text-center mt-2 text-gray-400 group-hover:text-white font-semibold">Bedroom</p>
</a>
<a class="group" href="#">
<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
<span class="material-symbols-outlined text-5xl text-gray-400 group-hover:text-gray-900 transition-all duration-300">soup_kitchen</span>
</div>
<p class="text-center mt-2 text-gray-400 group-hover:text-white font-semibold">Kitchen</p>
</a>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Popular in Your Area</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="group">
<img alt="Ergonomic Chair" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCGoZcx0e4Pq9tK0Ij0LU9IQZgtUqmDihCqlg58BsDcJVUXMa4ETt6Wv_n57UNRI8Kl3Gj2xoFH_WCET-9Z8ZreZwIkIRZSi25Apz6kKojO00FbWyR61AQ7Y_GPpq88FVinhodaQR9Zws2GaIkh_6QvYLGkJUw3wt8MgoPnFLR2S5tE5ZjXrGoKeRdg3UfKvWjPpX47kNGwz2aXV3tM2YIXULEl1Lonk_ql-dwcdPK9G3D_52Prj-y-cPB2X_PxU3xE663t6o-Mu_e1"/>
<p class="font-semibold">Ergonomic Chair</p>
<p class="text-sm text-gray-400">$299.99</p>
</div>
<div class="group">
<img alt="Smart Lamp" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfIWcADdnqFgA5usWR4CG1Q_s2Qw1YZ5Q5LwsDKwYipPWIVeUEkMbccTsf5llQDNLmm1VT2f0UH0fkV4EoJayBg3WXxeeytG8kXhCOvV_ro-2Ip213GlsbjojSaMe0n9N7fgCWtqWZRCVTt9KqHsEZZ5ZpG7kSjimKLtVnEpVSbvnWorP4IV6EkAwC7OD3Ks429PNbdO0VNjYcfiFWpEYDxgy83lp1R-GfnxgOI944LIoReccc9alAV8DuFC_oTqUh_SMT3nXdqayB"/>
<p class="font-semibold">Smart Lamp</p>
<p class="text-sm text-gray-400">$89.99</p>
</div>
<div class="group">
<img alt="Floating Shelves" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAH7noI3boLJtKzcbRDuZ4EBPKogmlni0WSjf2d3qUSKCbGvbCoT5K5Eq-oVYkLDuIlst1RD5CSDB3JKv3XNT9M8UyWSQI6sIiEoUQ7Qo9P6_W9srRCj1dxKxlWegoPtRROtj96Gghe_EMBf4Sy9fx5jyQz2wsc29--lJfiNgeudJ20e7kBj-Sdo4mUfSfxiZIEhHwY05Py_it_HMZ49dRHjWyg9TyaCfne2eUu3kKdgv1EDVhr3JZPPhvIOVK_JCdvLJ1oK6AF9m9g"/>
<p class="font-semibold">Floating Shelves</p>
<p class="text-sm text-gray-400">$45.00</p>
</div>
<div class="group">
<img alt="Minimalist Clock" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCeMcj-RFRCflNcjuoj5KlvUN9zs50ntAJafQdPjBeP0UCh21HrhXvqRfiOUdphRajNqjz0MhXkTMQ15r8EV4dO_WBxDzR5lMdbc-654s7s9xcQU_NDcAzOR1lJMcBi28YJ3RiKAdk9IsbrO3qlXGpmDgUKtKw59UXZPDcYw6cKLjKw6tId4_-iXpiZcuyV9EWlya1yDnlNroD3WH4wKUmZmS7UmRawop1zpiNqNAQ_yG1Dx6hcVEXV6EHVzhdAal2UC_ovNVMvg88s"/>
<p class="font-semibold">Minimalist Clock</p>
<p class="text-sm text-gray-400">$35.50</p>
</div>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Themed Collections</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="relative aspect-video rounded-2xl overflow-hidden group">
<img alt="The Minimalist Collection" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzPCHIzN9LiPZnf-Cr7mamXpsec0uzbTxPEE117libuBxY_AVkKCkHcsQD3HjUvROf1_196evaeOCCKP1LWLLadJq6NnayA1q7RYiUKdQ1qXwTkSHN13shaiPe0WEGGLZMjj34CU4wwijQHwkkBxm2K9bicSBcp_XmmI_4hRawBRTZLXHhPyqOAi9a-ZxTg6mPm59DKLcupQuCksMrXa95EiSg_TjsrPVXoTTZ-2oTzJj4BqCktGQp10xRnibSdXmYn8LfiYSB3uTY"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-bold">The Minimalist</h3>
<p class="text-gray-300 text-sm">Clean lines, simple forms.</p>
</div>
</div>
<div class="relative aspect-video rounded-2xl overflow-hidden group">
<img alt="The Bohemian Collection" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgrBOQxiVSXeP53lPjdvWXf5REEFhtI7qmb0Kvn3qOfj4RKAbFuk6_HccRtkaVbow6L1VXBC3o-LmEBlzbpUF2IrkG6cXBHXsZidPGYkaHVWhTpkD5NtxYI0arEUeBEcEn2RJbAkxKkiWTcdTcUwj_gf-TEVVSE24wSfg663ZfkCJaChXTRnnZxwvxzpjkANlwwsqGF7xjLSfc3RVKfkXLfwPGHlh5DexQUndPEs0Ow3ASbF7V-8QXQilpHp28D1khIz7LsuqcEa8V"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-bold">The Bohemian</h3>
<p class="text-gray-300 text-sm">Free-spirited and eclectic.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="sticky bottom-0 bg-gray-900/80 backdrop-blur-sm border-t border-gray-800">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-around py-2">
<a class="flex flex-col items-center gap-1 text-[var(--primary-color)]" href="#">
<span class="material-symbols-outlined">home</span>
<span class="text-xs font-bold">Home</span>
</a>
<a class="flex flex-col items-center gap-1 text-gray-400 hover:text-[var(--primary-color)]" href="#">
<span class="material-symbols-outlined">store</span>
<span class="text-xs font-bold">Shop</span>
</a>
<a class="flex flex-col items-center gap-1 text-gray-400 hover:text-[var(--primary-color)]" href="#">
<span class="material-symbols-outlined">qr_code_2</span>
<span class="text-xs font-bold">Vibe-Code</span>
</a>
<a class="flex flex-col items-center gap-1 text-gray-400 hover:text-[var(--primary-color)]" href="#">
<span class="material-symbols-outlined">person</span>
<span class="text-xs font-bold">Profile</span>
</a>
</div>
</div>
</footer>
</div>

</body></html>
Binary file added TheVibeQCom/Wireframe/home_feed_screen/screen.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions TheVibeQCom/Wireframe/location_permission_screen/code.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<title>Vibe - Location Access</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
</head>
<body class="bg-[#111714]" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
<div class="relative flex size-full min-h-screen flex-col items-center justify-center bg-gradient-to-br from-[#111714] to-[#1a2b23] dark group/design-root overflow-x-hidden">
<div class="w-full max-w-md bg-[#181F1B]/60 backdrop-blur-xl rounded-2xl shadow-2xl p-8 text-center text-white">
<div class="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-[#38e07b]/10 text-[#38e07b]">
<span class="material-symbols-outlined text-5xl">
location_on
</span>
</div>
<h1 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Enable Location for Fast Deliveries
</h1>
<p class="mt-4 text-lg text-gray-300">
To show you product availability and deliver to your address, we need
your location. Your data is safe with us.
</p>
<div class="mt-8 space-y-4">
<button class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-full h-14 px-8 bg-[#38e07b] text-[#111714] text-lg font-bold leading-normal tracking-[0.015em] transition-transform hover:scale-105">
<span class="truncate">Allow Location Access</span>
</button>
<button class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-6 bg-transparent text-gray-400 text-base font-medium leading-normal hover:bg-white/5 transition-colors">
<span class="truncate">Enter Location Manually</span>
</button>
</div>
</div>
</div>

</body></html>
Binary file added TheVibeQCom/Wireframe/location_permission_screen/screen.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading