SugarPapi

Site for a chocolate brand that sells in drops: products, past editions and a newsletter for upcoming launches.

Web de una marca de chocolate que vende por drops: productos, ediciones pasadas y newsletter para los próximos lanzamientos.

What I did

Design in Figma
Development
Animation & motion
SEO
Deployment

Sugar Papi is a Spanish chocolate and confectionery brand (chocolate sauces, spreadable creams, tablets, lingots) that sells through “drops”: limited editions announced on social media that sell out, rather than a permanent fixed catalog. The brand is registered as Sugar Papi S.L. (Carlet, Valencia) and operates mainly through social media (Instagram, TikTok) and online sales.

This repository is Sugar Papi’s marketing/sales website: the public landing page presenting the products, documenting past drops, and collecting newsletter sign-ups for upcoming launches and restocks.

Built by

Developed solo by Héctor Torres. The landing page was sent to the Sugar Papi team as a proposal: they gave feedback and liked the result, but never ended up replacing their existing store with it.

What the site offers

Product presentation

Category catalog: acidic sauces, spreadable creams, chocolate tablets and lingots, each with its own price, weight, and description.
“Drops” section: an archive of closed limited editions (advent calendar, boxing cookie, VHS-tape nougat), each with its campaign narrative.
Bento-style grid for tablets and lingots, with products positioned by coordinates over a composite image.

Experience and interaction

Smooth scrolling (Lenis) synced with scroll-driven animations (GSAP + ScrollTrigger), including pinned sections for sauces and creams.
Loading screen with a progress indicator before content is shown.
Anchor-based navigation with a fade transition between sections and active-section detection in the menu.
Bilingual interface (Spanish/English) across navigation and structured content.
prefers-reduced-motion support: users with it enabled get no smooth scrolling or transition animations.

Acquisition

Newsletter form for new drop and restock alerts.
Legal pages (legal notice, terms of service, shipping policy, contact information) with the company’s actual tax and contact details.
SEO and metadata (Open Graph, sitemap) centralized in constants reused across the site.

Sugar Papi es una marca española de chocolate y dulces (salsas de chocolate, cremas, tabletas, lingotes) que vende en formato drop: ediciones limitadas que se anuncian por redes y se agotan, en lugar de un catálogo fijo permanente. La marca está registrada como Sugar Papi S.L. (Carlet, Valencia) y opera principalmente a través de redes sociales (Instagram, TikTok) y venta online.

Este repositorio es el sitio web de marketing/venta de Sugar Papi: la landing pública donde se presentan los productos, se explican los drops pasados y se recoge la newsletter para avisar de los próximos lanzamientos y restocks.

Construcción

Desarrollado en solitario por Héctor Torres. La landing se envió al equipo de Sugar Papi como propuesta: dieron feedback, les gustó el resultado, pero no llegaron a sustituir su tienda actual por ella.

Qué ofrece el sitio

Presentación de producto

Catálogo por categoría: salsas ácidas, cremas untables, tabletas y lingotes de chocolate, cada uno con precio, peso y descripción propia.
Sección de “Drops”: archivo de ediciones limitadas ya cerradas (calendario de adviento, galleta boxeadora, turrones en formato VHS), con su narrativa de campaña.
Grid tipo bento para tabletas y lingotes, con posicionamiento de producto por coordenadas sobre una imagen compuesta.

Experiencia e interacción

Scroll suave (Lenis) sincronizado con animaciones por scroll (GSAP + ScrollTrigger), incluyendo secciones ancladas (pinned) para salsas y cremas.
Pantalla de carga con indicador de progreso antes de mostrar el contenido.
Navegación por anclas con transición de fundido entre secciones y detección de sección activa en el menú.
Interfaz bilingüe (español/inglés) en la navegación y contenidos estructurados.
Soporte de prefers-reduced-motion: quienes lo tengan activado no reciben scroll suave ni animaciones de transición.

Captación

Formulario de newsletter para avisos de nuevos drops y restocks.
Páginas legales (aviso legal, términos de servicio, política de envíos, información de contacto) con los datos fiscales y de contacto reales de la empresa.
SEO y metadatos (Open Graph, sitemap) centralizados en constantes reutilizables por toda la web.

Have a similar project?Let's talk →