Overview

GloboTech NYC Website

Wholesale phone dealer and device buyback website. First managed client from Atlas Argos. Built for Matt Leeb.

The Business

GloboTech NYC is a wholesale phone dealer and device buyback company based in New York City. They buy and sell phones, tablets, and electronics in bulk, and offer buyback programs for consumers and businesses looking to sell their used devices.

Client: Matt Leeb — first managed client from Atlas Argos platform.

The Website

5-page Next.js site with dynamic buyback pricing pulled from Google Sheets, 3D globe visualization, video hero section, and WhatsApp integration for instant customer contact.

Designed with navy (#004aad) and electric blue (#00c2ff) palette.

Tech Stack

Next.js 14.2.5 React 18 TypeScript Tailwind CSS Globe.gl Elfsight

Site Map (5 Pages)

Page Structure
Home Hero video, 3D globe, customer reviews, WhatsApp CTA Live
Buyback List Live pricing from Google Sheets CSV with dual-format tables Live
LCD Buyback Program Dedicated page for LCD screen buyback program details Live
Phone Buyback Program Full phone device buyback program with grading info Live
Best Buyback Price SEO-optimized page with 10-question FAQ accordion Live
💡
Origin: GloboTech NYC was the first client onboarded through the Atlas Argos managed clients pipeline. Matt Leeb's business was discovered via lead scraping, and 3 sites were built during the initial engagement.
Home Page

Home Page Features

The home page combines multiple interactive elements: hero video background, 3D globe visualization, customer reviews, and WhatsApp integration.

Hero Section

Video Background

  • Auto-playing, muted, looping video behind the hero text
  • Dark overlay gradient for text readability
  • Large headline with electric blue accents
  • CTA button linking to buyback pricing page

Key Design Choices

  • Video creates a premium, dynamic first impression
  • Keeps page load fast with lazy loading
  • Falls back to static image on slow connections
  • Mobile-responsive with adjusted text sizing

3D Globe (Globe.gl)

An interactive 3D globe visualization built with Globe.gl (a Three.js wrapper). It shows GloboTech's global reach with animated arcs connecting NYC to worldwide locations. The globe auto-rotates and responds to mouse interaction.

💡
Globe.gl is rendered client-side only (no SSR) to avoid Three.js hydration issues. Uses dynamic import with next/dynamic and ssr: false.

Customer Reviews (Elfsight)

Customer reviews and ratings are displayed using an Elfsight widget. This is a third-party embed that pulls reviews from Google Business Profile and displays them in a styled carousel.

  • Auto-updates when new Google reviews are posted
  • No server-side integration needed — pure embed script
  • Styled to match the site's navy and white design

WhatsApp Integration

A floating WhatsApp button appears on every page, enabling customers to instantly message GloboTech for quotes and inquiries. This replaces a traditional contact form for faster response times.

💬
Instant Contact
No forms to fill
📱
Mobile First
Opens WhatsApp app
Pre-filled Message
Contextual greeting
Core Feature

Buyback Price System

Live pricing pulled from a Google Sheets CSV with a dual-format table system: modern iPhones with 5 condition grades, legacy iPhones with 3 grades.

Data Flow

Google SheetsMatt updates prices
Published CSVPublic URL endpoint
Next.js FetchServer-side or ISR
Dual TablesRendered on page
Why Google Sheets? Matt (the client) can update pricing in real-time from his phone or laptop. No code changes needed, no CMS login. Just edit the spreadsheet and the site updates automatically.

Dual Format Tables

Modern Format (iPhone 11+)

5 Condition Grades
Brand NewFactory sealed, untouched
Like NewOpened, no visible wear
GoodMinor cosmetic marks
FairVisible wear, fully functional
BrokenScreen/body damage, may not work

Legacy Format (iPhone X and older)

3 Condition Grades
WorkingFully functional, any cosmetic condition
CrackedScreen damage, otherwise functional
Dead / No PowerWon't turn on or has major issues

How the CSV is Structured

# Modern format rows (5 price columns):
Model, Storage, Brand New, Like New, Good, Fair, Broken
iPhone 16 Pro Max, 256GB, $1050, $950, $800, $650, $300
iPhone 15 Pro, 128GB, $750, $680, $580, $450, $200
# Legacy format rows (3 price columns):
Model, Storage, Working, Cracked, Dead/No Power
iPhone X, 64GB, $85, $45, $20
iPhone 8 Plus, 64GB, $60, $30, $15
⚠️
Format detection: The component detects which format to use based on the number of price columns in each row. Modern phones (iPhone 11+) always have 5 grade columns, while legacy phones (iPhone X and older) have 3. The CSV must maintain this structure.
Content Pages

Buyback Programs

Two dedicated program pages explain GloboTech's buyback services. Plus an SEO-focused FAQ page targeting "best buyback price" searches.

LCD Buyback Program

Dedicated page for GloboTech's LCD screen buyback service. Targets repair shops and refurbishers who have broken LCD assemblies to sell.

  • Explains which LCD types are accepted (OEM, aftermarket, refurbished)
  • Grading criteria for LCD condition assessment
  • Bulk pricing tiers for high-volume sellers
  • Shipping instructions and packaging requirements
  • WhatsApp CTA for instant quote requests

Phone Buyback Program

Full device buyback program page with comprehensive grading information so sellers know exactly what their device is worth before contacting GloboTech.

  • Step-by-step "How It Works" process
  • Detailed condition grading guide with visual examples
  • Payment options (check, Zelle, wire, PayPal)
  • Turnaround times and processing details
  • Links to the live buyback price list

Best Buyback Price (SEO Page)

An SEO-optimized landing page targeting keywords like "best phone buyback price" and "sell my phone for cash." Features a 10-question FAQ accordion.

FAQ Topics (10 Questions)
1How do I get the best price for my used phone?
2What phones does GloboTech buy?
3How does the grading system work?
4Do I need to factory reset my phone first?
5How quickly will I get paid?
6What payment methods are available?
7Can I sell phones in bulk?
8Do you buy phones with cracked screens?
9How do I ship my devices?
10Is there a minimum quantity?
💡
FAQ accordion pattern: Only one FAQ answer is visible at a time. Clicking a question toggles it open and closes any previously open question. Smooth CSS transitions for expand/collapse. Helps with Google's FAQ rich results schema.
Design System

Design & Components

Visual identity, typography, color palette, and reusable component patterns used across the GloboTech site.

Color Palette

Navy
#004aad
Electric
#00c2ff
White
#ffffff
Light Gray
#f5f5f5
Dark
#1a1a1a

Typography

Font System
Poppins Headings, navigation, CTAs. Geometric sans-serif with a modern, friendly feel. Headings
Inter Body text, descriptions, table data. Optimized for screen readability at small sizes. Body

Reusable Components

  • Hero Section — Video background with text overlay
  • Price Table — Dynamic CSV-driven table
  • FAQ Accordion — Expandable Q&A sections
  • WhatsApp Button — Floating CTA
  • Globe Component — Globe.gl 3D visualization
  • Review Carousel — Elfsight embed widget
  • Program Card — Feature highlight card
  • Nav/Footer — Consistent site chrome
Design rationale: Navy + electric blue conveys trust and technology. Poppins headings give a modern, approachable feel. The design is deliberately clean and professional for a wholesale B2B audience while remaining accessible for consumer visitors.
Technical

Build Notes

Technical decisions, deployment details, and maintenance notes for the GloboTech NYC website.

Framework & Dependencies

Core Stack
Next.js14.2.5 — App Router, server components, ISR for pricing pages
React18 — Client components for interactive elements (globe, accordion, carousel)
TypeScriptFull type safety across all components and data models
Tailwind CSSUtility-first styling with custom color tokens matching brand palette
Globe.gl3D globe visualization, dynamically imported (no SSR)
ElfsightGoogle Reviews widget embed (script tag, no npm package)

Key Technical Decisions

  1. Google Sheets as CMS for pricing Client can update prices from their phone. CSV published endpoint fetched server-side. No API key needed.
  2. Dual table format with auto-detection Column count determines rendering format. Modern phones: 5 grades. Legacy phones: 3 grades. Single CSV, one component handles both.
  3. Globe.gl with dynamic import Three.js cannot run server-side. Dynamic import with ssr:false prevents hydration errors. Component renders only on client.
  4. WhatsApp over contact forms Higher conversion rate. Immediate response. No email server needed. Works on mobile natively.
  5. Elfsight for reviews instead of custom integration Google Places API is expensive and complex. Elfsight widget auto-syncs reviews with zero maintenance.

Maintenance Notes

Client Can Do

  • Update prices in Google Sheets (auto-reflects)
  • Add new phone models to the CSV
  • Respond to WhatsApp inquiries
  • Manage Google Reviews via Google Business

Requires Developer

  • Adding new pages or sections
  • Changing the globe visualization
  • Modifying the CSV format/structure
  • Updating the Elfsight widget configuration
  • Framework or dependency upgrades
💡
Atlas Argos origin: This site was built as part of the Atlas Argos managed clients pipeline. The initial preview site was auto-generated by Claude Sonnet, then customized and expanded into this full 5-page build during client onboarding.
🎉
Walkthrough complete! You now understand the GloboTech NYC website architecture: 5 pages, live Google Sheets pricing, 3D globe, WhatsApp integration, and the dual-format buyback table system.