Case study №07 BLVCKCARD 2026

A personal site,freefor life.

Buy a matte-black NFC card or an acrylic standee. Tap any phone — your profile opens. Edit it from a phone, hand it out at a wedding, refer a friend and earn 20%. The card is the funnel.

Visit live site
blvckcard.com
01 The brief

BLVCKCARD bundles a physical artefact (NFC + QR) with a free-for-life personal site. The product had to feel like an heirloom on the table and a serious tool on the phone. Two repos: a React + Vite product/AI-builder front end, and a Next.js 16 SSR profile viewer optimised for the social card and the cold tap.

  • 01 Two-repo architecture: blackcard (React + Vite, marketing + e-commerce + AI builder) and blackcard-profile-next (Next.js 16, SSR profile viewer).
  • 02 Six industry templates — Dark & Gold, Light & Gold, Medical, Cafe, Corporate, Creative — sharing a CSS-variable theme system.
  • 03 AI Profile Builder: Gemini conversation that walks a new owner through discovery → template → widgets → finalise.
  • 04 20% referral commission resolved by cookie — no manual link sharing required.
  • 05 ₹999 standard card · ₹1,699 custom card · acrylic standee for desks and counters.
Client

BLVCKCARD

Year

2026

Brand by

Ad Your Best

Build by

Stacksmiths

Stack

Next.js 16 · React 19 · Vite · Firebase · Gemini · Three.js · Framer Motion

Targets

Doctors, founders, cafe owners, creatives, realtors

02 Brand system

Black card,
gold leaf.

Pure black holds the page; a single gold (#d4af37) carries every action. Bank Gothic for the wordmark — the V is intentional, premium spelling. Inter elsewhere, glassmorphic panels, a 3% noise overlay, and motion that eases on power4.out. The card on the table and the site on the phone are the same object.

Onyx#000000
Coal#0A0A0A
Gold#D4AF37
Silver#E2E8F0
04 The website

Built for the way it'll be read.

BLVCKCARD · TAP. SHARE. NETWORK. Your personal website, free for life. Six templates. Lead capture. Real-time analytics. 20% referral. One card, lifetime hosting. GET YOUR CARD ₹999 PREVIEW DEMO BLVCKCARD MEMBER · LIFETIME Aarav Sharma
Hero — 'Your personal website, free for life.'
A.S Aarav Sharma CONSULTANT · MUMBAI SAVE CONTACT WHATSAPP INSTAGRAM SCROLL · SECTION 1 / 4
Profile — full-page scroll snap, NFC-opened
/AI PROFILE BUILDER HEDA · DISCOVERY "Tell me what you do — in one sentence." "I help D2C founders fix their retention loop." HEDA · TEMPLATE "Going with Dark & Gold — fits the consulting tone. Want to add a calendar?" YES SKIP PHASES · DISCOVER → TEMPLATE → WIDGETS → FINAL
Builder — Gemini walks you through it
/DASHBOARD PROFILE VIEWS 1,284 +22% · 7d LEADS CAPTURED 38 3 NEW · TODAY REFERRAL EARNINGS ₹4,396 22 CARDS · 20% RECENT TAPS Marriott BKC · 14:32+1 LEAD Phoenix Mall · 12:08VIEW BKC Cafe · 10:54+1 LEAD Office Lobby · 09:12VIEW
Dashboard — leads, taps, referrals
03 Process

Branding and engineering
at the same desk.

The compressed timeline made handoff impossible — so we didn't. AYB and Stacksmiths sat in one Slack, one Figma, one daily standup.

  1. W1–2

    Brand

    Onyx + gold + Bank Gothic. The card on the table is the brand. Logo locks, packaging, NFC encoding spec, and the photography rules — always shot on dark surfaces, never flat-lay.

  2. W3–6

    Product site

    React + Vite for the marketing front end. Three.js for the 3D card hero. Framer Motion for staggered entrances. Firebase for auth, profiles, leads, analytics. AI Profile Builder built on Gemini.

  3. W7–9

    Profile viewer

    Refactored the public profile out into Next.js 16 with SSR for OG cards and faster first paint on the cold tap. Custom scroll snapping with vibration feedback on mobile.

  4. W10

    Launch

    ₹999 standard, ₹1,699 custom. Six templates live. Cookie-based referral resolution shipped on day one — every owner is also an affiliate.

05 Outcome

One tap,
lifetime hosting.

0 industry templates Dark & Gold · Light & Gold · Medical · Cafe · Corporate · Creative
0 % referral commission auto-resolved by cookie, no manual links
0 ₹ standard card ₹1,699 with custom name + logo
0 profile sections Hero · Profession Card · Social · Referral
Next case

Leads Manager →

Power-mode calling for school admissions..

→
06 Notes

“Get a fully customizable personal website free for life when you buy any BLVCKCARD product. Choose from 6 professional templates, customize everything, and share instantly with NFC or QR.”

— BLVCKCARD, home

Two repos in one product. blackcard — React 19 + Vite 7, Firebase, Three.js, Framer Motion, Remotion for reels, Gemini for the AI builder. blackcard-profile-next — Next.js 16 App Router, React 19.2, SSR for the cold-tap path. Shared CSS-variable theme system across both. Profile URLs: profile.blvckcard.com/?id={cardId}.