Infinity Development
Corporate site for a forward-thinking multifamily developer—sustainability and urban transformation focus.
Home
Works
Services
Resources
Contact
Responsive Design
Mobile
375px viewport
Verdant
Bringing Nature Into Your Home
Full-featured e-commerce frontend covering browse → filter → cart → checkout → confirmation — slide-over cart drawer with localStorage persistence, click-to-zoom gallery, Intersection Observer scroll animations, dual-context state (CartContext + UIContext), and a custom Tailwind 4 design system — no component libraries.
Mobile bottom navigation
Fixed bottom nav with Shop, About, Contact, and Cart icons — hidden on desktop, with safe-area inset support for notched iOS devices
Slide-over cart drawer
Global cart panel opens as a slide-over on mobile — quantity controls, remove, and live subtotal all accessible without leaving the page
Category filter + search on mobile
Desktop sidebar collapses to a compact dropdown on mobile with simultaneous live text search — all client-side, no API calls
Scroll-triggered hero reveal
Intersection Observer-based fade-in + slide-up animation on hero content — no GSAP or Framer Motion needed
About
Verdant is an e-commerce brand focused on plants and botanical goods. Their mission is to make it easy for people to bring nature into their homes — with a curated product selection, a clean shopping experience, and a brand aesthetic rooted in earthy, nature-forward design.
Highlights
Slide-Over Cart Drawer
Global cart panel with quantity controls, item removal, and live subtotals — persisted to localStorage so the cart survives page refreshes, no backend required.
Category Filter + Live Search
6-category sidebar filter on desktop, mobile dropdown, and simultaneous live text search across product title and tags — all client-side with pagination, no API calls.
4-Step Checkout Wizard
Cart → Address → Payment → Success flow with a reusable CheckoutStepper visual indicator, payment method selector (card, Apple Pay, Google Pay, COD), and a mock 900ms processor.
Click-to-Zoom Product Gallery
2x magnification toggle on product images built without an image library — pure pointer event math and CSS transform.
Dual-Context State Architecture
CartContext and UIContext wrapped in a unified Providers component manage global cart state and search/mobile UI state independently — no Redux, no Zustand.
Custom Tailwind 4 Design System
A proprietary 9-shade Verdant Green palette, Jakarta + Inter typography, and consistent utility classes (.btn-primary, .card-hover) — built entirely from scratch without shadcn or Headless UI.
Tags
E-CommercePlants & BotanicalsShopping CartNext.jsReactTypeScriptTailwind CSS
Not sure where to start?
Other Projects
Jr Leal Brothers
Expert natural stone and door cabinet services, bringing timeless beauty and craftsmanship to your space.
Travel Filmz
Full multi-page photography portfolio for a travel and lifestyle brand — pure CSS masonry gallery, native dialog lightbox, custom scroll animations, and AVIF image optimization, built with zero UI libraries.