LV8 Research — Next.js Frontend

Headless storefront for LV8 Research. Built with Next.js 14 App Router, TypeScript, and Tailwind CSS.

Quick start

npm install
npm run dev

Open http://localhost:3000.

Try these routes:

• Homepage: /
• Product detail: /products/bpc-157
• Lab Reports archive: /lab-reports
• Individual lab report: /lab-reports/2604-a

Architecture

app/
  layout.tsx                # Root layout, font loading, metadata
  page.tsx                  # Homepage
  globals.css               # Tailwind + custom display classes
  products/
    [slug]/
      page.tsx              # Dynamic PDP route (static-rendered)
      not-found.tsx
  lab-reports/
    page.tsx                # COA archive with search/filter/sort
    [lot]/
      page.tsx              # Individual lab report detail
      not-found.tsx

components/
  Nav.tsx                   # Sticky top nav (includes Lab Reports link)
  Footer.tsx                # Footer + research-use disclaimer
  sections/                 # Homepage sections
    Hero.tsx                # (client) animated hero
    Marquee.tsx
    Products.tsx
    Testing.tsx
    Affiliate.tsx
  product/                  # PDP-specific
    ProductGallery.tsx
    PurchaseCard.tsx        # (client) qty + add-to-cart
    SpecTable.tsx
    CoaSection.tsx          # Links to full lab report
    ResearchNotes.tsx
    RelatedProducts.tsx
  lab-reports/              # Lab Reports-specific
    StatsStrip.tsx          # Archive-level stats (avg purity, pass rate)
    LabReportsBrowser.tsx   # (client) search/filter/sort interface
    FullChromatogram.tsx    # Detailed HPLC chromatogram visualization
  ui/
    MoleculeSVG.tsx
    VialIllustration.tsx
    ProductCard.tsx
    Breadcrumbs.tsx

lib/
  data.ts                   # Products / tiers / nav
  lab-reports.ts            # Lab report archive + helpers
  utils.ts                  # cn() helper

Lab Reports — design notes

This section is intentionally the heaviest trust-builder on the site. The flow:

1. /lab-reports — editorial hero, archive-wide stats (avg purity, pass rate, etc.), 3-pillar explainer of testing methodology, then the interactive browser (search, filter by compound, filter by category, sort by date/purity).
2. /lab-reports/[lot] — full COA view for a single batch. Includes:
   • Headline metrics (purity, mass spec, endotoxin, water content) in a 4-up grid
   • Detailed HPLC chromatogram with peak labels, retention time, peak area
   • Methodology + provenance table
   • Authenticity statement explaining the PDF is signed by the lab
   • Cross-links back to the product page and the archive

The browser is the only client component in this section — it needs state for search/filter/sort. Everything else renders on the server for fast first paint and good SEO.

Routing

All [slug] and [lot] routes use generateStaticParams() to pre-render at build time, and generateMetadata() for per-route SEO + social previews. Add a new product/report to the data files and it gets a route automatically on the next build.

Wiring to Shopify

For products: install @shopify/storefront-api-client, replace lib/data.ts functions with API calls.

For lab reports: keep lib/lab-reports.ts as the source of truth, but back it with a CMS (Sanity, Contentful) or a Shopify metafield. The PDF URLs should point to a CDN (S3, Cloudinary) where the actual signed lab PDFs live.

Design tokens

Defined in tailwind.config.ts:

• bg / paper — off-white background + pure-white cards
• ink / ink-soft / ink-faint — text scale
• line / line-soft — borders
• magenta / magenta-deep — primary accent
• violet — secondary (gradients only)

Fonts (loaded via next/font/google in app/layout.tsx):

• font-serif — Fraunces (display headlines)
• font-mono — JetBrains Mono (scientific metadata)
• font-sans — Inter Tight (body)

Server vs client components

Server by default. Client components only:

• components/sections/Hero.tsx — Framer Motion entrance
• components/product/PurchaseCard.tsx — quantity state + add-to-cart
• components/lab-reports/LabReportsBrowser.tsx — search/filter/sort

What's next to build

• /affiliates — full affiliate landing page (creator-focused)
• /journal/[slug] — content marketing posts
• /cart drawer + Shopify cart wiring
• Real PDF uploads + CDN routing for pdfUrl in lab reports

Disclaimer

All pages include the required research-use-only language. Consult counsel for your specific jurisdiction before launch.