Apex Build
Full multi-page marketing website for a fictional Texas-based general contracting company, built with a bilingual UX targeting the Austin construction market.
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.
Responsive Design
verdant-cmf97w0l2-omar-bahenas-projects.vercel.app
Mobile
375px viewport
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 a full-featured e-commerce store for a plant and botanical goods brand. The site covers the complete shopping experience — browse, filter by category or search, add to cart, and check out across a 4-step flow with address, payment, and confirmation screens. A global cart drawer keeps your selections accessible from any page, product photos zoom in on tap, and a custom design system in earthy greens and clean whites gives the brand a premium, nature-forward feel throughout.
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.
Not sure where to start?
Other Projects
Infinity Development
Corporate site for a forward-thinking multifamily developer—sustainability and urban transformation focus.
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.