Skip to main content

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.

The <NewsLetter> component (src/components/index/newsLetter.jsx) renders a news and updates section prominently on the public storefront homepage, pulling articles from the news Supabase table and presenting them as a smooth, auto-advancing slideshow. Each article is shown with its cover image, title, excerpt, publication date, and author — and a direct WhatsApp button inviting visitors to ask about the topic in conversation. This turns a passive content section into an active engagement channel, consistent with Bicyblex’s WhatsApp-first sales approach.

​
Data Model

News articles are stored in the news table in Supabase. The component queries all records ordered by publication date descending, so the most recent article always appears first: 
const { data, error } = await supabase
  .from("news")
  .select("*")
  .order("published_at", { ascending: false });
Each article record exposes the following fields used by the component:
FieldTypeDescription
iduuidUnique identifier for the article
titletextArticle headline, displayed in large display font
contenttextFull article body (stored but not rendered in the slider)
imagetextURL of the article cover image
slugtextURL-safe identifier stored in the table but not rendered by the slider component
excerpttextShort summary shown in the slider (max ~150 characters)
published_attimestamptzPublication timestamp, formatted for display with toLocaleDateString()
authortextAuthor name displayed alongside the publication date (stored in the table but not set by the admin dashboard form)
If no articles are found in the table, the component returns null and renders nothing — the section disappears from the page entirely rather than showing an empty container.

​
Slideshow Behavior

The component auto-advances through articles every 6 seconds using a setInterval loop that resets when the component unmounts: 
const interval = setInterval(() => {
  setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
}, 6000);
Visitors can also navigate manually using the previous and next arrow buttons rendered in the section header. Progress indicators at the bottom of the slide container show which article is currently active.

​
WhatsApp Integration

Each article card includes a “PREGUNTAR POR WHATSAPP →” button. When clicked, it opens a WhatsApp conversation pre-populated with a message referencing the article title. The URL is constructed by appending the encoded article title to the newsLetterWhatsAppMessageUrl base from GlobalContext: 
newsLetterWhatsAppMessageUrl: `https://wa.me/+51960413023?text=Hola%20Bicyblex%2C%20me%20gustaria%20saber%20sobre%20la%20noticia%20`
The full link built in the component: 
href={`${data.newsLetterWhatsAppMessageUrl}+${encodeURIComponent(slide.title)}`}
This means a visitor reading a news article about, for example, a new kit launch, can tap one button and land in a WhatsApp chat with the exact article title already typed — giving the Bicyblex team instant context for the inquiry.

​
Managing News Articles

All article creation, editing, and deletion is handled through the Bicyblex admin dashboard.
1

Open the admin dashboard

Navigate to the admin dashboard and go to News Management.
2

Create a new article

Click New Article, fill in the title and content, then upload a cover image. The slug is auto-generated from the title and the excerpt is auto-generated from the first 150 characters of the content — no manual input is required for either field.
3

Review the excerpt

The excerpt is automatically generated from the first 150 characters of the article content when the article is saved. To change the excerpt, edit the opening of the article body before saving.
4

Publish

Save the article. It will immediately appear in the news table and the storefront slideshow will include it on the next page load, sorted by published_at descending.
The <NewsLetter /> section is placed immediately after <Hero /> and before the product catalog sections (<Products />, <ElectricMotos />) in pages/index.js. This positioning is intentional — visitors who scroll past the hero see fresh news content before reaching the product grid, establishing trust and brand credibility early in the browsing experience.
Excerpts are auto-generated from the first 150 characters of the article content field when an article is saved through the admin dashboard. There is no separate excerpt input in the form — to control what appears in the slider, keep the opening sentence of every article concise and descriptive.

Build docs developers (and LLMs) love

Get started for freeTalk to us