Hero — Seed Apothecary

Heroes

About

Botanical apothecary hero with announcement bar, floating pill nav, 48px weight-300 display headline, and cream product-image panel. Based on Seed design system: Forest Canopy + Lime Sprout palette, pill shapes, zero shadows, tight negative tracking.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero — Seed Apothecary to your project and fits it to your theme.

Code

How Hero — Seed Apothecary is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import HeroSeed from "@/components/ui/hero-seed"

export default function HeroSeedDemo() {
  return (
    <HeroSeed
      announcementText="Free shipping on all orders over $50 · Use code SEED25 for 25% off your first order"
      badge="Clinically Studied"
      productCode="DS-01®"
      headline="Daily Synbiotic for gut + whole-body health"
      subheadline="2-in-1 pre+probiotic with 24 clinically & scientifically studied strains. Third-party tested. No refrigeration required."
      primaryCta={{ label: "Shop Now", href: "#" }}
      secondaryCta={{ label: "Take The Quiz", href: "#" }}
    />
  )
}