The Bicyblex storefront is the public-facing website of the platform — a single-page Next.js 16 application that presents Bicyblex’s full product offering to visitors in Perú. Built for performance and mobile responsiveness, it combines real-time Supabase product data with WhatsApp deep-link integrations to convert browsing visitors into direct chat inquiries. Every section of the page is driven by live data from the database and configured through a single shared context object, making the storefront both dynamic and easy to maintain.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/bicyblex/bicyblexStore/llms.txt
Use this file to discover all available pages before exploring further.
Page Sections
The homepage (pages/index.js) renders the following sections in order, each implemented as a standalone React component:
| Order | Component | Description |
|---|---|---|
| 1 | <Topnav /> | Sticky navigation bar with anchor links to each section and a WhatsApp contact button. |
| 2 | <Hero /> | Full-viewport header with the /hero.png background image, the headline “DOMINA CUALQUIER TERRENO”, and a CTA scrolling visitors down to the bikes section. |
| 3 | <NewsLetter /> | Auto-advancing slideshow of recent news articles fetched from the Supabase news table, each with a WhatsApp inquiry CTA. |
| 4 | <Products /> | Grid of bicycle products fetched from Supabase, filterable by wheel size (aro). Sourced from bikeProducts.jsx. |
| 5 | <ElectricMotos /> | Grid of electric moto products with autonomy, motor power, and top-speed specs. Sourced from electricMotos.jsx. |
| 6 | <ElectricKits /> | Showcase of up to three electric conversion kits from Supabase, plus a fixed “custom project” card with a WhatsApp CTA for bulk inquiries. |
| 7 | <Features /> | Three brand-value cards: CALIDAD QUE SE SIENTE, CONFIANZA TOTAL, and TRATO CERCANO Y AMABLE. |
| 8 | <Footer /> | Four-column footer with navigation links, social media icons (TikTok, Instagram, WhatsApp), and copyright. |
Component File Map
| File | Role |
|---|---|
src/components/index/topnav.jsx | Sticky top navigation with anchor links and WhatsApp button |
src/components/index/hero.jsx | Full-screen hero section with brand headline and scroll CTA |
src/components/index/newsLetter.jsx | News slider fetching from the news Supabase table |
src/components/index/bikeProducts.jsx | Bicycle product grid with aro filter, fetched from products |
src/components/index/electricMotos.jsx | Electric moto grid with spec cards, fetched from products |
src/components/index/electricKits.jsx | Electric kit cards (max 3) plus custom inquiry card |
src/components/index/features.jsx | Static three-column brand value section |
src/components/index/footer.jsx | Site footer with social links and contact info |
src/context/GlobalContext.js | Global site config provider and useGlobalData() hook |
GlobalContext
The entire homepage is wrapped in<GlobalProvider>, defined in src/context/GlobalContext.js. This provider makes a single siteData configuration object available to every component in the tree via React Context. Any component that needs site-wide config — such as WhatsApp URLs, contact details, or social links — calls the useGlobalData() hook instead of hard-coding values.
Available Fields in siteData
The full siteData object exported by GlobalContext.js is:
wa.me deep link that opens a WhatsApp chat with Bicyblex pre-filled with a Spanish message appropriate to the context (general inquiry, product inquiry, news inquiry, or kits inquiry).
The
version field (currently "V2.4.1") tracks the active deployment of the storefront. It can be surfaced in the admin dashboard or browser console for quick debugging — if a reported issue doesn’t match expected behavior, confirming the version value first helps rule out stale caches or deployment mismatches.Explore Further
Product Catalog
How bikes and electric motos are fetched from Supabase and displayed on the storefront.
Electric Kits
The electric conversion kits section and its WhatsApp inquiry flow.
Newsletter
The news & events slider and how articles are managed from the admin dashboard.
